From 3d047b5124d619b0932e37d6d78ca4bca267282c Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 21 Aug 2025 12:08:09 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20default=20tab=20sel?=
 =?UTF-8?q?ection=20mechanism=20to=20settings=20dialog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implement ability to pass defaultSelectedTab key to settings component
for scenarios requiring specific tab to open automatically.

Enables programmatic control over initial tab selection, improving UX
when directing users to specific settings sections from different
application contexts.
---
 .../controls/SettingsDialogContext.tsx        | 29 +++++++++++++++++--
 .../components/SettingsDialogExtended.tsx     | 17 +++++++++--
 2 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/SettingsDialogContext.tsx b/src/frontend/src/features/rooms/livekit/components/controls/SettingsDialogContext.tsx
index ce833bfc..683acf78 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/SettingsDialogContext.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/SettingsDialogContext.tsx
@@ -1,9 +1,16 @@
-import { SettingsDialogExtended } from '@/features/settings/components/SettingsDialogExtended'
+import {
+  SettingsDialogExtended,
+  SettingsDialogExtendedKeys,
+} from '@/features/settings/components/SettingsDialogExtended'
 import React, { createContext, useContext, useState } from 'react'
 
 const SettingsDialogContext = createContext<
   | {
       dialogOpen: boolean
+      defaultSelectedKey?: SettingsDialogExtendedKeys
+      setDefaultSelectedKey: React.Dispatch<
+        React.SetStateAction<SettingsDialogExtendedKeys | undefined>
+      >
       setDialogOpen: React.Dispatch<React.SetStateAction<boolean>>
     }
   | undefined
@@ -12,13 +19,29 @@ const SettingsDialogContext = createContext<
 export const SettingsDialogProvider: React.FC<{
   children: React.ReactNode
 }> = ({ children }) => {
+  const [defaultSelectedKey, setDefaultSelectedKey] = useState<
+    SettingsDialogExtendedKeys | undefined
+  >(undefined)
   const [dialogOpen, setDialogOpen] = useState(false)
   return (
-    <SettingsDialogContext.Provider value={{ dialogOpen, setDialogOpen }}>
+    <SettingsDialogContext.Provider
+      value={{
+        dialogOpen,
+        setDialogOpen,
+        defaultSelectedKey,
+        setDefaultSelectedKey,
+      }}
+    >
       {children}
       <SettingsDialogExtended
         isOpen={dialogOpen}
-        onOpenChange={(v) => !v && setDialogOpen(false)}
+        defaultSelectedKey={defaultSelectedKey}
+        onOpenChange={(v) => {
+          if (!v) {
+            setDefaultSelectedKey(undefined)
+          }
+          setDialogOpen(v)
+        }}
       />
     </SettingsDialogContext.Provider>
   )
diff --git a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
index 980d8854..a0ef1c5f 100644
--- a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
+++ b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
@@ -43,10 +43,19 @@ const tabPanelContainerStyle = css({
   minWidth: 0,
 })
 
+export type SettingsDialogExtendedKeys =
+  | 'account'
+  | 'audio'
+  | 'video'
+  | 'general'
+  | 'notifications'
+
 export type SettingsDialogExtended = Pick<
   DialogProps,
   'isOpen' | 'onOpenChange'
->
+> & {
+  defaultSelectedKey?: SettingsDialogExtendedKeys
+}
 
 export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
   // display only icon on small screen
@@ -57,7 +66,11 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
 
   return (
     <Dialog innerRef={dialogEl} {...props} role="dialog" type="flex">
-      <Tabs orientation="vertical" className={tabsStyle}>
+      <Tabs
+        orientation="vertical"
+        className={tabsStyle}
+        defaultSelectedKey={props.defaultSelectedKey}
+      >
         <div
           className={tabListContainerStyle}
           style={{