refactor: use usePrefrences for sidebar visibility in Sidebar component

src/App.jsx

@@ -32,7 +32,6 @@ import { TaskMasterProvider } from './contexts/TaskMasterContext';
 import { TasksSettingsProvider } from './contexts/TasksSettingsContext';
 import { WebSocketProvider, useWebSocket } from './contexts/WebSocketContext';
 import ProtectedRoute from './components/ProtectedRoute';
-import { useUiPreferences } from './hooks/useUiPreferences';
 import { api, authenticatedFetch } from './utils/api';
 import { I18nextProvider, useTranslation } from 'react-i18next';
 import i18n from './i18n/config.js';
@@ -59,9 +58,6 @@ function AppContent() {
   const [isInputFocused, setIsInputFocused] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
   const [settingsInitialTab, setSettingsInitialTab] = useState('agents');
-  
-  const { preferences, setPreference } = useUiPreferences();
-  const { sidebarVisible } = preferences;
   // Session Protection System: Track sessions with active conversations to prevent
   // automatic project updates from interrupting ongoing chats. When a user sends
   // a message, the session is marked as "active" and project updates are paused
@@ -575,14 +571,6 @@ function AppContent() {
     setShowSettings(true);
   }, []);
 
-  const handleCollapseSidebar = useCallback(() => {
-    setPreference('sidebarVisible', false);
-  }, [setPreference]);
-
-  const handleExpandSidebar = useCallback(() => {
-    setPreference('sidebarVisible', true);
-  }, [setPreference]);
-
   const sidebarSharedProps = useMemo(() => ({
     projects,
     selectedProject,
@@ -597,9 +585,7 @@ function AppContent() {
     onRefresh: handleSidebarRefresh,
     onShowSettings: handleShowSettings,
     isPWA,
-    isMobile,
+    isMobile
-    onToggleSidebar: handleCollapseSidebar,
-    onExpandSidebar: handleExpandSidebar
   }), [
     projects,
     selectedProject,
@@ -614,9 +600,7 @@ function AppContent() {
     handleSidebarRefresh,
     handleShowSettings,
     isPWA,
-    isMobile,
+    isMobile
-    handleCollapseSidebar,
-    handleExpandSidebar
   ]);
 
 
@@ -624,14 +608,9 @@ function AppContent() {
     <div className="fixed inset-0 flex bg-background">
       {/* Fixed Desktop Sidebar */}
       {!isMobile && (
-        <div
+        <div className="h-full flex-shrink-0 border-r border-border bg-card">
-          className={`h-full flex-shrink-0 border-r border-border bg-card transition-all duration-300 ${
-            sidebarVisible ? 'w-80' : 'w-14'
-          }`}
-        >
           <Sidebar
             {...sidebarSharedProps}
-            isCollapsed={!sidebarVisible}
           />
         </div>
       )}
@@ -663,7 +642,6 @@ function AppContent() {
           >
             <Sidebar
               {...sidebarSharedProps}
-              isCollapsed={false}
             />
           </div>
         </div>

src/components/Sidebar.jsx

@@ -15,6 +15,7 @@ import TaskIndicator from './TaskIndicator';
 import ProjectCreationWizard from './ProjectCreationWizard';
 import VersionUpgradeModal from './modals/VersionUpgradeModal';
 import { useVersionCheck } from '../hooks/useVersionCheck';
+import { useUiPreferences } from '../hooks/useUiPreferences';
 import { api } from '../utils/api';
 import { useTaskMaster } from '../contexts/TaskMasterContext';
 import { useTasksSettings } from '../contexts/TasksSettingsContext';
@@ -36,13 +37,13 @@ function Sidebar({
   onRefresh,
   onShowSettings,
   isPWA,
-  isMobile,
+  isMobile
-  onToggleSidebar,
-  isCollapsed = false,
-  onExpandSidebar
 }) {
   const { t } = useTranslation(['sidebar', 'common']);
   const { updateAvailable, latestVersion, currentVersion, releaseInfo } = useVersionCheck('siteboon', 'claudecodeui');
+  const { preferences, setPreference } = useUiPreferences();
+  const { sidebarVisible } = preferences;
+  const isSidebarCollapsed = !isMobile && !sidebarVisible;
   const [expandedProjects, setExpandedProjects] = useState(new Set());
   const [editingProject, setEditingProject] = useState(null);
   const [showNewProject, setShowNewProject] = useState(false);
@@ -470,10 +471,18 @@ function Sidebar({
     setCurrentProject(project);
   };
 
+  const handleCollapseSidebar = () => {
+    setPreference('sidebarVisible', false);
+  };
+
+  const handleExpandSidebar = () => {
+    setPreference('sidebarVisible', true);
+  };
+
   const collapsedSidebar = (
     <div className="h-full flex flex-col items-center py-4 gap-4 bg-card">
       <button
-        onClick={onExpandSidebar}
+        onClick={handleExpandSidebar}
         className="p-2 hover:bg-accent rounded-md transition-colors duration-200 group"
         aria-label={t('common:versionUpdate.ariaLabels.showSidebar')}
         title={t('common:versionUpdate.ariaLabels.showSidebar')}
@@ -513,7 +522,7 @@ function Sidebar({
 
   return (
     <>
-      {isCollapsed ? (
+      {isSidebarCollapsed ? (
         collapsedSidebar
       ) : (
         <>
@@ -638,7 +647,7 @@ function Sidebar({
       )}
 
       <div
-        className="h-full flex flex-col bg-card md:select-none"
+        className="h-full flex flex-col bg-card md:select-none md:w-80"
         style={isPWA && isMobile ? { paddingTop: '44px' } : {}}
       >
       {/* Header */}
@@ -670,24 +679,22 @@ function Sidebar({
               </div>
             </div>
           )}
-          {onToggleSidebar && (
+          <Button
-            <Button
+            variant="ghost"
-              variant="ghost"
+            size="sm"
-              size="sm"
+            className="h-8 w-8 px-0 hover:bg-accent transition-colors duration-200"
-              className="h-8 w-8 px-0 hover:bg-accent transition-colors duration-200"
+            onClick={handleCollapseSidebar}
-              onClick={onToggleSidebar}
+            title={t('tooltips.hideSidebar')}
-              title={t('tooltips.hideSidebar')}
+          >
+            <svg
+              className="w-4 h-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
             >
-              <svg
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-                className="w-4 h-4"
+            </svg>
-                fill="none"
+          </Button>
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-              </svg>
-            </Button>
-          )}
         </div>
         
         {/* Mobile Header */}