feat(frontend): improve responsive navigation shell

src/components/Navbar.tsx

@@ -19,10 +19,13 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
   const { t, lang, setLanguage } = useTranslation()
   const { theme, setTheme } = useTheme()
   const navigate = useNavigate()
+
   const [showLogoutModal, setShowLogoutModal] = useState(false)
   const [isDropdownOpen, setIsDropdownOpen] = useState(false)
   const [user, setUser] = useState<any>(null)
+
   const dropdownRef = useRef<HTMLDivElement>(null)
+
   const isFa = lang === "fa"
   const isDarkMode =
     theme === "dark" ||
@@ -61,6 +64,7 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
         setIsDropdownOpen(false)
       }
     }
+
     document.addEventListener("mousedown", handleClickOutside)
     return () => document.removeEventListener("mousedown", handleClickOutside)
   }, [])
@@ -88,6 +92,7 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
 
   const toggleLanguage = () => {
     const newLang = isFa ? "en" : "fa"
+
     if (setLanguage) {
       setLanguage(newLang)
     } else {
@@ -98,7 +103,7 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
 
   return (
     <>
-      <header className="sticky top-0 z-50 flex items-center justify-between border-b border-slate-200/80 bg-white/70 px-8 py-6 backdrop-blur-md transition-colors dark:border-slate-800/80 dark:bg-slate-900/70">
+      <header className="sticky top-0 z-50 flex items-center justify-between border-b border-slate-200/80 bg-white/70 px-4 py-4 backdrop-blur-md transition-colors md:px-8 md:py-6 dark:border-slate-800/80 dark:bg-slate-900/70">
         <div className="flex items-center gap-3">
           <button
             type="button"
@@ -108,19 +113,40 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
           >
             <Menu className="h-5 w-5" />
           </button>
-          <div className="flex cursor-pointer items-center gap-2" onClick={() => navigate("/")}>
+
-          <span className="relative z-20 flex items-center gap-2 text-xl font-bold tracking-tight text-slate-900 dark:text-slate-50">
+          <div
-            <Command className="h-7 w-7" />
+            className="flex cursor-pointer items-center gap-2"
-            {t.title || "Qlockify"}
+            onClick={() => navigate("/")}
-          </span>
+          >
-        </div>
+            <span className="relative z-20 flex items-center gap-2 text-lg font-bold tracking-tight text-slate-900 md:text-xl dark:text-slate-50">
+              <Command className="h-6 w-6 md:h-7 md:w-7" />
+              Qlockify.ir
+            </span>
+          </div>
         </div>
 
-        <div className="flex items-center gap-4">
+        {/* Mobile navbar: theme toggle + notification bell */}
+        <div className="flex items-center gap-2 md:hidden">
+          <button
+            type="button"
+            onClick={toggleTheme}
+            className="inline-flex h-9 w-9 items-center justify-center rounded-lg text-slate-600 transition-colors hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800"
+            title={isDarkMode ? t.lightMode || "Light Mode" : t.darkMode || "Dark Mode"}
+          >
+            {isDarkMode ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
+          </button>
+
+          {user && <NotificationBell />}
+        </div>
+
+        {/* Desktop navbar: keep the old controls here */}
+        <div className="hidden items-center gap-4 md:flex">
           {user && <WorkspaceSelector />}
+
           {user ? (
             <>
               <NotificationBell />
+
               <div className="relative" ref={dropdownRef}>
                 <button
                   onClick={() => setIsDropdownOpen((current) => !current)}
@@ -141,8 +167,10 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
 
                 {isDropdownOpen && (
                   <div
-                    dir="rtl"
+                    dir={isFa ? "rtl" : "ltr"}
-                    className={`absolute ${isFa ? "left-0" : "right-0"} z-50 mt-2 w-56 overflow-hidden rounded-lg border border-slate-200 bg-white py-2 shadow-lg ring-1 ring-black ring-opacity-5 dark:border-slate-800 dark:bg-slate-900`}
+                    className={`absolute ${
+                      isFa ? "left-0" : "right-0"
+                    } z-50 mt-2 w-56 overflow-hidden rounded-lg border border-slate-200 bg-white py-2 shadow-lg ring-1 ring-black ring-opacity-5 dark:border-slate-800 dark:bg-slate-900`}
                   >
                     <div className="mb-2 border-b border-slate-100 px-4 py-2 dark:border-slate-800">
                       <p className="truncate text-sm font-semibold text-slate-800 dark:text-slate-400">
@@ -151,6 +179,7 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
                           : user.email}
                       </p>
                     </div>
+
                     <button
                       onClick={() => {
                         navigate("/profile")
@@ -166,8 +195,16 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
                       onClick={toggleTheme}
                       className="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-slate-700 transition-colors hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800"
                     >
-                      {isDarkMode ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+                      {isDarkMode ? (
-                      <span>{isDarkMode ? (t.lightMode || "Light Mode") : (t.darkMode || "Dark Mode")}</span>
+                        <Sun className="h-4 w-4" />
+                      ) : (
+                        <Moon className="h-4 w-4" />
+                      )}
+                      <span>
+                        {isDarkMode
+                          ? t.lightMode || "Light Mode"
+                          : t.darkMode || "Dark Mode"}
+                      </span>
                     </button>
 
                     <button
@@ -178,7 +215,7 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
                       <span>{isFa ? "English" : "فارسی"}</span>
                     </button>
 
-                    <div className="my-1 h-px bg-slate-200 dark:bg-slate-800"></div>
+                    <div className="my-1 h-px bg-slate-200 dark:bg-slate-800" />
 
                     <button
                       onClick={() => {
@@ -197,6 +234,7 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
           ) : (
             <>
               <SettingsMenu />
+
               <Button
                 onClick={() => navigate("/auth")}
                 className="bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700"
@@ -210,7 +248,7 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
 
       {showLogoutModal && (
         <div
-          className="fixed inset-0 z-60 flex items-center justify-center bg-black/50 px-4"
+          className="fixed inset-0 z-[80] flex items-center justify-center bg-black/50 px-4"
           onClick={() => setShowLogoutModal(false)}
         >
           <div
@@ -220,9 +258,12 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
             <h2 className="mb-2 text-lg font-bold text-slate-900 dark:text-white">
               {t.confirmLogoutTitle || "Confirm Logout"}
             </h2>
+
             <p className="mb-6 text-slate-600 dark:text-slate-400">
-              {t.confirmLogoutMessage || "Are you sure you want to log out of your account?"}
+              {t.confirmLogoutMessage ||
+                "Are you sure you want to log out of your account?"}
             </p>
+
             <div className="flex justify-end gap-3">
               <Button
                 variant="outline"
@@ -231,6 +272,7 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
               >
                 {t.actions?.cancel || "Cancel"}
               </Button>
+
               <Button
                 variant="destructive"
                 onClick={handleLogout}

src/components/Sidebar.tsx

@@ -1,5 +1,5 @@
-import { useState } from 'react';
+import { useEffect, useState } from "react"
-import { NavLink } from 'react-router-dom';
+import { NavLink, useNavigate } from "react-router-dom"
 import {
   Users,
   LayoutDashboard,
@@ -13,175 +13,393 @@ import {
   Clock3,
   History,
   Tags,
-} from 'lucide-react';
+  User,
-import { useOptionalWorkspace } from '../context/WorkspaceContext';
+  Globe,
-import { useTranslation } from '../hooks/useTranslation';
+  LogOut,
-import { canWorkspace, WORKSPACE_LOGS_VIEW } from '../lib/permissions';
+  LogIn,
+} from "lucide-react"
+import { toast } from "sonner"
+
+import { useOptionalWorkspace } from "../context/WorkspaceContext"
+import { useTranslation } from "../hooks/useTranslation"
+import { canWorkspace, WORKSPACE_LOGS_VIEW } from "../lib/permissions"
+import { WorkspaceSelector } from "./WorkspaceSelector"
+import { SettingsMenu } from "./SettingsMenu"
+import { Button } from "./ui/button"
+import { getUserProfile, logoutUser } from "../api/users"
+import { clearSessionTokens, getAccessToken, getRefreshToken } from "../lib/session"
 
 type SidebarProps = {
-  mobileOpen?: boolean;
+  mobileOpen?: boolean
-  onMobileClose?: () => void;
+  onMobileClose?: () => void
-};
+}
 
 export const Sidebar = ({ mobileOpen = false, onMobileClose }: SidebarProps) => {
-  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(false)
+  const [showLogoutModal, setShowLogoutModal] = useState(false)
+  const [user, setUser] = useState<any>(null)
 
-  const { t, lang } = useTranslation();
+  const navigate = useNavigate()
-  const workspaceContext = useOptionalWorkspace();
+  const { t, lang, setLanguage } = useTranslation()
-  const activeWorkspace = workspaceContext?.activeWorkspace ?? null;
+
-  const isRtl = lang === 'fa';
+  const workspaceContext = useOptionalWorkspace()
-  const canViewLogs = canWorkspace(activeWorkspace?.my_role, WORKSPACE_LOGS_VIEW);
+  const activeWorkspace = workspaceContext?.activeWorkspace ?? null
+
+  const isRtl = lang === "fa"
+  const canViewLogs = canWorkspace(activeWorkspace?.my_role, WORKSPACE_LOGS_VIEW)
 
   const ToggleIcon = isRtl
-    ? (isCollapsed ? PanelRightOpen : PanelRightClose)
+    ? isCollapsed
-    : (isCollapsed ? PanelLeftOpen : PanelLeftClose);
+      ? PanelRightOpen
+      : PanelRightClose
+    : isCollapsed
+      ? PanelLeftOpen
+      : PanelLeftClose
+
+  useEffect(() => {
+    const handleProfileUpdated = ((e: CustomEvent) => {
+      if (e.detail) {
+        setUser((prev: any) => (prev ? { ...prev, ...e.detail } : e.detail))
+      }
+    }) as EventListener
+
+    window.addEventListener("profile_updated", handleProfileUpdated)
+    return () => window.removeEventListener("profile_updated", handleProfileUpdated)
+  }, [])
+
+  useEffect(() => {
+    const fetchUser = async () => {
+      const token = getAccessToken()
+      if (!token) return
+
+      try {
+        const userData = await getUserProfile()
+        setUser(userData)
+      } catch (error) {
+        console.error("Failed to fetch user profile:", error)
+      }
+    }
+
+    void fetchUser()
+  }, [])
+
+  const handleLogout = async () => {
+    try {
+      const refreshToken = getRefreshToken()
+      if (refreshToken) {
+        await logoutUser(refreshToken)
+      }
+    } catch (error) {
+      console.error("Logout API failed:", error)
+    } finally {
+      clearSessionTokens()
+      setUser(null)
+      setShowLogoutModal(false)
+      onMobileClose?.()
+      toast.success(t.logoutToast || "Successfully logged out!")
+      navigate("/auth")
+    }
+  }
+
+  const toggleLanguage = () => {
+    const newLang = isRtl ? "en" : "fa"
+
+    if (setLanguage) {
+      setLanguage(newLang)
+    } else {
+      localStorage.setItem("language", newLang)
+      window.location.reload()
+    }
+  }
 
   const navItems = [
     {
-      path: '/timesheet',
+      path: "/timesheet",
       icon: Clock3,
-      label: t.sidebar?.timesheet || 'Timesheet'
+      label: t.sidebar?.timesheet || "Timesheet",
     },
     {
-      path: '/tags',
+      path: "/tags",
       icon: Tags,
-      label: t.sidebar?.tags || 'Tags'
+      label: t.sidebar?.tags || "Tags",
     },
     {
-      path: '/clients', 
+      path: "/clients",
       icon: Users,
-      label: t.sidebar?.clients || 'Clients' 
+      label: t.sidebar?.clients || "Clients",
     },
     {
-      path: '/projects', 
+      path: "/projects",
       icon: Briefcase,
-      label: t.sidebar?.projects || 'Projects' 
+      label: t.sidebar?.projects || "Projects",
     },
     {
-      path: '/workspaces', 
+      path: "/workspaces",
       icon: LayoutDashboard,
-      label: t.sidebar?.workspaces || 'Workspaces' 
+      label: t.sidebar?.workspaces || "Workspaces",
     },
     {
-      path: '/reports',
+      path: "/reports",
       icon: ChartColumn,
-      label: t.sidebar?.reports || 'Reports'
+      label: t.sidebar?.reports || "Reports",
     },
     ...(canViewLogs
       ? [
           {
-            path: '/logs',
+            path: "/logs",
             icon: History,
-            label: t.sidebar?.logs || 'Logs',
+            label: t.sidebar?.logs || "Logs",
           },
         ]
       : []),
-  ];
+  ]
 
   const renderNavItems = (mobile = false) =>
     navItems.map((item) => {
-      const Icon = item.icon;
+      const Icon = item.icon
+
       return (
         <NavLink
-          key={`${mobile ? 'mobile' : 'desktop'}-${item.path}`}
+          key={`${mobile ? "mobile" : "desktop"}-${item.path}`}
           to={item.path}
           title={!mobile && isCollapsed ? item.label : undefined}
           onClick={() => {
-            if (mobile) onMobileClose?.();
+            if (mobile) onMobileClose?.()
           }}
           className={({ isActive }) =>
             `flex items-center rounded-lg text-sm font-medium transition-colors ${
               mobile
-                ? 'gap-3 px-4 py-3'
+                ? "gap-3 px-4 py-3"
                 : isCollapsed
-                  ? 'justify-center px-0 py-2.5'
+                  ? "justify-center px-0 py-2.5"
-                  : 'gap-3 px-3 py-2.5'
+                  : "gap-3 px-3 py-2.5"
             } ${
               isActive
-                ? 'bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400'
+                ? "bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400"
-                : 'text-slate-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-900/50'
+                : "text-slate-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-900/50"
             }`
           }
         >
           <Icon size={mobile ? 20 : isCollapsed ? 22 : 18} className="shrink-0" />
+
           {(mobile || !isCollapsed) && (
             <span className="truncate whitespace-nowrap">{item.label}</span>
           )}
         </NavLink>
-      );
+      )
-    });
+    })
+
+  const renderMobileTopSection = () => {
+    if (!user) {
+      return null
+    }
+
+    return (
+      <div className="border-b border-slate-200 p-4 dark:border-slate-800">
+        <div className="w-full">
+          <WorkspaceSelector className="w-full" />
+        </div>
+      </div>
+    )
+  }
+
+  const renderMobileFooterSection = () => {
+    if (!user) {
+      return (
+        <div className="border-t border-slate-200 p-4 dark:border-slate-800">
+          <button
+            onClick={toggleLanguage}
+            className="flex w-full items-center gap-3 rounded-lg px-4 py-3 mb-3 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-900/50"
+          >
+            <Globe size={20} className="shrink-0" />
+            <span className="truncate whitespace-nowrap">
+              {isRtl ? "English" : "فارسی"}
+            </span>
+          </button>
+
+          <Button
+            onClick={() => {
+              onMobileClose?.()
+              navigate("/auth")
+            }}
+            className="w-full bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700"
+          >
+            <LogIn className="mr-2 h-4 w-4" />
+            {t.login?.signIn || "Login"}
+          </Button>
+        </div>
+      )
+    }
+
+    return (
+      <div className="space-y-1 p-4">
+        <button
+          onClick={() => {
+            onMobileClose?.()
+            navigate("/profile")
+          }}
+          className="flex w-full items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-900/50"
+        >
+          <User size={20} className="shrink-0" />
+          <span className="truncate whitespace-nowrap">
+            {t.profile?.title || "Profile"}
+          </span>
+        </button>
+
+        <button
+          onClick={toggleLanguage}
+          className="flex w-full items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-900/50"
+        >
+          <Globe size={20} className="shrink-0" />
+          <span className="truncate whitespace-nowrap">
+            {isRtl ? "English" : "فارسی"}
+          </span>
+        </button>
+
+        <button
+          onClick={() => setShowLogoutModal(true)}
+          className="flex w-full items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 dark:text-red-500 dark:hover:bg-red-950/50"
+        >
+          <LogOut size={20} className="shrink-0" />
+          <span className="truncate whitespace-nowrap">{t.logout || "Logout"}</span>
+        </button>
+      </div>
+    )
+  }
 
   return (
     <>
+      {/* Desktop sidebar */}
       <aside
-        className={`border-e border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 hidden md:flex flex-col h-screen sticky top-0 shrink-0 transition-all duration-300 ease-in-out ${
+        className={`hidden h-screen shrink-0 flex-col border-e border-slate-200 bg-white transition-all duration-300 ease-in-out md:sticky md:top-0 md:flex dark:border-slate-800 dark:bg-slate-950 ${
-          isCollapsed ? 'w-20' : 'w-64'
+          isCollapsed ? "w-20" : "w-64"
         }`}
       >
-        <div className={`h-18.25 flex items-center border-b border-slate-200 dark:border-slate-800 shrink-0 transition-all ${
+        <div
-          isCollapsed ? 'justify-center px-0' : 'justify-between px-6'
+          className={`flex h-[73px] shrink-0 items-center border-b border-slate-200 transition-all dark:border-slate-800 ${
-        }`}>
+            isCollapsed ? "justify-center px-0" : "justify-between px-6"
+          }`}
+        >
           {!isCollapsed && (
-            <h2 className="text-xl font-bold text-slate-800 dark:text-white truncate">
+            <h2 className="truncate text-xl font-bold text-slate-800 dark:text-white">
               {t.title || "Qlockify"}
             </h2>
           )}
+
           <button
             onClick={() => setIsCollapsed(!isCollapsed)}
-            className="p-2 rounded-lg text-slate-500 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800 transition-colors"
+            className="rounded-lg p-2 text-slate-500 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800"
-            title={isCollapsed ? (t.sidebar?.expand || 'Expand') : (t.sidebar?.collapse || 'Collapse')}
+            title={
+              isCollapsed
+                ? t.sidebar?.expand || "Expand"
+                : t.sidebar?.collapse || "Collapse"
+            }
           >
             <ToggleIcon size={20} />
           </button>
         </div>
 
-        <nav className="flex-1 p-4 space-y-1 overflow-y-auto overflow-x-hidden">
+        <nav className="flex-1 space-y-1 overflow-y-auto overflow-x-hidden p-4">
           {renderNavItems(false)}
         </nav>
       </aside>
 
+      {/* Mobile sidebar */}
       <div
-        className={`fixed inset-0 z-[70] md:hidden transition-all duration-200 ${
+        className={`fixed inset-0 z-[70] transition-all duration-200 md:hidden ${
-          mobileOpen ? 'pointer-events-auto' : 'pointer-events-none'
+          mobileOpen ? "pointer-events-auto" : "pointer-events-none"
         }`}
         aria-hidden={!mobileOpen}
       >
         <button
           type="button"
           className={`absolute inset-0 bg-slate-950/50 backdrop-blur-[1px] transition-opacity ${
-            mobileOpen ? 'opacity-100' : 'opacity-0'
+            mobileOpen ? "opacity-100" : "opacity-0"
           }`}
           onClick={onMobileClose}
         />
+
         <aside
-          className={`absolute inset-y-0 flex w-[18.5rem] max-w-[86vw] flex-col bg-white shadow-2xl transition-transform dark:bg-slate-950 ${
+          dir={isRtl ? "rtl" : "ltr"}
+          className={`absolute inset-y-0 flex w-[19.5rem] max-w-[88vw] flex-col overflow-hidden bg-white shadow-2xl transition-transform dark:bg-slate-950 ${
             isRtl
               ? `right-0 border-s border-slate-200 dark:border-slate-800 ${
-                  mobileOpen ? 'translate-x-0' : 'translate-x-full'
+                  mobileOpen ? "translate-x-0" : "translate-x-full"
                 }`
               : `left-0 border-e border-slate-200 dark:border-slate-800 ${
-                  mobileOpen ? 'translate-x-0' : '-translate-x-full'
+                  mobileOpen ? "translate-x-0" : "-translate-x-full"
                 }`
           }`}
         >
-          <div className="flex items-center justify-between border-b border-slate-200 px-5 py-5 dark:border-slate-800">
+          <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
-            <h2 className="truncate text-lg font-bold text-slate-800 dark:text-white">
+            <div className="flex shrink-0 items-center justify-between border-b border-slate-200 px-5 py-5 dark:border-slate-800">
-              {t.title || "Qlockify"}
+              <h2 className="truncate text-lg font-bold text-slate-800 dark:text-white">
-            </h2>
+                Qlockify.ir
-            <button
+              </h2>
-              type="button"
+
-              onClick={onMobileClose}
+              <button
-              className="rounded-lg p-2 text-slate-500 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800"
+                type="button"
-              title="Close"
+                onClick={onMobileClose}
-            >
+                className="rounded-lg p-2 text-slate-500 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800"
-              <X size={20} />
+                title="Close"
-            </button>
+              >
+                <X size={20} />
+              </button>
+            </div>
+
+            <div className="shrink-0">
+              {renderMobileTopSection()}
+            </div>
+
+            <nav className="shrink-0 space-y-1 p-4">
+              {renderNavItems(true)}
+            </nav>
+
+            <div className="mt-auto shrink-0">
+              {renderMobileFooterSection()}
+            </div>
           </div>
-          <nav className="flex-1 space-y-1 overflow-y-auto p-4">
-            {renderNavItems(true)}
-          </nav>
         </aside>
       </div>
+
+      {showLogoutModal && (
+        <div
+          className="fixed inset-0 z-[90] flex items-center justify-center bg-black/50 px-4"
+          onClick={() => setShowLogoutModal(false)}
+        >
+          <div
+            className="w-full max-w-sm rounded-lg border bg-white p-6 shadow-lg dark:border-slate-800 dark:bg-slate-900"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <h2 className="mb-2 text-lg font-bold text-slate-900 dark:text-white">
+              {t.confirmLogoutTitle || "Confirm Logout"}
+            </h2>
+
+            <p className="mb-6 text-slate-600 dark:text-slate-400">
+              {t.confirmLogoutMessage ||
+                "Are you sure you want to log out of your account?"}
+            </p>
+
+            <div className="flex justify-end gap-3">
+              <Button
+                variant="outline"
+                onClick={() => setShowLogoutModal(false)}
+                className="dark:text-white"
+              >
+                {t.actions?.cancel || "Cancel"}
+              </Button>
+
+              <Button
+                variant="destructive"
+                onClick={handleLogout}
+                className="bg-red-500 text-white hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700"
+              >
+                {t.logout || "Logout"}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
     </>
-  );
+  )
-};
+}

src/components/WorkspaceSelector.tsx

@@ -6,7 +6,11 @@ import { useNavigate } from "react-router-dom";
 import { fetchWorkspaces, type Workspace } from "../api/workspaces";
 import { InfiniteScroll } from "./InfiniteScroll";
 
-export const WorkspaceSelector: React.FC = () => {
+type WorkspaceSelectorProps = {
+  className?: string
+}
+
+export const WorkspaceSelector: React.FC<WorkspaceSelectorProps> = ({ className = "" }) => {
   const { workspaces, activeWorkspace, setActiveWorkspace } = useWorkspace();
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
@@ -116,11 +120,11 @@ export const WorkspaceSelector: React.FC = () => {
   }, [offset, hasMore, isLoadingMore]);
 
   return (
-    <div className="relative" ref={dropdownRef}>
+    <div className={`relative ${className}`} ref={dropdownRef}>
       <button
         type="button"
         onClick={() => setIsOpen(!isOpen)}
-        className="flex items-center gap-2 px-3 py-2 text-base font-medium text-slate-700 dark:text-slate-200 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
+        className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-base font-medium text-slate-700 transition-colors hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800"
       >
         <div className="w-6 h-6 flex items-center justify-center overflow-hidden rounded-md bg-blue-100 text-blue-600 dark:bg-blue-900/50 dark:text-blue-400">
           {activeWorkspace?.thumbnail ? (
@@ -129,10 +133,10 @@ export const WorkspaceSelector: React.FC = () => {
             activeWorkspace?.name?.charAt(0)?.toUpperCase() || <Briefcase className="w-4 h-4" />
           )}
         </div>
-        <span className="max-w-30 truncate">
+        <span className="min-w-0 flex-1 truncate text-start">
           {activeWorkspace?.name || t.workspace?.title || "Workspaces"}
         </span>
-        <ChevronDown className="w-4 h-4 text-slate-400" />
+        <ChevronDown className="h-4 w-4 shrink-0 text-slate-400" />
       </button>
 
       {isOpen && (