test refactor

client/src/widgets/navigation-drawer/ui/NavigationDrawer.tsx

@@ -2,20 +2,13 @@ import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
 import Divider from '@mui/material/Divider'
 import Drawer from '@mui/material/Drawer'
-import type { SelectChangeEvent } from '@mui/material/Select'
 import Typography from '@mui/material/Typography'
 import { STORE_NAME } from '@/shared/config'
 import type { AuthUser } from '@/shared/model/auth'
+import type { ColorScheme, ThemeModePreference } from '@/shared/model/theme'
 import { BearLogo } from '@/shared/ui/BearLogo'
-
-type ThemeControls = {
-  scheme: string
-  mode: string
-  resolvedMode: 'light' | 'dark'
-  onSchemeChange: (e: SelectChangeEvent<string>) => void
-  onModeChange: (e: SelectChangeEvent<string>) => void
-  onCycleMode: () => void
-}
+import { ModeSwitcher } from '@/shared/ui/ModeSwitcher'
+import { SchemeSwitcher } from '@/shared/ui/SchemeSwitcher'
 
 type Props = {
   open: boolean
@@ -23,10 +16,13 @@ type Props = {
   user: AuthUser | null
   isAdmin: boolean
   navItems: { label: string; to: string }[]
-  themeControls: ThemeControls
+  scheme: ColorScheme
+  mode: ThemeModePreference
+  resolvedMode: 'light' | 'dark'
+  onSchemeChange: (scheme: ColorScheme) => void
+  onCycleMode: () => void
   onNavigate: (to: string) => void
   onLogout: () => void
-  ThemeControlsMobile: React.ComponentType<ThemeControls>
 }
 
 export function NavigationDrawer({
@@ -35,10 +31,13 @@ export function NavigationDrawer({
   user,
   isAdmin,
   navItems,
-  themeControls,
+  scheme,
+  mode,
+  resolvedMode,
+  onSchemeChange,
+  onCycleMode,
   onNavigate,
   onLogout,
-  ThemeControlsMobile,
 }: Props) {
   const go = (to: string) => {
     onClose()
@@ -93,7 +92,10 @@ export function NavigationDrawer({
 
         <Divider sx={{ my: 2 }} />
 
-        <ThemeControlsMobile {...themeControls} />
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, alignItems: 'flex-start' }}>
+          <SchemeSwitcher value={scheme} onChange={onSchemeChange} orientation="vertical" />
+          <ModeSwitcher mode={mode} resolvedMode={resolvedMode} onCycleMode={onCycleMode} />
+        </Box>
       </Box>
     </Drawer>
   )