From 6fad362cab88a9ccfb8cb9959f2e75f6ee27a9b8 Mon Sep 17 00:00:00 2001 From: Haileyesus Date: Fri, 6 Feb 2026 10:55:32 +0300 Subject: [PATCH] refactor: move VersionUpgradeModal and collapsed sidebar to Sidebar component from App.jsx --- src/App.jsx | 108 +++++++------------------------------ src/components/Sidebar.jsx | 75 ++++++++++++++++++++++---- 2 files changed, 86 insertions(+), 97 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 0d743be..0ca607a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -26,7 +26,6 @@ import MainContent from './components/MainContent'; import MobileNav from './components/MobileNav'; import Settings from './components/Settings'; import QuickSettingsPanel from './components/QuickSettingsPanel'; -import VersionUpgradeModal from './components/modals/VersionUpgradeModal'; import { ThemeProvider } from './contexts/ThemeContext'; import { AuthProvider } from './contexts/AuthContext'; @@ -34,7 +33,6 @@ import { TaskMasterProvider } from './contexts/TaskMasterContext'; import { TasksSettingsProvider } from './contexts/TasksSettingsContext'; import { WebSocketProvider, useWebSocket } from './contexts/WebSocketContext'; import ProtectedRoute from './components/ProtectedRoute'; -import { useVersionCheck } from './hooks/useVersionCheck'; import useLocalStorage from './hooks/useLocalStorage'; import { api, authenticatedFetch } from './utils/api'; import { I18nextProvider, useTranslation } from 'react-i18next'; @@ -51,9 +49,6 @@ function AppContent() { const renderCountRef = useRef(0); // console.log(`AppContent render count: ${renderCountRef.current++}`); - const { updateAvailable, latestVersion, currentVersion, releaseInfo } = useVersionCheck('siteboon', 'claudecodeui'); - const [showVersionModal, setShowVersionModal] = useState(false); - const [projects, setProjects] = useState([]); const [selectedProject, setSelectedProject] = useState(null); const [selectedSession, setSelectedSession] = useState(null); @@ -591,75 +586,25 @@ function AppContent() { sidebarVisible ? 'w-80' : 'w-14' }`} > -
- {sidebarVisible ? ( - setShowSettings(true)} - updateAvailable={updateAvailable} - latestVersion={latestVersion} - currentVersion={currentVersion} - releaseInfo={releaseInfo} - onShowVersionModal={() => setShowVersionModal(true)} - isPWA={isPWA} - isMobile={isMobile} - onToggleSidebar={() => setSidebarVisible(false)} - /> - ) : ( - /* Collapsed Sidebar */ -
- {/* Expand Button */} - - - {/* Settings Icon */} - - - {/* Update Indicator */} - {updateAvailable && ( - - )} -
- )} -
+ setShowSettings(true)} + isPWA={isPWA} + isMobile={isMobile} + onToggleSidebar={() => setSidebarVisible(false)} + isCollapsed={!sidebarVisible} + onExpandSidebar={() => setSidebarVisible(true)} + /> )} @@ -701,14 +646,10 @@ function AppContent() { loadingProgress={loadingProgress} onRefresh={handleSidebarRefresh} onShowSettings={() => setShowSettings(true)} - updateAvailable={updateAvailable} - latestVersion={latestVersion} - currentVersion={currentVersion} - releaseInfo={releaseInfo} - onShowVersionModal={() => setShowVersionModal(true)} isPWA={isPWA} isMobile={isMobile} onToggleSidebar={() => setSidebarVisible(false)} + isCollapsed={false} /> @@ -780,15 +721,6 @@ function AppContent() { projects={projects} initialTab={settingsInitialTab} /> - - {/* Version Upgrade Modal */} - setShowVersionModal(false)} - releaseInfo={releaseInfo} - currentVersion={currentVersion} - latestVersion={latestVersion} - /> ); } diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx index a495cfc..a18e2ec 100644 --- a/src/components/Sidebar.jsx +++ b/src/components/Sidebar.jsx @@ -13,6 +13,8 @@ import CursorLogo from './CursorLogo.jsx'; import CodexLogo from './CodexLogo.jsx'; import TaskIndicator from './TaskIndicator'; import ProjectCreationWizard from './ProjectCreationWizard'; +import VersionUpgradeModal from './modals/VersionUpgradeModal'; +import { useVersionCheck } from '../hooks/useVersionCheck'; import { api } from '../utils/api'; import { useTaskMaster } from '../contexts/TaskMasterContext'; import { useTasksSettings } from '../contexts/TasksSettingsContext'; @@ -57,16 +59,14 @@ function Sidebar({ loadingProgress, onRefresh, onShowSettings, - updateAvailable, - latestVersion, - currentVersion, - releaseInfo, - onShowVersionModal, isPWA, isMobile, - onToggleSidebar + onToggleSidebar, + isCollapsed = false, + onExpandSidebar }) { - const { t } = useTranslation('sidebar'); + const { t } = useTranslation(['sidebar', 'common']); + const { updateAvailable, latestVersion, currentVersion, releaseInfo } = useVersionCheck('siteboon', 'claudecodeui'); const [expandedProjects, setExpandedProjects] = useState(new Set()); const [editingProject, setEditingProject] = useState(null); const [showNewProject, setShowNewProject] = useState(false); @@ -84,6 +84,7 @@ function Sidebar({ const [deletingProjects, setDeletingProjects] = useState(new Set()); const [deleteConfirmation, setDeleteConfirmation] = useState(null); // { project, sessionCount } const [sessionDeleteConfirmation, setSessionDeleteConfirmation] = useState(null); // { projectName, sessionId, sessionTitle, provider } + const [showVersionModal, setShowVersionModal] = useState(false); // TaskMaster context const { setCurrentProject, mcpServerStatus } = useTaskMaster(); @@ -493,8 +494,53 @@ function Sidebar({ setCurrentProject(project); }; + const collapsedSidebar = ( +
+ + + + + {updateAvailable && ( + + )} +
+ ); + return ( <> + {isCollapsed ? ( + collapsedSidebar + ) : ( + <> {/* Project Creation Wizard Modal - Rendered via Portal at document root for full-screen on mobile */} {showNewProject && ReactDOM.createPortal( setShowVersionModal(true)} >
@@ -1495,7 +1541,7 @@ function Sidebar({
+
+ + )} + + setShowVersionModal(false)} + releaseInfo={releaseInfo} + currentVersion={currentVersion} + latestVersion={latestVersion} + /> ); }