Workspaces in Workspaces all around

src/apps/officer-web/Screens/Dashboard/Layout/Header/UserMenu.tsx

@@ -1,17 +1,27 @@
 import { Link } from 'react-router';
 import * as Dropdown from '@/components/ui/dropdown-menu';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { User, LogOut, Server, Package, Bot } from 'lucide-react';
+import { User, LogOut, Server, Package, Bot, Sun, Moon } from 'lucide-react';
 import { useAuth } from 'hooks/useAuth';
 import { useTranslation } from '@/lib/i18n';
+import { useColorMode } from '@/components/ui/ThemeProvider';
+import { useSettings } from '@/state/useSettings';
 
-const { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } = Dropdown;
+const { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } = Dropdown;
 
 export function UserMenu() {
   const { user, isLoading } = useAuth();
   const { t } = useTranslation();
+  const { colorMode, setColorMode } = useColorMode();
+  const { settings, saveSettings } = useSettings();
   if (isLoading) return null;
 
+  const toggleColorMode = () => {
+    const next = colorMode === 'dark' ? 'light' : 'dark';
+    setColorMode(next);
+    saveSettings({ ...settings, appearance: { ...settings.appearance, colorMode: next } });
+  };
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -49,6 +59,16 @@ export function UserMenu() {
             {t('header.userMenu.resources')}
           </Link>
         </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={toggleColorMode} className="cursor-pointer">
+          {colorMode === 'dark' ? (
+            <Sun className="mr-2 h-4 w-4" />
+          ) : (
+            <Moon className="mr-2 h-4 w-4" />
+          )}
+          {colorMode === 'dark' ? 'Light Mode' : 'Dark Mode'}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
         <DropdownMenuItem asChild className="cursor-pointer">
           <Link to="/auth/signout">
             <LogOut className="mr-2 h-4 w-4" />