From be3f66f8d96657c9cf68184e419979cddee0d080 Mon Sep 17 00:00:00 2001
From: cballevre <celestin.ballevre@protonmail.com>
Date: Wed, 12 Nov 2025 11:28:05 +0100
Subject: [PATCH 1/2] feat: Allow user to chose there preferred language

---
 public/locales/en.json                  | 15 +++++++++-
 public/locales/fr.json                  | 15 +++++++++-
 src/auth/components/change-language.tsx | 40 +++++++++++++++++++++++++
 src/auth/hooks/use-update-identity.tsx  | 24 +++++++++++++++
 src/auth/pages/settings.tsx             | 21 +++++++++++++
 src/core/components/app-layout.tsx      | 24 +++++++++++++--
 src/core/components/app-router.tsx      |  2 ++
 7 files changed, 136 insertions(+), 5 deletions(-)
 create mode 100644 src/auth/components/change-language.tsx
 create mode 100644 src/auth/hooks/use-update-identity.tsx
 create mode 100644 src/auth/pages/settings.tsx

diff --git a/public/locales/en.json b/public/locales/en.json
index a78e17f..0a06068 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -79,7 +79,17 @@
     }
   },
   "auth": {
-    "logout": "Logout"
+    "logout": "Logout",
+    "settings": {
+      "title": "Account Settings",
+      "language": {
+        "label": "Preferred language",
+        "list": {
+          "en": "English",
+          "fr": "French"
+        }
+      }
+    }
   },
   "boats": {
     "list": {
@@ -305,5 +315,8 @@
         }
       }
     }
+  },
+  "core": {
+    "settings": "Settings"
   }
 }
diff --git a/public/locales/fr.json b/public/locales/fr.json
index 46ce36a..b18a8ba 100644
--- a/public/locales/fr.json
+++ b/public/locales/fr.json
@@ -79,7 +79,17 @@
     }
   },
   "auth": {
-    "logout": "Déconnexion"
+    "logout": "Déconnexion",
+    "settings": {
+      "title": "Paramètres du compte",
+      "language": {
+        "label": "Langue préférée",
+        "list": {
+          "en": "Anglais",
+          "fr": "Français"
+        }
+      }
+    }
   },
   "boats": {
     "list": {
@@ -305,5 +315,8 @@
         }
       }
     }
+  },
+  "core": {
+    "settings": "Paramètres"
   }
 }
diff --git a/src/auth/components/change-language.tsx b/src/auth/components/change-language.tsx
new file mode 100644
index 0000000..6f455a2
--- /dev/null
+++ b/src/auth/components/change-language.tsx
@@ -0,0 +1,40 @@
+import { useTranslation } from '@refinedev/core';
+import { Form, Select } from 'antd';
+
+import { useUpdateIdentity } from '../hooks/use-update-identity';
+
+const ChangeLanguage = () => {
+  const { getLocale, changeLocale, translate } = useTranslation();
+  const { identity, update } = useUpdateIdentity();
+
+  console.log('Rendering ChangeLanguage with identity:', identity);
+
+  const handleChange = (value: string) => {
+    changeLocale(value);
+    update({ language: value });
+  };
+
+  return (
+    <Form.Item
+      label={translate('auth.settings.language.label')}
+      layout="vertical"
+    >
+      <Select
+        defaultValue={getLocale()}
+        onChange={handleChange}
+        options={[
+          {
+            value: 'en',
+            label: <span>{translate('auth.settings.language.list.en')}</span>,
+          },
+          {
+            value: 'fr',
+            label: <span>{translate('auth.settings.language.list.fr')}</span>,
+          },
+        ]}
+      />
+    </Form.Item>
+  );
+};
+
+export { ChangeLanguage };
diff --git a/src/auth/hooks/use-update-identity.tsx b/src/auth/hooks/use-update-identity.tsx
new file mode 100644
index 0000000..55845e9
--- /dev/null
+++ b/src/auth/hooks/use-update-identity.tsx
@@ -0,0 +1,24 @@
+import { useGetIdentity } from '@refinedev/core';
+
+import { supabaseClient } from '@/core/utils/supabaseClient';
+
+const useUpdateIdentity = () => {
+  const identity = useGetIdentity<{
+    id: string;
+    user_metadata?: Record<string, unknown> | null;
+  }>();
+
+  const update = async (data: Record<string, unknown>) => {
+    supabaseClient.auth.updateUser({
+      data: {
+        ...identity.data?.user_metadata,
+        ...data,
+      },
+    });
+    identity.refetch();
+  };
+
+  return { update, identity: identity.data?.user_metadata };
+};
+
+export { useUpdateIdentity };
diff --git a/src/auth/pages/settings.tsx b/src/auth/pages/settings.tsx
new file mode 100644
index 0000000..b32c27a
--- /dev/null
+++ b/src/auth/pages/settings.tsx
@@ -0,0 +1,21 @@
+import { useTranslate } from '@refinedev/core';
+import { Card } from 'antd';
+
+import { PageHeader } from '@/shared/components/page-header';
+import { PageLayout } from '@/shared/components/page-layout';
+import { ChangeLanguage } from '../components/change-language';
+
+const SettingsPage = () => {
+  const translate = useTranslate();
+
+  return (
+    <PageLayout>
+      <PageHeader title={translate('auth.settings.title')} />
+      <Card>
+        <ChangeLanguage />
+      </Card>
+    </PageLayout>
+  );
+};
+
+export { SettingsPage };
diff --git a/src/core/components/app-layout.tsx b/src/core/components/app-layout.tsx
index 042ac74..971394b 100644
--- a/src/core/components/app-layout.tsx
+++ b/src/core/components/app-layout.tsx
@@ -1,7 +1,7 @@
-import { Link } from '@refinedev/core';
+import { Link, useGetIdentity, useTranslation } from '@refinedev/core';
 import type { MenuProps } from 'antd';
 import { Grid, Layout as LayoutAntd } from 'antd';
-import type { FC } from 'react';
+import { type FC, useMemo } from 'react';
 
 import { LogoutButton } from '@/auth/components/logout-button';
 
@@ -15,6 +15,18 @@ interface LayoutProps {
 
 const AppLayout: FC<LayoutProps> = ({ children }) => {
   const screens = useBreakpoint();
+  const identity = useGetIdentity<{
+    id: string;
+    user_metadata?: Record<string, unknown> | null;
+  }>();
+  const { translate, changeLocale, getLocale } = useTranslation();
+
+  useMemo(() => {
+    const userLanguage = identity.data?.user_metadata?.language as string;
+    if (userLanguage && userLanguage !== getLocale()) {
+      changeLocale(userLanguage);
+    }
+  }, [identity, changeLocale, getLocale]);
 
   return (
     <LayoutAntd style={{ minHeight: '100vh' }}>
@@ -32,7 +44,13 @@ const AppLayout: FC<LayoutProps> = ({ children }) => {
           <span>Vessel</span>
           <span style={{ color: '#1890ff' }}>Vigil</span>
         </Link>
-        <LogoutButton style={{ marginLeft: 'auto' }} />
+        <Link
+          to="/settings"
+          style={{ color: 'white', marginRight: '20px', marginLeft: 'auto' }}
+        >
+          {translate('core.settings')}
+        </Link>
+        <LogoutButton />
       </Header>
       <Content>{children}</Content>
       <Footer style={{ textAlign: 'center' }}>
diff --git a/src/core/components/app-router.tsx b/src/core/components/app-router.tsx
index 23ffb1f..c7ba99e 100644
--- a/src/core/components/app-router.tsx
+++ b/src/core/components/app-router.tsx
@@ -3,6 +3,7 @@ import { Authenticated } from '@refinedev/core';
 import { Navigate, Outlet, Route, Routes } from 'react-router';
 
 import { Login } from '@/auth/pages/login';
+import { SettingsPage } from '@/auth/pages/settings';
 import { BoatLayout } from '@/boats/components/boat-layout';
 import { AddBoat } from '@/boats/pages/add';
 import { BoatDashboard } from '@/boats/pages/dashboard';
@@ -57,6 +58,7 @@ const AppRouter = () => {
             <Route path="access" element={<AccessSettings />} />
           </Route>
         </Route>
+        <Route path="/settings" element={<SettingsPage />} />
       </Route>
       <Route
         element={

From f3d3f5278143cf89e972005365e881eddf4ad54d Mon Sep 17 00:00:00 2001
From: cballevre <celestin.ballevre@protonmail.com>
Date: Wed, 12 Nov 2025 11:35:15 +0100
Subject: [PATCH 2/2] fix(boats): Issue in translation key

---
 src/boats/pages/list.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/boats/pages/list.tsx b/src/boats/pages/list.tsx
index ec99b38..83963fc 100644
--- a/src/boats/pages/list.tsx
+++ b/src/boats/pages/list.tsx
@@ -30,7 +30,7 @@ const ListBoat = () => {
             <Card hoverable style={{ textAlign: 'center' }}>
               <PlusOutlined style={{ fontSize: 24 }} />
               <span style={{ marginLeft: 16 }}>
-                {translate('ListBoat.add')}
+                {translate('boats.list.add')}
               </span>
             </Card>
           </Link>