From 41ad15e20b2ee5df5525a252fb812fe99b7a8254 Mon Sep 17 00:00:00 2001
From: Emmanuel Pelletier <manu@habite.la>
Date: Wed, 24 Jul 2024 16:51:35 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20new=20settings=20dialog?=
 =?UTF-8?q?=20to=20handle=20user=20account/language?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

add a settings button directly in the homepage to change language or see
user account settings
---
 src/frontend/panda.config.ts                  |  2 +-
 .../src/features/home/routes/Home.tsx         |  3 ++
 .../settings/components/SettingsButton.tsx    | 16 +++++++
 .../settings/components/SettingsDialog.tsx    | 46 +++++++++++++++++++
 src/frontend/src/features/settings/index.ts   |  1 +
 src/frontend/src/i18n/LanguageSelector.tsx    |  2 +-
 src/frontend/src/i18n/useLanguageLabels.ts    |  8 +++-
 src/frontend/src/locales/de/settings.json     | 15 ++++++
 src/frontend/src/locales/en/settings.json     | 15 ++++++
 src/frontend/src/locales/fr/settings.json     | 15 ++++++
 src/frontend/src/primitives/Button.tsx        | 22 +++++++--
 11 files changed, 139 insertions(+), 6 deletions(-)
 create mode 100644 src/frontend/src/features/settings/components/SettingsButton.tsx
 create mode 100644 src/frontend/src/features/settings/components/SettingsDialog.tsx
 create mode 100644 src/frontend/src/features/settings/index.ts
 create mode 100644 src/frontend/src/locales/de/settings.json
 create mode 100644 src/frontend/src/locales/en/settings.json
 create mode 100644 src/frontend/src/locales/fr/settings.json

diff --git a/src/frontend/panda.config.ts b/src/frontend/panda.config.ts
index 6e8b6101..c92970e8 100644
--- a/src/frontend/panda.config.ts
+++ b/src/frontend/panda.config.ts
@@ -231,7 +231,7 @@ const config: Config = {
           DEFAULT: { value: '{spacing.1}' },
           lg: { value: '{spacing.2}' },
         },
-        paragraph: { value: '{spacing.1}' },
+        paragraph: { value: '{spacing.0.5}' },
         heading: { value: '{spacing.1}' },
         gutter: { value: '{spacing.1}' },
         textfield: { value: '{spacing.1}' },
diff --git a/src/frontend/src/features/home/routes/Home.tsx b/src/frontend/src/features/home/routes/Home.tsx
index 2c9bb459..76051c4d 100644
--- a/src/frontend/src/features/home/routes/Home.tsx
+++ b/src/frontend/src/features/home/routes/Home.tsx
@@ -5,6 +5,7 @@ import { authUrl, useUser } from '@/features/auth'
 import { navigateToNewRoom } from '@/features/rooms'
 import { Screen } from '@/layout/Screen'
 import { JoinMeetingDialogContent } from '../components/JoinMeetingDialogContent'
+import { SettingsButton } from '@/features/settings'
 
 export const Home = () => {
   const { t } = useTranslation('home')
@@ -39,6 +40,8 @@ export const Home = () => {
               </Button>
               <JoinMeetingDialogContent />
             </Dialog>
+
+            <SettingsButton />
           </HStack>
         </Div>
       </VerticallyOffCenter>
diff --git a/src/frontend/src/features/settings/components/SettingsButton.tsx b/src/frontend/src/features/settings/components/SettingsButton.tsx
new file mode 100644
index 00000000..d0ddd9e2
--- /dev/null
+++ b/src/frontend/src/features/settings/components/SettingsButton.tsx
@@ -0,0 +1,16 @@
+import { useTranslation } from 'react-i18next'
+import { RiSettings3Line } from '@remixicon/react'
+import { Dialog, Button } from '@/primitives'
+import { SettingsDialog } from './SettingsDialog'
+
+export const SettingsButton = () => {
+  const { t } = useTranslation('settings')
+  return (
+    <Dialog>
+      <Button square invisible aria-label={t('settingsButtonLabel')}>
+        <RiSettings3Line />
+      </Button>
+      <SettingsDialog />
+    </Dialog>
+  )
+}
diff --git a/src/frontend/src/features/settings/components/SettingsDialog.tsx b/src/frontend/src/features/settings/components/SettingsDialog.tsx
new file mode 100644
index 00000000..9d592e5a
--- /dev/null
+++ b/src/frontend/src/features/settings/components/SettingsDialog.tsx
@@ -0,0 +1,46 @@
+import { Trans, useTranslation } from 'react-i18next'
+import { useLanguageLabels } from '@/i18n/useLanguageLabels'
+import { A, Badge, DialogContent, Field, H, P } from '@/primitives'
+import { authUrl, logoutUrl, useUser } from '@/features/auth'
+
+export const SettingsDialog = () => {
+  const { t, i18n } = useTranslation('settings')
+  const { user, isLoggedIn } = useUser()
+  const { languagesList, currentLanguage } = useLanguageLabels()
+  return (
+    <DialogContent title={t('dialog.heading')}>
+      <H lvl={2}>{t('account.heading')}</H>
+      {isLoggedIn ? (
+        <>
+          <P>
+            <Trans
+              i18nKey="settings:account.currentlyLoggedAs"
+              values={{ user: user?.email }}
+              components={[<Badge />]}
+            />
+          </P>
+          <P>
+            <A href={logoutUrl()}>{t('logout', { ns: 'global' })}</A>
+          </P>
+        </>
+      ) : (
+        <>
+          <P>{t('account.youAreNotLoggedIn')}</P>
+          <P>
+            <A href={authUrl()}>{t('login', { ns: 'global' })}</A>
+          </P>
+        </>
+      )}
+      <H lvl={2}>{t('language.heading')}</H>
+      <Field
+        type="select"
+        label={t('language.label')}
+        items={languagesList}
+        defaultSelectedKey={currentLanguage.key}
+        onSelectionChange={(lang) => {
+          i18n.changeLanguage(lang as string)
+        }}
+      />
+    </DialogContent>
+  )
+}
diff --git a/src/frontend/src/features/settings/index.ts b/src/frontend/src/features/settings/index.ts
new file mode 100644
index 00000000..c1039a83
--- /dev/null
+++ b/src/frontend/src/features/settings/index.ts
@@ -0,0 +1 @@
+export { SettingsButton } from './components/SettingsButton'
diff --git a/src/frontend/src/i18n/LanguageSelector.tsx b/src/frontend/src/i18n/LanguageSelector.tsx
index 0254c790..8047757a 100644
--- a/src/frontend/src/i18n/LanguageSelector.tsx
+++ b/src/frontend/src/i18n/LanguageSelector.tsx
@@ -9,7 +9,7 @@ export const LanguageSelector = () => {
     <Popover aria-label={t('languageSelector.popoverLabel')}>
       <Button
         aria-label={t('languageSelector.buttonLabel', {
-          currentLanguage,
+          currentLanguage: currentLanguage.label,
         })}
         size="sm"
         variant="primary"
diff --git a/src/frontend/src/i18n/useLanguageLabels.ts b/src/frontend/src/i18n/useLanguageLabels.ts
index c3df1a86..6a5d7936 100644
--- a/src/frontend/src/i18n/useLanguageLabels.ts
+++ b/src/frontend/src/i18n/useLanguageLabels.ts
@@ -16,5 +16,11 @@ export const useLanguageLabels = () => {
     value: lang,
     label: langageLabels[lang],
   }))
-  return { languagesList, currentLanguage: langageLabels[i18n.language] }
+  return {
+    languagesList,
+    currentLanguage: {
+      key: i18n.language,
+      label: langageLabels[i18n.language],
+    },
+  }
 }
diff --git a/src/frontend/src/locales/de/settings.json b/src/frontend/src/locales/de/settings.json
new file mode 100644
index 00000000..65808b8c
--- /dev/null
+++ b/src/frontend/src/locales/de/settings.json
@@ -0,0 +1,15 @@
+{
+  "account": {
+    "currentlyLoggedAs": "",
+    "heading": "",
+    "youAreNotLoggedIn": ""
+  },
+  "dialog": {
+    "heading": ""
+  },
+  "language": {
+    "heading": "",
+    "label": ""
+  },
+  "settingsButtonLabel": ""
+}
diff --git a/src/frontend/src/locales/en/settings.json b/src/frontend/src/locales/en/settings.json
new file mode 100644
index 00000000..0e23bb68
--- /dev/null
+++ b/src/frontend/src/locales/en/settings.json
@@ -0,0 +1,15 @@
+{
+  "account": {
+    "currentlyLoggedAs": "You are currently logged in as <0>{{user}}</0>",
+    "heading": "Account",
+    "youAreNotLoggedIn": "You are not logged in."
+  },
+  "dialog": {
+    "heading": "Account and settings"
+  },
+  "language": {
+    "heading": "Language",
+    "label": "Language"
+  },
+  "settingsButtonLabel": "Settings"
+}
diff --git a/src/frontend/src/locales/fr/settings.json b/src/frontend/src/locales/fr/settings.json
new file mode 100644
index 00000000..72e42066
--- /dev/null
+++ b/src/frontend/src/locales/fr/settings.json
@@ -0,0 +1,15 @@
+{
+  "account": {
+    "currentlyLoggedAs": "Vous êtes actuellement connecté en tant que <0>{{user}}</0>",
+    "heading": "Compte",
+    "youAreNotLoggedIn": "Vous n'êtes pas connecté."
+  },
+  "dialog": {
+    "heading": "Compte et paramètres"
+  },
+  "language": {
+    "heading": "Langue",
+    "label": "Langue de l'application"
+  },
+  "settingsButtonLabel": "Paramètres"
+}
diff --git a/src/frontend/src/primitives/Button.tsx b/src/frontend/src/primitives/Button.tsx
index a6990897..f16001a6 100644
--- a/src/frontend/src/primitives/Button.tsx
+++ b/src/frontend/src/primitives/Button.tsx
@@ -9,7 +9,7 @@ import { cva, type RecipeVariantProps } from '@/styled-system/css'
 const button = cva({
   base: {
     display: 'inline-block',
-    transition: 'background 200ms, outline 200ms',
+    transition: 'background 200ms, outline 200ms, border-color 200ms',
     cursor: 'pointer',
     border: '1px solid transparent',
     color: 'colorPalette.text',
@@ -27,14 +27,23 @@ const button = cva({
         borderRadius: 8,
         paddingX: '1',
         paddingY: '0.625',
+        '--square-padding': '{spacing.0.625}',
       },
       sm: {
         borderRadius: 4,
         paddingX: '0.5',
         paddingY: '0.25',
+        '--square-padding': '{spacing.0.25}',
       },
       xs: {
         borderRadius: 4,
+        '--square-padding': '0',
+      },
+    },
+    square: {
+      true: {
+        paddingX: 'var(--square-padding)',
+        paddingY: 'var(--square-padding)',
       },
     },
     variant: {
@@ -50,10 +59,10 @@ const button = cva({
         color: 'colorPalette',
         backgroundColor: 'transparent!',
         borderColor: 'currentcolor!',
-        '_ra-hover': {
+        '&[data-hovered]': {
           backgroundColor: 'colorPalette.subtle!',
         },
-        '_ra-pressed': {
+        '&[data-pressed]': {
           backgroundColor: 'colorPalette.subtle!',
         },
       },
@@ -62,6 +71,13 @@ const button = cva({
       true: {
         borderColor: 'none!',
         backgroundColor: 'none!',
+        '&[data-hovered]': {
+          backgroundColor: 'none!',
+          borderColor: 'currentcolor',
+        },
+        '&[data-pressed]': {
+          borderColor: 'currentcolor',
+        },
       },
     },
   },