From e0021dbb8032ef7caa1d4b8462b859bf62104304 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 5 Dec 2024 16:51:34 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20introduce=20a=20notificat?=
 =?UTF-8?q?ion=20settings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I extended Room settings with a new tab, allowing users to toggle
the sound notification they want.

Their choices will be persisted.
---
 .../components/SettingsDialogExtended.tsx     | 11 ++++-
 .../components/tabs/NotificationsTab.tsx      | 41 +++++++++++++++++++
 src/frontend/src/locales/de/settings.json     | 16 +++++++-
 src/frontend/src/locales/en/settings.json     | 16 +++++++-
 src/frontend/src/locales/fr/settings.json     | 16 +++++++-
 5 files changed, 95 insertions(+), 5 deletions(-)
 create mode 100644 src/frontend/src/features/settings/components/tabs/NotificationsTab.tsx

diff --git a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
index b14bcd3d..5afdbd99 100644
--- a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
+++ b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
@@ -6,12 +6,14 @@ import { Heading } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import {
   RiAccountCircleLine,
+  RiNotification3Line,
   RiSettings3Line,
   RiSpeakerLine,
 } from '@remixicon/react'
 import { AccountTab } from './tabs/AccountTab'
-import { GeneralTab } from '@/features/settings/components/tabs/GeneralTab.tsx'
-import { AudioTab } from '@/features/settings/components/tabs/AudioTab.tsx'
+import { NotificationsTab } from './tabs/NotificationsTab'
+import { GeneralTab } from './tabs/GeneralTab'
+import { AudioTab } from './tabs/AudioTab'
 import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver'
 import { useRef } from 'react'
 
@@ -81,12 +83,17 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
               <RiSettings3Line />
               {isWideScreen && t('tabs.general')}
             </Tab>
+            <Tab icon highlight id="4">
+              <RiNotification3Line />
+              {isWideScreen && t('tabs.notifications')}
+            </Tab>
           </TabList>
         </div>
         <div className={tabPanelContainerStyle}>
           <AccountTab id="1" onOpenChange={props.onOpenChange} />
           <AudioTab id="2" />
           <GeneralTab id="3" />
+          <NotificationsTab id="4" />
         </div>
       </Tabs>
     </Dialog>
diff --git a/src/frontend/src/features/settings/components/tabs/NotificationsTab.tsx b/src/frontend/src/features/settings/components/tabs/NotificationsTab.tsx
new file mode 100644
index 00000000..b0d2ed6a
--- /dev/null
+++ b/src/frontend/src/features/settings/components/tabs/NotificationsTab.tsx
@@ -0,0 +1,41 @@
+import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
+import { H, Switch } from '@/primitives'
+import { css } from '@/styled-system/css'
+import { useTranslation } from 'react-i18next'
+import { useSnapshot } from 'valtio'
+import { notificationsStore } from '@/stores/notifications'
+
+export type NotificationsTabProps = Pick<TabPanelProps, 'id'>
+
+export const NotificationsTab = ({ id }: NotificationsTabProps) => {
+  const { t } = useTranslation('settings', { keyPrefix: 'notifications' })
+  const notificationsSnap = useSnapshot(notificationsStore)
+  return (
+    <TabPanel padding={'md'} flex id={id}>
+      <H lvl={2}>{t('heading')}</H>
+      <ul
+        className={css({
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1rem',
+        })}
+      >
+        {Array.from(notificationsSnap.soundNotifications).map(
+          ([key, value]) => (
+            <li key={key}>
+              <Switch
+                aria-label={`${t(`actions.${value ? 'disable' : 'enable'}`)} ${t('label')} "${t(`items.${key}`)}"`}
+                isSelected={value}
+                onChange={(v) => {
+                  notificationsStore.soundNotifications.set(key, v)
+                }}
+              >
+                {t(`items.${key}`)}
+              </Switch>
+            </li>
+          )
+        )}
+      </ul>
+    </TabPanel>
+  )
+}
diff --git a/src/frontend/src/locales/de/settings.json b/src/frontend/src/locales/de/settings.json
index 4477733a..5fcf521d 100644
--- a/src/frontend/src/locales/de/settings.json
+++ b/src/frontend/src/locales/de/settings.json
@@ -19,6 +19,19 @@
     },
     "permissionsRequired": ""
   },
+  "notifications": {
+    "heading": "",
+    "label": "",
+    "actions": {
+      "disable": "",
+      "enable": ""
+    },
+    "items": {
+      "participantJoined": "",
+      "handRaised": "",
+      "messageReceived": ""
+    }
+  },
   "dialog": {
     "heading": ""
   },
@@ -30,6 +43,7 @@
   "tabs": {
     "account": "",
     "audio": "",
-    "general": ""
+    "general": "",
+    "notifications": ""
   }
 }
diff --git a/src/frontend/src/locales/en/settings.json b/src/frontend/src/locales/en/settings.json
index 17219a88..223023ee 100644
--- a/src/frontend/src/locales/en/settings.json
+++ b/src/frontend/src/locales/en/settings.json
@@ -19,6 +19,19 @@
     },
     "permissionsRequired": "Permissions required"
   },
+  "notifications": {
+    "heading": "Sound notifications",
+    "label": "sound notifications for",
+    "actions": {
+      "disable": "Disable",
+      "enable": "Enable"
+    },
+    "items": {
+      "participantJoined": "Participant joined",
+      "handRaised": "Hand raised",
+      "messageReceived": "Message received"
+    }
+  },
   "dialog": {
     "heading": "Settings"
   },
@@ -30,6 +43,7 @@
   "tabs": {
     "account": "Profile",
     "audio": "Audio",
-    "general": "General"
+    "general": "General",
+    "notifications": "Notifications"
   }
 }
diff --git a/src/frontend/src/locales/fr/settings.json b/src/frontend/src/locales/fr/settings.json
index 2e149f49..bd36eaee 100644
--- a/src/frontend/src/locales/fr/settings.json
+++ b/src/frontend/src/locales/fr/settings.json
@@ -19,6 +19,19 @@
     },
     "permissionsRequired": "Autorisations nécessaires"
   },
+  "notifications": {
+    "heading": "Notifications sonores",
+    "label": "la notification sonore pour",
+    "actions": {
+      "disable": "Désactiver",
+      "enable": "Activer"
+    },
+    "items": {
+      "participantJoined": "Un nouveau participant",
+      "handRaised": "Une main levée",
+      "messageReceived": "Un message reçu"
+    }
+  },
   "dialog": {
     "heading": "Paramètres"
   },
@@ -30,6 +43,7 @@
   "tabs": {
     "account": "Profile",
     "audio": "Audio",
-    "general": "Général"
+    "general": "Général",
+    "notifications": "Notifications"
   }
 }