✨(frontend) introduce SettingsDialogExtended

This component should be the definitive layout for settings.
Why extended? I kept the original one, which is still in-use in the
homepage, and considered this settings dialos as an extended version,
or advanced one.

I hope in a close future, we merge these two dialogs to avoid
maintaining too much code. Not the top prio.

Relevant TabPanel components will be introduced in the upcomming commits.

src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx

@@ -4,8 +4,8 @@ import { Button, Menu } from '@/primitives'
 
 import { useState } from 'react'
 import { UsernameDialog } from '@/features/rooms/livekit/components/dialogs/UsernameDialog'
-import { SettingsDialog } from '@/features/settings'
 import { OptionsMenuItems } from '@/features/rooms/livekit/components/controls/Options/OptionsMenuItems'
+import { SettingsDialogExtended } from '@/features/settings/components/SettingsDialogExtended'
 
 export type DialogState = 'username' | 'settings' | null
 
@@ -29,7 +29,7 @@ export const OptionsButton = () => {
         isOpen={dialogOpen === 'username'}
         onOpenChange={(v) => !v && setDialogOpen(null)}
       />
-      <SettingsDialog
+      <SettingsDialogExtended
         isOpen={dialogOpen === 'settings'}
         onOpenChange={(v) => !v && setDialogOpen(null)}
       />

src/frontend/src/features/settings/components/SettingsDialogExtended.tsx

@@ -0,0 +1,73 @@
+import { Dialog, type DialogProps } from '@/primitives'
+import { Tab, Tabs, TabPanel, TabList } from '@/primitives/Tabs.tsx'
+import { css } from '@/styled-system/css'
+import { text } from '@/primitives/Text.tsx'
+import { Heading } from 'react-aria-components'
+import { useTranslation } from 'react-i18next'
+
+const tabsStyle = css({
+  maxHeight: '40.625rem', // fixme size copied from meet settings modal
+  width: '50rem', // fixme size copied from meet settings modal
+  marginY: '-1rem', // fixme hacky solution to cancel modal padding
+  maxWidth: '100%',
+  overflow: 'hidden',
+  height: 'calc(100vh - 2rem)',
+})
+
+const tabListContainerStyle = css({
+  display: 'flex',
+  flexDirection: 'column',
+  borderRight: '1px solid lightGray', // fixme poor color management
+  paddingY: '1rem',
+  paddingRight: '1.5rem',
+  flex: '0 0 16rem', // fixme size copied from meet settings modal
+})
+
+const tabPanelContainerStyle = css({
+  display: 'flex',
+  flexGrow: '1',
+  marginTop: '3.5rem',
+})
+
+export type SettingsDialogExtended = Pick<
+  DialogProps,
+  'isOpen' | 'onOpenChange'
+>
+
+export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
+  // display only icon on small screen
+  const { t } = useTranslation('settings')
+  return (
+    <Dialog {...props} role="dialog" type="flex">
+      <Tabs orientation="vertical" className={tabsStyle}>
+        <div className={tabListContainerStyle}>
+          <Heading slot="title" level={1} className={text({ variant: 'h1' })}>
+            {t('dialog.heading')}
+          </Heading>
+          <TabList border={false} aria-label="Chat log orientation example">
+            <Tab highlight id="1">
+              {t('tabs.account')}
+            </Tab>
+            <Tab highlight id="2">
+              {t('tabs.audio')}
+            </Tab>
+            <Tab highlight id="3">
+              {t('tabs.general')}
+            </Tab>
+          </TabList>
+        </div>
+        <div className={tabPanelContainerStyle}>
+          <TabPanel flex id="1">
+            There are your profile settings
+          </TabPanel>
+          <TabPanel flex id="2">
+            There are your audio settings
+          </TabPanel>
+          <TabPanel flex id="3">
+            There are your general setting
+          </TabPanel>
+        </div>
+      </Tabs>
+    </Dialog>
+  )
+}

src/frontend/src/locales/de/settings.json

@@ -11,5 +11,10 @@
     "heading": "",
     "label": ""
   },
-  "settingsButtonLabel": ""
+  "settingsButtonLabel": "",
+  "tabs": {
+    "account": "",
+    "audio": "",
+    "general": ""
+  }
 }

src/frontend/src/locales/en/settings.json

@@ -11,5 +11,10 @@
     "heading": "Language",
     "label": "Language"
   },
-  "settingsButtonLabel": "Settings"
+  "settingsButtonLabel": "Settings",
+  "tabs": {
+    "account": "Profile",
+    "audio": "Audio",
+    "general": "General"
+  }
 }

src/frontend/src/locales/fr/settings.json

@@ -11,5 +11,10 @@
     "heading": "Langue",
     "label": "Langue de l'application"
   },
-  "settingsButtonLabel": "Paramètres"
+  "settingsButtonLabel": "Paramètres",
+  "tabs": {
+    "account": "Profile",
+    "audio": "Audio",
+    "general": "Général"
+  }
 }