feat: implement i18n

.gitignore

@@ -9,3 +9,5 @@
 .mf
 .wrangler
 .dev.vars
+wrangler.json*
+wrangler.toml

.vscode/extensions.json

@@ -1,3 +1,7 @@
 {
-  "recommendations": ["biomejs.biome", "redhat.vscode-yaml"]
+  "recommendations": [
+    "biomejs.biome",
+    "redhat.vscode-yaml",
+    "lokalise.i18n-ally"
+  ]
 }

.vscode/settings.json

@@ -46,5 +46,9 @@
   },
   "[yaml]": {
     "editor.defaultFormatter": "redhat.vscode-yaml"
-  }
+  },
+  "i18n-ally.defaultNamespace": "translation",
+  "i18n-ally.localesPaths": ["app/lib/i18n/locales"],
+  "i18n-ally.keystyle": "nested",
+  "cSpell.words": ["unixepoch"]
 }

app/components/auth-layout.tsx

@@ -1,6 +1,9 @@
 import { ArrowLeftIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 import { Button } from "~/components/ui/button";
+import { ColorSchemeToggle } from "./color-scheme-toggle";
+import { LangSwitcher } from "./lang/lang-switcher";
 
 export function AuthLayout({
   title,
@@ -11,13 +14,19 @@ export function AuthLayout({
   description: string;
   children: React.ReactNode;
 }) {
+  const { t } = useTranslation();
+
   return (
     <div className="flex h-screen w-full items-center justify-center px-4">
       <Button variant="ghost" size="sm" className="fixed top-4 left-4" asChild>
         <Link to="/">
-          <ArrowLeftIcon className="size-4" /> Home
+          <ArrowLeftIcon className="size-4" /> {t("home.title")}
         </Link>
       </Button>
+      <div className="fixed top-4 right-4 flex items-center gap-4 sm:right-10">
+        <LangSwitcher />
+        <ColorSchemeToggle />
+      </div>
       <div className="mx-auto w-[300px] sm:w-[360px]">
         <div className="flex flex-col gap-6">
           <div className="flex flex-col items-center gap-1 text-center">

app/components/error-boundary.tsx

@@ -1,4 +1,5 @@
 import { MehIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import { isRouteErrorResponse, useRouteError } from "react-router";
 import { buttonVariants } from "./ui/button";
 
@@ -78,9 +79,10 @@ export function ProductionErrorDisplay({
 
 export function GeneralErrorBoundary() {
   const error = useRouteError();
+  const { t } = useTranslation();
 
-  const defaultMessage = "Oops! App Crashed 💥";
-  const defaultDetails = "Please reload the page. or try again later.";
+  const defaultMessage = t("errors.crashed.title");
+  const defaultDetails = t("errors.crashed.description");
 
   // Handle route errors, Example: 404, 500, 503
   if (isRouteErrorResponse(error)) {

app/components/lang/lang-switcher.tsx

@@ -0,0 +1,48 @@
+import { useTranslation } from "react-i18next";
+import { Button } from "~/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import { type SupportedLng, locales, localesByLang } from "~/lib/i18n/config";
+import { useSetLocale } from "~/lib/i18n/hook";
+
+export function LangSwitcher() {
+  // const hydrated = useHydrated();
+  const setLocale = useSetLocale();
+  const { i18n } = useTranslation();
+
+  const handleChange = (e: React.MouseEvent<HTMLDivElement>) => {
+    const lang = e.currentTarget.dataset.lang as SupportedLng;
+    setLocale(lang);
+  };
+
+  // if (!hydrated) {
+  //   return null;
+  // }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm">
+          {localesByLang[i18n.language]?.label}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {locales.map((v) => {
+          return (
+            <DropdownMenuItem
+              key={v.lang}
+              data-lang={v.lang}
+              onClick={handleChange}
+            >
+              {v.label}
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

app/components/settings/account-action.tsx

@@ -2,6 +2,7 @@ import { CircleAlertIcon } from "lucide-react";
 import { useState } from "react";
 import { useFetcher } from "react-router";
 
+import { useTranslation } from "react-i18next";
 import { Button } from "~/components/ui/button";
 import {
   Dialog,
@@ -17,6 +18,7 @@ import { Input } from "~/components/ui/input";
 import { LoadingButton } from "../forms";
 
 export function DeleteAccount({ email }: { email: string }) {
+  const { t } = useTranslation();
   const [inputValue, setInputValue] = useState("");
   const fetcher = useFetcher({ key: "delete-account" });
   const isPending = fetcher.state !== "idle";
@@ -25,7 +27,7 @@ export function DeleteAccount({ email }: { email: string }) {
     <Dialog>
       <DialogTrigger asChild>
         <Button variant="destructive" size="sm">
-          Delete
+          {t("common.delete")}
         </Button>
       </DialogTrigger>
       <DialogContent className="sm:max-w-sm">
@@ -38,11 +40,11 @@ export function DeleteAccount({ email }: { email: string }) {
           </div>
           <DialogHeader>
             <DialogTitle className="sm:text-center">
-              Final confirmation
+              {t("account.confirmation")}
             </DialogTitle>
             <DialogDescription className="sm:text-center">
-              This action cannot be undone. To confirm, please enter the email
-              address <span className="text-foreground">{email}</span>.
+              {t("account.confirmationWarn")}{" "}
+              <span className="text-foreground">{email}</span>.
             </DialogDescription>
           </DialogHeader>
         </div>
@@ -61,12 +63,12 @@ export function DeleteAccount({ email }: { email: string }) {
           <DialogFooter>
             <DialogClose asChild>
               <Button type="button" variant="outline" className="flex-1">
-                Cancel
+                {t("common.cancel")}
               </Button>
             </DialogClose>
             <LoadingButton
-              buttonText="Delete"
-              loadingText="Deleting..."
+              buttonText={t("common.delete")}
+              loadingText={t("common.deleting")}
               isPending={isPending}
               variant="destructive"
               className="flex-1"
@@ -80,13 +82,14 @@ export function DeleteAccount({ email }: { email: string }) {
 }
 
 export function SignOut() {
+  const { t } = useTranslation();
   const signOutFetcher = useFetcher();
   const signOutIsPending = signOutFetcher.state !== "idle";
 
   return (
     <LoadingButton
-      buttonText="Sign out"
-      loadingText="Signing out..."
+      buttonText={t("auth.signOut")}
+      loadingText={t("auth.signingOut")}
       isPending={signOutIsPending}
       variant="outline"
       size="sm"

app/components/settings/password-action.tsx

@@ -3,6 +3,7 @@ import { getZodConstraint, parseWithZod } from "@conform-to/zod";
 import { useEffect, useState } from "react";
 import { useFetcher } from "react-router";
 
+import { useTranslation } from "react-i18next";
 import { Button } from "~/components/ui/button";
 import {
   Dialog,
@@ -19,6 +20,7 @@ import type { clientAction } from "~/routes/settings/password";
 import { LoadingButton, PasswordField } from "../forms";
 
 export function ChangePassword() {
+  const { t } = useTranslation();
   const fetcher = useFetcher<typeof clientAction>({ key: "change-password" });
   const isPending = fetcher.state !== "idle";
   const [open, setOpen] = useState(false);
@@ -41,16 +43,13 @@ export function ChangePassword() {
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
         <Button variant="outline" size="sm">
-          Change Password
+          {t("password.change.title")}
         </Button>
       </DialogTrigger>
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
-          <DialogTitle>Change Password</DialogTitle>
-          <DialogDescription>
-            Make changes to your password here. You can change your password and
-            set a new password.
-          </DialogDescription>
+          <DialogTitle>{t("password.change.title")}</DialogTitle>
+          <DialogDescription>{t("password.change.action")}</DialogDescription>
         </DialogHeader>
         <fetcher.Form
           method="post"
@@ -59,7 +58,7 @@ export function ChangePassword() {
           {...getFormProps(form)}
         >
           <PasswordField
-            labelProps={{ children: "Current Password" }}
+            labelProps={{ children: t("user.currentPassword") }}
             inputProps={{
               ...getInputProps(fields.currentPassword, { type: "password" }),
               autoComplete: "current-password",
@@ -68,7 +67,7 @@ export function ChangePassword() {
             errors={fields.currentPassword.errors}
           />
           <PasswordField
-            labelProps={{ children: "New Password" }}
+            labelProps={{ children: t("user.newPassword") }}
             inputProps={{
               ...getInputProps(fields.newPassword, { type: "password" }),
               autoComplete: "new-password",
@@ -77,7 +76,7 @@ export function ChangePassword() {
             errors={fields.newPassword.errors}
           />
           <PasswordField
-            labelProps={{ children: "Confirm New Password" }}
+            labelProps={{ children: t("user.confirmPassword") }}
             inputProps={{
               ...getInputProps(fields.confirmPassword, { type: "password" }),
               autoComplete: "confirm-password",
@@ -88,12 +87,12 @@ export function ChangePassword() {
           <DialogFooter>
             <DialogClose asChild>
               <Button type="button" variant="outline" disabled={isPending}>
-                Cancel
+                {t("common.cancel")}
               </Button>
             </DialogClose>
             <LoadingButton
-              buttonText="Save changes"
-              loadingText="Saving..."
+              buttonText={t("common.save")}
+              loadingText={t("common.saving")}
               isPending={isPending}
             />
           </DialogFooter>

app/components/settings/settings-menu.tsx

@@ -1,3 +1,4 @@
+import type { i18n } from "i18next";
 import {
   HardDriveIcon,
   KeyIcon,
@@ -6,6 +7,7 @@ import {
   SunMoonIcon,
   UserIcon,
 } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import { NavLink, href } from "react-router";
 
 import { cn } from "~/lib/utils";
@@ -16,35 +18,41 @@ interface MenuItem {
   icon: LucideIcon;
 }
 
-const menuItems: MenuItem[] = [
-  {
-    title: "Account",
-    url: href("/settings/account"),
-    icon: UserIcon,
-  },
-  {
-    title: "Appearance",
-    url: href("/settings/appearance"),
-    icon: SunMoonIcon,
-  },
-  {
-    title: "Connections",
-    url: href("/settings/connections"),
-    icon: Link2Icon,
-  },
-  {
-    title: "Sessions",
-    url: href("/settings/sessions"),
-    icon: HardDriveIcon,
-  },
-  {
-    title: "Password",
-    url: href("/settings/password"),
-    icon: KeyIcon,
-  },
-];
+function getMenuItems(i18n: i18n): MenuItem[] {
+  const { t } = i18n;
+  return [
+    {
+      title: t("account.title"),
+      url: href("/settings/account"),
+      icon: UserIcon,
+    },
+    {
+      title: t("appearance.title"),
+      url: href("/settings/appearance"),
+      icon: SunMoonIcon,
+    },
+    {
+      title: t("connections.title"),
+      url: href("/settings/connections"),
+      icon: Link2Icon,
+    },
+    {
+      title: t("sessions.title"),
+      url: href("/settings/sessions"),
+      icon: HardDriveIcon,
+    },
+    {
+      title: t("user.password"),
+      url: href("/settings/password"),
+      icon: KeyIcon,
+    },
+  ];
+}
 
 export function Menu() {
+  const { i18n } = useTranslation();
+  const menuItems = getMenuItems(i18n);
+
   return (
     <div className="pb-12">
       <div className="relative flex gap-6 overflow-x-auto sm:gap-8">