fix(general): fixed comments

app/(marketing)/page.tsx

@@ -6,6 +6,7 @@ import { buttonVariants } from "@/components/ui/button"
 import Faq from "@/components/app/homepage/faq"
 import Features from "@/components/app/homepage/features"
 import GetStarterd from "@/components/app/homepage/get-started"
+import { Icons } from "@/components/icons"
 
 export default async function IndexPage() {
   const user = await getCurrentUser()
@@ -59,16 +60,7 @@ export default async function IndexPage() {
               href="https://github.com/Matergi/Translo"
               className={cn(buttonVariants())}
             >
-              <svg
-                className="shrink-0 size-3.5 mr-2"
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                fill="currentColor"
-                viewBox="0 0 16 16"
-              >
-                <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
-              </svg>
+              <Icons.gitHub />
               Open github
             </a>
           </div>

components/app/account/dialogs/change-email.tsx

@@ -15,6 +15,7 @@ import {
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { toast } from "@/components/ui/use-toast"
+import { Icons } from "@/components/icons"
 import { changeEmail } from "@/app/api/users/utils"
 
 type ChangeEmailDialogProps = {
@@ -72,21 +73,7 @@ const ChangeEmailDialog = (props: ChangeEmailDialogProps) => {
           type="button"
           className="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
         >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            className="lucide lucide-lock"
-          >
-            <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
-            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
-          </svg>
+          <Icons.email />
           Change email
         </button>
       </DialogTrigger>

components/app/account/dialogs/change-password.tsx

@@ -15,6 +15,7 @@ import {
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { toast } from "@/components/ui/use-toast"
+import { Icons } from "@/components/icons"
 
 const ChangePasswordDialog = () => {
   const [oldPassword, setOldPassword] = useState("")
@@ -63,21 +64,7 @@ const ChangePasswordDialog = () => {
           type="button"
           className="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
         >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            className="lucide lucide-lock"
-          >
-            <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
-            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
-          </svg>
+          <Icons.password />
           Change password
         </button>
       </DialogTrigger>

components/app/project/dialogs/add-new-constant-translation.tsx

@@ -13,6 +13,7 @@ import {
 } from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
+import { Icons } from "@/components/icons"
 
 export type NewConstantTranslation = {
   _id: string
@@ -46,19 +47,7 @@ const AddNewConstantTranslation = (props: Props) => {
     <Dialog>
       <DialogTrigger asChild>
         <button className="t-button">
-          <svg
-            className="h-3.5 w-3.5"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-            aria-hidden="true"
-          >
-            <path
-              clipRule="evenodd"
-              fillRule="evenodd"
-              d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
-            />
-          </svg>
+          <Icons.add className="h-3.5 w-3.5" />
           Add word
         </button>
       </DialogTrigger>

components/app/project/dialogs/add-new-keyword.tsx

@@ -13,6 +13,7 @@ import {
 } from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
+import { Icons } from "@/components/icons"
 
 export type NewKeyword = {
   key: string
@@ -61,19 +62,7 @@ const AddNewKeyword = (props: Props) => {
     <Dialog>
       <DialogTrigger asChild>
         <Button>
-          <svg
-            className="mr-2 h-3.5 w-3.5"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-            aria-hidden="true"
-          >
-            <path
-              clipRule="evenodd"
-              fillRule="evenodd"
-              d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
-            />
-          </svg>
+          <Icons.add className="mr-2 h-3.5 w-3.5" />
           Add keyword
         </Button>
       </DialogTrigger>
@@ -114,7 +103,7 @@ const AddNewKeyword = (props: Props) => {
         </div>
         <DialogFooter>
           <DialogClose asChild>
-            <Button onClick={onSubmit} disabled={!key || !context}>
+            <Button onClick={onSubmit} disabled={!key}>
               Add keyword
             </Button>
           </DialogClose>

components/app/project/dialogs/add-new-languages.tsx

@@ -13,6 +13,7 @@ import {
 } from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
+import { Icons } from "@/components/icons"
 
 type Props = {
   addLanguage: (language: Language) => void
@@ -62,19 +63,7 @@ const AddNewLanguage = (props: Props) => {
     <Dialog>
       <DialogTrigger asChild>
         <button className="t-button">
-          <svg
-            className="h-3.5 w-3.5"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-            aria-hidden="true"
-          >
-            <path
-              clipRule="evenodd"
-              fillRule="evenodd"
-              d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
-            />
-          </svg>
+          <Icons.add className="h-3.5 w-3.5" />
           Add language
         </button>
       </DialogTrigger>

components/app/project/settings-slide-over.tsx

@@ -2,10 +2,14 @@ import { ChangeEvent, useCallback } from "react"
 import {
   ConstantTranslations,
   EditLanguageType,
+  Formality,
   Language,
   ProjectSettings,
+  Sex,
 } from "@/store/useI18nState"
 
+import i18n from "@/lib/i18n"
+
 import SlideOver, { SlideOverRow } from "../../slide-over"
 import AddNewConstantTranslation from "./dialogs/add-new-constant-translation"
 import AddNewLanguage from "./dialogs/add-new-languages"
@@ -76,8 +80,9 @@ const ProjectSettingsSlideOver = (props: Props) => {
       </div>
       <div className="relative p-4 flex-1 sm:px-6">
         <h4 className="text-sm leading-6 text-gray-700" id="slide-over-title">
-          To achieve a well-done translation, we need to provide context to the
-          AI
+          {i18n.t(
+            "app.project.settings.To achieve a well-done translation, we need to provide context to the AI"
+          )}
         </h4>
         <SlideOverRow title="Brief project description">
           <textarea
@@ -97,47 +102,47 @@ const ProjectSettingsSlideOver = (props: Props) => {
                 <input
                   type="radio"
                   className="hover:cursor-pointer shrink-0 mt-0.5 border-gray-300 rounded-full text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
-                  checked={settings.formality === "formal"}
+                  checked={settings.formality === Formality.Formal}
                   onChange={() => {
                     editSettings({
-                      formality: "formal",
+                      formality: Formality.Formal,
                     })
                   }}
                 />
                 <span className="text-sm text-gray-500 ms-3 dark:text-gray-400">
-                  Formal
+                  {i18n.t("app.project.settings.Formal")}
                 </span>
               </label>
 
               <label className="hover:cursor-pointer flex py-2 px-3 w-full border border-gray-200 shadow-sm -mt-px -ms-px first:rounded-t-lg last:rounded-b-lg sm:first:rounded-s-lg sm:mt-0 sm:first:ms-0 sm:first:rounded-se-none sm:last:rounded-es-none sm:last:rounded-e-lg text-sm relative focus:z-10 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600">
                 <input
                   type="radio"
                   className="hover:cursor-pointer shrink-0 mt-0.5 border-gray-300 rounded-full text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
-                  checked={settings.formality === "informal"}
+                  checked={settings.formality === Formality.Informal}
                   onChange={() => {
                     editSettings({
-                      formality: "informal",
+                      formality: Formality.Informal,
                     })
                   }}
                 />
                 <span className="text-sm text-gray-500 ms-3 dark:text-gray-400">
-                  Informal
+                  {i18n.t("app.project.settings.Informal")}
                 </span>
               </label>
 
               <label className="hover:cursor-pointer flex py-2 px-3 w-full border border-gray-200 shadow-sm -mt-px -ms-px first:rounded-t-lg last:rounded-b-lg sm:first:rounded-s-lg sm:mt-0 sm:first:ms-0 sm:first:rounded-se-none sm:last:rounded-es-none sm:last:rounded-e-lg text-sm relative focus:z-10 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600">
                 <input
                   type="radio"
                   className="hover:cursor-pointer shrink-0 mt-0.5 border-gray-300 rounded-full text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
-                  checked={settings.formality === "neutral"}
+                  checked={settings.formality === Formality.Neutral}
                   onChange={() => {
                     editSettings({
-                      formality: "neutral",
+                      formality: Formality.Neutral,
                     })
                   }}
                 />
                 <span className="text-sm text-gray-500 ms-3 dark:text-gray-400">
-                  Neutral
+                  {i18n.t("app.project.settings.Neutral")}
                 </span>
               </label>
             </div>
@@ -151,71 +156,71 @@ const ProjectSettingsSlideOver = (props: Props) => {
                 <input
                   type="checkbox"
                   className="hover:cursor-pointer shrink-0 mt-0.5 border-gray-300 rounded-full text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
-                  checked={settings.audience.includes("male")}
+                  checked={settings.audience.includes(Sex.Male)}
                   onChange={(event) => {
                     if (event.target.checked) {
                       editSettings({
-                        audience: [...settings.audience, "male"],
+                        audience: [...settings.audience, Sex.Male],
                       })
                     } else {
                       editSettings({
                         audience: settings.audience.filter(
-                          (gender) => gender !== "male"
+                          (gender) => gender !== Sex.Male
                         ),
                       })
                     }
                   }}
                 />
                 <span className="text-sm text-gray-500 ms-3 dark:text-gray-400">
-                  Male
+                  {i18n.t("app.project.settings.Male")}
                 </span>
               </label>
 
               <label className="hover:cursor-pointer flex py-2 px-3 w-full border border-gray-200 shadow-sm -mt-px -ms-px first:rounded-t-lg last:rounded-b-lg sm:first:rounded-s-lg sm:mt-0 sm:first:ms-0 sm:first:rounded-se-none sm:last:rounded-es-none sm:last:rounded-e-lg text-sm relative focus:z-10 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600">
                 <input
                   type="checkbox"
                   className="hover:cursor-pointer shrink-0 mt-0.5 border-gray-300 rounded-full text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
-                  checked={settings.audience.includes("female")}
+                  checked={settings.audience.includes(Sex.Female)}
                   onChange={(event) => {
                     if (event.target.checked) {
                       editSettings({
-                        audience: [...settings.audience, "female"],
+                        audience: [...settings.audience, Sex.Female],
                       })
                     } else {
                       editSettings({
                         audience: settings.audience.filter(
-                          (gender) => gender !== "female"
+                          (gender) => gender !== Sex.Female
                         ),
                       })
                     }
                   }}
                 />
                 <span className="text-sm text-gray-500 ms-3 dark:text-gray-400">
-                  Female
+                  {i18n.t("app.project.settings.Female")}
                 </span>
               </label>
 
               <label className="hover:cursor-pointer flex py-2 px-3 w-full border border-gray-200 shadow-sm -mt-px -ms-px first:rounded-t-lg last:rounded-b-lg sm:first:rounded-s-lg sm:mt-0 sm:first:ms-0 sm:first:rounded-se-none sm:last:rounded-es-none sm:last:rounded-e-lg text-sm relative focus:z-10 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600">
                 <input
                   type="checkbox"
                   className="hover:cursor-pointer shrink-0 mt-0.5 border-gray-300 rounded-full text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-500 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
-                  checked={settings.audience.includes("other")}
+                  checked={settings.audience.includes(Sex.Other)}
                   onChange={(event) => {
                     if (event.target.checked) {
                       editSettings({
-                        audience: [...settings.audience, "other"],
+                        audience: [...settings.audience, Sex.Other],
                       })
                     } else {
                       editSettings({
                         audience: settings.audience.filter(
-                          (gender) => gender !== "other"
+                          (gender) => gender !== Sex.Other
                         ),
                       })
                     }
                   }}
                 />
                 <span className="text-sm text-gray-500 ms-3 dark:text-gray-400">
-                  Other
+                  {i18n.t("app.project.settings.Other")}
                 </span>
               </label>
             </div>

components/icons.tsx

@@ -12,7 +12,9 @@ import {
   Languages,
   Laptop,
   Loader2,
+  Lock,
   LucideProps,
+  Mail,
   Moon,
   MoreVertical,
   Pizza,
@@ -52,21 +54,19 @@ export const Icons = {
   laptop: Laptop,
   gitHub: ({ ...props }: LucideProps) => (
     <svg
-      aria-hidden="true"
-      focusable="false"
-      data-prefix="fab"
-      data-icon="github"
-      role="img"
+      className="shrink-0 size-3.5 mr-2"
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 496 512"
+      width="16"
+      height="16"
+      fill="currentColor"
+      viewBox="0 0 16 16"
       {...props}
     >
-      <path
-        fill="currentColor"
-        d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
-      ></path>
+      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
     </svg>
   ),
   twitter: Twitter,
   check: Check,
+  email: Mail,
+  password: Lock,
 }