mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-06-02 18:45:34 +08:00
refactor(sidebar): extract typed app/sidebar architecture and split Sidebar into modular components
- Replace `src/App.jsx` with `src/App.tsx` and move route-level UI orchestration into `src/components/app/AppContent.tsx`. This separates provider/bootstrap concerns from runtime app layout logic, keeps route definitions minimal, and improves readability of the root app entry. - Introduce `src/hooks/useProjectsState.ts` to centralize project/session/sidebar state management previously embedded in `App.jsx`. This keeps the existing behavior for: project loading, Cursor session hydration, WebSocket `loading_progress` handling, additive-update protection for active sessions, URL-based session selection, sidebar refresh/delete/new-session flows. The hook now exposes a typed `sidebarSharedProps` contract and typed handlers used by `AppContent`. - Introduce `src/hooks/useSessionProtection.ts` for active/processing session lifecycle logic. This preserves session-protection behavior while isolating `activeSessions`, `processingSessions`, and temporary-session replacement into a dedicated reusable hook. - Replace monolithic `src/components/Sidebar.jsx` with typed `src/components/Sidebar.tsx` as a thin orchestrator. `Sidebar.tsx` now focuses on wiring controller state/actions, modal visibility, collapsed mode, and version modal behavior instead of rendering every UI branch inline. - Add `src/hooks/useSidebarController.ts` to encapsulate sidebar interaction/state logic. This includes expand/collapse state, inline project/session editing state, project starring/sorting/filtering, lazy session pagination, delete confirmations, rename/delete actions, refresh state, and mobile touch click handling. - Add strongly typed sidebar domain models in `src/components/sidebar/types.ts` and move sidebar-derived helpers into `src/components/sidebar/utils.ts`. Utility coverage now includes: session provider normalization, session view-model creation (name/time/activity/message count), project sorting/filtering, task indicator status derivation, starred-project persistence and readbacks. - Split sidebar rendering into focused components under `src/components/sidebar/`: `SidebarContent.tsx` for top-level sidebar layout composition. `SidebarProjectList.tsx` for project-state branching and project iteration. `SidebarProjectsState.tsx` for loading/empty/no-search-result placeholders. `SidebarProjectItem.tsx` for per-project desktop/mobile header rendering and actions. `SidebarProjectSessions.tsx` for expanded session area, skeletons, pagination, and new-session controls. `SidebarSessionItem.tsx` for per-session desktop/mobile item rendering and session actions. `SessionProviderIcon.tsx` for provider icon normalization. `SidebarHeader.tsx`, `SidebarFooter.tsx`, `SidebarCollapsed.tsx`, and `SidebarModals.tsx` as dedicated typed UI surfaces. This keeps rendering responsibilities local and significantly improves traceability. - Convert shared UI primitives from JSX to TSX: `src/components/ui/button.tsx`, `src/components/ui/input.tsx`, `src/components/ui/badge.tsx`, `src/components/ui/scroll-area.tsx`. These now provide typed props/variants (`forwardRef` where appropriate) while preserving existing class/behavior. - Add shared app typings in `src/types/app.ts` for projects/sessions/websocket/loading contracts used by new hooks/components. - Add global window declarations in `src/types/global.d.ts` for `__ROUTER_BASENAME__`, `refreshProjects`, and `openSettings`, removing implicit `any` usage for global integration points. - Update `src/main.jsx` to import `App.tsx` and keep app bootstrap consistent with the TS migration. - Update `src/components/QuickSettingsPanel.jsx` to self-resolve mobile state via `useDeviceSettings` (remove `isMobile` prop dependency), and update `src/components/ChatInterface.jsx` to render `QuickSettingsPanel` directly. This reduces prop drilling and keeps quick settings colocated with chat UI concerns.
This commit is contained in:
Haileyesus
695
src/App.jsx
695
src/App.jsx
@@ -1,695 +0,0 @@
|
|||||||
/*
|
|
||||||
* App.jsx - Main Application Component with Session Protection System
|
|
||||||
*
|
|
||||||
* SESSION PROTECTION SYSTEM OVERVIEW:
|
|
||||||
* ===================================
|
|
||||||
*
|
|
||||||
* Problem: Automatic project updates from WebSocket would refresh the sidebar and clear chat messages
|
|
||||||
* during active conversations, creating a poor user experience.
|
|
||||||
*
|
|
||||||
* Solution: Track "active sessions" and pause project updates during conversations.
|
|
||||||
*
|
|
||||||
* How it works:
|
|
||||||
* 1. When user sends message → session marked as "active"
|
|
||||||
* 2. Project updates are skipped while session is active
|
|
||||||
* 3. When conversation completes/aborts → session marked as "inactive"
|
|
||||||
* 4. Project updates resume normally
|
|
||||||
*
|
|
||||||
* Handles both existing sessions (with real IDs) and new sessions (with temporary IDs).
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
|
|
||||||
import { BrowserRouter as Router, Routes, Route, useNavigate, useParams } from 'react-router-dom';
|
|
||||||
import Sidebar from './components/Sidebar';
|
|
||||||
import MainContent from './components/MainContent';
|
|
||||||
import MobileNav from './components/MobileNav';
|
|
||||||
import Settings from './components/Settings';
|
|
||||||
import QuickSettingsPanel from './components/QuickSettingsPanel';
|
|
||||||
|
|
||||||
import { ThemeProvider } from './contexts/ThemeContext';
|
|
||||||
import { AuthProvider } from './contexts/AuthContext';
|
|
||||||
import { TaskMasterProvider } from './contexts/TaskMasterContext';
|
|
||||||
import { TasksSettingsProvider } from './contexts/TasksSettingsContext';
|
|
||||||
import { WebSocketProvider, useWebSocket } from './contexts/WebSocketContext';
|
|
||||||
import ProtectedRoute from './components/ProtectedRoute';
|
|
||||||
import { useDeviceSettings } from './hooks/useDeviceSettings';
|
|
||||||
import { api, authenticatedFetch } from './utils/api';
|
|
||||||
import { I18nextProvider, useTranslation } from 'react-i18next';
|
|
||||||
import i18n from './i18n/config.js';
|
|
||||||
|
|
||||||
// TODO: Move to a separate file called AppContent.ts
|
|
||||||
// Main App component with routing
|
|
||||||
function AppContent() {
|
|
||||||
const navigate = useNavigate(); // used for navigation on project select
|
|
||||||
const { sessionId } = useParams();
|
|
||||||
const { t } = useTranslation('common');
|
|
||||||
// * This is a tracker for avoiding excessive re-renders during development
|
|
||||||
const renderCountRef = useRef(0);
|
|
||||||
// console.log(`AppContent render count: ${renderCountRef.current++}`);
|
|
||||||
|
|
||||||
// ! ESSENTIAL STATES
|
|
||||||
const [projects, setProjects] = useState([]);
|
|
||||||
// debugger;
|
|
||||||
// console.log('Projects state updated:', projects); // Debug log to track projects state changes
|
|
||||||
const [selectedProject, setSelectedProject] = useState(null);
|
|
||||||
const [selectedSession, setSelectedSession] = useState(null);
|
|
||||||
|
|
||||||
|
|
||||||
const [activeTab, setActiveTab] = useState('chat'); // 'chat' or 'files'
|
|
||||||
const { isMobile } = useDeviceSettings({ trackPWA: false });
|
|
||||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
|
||||||
const [isLoadingProjects, setIsLoadingProjects] = useState(true);
|
|
||||||
const [loadingProgress, setLoadingProgress] = useState(null); // { phase, current, total, currentProject }
|
|
||||||
const [isInputFocused, setIsInputFocused] = useState(false);
|
|
||||||
const [showSettings, setShowSettings] = useState(false);
|
|
||||||
const [settingsInitialTab, setSettingsInitialTab] = useState('agents');
|
|
||||||
// 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
|
|
||||||
// until the conversation completes or is aborted.
|
|
||||||
const [activeSessions, setActiveSessions] = useState(new Set()); // Track sessions with active conversations
|
|
||||||
|
|
||||||
// Processing Sessions: Track which sessions are currently thinking/processing
|
|
||||||
// This allows us to restore the "Thinking..." banner when switching back to a processing session
|
|
||||||
const [processingSessions, setProcessingSessions] = useState(new Set());
|
|
||||||
|
|
||||||
// External Message Update Trigger: Incremented when external CLI modifies current session's JSONL
|
|
||||||
// Triggers ChatInterface to reload messages without switching sessions
|
|
||||||
const [externalMessageUpdate, setExternalMessageUpdate] = useState(0);
|
|
||||||
|
|
||||||
const { ws, sendMessage, latestMessage } = useWebSocket();
|
|
||||||
console.log('WebSocket latest message:', latestMessage); // Debug log to track WebSocket messages
|
|
||||||
// Ref to track loading progress timeout for cleanup
|
|
||||||
const loadingProgressTimeoutRef = useRef(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// Fetch projects on component mount
|
|
||||||
fetchProjects();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Helper function to determine if an update is purely additive (new sessions/projects)
|
|
||||||
// vs modifying existing selected items that would interfere with active conversations
|
|
||||||
const isUpdateAdditive = (currentProjects, updatedProjects, selectedProject, selectedSession) => {
|
|
||||||
if (!selectedProject || !selectedSession) {
|
|
||||||
// No active session to protect, allow all updates
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Find the selected project in both current and updated data
|
|
||||||
const currentSelectedProject = currentProjects?.find(p => p.name === selectedProject.name);
|
|
||||||
const updatedSelectedProject = updatedProjects?.find(p => p.name === selectedProject.name);
|
|
||||||
|
|
||||||
if (!currentSelectedProject || !updatedSelectedProject) {
|
|
||||||
// Project structure changed significantly, not purely additive
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Find the selected session in both current and updated project data
|
|
||||||
const currentSelectedSession = currentSelectedProject.sessions?.find(s => s.id === selectedSession.id);
|
|
||||||
const updatedSelectedSession = updatedSelectedProject.sessions?.find(s => s.id === selectedSession.id);
|
|
||||||
|
|
||||||
if (!currentSelectedSession || !updatedSelectedSession) {
|
|
||||||
// Selected session was deleted or significantly changed, not purely additive
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if the selected session's content has changed (modification vs addition)
|
|
||||||
// Compare key fields that would affect the loaded chat interface
|
|
||||||
const sessionUnchanged =
|
|
||||||
currentSelectedSession.id === updatedSelectedSession.id &&
|
|
||||||
currentSelectedSession.title === updatedSelectedSession.title &&
|
|
||||||
currentSelectedSession.created_at === updatedSelectedSession.created_at &&
|
|
||||||
currentSelectedSession.updated_at === updatedSelectedSession.updated_at;
|
|
||||||
|
|
||||||
// This is considered additive if the selected session is unchanged
|
|
||||||
// (new sessions may have been added elsewhere, but active session is protected)
|
|
||||||
return sessionUnchanged;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Handle WebSocket messages for real-time project updates
|
|
||||||
useEffect(() => {
|
|
||||||
if (latestMessage) {
|
|
||||||
// Handle loading progress updates
|
|
||||||
if (latestMessage.type === 'loading_progress') {
|
|
||||||
if (loadingProgressTimeoutRef.current) {
|
|
||||||
clearTimeout(loadingProgressTimeoutRef.current);
|
|
||||||
loadingProgressTimeoutRef.current = null;
|
|
||||||
}
|
|
||||||
setLoadingProgress(latestMessage);
|
|
||||||
if (latestMessage.phase === 'complete') {
|
|
||||||
loadingProgressTimeoutRef.current = setTimeout(() => {
|
|
||||||
setLoadingProgress(null);
|
|
||||||
loadingProgressTimeoutRef.current = null;
|
|
||||||
}, 500);
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (latestMessage.type === 'projects_updated') {
|
|
||||||
|
|
||||||
// External Session Update Detection: Check if the changed file is the current session's JSONL
|
|
||||||
// If so, and the session is not active, trigger a message reload in ChatInterface
|
|
||||||
if (latestMessage.changedFile && selectedSession && selectedProject) {
|
|
||||||
// Extract session ID from changedFile (format: "project-name/session-id.jsonl")
|
|
||||||
const normalized = latestMessage.changedFile.replace(/\\/g, '/');
|
|
||||||
const changedFileParts = normalized.split('/');
|
|
||||||
|
|
||||||
if (changedFileParts.length >= 2) {
|
|
||||||
const filename = changedFileParts[changedFileParts.length - 1];
|
|
||||||
const changedSessionId = filename.replace('.jsonl', '');
|
|
||||||
|
|
||||||
// Check if this is the currently-selected session
|
|
||||||
if (changedSessionId === selectedSession.id) {
|
|
||||||
const isSessionActive = activeSessions.has(selectedSession.id);
|
|
||||||
|
|
||||||
if (!isSessionActive) {
|
|
||||||
// Session is not active - safe to reload messages
|
|
||||||
setExternalMessageUpdate(prev => prev + 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Session Protection Logic: Allow additions but prevent changes during active conversations
|
|
||||||
// This allows new sessions/projects to appear in sidebar while protecting active chat messages
|
|
||||||
// We check for two types of active sessions:
|
|
||||||
// 1. Existing sessions: selectedSession.id exists in activeSessions
|
|
||||||
// 2. New sessions: temporary "new-session-*" identifiers in activeSessions (before real session ID is received)
|
|
||||||
const hasActiveSession = (selectedSession && activeSessions.has(selectedSession.id)) ||
|
|
||||||
(activeSessions.size > 0 && Array.from(activeSessions).some(id => id.startsWith('new-session-')));
|
|
||||||
|
|
||||||
if (hasActiveSession) {
|
|
||||||
// Allow updates but be selective: permit additions, prevent changes to existing items
|
|
||||||
const updatedProjects = latestMessage.projects;
|
|
||||||
const currentProjects = projects;
|
|
||||||
|
|
||||||
// Check if this is purely additive (new sessions/projects) vs modification of existing ones
|
|
||||||
const isAdditiveUpdate = isUpdateAdditive(currentProjects, updatedProjects, selectedProject, selectedSession);
|
|
||||||
|
|
||||||
if (!isAdditiveUpdate) {
|
|
||||||
// Skip updates that would modify existing selected session/project
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// Continue with additive updates below
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update projects state with the new data from WebSocket
|
|
||||||
const updatedProjects = latestMessage.projects;
|
|
||||||
console.log("====> latest message is: ", latestMessage);
|
|
||||||
setProjects(updatedProjects);
|
|
||||||
|
|
||||||
// Update selected project if it exists in the updated projects
|
|
||||||
if (selectedProject) {
|
|
||||||
const updatedSelectedProject = updatedProjects.find(p => p.name === selectedProject.name);
|
|
||||||
if (updatedSelectedProject) {
|
|
||||||
// Only update selected project if it actually changed - prevents flickering
|
|
||||||
if (JSON.stringify(updatedSelectedProject) !== JSON.stringify(selectedProject)) {
|
|
||||||
setSelectedProject(updatedSelectedProject);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (selectedSession) {
|
|
||||||
const allSessions = [
|
|
||||||
...(updatedSelectedProject.sessions || []),
|
|
||||||
...(updatedSelectedProject.codexSessions || []),
|
|
||||||
...(updatedSelectedProject.cursorSessions || [])
|
|
||||||
];
|
|
||||||
const updatedSelectedSession = allSessions.find(s => s.id === selectedSession.id);
|
|
||||||
if (!updatedSelectedSession) {
|
|
||||||
setSelectedSession(null);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
if (loadingProgressTimeoutRef.current) {
|
|
||||||
clearTimeout(loadingProgressTimeoutRef.current);
|
|
||||||
loadingProgressTimeoutRef.current = null;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, [latestMessage, selectedProject, selectedSession, activeSessions]);
|
|
||||||
|
|
||||||
const fetchProjects = async () => {
|
|
||||||
try {
|
|
||||||
setIsLoadingProjects(true);
|
|
||||||
const response = await api.projects();
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
// Always fetch Cursor sessions for each project so we can combine views
|
|
||||||
for (let project of data) {
|
|
||||||
try {
|
|
||||||
const url = `/api/cursor/sessions?projectPath=${encodeURIComponent(project.fullPath || project.path)}`;
|
|
||||||
const cursorResponse = await authenticatedFetch(url);
|
|
||||||
if (cursorResponse.ok) {
|
|
||||||
const cursorData = await cursorResponse.json();
|
|
||||||
if (cursorData.success && cursorData.sessions) {
|
|
||||||
project.cursorSessions = cursorData.sessions;
|
|
||||||
} else {
|
|
||||||
project.cursorSessions = [];
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
project.cursorSessions = [];
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error(`Error fetching Cursor sessions for project ${project.name}:`, error);
|
|
||||||
project.cursorSessions = [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Optimize to preserve object references when data hasn't changed
|
|
||||||
setProjects(prevProjects => {
|
|
||||||
// If no previous projects, just set the new data
|
|
||||||
if (prevProjects.length === 0) {
|
|
||||||
return data;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log("===> Prev projects: ", prevProjects);
|
|
||||||
|
|
||||||
// Check if the projects data has actually changed
|
|
||||||
const hasChanges = data.some((newProject, index) => {
|
|
||||||
const prevProject = prevProjects[index];
|
|
||||||
if (!prevProject) return true;
|
|
||||||
|
|
||||||
// Compare key properties that would affect UI
|
|
||||||
return (
|
|
||||||
newProject.name !== prevProject.name ||
|
|
||||||
newProject.displayName !== prevProject.displayName ||
|
|
||||||
newProject.fullPath !== prevProject.fullPath ||
|
|
||||||
JSON.stringify(newProject.sessionMeta) !== JSON.stringify(prevProject.sessionMeta) ||
|
|
||||||
JSON.stringify(newProject.sessions) !== JSON.stringify(prevProject.sessions) ||
|
|
||||||
JSON.stringify(newProject.cursorSessions) !== JSON.stringify(prevProject.cursorSessions)
|
|
||||||
);
|
|
||||||
}) || data.length !== prevProjects.length;
|
|
||||||
|
|
||||||
// Only update if there are actual changes
|
|
||||||
return hasChanges ? data : prevProjects;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Don't auto-select any project - user should choose manually
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching projects:', error);
|
|
||||||
} finally {
|
|
||||||
setIsLoadingProjects(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Expose fetchProjects globally for component access
|
|
||||||
window.refreshProjects = fetchProjects; // ! Exposing it globally is bad so we should use props for stuff like this.
|
|
||||||
|
|
||||||
// Expose openSettings function globally for component access
|
|
||||||
window.openSettings = useCallback((tab = 'tools') => {
|
|
||||||
setSettingsInitialTab(tab);
|
|
||||||
setShowSettings(true);
|
|
||||||
}, []); // ! Exposing it globally is bad so we should use props for stuff like this.
|
|
||||||
|
|
||||||
// Handle URL-based session loading
|
|
||||||
useEffect(() => {
|
|
||||||
if (sessionId && projects.length > 0) {
|
|
||||||
// Only switch tabs on initial load, not on every project update
|
|
||||||
const shouldSwitchTab = !selectedSession || selectedSession.id !== sessionId;
|
|
||||||
// Find the session across all projects
|
|
||||||
for (const project of projects) {
|
|
||||||
let session = project.sessions?.find(s => s.id === sessionId);
|
|
||||||
if (session) {
|
|
||||||
setSelectedProject(project);
|
|
||||||
setSelectedSession({ ...session, __provider: 'claude' });
|
|
||||||
// Only switch to chat tab if we're loading a different session
|
|
||||||
if (shouldSwitchTab) {
|
|
||||||
setActiveTab('chat');
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// Also check Cursor sessions
|
|
||||||
const cSession = project.cursorSessions?.find(s => s.id === sessionId);
|
|
||||||
if (cSession) {
|
|
||||||
setSelectedProject(project);
|
|
||||||
setSelectedSession({ ...cSession, __provider: 'cursor' });
|
|
||||||
if (shouldSwitchTab) {
|
|
||||||
setActiveTab('chat');
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// If session not found, it might be a newly created session
|
|
||||||
// Just navigate to it and it will be found when the sidebar refreshes
|
|
||||||
// Don't redirect to home, let the session load naturally
|
|
||||||
}
|
|
||||||
}, [sessionId, projects, navigate]);
|
|
||||||
|
|
||||||
|
|
||||||
// TODO: All this functions should be in separate components
|
|
||||||
const handleProjectSelect = (project) => {
|
|
||||||
setSelectedProject(project);
|
|
||||||
setSelectedSession(null);
|
|
||||||
navigate('/');
|
|
||||||
if (isMobile) {
|
|
||||||
setSidebarOpen(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSessionSelect = (session) => {
|
|
||||||
setSelectedSession(session);
|
|
||||||
// Only switch to chat tab when user explicitly selects a session
|
|
||||||
// This prevents tab switching during automatic updates
|
|
||||||
if (activeTab !== 'git' && activeTab !== 'preview') {
|
|
||||||
setActiveTab('chat');
|
|
||||||
}
|
|
||||||
|
|
||||||
// For Cursor sessions, we need to set the session ID differently
|
|
||||||
// since they're persistent and not created by Claude
|
|
||||||
const provider = localStorage.getItem('selected-provider') || 'claude';
|
|
||||||
if (provider === 'cursor') {
|
|
||||||
// Cursor sessions have persistent IDs
|
|
||||||
sessionStorage.setItem('cursorSessionId', session.id);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Only close sidebar on mobile if switching to a different project
|
|
||||||
if (isMobile) {
|
|
||||||
const sessionProjectName = session.__projectName;
|
|
||||||
const currentProjectName = selectedProject?.name;
|
|
||||||
|
|
||||||
// Close sidebar if clicking a session from a different project
|
|
||||||
// Keep it open if clicking a session from the same project
|
|
||||||
if (sessionProjectName !== currentProjectName) {
|
|
||||||
setSidebarOpen(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
navigate(`/session/${session.id}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleNewSession = (project) => {
|
|
||||||
setSelectedProject(project);
|
|
||||||
setSelectedSession(null);
|
|
||||||
setActiveTab('chat');
|
|
||||||
navigate('/');
|
|
||||||
if (isMobile) {
|
|
||||||
setSidebarOpen(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSessionDelete = (sessionId) => {
|
|
||||||
// If the deleted session was currently selected, clear it
|
|
||||||
if (selectedSession?.id === sessionId) {
|
|
||||||
setSelectedSession(null);
|
|
||||||
navigate('/');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update projects state locally instead of full refresh
|
|
||||||
setProjects(prevProjects =>
|
|
||||||
prevProjects.map(project => ({
|
|
||||||
...project,
|
|
||||||
sessions: project.sessions?.filter(session => session.id !== sessionId) || [],
|
|
||||||
sessionMeta: {
|
|
||||||
...project.sessionMeta,
|
|
||||||
total: Math.max(0, (project.sessionMeta?.total || 0) - 1)
|
|
||||||
}
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const handleSidebarRefresh = async () => {
|
|
||||||
// Refresh only the sessions for all projects, don't change selected state
|
|
||||||
try {
|
|
||||||
const response = await api.projects();
|
|
||||||
const freshProjects = await response.json();
|
|
||||||
|
|
||||||
// Optimize to preserve object references and minimize re-renders
|
|
||||||
setProjects(prevProjects => {
|
|
||||||
// Check if projects data has actually changed
|
|
||||||
const hasChanges = freshProjects.some((newProject, index) => {
|
|
||||||
const prevProject = prevProjects[index];
|
|
||||||
if (!prevProject) return true;
|
|
||||||
|
|
||||||
return (
|
|
||||||
newProject.name !== prevProject.name ||
|
|
||||||
newProject.displayName !== prevProject.displayName ||
|
|
||||||
newProject.fullPath !== prevProject.fullPath ||
|
|
||||||
JSON.stringify(newProject.sessionMeta) !== JSON.stringify(prevProject.sessionMeta) ||
|
|
||||||
JSON.stringify(newProject.sessions) !== JSON.stringify(prevProject.sessions)
|
|
||||||
);
|
|
||||||
}) || freshProjects.length !== prevProjects.length;
|
|
||||||
|
|
||||||
return hasChanges ? freshProjects : prevProjects;
|
|
||||||
});
|
|
||||||
|
|
||||||
// If we have a selected project, make sure it's still selected after refresh
|
|
||||||
if (selectedProject) {
|
|
||||||
const refreshedProject = freshProjects.find(p => p.name === selectedProject.name);
|
|
||||||
if (refreshedProject) {
|
|
||||||
// Only update selected project if it actually changed
|
|
||||||
if (JSON.stringify(refreshedProject) !== JSON.stringify(selectedProject)) {
|
|
||||||
setSelectedProject(refreshedProject);
|
|
||||||
}
|
|
||||||
|
|
||||||
// If we have a selected session, try to find it in the refreshed project
|
|
||||||
if (selectedSession) {
|
|
||||||
const refreshedSession = refreshedProject.sessions?.find(s => s.id === selectedSession.id);
|
|
||||||
if (refreshedSession && JSON.stringify(refreshedSession) !== JSON.stringify(selectedSession)) {
|
|
||||||
setSelectedSession(refreshedSession);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error refreshing sidebar:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleProjectDelete = (projectName) => {
|
|
||||||
// If the deleted project was currently selected, clear it
|
|
||||||
if (selectedProject?.name === projectName) {
|
|
||||||
setSelectedProject(null);
|
|
||||||
setSelectedSession(null);
|
|
||||||
navigate('/');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update projects state locally instead of full refresh
|
|
||||||
setProjects(prevProjects =>
|
|
||||||
prevProjects.filter(project => project.name !== projectName)
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Session Protection Functions: Manage the lifecycle of active sessions
|
|
||||||
|
|
||||||
// markSessionAsActive: Called when user sends a message to mark session as protected
|
|
||||||
// This includes both real session IDs and temporary "new-session-*" identifiers
|
|
||||||
const markSessionAsActive = useCallback((sessionId) => {
|
|
||||||
if (sessionId) {
|
|
||||||
setActiveSessions(prev => new Set([...prev, sessionId]));
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// markSessionAsInactive: Called when conversation completes/aborts to re-enable project updates
|
|
||||||
const markSessionAsInactive = useCallback((sessionId) => {
|
|
||||||
if (sessionId) {
|
|
||||||
setActiveSessions(prev => {
|
|
||||||
const newSet = new Set(prev);
|
|
||||||
newSet.delete(sessionId);
|
|
||||||
return newSet;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Processing Session Functions: Track which sessions are currently thinking/processing
|
|
||||||
|
|
||||||
// markSessionAsProcessing: Called when Claude starts thinking/processing
|
|
||||||
const markSessionAsProcessing = useCallback((sessionId) => {
|
|
||||||
if (sessionId) {
|
|
||||||
setProcessingSessions(prev => new Set([...prev, sessionId]));
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// markSessionAsNotProcessing: Called when Claude finishes thinking/processing
|
|
||||||
const markSessionAsNotProcessing = useCallback((sessionId) => {
|
|
||||||
if (sessionId) {
|
|
||||||
setProcessingSessions(prev => {
|
|
||||||
const newSet = new Set(prev);
|
|
||||||
newSet.delete(sessionId);
|
|
||||||
return newSet;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// replaceTemporarySession: Called when WebSocket provides real session ID for new sessions
|
|
||||||
// Removes temporary "new-session-*" identifiers and adds the real session ID
|
|
||||||
// This maintains protection continuity during the transition from temporary to real session
|
|
||||||
const replaceTemporarySession = useCallback((realSessionId) => {
|
|
||||||
if (realSessionId) {
|
|
||||||
setActiveSessions(prev => {
|
|
||||||
const newSet = new Set();
|
|
||||||
// Keep all non-temporary sessions and add the real session ID
|
|
||||||
for (const sessionId of prev) {
|
|
||||||
if (!sessionId.startsWith('new-session-')) {
|
|
||||||
newSet.add(sessionId);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
newSet.add(realSessionId);
|
|
||||||
return newSet;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleShowSettings = useCallback(() => {
|
|
||||||
setShowSettings(true);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const sidebarSharedProps = useMemo(() => ({
|
|
||||||
projects,
|
|
||||||
selectedProject,
|
|
||||||
selectedSession,
|
|
||||||
onProjectSelect: handleProjectSelect,
|
|
||||||
onSessionSelect: handleSessionSelect,
|
|
||||||
onNewSession: handleNewSession,
|
|
||||||
onSessionDelete: handleSessionDelete,
|
|
||||||
onProjectDelete: handleProjectDelete,
|
|
||||||
isLoading: isLoadingProjects,
|
|
||||||
loadingProgress,
|
|
||||||
onRefresh: handleSidebarRefresh,
|
|
||||||
onShowSettings: handleShowSettings,
|
|
||||||
isMobile
|
|
||||||
}), [
|
|
||||||
projects,
|
|
||||||
selectedProject,
|
|
||||||
selectedSession,
|
|
||||||
handleProjectSelect,
|
|
||||||
handleSessionSelect,
|
|
||||||
handleNewSession,
|
|
||||||
handleSessionDelete,
|
|
||||||
handleProjectDelete,
|
|
||||||
isLoadingProjects,
|
|
||||||
loadingProgress,
|
|
||||||
handleSidebarRefresh,
|
|
||||||
handleShowSettings,
|
|
||||||
isMobile
|
|
||||||
]);
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="fixed inset-0 flex bg-background">
|
|
||||||
{/* Fixed Desktop Sidebar */}
|
|
||||||
{!isMobile && (
|
|
||||||
<div className="h-full flex-shrink-0 border-r border-border bg-card">
|
|
||||||
<Sidebar
|
|
||||||
{...sidebarSharedProps}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Mobile Sidebar Overlay */}
|
|
||||||
{isMobile && (
|
|
||||||
<div className={`fixed inset-0 z-50 flex transition-all duration-150 ease-out ${
|
|
||||||
sidebarOpen ? 'opacity-100 visible' : 'opacity-0 invisible'
|
|
||||||
}`}>
|
|
||||||
<button
|
|
||||||
className="fixed inset-0 bg-background/80 backdrop-blur-sm transition-opacity duration-150 ease-out"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
setSidebarOpen(false);
|
|
||||||
}}
|
|
||||||
onTouchStart={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
setSidebarOpen(false);
|
|
||||||
}}
|
|
||||||
aria-label={t('versionUpdate.ariaLabels.closeSidebar')}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
className={`relative w-[85vw] max-w-sm sm:w-80 h-full bg-card border-r border-border transform transition-transform duration-150 ease-out ${
|
|
||||||
sidebarOpen ? 'translate-x-0' : '-translate-x-full'
|
|
||||||
}`}
|
|
||||||
onClick={(e) => e.stopPropagation()}
|
|
||||||
onTouchStart={(e) => e.stopPropagation()}
|
|
||||||
>
|
|
||||||
<Sidebar
|
|
||||||
{...sidebarSharedProps}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Main Content Area - Flexible */}
|
|
||||||
<div className={`flex-1 flex flex-col min-w-0 ${isMobile && !isInputFocused ? 'pb-mobile-nav' : ''}`}>
|
|
||||||
<MainContent
|
|
||||||
selectedProject={selectedProject}
|
|
||||||
selectedSession={selectedSession}
|
|
||||||
activeTab={activeTab}
|
|
||||||
setActiveTab={setActiveTab}
|
|
||||||
ws={ws}
|
|
||||||
sendMessage={sendMessage}
|
|
||||||
latestMessage={latestMessage}
|
|
||||||
isMobile={isMobile}
|
|
||||||
onMenuClick={() => setSidebarOpen(true)}
|
|
||||||
isLoading={isLoadingProjects}
|
|
||||||
onInputFocusChange={setIsInputFocused}
|
|
||||||
onSessionActive={markSessionAsActive}
|
|
||||||
onSessionInactive={markSessionAsInactive}
|
|
||||||
onSessionProcessing={markSessionAsProcessing}
|
|
||||||
onSessionNotProcessing={markSessionAsNotProcessing}
|
|
||||||
processingSessions={processingSessions}
|
|
||||||
onReplaceTemporarySession={replaceTemporarySession}
|
|
||||||
onNavigateToSession={(sessionId) => navigate(`/session/${sessionId}`)}
|
|
||||||
onShowSettings={() => setShowSettings(true)}
|
|
||||||
|
|
||||||
externalMessageUpdate={externalMessageUpdate}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Mobile Bottom Navigation */}
|
|
||||||
{isMobile && (
|
|
||||||
<MobileNav
|
|
||||||
activeTab={activeTab}
|
|
||||||
setActiveTab={setActiveTab}
|
|
||||||
isInputFocused={isInputFocused}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{/* Quick Settings Panel - Only show on chat tab */}
|
|
||||||
{activeTab === 'chat' && (
|
|
||||||
<QuickSettingsPanel isMobile={isMobile} />
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* // TODO: This should be in its own file. In modals/Settings.tsx */}
|
|
||||||
{/* // TODO: This should be in sidebar as well. */}
|
|
||||||
{/* Settings Modal */}
|
|
||||||
<Settings
|
|
||||||
isOpen={showSettings}
|
|
||||||
onClose={() => setShowSettings(false)}
|
|
||||||
projects={projects}
|
|
||||||
initialTab={settingsInitialTab}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Root App component with router
|
|
||||||
function App() {
|
|
||||||
return (
|
|
||||||
<I18nextProvider i18n={i18n}>
|
|
||||||
<ThemeProvider>
|
|
||||||
<AuthProvider>
|
|
||||||
<WebSocketProvider>
|
|
||||||
<TasksSettingsProvider>
|
|
||||||
<TaskMasterProvider>
|
|
||||||
<ProtectedRoute>
|
|
||||||
<Router basename={window.__ROUTER_BASENAME__ || ''}>
|
|
||||||
<Routes>
|
|
||||||
{/* // TODO: Can this be refactored to just have one route? */}
|
|
||||||
<Route path="/" element={<AppContent />} />
|
|
||||||
<Route path="/session/:sessionId" element={<AppContent />} />
|
|
||||||
</Routes>
|
|
||||||
</Router>
|
|
||||||
</ProtectedRoute>
|
|
||||||
</TaskMasterProvider>
|
|
||||||
</TasksSettingsProvider>
|
|
||||||
</WebSocketProvider>
|
|
||||||
</AuthProvider>
|
|
||||||
</ThemeProvider>
|
|
||||||
</I18nextProvider>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
35
src/App.tsx
Normal file
35
src/App.tsx
Normal file
@@ -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 (
|
||||||
|
<I18nextProvider i18n={i18n}>
|
||||||
|
<ThemeProvider>
|
||||||
|
<AuthProvider>
|
||||||
|
<WebSocketProvider>
|
||||||
|
<TasksSettingsProvider>
|
||||||
|
<TaskMasterProvider>
|
||||||
|
<ProtectedRoute>
|
||||||
|
<Router basename={window.__ROUTER_BASENAME__ || ''}>
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<AppContent />} />
|
||||||
|
<Route path="/session/:sessionId" element={<AppContent />} />
|
||||||
|
</Routes>
|
||||||
|
</Router>
|
||||||
|
</ProtectedRoute>
|
||||||
|
</TaskMasterProvider>
|
||||||
|
</TasksSettingsProvider>
|
||||||
|
</WebSocketProvider>
|
||||||
|
</AuthProvider>
|
||||||
|
</ThemeProvider>
|
||||||
|
</I18nextProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -29,6 +29,8 @@ import ClaudeLogo from './ClaudeLogo.jsx';
|
|||||||
import CursorLogo from './CursorLogo.jsx';
|
import CursorLogo from './CursorLogo.jsx';
|
||||||
import CodexLogo from './CodexLogo.jsx';
|
import CodexLogo from './CodexLogo.jsx';
|
||||||
import NextTaskBanner from './NextTaskBanner.jsx';
|
import NextTaskBanner from './NextTaskBanner.jsx';
|
||||||
|
import QuickSettingsPanel from './QuickSettingsPanel';
|
||||||
|
|
||||||
import { useTasksSettings } from '../contexts/TasksSettingsContext';
|
import { useTasksSettings } from '../contexts/TasksSettingsContext';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
@@ -5685,6 +5687,8 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, late
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<QuickSettingsPanel />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -22,8 +22,10 @@ import { useUiPreferences } from '../hooks/useUiPreferences';
|
|||||||
import { useTheme } from '../contexts/ThemeContext';
|
import { useTheme } from '../contexts/ThemeContext';
|
||||||
import LanguageSelector from './LanguageSelector';
|
import LanguageSelector from './LanguageSelector';
|
||||||
|
|
||||||
|
import { useDeviceSettings } from '../hooks/useDeviceSettings';
|
||||||
|
|
||||||
const QuickSettingsPanel = ({ isMobile }) => {
|
|
||||||
|
const QuickSettingsPanel = () => {
|
||||||
const { t } = useTranslation('settings');
|
const { t } = useTranslation('settings');
|
||||||
const [ isOpen, setIsOpen ] = useState(false);
|
const [ isOpen, setIsOpen ] = useState(false);
|
||||||
const [localIsOpen, setLocalIsOpen] = useState(false); // ! Is this necessary? Can we just use isOpen?
|
const [localIsOpen, setLocalIsOpen] = useState(false); // ! Is this necessary? Can we just use isOpen?
|
||||||
@@ -32,6 +34,8 @@ const QuickSettingsPanel = ({ isMobile }) => {
|
|||||||
});
|
});
|
||||||
const { isDarkMode } = useTheme();
|
const { isDarkMode } = useTheme();
|
||||||
|
|
||||||
|
const { isMobile } = useDeviceSettings({ trackPWA: false });
|
||||||
|
|
||||||
const { preferences, setPreference } = useUiPreferences();
|
const { preferences, setPreference } = useUiPreferences();
|
||||||
const { autoExpandTools, showRawParameters, showThinking, autoScrollToBottom, sendByCtrlEnter } = preferences;
|
const { autoExpandTools, showRawParameters, showThinking, autoScrollToBottom, sendByCtrlEnter } = preferences;
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
241
src/components/Sidebar.tsx
Normal file
241
src/components/Sidebar.tsx
Normal file
@@ -0,0 +1,241 @@
|
|||||||
|
import { useEffect } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import VersionUpgradeModal from './modals/VersionUpgradeModal';
|
||||||
|
import { useDeviceSettings } from '../hooks/useDeviceSettings';
|
||||||
|
import { useVersionCheck } from '../hooks/useVersionCheck';
|
||||||
|
import { useUiPreferences } from '../hooks/useUiPreferences';
|
||||||
|
import { useSidebarController } from '../hooks/useSidebarController';
|
||||||
|
import { useTaskMaster } from '../contexts/TaskMasterContext';
|
||||||
|
import { useTasksSettings } from '../contexts/TasksSettingsContext';
|
||||||
|
import SidebarCollapsed from './sidebar/SidebarCollapsed';
|
||||||
|
import SidebarContent from './sidebar/SidebarContent';
|
||||||
|
import SidebarModals from './sidebar/SidebarModals';
|
||||||
|
import type { Project } from '../types/app';
|
||||||
|
import type { SidebarProjectListProps } from './sidebar/SidebarProjectList';
|
||||||
|
import type { MCPServerStatus, SidebarProps } from './sidebar/types';
|
||||||
|
|
||||||
|
type TaskMasterSidebarContext = {
|
||||||
|
setCurrentProject: (project: Project) => void;
|
||||||
|
mcpServerStatus: MCPServerStatus;
|
||||||
|
};
|
||||||
|
|
||||||
|
function Sidebar({
|
||||||
|
projects,
|
||||||
|
selectedProject,
|
||||||
|
selectedSession,
|
||||||
|
onProjectSelect,
|
||||||
|
onSessionSelect,
|
||||||
|
onNewSession,
|
||||||
|
onSessionDelete,
|
||||||
|
onProjectDelete,
|
||||||
|
isLoading,
|
||||||
|
loadingProgress,
|
||||||
|
onRefresh,
|
||||||
|
onShowSettings,
|
||||||
|
isMobile,
|
||||||
|
}: SidebarProps) {
|
||||||
|
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 { setCurrentProject, mcpServerStatus } = useTaskMaster() as TaskMasterSidebarContext;
|
||||||
|
const { tasksEnabled } = useTasksSettings();
|
||||||
|
|
||||||
|
const {
|
||||||
|
isSidebarCollapsed,
|
||||||
|
expandedProjects,
|
||||||
|
editingProject,
|
||||||
|
showNewProject,
|
||||||
|
editingName,
|
||||||
|
loadingSessions,
|
||||||
|
initialSessionsLoaded,
|
||||||
|
currentTime,
|
||||||
|
isRefreshing,
|
||||||
|
editingSession,
|
||||||
|
editingSessionName,
|
||||||
|
searchFilter,
|
||||||
|
deletingProjects,
|
||||||
|
deleteConfirmation,
|
||||||
|
sessionDeleteConfirmation,
|
||||||
|
showVersionModal,
|
||||||
|
filteredProjects,
|
||||||
|
handleTouchClick,
|
||||||
|
toggleProject,
|
||||||
|
handleSessionClick,
|
||||||
|
toggleStarProject,
|
||||||
|
isProjectStarred,
|
||||||
|
getProjectSessions,
|
||||||
|
startEditing,
|
||||||
|
cancelEditing,
|
||||||
|
saveProjectName,
|
||||||
|
showDeleteSessionConfirmation,
|
||||||
|
confirmDeleteSession,
|
||||||
|
requestProjectDelete,
|
||||||
|
confirmDeleteProject,
|
||||||
|
loadMoreSessions,
|
||||||
|
handleProjectSelect,
|
||||||
|
refreshProjects,
|
||||||
|
updateSessionSummary,
|
||||||
|
collapseSidebar: handleCollapseSidebar,
|
||||||
|
expandSidebar: handleExpandSidebar,
|
||||||
|
setShowNewProject,
|
||||||
|
setEditingName,
|
||||||
|
setEditingSession,
|
||||||
|
setEditingSessionName,
|
||||||
|
setSearchFilter,
|
||||||
|
setDeleteConfirmation,
|
||||||
|
setSessionDeleteConfirmation,
|
||||||
|
setShowVersionModal,
|
||||||
|
} = useSidebarController({
|
||||||
|
projects,
|
||||||
|
selectedProject,
|
||||||
|
selectedSession,
|
||||||
|
isLoading,
|
||||||
|
isMobile,
|
||||||
|
t,
|
||||||
|
onRefresh,
|
||||||
|
onProjectSelect,
|
||||||
|
onSessionSelect,
|
||||||
|
onSessionDelete,
|
||||||
|
onProjectDelete,
|
||||||
|
setCurrentProject,
|
||||||
|
setSidebarVisible: (visible) => setPreference('sidebarVisible', visible),
|
||||||
|
sidebarVisible,
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (typeof document === 'undefined') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.documentElement.classList.toggle('pwa-mode', isPWA);
|
||||||
|
document.body.classList.toggle('pwa-mode', isPWA);
|
||||||
|
}, [isPWA]);
|
||||||
|
|
||||||
|
const handleProjectCreated = () => {
|
||||||
|
if (window.refreshProjects) {
|
||||||
|
void window.refreshProjects();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.location.reload();
|
||||||
|
};
|
||||||
|
|
||||||
|
const projectListProps: SidebarProjectListProps = {
|
||||||
|
projects,
|
||||||
|
filteredProjects,
|
||||||
|
selectedProject,
|
||||||
|
selectedSession,
|
||||||
|
isLoading,
|
||||||
|
loadingProgress,
|
||||||
|
expandedProjects,
|
||||||
|
editingProject,
|
||||||
|
editingName,
|
||||||
|
loadingSessions,
|
||||||
|
initialSessionsLoaded,
|
||||||
|
currentTime,
|
||||||
|
editingSession,
|
||||||
|
editingSessionName,
|
||||||
|
deletingProjects,
|
||||||
|
tasksEnabled,
|
||||||
|
mcpServerStatus,
|
||||||
|
getProjectSessions,
|
||||||
|
isProjectStarred,
|
||||||
|
onEditingNameChange: setEditingName,
|
||||||
|
onToggleProject: toggleProject,
|
||||||
|
onProjectSelect: handleProjectSelect,
|
||||||
|
onToggleStarProject: toggleStarProject,
|
||||||
|
onStartEditingProject: startEditing,
|
||||||
|
onCancelEditingProject: cancelEditing,
|
||||||
|
onSaveProjectName: (projectName) => {
|
||||||
|
void saveProjectName(projectName);
|
||||||
|
},
|
||||||
|
onDeleteProject: requestProjectDelete,
|
||||||
|
onSessionSelect: handleSessionClick,
|
||||||
|
onDeleteSession: showDeleteSessionConfirmation,
|
||||||
|
onLoadMoreSessions: (project) => {
|
||||||
|
void loadMoreSessions(project);
|
||||||
|
},
|
||||||
|
onNewSession,
|
||||||
|
onEditingSessionNameChange: setEditingSessionName,
|
||||||
|
onStartEditingSession: (sessionId, initialName) => {
|
||||||
|
setEditingSession(sessionId);
|
||||||
|
setEditingSessionName(initialName);
|
||||||
|
},
|
||||||
|
onCancelEditingSession: () => {
|
||||||
|
setEditingSession(null);
|
||||||
|
setEditingSessionName('');
|
||||||
|
},
|
||||||
|
onSaveEditingSession: (projectName, sessionId, summary) => {
|
||||||
|
void updateSessionSummary(projectName, sessionId, summary);
|
||||||
|
},
|
||||||
|
touchHandlerFactory: handleTouchClick,
|
||||||
|
t,
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{isSidebarCollapsed ? (
|
||||||
|
<SidebarCollapsed
|
||||||
|
onExpand={handleExpandSidebar}
|
||||||
|
onShowSettings={onShowSettings}
|
||||||
|
updateAvailable={updateAvailable}
|
||||||
|
onShowVersionModal={() => setShowVersionModal(true)}
|
||||||
|
t={t}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<SidebarModals
|
||||||
|
showNewProject={showNewProject}
|
||||||
|
onCloseNewProject={() => setShowNewProject(false)}
|
||||||
|
onProjectCreated={handleProjectCreated}
|
||||||
|
deleteConfirmation={deleteConfirmation}
|
||||||
|
onCancelDeleteProject={() => setDeleteConfirmation(null)}
|
||||||
|
onConfirmDeleteProject={confirmDeleteProject}
|
||||||
|
sessionDeleteConfirmation={sessionDeleteConfirmation}
|
||||||
|
onCancelDeleteSession={() => setSessionDeleteConfirmation(null)}
|
||||||
|
onConfirmDeleteSession={confirmDeleteSession}
|
||||||
|
t={t}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<SidebarContent
|
||||||
|
isPWA={isPWA}
|
||||||
|
isMobile={isMobile}
|
||||||
|
isLoading={isLoading}
|
||||||
|
projects={projects}
|
||||||
|
searchFilter={searchFilter}
|
||||||
|
onSearchFilterChange={setSearchFilter}
|
||||||
|
onClearSearchFilter={() => setSearchFilter('')}
|
||||||
|
onRefresh={() => {
|
||||||
|
void refreshProjects();
|
||||||
|
}}
|
||||||
|
isRefreshing={isRefreshing}
|
||||||
|
onCreateProject={() => setShowNewProject(true)}
|
||||||
|
onCollapseSidebar={handleCollapseSidebar}
|
||||||
|
updateAvailable={updateAvailable}
|
||||||
|
releaseInfo={releaseInfo}
|
||||||
|
latestVersion={latestVersion}
|
||||||
|
onShowVersionModal={() => setShowVersionModal(true)}
|
||||||
|
onShowSettings={onShowSettings}
|
||||||
|
projectListProps={projectListProps}
|
||||||
|
t={t}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<VersionUpgradeModal
|
||||||
|
isOpen={showVersionModal}
|
||||||
|
onClose={() => setShowVersionModal(false)}
|
||||||
|
releaseInfo={releaseInfo}
|
||||||
|
currentVersion={currentVersion}
|
||||||
|
latestVersion={latestVersion}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Sidebar;
|
||||||
154
src/components/app/AppContent.tsx
Normal file
154
src/components/app/AppContent.tsx
Normal file
@@ -0,0 +1,154 @@
|
|||||||
|
import { useEffect } from 'react';
|
||||||
|
import { useNavigate, useParams } from 'react-router-dom';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
import Sidebar from '../Sidebar';
|
||||||
|
import MainContent from '../MainContent';
|
||||||
|
import MobileNav from '../MobileNav';
|
||||||
|
import Settings from '../Settings';
|
||||||
|
|
||||||
|
import { useWebSocket } from '../../contexts/WebSocketContext';
|
||||||
|
import { useDeviceSettings } from '../../hooks/useDeviceSettings';
|
||||||
|
import { useSessionProtection } from '../../hooks/useSessionProtection';
|
||||||
|
import { useProjectsState } from '../../hooks/useProjectsState';
|
||||||
|
|
||||||
|
export default function AppContent() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { sessionId } = useParams<{ sessionId?: string }>();
|
||||||
|
const { t } = useTranslation('common');
|
||||||
|
const { isMobile } = useDeviceSettings({ trackPWA: false });
|
||||||
|
const { ws, sendMessage, latestMessage } = useWebSocket();
|
||||||
|
|
||||||
|
const {
|
||||||
|
activeSessions,
|
||||||
|
processingSessions,
|
||||||
|
markSessionAsActive,
|
||||||
|
markSessionAsInactive,
|
||||||
|
markSessionAsProcessing,
|
||||||
|
markSessionAsNotProcessing,
|
||||||
|
replaceTemporarySession,
|
||||||
|
} = useSessionProtection();
|
||||||
|
|
||||||
|
const {
|
||||||
|
projects,
|
||||||
|
selectedProject,
|
||||||
|
selectedSession,
|
||||||
|
activeTab,
|
||||||
|
sidebarOpen,
|
||||||
|
isLoadingProjects,
|
||||||
|
isInputFocused,
|
||||||
|
showSettings,
|
||||||
|
settingsInitialTab,
|
||||||
|
externalMessageUpdate,
|
||||||
|
setActiveTab,
|
||||||
|
setSidebarOpen,
|
||||||
|
setIsInputFocused,
|
||||||
|
setShowSettings,
|
||||||
|
openSettings,
|
||||||
|
fetchProjects,
|
||||||
|
sidebarSharedProps,
|
||||||
|
} = useProjectsState({
|
||||||
|
sessionId,
|
||||||
|
navigate,
|
||||||
|
latestMessage,
|
||||||
|
isMobile,
|
||||||
|
activeSessions,
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
window.refreshProjects = fetchProjects;
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (window.refreshProjects === fetchProjects) {
|
||||||
|
delete window.refreshProjects;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, [fetchProjects]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
window.openSettings = openSettings;
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (window.openSettings === openSettings) {
|
||||||
|
delete window.openSettings;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, [openSettings]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 flex bg-background">
|
||||||
|
{!isMobile ? (
|
||||||
|
<div className="h-full flex-shrink-0 border-r border-border bg-card">
|
||||||
|
<Sidebar {...sidebarSharedProps} />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
className={`fixed inset-0 z-50 flex transition-all duration-150 ease-out ${sidebarOpen ? 'opacity-100 visible' : 'opacity-0 invisible'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
className="fixed inset-0 bg-background/80 backdrop-blur-sm transition-opacity duration-150 ease-out"
|
||||||
|
onClick={(event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
setSidebarOpen(false);
|
||||||
|
}}
|
||||||
|
onTouchStart={(event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
setSidebarOpen(false);
|
||||||
|
}}
|
||||||
|
aria-label={t('versionUpdate.ariaLabels.closeSidebar')}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className={`relative w-[85vw] max-w-sm sm:w-80 h-full bg-card border-r border-border transform transition-transform duration-150 ease-out ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'
|
||||||
|
}`}
|
||||||
|
onClick={(event) => event.stopPropagation()}
|
||||||
|
onTouchStart={(event) => event.stopPropagation()}
|
||||||
|
>
|
||||||
|
<Sidebar {...sidebarSharedProps} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className={`flex-1 flex flex-col min-w-0 ${isMobile && !isInputFocused ? 'pb-mobile-nav' : ''}`}>
|
||||||
|
<MainContent
|
||||||
|
selectedProject={selectedProject}
|
||||||
|
selectedSession={selectedSession}
|
||||||
|
activeTab={activeTab}
|
||||||
|
setActiveTab={setActiveTab}
|
||||||
|
ws={ws}
|
||||||
|
sendMessage={sendMessage}
|
||||||
|
latestMessage={latestMessage}
|
||||||
|
isMobile={isMobile}
|
||||||
|
onMenuClick={() => setSidebarOpen(true)}
|
||||||
|
isLoading={isLoadingProjects}
|
||||||
|
onInputFocusChange={setIsInputFocused}
|
||||||
|
onSessionActive={markSessionAsActive}
|
||||||
|
onSessionInactive={markSessionAsInactive}
|
||||||
|
onSessionProcessing={markSessionAsProcessing}
|
||||||
|
onSessionNotProcessing={markSessionAsNotProcessing}
|
||||||
|
processingSessions={processingSessions}
|
||||||
|
onReplaceTemporarySession={replaceTemporarySession}
|
||||||
|
onNavigateToSession={(targetSessionId: string) => navigate(`/session/${targetSessionId}`)}
|
||||||
|
onShowSettings={() => setShowSettings(true)}
|
||||||
|
externalMessageUpdate={externalMessageUpdate}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isMobile && (
|
||||||
|
<MobileNav
|
||||||
|
activeTab={activeTab}
|
||||||
|
setActiveTab={setActiveTab}
|
||||||
|
isInputFocused={isInputFocused}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Settings
|
||||||
|
isOpen={showSettings}
|
||||||
|
onClose={() => setShowSettings(false)}
|
||||||
|
projects={projects as any}
|
||||||
|
initialTab={settingsInitialTab}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
21
src/components/sidebar/SessionProviderIcon.tsx
Normal file
21
src/components/sidebar/SessionProviderIcon.tsx
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import type { SessionProvider } from '../../types/app';
|
||||||
|
import ClaudeLogo from '../ClaudeLogo';
|
||||||
|
import CodexLogo from '../CodexLogo';
|
||||||
|
import CursorLogo from '../CursorLogo';
|
||||||
|
|
||||||
|
type SessionProviderIconProps = {
|
||||||
|
provider: SessionProvider;
|
||||||
|
className: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function SessionProviderIcon({ provider, className }: SessionProviderIconProps) {
|
||||||
|
if (provider === 'cursor') {
|
||||||
|
return <CursorLogo className={className} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (provider === 'codex') {
|
||||||
|
return <CodexLogo className={className} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return <ClaudeLogo className={className} />;
|
||||||
|
}
|
||||||
59
src/components/sidebar/SidebarCollapsed.tsx
Normal file
59
src/components/sidebar/SidebarCollapsed.tsx
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
import { Settings, Sparkles } from 'lucide-react';
|
||||||
|
import type { TFunction } from 'i18next';
|
||||||
|
|
||||||
|
type SidebarCollapsedProps = {
|
||||||
|
onExpand: () => void;
|
||||||
|
onShowSettings: () => void;
|
||||||
|
updateAvailable: boolean;
|
||||||
|
onShowVersionModal: () => void;
|
||||||
|
t: TFunction;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function SidebarCollapsed({
|
||||||
|
onExpand,
|
||||||
|
onShowSettings,
|
||||||
|
updateAvailable,
|
||||||
|
onShowVersionModal,
|
||||||
|
t,
|
||||||
|
}: SidebarCollapsedProps) {
|
||||||
|
return (
|
||||||
|
<div className="h-full flex flex-col items-center py-4 gap-4 bg-card">
|
||||||
|
<button
|
||||||
|
onClick={onExpand}
|
||||||
|
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')}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-5 h-5 text-foreground group-hover:scale-110 transition-transform"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 5l7 7-7 7M5 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={onShowSettings}
|
||||||
|
className="p-2 hover:bg-accent rounded-md transition-colors duration-200"
|
||||||
|
aria-label={t('actions.settings')}
|
||||||
|
title={t('actions.settings')}
|
||||||
|
>
|
||||||
|
<Settings className="w-5 h-5 text-muted-foreground hover:text-foreground transition-colors" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{updateAvailable && (
|
||||||
|
<button
|
||||||
|
onClick={onShowVersionModal}
|
||||||
|
className="relative p-2 hover:bg-accent rounded-md transition-colors duration-200"
|
||||||
|
aria-label={t('common:versionUpdate.ariaLabels.updateAvailable')}
|
||||||
|
title={t('common:versionUpdate.ariaLabels.updateAvailable')}
|
||||||
|
>
|
||||||
|
<Sparkles className="w-5 h-5 text-blue-500" />
|
||||||
|
<span className="absolute top-1 right-1 w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
84
src/components/sidebar/SidebarContent.tsx
Normal file
84
src/components/sidebar/SidebarContent.tsx
Normal file
@@ -0,0 +1,84 @@
|
|||||||
|
import { ScrollArea } from '../ui/scroll-area';
|
||||||
|
import type { TFunction } from 'i18next';
|
||||||
|
import type { Project } from '../../types/app';
|
||||||
|
import type { ReleaseInfo } from '../../types/sharedTypes';
|
||||||
|
import SidebarFooter from './SidebarFooter';
|
||||||
|
import SidebarHeader from './SidebarHeader';
|
||||||
|
import SidebarProjectList, { type SidebarProjectListProps } from './SidebarProjectList';
|
||||||
|
|
||||||
|
type SidebarContentProps = {
|
||||||
|
isPWA: boolean;
|
||||||
|
isMobile: boolean;
|
||||||
|
isLoading: boolean;
|
||||||
|
projects: Project[];
|
||||||
|
searchFilter: string;
|
||||||
|
onSearchFilterChange: (value: string) => void;
|
||||||
|
onClearSearchFilter: () => void;
|
||||||
|
onRefresh: () => void;
|
||||||
|
isRefreshing: boolean;
|
||||||
|
onCreateProject: () => void;
|
||||||
|
onCollapseSidebar: () => void;
|
||||||
|
updateAvailable: boolean;
|
||||||
|
releaseInfo: ReleaseInfo | null;
|
||||||
|
latestVersion: string | null;
|
||||||
|
onShowVersionModal: () => void;
|
||||||
|
onShowSettings: () => void;
|
||||||
|
projectListProps: SidebarProjectListProps;
|
||||||
|
t: TFunction;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function SidebarContent({
|
||||||
|
isPWA,
|
||||||
|
isMobile,
|
||||||
|
isLoading,
|
||||||
|
projects,
|
||||||
|
searchFilter,
|
||||||
|
onSearchFilterChange,
|
||||||
|
onClearSearchFilter,
|
||||||
|
onRefresh,
|
||||||
|
isRefreshing,
|
||||||
|
onCreateProject,
|
||||||
|
onCollapseSidebar,
|
||||||
|
updateAvailable,
|
||||||
|
releaseInfo,
|
||||||
|
latestVersion,
|
||||||
|
onShowVersionModal,
|
||||||
|
onShowSettings,
|
||||||
|
projectListProps,
|
||||||
|
t,
|
||||||
|
}: SidebarContentProps) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="h-full flex flex-col bg-card md:select-none md:w-80"
|
||||||
|
style={isPWA && isMobile ? { paddingTop: '44px' } : {}}
|
||||||
|
>
|
||||||
|
<SidebarHeader
|
||||||
|
isPWA={isPWA}
|
||||||
|
isMobile={isMobile}
|
||||||
|
isLoading={isLoading}
|
||||||
|
projectsCount={projects.length}
|
||||||
|
searchFilter={searchFilter}
|
||||||
|
onSearchFilterChange={onSearchFilterChange}
|
||||||
|
onClearSearchFilter={onClearSearchFilter}
|
||||||
|
onRefresh={onRefresh}
|
||||||
|
isRefreshing={isRefreshing}
|
||||||
|
onCreateProject={onCreateProject}
|
||||||
|
onCollapseSidebar={onCollapseSidebar}
|
||||||
|
t={t}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ScrollArea className="flex-1 md:px-2 md:py-3 overflow-y-auto overscroll-contain">
|
||||||
|
<SidebarProjectList {...projectListProps} />
|
||||||
|
</ScrollArea>
|
||||||
|
|
||||||
|
<SidebarFooter
|
||||||
|
updateAvailable={updateAvailable}
|
||||||
|
releaseInfo={releaseInfo}
|
||||||
|
latestVersion={latestVersion}
|
||||||
|
onShowVersionModal={onShowVersionModal}
|
||||||
|
onShowSettings={onShowSettings}
|
||||||
|
t={t}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
94
src/components/sidebar/SidebarFooter.tsx
Normal file
94
src/components/sidebar/SidebarFooter.tsx
Normal file
@@ -0,0 +1,94 @@
|
|||||||
|
import { Settings } from 'lucide-react';
|
||||||
|
import type { TFunction } from 'i18next';
|
||||||
|
import type { ReleaseInfo } from '../../types/sharedTypes';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
|
||||||
|
type SidebarFooterProps = {
|
||||||
|
updateAvailable: boolean;
|
||||||
|
releaseInfo: ReleaseInfo | null;
|
||||||
|
latestVersion: string | null;
|
||||||
|
onShowVersionModal: () => void;
|
||||||
|
onShowSettings: () => void;
|
||||||
|
t: TFunction;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function SidebarFooter({
|
||||||
|
updateAvailable,
|
||||||
|
releaseInfo,
|
||||||
|
latestVersion,
|
||||||
|
onShowVersionModal,
|
||||||
|
onShowSettings,
|
||||||
|
t,
|
||||||
|
}: SidebarFooterProps) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{updateAvailable && (
|
||||||
|
<div className="md:p-2 border-t border-border/50 flex-shrink-0">
|
||||||
|
<div className="hidden md:block">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start gap-3 p-3 h-auto font-normal text-left hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors duration-200 border border-blue-200 dark:border-blue-700 rounded-lg mb-2"
|
||||||
|
onClick={onShowVersionModal}
|
||||||
|
>
|
||||||
|
<div className="relative">
|
||||||
|
<svg className="w-4 h-4 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
|
||||||
|
</svg>
|
||||||
|
<div className="absolute -top-1 -right-1 w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<div className="text-sm font-medium text-blue-700 dark:text-blue-300">
|
||||||
|
{releaseInfo?.title || `Version ${latestVersion}`}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-blue-600 dark:text-blue-400">{t('version.updateAvailable')}</div>
|
||||||
|
</div>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="md:hidden p-3 pb-2">
|
||||||
|
<button
|
||||||
|
className="w-full h-12 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-xl flex items-center justify-start gap-3 px-4 active:scale-[0.98] transition-all duration-150"
|
||||||
|
onClick={onShowVersionModal}
|
||||||
|
>
|
||||||
|
<div className="relative">
|
||||||
|
<svg className="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
|
||||||
|
</svg>
|
||||||
|
<div className="absolute -top-1 -right-1 w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0 flex-1 text-left">
|
||||||
|
<div className="text-sm font-medium text-blue-700 dark:text-blue-300">
|
||||||
|
{releaseInfo?.title || `Version ${latestVersion}`}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-blue-600 dark:text-blue-400">{t('version.updateAvailable')}</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="md:p-2 md:border-t md:border-border flex-shrink-0">
|
||||||
|
<div className="md:hidden p-4 pb-20 border-t border-border/50">
|
||||||
|
<button
|
||||||
|
className="w-full h-14 bg-muted/50 hover:bg-muted/70 rounded-2xl flex items-center justify-start gap-4 px-4 active:scale-[0.98] transition-all duration-150"
|
||||||
|
onClick={onShowSettings}
|
||||||
|
>
|
||||||
|
<div className="w-10 h-10 rounded-2xl bg-background/80 flex items-center justify-center">
|
||||||
|
<Settings className="w-5 h-5 text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
<span className="text-lg font-medium text-foreground">{t('actions.settings')}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="hidden md:flex w-full justify-start gap-2 p-2 h-auto font-normal text-muted-foreground hover:text-foreground hover:bg-accent transition-colors duration-200"
|
||||||
|
onClick={onShowSettings}
|
||||||
|
>
|
||||||
|
<Settings className="w-3 h-3" />
|
||||||
|
<span className="text-xs">{t('actions.settings')}</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
187
src/components/sidebar/SidebarHeader.tsx
Normal file
187
src/components/sidebar/SidebarHeader.tsx
Normal file
@@ -0,0 +1,187 @@
|
|||||||
|
import { FolderPlus, MessageSquare, RefreshCw, Search, X } from 'lucide-react';
|
||||||
|
import type { TFunction } from 'i18next';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Input } from '../ui/input';
|
||||||
|
import { IS_PLATFORM } from '../../constants/config';
|
||||||
|
|
||||||
|
type SidebarHeaderProps = {
|
||||||
|
isPWA: boolean;
|
||||||
|
isMobile: boolean;
|
||||||
|
isLoading: boolean;
|
||||||
|
projectsCount: number;
|
||||||
|
searchFilter: string;
|
||||||
|
onSearchFilterChange: (value: string) => void;
|
||||||
|
onClearSearchFilter: () => void;
|
||||||
|
onRefresh: () => void;
|
||||||
|
isRefreshing: boolean;
|
||||||
|
onCreateProject: () => void;
|
||||||
|
onCollapseSidebar: () => void;
|
||||||
|
t: TFunction;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function SidebarHeader({
|
||||||
|
isPWA,
|
||||||
|
isMobile,
|
||||||
|
isLoading,
|
||||||
|
projectsCount,
|
||||||
|
searchFilter,
|
||||||
|
onSearchFilterChange,
|
||||||
|
onClearSearchFilter,
|
||||||
|
onRefresh,
|
||||||
|
isRefreshing,
|
||||||
|
onCreateProject,
|
||||||
|
onCollapseSidebar,
|
||||||
|
t,
|
||||||
|
}: SidebarHeaderProps) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className="md:p-4 md:border-b md:border-border"
|
||||||
|
style={isPWA && isMobile ? { paddingTop: '44px' } : {}}
|
||||||
|
>
|
||||||
|
<div className="hidden md:flex items-center justify-between">
|
||||||
|
{IS_PLATFORM ? (
|
||||||
|
<a
|
||||||
|
href="https://cloudcli.ai/dashboard"
|
||||||
|
className="flex items-center gap-3 hover:opacity-80 transition-opacity group"
|
||||||
|
title={t('tooltips.viewEnvironments')}
|
||||||
|
>
|
||||||
|
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center shadow-sm group-hover:shadow-md transition-shadow">
|
||||||
|
<MessageSquare className="w-4 h-4 text-primary-foreground" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-lg font-bold text-foreground">{t('app.title')}</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">{t('app.subtitle')}</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center shadow-sm">
|
||||||
|
<MessageSquare className="w-4 h-4 text-primary-foreground" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-lg font-bold text-foreground">{t('app.title')}</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">{t('app.subtitle')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-8 w-8 px-0 hover:bg-accent transition-colors duration-200"
|
||||||
|
onClick={onCollapseSidebar}
|
||||||
|
title={t('tooltips.hideSidebar')}
|
||||||
|
>
|
||||||
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||||
|
</svg>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="md:hidden p-3 border-b border-border"
|
||||||
|
style={isPWA && isMobile ? { paddingTop: '16px' } : {}}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
{IS_PLATFORM ? (
|
||||||
|
<a
|
||||||
|
href="https://cloudcli.ai/dashboard"
|
||||||
|
className="flex items-center gap-3 active:opacity-70 transition-opacity"
|
||||||
|
title={t('tooltips.viewEnvironments')}
|
||||||
|
>
|
||||||
|
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
|
||||||
|
<MessageSquare className="w-4 h-4 text-primary-foreground" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-lg font-semibold text-foreground">{t('app.title')}</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">{t('projects.title')}</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
|
||||||
|
<MessageSquare className="w-4 h-4 text-primary-foreground" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-lg font-semibold text-foreground">{t('app.title')}</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">{t('projects.title')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
className="w-8 h-8 rounded-md bg-background border border-border flex items-center justify-center active:scale-95 transition-all duration-150"
|
||||||
|
onClick={onRefresh}
|
||||||
|
disabled={isRefreshing}
|
||||||
|
>
|
||||||
|
<RefreshCw className={`w-4 h-4 text-foreground ${isRefreshing ? 'animate-spin' : ''}`} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="w-8 h-8 rounded-md bg-primary text-primary-foreground flex items-center justify-center active:scale-95 transition-all duration-150"
|
||||||
|
onClick={onCreateProject}
|
||||||
|
>
|
||||||
|
<FolderPlus className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{!isLoading && !isMobile && (
|
||||||
|
<div className="px-3 md:px-4 py-2 border-b border-border">
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button
|
||||||
|
variant="default"
|
||||||
|
size="sm"
|
||||||
|
className="flex-1 h-8 text-xs bg-primary hover:bg-primary/90 transition-all duration-200"
|
||||||
|
onClick={onCreateProject}
|
||||||
|
title={t('tooltips.createProject')}
|
||||||
|
>
|
||||||
|
<FolderPlus className="w-3.5 h-3.5 mr-1.5" />
|
||||||
|
{t('projects.newProject')}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="h-8 w-8 px-0 hover:bg-accent transition-colors duration-200 group"
|
||||||
|
onClick={onRefresh}
|
||||||
|
disabled={isRefreshing}
|
||||||
|
title={t('tooltips.refresh')}
|
||||||
|
>
|
||||||
|
<RefreshCw
|
||||||
|
className={`w-3.5 h-3.5 ${
|
||||||
|
isRefreshing ? 'animate-spin' : 'group-hover:rotate-180 transition-transform duration-300'
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{projectsCount > 0 && !isLoading && (
|
||||||
|
<div className="px-3 md:px-4 py-2 border-b border-border">
|
||||||
|
<div className="relative">
|
||||||
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
placeholder={t('projects.searchPlaceholder')}
|
||||||
|
value={searchFilter}
|
||||||
|
onChange={(event) => onSearchFilterChange(event.target.value)}
|
||||||
|
className="pl-9 h-9 text-sm bg-muted/50 border-0 focus:bg-background focus:ring-1 focus:ring-primary/20"
|
||||||
|
/>
|
||||||
|
{searchFilter && (
|
||||||
|
<button
|
||||||
|
onClick={onClearSearchFilter}
|
||||||
|
className="absolute right-2 top-1/2 transform -translate-y-1/2 p-1 hover:bg-accent rounded"
|
||||||
|
>
|
||||||
|
<X className="w-3 h-3 text-muted-foreground" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
143
src/components/sidebar/SidebarModals.tsx
Normal file
143
src/components/sidebar/SidebarModals.tsx
Normal file
@@ -0,0 +1,143 @@
|
|||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
import { AlertTriangle, Trash2 } from 'lucide-react';
|
||||||
|
import type { TFunction } from 'i18next';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import ProjectCreationWizard from '../ProjectCreationWizard';
|
||||||
|
import type { DeleteProjectConfirmation, SessionDeleteConfirmation } from './types';
|
||||||
|
|
||||||
|
type SidebarModalsProps = {
|
||||||
|
showNewProject: boolean;
|
||||||
|
onCloseNewProject: () => void;
|
||||||
|
onProjectCreated: () => void;
|
||||||
|
deleteConfirmation: DeleteProjectConfirmation | null;
|
||||||
|
onCancelDeleteProject: () => void;
|
||||||
|
onConfirmDeleteProject: () => void;
|
||||||
|
sessionDeleteConfirmation: SessionDeleteConfirmation | null;
|
||||||
|
onCancelDeleteSession: () => void;
|
||||||
|
onConfirmDeleteSession: () => void;
|
||||||
|
t: TFunction;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function SidebarModals({
|
||||||
|
showNewProject,
|
||||||
|
onCloseNewProject,
|
||||||
|
onProjectCreated,
|
||||||
|
deleteConfirmation,
|
||||||
|
onCancelDeleteProject,
|
||||||
|
onConfirmDeleteProject,
|
||||||
|
sessionDeleteConfirmation,
|
||||||
|
onCancelDeleteSession,
|
||||||
|
onConfirmDeleteSession,
|
||||||
|
t,
|
||||||
|
}: SidebarModalsProps) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{showNewProject &&
|
||||||
|
ReactDOM.createPortal(
|
||||||
|
<ProjectCreationWizard
|
||||||
|
onClose={onCloseNewProject}
|
||||||
|
onProjectCreated={onProjectCreated}
|
||||||
|
/>,
|
||||||
|
document.body,
|
||||||
|
)}
|
||||||
|
|
||||||
|
{deleteConfirmation &&
|
||||||
|
ReactDOM.createPortal(
|
||||||
|
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
|
||||||
|
<div className="bg-card border border-border rounded-xl shadow-2xl max-w-md w-full overflow-hidden">
|
||||||
|
<div className="p-6">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center flex-shrink-0">
|
||||||
|
<AlertTriangle className="w-6 h-6 text-red-600 dark:text-red-400" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<h3 className="text-lg font-semibold text-foreground mb-2">
|
||||||
|
{t('deleteConfirmation.deleteProject')}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-muted-foreground mb-1">
|
||||||
|
{t('deleteConfirmation.confirmDelete')}{' '}
|
||||||
|
<span className="font-medium text-foreground">
|
||||||
|
{deleteConfirmation.project.displayName || deleteConfirmation.project.name}
|
||||||
|
</span>
|
||||||
|
?
|
||||||
|
</p>
|
||||||
|
{deleteConfirmation.sessionCount > 0 && (
|
||||||
|
<div className="mt-3 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
||||||
|
<p className="text-sm text-red-700 dark:text-red-300 font-medium">
|
||||||
|
{t('deleteConfirmation.sessionCount', { count: deleteConfirmation.sessionCount })}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-red-600 dark:text-red-400 mt-1">
|
||||||
|
{t('deleteConfirmation.allConversationsDeleted')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<p className="text-xs text-muted-foreground mt-3">
|
||||||
|
{t('deleteConfirmation.cannotUndo')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-3 p-4 bg-muted/30 border-t border-border">
|
||||||
|
<Button variant="outline" className="flex-1" onClick={onCancelDeleteProject}>
|
||||||
|
{t('actions.cancel')}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
className="flex-1 bg-red-600 hover:bg-red-700 text-white"
|
||||||
|
onClick={onConfirmDeleteProject}
|
||||||
|
>
|
||||||
|
<Trash2 className="w-4 h-4 mr-2" />
|
||||||
|
{t('actions.delete')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>,
|
||||||
|
document.body,
|
||||||
|
)}
|
||||||
|
|
||||||
|
{sessionDeleteConfirmation &&
|
||||||
|
ReactDOM.createPortal(
|
||||||
|
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
|
||||||
|
<div className="bg-card border border-border rounded-xl shadow-2xl max-w-md w-full overflow-hidden">
|
||||||
|
<div className="p-6">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center flex-shrink-0">
|
||||||
|
<AlertTriangle className="w-6 h-6 text-red-600 dark:text-red-400" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<h3 className="text-lg font-semibold text-foreground mb-2">
|
||||||
|
{t('deleteConfirmation.deleteSession')}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-muted-foreground mb-1">
|
||||||
|
{t('deleteConfirmation.confirmDelete')}{' '}
|
||||||
|
<span className="font-medium text-foreground">
|
||||||
|
{sessionDeleteConfirmation.sessionTitle || t('sessions.unnamed')}
|
||||||
|
</span>
|
||||||
|
?
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-muted-foreground mt-3">
|
||||||
|
{t('deleteConfirmation.cannotUndo')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-3 p-4 bg-muted/30 border-t border-border">
|
||||||
|
<Button variant="outline" className="flex-1" onClick={onCancelDeleteSession}>
|
||||||
|
{t('actions.cancel')}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
className="flex-1 bg-red-600 hover:bg-red-700 text-white"
|
||||||
|
onClick={onConfirmDeleteSession}
|
||||||
|
>
|
||||||
|
<Trash2 className="w-4 h-4 mr-2" />
|
||||||
|
{t('actions.delete')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>,
|
||||||
|
document.body,
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
437
src/components/sidebar/SidebarProjectItem.tsx
Normal file
437
src/components/sidebar/SidebarProjectItem.tsx
Normal file
@@ -0,0 +1,437 @@
|
|||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Check, ChevronDown, ChevronRight, Edit3, Folder, FolderOpen, Star, Trash2, X } from 'lucide-react';
|
||||||
|
import type { TFunction } from 'i18next';
|
||||||
|
import { cn } from '../../lib/utils';
|
||||||
|
import TaskIndicator from '../TaskIndicator';
|
||||||
|
import type { Project, ProjectSession, SessionProvider } from '../../types/app';
|
||||||
|
import type { MCPServerStatus, SessionWithProvider, TouchHandlerFactory } from './types';
|
||||||
|
import { getTaskIndicatorStatus } from './utils';
|
||||||
|
import SidebarProjectSessions from './SidebarProjectSessions';
|
||||||
|
|
||||||
|
type SidebarProjectItemProps = {
|
||||||
|
project: Project;
|
||||||
|
selectedProject: Project | null;
|
||||||
|
selectedSession: ProjectSession | null;
|
||||||
|
isExpanded: boolean;
|
||||||
|
isDeleting: boolean;
|
||||||
|
isStarred: boolean;
|
||||||
|
editingProject: string | null;
|
||||||
|
editingName: string;
|
||||||
|
sessions: SessionWithProvider[];
|
||||||
|
initialSessionsLoaded: boolean;
|
||||||
|
isLoadingSessions: boolean;
|
||||||
|
currentTime: Date;
|
||||||
|
editingSession: string | null;
|
||||||
|
editingSessionName: string;
|
||||||
|
tasksEnabled: boolean;
|
||||||
|
mcpServerStatus: MCPServerStatus;
|
||||||
|
onEditingNameChange: (name: string) => void;
|
||||||
|
onToggleProject: (projectName: string) => void;
|
||||||
|
onProjectSelect: (project: Project) => void;
|
||||||
|
onToggleStarProject: (projectName: string) => void;
|
||||||
|
onStartEditingProject: (project: Project) => void;
|
||||||
|
onCancelEditingProject: () => void;
|
||||||
|
onSaveProjectName: (projectName: string) => void;
|
||||||
|
onDeleteProject: (project: Project) => void;
|
||||||
|
onSessionSelect: (session: SessionWithProvider, projectName: string) => void;
|
||||||
|
onDeleteSession: (
|
||||||
|
projectName: string,
|
||||||
|
sessionId: string,
|
||||||
|
sessionTitle: string,
|
||||||
|
provider: SessionProvider,
|
||||||
|
) => void;
|
||||||
|
onLoadMoreSessions: (project: Project) => void;
|
||||||
|
onNewSession: (project: Project) => void;
|
||||||
|
onEditingSessionNameChange: (value: string) => void;
|
||||||
|
onStartEditingSession: (sessionId: string, initialName: string) => void;
|
||||||
|
onCancelEditingSession: () => void;
|
||||||
|
onSaveEditingSession: (projectName: string, sessionId: string, summary: string) => void;
|
||||||
|
touchHandlerFactory: TouchHandlerFactory;
|
||||||
|
t: TFunction;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSessionCountDisplay = (sessions: SessionWithProvider[], hasMoreSessions: boolean): string => {
|
||||||
|
const sessionCount = sessions.length;
|
||||||
|
if (hasMoreSessions && sessionCount >= 5) {
|
||||||
|
return `${sessionCount}+`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return `${sessionCount}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function SidebarProjectItem({
|
||||||
|
project,
|
||||||
|
selectedProject,
|
||||||
|
selectedSession,
|
||||||
|
isExpanded,
|
||||||
|
isDeleting,
|
||||||
|
isStarred,
|
||||||
|
editingProject,
|
||||||
|
editingName,
|
||||||
|
sessions,
|
||||||
|
initialSessionsLoaded,
|
||||||
|
isLoadingSessions,
|
||||||
|
currentTime,
|
||||||
|
editingSession,
|
||||||
|
editingSessionName,
|
||||||
|
tasksEnabled,
|
||||||
|
mcpServerStatus,
|
||||||
|
onEditingNameChange,
|
||||||
|
onToggleProject,
|
||||||
|
onProjectSelect,
|
||||||
|
onToggleStarProject,
|
||||||
|
onStartEditingProject,
|
||||||
|
onCancelEditingProject,
|
||||||
|
onSaveProjectName,
|
||||||
|
onDeleteProject,
|
||||||
|
onSessionSelect,
|
||||||
|
onDeleteSession,
|
||||||
|
onLoadMoreSessions,
|
||||||
|
onNewSession,
|
||||||
|
onEditingSessionNameChange,
|
||||||
|
onStartEditingSession,
|
||||||
|
onCancelEditingSession,
|
||||||
|
onSaveEditingSession,
|
||||||
|
touchHandlerFactory,
|
||||||
|
t,
|
||||||
|
}: SidebarProjectItemProps) {
|
||||||
|
const isSelected = selectedProject?.name === project.name;
|
||||||
|
const isEditing = editingProject === project.name;
|
||||||
|
const hasMoreSessions = project.sessionMeta?.hasMore !== false;
|
||||||
|
const sessionCountDisplay = getSessionCountDisplay(sessions, hasMoreSessions);
|
||||||
|
const sessionCountLabel = `${sessionCountDisplay} session${sessions.length === 1 ? '' : 's'}`;
|
||||||
|
const taskStatus = getTaskIndicatorStatus(project, mcpServerStatus);
|
||||||
|
|
||||||
|
const toggleProject = () => onToggleProject(project.name);
|
||||||
|
const toggleStarProject = () => onToggleStarProject(project.name);
|
||||||
|
|
||||||
|
const saveProjectName = () => {
|
||||||
|
onSaveProjectName(project.name);
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectAndToggleProject = () => {
|
||||||
|
if (selectedProject?.name !== project.name) {
|
||||||
|
onProjectSelect(project);
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleProject();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={cn('md:space-y-1', isDeleting && 'opacity-50 pointer-events-none')}>
|
||||||
|
<div className="group md:group">
|
||||||
|
<div className="md:hidden">
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'p-3 mx-3 my-1 rounded-lg bg-card border border-border/50 active:scale-[0.98] transition-all duration-150',
|
||||||
|
isSelected && 'bg-primary/5 border-primary/20',
|
||||||
|
isStarred &&
|
||||||
|
!isSelected &&
|
||||||
|
'bg-yellow-50/50 dark:bg-yellow-900/5 border-yellow-200/30 dark:border-yellow-800/30',
|
||||||
|
)}
|
||||||
|
onClick={toggleProject}
|
||||||
|
onTouchEnd={touchHandlerFactory(toggleProject)}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-3 min-w-0 flex-1">
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'w-8 h-8 rounded-lg flex items-center justify-center transition-colors',
|
||||||
|
isExpanded ? 'bg-primary/10' : 'bg-muted',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{isExpanded ? (
|
||||||
|
<FolderOpen className="w-4 h-4 text-primary" />
|
||||||
|
) : (
|
||||||
|
<Folder className="w-4 h-4 text-muted-foreground" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
{isEditing ? (
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={editingName}
|
||||||
|
onChange={(event) => onEditingNameChange(event.target.value)}
|
||||||
|
className="w-full px-3 py-2 text-sm border-2 border-primary/40 focus:border-primary rounded-lg bg-background text-foreground shadow-sm focus:shadow-md transition-all duration-200 focus:outline-none"
|
||||||
|
placeholder={t('projects.projectNamePlaceholder')}
|
||||||
|
autoFocus
|
||||||
|
autoComplete="off"
|
||||||
|
onClick={(event) => event.stopPropagation()}
|
||||||
|
onKeyDown={(event) => {
|
||||||
|
if (event.key === 'Enter') {
|
||||||
|
saveProjectName();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (event.key === 'Escape') {
|
||||||
|
onCancelEditingProject();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
fontSize: '16px',
|
||||||
|
WebkitAppearance: 'none',
|
||||||
|
borderRadius: '8px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="flex items-center justify-between min-w-0 flex-1">
|
||||||
|
<h3 className="text-sm font-medium text-foreground truncate">{project.displayName}</h3>
|
||||||
|
{tasksEnabled && (
|
||||||
|
<TaskIndicator
|
||||||
|
status={taskStatus}
|
||||||
|
size="xs"
|
||||||
|
className="hidden md:inline-flex flex-shrink-0 ml-2"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted-foreground">{sessionCountLabel}</p>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
{isEditing ? (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
className="w-8 h-8 rounded-lg bg-green-500 dark:bg-green-600 flex items-center justify-center active:scale-90 transition-all duration-150 shadow-sm active:shadow-none"
|
||||||
|
onClick={(event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
saveProjectName();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Check className="w-4 h-4 text-white" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="w-8 h-8 rounded-lg bg-gray-500 dark:bg-gray-600 flex items-center justify-center active:scale-90 transition-all duration-150 shadow-sm active:shadow-none"
|
||||||
|
onClick={(event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
onCancelEditingProject();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<X className="w-4 h-4 text-white" />
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
className={cn(
|
||||||
|
'w-8 h-8 rounded-lg flex items-center justify-center active:scale-90 transition-all duration-150 border',
|
||||||
|
isStarred
|
||||||
|
? 'bg-yellow-500/10 dark:bg-yellow-900/30 border-yellow-200 dark:border-yellow-800'
|
||||||
|
: 'bg-gray-500/10 dark:bg-gray-900/30 border-gray-200 dark:border-gray-800',
|
||||||
|
)}
|
||||||
|
onClick={(event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
toggleStarProject();
|
||||||
|
}}
|
||||||
|
onTouchEnd={touchHandlerFactory(toggleStarProject)}
|
||||||
|
title={isStarred ? t('tooltips.removeFromFavorites') : t('tooltips.addToFavorites')}
|
||||||
|
>
|
||||||
|
<Star
|
||||||
|
className={cn(
|
||||||
|
'w-4 h-4 transition-colors',
|
||||||
|
isStarred
|
||||||
|
? 'text-yellow-600 dark:text-yellow-400 fill-current'
|
||||||
|
: 'text-gray-600 dark:text-gray-400',
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="w-8 h-8 rounded-lg bg-red-500/10 dark:bg-red-900/30 flex items-center justify-center active:scale-90 border border-red-200 dark:border-red-800"
|
||||||
|
onClick={(event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
onDeleteProject(project);
|
||||||
|
}}
|
||||||
|
onTouchEnd={touchHandlerFactory(() => onDeleteProject(project))}
|
||||||
|
>
|
||||||
|
<Trash2 className="w-4 h-4 text-red-600 dark:text-red-400" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="w-8 h-8 rounded-lg bg-primary/10 dark:bg-primary/20 flex items-center justify-center active:scale-90 border border-primary/20 dark:border-primary/30"
|
||||||
|
onClick={(event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
onStartEditingProject(project);
|
||||||
|
}}
|
||||||
|
onTouchEnd={touchHandlerFactory(() => onStartEditingProject(project))}
|
||||||
|
>
|
||||||
|
<Edit3 className="w-4 h-4 text-primary" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="w-6 h-6 rounded-md bg-muted/30 flex items-center justify-center">
|
||||||
|
{isExpanded ? (
|
||||||
|
<ChevronDown className="w-3 h-3 text-muted-foreground" />
|
||||||
|
) : (
|
||||||
|
<ChevronRight className="w-3 h-3 text-muted-foreground" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className={cn(
|
||||||
|
'hidden md:flex w-full justify-between p-2 h-auto font-normal hover:bg-accent/50',
|
||||||
|
isSelected && 'bg-accent text-accent-foreground',
|
||||||
|
isStarred &&
|
||||||
|
!isSelected &&
|
||||||
|
'bg-yellow-50/50 dark:bg-yellow-900/10 hover:bg-yellow-100/50 dark:hover:bg-yellow-900/20',
|
||||||
|
)}
|
||||||
|
onClick={selectAndToggleProject}
|
||||||
|
onTouchEnd={touchHandlerFactory(selectAndToggleProject)}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3 min-w-0 flex-1">
|
||||||
|
{isExpanded ? (
|
||||||
|
<FolderOpen className="w-4 h-4 text-primary flex-shrink-0" />
|
||||||
|
) : (
|
||||||
|
<Folder className="w-4 h-4 text-muted-foreground flex-shrink-0" />
|
||||||
|
)}
|
||||||
|
<div className="min-w-0 flex-1 text-left">
|
||||||
|
{isEditing ? (
|
||||||
|
<div className="space-y-1">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={editingName}
|
||||||
|
onChange={(event) => onEditingNameChange(event.target.value)}
|
||||||
|
className="w-full px-2 py-1 text-sm border border-border rounded bg-background text-foreground focus:ring-2 focus:ring-primary/20"
|
||||||
|
placeholder={t('projects.projectNamePlaceholder')}
|
||||||
|
autoFocus
|
||||||
|
onKeyDown={(event) => {
|
||||||
|
if (event.key === 'Enter') {
|
||||||
|
saveProjectName();
|
||||||
|
}
|
||||||
|
if (event.key === 'Escape') {
|
||||||
|
onCancelEditingProject();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div className="text-xs text-muted-foreground truncate" title={project.fullPath}>
|
||||||
|
{project.fullPath}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div>
|
||||||
|
<div className="text-sm font-semibold truncate text-foreground" title={project.displayName}>
|
||||||
|
{project.displayName}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-muted-foreground">
|
||||||
|
{sessionCountDisplay}
|
||||||
|
{project.fullPath !== project.displayName && (
|
||||||
|
<span className="ml-1 opacity-60" title={project.fullPath}>
|
||||||
|
{' - '}
|
||||||
|
{project.fullPath.length > 25 ? `...${project.fullPath.slice(-22)}` : project.fullPath}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-1 flex-shrink-0">
|
||||||
|
{isEditing ? (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className="w-6 h-6 text-green-600 hover:text-green-700 hover:bg-green-50 dark:hover:bg-green-900/20 flex items-center justify-center rounded cursor-pointer transition-colors"
|
||||||
|
onClick={(event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
saveProjectName();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Check className="w-3 h-3" />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="w-6 h-6 text-gray-500 hover:text-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 flex items-center justify-center rounded cursor-pointer transition-colors"
|
||||||
|
onClick={(event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
onCancelEditingProject();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<X className="w-3 h-3" />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'w-6 h-6 opacity-0 group-hover:opacity-100 transition-all duration-200 flex items-center justify-center rounded cursor-pointer touch:opacity-100',
|
||||||
|
isStarred ? 'hover:bg-yellow-50 dark:hover:bg-yellow-900/20 opacity-100' : 'hover:bg-accent',
|
||||||
|
)}
|
||||||
|
onClick={(event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
toggleStarProject();
|
||||||
|
}}
|
||||||
|
title={isStarred ? t('tooltips.removeFromFavorites') : t('tooltips.addToFavorites')}
|
||||||
|
>
|
||||||
|
<Star
|
||||||
|
className={cn(
|
||||||
|
'w-3 h-3 transition-colors',
|
||||||
|
isStarred
|
||||||
|
? 'text-yellow-600 dark:text-yellow-400 fill-current'
|
||||||
|
: 'text-muted-foreground',
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="w-6 h-6 opacity-0 group-hover:opacity-100 transition-all duration-200 hover:bg-accent flex items-center justify-center rounded cursor-pointer touch:opacity-100"
|
||||||
|
onClick={(event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
onStartEditingProject(project);
|
||||||
|
}}
|
||||||
|
title={t('tooltips.renameProject')}
|
||||||
|
>
|
||||||
|
<Edit3 className="w-3 h-3" />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="w-6 h-6 opacity-0 group-hover:opacity-100 transition-all duration-200 hover:bg-red-50 dark:hover:bg-red-900/20 flex items-center justify-center rounded cursor-pointer touch:opacity-100"
|
||||||
|
onClick={(event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
onDeleteProject(project);
|
||||||
|
}}
|
||||||
|
title={t('tooltips.deleteProject')}
|
||||||
|
>
|
||||||
|
<Trash2 className="w-3 h-3 text-red-600 dark:text-red-400" />
|
||||||
|
</div>
|
||||||
|
{isExpanded ? (
|
||||||
|
<ChevronDown className="w-4 h-4 text-muted-foreground group-hover:text-foreground transition-colors" />
|
||||||
|
) : (
|
||||||
|
<ChevronRight className="w-4 h-4 text-muted-foreground group-hover:text-foreground transition-colors" />
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<SidebarProjectSessions
|
||||||
|
project={project}
|
||||||
|
isExpanded={isExpanded}
|
||||||
|
sessions={sessions}
|
||||||
|
selectedSession={selectedSession}
|
||||||
|
initialSessionsLoaded={initialSessionsLoaded}
|
||||||
|
isLoadingSessions={isLoadingSessions}
|
||||||
|
currentTime={currentTime}
|
||||||
|
editingSession={editingSession}
|
||||||
|
editingSessionName={editingSessionName}
|
||||||
|
onEditingSessionNameChange={onEditingSessionNameChange}
|
||||||
|
onStartEditingSession={onStartEditingSession}
|
||||||
|
onCancelEditingSession={onCancelEditingSession}
|
||||||
|
onSaveEditingSession={onSaveEditingSession}
|
||||||
|
onProjectSelect={onProjectSelect}
|
||||||
|
onSessionSelect={onSessionSelect}
|
||||||
|
onDeleteSession={onDeleteSession}
|
||||||
|
onLoadMoreSessions={onLoadMoreSessions}
|
||||||
|
onNewSession={onNewSession}
|
||||||
|
touchHandlerFactory={touchHandlerFactory}
|
||||||
|
t={t}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
153
src/components/sidebar/SidebarProjectList.tsx
Normal file
153
src/components/sidebar/SidebarProjectList.tsx
Normal file
@@ -0,0 +1,153 @@
|
|||||||
|
import type { TFunction } from 'i18next';
|
||||||
|
import type { LoadingProgress, Project, ProjectSession, SessionProvider } from '../../types/app';
|
||||||
|
import type {
|
||||||
|
LoadingSessionsByProject,
|
||||||
|
MCPServerStatus,
|
||||||
|
SessionWithProvider,
|
||||||
|
TouchHandlerFactory,
|
||||||
|
} from './types';
|
||||||
|
import SidebarProjectItem from './SidebarProjectItem';
|
||||||
|
import SidebarProjectsState from './SidebarProjectsState';
|
||||||
|
|
||||||
|
export type SidebarProjectListProps = {
|
||||||
|
projects: Project[];
|
||||||
|
filteredProjects: Project[];
|
||||||
|
selectedProject: Project | null;
|
||||||
|
selectedSession: ProjectSession | null;
|
||||||
|
isLoading: boolean;
|
||||||
|
loadingProgress: LoadingProgress | null;
|
||||||
|
expandedProjects: Set<string>;
|
||||||
|
editingProject: string | null;
|
||||||
|
editingName: string;
|
||||||
|
loadingSessions: LoadingSessionsByProject;
|
||||||
|
initialSessionsLoaded: Set<string>;
|
||||||
|
currentTime: Date;
|
||||||
|
editingSession: string | null;
|
||||||
|
editingSessionName: string;
|
||||||
|
deletingProjects: Set<string>;
|
||||||
|
tasksEnabled: boolean;
|
||||||
|
mcpServerStatus: MCPServerStatus;
|
||||||
|
getProjectSessions: (project: Project) => SessionWithProvider[];
|
||||||
|
isProjectStarred: (projectName: string) => boolean;
|
||||||
|
onEditingNameChange: (value: string) => void;
|
||||||
|
onToggleProject: (projectName: string) => void;
|
||||||
|
onProjectSelect: (project: Project) => void;
|
||||||
|
onToggleStarProject: (projectName: string) => void;
|
||||||
|
onStartEditingProject: (project: Project) => void;
|
||||||
|
onCancelEditingProject: () => void;
|
||||||
|
onSaveProjectName: (projectName: string) => void;
|
||||||
|
onDeleteProject: (project: Project) => void;
|
||||||
|
onSessionSelect: (session: SessionWithProvider, projectName: string) => void;
|
||||||
|
onDeleteSession: (
|
||||||
|
projectName: string,
|
||||||
|
sessionId: string,
|
||||||
|
sessionTitle: string,
|
||||||
|
provider: SessionProvider,
|
||||||
|
) => void;
|
||||||
|
onLoadMoreSessions: (project: Project) => void;
|
||||||
|
onNewSession: (project: Project) => void;
|
||||||
|
onEditingSessionNameChange: (value: string) => void;
|
||||||
|
onStartEditingSession: (sessionId: string, initialName: string) => void;
|
||||||
|
onCancelEditingSession: () => void;
|
||||||
|
onSaveEditingSession: (projectName: string, sessionId: string, summary: string) => void;
|
||||||
|
touchHandlerFactory: TouchHandlerFactory;
|
||||||
|
t: TFunction;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function SidebarProjectList({
|
||||||
|
projects,
|
||||||
|
filteredProjects,
|
||||||
|
selectedProject,
|
||||||
|
selectedSession,
|
||||||
|
isLoading,
|
||||||
|
loadingProgress,
|
||||||
|
expandedProjects,
|
||||||
|
editingProject,
|
||||||
|
editingName,
|
||||||
|
loadingSessions,
|
||||||
|
initialSessionsLoaded,
|
||||||
|
currentTime,
|
||||||
|
editingSession,
|
||||||
|
editingSessionName,
|
||||||
|
deletingProjects,
|
||||||
|
tasksEnabled,
|
||||||
|
mcpServerStatus,
|
||||||
|
getProjectSessions,
|
||||||
|
isProjectStarred,
|
||||||
|
onEditingNameChange,
|
||||||
|
onToggleProject,
|
||||||
|
onProjectSelect,
|
||||||
|
onToggleStarProject,
|
||||||
|
onStartEditingProject,
|
||||||
|
onCancelEditingProject,
|
||||||
|
onSaveProjectName,
|
||||||
|
onDeleteProject,
|
||||||
|
onSessionSelect,
|
||||||
|
onDeleteSession,
|
||||||
|
onLoadMoreSessions,
|
||||||
|
onNewSession,
|
||||||
|
onEditingSessionNameChange,
|
||||||
|
onStartEditingSession,
|
||||||
|
onCancelEditingSession,
|
||||||
|
onSaveEditingSession,
|
||||||
|
touchHandlerFactory,
|
||||||
|
t,
|
||||||
|
}: SidebarProjectListProps) {
|
||||||
|
const state = (
|
||||||
|
<SidebarProjectsState
|
||||||
|
isLoading={isLoading}
|
||||||
|
loadingProgress={loadingProgress}
|
||||||
|
projectsCount={projects.length}
|
||||||
|
filteredProjectsCount={filteredProjects.length}
|
||||||
|
t={t}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const showProjects = !isLoading && projects.length > 0 && filteredProjects.length > 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="md:space-y-1 pb-safe-area-inset-bottom">
|
||||||
|
{!showProjects
|
||||||
|
? state
|
||||||
|
: filteredProjects.map((project) => (
|
||||||
|
<SidebarProjectItem
|
||||||
|
key={project.name}
|
||||||
|
project={project}
|
||||||
|
selectedProject={selectedProject}
|
||||||
|
selectedSession={selectedSession}
|
||||||
|
isExpanded={expandedProjects.has(project.name)}
|
||||||
|
isDeleting={deletingProjects.has(project.name)}
|
||||||
|
isStarred={isProjectStarred(project.name)}
|
||||||
|
editingProject={editingProject}
|
||||||
|
editingName={editingName}
|
||||||
|
sessions={getProjectSessions(project)}
|
||||||
|
initialSessionsLoaded={initialSessionsLoaded.has(project.name)}
|
||||||
|
isLoadingSessions={Boolean(loadingSessions[project.name])}
|
||||||
|
currentTime={currentTime}
|
||||||
|
editingSession={editingSession}
|
||||||
|
editingSessionName={editingSessionName}
|
||||||
|
tasksEnabled={tasksEnabled}
|
||||||
|
mcpServerStatus={mcpServerStatus}
|
||||||
|
onEditingNameChange={onEditingNameChange}
|
||||||
|
onToggleProject={onToggleProject}
|
||||||
|
onProjectSelect={onProjectSelect}
|
||||||
|
onToggleStarProject={onToggleStarProject}
|
||||||
|
onStartEditingProject={onStartEditingProject}
|
||||||
|
onCancelEditingProject={onCancelEditingProject}
|
||||||
|
onSaveProjectName={onSaveProjectName}
|
||||||
|
onDeleteProject={onDeleteProject}
|
||||||
|
onSessionSelect={onSessionSelect}
|
||||||
|
onDeleteSession={onDeleteSession}
|
||||||
|
onLoadMoreSessions={onLoadMoreSessions}
|
||||||
|
onNewSession={onNewSession}
|
||||||
|
onEditingSessionNameChange={onEditingSessionNameChange}
|
||||||
|
onStartEditingSession={onStartEditingSession}
|
||||||
|
onCancelEditingSession={onCancelEditingSession}
|
||||||
|
onSaveEditingSession={onSaveEditingSession}
|
||||||
|
touchHandlerFactory={touchHandlerFactory}
|
||||||
|
t={t}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
160
src/components/sidebar/SidebarProjectSessions.tsx
Normal file
160
src/components/sidebar/SidebarProjectSessions.tsx
Normal file
@@ -0,0 +1,160 @@
|
|||||||
|
import { ChevronDown, Plus } from 'lucide-react';
|
||||||
|
import type { TFunction } from 'i18next';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import type { Project, ProjectSession, SessionProvider } from '../../types/app';
|
||||||
|
import type { SessionWithProvider, TouchHandlerFactory } from './types';
|
||||||
|
import SidebarSessionItem from './SidebarSessionItem';
|
||||||
|
|
||||||
|
type SidebarProjectSessionsProps = {
|
||||||
|
project: Project;
|
||||||
|
isExpanded: boolean;
|
||||||
|
sessions: SessionWithProvider[];
|
||||||
|
selectedSession: ProjectSession | null;
|
||||||
|
initialSessionsLoaded: boolean;
|
||||||
|
isLoadingSessions: boolean;
|
||||||
|
currentTime: Date;
|
||||||
|
editingSession: string | null;
|
||||||
|
editingSessionName: string;
|
||||||
|
onEditingSessionNameChange: (value: string) => void;
|
||||||
|
onStartEditingSession: (sessionId: string, initialName: string) => void;
|
||||||
|
onCancelEditingSession: () => void;
|
||||||
|
onSaveEditingSession: (projectName: string, sessionId: string, summary: string) => void;
|
||||||
|
onProjectSelect: (project: Project) => void;
|
||||||
|
onSessionSelect: (session: SessionWithProvider, projectName: string) => void;
|
||||||
|
onDeleteSession: (
|
||||||
|
projectName: string,
|
||||||
|
sessionId: string,
|
||||||
|
sessionTitle: string,
|
||||||
|
provider: SessionProvider,
|
||||||
|
) => void;
|
||||||
|
onLoadMoreSessions: (project: Project) => void;
|
||||||
|
onNewSession: (project: Project) => void;
|
||||||
|
touchHandlerFactory: TouchHandlerFactory;
|
||||||
|
t: TFunction;
|
||||||
|
};
|
||||||
|
|
||||||
|
function SessionListSkeleton() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{Array.from({ length: 3 }).map((_, index) => (
|
||||||
|
<div key={index} className="p-2 rounded-md">
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<div className="w-3 h-3 bg-muted rounded-full animate-pulse mt-0.5" />
|
||||||
|
<div className="flex-1 space-y-1">
|
||||||
|
<div className="h-3 bg-muted rounded animate-pulse" style={{ width: `${60 + index * 15}%` }} />
|
||||||
|
<div className="h-2 bg-muted rounded animate-pulse w-1/2" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function SidebarProjectSessions({
|
||||||
|
project,
|
||||||
|
isExpanded,
|
||||||
|
sessions,
|
||||||
|
selectedSession,
|
||||||
|
initialSessionsLoaded,
|
||||||
|
isLoadingSessions,
|
||||||
|
currentTime,
|
||||||
|
editingSession,
|
||||||
|
editingSessionName,
|
||||||
|
onEditingSessionNameChange,
|
||||||
|
onStartEditingSession,
|
||||||
|
onCancelEditingSession,
|
||||||
|
onSaveEditingSession,
|
||||||
|
onProjectSelect,
|
||||||
|
onSessionSelect,
|
||||||
|
onDeleteSession,
|
||||||
|
onLoadMoreSessions,
|
||||||
|
onNewSession,
|
||||||
|
touchHandlerFactory,
|
||||||
|
t,
|
||||||
|
}: SidebarProjectSessionsProps) {
|
||||||
|
if (!isExpanded) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const hasSessions = sessions.length > 0;
|
||||||
|
const hasMoreSessions = project.sessionMeta?.hasMore !== false;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="ml-3 space-y-1 border-l border-border pl-3">
|
||||||
|
{!initialSessionsLoaded ? (
|
||||||
|
<SessionListSkeleton />
|
||||||
|
) : !hasSessions && !isLoadingSessions ? (
|
||||||
|
<div className="py-2 px-3 text-left">
|
||||||
|
<p className="text-xs text-muted-foreground">{t('sessions.noSessions')}</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
sessions.map((session) => (
|
||||||
|
<SidebarSessionItem
|
||||||
|
key={session.id}
|
||||||
|
project={project}
|
||||||
|
session={session}
|
||||||
|
selectedSession={selectedSession}
|
||||||
|
currentTime={currentTime}
|
||||||
|
editingSession={editingSession}
|
||||||
|
editingSessionName={editingSessionName}
|
||||||
|
onEditingSessionNameChange={onEditingSessionNameChange}
|
||||||
|
onStartEditingSession={onStartEditingSession}
|
||||||
|
onCancelEditingSession={onCancelEditingSession}
|
||||||
|
onSaveEditingSession={onSaveEditingSession}
|
||||||
|
onProjectSelect={onProjectSelect}
|
||||||
|
onSessionSelect={onSessionSelect}
|
||||||
|
onDeleteSession={onDeleteSession}
|
||||||
|
touchHandlerFactory={touchHandlerFactory}
|
||||||
|
t={t}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
|
||||||
|
{hasSessions && hasMoreSessions && (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="w-full justify-center gap-2 mt-2 text-muted-foreground"
|
||||||
|
onClick={() => onLoadMoreSessions(project)}
|
||||||
|
disabled={isLoadingSessions}
|
||||||
|
>
|
||||||
|
{isLoadingSessions ? (
|
||||||
|
<>
|
||||||
|
<div className="w-3 h-3 animate-spin rounded-full border border-muted-foreground border-t-transparent" />
|
||||||
|
{t('sessions.loading')}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<ChevronDown className="w-3 h-3" />
|
||||||
|
{t('sessions.showMore')}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="md:hidden px-3 pb-2">
|
||||||
|
<button
|
||||||
|
className="w-full h-8 bg-primary hover:bg-primary/90 text-primary-foreground rounded-md flex items-center justify-center gap-2 font-medium text-xs active:scale-[0.98] transition-all duration-150"
|
||||||
|
onClick={() => {
|
||||||
|
onProjectSelect(project);
|
||||||
|
onNewSession(project);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Plus className="w-3 h-3" />
|
||||||
|
{t('sessions.newSession')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="default"
|
||||||
|
size="sm"
|
||||||
|
className="hidden md:flex w-full justify-start gap-2 mt-1 h-8 text-xs font-medium bg-primary hover:bg-primary/90 text-primary-foreground transition-colors"
|
||||||
|
onClick={() => onNewSession(project)}
|
||||||
|
>
|
||||||
|
<Plus className="w-3 h-3" />
|
||||||
|
{t('sessions.newSession')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
81
src/components/sidebar/SidebarProjectsState.tsx
Normal file
81
src/components/sidebar/SidebarProjectsState.tsx
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
import { Folder, Search } from 'lucide-react';
|
||||||
|
import type { TFunction } from 'i18next';
|
||||||
|
import type { LoadingProgress } from '../../types/app';
|
||||||
|
|
||||||
|
type SidebarProjectsStateProps = {
|
||||||
|
isLoading: boolean;
|
||||||
|
loadingProgress: LoadingProgress | null;
|
||||||
|
projectsCount: number;
|
||||||
|
filteredProjectsCount: number;
|
||||||
|
t: TFunction;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function SidebarProjectsState({
|
||||||
|
isLoading,
|
||||||
|
loadingProgress,
|
||||||
|
projectsCount,
|
||||||
|
filteredProjectsCount,
|
||||||
|
t,
|
||||||
|
}: SidebarProjectsStateProps) {
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="text-center py-12 md:py-8 px-4">
|
||||||
|
<div className="w-12 h-12 bg-muted rounded-lg flex items-center justify-center mx-auto mb-4 md:mb-3">
|
||||||
|
<div className="w-6 h-6 animate-spin rounded-full border-2 border-muted-foreground border-t-transparent" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-base font-medium text-foreground mb-2 md:mb-1">{t('projects.loadingProjects')}</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">{t('projects.fetchingProjects')}</p>
|
||||||
|
<h3 className="text-base font-medium text-foreground mb-2 md:mb-1">{t('projects.loadingProjects')}</h3>
|
||||||
|
{loadingProgress && loadingProgress.total > 0 ? (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="w-full bg-muted rounded-full h-2 overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="bg-primary h-full transition-all duration-300 ease-out"
|
||||||
|
style={{ width: `${(loadingProgress.current / loadingProgress.total) * 100}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
{loadingProgress.current}/{loadingProgress.total} {t('projects.projects')}
|
||||||
|
</p>
|
||||||
|
{loadingProgress.currentProject && (
|
||||||
|
<p
|
||||||
|
className="text-xs text-muted-foreground/70 truncate max-w-[200px] mx-auto"
|
||||||
|
title={loadingProgress.currentProject}
|
||||||
|
>
|
||||||
|
{loadingProgress.currentProject.split('-').slice(-2).join('/')}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-sm text-muted-foreground">{t('projects.fetchingProjects')}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (projectsCount === 0) {
|
||||||
|
return (
|
||||||
|
<div className="text-center py-12 md:py-8 px-4">
|
||||||
|
<div className="w-12 h-12 bg-muted rounded-lg flex items-center justify-center mx-auto mb-4 md:mb-3">
|
||||||
|
<Folder className="w-6 h-6 text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-base font-medium text-foreground mb-2 md:mb-1">{t('projects.noProjects')}</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">{t('projects.runClaudeCli')}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (filteredProjectsCount === 0) {
|
||||||
|
return (
|
||||||
|
<div className="text-center py-12 md:py-8 px-4">
|
||||||
|
<div className="w-12 h-12 bg-muted rounded-lg flex items-center justify-center mx-auto mb-4 md:mb-3">
|
||||||
|
<Search className="w-6 h-6 text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-base font-medium text-foreground mb-2 md:mb-1">{t('projects.noMatchingProjects')}</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">{t('projects.tryDifferentSearch')}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
239
src/components/sidebar/SidebarSessionItem.tsx
Normal file
239
src/components/sidebar/SidebarSessionItem.tsx
Normal file
@@ -0,0 +1,239 @@
|
|||||||
|
import { Badge } from '../ui/badge';
|
||||||
|
import { Button } from '../ui/button';
|
||||||
|
import { Check, Clock, Edit2, Trash2, X } from 'lucide-react';
|
||||||
|
import type { TFunction } from 'i18next';
|
||||||
|
import { cn } from '../../lib/utils';
|
||||||
|
import { formatTimeAgo } from '../../utils/dateUtils';
|
||||||
|
import type { Project, ProjectSession, SessionProvider } from '../../types/app';
|
||||||
|
import type { SessionWithProvider, TouchHandlerFactory } from './types';
|
||||||
|
import { createSessionViewModel } from './utils';
|
||||||
|
import SessionProviderIcon from './SessionProviderIcon';
|
||||||
|
|
||||||
|
type SidebarSessionItemProps = {
|
||||||
|
project: Project;
|
||||||
|
session: SessionWithProvider;
|
||||||
|
selectedSession: ProjectSession | null;
|
||||||
|
currentTime: Date;
|
||||||
|
editingSession: string | null;
|
||||||
|
editingSessionName: string;
|
||||||
|
onEditingSessionNameChange: (value: string) => void;
|
||||||
|
onStartEditingSession: (sessionId: string, initialName: string) => void;
|
||||||
|
onCancelEditingSession: () => void;
|
||||||
|
onSaveEditingSession: (projectName: string, sessionId: string, summary: string) => void;
|
||||||
|
onProjectSelect: (project: Project) => void;
|
||||||
|
onSessionSelect: (session: SessionWithProvider, projectName: string) => void;
|
||||||
|
onDeleteSession: (
|
||||||
|
projectName: string,
|
||||||
|
sessionId: string,
|
||||||
|
sessionTitle: string,
|
||||||
|
provider: SessionProvider,
|
||||||
|
) => void;
|
||||||
|
touchHandlerFactory: TouchHandlerFactory;
|
||||||
|
t: TFunction;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function SidebarSessionItem({
|
||||||
|
project,
|
||||||
|
session,
|
||||||
|
selectedSession,
|
||||||
|
currentTime,
|
||||||
|
editingSession,
|
||||||
|
editingSessionName,
|
||||||
|
onEditingSessionNameChange,
|
||||||
|
onStartEditingSession,
|
||||||
|
onCancelEditingSession,
|
||||||
|
onSaveEditingSession,
|
||||||
|
onProjectSelect,
|
||||||
|
onSessionSelect,
|
||||||
|
onDeleteSession,
|
||||||
|
touchHandlerFactory,
|
||||||
|
t,
|
||||||
|
}: SidebarSessionItemProps) {
|
||||||
|
const sessionView = createSessionViewModel(session, currentTime, t);
|
||||||
|
const isSelected = selectedSession?.id === session.id;
|
||||||
|
|
||||||
|
const selectMobileSession = () => {
|
||||||
|
onProjectSelect(project);
|
||||||
|
onSessionSelect(session, project.name);
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveEditedSession = () => {
|
||||||
|
onSaveEditingSession(project.name, session.id, editingSessionName);
|
||||||
|
};
|
||||||
|
|
||||||
|
const requestDeleteSession = () => {
|
||||||
|
onDeleteSession(project.name, session.id, sessionView.sessionName, session.__provider);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="group relative">
|
||||||
|
{sessionView.isActive && (
|
||||||
|
<div className="absolute left-0 top-1/2 transform -translate-y-1/2 -translate-x-1">
|
||||||
|
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="md:hidden">
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'p-2 mx-3 my-0.5 rounded-md bg-card border active:scale-[0.98] transition-all duration-150 relative',
|
||||||
|
isSelected ? 'bg-primary/5 border-primary/20' : '',
|
||||||
|
!isSelected && sessionView.isActive
|
||||||
|
? 'border-green-500/30 bg-green-50/5 dark:bg-green-900/5'
|
||||||
|
: 'border-border/30',
|
||||||
|
)}
|
||||||
|
onClick={selectMobileSession}
|
||||||
|
onTouchEnd={touchHandlerFactory(selectMobileSession)}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'w-5 h-5 rounded-md flex items-center justify-center flex-shrink-0',
|
||||||
|
isSelected ? 'bg-primary/10' : 'bg-muted/50',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<SessionProviderIcon provider={session.__provider} className="w-3 h-3" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<div className="text-xs font-medium truncate text-foreground">{sessionView.sessionName}</div>
|
||||||
|
<div className="flex items-center gap-1 mt-0.5">
|
||||||
|
<Clock className="w-2.5 h-2.5 text-muted-foreground" />
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
{formatTimeAgo(sessionView.sessionTime, currentTime, t)}
|
||||||
|
</span>
|
||||||
|
{sessionView.messageCount > 0 && (
|
||||||
|
<Badge variant="secondary" className="text-xs px-1 py-0 ml-auto">
|
||||||
|
{sessionView.messageCount}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
<span className="ml-1 opacity-70">
|
||||||
|
<SessionProviderIcon provider={session.__provider} className="w-3 h-3" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{!sessionView.isCursorSession && (
|
||||||
|
<button
|
||||||
|
className="w-5 h-5 rounded-md bg-red-50 dark:bg-red-900/20 flex items-center justify-center active:scale-95 transition-transform opacity-70 ml-1"
|
||||||
|
onClick={(event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
requestDeleteSession();
|
||||||
|
}}
|
||||||
|
onTouchEnd={touchHandlerFactory(requestDeleteSession)}
|
||||||
|
>
|
||||||
|
<Trash2 className="w-2.5 h-2.5 text-red-600 dark:text-red-400" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="hidden md:block">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className={cn(
|
||||||
|
'w-full justify-start p-2 h-auto font-normal text-left hover:bg-accent/50 transition-colors duration-200',
|
||||||
|
isSelected && 'bg-accent text-accent-foreground',
|
||||||
|
)}
|
||||||
|
onClick={() => onSessionSelect(session, project.name)}
|
||||||
|
onTouchEnd={touchHandlerFactory(() => onSessionSelect(session, project.name))}
|
||||||
|
>
|
||||||
|
<div className="flex items-start gap-2 min-w-0 w-full">
|
||||||
|
<SessionProviderIcon provider={session.__provider} className="w-3 h-3 mt-0.5 flex-shrink-0" />
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<div className="text-xs font-medium truncate text-foreground">{sessionView.sessionName}</div>
|
||||||
|
<div className="flex items-center gap-1 mt-0.5">
|
||||||
|
<Clock className="w-2.5 h-2.5 text-muted-foreground" />
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
{formatTimeAgo(sessionView.sessionTime, currentTime, t)}
|
||||||
|
</span>
|
||||||
|
{sessionView.messageCount > 0 && (
|
||||||
|
<Badge
|
||||||
|
variant="secondary"
|
||||||
|
className="text-xs px-1 py-0 ml-auto group-hover:opacity-0 transition-opacity"
|
||||||
|
>
|
||||||
|
{sessionView.messageCount}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
<span className="ml-1 opacity-70 group-hover:opacity-0 transition-opacity">
|
||||||
|
<SessionProviderIcon provider={session.__provider} className="w-3 h-3" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{!sessionView.isCursorSession && (
|
||||||
|
<div className="absolute right-2 top-1/2 transform -translate-y-1/2 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-all duration-200">
|
||||||
|
{editingSession === session.id && !sessionView.isCodexSession ? (
|
||||||
|
<>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={editingSessionName}
|
||||||
|
onChange={(event) => onEditingSessionNameChange(event.target.value)}
|
||||||
|
onKeyDown={(event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
if (event.key === 'Enter') {
|
||||||
|
saveEditedSession();
|
||||||
|
} else if (event.key === 'Escape') {
|
||||||
|
onCancelEditingSession();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onClick={(event) => event.stopPropagation()}
|
||||||
|
className="w-32 px-2 py-1 text-xs border border-border rounded bg-background focus:outline-none focus:ring-1 focus:ring-primary"
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
className="w-6 h-6 bg-green-50 hover:bg-green-100 dark:bg-green-900/20 dark:hover:bg-green-900/40 rounded flex items-center justify-center"
|
||||||
|
onClick={(event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
saveEditedSession();
|
||||||
|
}}
|
||||||
|
title={t('tooltips.save')}
|
||||||
|
>
|
||||||
|
<Check className="w-3 h-3 text-green-600 dark:text-green-400" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="w-6 h-6 bg-gray-50 hover:bg-gray-100 dark:bg-gray-900/20 dark:hover:bg-gray-900/40 rounded flex items-center justify-center"
|
||||||
|
onClick={(event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
onCancelEditingSession();
|
||||||
|
}}
|
||||||
|
title={t('tooltips.cancel')}
|
||||||
|
>
|
||||||
|
<X className="w-3 h-3 text-gray-600 dark:text-gray-400" />
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{!sessionView.isCodexSession && (
|
||||||
|
<button
|
||||||
|
className="w-6 h-6 bg-gray-50 hover:bg-gray-100 dark:bg-gray-900/20 dark:hover:bg-gray-900/40 rounded flex items-center justify-center"
|
||||||
|
onClick={(event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
onStartEditingSession(session.id, session.summary || t('projects.newSession'));
|
||||||
|
}}
|
||||||
|
title={t('tooltips.editSessionName')}
|
||||||
|
>
|
||||||
|
<Edit2 className="w-3 h-3 text-gray-600 dark:text-gray-400" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
className="w-6 h-6 bg-red-50 hover:bg-red-100 dark:bg-red-900/20 dark:hover:bg-red-900/40 rounded flex items-center justify-center"
|
||||||
|
onClick={(event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
requestDeleteSession();
|
||||||
|
}}
|
||||||
|
title={t('tooltips.deleteSession')}
|
||||||
|
>
|
||||||
|
<Trash2 className="w-3 h-3 text-red-600 dark:text-red-400" />
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
57
src/components/sidebar/types.ts
Normal file
57
src/components/sidebar/types.ts
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
import type React from 'react';
|
||||||
|
import type { LoadingProgress, Project, ProjectSession, SessionProvider } from '../../types/app';
|
||||||
|
|
||||||
|
export type ProjectSortOrder = 'name' | 'date';
|
||||||
|
|
||||||
|
export type SessionWithProvider = ProjectSession & {
|
||||||
|
__provider: SessionProvider;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type AdditionalSessionsByProject = Record<string, ProjectSession[]>;
|
||||||
|
export type LoadingSessionsByProject = Record<string, boolean>;
|
||||||
|
|
||||||
|
export type DeleteProjectConfirmation = {
|
||||||
|
project: Project;
|
||||||
|
sessionCount: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type SessionDeleteConfirmation = {
|
||||||
|
projectName: string;
|
||||||
|
sessionId: string;
|
||||||
|
sessionTitle: string;
|
||||||
|
provider: SessionProvider;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type SidebarProps = {
|
||||||
|
projects: Project[];
|
||||||
|
selectedProject: Project | null;
|
||||||
|
selectedSession: ProjectSession | null;
|
||||||
|
onProjectSelect: (project: Project) => void;
|
||||||
|
onSessionSelect: (session: ProjectSession) => void;
|
||||||
|
onNewSession: (project: Project) => void;
|
||||||
|
onSessionDelete?: (sessionId: string) => void;
|
||||||
|
onProjectDelete?: (projectName: string) => void;
|
||||||
|
isLoading: boolean;
|
||||||
|
loadingProgress: LoadingProgress | null;
|
||||||
|
onRefresh: () => Promise<void> | void;
|
||||||
|
onShowSettings: () => void;
|
||||||
|
isMobile: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type SessionViewModel = {
|
||||||
|
isCursorSession: boolean;
|
||||||
|
isCodexSession: boolean;
|
||||||
|
isActive: boolean;
|
||||||
|
sessionName: string;
|
||||||
|
sessionTime: string;
|
||||||
|
messageCount: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type MCPServerStatus = {
|
||||||
|
hasMCPServer?: boolean;
|
||||||
|
isConfigured?: boolean;
|
||||||
|
} | null;
|
||||||
|
|
||||||
|
export type TouchHandlerFactory = (
|
||||||
|
callback: () => void,
|
||||||
|
) => (event: React.TouchEvent<HTMLElement>) => void;
|
||||||
200
src/components/sidebar/utils.ts
Normal file
200
src/components/sidebar/utils.ts
Normal file
@@ -0,0 +1,200 @@
|
|||||||
|
import type { TFunction } from 'i18next';
|
||||||
|
import type { Project } from '../../types/app';
|
||||||
|
import type {
|
||||||
|
AdditionalSessionsByProject,
|
||||||
|
ProjectSortOrder,
|
||||||
|
SessionViewModel,
|
||||||
|
SessionWithProvider,
|
||||||
|
} from './types';
|
||||||
|
|
||||||
|
export const readProjectSortOrder = (): ProjectSortOrder => {
|
||||||
|
try {
|
||||||
|
const rawSettings = localStorage.getItem('claude-settings');
|
||||||
|
if (!rawSettings) {
|
||||||
|
return 'name';
|
||||||
|
}
|
||||||
|
|
||||||
|
const settings = JSON.parse(rawSettings) as { projectSortOrder?: ProjectSortOrder };
|
||||||
|
return settings.projectSortOrder === 'date' ? 'date' : 'name';
|
||||||
|
} catch {
|
||||||
|
return 'name';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const loadStarredProjects = (): Set<string> => {
|
||||||
|
try {
|
||||||
|
const saved = localStorage.getItem('starredProjects');
|
||||||
|
return saved ? new Set<string>(JSON.parse(saved)) : new Set<string>();
|
||||||
|
} catch {
|
||||||
|
return new Set<string>();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const persistStarredProjects = (starredProjects: Set<string>) => {
|
||||||
|
try {
|
||||||
|
localStorage.setItem('starredProjects', JSON.stringify([...starredProjects]));
|
||||||
|
} catch {
|
||||||
|
// Keep UI responsive even if storage fails.
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getSessionDate = (session: SessionWithProvider): Date => {
|
||||||
|
if (session.__provider === 'cursor') {
|
||||||
|
return new Date(session.createdAt || 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (session.__provider === 'codex') {
|
||||||
|
return new Date(session.createdAt || session.lastActivity || 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Date(session.lastActivity || 0);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getSessionName = (session: SessionWithProvider, t: TFunction): string => {
|
||||||
|
if (session.__provider === 'cursor') {
|
||||||
|
return session.name || t('projects.untitledSession');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (session.__provider === 'codex') {
|
||||||
|
return session.summary || session.name || t('projects.codexSession');
|
||||||
|
}
|
||||||
|
|
||||||
|
return session.summary || t('projects.newSession');
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getSessionTime = (session: SessionWithProvider): string => {
|
||||||
|
if (session.__provider === 'cursor') {
|
||||||
|
return String(session.createdAt || '');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (session.__provider === 'codex') {
|
||||||
|
return String(session.createdAt || session.lastActivity || '');
|
||||||
|
}
|
||||||
|
|
||||||
|
return String(session.lastActivity || '');
|
||||||
|
};
|
||||||
|
|
||||||
|
export const createSessionViewModel = (
|
||||||
|
session: SessionWithProvider,
|
||||||
|
currentTime: Date,
|
||||||
|
t: TFunction,
|
||||||
|
): SessionViewModel => {
|
||||||
|
const sessionDate = getSessionDate(session);
|
||||||
|
const diffInMinutes = Math.floor((currentTime.getTime() - sessionDate.getTime()) / (1000 * 60));
|
||||||
|
|
||||||
|
return {
|
||||||
|
isCursorSession: session.__provider === 'cursor',
|
||||||
|
isCodexSession: session.__provider === 'codex',
|
||||||
|
isActive: diffInMinutes < 10,
|
||||||
|
sessionName: getSessionName(session, t),
|
||||||
|
sessionTime: getSessionTime(session),
|
||||||
|
messageCount: Number(session.messageCount || 0),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getAllSessions = (
|
||||||
|
project: Project,
|
||||||
|
additionalSessions: AdditionalSessionsByProject,
|
||||||
|
): SessionWithProvider[] => {
|
||||||
|
const claudeSessions = [
|
||||||
|
...(project.sessions || []),
|
||||||
|
...(additionalSessions[project.name] || []),
|
||||||
|
].map((session) => ({ ...session, __provider: 'claude' as const }));
|
||||||
|
|
||||||
|
const cursorSessions = (project.cursorSessions || []).map((session) => ({
|
||||||
|
...session,
|
||||||
|
__provider: 'cursor' as const,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const codexSessions = (project.codexSessions || []).map((session) => ({
|
||||||
|
...session,
|
||||||
|
__provider: 'codex' as const,
|
||||||
|
}));
|
||||||
|
|
||||||
|
return [...claudeSessions, ...cursorSessions, ...codexSessions].sort(
|
||||||
|
(a, b) => getSessionDate(b).getTime() - getSessionDate(a).getTime(),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getProjectLastActivity = (
|
||||||
|
project: Project,
|
||||||
|
additionalSessions: AdditionalSessionsByProject,
|
||||||
|
): Date => {
|
||||||
|
const sessions = getAllSessions(project, additionalSessions);
|
||||||
|
if (sessions.length === 0) {
|
||||||
|
return new Date(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
return sessions.reduce((latest, session) => {
|
||||||
|
const sessionDate = getSessionDate(session);
|
||||||
|
return sessionDate > latest ? sessionDate : latest;
|
||||||
|
}, new Date(0));
|
||||||
|
};
|
||||||
|
|
||||||
|
export const sortProjects = (
|
||||||
|
projects: Project[],
|
||||||
|
projectSortOrder: ProjectSortOrder,
|
||||||
|
starredProjects: Set<string>,
|
||||||
|
additionalSessions: AdditionalSessionsByProject,
|
||||||
|
): Project[] => {
|
||||||
|
const byName = [...projects];
|
||||||
|
|
||||||
|
byName.sort((projectA, projectB) => {
|
||||||
|
const aStarred = starredProjects.has(projectA.name);
|
||||||
|
const bStarred = starredProjects.has(projectB.name);
|
||||||
|
|
||||||
|
if (aStarred && !bStarred) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!aStarred && bStarred) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (projectSortOrder === 'date') {
|
||||||
|
return (
|
||||||
|
getProjectLastActivity(projectB, additionalSessions).getTime() -
|
||||||
|
getProjectLastActivity(projectA, additionalSessions).getTime()
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (projectA.displayName || projectA.name).localeCompare(projectB.displayName || projectB.name);
|
||||||
|
});
|
||||||
|
|
||||||
|
return byName;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const filterProjects = (projects: Project[], searchFilter: string): Project[] => {
|
||||||
|
const normalizedSearch = searchFilter.trim().toLowerCase();
|
||||||
|
if (!normalizedSearch) {
|
||||||
|
return projects;
|
||||||
|
}
|
||||||
|
|
||||||
|
return projects.filter((project) => {
|
||||||
|
const displayName = (project.displayName || project.name).toLowerCase();
|
||||||
|
const projectName = project.name.toLowerCase();
|
||||||
|
return displayName.includes(normalizedSearch) || projectName.includes(normalizedSearch);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getTaskIndicatorStatus = (
|
||||||
|
project: Project,
|
||||||
|
mcpServerStatus: { hasMCPServer?: boolean; isConfigured?: boolean } | null,
|
||||||
|
) => {
|
||||||
|
const projectConfigured = Boolean(project.taskmaster?.hasTaskmaster);
|
||||||
|
const mcpConfigured = Boolean(mcpServerStatus?.hasMCPServer && mcpServerStatus?.isConfigured);
|
||||||
|
|
||||||
|
if (projectConfigured && mcpConfigured) {
|
||||||
|
return 'fully-configured';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (projectConfigured) {
|
||||||
|
return 'taskmaster-only';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (mcpConfigured) {
|
||||||
|
return 'mcp-only';
|
||||||
|
}
|
||||||
|
|
||||||
|
return 'not-configured';
|
||||||
|
};
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
import * as React from "react"
|
|
||||||
import { cva } from "class-variance-authority"
|
|
||||||
import { cn } from "../../lib/utils"
|
|
||||||
|
|
||||||
const badgeVariants = cva(
|
|
||||||
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
|
||||||
{
|
|
||||||
variants: {
|
|
||||||
variant: {
|
|
||||||
default:
|
|
||||||
"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
|
|
||||||
secondary:
|
|
||||||
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
||||||
destructive:
|
|
||||||
"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
|
|
||||||
outline: "text-foreground",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
defaultVariants: {
|
|
||||||
variant: "default",
|
|
||||||
},
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
function Badge({ className, variant, ...props }) {
|
|
||||||
return (
|
|
||||||
<div className={cn(badgeVariants({ variant }), className)} {...props} />
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Badge, badgeVariants }
|
|
||||||
31
src/components/ui/badge.tsx
Normal file
31
src/components/ui/badge.tsx
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import { cva, type VariantProps } from 'class-variance-authority';
|
||||||
|
import { cn } from '../../lib/utils';
|
||||||
|
|
||||||
|
const badgeVariants = cva(
|
||||||
|
'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
|
||||||
|
secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
||||||
|
destructive:
|
||||||
|
'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
|
||||||
|
outline: 'text-foreground',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: 'default',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
export interface BadgeProps
|
||||||
|
extends React.HTMLAttributes<HTMLDivElement>,
|
||||||
|
VariantProps<typeof badgeVariants> {}
|
||||||
|
|
||||||
|
function Badge({ className, variant, ...props }: BadgeProps) {
|
||||||
|
return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Badge, badgeVariants };
|
||||||
@@ -1,46 +0,0 @@
|
|||||||
import * as React from "react"
|
|
||||||
import { cva } from "class-variance-authority"
|
|
||||||
import { cn } from "../../lib/utils"
|
|
||||||
|
|
||||||
const buttonVariants = cva(
|
|
||||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
|
||||||
{
|
|
||||||
variants: {
|
|
||||||
variant: {
|
|
||||||
default:
|
|
||||||
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
|
|
||||||
destructive:
|
|
||||||
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
|
|
||||||
outline:
|
|
||||||
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
|
|
||||||
secondary:
|
|
||||||
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
|
|
||||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
||||||
link: "text-primary underline-offset-4 hover:underline",
|
|
||||||
},
|
|
||||||
size: {
|
|
||||||
default: "h-9 px-4 py-2",
|
|
||||||
sm: "h-8 rounded-md px-3 text-xs",
|
|
||||||
lg: "h-10 rounded-md px-8",
|
|
||||||
icon: "h-9 w-9",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
defaultVariants: {
|
|
||||||
variant: "default",
|
|
||||||
size: "default",
|
|
||||||
},
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
const Button = React.forwardRef(({ className, variant, size, ...props }, ref) => {
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
className={cn(buttonVariants({ variant, size, className }))}
|
|
||||||
ref={ref}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
Button.displayName = "Button"
|
|
||||||
|
|
||||||
export { Button, buttonVariants }
|
|
||||||
50
src/components/ui/button.tsx
Normal file
50
src/components/ui/button.tsx
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import { cva, type VariantProps } from 'class-variance-authority';
|
||||||
|
import { cn } from '../../lib/utils';
|
||||||
|
|
||||||
|
const buttonVariants = cva(
|
||||||
|
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
|
||||||
|
destructive:
|
||||||
|
'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
|
||||||
|
outline:
|
||||||
|
'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
|
||||||
|
secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
|
||||||
|
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
||||||
|
link: 'text-primary underline-offset-4 hover:underline',
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: 'h-9 px-4 py-2',
|
||||||
|
sm: 'h-8 rounded-md px-3 text-xs',
|
||||||
|
lg: 'h-10 rounded-md px-8',
|
||||||
|
icon: 'h-9 w-9',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: 'default',
|
||||||
|
size: 'default',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
export interface ButtonProps
|
||||||
|
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||||
|
VariantProps<typeof buttonVariants> {}
|
||||||
|
|
||||||
|
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||||
|
({ className, variant, size, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
Button.displayName = 'Button';
|
||||||
|
|
||||||
|
export { Button, buttonVariants };
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
import * as React from "react"
|
|
||||||
import { cn } from "../../lib/utils"
|
|
||||||
|
|
||||||
const Input = React.forwardRef(({ className, type, ...props }, ref) => {
|
|
||||||
return (
|
|
||||||
<input
|
|
||||||
type={type}
|
|
||||||
className={cn(
|
|
||||||
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
ref={ref}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
Input.displayName = "Input"
|
|
||||||
|
|
||||||
export { Input }
|
|
||||||
24
src/components/ui/input.tsx
Normal file
24
src/components/ui/input.tsx
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import { cn } from '../../lib/utils';
|
||||||
|
|
||||||
|
export interface InputProps
|
||||||
|
extends React.InputHTMLAttributes<HTMLInputElement> {}
|
||||||
|
|
||||||
|
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||||
|
({ className, type, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type={type}
|
||||||
|
className={cn(
|
||||||
|
'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
Input.displayName = 'Input';
|
||||||
|
|
||||||
|
export { Input };
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
import * as React from "react"
|
|
||||||
import { cn } from "../../lib/utils"
|
|
||||||
|
|
||||||
const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (
|
|
||||||
<div
|
|
||||||
ref={ref}
|
|
||||||
className={cn("relative overflow-hidden", className)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="h-full w-full rounded-[inherit] overflow-auto"
|
|
||||||
style={{
|
|
||||||
WebkitOverflowScrolling: 'touch',
|
|
||||||
touchAction: 'pan-y'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
ScrollArea.displayName = "ScrollArea"
|
|
||||||
|
|
||||||
export { ScrollArea }
|
|
||||||
27
src/components/ui/scroll-area.tsx
Normal file
27
src/components/ui/scroll-area.tsx
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import { cn } from '../../lib/utils';
|
||||||
|
|
||||||
|
export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {}
|
||||||
|
|
||||||
|
const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
|
||||||
|
({ className, children, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn('relative overflow-hidden', className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="h-full w-full rounded-[inherit] overflow-auto"
|
||||||
|
style={{
|
||||||
|
WebkitOverflowScrolling: 'touch',
|
||||||
|
touchAction: 'pan-y',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
);
|
||||||
|
ScrollArea.displayName = 'ScrollArea';
|
||||||
|
|
||||||
|
export { ScrollArea };
|
||||||
527
src/hooks/useProjectsState.ts
Normal file
527
src/hooks/useProjectsState.ts
Normal file
@@ -0,0 +1,527 @@
|
|||||||
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||||
|
import type { NavigateFunction } from 'react-router-dom';
|
||||||
|
import { api, authenticatedFetch } from '../utils/api';
|
||||||
|
import type {
|
||||||
|
AppSocketMessage,
|
||||||
|
AppTab,
|
||||||
|
LoadingProgress,
|
||||||
|
Project,
|
||||||
|
ProjectSession,
|
||||||
|
ProjectsUpdatedMessage,
|
||||||
|
} from '../types/app';
|
||||||
|
|
||||||
|
type UseProjectsStateArgs = {
|
||||||
|
sessionId?: string;
|
||||||
|
navigate: NavigateFunction;
|
||||||
|
latestMessage: AppSocketMessage | null;
|
||||||
|
isMobile: boolean;
|
||||||
|
activeSessions: Set<string>;
|
||||||
|
};
|
||||||
|
|
||||||
|
const serialize = (value: unknown) => JSON.stringify(value ?? null);
|
||||||
|
|
||||||
|
const projectsHaveChanges = (
|
||||||
|
prevProjects: Project[],
|
||||||
|
nextProjects: Project[],
|
||||||
|
includeCursorSessions: boolean,
|
||||||
|
): boolean => {
|
||||||
|
if (prevProjects.length !== nextProjects.length) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return nextProjects.some((nextProject, index) => {
|
||||||
|
const prevProject = prevProjects[index];
|
||||||
|
if (!prevProject) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
const baseChanged =
|
||||||
|
nextProject.name !== prevProject.name ||
|
||||||
|
nextProject.displayName !== prevProject.displayName ||
|
||||||
|
nextProject.fullPath !== prevProject.fullPath ||
|
||||||
|
serialize(nextProject.sessionMeta) !== serialize(prevProject.sessionMeta) ||
|
||||||
|
serialize(nextProject.sessions) !== serialize(prevProject.sessions);
|
||||||
|
|
||||||
|
if (baseChanged) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!includeCursorSessions) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return serialize(nextProject.cursorSessions) !== serialize(prevProject.cursorSessions);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const getProjectSessions = (project: Project): ProjectSession[] => {
|
||||||
|
return [
|
||||||
|
...(project.sessions ?? []),
|
||||||
|
...(project.codexSessions ?? []),
|
||||||
|
...(project.cursorSessions ?? []),
|
||||||
|
];
|
||||||
|
};
|
||||||
|
|
||||||
|
const isUpdateAdditive = (
|
||||||
|
currentProjects: Project[],
|
||||||
|
updatedProjects: Project[],
|
||||||
|
selectedProject: Project | null,
|
||||||
|
selectedSession: ProjectSession | null,
|
||||||
|
): boolean => {
|
||||||
|
if (!selectedProject || !selectedSession) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentSelectedProject = currentProjects.find((project) => project.name === selectedProject.name);
|
||||||
|
const updatedSelectedProject = updatedProjects.find((project) => project.name === selectedProject.name);
|
||||||
|
|
||||||
|
if (!currentSelectedProject || !updatedSelectedProject) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentSelectedSession = getProjectSessions(currentSelectedProject).find(
|
||||||
|
(session) => session.id === selectedSession.id,
|
||||||
|
);
|
||||||
|
const updatedSelectedSession = getProjectSessions(updatedSelectedProject).find(
|
||||||
|
(session) => session.id === selectedSession.id,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!currentSelectedSession || !updatedSelectedSession) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
currentSelectedSession.id === updatedSelectedSession.id &&
|
||||||
|
currentSelectedSession.title === updatedSelectedSession.title &&
|
||||||
|
currentSelectedSession.created_at === updatedSelectedSession.created_at &&
|
||||||
|
currentSelectedSession.updated_at === updatedSelectedSession.updated_at
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadCursorSessionsForProjects = async (projects: Project[]): Promise<Project[]> => {
|
||||||
|
const projectsWithCursor = [...projects];
|
||||||
|
|
||||||
|
for (const project of projectsWithCursor) {
|
||||||
|
try {
|
||||||
|
const projectPath = project.fullPath || project.path;
|
||||||
|
const url = `/api/cursor/sessions?projectPath=${encodeURIComponent(projectPath ?? '')}`;
|
||||||
|
const response = await authenticatedFetch(url);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
project.cursorSessions = [];
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
project.cursorSessions = data.success && Array.isArray(data.sessions) ? data.sessions : [];
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`Error fetching Cursor sessions for project ${project.name}:`, error);
|
||||||
|
project.cursorSessions = [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return projectsWithCursor;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function useProjectsState({
|
||||||
|
sessionId,
|
||||||
|
navigate,
|
||||||
|
latestMessage,
|
||||||
|
isMobile,
|
||||||
|
activeSessions,
|
||||||
|
}: UseProjectsStateArgs) {
|
||||||
|
const [projects, setProjects] = useState<Project[]>([]);
|
||||||
|
const [selectedProject, setSelectedProject] = useState<Project | null>(null);
|
||||||
|
const [selectedSession, setSelectedSession] = useState<ProjectSession | null>(null);
|
||||||
|
const [activeTab, setActiveTab] = useState<AppTab>('chat');
|
||||||
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||||
|
const [isLoadingProjects, setIsLoadingProjects] = useState(true);
|
||||||
|
const [loadingProgress, setLoadingProgress] = useState<LoadingProgress | null>(null);
|
||||||
|
const [isInputFocused, setIsInputFocused] = useState(false);
|
||||||
|
const [showSettings, setShowSettings] = useState(false);
|
||||||
|
const [settingsInitialTab, setSettingsInitialTab] = useState('agents');
|
||||||
|
const [externalMessageUpdate, setExternalMessageUpdate] = useState(0);
|
||||||
|
|
||||||
|
const loadingProgressTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||||
|
|
||||||
|
const fetchProjects = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
setIsLoadingProjects(true);
|
||||||
|
const response = await api.projects();
|
||||||
|
const projectData = (await response.json()) as Project[];
|
||||||
|
const projectsWithCursor = await loadCursorSessionsForProjects(projectData);
|
||||||
|
|
||||||
|
setProjects((prevProjects) => {
|
||||||
|
if (prevProjects.length === 0) {
|
||||||
|
return projectsWithCursor;
|
||||||
|
}
|
||||||
|
|
||||||
|
return projectsHaveChanges(prevProjects, projectsWithCursor, true)
|
||||||
|
? projectsWithCursor
|
||||||
|
: prevProjects;
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching projects:', error);
|
||||||
|
} finally {
|
||||||
|
setIsLoadingProjects(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const openSettings = useCallback((tab = 'tools') => {
|
||||||
|
setSettingsInitialTab(tab);
|
||||||
|
setShowSettings(true);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
void fetchProjects();
|
||||||
|
}, [fetchProjects]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!latestMessage) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (latestMessage.type === 'loading_progress') {
|
||||||
|
if (loadingProgressTimeoutRef.current) {
|
||||||
|
clearTimeout(loadingProgressTimeoutRef.current);
|
||||||
|
loadingProgressTimeoutRef.current = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoadingProgress(latestMessage as LoadingProgress);
|
||||||
|
|
||||||
|
if (latestMessage.phase === 'complete') {
|
||||||
|
loadingProgressTimeoutRef.current = setTimeout(() => {
|
||||||
|
setLoadingProgress(null);
|
||||||
|
loadingProgressTimeoutRef.current = null;
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (latestMessage.type !== 'projects_updated') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const projectsMessage = latestMessage as ProjectsUpdatedMessage;
|
||||||
|
|
||||||
|
if (projectsMessage.changedFile && selectedSession && selectedProject) {
|
||||||
|
const normalized = projectsMessage.changedFile.replace(/\\/g, '/');
|
||||||
|
const changedFileParts = normalized.split('/');
|
||||||
|
|
||||||
|
if (changedFileParts.length >= 2) {
|
||||||
|
const filename = changedFileParts[changedFileParts.length - 1];
|
||||||
|
const changedSessionId = filename.replace('.jsonl', '');
|
||||||
|
|
||||||
|
if (changedSessionId === selectedSession.id) {
|
||||||
|
const isSessionActive = activeSessions.has(selectedSession.id);
|
||||||
|
|
||||||
|
if (!isSessionActive) {
|
||||||
|
setExternalMessageUpdate((prev) => prev + 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const hasActiveSession =
|
||||||
|
(selectedSession && activeSessions.has(selectedSession.id)) ||
|
||||||
|
(activeSessions.size > 0 && Array.from(activeSessions).some((id) => id.startsWith('new-session-')));
|
||||||
|
|
||||||
|
const updatedProjects = projectsMessage.projects;
|
||||||
|
|
||||||
|
if (
|
||||||
|
hasActiveSession &&
|
||||||
|
!isUpdateAdditive(projects, updatedProjects, selectedProject, selectedSession)
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setProjects(updatedProjects);
|
||||||
|
|
||||||
|
if (!selectedProject) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const updatedSelectedProject = updatedProjects.find(
|
||||||
|
(project) => project.name === selectedProject.name,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!updatedSelectedProject) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (serialize(updatedSelectedProject) !== serialize(selectedProject)) {
|
||||||
|
setSelectedProject(updatedSelectedProject);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!selectedSession) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const updatedSelectedSession = getProjectSessions(updatedSelectedProject).find(
|
||||||
|
(session) => session.id === selectedSession.id,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!updatedSelectedSession) {
|
||||||
|
setSelectedSession(null);
|
||||||
|
}
|
||||||
|
}, [latestMessage, selectedProject, selectedSession, activeSessions, projects]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
return () => {
|
||||||
|
if (loadingProgressTimeoutRef.current) {
|
||||||
|
clearTimeout(loadingProgressTimeoutRef.current);
|
||||||
|
loadingProgressTimeoutRef.current = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!sessionId || projects.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const shouldSwitchTab = !selectedSession || selectedSession.id !== sessionId;
|
||||||
|
|
||||||
|
for (const project of projects) {
|
||||||
|
const claudeSession = project.sessions?.find((session) => session.id === sessionId);
|
||||||
|
if (claudeSession) {
|
||||||
|
const shouldUpdateProject = selectedProject?.name !== project.name;
|
||||||
|
const shouldUpdateSession =
|
||||||
|
selectedSession?.id !== sessionId || selectedSession.__provider !== 'claude';
|
||||||
|
|
||||||
|
if (shouldUpdateProject) {
|
||||||
|
setSelectedProject(project);
|
||||||
|
}
|
||||||
|
if (shouldUpdateSession) {
|
||||||
|
setSelectedSession({ ...claudeSession, __provider: 'claude' });
|
||||||
|
}
|
||||||
|
if (shouldSwitchTab) {
|
||||||
|
setActiveTab('chat');
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const cursorSession = project.cursorSessions?.find((session) => session.id === sessionId);
|
||||||
|
if (cursorSession) {
|
||||||
|
const shouldUpdateProject = selectedProject?.name !== project.name;
|
||||||
|
const shouldUpdateSession =
|
||||||
|
selectedSession?.id !== sessionId || selectedSession.__provider !== 'cursor';
|
||||||
|
|
||||||
|
if (shouldUpdateProject) {
|
||||||
|
setSelectedProject(project);
|
||||||
|
}
|
||||||
|
if (shouldUpdateSession) {
|
||||||
|
setSelectedSession({ ...cursorSession, __provider: 'cursor' });
|
||||||
|
}
|
||||||
|
if (shouldSwitchTab) {
|
||||||
|
setActiveTab('chat');
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const codexSession = project.codexSessions?.find((session) => session.id === sessionId);
|
||||||
|
if (codexSession) {
|
||||||
|
const shouldUpdateProject = selectedProject?.name !== project.name;
|
||||||
|
const shouldUpdateSession =
|
||||||
|
selectedSession?.id !== sessionId || selectedSession.__provider !== 'codex';
|
||||||
|
|
||||||
|
if (shouldUpdateProject) {
|
||||||
|
setSelectedProject(project);
|
||||||
|
}
|
||||||
|
if (shouldUpdateSession) {
|
||||||
|
setSelectedSession({ ...codexSession, __provider: 'codex' });
|
||||||
|
}
|
||||||
|
if (shouldSwitchTab) {
|
||||||
|
setActiveTab('chat');
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [sessionId, projects, selectedProject?.name, selectedSession?.id, selectedSession?.__provider]);
|
||||||
|
|
||||||
|
const handleProjectSelect = useCallback(
|
||||||
|
(project: Project) => {
|
||||||
|
setSelectedProject(project);
|
||||||
|
setSelectedSession(null);
|
||||||
|
navigate('/');
|
||||||
|
|
||||||
|
if (isMobile) {
|
||||||
|
setSidebarOpen(false);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[isMobile, navigate],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleSessionSelect = useCallback(
|
||||||
|
(session: ProjectSession) => {
|
||||||
|
setSelectedSession(session);
|
||||||
|
|
||||||
|
if (activeTab !== 'git' && activeTab !== 'preview') {
|
||||||
|
setActiveTab('chat');
|
||||||
|
}
|
||||||
|
|
||||||
|
const provider = localStorage.getItem('selected-provider') || 'claude';
|
||||||
|
if (provider === 'cursor') {
|
||||||
|
sessionStorage.setItem('cursorSessionId', session.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isMobile) {
|
||||||
|
const sessionProjectName = session.__projectName;
|
||||||
|
const currentProjectName = selectedProject?.name;
|
||||||
|
|
||||||
|
if (sessionProjectName !== currentProjectName) {
|
||||||
|
setSidebarOpen(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
navigate(`/session/${session.id}`);
|
||||||
|
},
|
||||||
|
[activeTab, isMobile, navigate, selectedProject?.name],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleNewSession = useCallback(
|
||||||
|
(project: Project) => {
|
||||||
|
setSelectedProject(project);
|
||||||
|
setSelectedSession(null);
|
||||||
|
setActiveTab('chat');
|
||||||
|
navigate('/');
|
||||||
|
|
||||||
|
if (isMobile) {
|
||||||
|
setSidebarOpen(false);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[isMobile, navigate],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleSessionDelete = useCallback(
|
||||||
|
(sessionIdToDelete: string) => {
|
||||||
|
if (selectedSession?.id === sessionIdToDelete) {
|
||||||
|
setSelectedSession(null);
|
||||||
|
navigate('/');
|
||||||
|
}
|
||||||
|
|
||||||
|
setProjects((prevProjects) =>
|
||||||
|
prevProjects.map((project) => ({
|
||||||
|
...project,
|
||||||
|
sessions: project.sessions?.filter((session) => session.id !== sessionIdToDelete) ?? [],
|
||||||
|
sessionMeta: {
|
||||||
|
...project.sessionMeta,
|
||||||
|
total: Math.max(0, (project.sessionMeta?.total as number | undefined ?? 0) - 1),
|
||||||
|
},
|
||||||
|
})),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
[navigate, selectedSession?.id],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleSidebarRefresh = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
const response = await api.projects();
|
||||||
|
const freshProjects = (await response.json()) as Project[];
|
||||||
|
|
||||||
|
setProjects((prevProjects) =>
|
||||||
|
projectsHaveChanges(prevProjects, freshProjects, false) ? freshProjects : prevProjects,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!selectedProject) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const refreshedProject = freshProjects.find((project) => project.name === selectedProject.name);
|
||||||
|
if (!refreshedProject) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (serialize(refreshedProject) !== serialize(selectedProject)) {
|
||||||
|
setSelectedProject(refreshedProject);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!selectedSession) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const refreshedSession = refreshedProject.sessions?.find(
|
||||||
|
(session) => session.id === selectedSession.id,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (refreshedSession && serialize(refreshedSession) !== serialize(selectedSession)) {
|
||||||
|
setSelectedSession(refreshedSession);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error refreshing sidebar:', error);
|
||||||
|
}
|
||||||
|
}, [selectedProject, selectedSession]);
|
||||||
|
|
||||||
|
const handleProjectDelete = useCallback(
|
||||||
|
(projectName: string) => {
|
||||||
|
if (selectedProject?.name === projectName) {
|
||||||
|
setSelectedProject(null);
|
||||||
|
setSelectedSession(null);
|
||||||
|
navigate('/');
|
||||||
|
}
|
||||||
|
|
||||||
|
setProjects((prevProjects) => prevProjects.filter((project) => project.name !== projectName));
|
||||||
|
},
|
||||||
|
[navigate, selectedProject?.name],
|
||||||
|
);
|
||||||
|
|
||||||
|
const sidebarSharedProps = useMemo(
|
||||||
|
() => ({
|
||||||
|
projects,
|
||||||
|
selectedProject,
|
||||||
|
selectedSession,
|
||||||
|
onProjectSelect: handleProjectSelect,
|
||||||
|
onSessionSelect: handleSessionSelect,
|
||||||
|
onNewSession: handleNewSession,
|
||||||
|
onSessionDelete: handleSessionDelete,
|
||||||
|
onProjectDelete: handleProjectDelete,
|
||||||
|
isLoading: isLoadingProjects,
|
||||||
|
loadingProgress,
|
||||||
|
onRefresh: handleSidebarRefresh,
|
||||||
|
onShowSettings: () => setShowSettings(true),
|
||||||
|
isMobile,
|
||||||
|
}),
|
||||||
|
[
|
||||||
|
handleNewSession,
|
||||||
|
handleProjectDelete,
|
||||||
|
handleProjectSelect,
|
||||||
|
handleSessionDelete,
|
||||||
|
handleSessionSelect,
|
||||||
|
handleSidebarRefresh,
|
||||||
|
isLoadingProjects,
|
||||||
|
isMobile,
|
||||||
|
loadingProgress,
|
||||||
|
projects,
|
||||||
|
selectedProject,
|
||||||
|
selectedSession,
|
||||||
|
],
|
||||||
|
);
|
||||||
|
|
||||||
|
return {
|
||||||
|
projects,
|
||||||
|
selectedProject,
|
||||||
|
selectedSession,
|
||||||
|
activeTab,
|
||||||
|
sidebarOpen,
|
||||||
|
isLoadingProjects,
|
||||||
|
loadingProgress,
|
||||||
|
isInputFocused,
|
||||||
|
showSettings,
|
||||||
|
settingsInitialTab,
|
||||||
|
externalMessageUpdate,
|
||||||
|
setActiveTab,
|
||||||
|
setSidebarOpen,
|
||||||
|
setIsInputFocused,
|
||||||
|
setShowSettings,
|
||||||
|
openSettings,
|
||||||
|
fetchProjects,
|
||||||
|
sidebarSharedProps,
|
||||||
|
handleProjectSelect,
|
||||||
|
handleSessionSelect,
|
||||||
|
handleNewSession,
|
||||||
|
handleSessionDelete,
|
||||||
|
handleProjectDelete,
|
||||||
|
handleSidebarRefresh,
|
||||||
|
};
|
||||||
|
}
|
||||||
73
src/hooks/useSessionProtection.ts
Normal file
73
src/hooks/useSessionProtection.ts
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
import { useCallback, useState } from 'react';
|
||||||
|
|
||||||
|
export function useSessionProtection() {
|
||||||
|
const [activeSessions, setActiveSessions] = useState<Set<string>>(new Set());
|
||||||
|
const [processingSessions, setProcessingSessions] = useState<Set<string>>(new Set());
|
||||||
|
|
||||||
|
const markSessionAsActive = useCallback((sessionId?: string | null) => {
|
||||||
|
if (!sessionId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setActiveSessions((prev) => new Set([...prev, sessionId]));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const markSessionAsInactive = useCallback((sessionId?: string | null) => {
|
||||||
|
if (!sessionId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setActiveSessions((prev) => {
|
||||||
|
const next = new Set(prev);
|
||||||
|
next.delete(sessionId);
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const markSessionAsProcessing = useCallback((sessionId?: string | null) => {
|
||||||
|
if (!sessionId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setProcessingSessions((prev) => new Set([...prev, sessionId]));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const markSessionAsNotProcessing = useCallback((sessionId?: string | null) => {
|
||||||
|
if (!sessionId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setProcessingSessions((prev) => {
|
||||||
|
const next = new Set(prev);
|
||||||
|
next.delete(sessionId);
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const replaceTemporarySession = useCallback((realSessionId?: string | null) => {
|
||||||
|
if (!realSessionId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setActiveSessions((prev) => {
|
||||||
|
const next = new Set<string>();
|
||||||
|
for (const sessionId of prev) {
|
||||||
|
if (!sessionId.startsWith('new-session-')) {
|
||||||
|
next.add(sessionId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
next.add(realSessionId);
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return {
|
||||||
|
activeSessions,
|
||||||
|
processingSessions,
|
||||||
|
markSessionAsActive,
|
||||||
|
markSessionAsInactive,
|
||||||
|
markSessionAsProcessing,
|
||||||
|
markSessionAsNotProcessing,
|
||||||
|
replaceTemporarySession,
|
||||||
|
};
|
||||||
|
}
|
||||||
448
src/hooks/useSidebarController.ts
Normal file
448
src/hooks/useSidebarController.ts
Normal file
@@ -0,0 +1,448 @@
|
|||||||
|
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||||
|
import type React from 'react';
|
||||||
|
import type { TFunction } from 'i18next';
|
||||||
|
import { api } from '../utils/api';
|
||||||
|
import type { Project, ProjectSession } from '../types/app';
|
||||||
|
import type {
|
||||||
|
AdditionalSessionsByProject,
|
||||||
|
DeleteProjectConfirmation,
|
||||||
|
LoadingSessionsByProject,
|
||||||
|
ProjectSortOrder,
|
||||||
|
SessionDeleteConfirmation,
|
||||||
|
SessionWithProvider,
|
||||||
|
} from '../components/sidebar/types';
|
||||||
|
import {
|
||||||
|
filterProjects,
|
||||||
|
getAllSessions,
|
||||||
|
loadStarredProjects,
|
||||||
|
persistStarredProjects,
|
||||||
|
readProjectSortOrder,
|
||||||
|
sortProjects,
|
||||||
|
} from '../components/sidebar/utils';
|
||||||
|
|
||||||
|
type UseSidebarControllerArgs = {
|
||||||
|
projects: Project[];
|
||||||
|
selectedProject: Project | null;
|
||||||
|
selectedSession: ProjectSession | null;
|
||||||
|
isLoading: boolean;
|
||||||
|
isMobile: boolean;
|
||||||
|
t: TFunction;
|
||||||
|
onRefresh: () => Promise<void> | void;
|
||||||
|
onProjectSelect: (project: Project) => void;
|
||||||
|
onSessionSelect: (session: ProjectSession) => void;
|
||||||
|
onSessionDelete?: (sessionId: string) => void;
|
||||||
|
onProjectDelete?: (projectName: string) => void;
|
||||||
|
setCurrentProject: (project: Project) => void;
|
||||||
|
setSidebarVisible: (visible: boolean) => void;
|
||||||
|
sidebarVisible: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function useSidebarController({
|
||||||
|
projects,
|
||||||
|
selectedProject,
|
||||||
|
selectedSession,
|
||||||
|
isLoading,
|
||||||
|
isMobile,
|
||||||
|
t,
|
||||||
|
onRefresh,
|
||||||
|
onProjectSelect,
|
||||||
|
onSessionSelect,
|
||||||
|
onSessionDelete,
|
||||||
|
onProjectDelete,
|
||||||
|
setCurrentProject,
|
||||||
|
setSidebarVisible,
|
||||||
|
sidebarVisible,
|
||||||
|
}: UseSidebarControllerArgs) {
|
||||||
|
const [expandedProjects, setExpandedProjects] = useState<Set<string>>(new Set());
|
||||||
|
const [editingProject, setEditingProject] = useState<string | null>(null);
|
||||||
|
const [showNewProject, setShowNewProject] = useState(false);
|
||||||
|
const [editingName, setEditingName] = useState('');
|
||||||
|
const [loadingSessions, setLoadingSessions] = useState<LoadingSessionsByProject>({});
|
||||||
|
const [additionalSessions, setAdditionalSessions] = useState<AdditionalSessionsByProject>({});
|
||||||
|
const [initialSessionsLoaded, setInitialSessionsLoaded] = useState<Set<string>>(new Set());
|
||||||
|
const [currentTime, setCurrentTime] = useState(new Date());
|
||||||
|
const [projectSortOrder, setProjectSortOrder] = useState<ProjectSortOrder>('name');
|
||||||
|
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||||
|
const [editingSession, setEditingSession] = useState<string | null>(null);
|
||||||
|
const [editingSessionName, setEditingSessionName] = useState('');
|
||||||
|
const [searchFilter, setSearchFilter] = useState('');
|
||||||
|
const [deletingProjects, setDeletingProjects] = useState<Set<string>>(new Set());
|
||||||
|
const [deleteConfirmation, setDeleteConfirmation] = useState<DeleteProjectConfirmation | null>(null);
|
||||||
|
const [sessionDeleteConfirmation, setSessionDeleteConfirmation] = useState<SessionDeleteConfirmation | null>(null);
|
||||||
|
const [showVersionModal, setShowVersionModal] = useState(false);
|
||||||
|
const [starredProjects, setStarredProjects] = useState<Set<string>>(() => loadStarredProjects());
|
||||||
|
|
||||||
|
const isSidebarCollapsed = !isMobile && !sidebarVisible;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const timer = setInterval(() => {
|
||||||
|
setCurrentTime(new Date());
|
||||||
|
}, 60000);
|
||||||
|
|
||||||
|
return () => clearInterval(timer);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setAdditionalSessions({});
|
||||||
|
setInitialSessionsLoaded(new Set());
|
||||||
|
}, [projects]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedSession && selectedProject) {
|
||||||
|
setExpandedProjects((prev) => {
|
||||||
|
if (prev.has(selectedProject.name)) {
|
||||||
|
return prev;
|
||||||
|
}
|
||||||
|
const next = new Set(prev);
|
||||||
|
next.add(selectedProject.name);
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [selectedSession, selectedProject]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (projects.length > 0 && !isLoading) {
|
||||||
|
const loadedProjects = new Set<string>();
|
||||||
|
projects.forEach((project) => {
|
||||||
|
if (project.sessions && project.sessions.length >= 0) {
|
||||||
|
loadedProjects.add(project.name);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
setInitialSessionsLoaded(loadedProjects);
|
||||||
|
}
|
||||||
|
}, [projects, isLoading]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const loadSortOrder = () => {
|
||||||
|
setProjectSortOrder(readProjectSortOrder());
|
||||||
|
};
|
||||||
|
|
||||||
|
loadSortOrder();
|
||||||
|
|
||||||
|
const handleStorageChange = (event: StorageEvent) => {
|
||||||
|
if (event.key === 'claude-settings') {
|
||||||
|
loadSortOrder();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('storage', handleStorageChange);
|
||||||
|
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
if (document.hasFocus()) {
|
||||||
|
loadSortOrder();
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('storage', handleStorageChange);
|
||||||
|
clearInterval(interval);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleTouchClick = useCallback(
|
||||||
|
(callback: () => void) =>
|
||||||
|
(event: React.TouchEvent<HTMLElement>) => {
|
||||||
|
const target = event.target as HTMLElement;
|
||||||
|
if (target.closest('.overflow-y-auto') || target.closest('[data-scroll-container]')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
callback();
|
||||||
|
},
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
|
||||||
|
const toggleProject = useCallback((projectName: string) => {
|
||||||
|
setExpandedProjects((prev) => {
|
||||||
|
const next = new Set<string>();
|
||||||
|
if (!prev.has(projectName)) {
|
||||||
|
next.add(projectName);
|
||||||
|
}
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleSessionClick = useCallback(
|
||||||
|
(session: SessionWithProvider, projectName: string) => {
|
||||||
|
onSessionSelect({ ...session, __projectName: projectName });
|
||||||
|
},
|
||||||
|
[onSessionSelect],
|
||||||
|
);
|
||||||
|
|
||||||
|
const toggleStarProject = useCallback((projectName: string) => {
|
||||||
|
setStarredProjects((prev) => {
|
||||||
|
const next = new Set(prev);
|
||||||
|
if (next.has(projectName)) {
|
||||||
|
next.delete(projectName);
|
||||||
|
} else {
|
||||||
|
next.add(projectName);
|
||||||
|
}
|
||||||
|
|
||||||
|
persistStarredProjects(next);
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const isProjectStarred = useCallback(
|
||||||
|
(projectName: string) => starredProjects.has(projectName),
|
||||||
|
[starredProjects],
|
||||||
|
);
|
||||||
|
|
||||||
|
const getProjectSessions = useCallback(
|
||||||
|
(project: Project) => getAllSessions(project, additionalSessions),
|
||||||
|
[additionalSessions],
|
||||||
|
);
|
||||||
|
|
||||||
|
const sortedProjects = useMemo(
|
||||||
|
() => sortProjects(projects, projectSortOrder, starredProjects, additionalSessions),
|
||||||
|
[additionalSessions, projectSortOrder, projects, starredProjects],
|
||||||
|
);
|
||||||
|
|
||||||
|
const filteredProjects = useMemo(
|
||||||
|
() => filterProjects(sortedProjects, searchFilter),
|
||||||
|
[searchFilter, sortedProjects],
|
||||||
|
);
|
||||||
|
|
||||||
|
const startEditing = useCallback((project: Project) => {
|
||||||
|
setEditingProject(project.name);
|
||||||
|
setEditingName(project.displayName);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const cancelEditing = useCallback(() => {
|
||||||
|
setEditingProject(null);
|
||||||
|
setEditingName('');
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const saveProjectName = useCallback(
|
||||||
|
async (projectName: string) => {
|
||||||
|
try {
|
||||||
|
const response = await api.renameProject(projectName, editingName);
|
||||||
|
if (response.ok) {
|
||||||
|
if (window.refreshProjects) {
|
||||||
|
await window.refreshProjects();
|
||||||
|
} else {
|
||||||
|
window.location.reload();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.error('Failed to rename project');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error renaming project:', error);
|
||||||
|
} finally {
|
||||||
|
setEditingProject(null);
|
||||||
|
setEditingName('');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[editingName],
|
||||||
|
);
|
||||||
|
|
||||||
|
const showDeleteSessionConfirmation = useCallback(
|
||||||
|
(
|
||||||
|
projectName: string,
|
||||||
|
sessionId: string,
|
||||||
|
sessionTitle: string,
|
||||||
|
provider: SessionDeleteConfirmation['provider'] = 'claude',
|
||||||
|
) => {
|
||||||
|
setSessionDeleteConfirmation({ projectName, sessionId, sessionTitle, provider });
|
||||||
|
},
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
|
||||||
|
const confirmDeleteSession = useCallback(async () => {
|
||||||
|
if (!sessionDeleteConfirmation) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { projectName, sessionId, provider } = sessionDeleteConfirmation;
|
||||||
|
setSessionDeleteConfirmation(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response =
|
||||||
|
provider === 'codex'
|
||||||
|
? await api.deleteCodexSession(sessionId)
|
||||||
|
: await api.deleteSession(projectName, sessionId);
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
onSessionDelete?.(sessionId);
|
||||||
|
} 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'));
|
||||||
|
}
|
||||||
|
}, [onSessionDelete, sessionDeleteConfirmation, t]);
|
||||||
|
|
||||||
|
const requestProjectDelete = useCallback(
|
||||||
|
(project: Project) => {
|
||||||
|
setDeleteConfirmation({
|
||||||
|
project,
|
||||||
|
sessionCount: getProjectSessions(project).length,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
[getProjectSessions],
|
||||||
|
);
|
||||||
|
|
||||||
|
const confirmDeleteProject = useCallback(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) {
|
||||||
|
onProjectDelete?.(project.name);
|
||||||
|
} else {
|
||||||
|
const error = (await response.json()) as { error?: string };
|
||||||
|
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;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [deleteConfirmation, onProjectDelete, t]);
|
||||||
|
|
||||||
|
const loadMoreSessions = useCallback(
|
||||||
|
async (project: Project) => {
|
||||||
|
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) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = (await response.json()) as {
|
||||||
|
sessions?: ProjectSession[];
|
||||||
|
hasMore?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
setAdditionalSessions((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[project.name]: [...(prev[project.name] || []), ...(result.sessions || [])],
|
||||||
|
}));
|
||||||
|
|
||||||
|
if (result.hasMore === false) {
|
||||||
|
project.sessionMeta = { ...project.sessionMeta, hasMore: false };
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading more sessions:', error);
|
||||||
|
} finally {
|
||||||
|
setLoadingSessions((prev) => ({ ...prev, [project.name]: false }));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[additionalSessions, loadingSessions],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleProjectSelect = useCallback(
|
||||||
|
(project: Project) => {
|
||||||
|
onProjectSelect(project);
|
||||||
|
setCurrentProject(project);
|
||||||
|
},
|
||||||
|
[onProjectSelect, setCurrentProject],
|
||||||
|
);
|
||||||
|
|
||||||
|
const refreshProjects = useCallback(async () => {
|
||||||
|
setIsRefreshing(true);
|
||||||
|
try {
|
||||||
|
await onRefresh();
|
||||||
|
} finally {
|
||||||
|
setIsRefreshing(false);
|
||||||
|
}
|
||||||
|
}, [onRefresh]);
|
||||||
|
|
||||||
|
const updateSessionSummary = useCallback(
|
||||||
|
async (_projectName: string, _sessionId: string, _summary: string) => {
|
||||||
|
// Session rename endpoint is not currently exposed on the API.
|
||||||
|
setEditingSession(null);
|
||||||
|
setEditingSessionName('');
|
||||||
|
},
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
|
||||||
|
const collapseSidebar = useCallback(() => {
|
||||||
|
setSidebarVisible(false);
|
||||||
|
}, [setSidebarVisible]);
|
||||||
|
|
||||||
|
const expandSidebar = useCallback(() => {
|
||||||
|
setSidebarVisible(true);
|
||||||
|
}, [setSidebarVisible]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
isSidebarCollapsed,
|
||||||
|
expandedProjects,
|
||||||
|
editingProject,
|
||||||
|
showNewProject,
|
||||||
|
editingName,
|
||||||
|
loadingSessions,
|
||||||
|
additionalSessions,
|
||||||
|
initialSessionsLoaded,
|
||||||
|
currentTime,
|
||||||
|
projectSortOrder,
|
||||||
|
isRefreshing,
|
||||||
|
editingSession,
|
||||||
|
editingSessionName,
|
||||||
|
searchFilter,
|
||||||
|
deletingProjects,
|
||||||
|
deleteConfirmation,
|
||||||
|
sessionDeleteConfirmation,
|
||||||
|
showVersionModal,
|
||||||
|
starredProjects,
|
||||||
|
filteredProjects,
|
||||||
|
handleTouchClick,
|
||||||
|
toggleProject,
|
||||||
|
handleSessionClick,
|
||||||
|
toggleStarProject,
|
||||||
|
isProjectStarred,
|
||||||
|
getProjectSessions,
|
||||||
|
startEditing,
|
||||||
|
cancelEditing,
|
||||||
|
saveProjectName,
|
||||||
|
showDeleteSessionConfirmation,
|
||||||
|
confirmDeleteSession,
|
||||||
|
requestProjectDelete,
|
||||||
|
confirmDeleteProject,
|
||||||
|
loadMoreSessions,
|
||||||
|
handleProjectSelect,
|
||||||
|
refreshProjects,
|
||||||
|
updateSessionSummary,
|
||||||
|
collapseSidebar,
|
||||||
|
expandSidebar,
|
||||||
|
setShowNewProject,
|
||||||
|
setEditingName,
|
||||||
|
setEditingSession,
|
||||||
|
setEditingSessionName,
|
||||||
|
setSearchFilter,
|
||||||
|
setDeleteConfirmation,
|
||||||
|
setSessionDeleteConfirmation,
|
||||||
|
setShowVersionModal,
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import ReactDOM from 'react-dom/client'
|
import ReactDOM from 'react-dom/client'
|
||||||
import App from './App.jsx'
|
import App from './App.tsx'
|
||||||
import './index.css'
|
import './index.css'
|
||||||
import 'katex/dist/katex.min.css'
|
import 'katex/dist/katex.min.css'
|
||||||
|
|
||||||
|
|||||||
69
src/types/app.ts
Normal file
69
src/types/app.ts
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
export type SessionProvider = 'claude' | 'cursor' | 'codex';
|
||||||
|
|
||||||
|
export type AppTab = 'chat' | 'files' | 'shell' | 'git' | 'tasks' | 'preview';
|
||||||
|
|
||||||
|
export interface ProjectSession {
|
||||||
|
id: string;
|
||||||
|
title?: string;
|
||||||
|
summary?: string;
|
||||||
|
name?: string;
|
||||||
|
createdAt?: string;
|
||||||
|
created_at?: string;
|
||||||
|
updated_at?: string;
|
||||||
|
lastActivity?: string;
|
||||||
|
messageCount?: number;
|
||||||
|
__provider?: SessionProvider;
|
||||||
|
__projectName?: string;
|
||||||
|
[key: string]: unknown;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProjectSessionMeta {
|
||||||
|
total?: number;
|
||||||
|
hasMore?: boolean;
|
||||||
|
[key: string]: unknown;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProjectTaskmasterInfo {
|
||||||
|
hasTaskmaster?: boolean;
|
||||||
|
status?: string;
|
||||||
|
metadata?: Record<string, unknown>;
|
||||||
|
[key: string]: unknown;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Project {
|
||||||
|
name: string;
|
||||||
|
displayName: string;
|
||||||
|
fullPath: string;
|
||||||
|
path?: string;
|
||||||
|
sessions?: ProjectSession[];
|
||||||
|
cursorSessions?: ProjectSession[];
|
||||||
|
codexSessions?: ProjectSession[];
|
||||||
|
sessionMeta?: ProjectSessionMeta;
|
||||||
|
taskmaster?: ProjectTaskmasterInfo;
|
||||||
|
[key: string]: unknown;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LoadingProgress {
|
||||||
|
type?: 'loading_progress';
|
||||||
|
phase?: string;
|
||||||
|
current: number;
|
||||||
|
total: number;
|
||||||
|
currentProject?: string;
|
||||||
|
[key: string]: unknown;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProjectsUpdatedMessage {
|
||||||
|
type: 'projects_updated';
|
||||||
|
projects: Project[];
|
||||||
|
changedFile?: string;
|
||||||
|
[key: string]: unknown;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LoadingProgressMessage extends LoadingProgress {
|
||||||
|
type: 'loading_progress';
|
||||||
|
}
|
||||||
|
|
||||||
|
export type AppSocketMessage =
|
||||||
|
| LoadingProgressMessage
|
||||||
|
| ProjectsUpdatedMessage
|
||||||
|
| { type?: string; [key: string]: unknown };
|
||||||
9
src/types/global.d.ts
vendored
Normal file
9
src/types/global.d.ts
vendored
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
export {};
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface Window {
|
||||||
|
__ROUTER_BASENAME__?: string;
|
||||||
|
refreshProjects?: () => void | Promise<void>;
|
||||||
|
openSettings?: (tab?: string) => void;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user