From f86ceb3943fa949429158bd6b2da8ea7788cd9d2 Mon Sep 17 00:00:00 2001
From: bartek <bartzagr@gmail.com>
Date: Sat, 2 Nov 2024 20:26:41 +0100
Subject: [PATCH] feat: i18n

---
 assets/locales/en/messages.json  | 42 ++++++++++++++++++++++++++++++++
 src/app/tabs/login.tsx           |  4 +--
 src/app/tabs/register.tsx        |  4 +--
 src/components/auth/index.tsx    |  6 +++--
 src/components/auth/login.tsx    | 14 +++++++----
 src/components/auth/register.tsx | 16 +++++++-----
 src/components/auth/user.tsx     |  2 +-
 src/components/common/theme.tsx  |  8 ++----
 src/components/layout/footer.tsx |  4 +--
 src/components/ui/form.tsx       |  2 +-
 10 files changed, 75 insertions(+), 27 deletions(-)

diff --git a/assets/locales/en/messages.json b/assets/locales/en/messages.json
index 3efb771..212a0a2 100644
--- a/assets/locales/en/messages.json
+++ b/assets/locales/en/messages.json
@@ -21,5 +21,47 @@
   },
   "contentScriptUI": {
     "message": "Content Script UI"
+  },
+  "light": {
+    "message": "Light"
+  },
+  "dark": {
+    "message": "Dark"
+  },
+  "system": {
+    "message": "System"
+  },
+  "name": {
+    "message": "Name"
+  },
+  "email": {
+    "message": "Email"
+  },
+  "password": {
+    "message": "Password"
+  },
+  "login": {
+    "message": "Login"
+  },
+  "loginDescription": {
+    "message": "Enter your email below to login to your account"
+  },
+  "register": {
+    "message": "Register"
+  },
+  "registerDescription": {
+    "message": "Enter your details below to register for an account"
+  },
+  "logout": {
+    "message": "Logout"
+  },
+  "continueWith": {
+    "message": "Or continue with"
+  },
+  "alreadyHaveAccount": {
+    "message": "Already have an account?"
+  },
+  "dontHaveAccount": {
+    "message": "Don't have an account?"
   }
 }
diff --git a/src/app/tabs/login.tsx b/src/app/tabs/login.tsx
index 2cb803d..c40c0cb 100644
--- a/src/app/tabs/login.tsx
+++ b/src/app/tabs/login.tsx
@@ -3,8 +3,8 @@ import { Auth } from "~/components/auth";
 const LoginTab = () => {
   return (
     <Auth.Layout
-      title="Login"
-      description="Enter your email below to login to your account"
+      title={chrome.i18n.getMessage("login")}
+      description={chrome.i18n.getMessage("loginDescription")}
     >
       <Auth.Socials />
       <Auth.Separator />
diff --git a/src/app/tabs/register.tsx b/src/app/tabs/register.tsx
index 6a15d84..4a9f080 100644
--- a/src/app/tabs/register.tsx
+++ b/src/app/tabs/register.tsx
@@ -3,8 +3,8 @@ import { Auth } from "~/components/auth";
 const RegisterTab = () => {
   return (
     <Auth.Layout
-      title="Register"
-      description="Enter your details below to create your account"
+      title={chrome.i18n.getMessage("register")}
+      description={chrome.i18n.getMessage("registerDescription")}
     >
       <Auth.Socials />
       <Auth.Separator />
diff --git a/src/components/auth/index.tsx b/src/components/auth/index.tsx
index 35180f9..475c853 100644
--- a/src/components/auth/index.tsx
+++ b/src/components/auth/index.tsx
@@ -46,7 +46,7 @@ const Separator = () => {
       </div>
       <div className="relative flex justify-center text-xs uppercase">
         <span className="bg-card px-2 text-muted-foreground">
-          Or continue with
+          {chrome.i18n.getMessage("continueWith")}
         </span>
       </div>
     </div>
@@ -58,7 +58,9 @@ const Socials = () => {
     mutationFn: (provider: Provider) =>
       supabase.auth.signInWithOAuth({
         provider,
-        options: { redirectTo: location.href },
+        options: {
+          redirectTo: `${new URL(location.href).origin}/options.html`,
+        },
       }),
     onError: (error) => toast.error(error.message),
   });
diff --git a/src/components/auth/login.tsx b/src/components/auth/login.tsx
index ec9f414..d153867 100644
--- a/src/components/auth/login.tsx
+++ b/src/components/auth/login.tsx
@@ -52,7 +52,7 @@ export const Login = () => {
           name="email"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Email</FormLabel>
+              <FormLabel>{chrome.i18n.getMessage("email")}</FormLabel>
               <FormControl>
                 <Input placeholder="email@example.com" {...field} />
               </FormControl>
@@ -66,7 +66,7 @@ export const Login = () => {
           name="password"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Password</FormLabel>
+              <FormLabel>{chrome.i18n.getMessage("password")}</FormLabel>
               <FormControl>
                 <Input type="password" placeholder="••••••••" {...field} />
               </FormControl>
@@ -75,14 +75,18 @@ export const Login = () => {
           )}
         />
         <Button type="submit" className="w-full mt-2" disabled={isPending}>
-          {isPending ? <Loader2 className="size-4 animate-spin" /> : "Login"}
+          {isPending ? (
+            <Loader2 className="size-4 animate-spin" />
+          ) : (
+            chrome.i18n.getMessage("login")
+          )}
         </Button>
       </form>
 
       <div className="mt-4 text-center text-sm">
-        Don&apos;t have an account?{" "}
+        {chrome.i18n.getMessage("dontHaveAccount")}{" "}
         <a href="/tabs/register.html" className="underline hover:no-underline">
-          Sign up
+          {chrome.i18n.getMessage("register")}
         </a>
       </div>
     </Form>
diff --git a/src/components/auth/register.tsx b/src/components/auth/register.tsx
index 8066a08..b3fb844 100644
--- a/src/components/auth/register.tsx
+++ b/src/components/auth/register.tsx
@@ -53,7 +53,7 @@ export const Register = () => {
           name="name"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Name</FormLabel>
+              <FormLabel>{chrome.i18n.getMessage("name")}</FormLabel>
               <FormControl>
                 <Input placeholder="John Doe" {...field} />
               </FormControl>
@@ -67,7 +67,7 @@ export const Register = () => {
           name="email"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Email</FormLabel>
+              <FormLabel>{chrome.i18n.getMessage("email")}</FormLabel>
               <FormControl>
                 <Input placeholder="email@example.com" {...field} />
               </FormControl>
@@ -81,7 +81,7 @@ export const Register = () => {
           name="password"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Password</FormLabel>
+              <FormLabel>{chrome.i18n.getMessage("password")}</FormLabel>
               <FormControl>
                 <Input type="password" placeholder="••••••••" {...field} />
               </FormControl>
@@ -90,14 +90,18 @@ export const Register = () => {
           )}
         />
         <Button type="submit" className="w-full mt-2" disabled={isPending}>
-          {isPending ? <Loader2 className="size-4 animate-spin" /> : "Register"}
+          {isPending ? (
+            <Loader2 className="size-4 animate-spin" />
+          ) : (
+            chrome.i18n.getMessage("register")
+          )}
         </Button>
       </form>
 
       <div className="mt-4 text-center text-sm">
-        Already have an account?{" "}
+        {chrome.i18n.getMessage("alreadyHaveAccount")}{" "}
         <a href="/tabs/login.html" className="underline hover:no-underline">
-          Sign in
+          {chrome.i18n.getMessage("login")}
         </a>
       </div>
     </Form>
diff --git a/src/components/auth/user.tsx b/src/components/auth/user.tsx
index b262c70..1c811b7 100644
--- a/src/components/auth/user.tsx
+++ b/src/components/auth/user.tsx
@@ -89,7 +89,7 @@ export const User = () => {
             className="w-full"
             onClick={() => supabase.auth.signOut()}
           >
-            Logout
+            {chrome.i18n.getMessage("logout")}
           </button>
         </DropdownMenuItem>
       </DropdownMenuContent>
diff --git a/src/components/common/theme.tsx b/src/components/common/theme.tsx
index 5ea7977..a491bd7 100644
--- a/src/components/common/theme.tsx
+++ b/src/components/common/theme.tsx
@@ -37,12 +37,8 @@ export const ThemeSwitch = memo<ThemeSwitchProps>(({ className }) => {
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
         {Object.values(Theme).map((theme) => (
-          <DropdownMenuItem
-            key={theme}
-            onClick={() => setTheme(theme)}
-            className="capitalize"
-          >
-            {theme}
+          <DropdownMenuItem key={theme} onClick={() => setTheme(theme)}>
+            {chrome.i18n.getMessage(theme)}
           </DropdownMenuItem>
         ))}
       </DropdownMenuContent>
diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
index 7f3e7e5..4328a59 100644
--- a/src/components/layout/footer.tsx
+++ b/src/components/layout/footer.tsx
@@ -12,7 +12,7 @@ export const Footer = () => {
           className: "w-[6.5rem]",
         })}
       >
-        Star{" "}
+        {chrome.i18n.getMessage("star")}{" "}
         <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
           <title>GitHub</title>
           <path
@@ -31,7 +31,7 @@ export const Footer = () => {
           className: "w-[6.5rem]",
         })}
       >
-        Follow{" "}
+        {chrome.i18n.getMessage("follow")}{" "}
         <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
           <title>X</title>
           <path
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
index 8a1e7fa..47dc4d4 100644
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -156,7 +156,7 @@ const FormMessage = React.forwardRef<
     <p
       ref={ref}
       id={formMessageId}
-      className={cn("text-sm font-medium text-destructive", className)}
+      className={cn("text-xs font-medium text-destructive", className)}
       {...props}
     >
       {body}