✨(frontend) add default tab selection mechanism to settings dialog

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.

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>
   )

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={{