-
- {/* Mobile Bottom Navigation */}
- {isMobile && (
-
- )}
- {/* Quick Settings Panel - Only show on chat tab */}
- {activeTab === 'chat' && (
-
- )}
-
- {/* // TODO: This should be in its own file. In modals/Settings.tsx */}
- {/* // TODO: This should be in sidebar as well. */}
- {/* Settings Modal */}
- setShowSettings(false)}
- projects={projects}
- initialTab={settingsInitialTab}
- />
-
- );
-}
-
-// Root App component with router
-function App() {
- return (
-
-
-
-
-
-
-
-
-
- {/* // TODO: Can this be refactored to just have one route? */}
- } />
- } />
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default App;
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..8593236
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,35 @@
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import { I18nextProvider } from 'react-i18next';
+import { ThemeProvider } from './contexts/ThemeContext';
+import { AuthProvider } from './contexts/AuthContext';
+import { TaskMasterProvider } from './contexts/TaskMasterContext';
+import { TasksSettingsProvider } from './contexts/TasksSettingsContext';
+import { WebSocketProvider } from './contexts/WebSocketContext';
+import ProtectedRoute from './components/ProtectedRoute';
+import AppContent from './components/app/AppContent';
+import i18n from './i18n/config.js';
+
+export default function App() {
+ return (
+
+
+
+
+
+
+
+
+
+ } />
+ } />
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/ChatInterface.jsx b/src/components/ChatInterface.jsx
index d3d7bea..93a04d2 100644
--- a/src/components/ChatInterface.jsx
+++ b/src/components/ChatInterface.jsx
@@ -29,6 +29,8 @@ import ClaudeLogo from './ClaudeLogo.jsx';
import CursorLogo from './CursorLogo.jsx';
import CodexLogo from './CodexLogo.jsx';
import NextTaskBanner from './NextTaskBanner.jsx';
+import QuickSettingsPanel from './QuickSettingsPanel';
+
import { useTasksSettings } from '../contexts/TasksSettingsContext';
import { useTranslation } from 'react-i18next';
@@ -5685,6 +5687,8 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, late
+
+
);
}
diff --git a/src/components/QuickSettingsPanel.jsx b/src/components/QuickSettingsPanel.jsx
index d2c8544..391d183 100644
--- a/src/components/QuickSettingsPanel.jsx
+++ b/src/components/QuickSettingsPanel.jsx
@@ -22,8 +22,10 @@ import { useUiPreferences } from '../hooks/useUiPreferences';
import { useTheme } from '../contexts/ThemeContext';
import LanguageSelector from './LanguageSelector';
+import { useDeviceSettings } from '../hooks/useDeviceSettings';
-const QuickSettingsPanel = ({ isMobile }) => {
+
+const QuickSettingsPanel = () => {
const { t } = useTranslation('settings');
const [ isOpen, setIsOpen ] = useState(false);
const [localIsOpen, setLocalIsOpen] = useState(false); // ! Is this necessary? Can we just use isOpen?
@@ -32,6 +34,8 @@ const QuickSettingsPanel = ({ isMobile }) => {
});
const { isDarkMode } = useTheme();
+ const { isMobile } = useDeviceSettings({ trackPWA: false });
+
const { preferences, setPreference } = useUiPreferences();
const { autoExpandTools, showRawParameters, showThinking, autoScrollToBottom, sendByCtrlEnter } = preferences;
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
deleted file mode 100644
index 206f9a0..0000000
--- a/src/components/Sidebar.jsx
+++ /dev/null
@@ -1,1554 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import ReactDOM from 'react-dom';
-import { ScrollArea } from './ui/scroll-area';
-import { Button } from './ui/button';
-import { Badge } from './ui/badge';
-import { Input } from './ui/input';
-import { useTranslation } from 'react-i18next';
-
-import { FolderOpen, Folder, Plus, MessageSquare, Clock, ChevronDown, ChevronRight, Edit3, Check, X, Trash2, Settings, FolderPlus, RefreshCw, Sparkles, Edit2, Star, Search, AlertTriangle } from 'lucide-react';
-import { cn } from '../lib/utils';
-import ClaudeLogo from './ClaudeLogo';
-import CursorLogo from './CursorLogo.jsx';
-import CodexLogo from './CodexLogo.jsx';
-import TaskIndicator from './TaskIndicator';
-import ProjectCreationWizard from './ProjectCreationWizard';
-import VersionUpgradeModal from './modals/VersionUpgradeModal';
-import { useDeviceSettings } from '../hooks/useDeviceSettings';
-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';
-import { IS_PLATFORM } from '../constants/config';
-
-import { formatTimeAgo } from '../utils/dateUtils';
-
-function Sidebar({
- projects,
- selectedProject,
- selectedSession,
- onProjectSelect,
- onSessionSelect,
- onNewSession,
- onSessionDelete,
- onProjectDelete,
- isLoading,
- loadingProgress,
- onRefresh,
- onShowSettings,
- isMobile
-}) {
- const { t } = useTranslation(['sidebar', 'common']);
- const { isPWA } = useDeviceSettings({ trackMobile: false });
- 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);
- const [editingName, setEditingName] = useState('');
- const [loadingSessions, setLoadingSessions] = useState({});
- const [additionalSessions, setAdditionalSessions] = useState({});
- const [initialSessionsLoaded, setInitialSessionsLoaded] = useState(new Set());
- const [currentTime, setCurrentTime] = useState(new Date());
- const [projectSortOrder, setProjectSortOrder] = useState('name');
- const [isRefreshing, setIsRefreshing] = useState(false);
- const [editingSession, setEditingSession] = useState(null);
- const [editingSessionName, setEditingSessionName] = useState('');
-
- const [searchFilter, setSearchFilter] = useState('');
- 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();
- const { tasksEnabled } = useTasksSettings();
-
-
- // Starred projects state - persisted in localStorage
- const [starredProjects, setStarredProjects] = useState(() => {
- try {
- const saved = localStorage.getItem('starredProjects');
- return saved ? new Set(JSON.parse(saved)) : new Set();
- } catch (error) {
- console.error('Error loading starred projects:', error);
- return new Set();
- }
- });
-
- // Touch handler to prevent double-tap issues on iPad (only for buttons, not scroll areas)
- const handleTouchClick = (callback) => {
- return (e) => {
- // Only prevent default for buttons/clickable elements, not scrollable areas
- if (e.target.closest('.overflow-y-auto') || e.target.closest('[data-scroll-container]')) {
- return;
- }
- e.preventDefault();
- e.stopPropagation();
- callback();
- };
- };
-
- useEffect(() => {
- if (typeof document === 'undefined') {
- return;
- }
-
- document.documentElement.classList.toggle('pwa-mode', isPWA);
- document.body.classList.toggle('pwa-mode', isPWA);
- }, [isPWA]);
-
- // Auto-update timestamps every minute
- useEffect(() => {
- const timer = setInterval(() => {
- setCurrentTime(new Date());
- }, 60000); // Update every 60 seconds
-
- return () => clearInterval(timer);
- }, []);
-
- // Clear additional sessions when projects list changes (e.g., after refresh)
- useEffect(() => {
- setAdditionalSessions({});
- setInitialSessionsLoaded(new Set());
- }, [projects]);
-
- // Auto-expand project folder when a session is selected
- useEffect(() => {
- if (selectedSession && selectedProject) {
- setExpandedProjects(prev => new Set([...prev, selectedProject.name]));
- }
- }, [selectedSession, selectedProject]);
-
- // Mark sessions as loaded when projects come in
- useEffect(() => {
- if (projects.length > 0 && !isLoading) {
- const newLoaded = new Set();
- projects.forEach(project => {
- if (project.sessions && project.sessions.length >= 0) {
- newLoaded.add(project.name);
- }
- });
- setInitialSessionsLoaded(newLoaded);
- }
- }, [projects, isLoading]);
-
- // Load project sort order from settings
- useEffect(() => {
- const loadSortOrder = () => {
- try {
- const savedSettings = localStorage.getItem('claude-settings');
- if (savedSettings) {
- const settings = JSON.parse(savedSettings);
- setProjectSortOrder(settings.projectSortOrder || 'name');
- }
- } catch (error) {
- console.error('Error loading sort order:', error);
- }
- };
-
- // Load initially
- loadSortOrder();
-
- // Listen for storage changes
- const handleStorageChange = (e) => {
- if (e.key === 'claude-settings') {
- loadSortOrder();
- }
- };
-
- window.addEventListener('storage', handleStorageChange);
-
- // Also check periodically when component is focused (for same-tab changes)
- const checkInterval = setInterval(() => {
- if (document.hasFocus()) {
- loadSortOrder();
- }
- }, 1000);
-
- return () => {
- window.removeEventListener('storage', handleStorageChange);
- clearInterval(checkInterval);
- };
- }, []);
-
-
- const toggleProject = (projectName) => {
- const newExpanded = new Set();
- // If clicking the already-expanded project, collapse it (newExpanded stays empty)
- // If clicking a different project, expand only that one
- if (!expandedProjects.has(projectName)) {
- newExpanded.add(projectName);
- }
- setExpandedProjects(newExpanded);
- };
-
- // Wrapper to attach project context when session is clicked
- const handleSessionClick = (session, projectName) => {
- onSessionSelect({ ...session, __projectName: projectName });
- };
-
- // Starred projects utility functions
- const toggleStarProject = (projectName) => {
- const newStarred = new Set(starredProjects);
- if (newStarred.has(projectName)) {
- newStarred.delete(projectName);
- } else {
- newStarred.add(projectName);
- }
- setStarredProjects(newStarred);
-
- // Persist to localStorage
- try {
- localStorage.setItem('starredProjects', JSON.stringify([...newStarred]));
- } catch (error) {
- console.error('Error saving starred projects:', error);
- }
- };
-
- const isProjectStarred = (projectName) => {
- return starredProjects.has(projectName);
- };
-
- // Helper function to get all sessions for a project (initial + additional)
- const getAllSessions = (project) => {
- // Combine Claude, Cursor, and Codex sessions; Sidebar will display icon per row
- const claudeSessions = [...(project.sessions || []), ...(additionalSessions[project.name] || [])].map(s => ({ ...s, __provider: 'claude' }));
- const cursorSessions = (project.cursorSessions || []).map(s => ({ ...s, __provider: 'cursor' }));
- const codexSessions = (project.codexSessions || []).map(s => ({ ...s, __provider: 'codex' }));
- // Sort by most recent activity/date
- const normalizeDate = (s) => {
- if (s.__provider === 'cursor') return new Date(s.createdAt);
- if (s.__provider === 'codex') return new Date(s.createdAt || s.lastActivity);
- return new Date(s.lastActivity);
- };
- return [...claudeSessions, ...cursorSessions, ...codexSessions].sort((a, b) => normalizeDate(b) - normalizeDate(a));
- };
-
- // Helper function to get the last activity date for a project
- const getProjectLastActivity = (project) => {
- const allSessions = getAllSessions(project);
- if (allSessions.length === 0) {
- return new Date(0); // Return epoch date for projects with no sessions
- }
-
- // Find the most recent session activity
- const mostRecentDate = allSessions.reduce((latest, session) => {
- const sessionDate = new Date(session.lastActivity);
- return sessionDate > latest ? sessionDate : latest;
- }, new Date(0));
-
- return mostRecentDate;
- };
-
- // Combined sorting: starred projects first, then by selected order
- const sortedProjects = [...projects].sort((a, b) => {
- const aStarred = isProjectStarred(a.name);
- const bStarred = isProjectStarred(b.name);
-
- // First, sort by starred status
- if (aStarred && !bStarred) return -1;
- if (!aStarred && bStarred) return 1;
-
- // For projects with same starred status, sort by selected order
- if (projectSortOrder === 'date') {
- // Sort by most recent activity (descending)
- return getProjectLastActivity(b) - getProjectLastActivity(a);
- } else {
- // Sort by display name (user-defined) or fallback to name (ascending)
- const nameA = a.displayName || a.name;
- const nameB = b.displayName || b.name;
- return nameA.localeCompare(nameB);
- }
- });
-
- const startEditing = (project) => {
- setEditingProject(project.name);
- setEditingName(project.displayName);
- };
-
- const cancelEditing = () => {
- setEditingProject(null);
- setEditingName('');
- };
-
- const saveProjectName = async (projectName) => {
- try {
- const response = await api.renameProject(projectName, editingName);
-
- if (response.ok) {
- // Refresh projects to get updated data
- if (window.refreshProjects) {
- window.refreshProjects();
- } else {
- window.location.reload();
- }
- } else {
- console.error('Failed to rename project');
- }
- } catch (error) {
- console.error('Error renaming project:', error);
- }
-
- setEditingProject(null);
- setEditingName('');
- };
-
- const showDeleteSessionConfirmation = (projectName, sessionId, sessionTitle, provider = 'claude') => {
- setSessionDeleteConfirmation({ projectName, sessionId, sessionTitle, provider });
- };
-
- const confirmDeleteSession = async () => {
- if (!sessionDeleteConfirmation) return;
-
- const { projectName, sessionId, provider } = sessionDeleteConfirmation;
- setSessionDeleteConfirmation(null);
-
- try {
- console.log('[Sidebar] Deleting session:', { projectName, sessionId, provider });
-
- // Call the appropriate API based on provider
- let response;
- if (provider === 'codex') {
- response = await api.deleteCodexSession(sessionId);
- } else {
- response = await api.deleteSession(projectName, sessionId);
- }
-
- console.log('[Sidebar] Delete response:', { ok: response.ok, status: response.status });
-
- if (response.ok) {
- console.log('[Sidebar] Session deleted successfully, calling callback');
- // Call parent callback if provided
- if (onSessionDelete) {
- onSessionDelete(sessionId);
- } else {
- console.warn('[Sidebar] No onSessionDelete callback provided');
- }
- } else {
- const errorText = await response.text();
- console.error('[Sidebar] Failed to delete session:', { status: response.status, error: errorText });
- alert(t('messages.deleteSessionFailed'));
- }
- } catch (error) {
- console.error('[Sidebar] Error deleting session:', error);
- alert(t('messages.deleteSessionError'));
- }
- };
-
- const deleteProject = (project) => {
- const sessionCount = getAllSessions(project).length;
- setDeleteConfirmation({ project, sessionCount });
- };
-
- const confirmDeleteProject = async () => {
- if (!deleteConfirmation) return;
-
- const { project, sessionCount } = deleteConfirmation;
- const isEmpty = sessionCount === 0;
-
- setDeleteConfirmation(null);
- setDeletingProjects(prev => new Set([...prev, project.name]));
-
- try {
- const response = await api.deleteProject(project.name, !isEmpty);
-
- if (response.ok) {
- if (onProjectDelete) {
- onProjectDelete(project.name);
- }
- } else {
- const error = await response.json();
- console.error('Failed to delete project');
- alert(error.error || t('messages.deleteProjectFailed'));
- }
- } catch (error) {
- console.error('Error deleting project:', error);
- alert(t('messages.deleteProjectError'));
- } finally {
- setDeletingProjects(prev => {
- const next = new Set(prev);
- next.delete(project.name);
- return next;
- });
- }
- };
-
- const loadMoreSessions = async (project) => {
- // Check if we can load more sessions
- const canLoadMore = project.sessionMeta?.hasMore !== false;
-
- if (!canLoadMore || loadingSessions[project.name]) {
- return;
- }
-
- setLoadingSessions(prev => ({ ...prev, [project.name]: true }));
-
- try {
- const currentSessionCount = (project.sessions?.length || 0) + (additionalSessions[project.name]?.length || 0);
- const response = await api.sessions(project.name, 5, currentSessionCount);
-
- if (response.ok) {
- const result = await response.json();
-
- // Store additional sessions locally
- setAdditionalSessions(prev => ({
- ...prev,
- [project.name]: [
- ...(prev[project.name] || []),
- ...result.sessions
- ]
- }));
-
- // Update project metadata if needed
- if (result.hasMore === false) {
- // Mark that there are no more sessions to load
- project.sessionMeta = { ...project.sessionMeta, hasMore: false };
- }
- }
- } catch (error) {
- console.error('Error loading more sessions:', error);
- } finally {
- setLoadingSessions(prev => ({ ...prev, [project.name]: false }));
- }
- };
-
- // Filter projects based on search input
- const filteredProjects = sortedProjects.filter(project => {
- if (!searchFilter.trim()) return true;
-
- const searchLower = searchFilter.toLowerCase();
- const displayName = (project.displayName || project.name).toLowerCase();
- const projectName = project.name.toLowerCase();
-
- // Search in both display name and actual project name/path
- return displayName.includes(searchLower) || projectName.includes(searchLower);
- });
-
- // Enhanced project selection that updates both the main UI and TaskMaster context
- const handleProjectSelect = (project) => {
- // Call the original project select handler
- onProjectSelect(project);
-
- // Update TaskMaster context with the selected project
- setCurrentProject(project);
- };
-
- const handleCollapseSidebar = () => {
- setPreference('sidebarVisible', false);
- };
-
- const handleExpandSidebar = () => {
- setPreference('sidebarVisible', true);
- };
-
- const collapsedSidebar = (
-