Workspaces in Workspaces all around

src/apps/officer-web/Screens/Dashboard/Layout/Dock.tsx

@@ -19,7 +19,8 @@ const ICON_GAP = 24;
 const DOCK_PADDING = 12;
 const MAX_SCALE = 1.5;
 const MAX_DISTANCE = 150;
-const BOTTOM_THRESHOLD = 100;
+const SHOW_THRESHOLD = 24;
+const HIDE_THRESHOLD = 100;
 
 const getScale = (mouseX: number | null, iconCenterX: number) => {
   if (mouseX === null) return 1;
@@ -39,12 +40,14 @@ export const Dock = ({ items, className }: DockProps) => {
   useEffect(() => {
     const handleMouseMove = (ev: MouseEvent) => {
       const distFromBottom = window.innerHeight - ev.clientY;
-      if (distFromBottom <= BOTTOM_THRESHOLD) {
-        setVisible(true);
+      setVisible((prev) => {
+        if (!prev) return distFromBottom <= SHOW_THRESHOLD;
+        return distFromBottom <= HIDE_THRESHOLD;
+      });
+      if (distFromBottom <= HIDE_THRESHOLD) {
         const rect = dockRef.current?.getBoundingClientRect();
         if (rect) setMouseX(ev.clientX - rect.left);
       } else {
-        setVisible(false);
         setMouseX(null);
       }
     };

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

@@ -17,9 +17,7 @@ export function Header() {
           />
         </Link>
         <UserMenu />
-
       </div>
     </header>
   );
 }
-

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" />