mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-03-11 08:57:38 +00:00
Refactor/shared and tasks components (#473)
* refactor: remove unused TasksSettings component
* refactor: migrate TodoList component to a new file with improved structure and normalization logic
* refactor: Move Tooltip and DarkModeToggle to shared/ui
* refactor: Move Tooltip and DarkModeToggle to shared/view/ui
* refactor: move GeminiLogo to llm-logo-provider and update imports
* refactor: remove unused GeminiStatus component
* refactor: move components in src/components/ui to src/shared/view/ui
* refactor: move ErrorBoundary component to main-content/view and update imports
* refactor: move VersionUpgradeModal to its own module
* refactor(wizard): rebuild project creation flow as modular TypeScript components
Replace the monolithic `ProjectCreationWizard.jsx` with a feature-based TS
implementation under `src/components/project-creation-wizard`, while preserving
existing behavior and improving readability, maintainability, and state isolation.
Why:
- The previous wizard mixed API logic, flow state, folder browsing, and UI in one file.
- Refactoring and testing were difficult due to tightly coupled concerns.
- We needed stronger type safety and localized component state.
What changed:
- Deleted:
- `src/components/ProjectCreationWizard.jsx`
- Added new modular structure:
- `src/components/project-creation-wizard/index.ts`
- `src/components/project-creation-wizard/ProjectCreationWizard.tsx`
- `src/components/project-creation-wizard/types.ts`
- `src/components/project-creation-wizard/data/workspaceApi.ts`
- `src/components/project-creation-wizard/hooks/useGithubTokens.ts`
- `src/components/project-creation-wizard/utils/pathUtils.ts`
- `src/components/project-creation-wizard/components/*`
- `WizardProgress`, `WizardFooter`, `ErrorBanner`
- `StepTypeSelection`, `StepConfiguration`, `StepReview`
- `WorkspacePathField`, `GithubAuthenticationCard`, `FolderBrowserModal`
- Updated import usage:
- `src/components/sidebar/view/subcomponents/SidebarModals.tsx`
now imports from `../../../project-creation-wizard`.
Implementation details:
- Migrated wizard logic to TypeScript using `type` aliases only.
- Kept component prop types colocated in each component file.
- Split responsibilities by feature:
- container/orchestration in `ProjectCreationWizard.tsx`
- API/SSE and request parsing in `data/workspaceApi.ts`
- GitHub token loading/caching behavior in `useGithubTokens`
- path/URL helpers in `utils/pathUtils.ts`
- Localized UI-only state to child components:
- folder browser modal state (current path, hidden folders, create-folder input)
- path suggestion dropdown state with debounced lookup
- Preserved existing UX flows:
- step navigation and validation
- existing/new workspace modes
- optional GitHub clone + auth modes
- clone progress via SSE
- folder browsing + folder creation
- Added focused comments for non-obvious logic (debounce, SSE auth constraint, path edge cases).
* refactor(quick-settings): migrate panel to typed feature-based modules
Refactor QuickSettingsPanel from a single JSX component into a modular TypeScript feature structure while preserving behavior and translations.
Highlights:
- Replace legacy src/components/QuickSettingsPanel.jsx with a typed entrypoint (src/components/QuickSettingsPanel.tsx).
- Introduce src/components/quick-settings-panel/ with clear separation of concerns:
- view/: panel shell, header, handle, section wrappers, toggle rows, and content sections.
- hooks/: drag interactions and whisper mode persistence.
- constants.ts and types.ts for shared config and strict local typing.
- Move drag logic into useQuickSettingsDrag with explicit touch/mouse handling, drag threshold detection, click suppression after drag, position clamping, and localStorage persistence.
- Keep user-visible behavior intact:
- same open/close panel interactions.
- same mobile/desktop drag behavior and persisted handle position.
- same quick preference toggles and wiring to useUiPreferences.
- same hidden whisper section behavior and localStorage/event updates.
- Improve readability and maintainability by extracting repetitive setting rows and section scaffolding into reusable components.
- Add focused comments around non-obvious behavior (drag click suppression, touch scroll lock, hidden whisper section intent).
- Keep files small and reviewable (all new/changed files are under 300 lines).
Validation:
- npm run typecheck
- npm run build
* refactor(quick-settings-panel): restructure QuickSettingsPanel import and create index file
* refactor(shared): move shared ui components to share/view/ui without subfolders
* refactor(LanguageSelector): move LanguageSelector to shared UI components
* refactor(prd-editor): modularize PRD editor with typed feature modules
Break the legacy PRDEditor.jsx monolith into a feature-based TypeScript architecture under src/components/prd-editor while keeping behavior parity and readability.
Key changes:
- Replace PRDEditor.jsx with a typed orchestrator component and a compatibility export bridge at src/components/PRDEditor.tsx.
- Split responsibilities into dedicated hooks: document loading/init, existing PRD registry fetching, save workflow with overwrite detection, and keyboard shortcuts.
- Split UI into focused view components: header, editor/preview body, footer stats, loading state, generate-tasks modal, and overwrite-confirm modal.
- Move filename concerns into utility helpers (sanitize, extension handling, default naming) and centralize template/constants.
- Keep component-local state close to the UI that owns it (workspace controls/modal toggles), while shared workflow state remains in the feature container.
- Reuse the existing MarkdownPreview component for safer markdown rendering instead of ad-hoc HTML conversion.
- Update TaskMasterPanel integration to consume typed PRDEditor directly (remove any-cast) and pass isExisting metadata for correct overwrite behavior.
- Keep all new/changed files below 300 lines and add targeted comments where behavior needs clarification.
Validation:
- npm run typecheck
- npm run build
* refactor(TaskMasterPanel): update PRDEditor import path to match new structure
* refactor(TaskMaster): Remove unused TaskMasterSetupWizard and TaskMasterStatus components
* refactor(TaskDetail): remove unused TaskIndicator import
* refactor(task-master): migrate tasks to a typed feature module
- introduce a new feature-oriented TaskMaster domain under src/components/task-master
- add typed TaskMaster context/provider with explicit project, task, MCP, and loading state handling
- split task UI into focused components (panel, board, toolbar, content, card, detail modal, setup/help modals, banner)
- move task board filtering/sorting/kanban derivation into dedicated hooks and utilities
- relocate CreateTaskModal into the feature module and keep task views modular/readable
- remove legacy monolithic TaskList/TaskDetail/TaskCard files and route main task panel to the new feature panel
- replace contexts/TaskMasterContext.jsx with a typed contexts/TaskMasterContext.ts re-export to the feature context
- update MainContent project sync logic to compare by project name to avoid state churn
- validation: npm run typecheck, npm run build
* refactor(MobileNav): remove unused React import and TaskMasterContext
* refactor(auth): migrate login and setup flows to typed feature module
- Introduce a new feature-based auth module under src/components/auth with clear separation of concerns:\n - context/AuthContext.tsx for session lifecycle, onboarding status checks, token persistence, and auth actions\n - view/* components for loading, route guarding, form layout, input fields, and error display\n - shared auth constants, utility helpers, and type aliases (no interfaces)\n- Convert login and setup UIs to TypeScript and keep form state local to each component for readability and component-level ownership\n- Add explicit API payload typing and safe JSON parsing helpers to improve resilience when backend responses are malformed or incomplete\n- Centralize error fallback handling for auth requests to reduce repeated logic
- Replace legacy auth entrypoints with the new feature module in app wiring:\n - App now imports AuthProvider and ProtectedRoute from src/components/auth\n - WebSocketContext, TaskMasterContext, and Onboarding now consume useAuth from the new typed auth context\n- Remove duplicated legacy auth screens (LoginForm.jsx, SetupForm.jsx, ProtectedRoute.jsx)\n- Keep backward compatibility by turning src/contexts/AuthContext.jsx into a thin re-export of the new provider/hook
Result: auth code now follows a feature/domain structure, is fully typed, easier to navigate, and cleaner to extend without touching unrelated UI areas.
* refactor(AppContent): update MobileNav import path and add MobileNav component
* refactor(DiffViewer): rename different diff viewers and place them in different components
* refactor(components): reorganize onboarding/provider auth/sidebar indicator into domain features
- Move onboarding out of root-level components into a dedicated feature module:
- add src/components/onboarding/view/Onboarding.tsx
- split onboarding UI into focused subcomponents:
- OnboardingStepProgress
- GitConfigurationStep
- AgentConnectionsStep
- AgentConnectionCard
- add onboarding-local types and utils for provider status and validation helpers
- Move multi-provider login modal into a dedicated provider-auth feature:
- add src/components/provider-auth/view/ProviderLoginModal.tsx
- add src/components/provider-auth/types.ts
- keep provider-specific command/title behavior and Gemini setup guidance
- preserve compatibility for both onboarding flow and settings login flow
- Move TaskIndicator into the sidebar domain:
- add src/components/sidebar/view/subcomponents/TaskIndicator.tsx
- update SidebarProjectItem to consume local sidebar TaskIndicator
- Update integration points to the new structure:
- ProtectedRoute now imports onboarding from onboarding feature
- Settings now imports ProviderLoginModal directly (remove legacy cast wrapper)
- git panel consumers now import shared GitDiffViewer by explicit name
- Rename git shared diff view to clearer domain naming:
- replace shared DiffViewer with shared GitDiffViewer
- update FileChangeItem and CommitHistoryItem imports accordingly
- Remove superseded root-level legacy components:
- delete src/components/LoginModal.jsx
- delete src/components/Onboarding.jsx
- delete src/components/TaskIndicator.jsx
- delete old src/components/git-panel/view/shared/DiffViewer.tsx
- Result:
- clearer feature boundaries (auth vs onboarding vs provider-auth vs sidebar)
- easier navigation and ownership by domain
- preserved runtime behavior with improved readability and modularity
* refactor(MainContent): remove TaskMasterPanel import and relocate to task-master component
* fix: update import paths for Input component in FileTree and FileTreeNode
* refactor(FileTree): make file tree context menu a typescript component and move it inside the file tree view
* refactor(FileTree): remove unused ScrollArea import
* feat: setup eslint with typescript and react rules, add unused imports plugin
* fix: remove unused imports, functions, and types after discovering using `npm run lint`
* feat: setup eslint-plugin-react, react-refresh, import-x, and tailwindcss plugins with recommended rules and configurations
* chore: reformat files after running `npm run lint:fix`
* chore: add omments about eslint config plugin uses
* feat: add husky and lint-staged for pre-commit linting
* feat: setup commitlint with conventional config
* fix: i18n translations
---------
Co-authored-by: Haileyesus <something@gmail.com>
Co-authored-by: viper151 <simosmik@gmail.com>
This commit is contained in:
Haileyesus
@@ -6,12 +6,12 @@ import { useUiPreferences } from '../../../hooks/useUiPreferences';
|
||||
import { useSidebarController } from '../hooks/useSidebarController';
|
||||
import { useTaskMaster } from '../../../contexts/TaskMasterContext';
|
||||
import { useTasksSettings } from '../../../contexts/TasksSettingsContext';
|
||||
import type { Project, SessionProvider } from '../../../types/app';
|
||||
import type { MCPServerStatus, SidebarProps } from '../types/types';
|
||||
import SidebarCollapsed from './subcomponents/SidebarCollapsed';
|
||||
import SidebarContent from './subcomponents/SidebarContent';
|
||||
import SidebarModals from './subcomponents/SidebarModals';
|
||||
import type { Project, SessionProvider } from '../../../types/app';
|
||||
import type { SidebarProjectListProps } from './subcomponents/SidebarProjectList';
|
||||
import type { MCPServerStatus, SidebarProps } from '../types/types';
|
||||
|
||||
type TaskMasterSidebarContext = {
|
||||
setCurrentProject: (project: Project) => void;
|
||||
@@ -65,7 +65,6 @@ function Sidebar({
|
||||
sessionDeleteConfirmation,
|
||||
showVersionModal,
|
||||
filteredProjects,
|
||||
handleTouchClick,
|
||||
toggleProject,
|
||||
handleSessionClick,
|
||||
toggleStarProject,
|
||||
@@ -175,7 +174,6 @@ function Sidebar({
|
||||
onSaveEditingSession: (projectName: string, sessionId: string, summary: string, provider: SessionProvider) => {
|
||||
void updateSessionSummary(projectName, sessionId, summary, provider);
|
||||
},
|
||||
touchHandlerFactory: handleTouchClick,
|
||||
t,
|
||||
};
|
||||
|
||||
|
||||
@@ -1,224 +0,0 @@
|
||||
import { useCallback, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { authenticatedFetch } from "../../../../utils/api";
|
||||
import { ReleaseInfo } from "../../../../types/sharedTypes";
|
||||
import { copyTextToClipboard } from "../../../../utils/clipboard";
|
||||
import type { InstallMode } from "../../../../hooks/useVersionCheck";
|
||||
|
||||
interface VersionUpgradeModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
releaseInfo: ReleaseInfo | null;
|
||||
currentVersion: string;
|
||||
latestVersion: string | null;
|
||||
installMode: InstallMode;
|
||||
}
|
||||
|
||||
export default function VersionUpgradeModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
releaseInfo,
|
||||
currentVersion,
|
||||
latestVersion,
|
||||
installMode
|
||||
}: VersionUpgradeModalProps) {
|
||||
const { t } = useTranslation('common');
|
||||
const upgradeCommand = installMode === 'npm'
|
||||
? t('versionUpdate.npmUpgradeCommand')
|
||||
: 'git checkout main && git pull && npm install';
|
||||
const [isUpdating, setIsUpdating] = useState(false);
|
||||
const [updateOutput, setUpdateOutput] = useState('');
|
||||
const [updateError, setUpdateError] = useState('');
|
||||
|
||||
const handleUpdateNow = useCallback(async () => {
|
||||
setIsUpdating(true);
|
||||
setUpdateOutput('Starting update...\n');
|
||||
setUpdateError('');
|
||||
|
||||
try {
|
||||
// Call the backend API to run the update command
|
||||
const response = await authenticatedFetch('/api/system/update', {
|
||||
method: 'POST',
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
setUpdateOutput(prev => prev + data.output + '\n');
|
||||
setUpdateOutput(prev => prev + '\n✅ Update completed successfully!\n');
|
||||
setUpdateOutput(prev => prev + 'Please restart the server to apply changes.\n');
|
||||
} else {
|
||||
setUpdateError(data.error || 'Update failed');
|
||||
setUpdateOutput(prev => prev + '\n❌ Update failed: ' + (data.error || 'Unknown error') + '\n');
|
||||
}
|
||||
} catch (error: any) {
|
||||
setUpdateError(error.message);
|
||||
setUpdateOutput(prev => prev + '\n❌ Update failed: ' + error.message + '\n');
|
||||
} finally {
|
||||
setIsUpdating(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||
{/* Backdrop */}
|
||||
<button
|
||||
className="fixed inset-0 bg-black/50 backdrop-blur-sm"
|
||||
onClick={onClose}
|
||||
aria-label={t('versionUpdate.ariaLabels.closeModal')}
|
||||
/>
|
||||
|
||||
{/* Modal */}
|
||||
<div className="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 w-full max-w-2xl mx-4 p-6 space-y-4 max-h-[90vh] overflow-y-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
|
||||
<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>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">{t('versionUpdate.title')}</h2>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{releaseInfo?.title || t('versionUpdate.newVersionReady')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Version Info */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">{t('versionUpdate.currentVersion')}</span>
|
||||
<span className="text-sm text-gray-900 dark:text-white font-mono">{currentVersion}</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-700">
|
||||
<span className="text-sm font-medium text-blue-700 dark:text-blue-300">{t('versionUpdate.latestVersion')}</span>
|
||||
<span className="text-sm text-blue-900 dark:text-blue-100 font-mono">{latestVersion}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Changelog */}
|
||||
{releaseInfo?.body && (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-sm font-medium text-gray-900 dark:text-white">{t('versionUpdate.whatsNew')}</h3>
|
||||
{releaseInfo?.htmlUrl && (
|
||||
<a
|
||||
href={releaseInfo.htmlUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:underline flex items-center gap-1"
|
||||
>
|
||||
{t('versionUpdate.viewFullRelease')}
|
||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
</svg>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
<div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 border border-gray-200 dark:border-gray-600 max-h-64 overflow-y-auto">
|
||||
<div className="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap prose prose-sm dark:prose-invert max-w-none">
|
||||
{cleanChangelog(releaseInfo.body)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Update Output */}
|
||||
{(updateOutput || updateError) && (
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-sm font-medium text-gray-900 dark:text-white">{t('versionUpdate.updateProgress')}</h3>
|
||||
<div className="bg-gray-900 dark:bg-gray-950 rounded-lg p-4 border border-gray-700 max-h-48 overflow-y-auto">
|
||||
<pre className="text-xs text-green-400 font-mono whitespace-pre-wrap">{updateOutput}</pre>
|
||||
</div>
|
||||
{updateError && (
|
||||
<div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700 dark:border-red-900/40 dark:bg-red-900/20 dark:text-red-200">
|
||||
{updateError}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Upgrade Instructions */}
|
||||
{!isUpdating && !updateOutput && (
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-sm font-medium text-gray-900 dark:text-white">{t('versionUpdate.manualUpgrade')}</h3>
|
||||
<div className="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 border">
|
||||
<code className="text-sm text-gray-800 dark:text-gray-200 font-mono">
|
||||
{upgradeCommand}
|
||||
</code>
|
||||
</div>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400">
|
||||
{t('versionUpdate.manualUpgradeHint')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-2 pt-2">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="flex-1 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md transition-colors"
|
||||
>
|
||||
{updateOutput ? t('versionUpdate.buttons.close') : t('versionUpdate.buttons.later')}
|
||||
</button>
|
||||
{!updateOutput && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => copyTextToClipboard(upgradeCommand)}
|
||||
className="flex-1 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md transition-colors"
|
||||
>
|
||||
{t('versionUpdate.buttons.copyCommand')}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleUpdateNow}
|
||||
disabled={isUpdating}
|
||||
className="flex-1 px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 disabled:cursor-not-allowed rounded-md transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
{isUpdating ? (
|
||||
<>
|
||||
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
{t('versionUpdate.buttons.updating')}
|
||||
</>
|
||||
) : (
|
||||
t('versionUpdate.buttons.updateNow')
|
||||
)}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Clean up changelog by removing GitHub-specific metadata
|
||||
const cleanChangelog = (body: string) => {
|
||||
if (!body) return '';
|
||||
|
||||
return body
|
||||
// Remove full commit hashes (40 character hex strings)
|
||||
.replace(/\b[0-9a-f]{40}\b/gi, '')
|
||||
// Remove short commit hashes (7-10 character hex strings at start of line or after dash/space)
|
||||
.replace(/(?:^|\s|-)([0-9a-f]{7,10})\b/gi, '')
|
||||
// Remove "Full Changelog" links
|
||||
.replace(/\*\*Full Changelog\*\*:.*$/gim, '')
|
||||
// Remove compare links (e.g., https://github.com/.../compare/v1.0.0...v1.0.1)
|
||||
.replace(/https?:\/\/github\.com\/[^\/]+\/[^\/]+\/compare\/[^\s)]+/gi, '')
|
||||
// Clean up multiple consecutive empty lines
|
||||
.replace(/\n\s*\n\s*\n/g, '\n\n')
|
||||
// Trim whitespace
|
||||
.trim();
|
||||
};
|
||||
@@ -27,27 +27,27 @@ export default function SidebarCollapsed({
|
||||
t,
|
||||
}: SidebarCollapsedProps) {
|
||||
return (
|
||||
<div className="h-full flex flex-col items-center py-3 gap-1 bg-background/80 backdrop-blur-sm w-12">
|
||||
<div className="flex h-full w-12 flex-col items-center gap-1 bg-background/80 py-3 backdrop-blur-sm">
|
||||
{/* Expand button with brand logo */}
|
||||
<button
|
||||
onClick={onExpand}
|
||||
className="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-accent/80 transition-colors group"
|
||||
className="group flex h-8 w-8 items-center justify-center rounded-lg transition-colors hover:bg-accent/80"
|
||||
aria-label={t('common:versionUpdate.ariaLabels.showSidebar')}
|
||||
title={t('common:versionUpdate.ariaLabels.showSidebar')}
|
||||
>
|
||||
<PanelLeftOpen className="w-4 h-4 text-muted-foreground group-hover:text-foreground transition-colors" />
|
||||
<PanelLeftOpen className="h-4 w-4 text-muted-foreground transition-colors group-hover:text-foreground" />
|
||||
</button>
|
||||
|
||||
<div className="nav-divider w-6 my-1" />
|
||||
<div className="nav-divider my-1 w-6" />
|
||||
|
||||
{/* Settings */}
|
||||
<button
|
||||
onClick={onShowSettings}
|
||||
className="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-accent/80 transition-colors group"
|
||||
className="group flex h-8 w-8 items-center justify-center rounded-lg transition-colors hover:bg-accent/80"
|
||||
aria-label={t('actions.settings')}
|
||||
title={t('actions.settings')}
|
||||
>
|
||||
<Settings className="w-4 h-4 text-muted-foreground group-hover:text-foreground transition-colors" />
|
||||
<Settings className="h-4 w-4 text-muted-foreground transition-colors group-hover:text-foreground" />
|
||||
</button>
|
||||
|
||||
{/* Discord */}
|
||||
@@ -55,23 +55,23 @@ export default function SidebarCollapsed({
|
||||
href={DISCORD_INVITE_URL}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-accent/80 transition-colors group"
|
||||
className="group flex h-8 w-8 items-center justify-center rounded-lg transition-colors hover:bg-accent/80"
|
||||
aria-label={t('actions.joinCommunity')}
|
||||
title={t('actions.joinCommunity')}
|
||||
>
|
||||
<DiscordIcon className="w-4 h-4 text-muted-foreground group-hover:text-foreground transition-colors" />
|
||||
<DiscordIcon className="h-4 w-4 text-muted-foreground transition-colors group-hover:text-foreground" />
|
||||
</a>
|
||||
|
||||
{/* Update indicator */}
|
||||
{updateAvailable && (
|
||||
<button
|
||||
onClick={onShowVersionModal}
|
||||
className="relative w-8 h-8 rounded-lg flex items-center justify-center hover:bg-accent/80 transition-colors"
|
||||
className="relative flex h-8 w-8 items-center justify-center rounded-lg transition-colors hover:bg-accent/80"
|
||||
aria-label={t('common:versionUpdate.ariaLabels.updateAvailable')}
|
||||
title={t('common:versionUpdate.ariaLabels.updateAvailable')}
|
||||
>
|
||||
<Sparkles className="w-4 h-4 text-blue-500" />
|
||||
<span className="absolute top-1.5 right-1.5 w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse" />
|
||||
<Sparkles className="h-4 w-4 text-blue-500" />
|
||||
<span className="absolute right-1.5 top-1.5 h-1.5 w-1.5 animate-pulse rounded-full bg-blue-500" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { ScrollArea } from '../../../ui/scroll-area';
|
||||
import type { TFunction } from 'i18next';
|
||||
import { ScrollArea } from '../../../../shared/view/ui';
|
||||
import type { Project } from '../../../../types/app';
|
||||
import type { ReleaseInfo } from '../../../../types/sharedTypes';
|
||||
import SidebarFooter from './SidebarFooter';
|
||||
@@ -49,7 +49,7 @@ export default function SidebarContent({
|
||||
}: SidebarContentProps) {
|
||||
return (
|
||||
<div
|
||||
className="h-full flex flex-col bg-background/80 backdrop-blur-sm md:select-none md:w-72"
|
||||
className="flex h-full flex-col bg-background/80 backdrop-blur-sm md:w-72 md:select-none"
|
||||
style={{}}
|
||||
>
|
||||
<SidebarHeader
|
||||
@@ -67,7 +67,7 @@ export default function SidebarContent({
|
||||
t={t}
|
||||
/>
|
||||
|
||||
<ScrollArea className="flex-1 md:px-1.5 md:py-2 overflow-y-auto overscroll-contain">
|
||||
<ScrollArea className="flex-1 overflow-y-auto overscroll-contain md:px-1.5 md:py-2">
|
||||
<SidebarProjectList {...projectListProps} />
|
||||
</ScrollArea>
|
||||
|
||||
|
||||
@@ -36,17 +36,17 @@ export default function SidebarFooter({
|
||||
<>
|
||||
<div className="nav-divider" />
|
||||
{/* Desktop update */}
|
||||
<div className="hidden md:block px-2 py-1.5">
|
||||
<div className="hidden px-2 py-1.5 md:block">
|
||||
<button
|
||||
className="w-full flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-left hover:bg-blue-50/80 dark:hover:bg-blue-900/15 transition-colors group"
|
||||
className="group flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left transition-colors hover:bg-blue-50/80 dark:hover:bg-blue-900/15"
|
||||
onClick={onShowVersionModal}
|
||||
>
|
||||
<div className="relative flex-shrink-0">
|
||||
<ArrowUpCircle className="w-4 h-4 text-blue-500 dark:text-blue-400" />
|
||||
<span className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse" />
|
||||
<ArrowUpCircle className="h-4 w-4 text-blue-500 dark:text-blue-400" />
|
||||
<span className="absolute -right-0.5 -top-0.5 h-1.5 w-1.5 animate-pulse rounded-full bg-blue-500" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<span className="text-sm font-medium text-blue-600 dark:text-blue-300 truncate block">
|
||||
<span className="block truncate text-sm font-medium text-blue-600 dark:text-blue-300">
|
||||
{releaseInfo?.title || `v${latestVersion}`}
|
||||
</span>
|
||||
<span className="text-[10px] text-blue-500/70 dark:text-blue-400/60">
|
||||
@@ -57,17 +57,17 @@ export default function SidebarFooter({
|
||||
</div>
|
||||
|
||||
{/* Mobile update */}
|
||||
<div className="md:hidden px-3 py-2">
|
||||
<div className="px-3 py-2 md:hidden">
|
||||
<button
|
||||
className="w-full h-11 bg-blue-50/80 dark:bg-blue-900/15 border border-blue-200/60 dark:border-blue-700/40 rounded-xl flex items-center gap-3 px-3.5 active:scale-[0.98] transition-all"
|
||||
className="flex h-11 w-full items-center gap-3 rounded-xl border border-blue-200/60 bg-blue-50/80 px-3.5 transition-all active:scale-[0.98] dark:border-blue-700/40 dark:bg-blue-900/15"
|
||||
onClick={onShowVersionModal}
|
||||
>
|
||||
<div className="relative flex-shrink-0">
|
||||
<ArrowUpCircle className="w-4.5 h-4.5 text-blue-500 dark:text-blue-400" />
|
||||
<span className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse" />
|
||||
<span className="absolute -right-0.5 -top-0.5 h-1.5 w-1.5 animate-pulse rounded-full bg-blue-500" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 text-left">
|
||||
<span className="text-sm font-medium text-blue-600 dark:text-blue-300 truncate block">
|
||||
<span className="block truncate text-sm font-medium text-blue-600 dark:text-blue-300">
|
||||
{releaseInfo?.title || `v${latestVersion}`}
|
||||
</span>
|
||||
<span className="text-xs text-blue-500/70 dark:text-blue-400/60">
|
||||
@@ -83,38 +83,38 @@ export default function SidebarFooter({
|
||||
<div className="nav-divider" />
|
||||
|
||||
{/* Desktop Discord */}
|
||||
<div className="hidden md:block px-2 pt-1.5">
|
||||
<div className="hidden px-2 pt-1.5 md:block">
|
||||
<a
|
||||
href={DISCORD_INVITE_URL}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-full flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent/60 transition-colors"
|
||||
className="flex w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground"
|
||||
>
|
||||
<DiscordIcon className="w-3.5 h-3.5" />
|
||||
<DiscordIcon className="h-3.5 w-3.5" />
|
||||
<span className="text-sm">{t('actions.joinCommunity')}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Desktop settings */}
|
||||
<div className="hidden md:block px-2 py-1.5">
|
||||
<div className="hidden px-2 py-1.5 md:block">
|
||||
<button
|
||||
className="w-full flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent/60 transition-colors"
|
||||
className="flex w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground"
|
||||
onClick={onShowSettings}
|
||||
>
|
||||
<Settings className="w-3.5 h-3.5" />
|
||||
<Settings className="h-3.5 w-3.5" />
|
||||
<span className="text-sm">{t('actions.settings')}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Discord */}
|
||||
<div className="md:hidden px-3 pt-3">
|
||||
<div className="px-3 pt-3 md:hidden">
|
||||
<a
|
||||
href={DISCORD_INVITE_URL}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-full h-12 bg-muted/40 hover:bg-muted/60 rounded-xl flex items-center gap-3.5 px-4 active:scale-[0.98] transition-all"
|
||||
className="flex h-12 w-full items-center gap-3.5 rounded-xl bg-muted/40 px-4 transition-all hover:bg-muted/60 active:scale-[0.98]"
|
||||
>
|
||||
<div className="w-8 h-8 rounded-xl bg-background/80 flex items-center justify-center">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-xl bg-background/80">
|
||||
<DiscordIcon className="w-4.5 h-4.5 text-muted-foreground" />
|
||||
</div>
|
||||
<span className="text-base font-medium text-foreground">{t('actions.joinCommunity')}</span>
|
||||
@@ -122,12 +122,12 @@ export default function SidebarFooter({
|
||||
</div>
|
||||
|
||||
{/* Mobile settings */}
|
||||
<div className="md:hidden px-3 pt-2 pb-20">
|
||||
<div className="px-3 pb-20 pt-2 md:hidden">
|
||||
<button
|
||||
className="w-full h-12 bg-muted/40 hover:bg-muted/60 rounded-xl flex items-center gap-3.5 px-4 active:scale-[0.98] transition-all"
|
||||
className="flex h-12 w-full items-center gap-3.5 rounded-xl bg-muted/40 px-4 transition-all hover:bg-muted/60 active:scale-[0.98]"
|
||||
onClick={onShowSettings}
|
||||
>
|
||||
<div className="w-8 h-8 rounded-xl bg-background/80 flex items-center justify-center">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-xl bg-background/80">
|
||||
<Settings className="w-4.5 h-4.5 text-muted-foreground" />
|
||||
</div>
|
||||
<span className="text-base font-medium text-foreground">{t('actions.settings')}</span>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { FolderPlus, Plus, RefreshCw, Search, X, PanelLeftClose } from 'lucide-react';
|
||||
import type { TFunction } from 'i18next';
|
||||
import { Button } from '../../../ui/button';
|
||||
import { Input } from '../../../ui/input';
|
||||
import { Button, Input } from '../../../../shared/view/ui';
|
||||
import { IS_PLATFORM } from '../../../../constants/config';
|
||||
|
||||
type SidebarHeaderProps = {
|
||||
@@ -34,13 +33,13 @@ export default function SidebarHeader({
|
||||
t,
|
||||
}: SidebarHeaderProps) {
|
||||
const LogoBlock = () => (
|
||||
<div className="flex items-center gap-2.5 min-w-0">
|
||||
<div className="w-7 h-7 bg-primary/90 rounded-lg flex items-center justify-center shadow-sm flex-shrink-0">
|
||||
<svg className="w-3.5 h-3.5 text-primary-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round">
|
||||
<div className="flex min-w-0 items-center gap-2.5">
|
||||
<div className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg bg-primary/90 shadow-sm">
|
||||
<svg className="h-3.5 w-3.5 text-primary-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h1 className="text-sm font-semibold text-foreground tracking-tight truncate">{t('app.title')}</h1>
|
||||
<h1 className="truncate text-sm font-semibold tracking-tight text-foreground">{t('app.title')}</h1>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -48,14 +47,14 @@ export default function SidebarHeader({
|
||||
<div className="flex-shrink-0">
|
||||
{/* Desktop header */}
|
||||
<div
|
||||
className="hidden md:block px-3 pt-3 pb-2"
|
||||
className="hidden px-3 pb-2 pt-3 md:block"
|
||||
style={{}}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
{IS_PLATFORM ? (
|
||||
<a
|
||||
href="https://cloudcli.ai/dashboard"
|
||||
className="flex items-center gap-2.5 min-w-0 hover:opacity-80 transition-opacity"
|
||||
className="flex min-w-0 items-center gap-2.5 transition-opacity hover:opacity-80"
|
||||
title={t('tooltips.viewEnvironments')}
|
||||
>
|
||||
<LogoBlock />
|
||||
@@ -64,17 +63,17 @@ export default function SidebarHeader({
|
||||
<LogoBlock />
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-0.5 flex-shrink-0">
|
||||
<div className="flex flex-shrink-0 items-center gap-0.5">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground hover:bg-accent/80 rounded-lg"
|
||||
className="h-7 w-7 rounded-lg p-0 text-muted-foreground hover:bg-accent/80 hover:text-foreground"
|
||||
onClick={onRefresh}
|
||||
disabled={isRefreshing}
|
||||
title={t('tooltips.refresh')}
|
||||
>
|
||||
<RefreshCw
|
||||
className={`w-3.5 h-3.5 ${
|
||||
className={`h-3.5 w-3.5 ${
|
||||
isRefreshing ? 'animate-spin' : ''
|
||||
}`}
|
||||
/>
|
||||
@@ -82,20 +81,20 @@ export default function SidebarHeader({
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground hover:bg-accent/80 rounded-lg"
|
||||
className="h-7 w-7 rounded-lg p-0 text-muted-foreground hover:bg-accent/80 hover:text-foreground"
|
||||
onClick={onCreateProject}
|
||||
title={t('tooltips.createProject')}
|
||||
>
|
||||
<Plus className="w-3.5 h-3.5" />
|
||||
<Plus className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground hover:bg-accent/80 rounded-lg"
|
||||
className="h-7 w-7 rounded-lg p-0 text-muted-foreground hover:bg-accent/80 hover:text-foreground"
|
||||
onClick={onCollapseSidebar}
|
||||
title={t('tooltips.hideSidebar')}
|
||||
>
|
||||
<PanelLeftClose className="w-3.5 h-3.5" />
|
||||
<PanelLeftClose className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -103,20 +102,20 @@ export default function SidebarHeader({
|
||||
{/* Search bar */}
|
||||
{projectsCount > 0 && !isLoading && (
|
||||
<div className="relative mt-2.5">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground/50 pointer-events-none" />
|
||||
<Search className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground/50" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={t('projects.searchPlaceholder')}
|
||||
value={searchFilter}
|
||||
onChange={(event) => onSearchFilterChange(event.target.value)}
|
||||
className="nav-search-input pl-9 pr-8 h-9 text-sm rounded-xl border-0 placeholder:text-muted-foreground/40 focus-visible:ring-0 focus-visible:ring-offset-0 transition-all duration-200"
|
||||
className="nav-search-input h-9 rounded-xl border-0 pl-9 pr-8 text-sm transition-all duration-200 placeholder:text-muted-foreground/40 focus-visible:ring-0 focus-visible:ring-offset-0"
|
||||
/>
|
||||
{searchFilter && (
|
||||
<button
|
||||
onClick={onClearSearchFilter}
|
||||
className="absolute right-2.5 top-1/2 -translate-y-1/2 p-0.5 hover:bg-accent rounded-md"
|
||||
className="absolute right-2.5 top-1/2 -translate-y-1/2 rounded-md p-0.5 hover:bg-accent"
|
||||
>
|
||||
<X className="w-3 h-3 text-muted-foreground" />
|
||||
<X className="h-3 w-3 text-muted-foreground" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@@ -124,18 +123,18 @@ export default function SidebarHeader({
|
||||
</div>
|
||||
|
||||
{/* Desktop divider */}
|
||||
<div className="hidden md:block nav-divider" />
|
||||
<div className="nav-divider hidden md:block" />
|
||||
|
||||
{/* Mobile header */}
|
||||
<div
|
||||
className="md:hidden p-3 pb-2"
|
||||
className="p-3 pb-2 md:hidden"
|
||||
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-2.5 active:opacity-70 transition-opacity min-w-0"
|
||||
className="flex min-w-0 items-center gap-2.5 transition-opacity active:opacity-70"
|
||||
title={t('tooltips.viewEnvironments')}
|
||||
>
|
||||
<LogoBlock />
|
||||
@@ -144,19 +143,19 @@ export default function SidebarHeader({
|
||||
<LogoBlock />
|
||||
)}
|
||||
|
||||
<div className="flex gap-1.5 flex-shrink-0">
|
||||
<div className="flex flex-shrink-0 gap-1.5">
|
||||
<button
|
||||
className="w-8 h-8 rounded-lg bg-muted/50 flex items-center justify-center active:scale-95 transition-all"
|
||||
className="flex h-8 w-8 items-center justify-center rounded-lg bg-muted/50 transition-all active:scale-95"
|
||||
onClick={onRefresh}
|
||||
disabled={isRefreshing}
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 text-muted-foreground ${isRefreshing ? 'animate-spin' : ''}`} />
|
||||
<RefreshCw className={`h-4 w-4 text-muted-foreground ${isRefreshing ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
<button
|
||||
className="w-8 h-8 rounded-lg bg-primary/90 text-primary-foreground flex items-center justify-center active:scale-95 transition-all"
|
||||
className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/90 text-primary-foreground transition-all active:scale-95"
|
||||
onClick={onCreateProject}
|
||||
>
|
||||
<FolderPlus className="w-4 h-4" />
|
||||
<FolderPlus className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -164,20 +163,20 @@ export default function SidebarHeader({
|
||||
{/* Mobile search */}
|
||||
{projectsCount > 0 && !isLoading && (
|
||||
<div className="relative mt-2.5">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50 pointer-events-none" />
|
||||
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/50" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={t('projects.searchPlaceholder')}
|
||||
value={searchFilter}
|
||||
onChange={(event) => onSearchFilterChange(event.target.value)}
|
||||
className="nav-search-input pl-10 pr-9 h-10 text-sm rounded-xl border-0 placeholder:text-muted-foreground/40 focus-visible:ring-0 focus-visible:ring-offset-0 transition-all duration-200"
|
||||
className="nav-search-input h-10 rounded-xl border-0 pl-10 pr-9 text-sm transition-all duration-200 placeholder:text-muted-foreground/40 focus-visible:ring-0 focus-visible:ring-offset-0"
|
||||
/>
|
||||
{searchFilter && (
|
||||
<button
|
||||
onClick={onClearSearchFilter}
|
||||
className="absolute right-2.5 top-1/2 -translate-y-1/2 p-1 hover:bg-accent rounded-md"
|
||||
className="absolute right-2.5 top-1/2 -translate-y-1/2 rounded-md p-1 hover:bg-accent"
|
||||
>
|
||||
<X className="w-3.5 h-3.5 text-muted-foreground" />
|
||||
<X className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@@ -185,7 +184,7 @@ export default function SidebarHeader({
|
||||
</div>
|
||||
|
||||
{/* Mobile divider */}
|
||||
<div className="md:hidden nav-divider" />
|
||||
<div className="nav-divider md:hidden" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,15 +2,15 @@ import { useMemo } from 'react';
|
||||
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 { Button } from '../../../../shared/view/ui';
|
||||
import Settings from '../../../settings/view/Settings';
|
||||
import VersionUpgradeModal from '../modals/VersionUpgradeModal';
|
||||
import VersionUpgradeModal from '../../../version-upgrade/view';
|
||||
import type { Project } from '../../../../types/app';
|
||||
import type { ReleaseInfo } from '../../../../types/sharedTypes';
|
||||
import type { InstallMode } from '../../../../hooks/useVersionCheck';
|
||||
import { normalizeProjectForSettings } from '../../utils/utils';
|
||||
import type { DeleteProjectConfirmation, SessionDeleteConfirmation, SettingsProject } from '../../types/types';
|
||||
import ProjectCreationWizard from '../../../project-creation-wizard';
|
||||
|
||||
type SidebarModalsProps = {
|
||||
projects: Project[];
|
||||
@@ -100,18 +100,18 @@ export default function SidebarModals({
|
||||
|
||||
{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="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm">
|
||||
<div className="w-full max-w-md overflow-hidden rounded-xl border border-border bg-card shadow-2xl">
|
||||
<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 className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/30">
|
||||
<AlertTriangle className="h-6 w-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">
|
||||
<div className="min-w-0 flex-1">
|
||||
<h3 className="mb-2 text-lg font-semibold text-foreground">
|
||||
{t('deleteConfirmation.deleteProject')}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground mb-1">
|
||||
<p className="mb-1 text-sm text-muted-foreground">
|
||||
{t('deleteConfirmation.confirmDelete')}{' '}
|
||||
<span className="font-medium text-foreground">
|
||||
{deleteConfirmation.project.displayName || deleteConfirmation.project.name}
|
||||
@@ -119,31 +119,31 @@ export default function SidebarModals({
|
||||
?
|
||||
</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">
|
||||
<div className="mt-3 rounded-lg border border-red-200 bg-red-50 p-3 dark:border-red-800 dark:bg-red-900/20">
|
||||
<p className="text-sm font-medium text-red-700 dark:text-red-300">
|
||||
{t('deleteConfirmation.sessionCount', { count: deleteConfirmation.sessionCount })}
|
||||
</p>
|
||||
<p className="text-xs text-red-600 dark:text-red-400 mt-1">
|
||||
<p className="mt-1 text-xs text-red-600 dark:text-red-400">
|
||||
{t('deleteConfirmation.allConversationsDeleted')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground mt-3">
|
||||
<p className="mt-3 text-xs text-muted-foreground">
|
||||
{t('deleteConfirmation.cannotUndo')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-3 p-4 bg-muted/30 border-t border-border">
|
||||
<div className="flex gap-3 border-t border-border bg-muted/30 p-4">
|
||||
<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"
|
||||
className="flex-1 bg-red-600 text-white hover:bg-red-700"
|
||||
onClick={onConfirmDeleteProject}
|
||||
>
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
{t('actions.delete')}
|
||||
</Button>
|
||||
</div>
|
||||
@@ -154,40 +154,40 @@ export default function SidebarModals({
|
||||
|
||||
{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="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm">
|
||||
<div className="w-full max-w-md overflow-hidden rounded-xl border border-border bg-card shadow-2xl">
|
||||
<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 className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/30">
|
||||
<AlertTriangle className="h-6 w-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">
|
||||
<div className="min-w-0 flex-1">
|
||||
<h3 className="mb-2 text-lg font-semibold text-foreground">
|
||||
{t('deleteConfirmation.deleteSession')}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground mb-1">
|
||||
<p className="mb-1 text-sm text-muted-foreground">
|
||||
{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">
|
||||
<p className="mt-3 text-xs text-muted-foreground">
|
||||
{t('deleteConfirmation.cannotUndo')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-3 p-4 bg-muted/30 border-t border-border">
|
||||
<div className="flex gap-3 border-t border-border bg-muted/30 p-4">
|
||||
<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"
|
||||
className="flex-1 bg-red-600 text-white hover:bg-red-700"
|
||||
onClick={onConfirmDeleteSession}
|
||||
>
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
{t('actions.delete')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { Button } from '../../../ui/button';
|
||||
import { Check, ChevronDown, ChevronRight, Edit3, Folder, FolderOpen, Star, Trash2, X } from 'lucide-react';
|
||||
import type { TFunction } from 'i18next';
|
||||
import { Button } from '../../../../shared/view/ui';
|
||||
import { cn } from '../../../../lib/utils';
|
||||
import TaskIndicator from '../../../TaskIndicator';
|
||||
import type { Project, ProjectSession, SessionProvider } from '../../../../types/app';
|
||||
import type { MCPServerStatus, SessionWithProvider, TouchHandlerFactory } from '../../types/types';
|
||||
import type { MCPServerStatus, SessionWithProvider } from '../../types/types';
|
||||
import { getTaskIndicatorStatus } from '../../utils/utils';
|
||||
import TaskIndicator from './TaskIndicator';
|
||||
import SidebarProjectSessions from './SidebarProjectSessions';
|
||||
|
||||
type SidebarProjectItemProps = {
|
||||
@@ -46,7 +46,6 @@ type SidebarProjectItemProps = {
|
||||
onStartEditingSession: (sessionId: string, initialName: string) => void;
|
||||
onCancelEditingSession: () => void;
|
||||
onSaveEditingSession: (projectName: string, sessionId: string, summary: string, provider: SessionProvider) => void;
|
||||
touchHandlerFactory: TouchHandlerFactory;
|
||||
t: TFunction;
|
||||
};
|
||||
|
||||
@@ -92,7 +91,6 @@ export default function SidebarProjectItem({
|
||||
onStartEditingSession,
|
||||
onCancelEditingSession,
|
||||
onSaveEditingSession,
|
||||
touchHandlerFactory,
|
||||
t,
|
||||
}: SidebarProjectItemProps) {
|
||||
const isSelected = selectedProject?.name === project.name;
|
||||
@@ -119,7 +117,7 @@ export default function SidebarProjectItem({
|
||||
|
||||
return (
|
||||
<div className={cn('md:space-y-1', isDeleting && 'opacity-50 pointer-events-none')}>
|
||||
<div className="group md:group">
|
||||
<div className="md:group group">
|
||||
<div className="md:hidden">
|
||||
<div
|
||||
className={cn(
|
||||
@@ -132,7 +130,7 @@ export default function SidebarProjectItem({
|
||||
onClick={toggleProject}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3 min-w-0 flex-1">
|
||||
<div className="flex min-w-0 flex-1 items-center gap-3">
|
||||
<div
|
||||
className={cn(
|
||||
'w-8 h-8 rounded-lg flex items-center justify-center transition-colors',
|
||||
@@ -140,9 +138,9 @@ export default function SidebarProjectItem({
|
||||
)}
|
||||
>
|
||||
{isExpanded ? (
|
||||
<FolderOpen className="w-4 h-4 text-primary" />
|
||||
<FolderOpen className="h-4 w-4 text-primary" />
|
||||
) : (
|
||||
<Folder className="w-4 h-4 text-muted-foreground" />
|
||||
<Folder className="h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -152,7 +150,7 @@ export default function SidebarProjectItem({
|
||||
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"
|
||||
className="w-full rounded-lg border-2 border-primary/40 bg-background px-3 py-2 text-sm text-foreground shadow-sm transition-all duration-200 focus:border-primary focus:shadow-md focus:outline-none"
|
||||
placeholder={t('projects.projectNamePlaceholder')}
|
||||
autoFocus
|
||||
autoComplete="off"
|
||||
@@ -174,13 +172,13 @@ export default function SidebarProjectItem({
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center justify-between min-w-0 flex-1">
|
||||
<h3 className="text-sm font-medium text-foreground truncate">{project.displayName}</h3>
|
||||
<div className="flex min-w-0 flex-1 items-center justify-between">
|
||||
<h3 className="truncate text-sm font-medium text-foreground">{project.displayName}</h3>
|
||||
{tasksEnabled && (
|
||||
<TaskIndicator
|
||||
status={taskStatus}
|
||||
size="xs"
|
||||
className="hidden md:inline-flex flex-shrink-0 ml-2"
|
||||
className="ml-2 hidden flex-shrink-0 md:inline-flex"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
@@ -194,22 +192,22 @@ export default function SidebarProjectItem({
|
||||
{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"
|
||||
className="flex h-8 w-8 items-center justify-center rounded-lg bg-green-500 shadow-sm transition-all duration-150 active:scale-90 active:shadow-none dark:bg-green-600"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
saveProjectName();
|
||||
}}
|
||||
>
|
||||
<Check className="w-4 h-4 text-white" />
|
||||
<Check className="h-4 w-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"
|
||||
className="flex h-8 w-8 items-center justify-center rounded-lg bg-gray-500 shadow-sm transition-all duration-150 active:scale-90 active:shadow-none dark:bg-gray-600"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
onCancelEditingProject();
|
||||
}}
|
||||
>
|
||||
<X className="w-4 h-4 text-white" />
|
||||
<X className="h-4 w-4 text-white" />
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
@@ -238,30 +236,30 @@ export default function SidebarProjectItem({
|
||||
</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"
|
||||
className="flex h-8 w-8 items-center justify-center rounded-lg border border-red-200 bg-red-500/10 active:scale-90 dark:border-red-800 dark:bg-red-900/30"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
onDeleteProject(project);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="w-4 h-4 text-red-600 dark:text-red-400" />
|
||||
<Trash2 className="h-4 w-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"
|
||||
className="flex h-8 w-8 items-center justify-center rounded-lg border border-primary/20 bg-primary/10 active:scale-90 dark:border-primary/30 dark:bg-primary/20"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
onStartEditingProject(project);
|
||||
}}
|
||||
>
|
||||
<Edit3 className="w-4 h-4 text-primary" />
|
||||
<Edit3 className="h-4 w-4 text-primary" />
|
||||
</button>
|
||||
|
||||
<div className="w-6 h-6 rounded-md bg-muted/30 flex items-center justify-center">
|
||||
<div className="flex h-6 w-6 items-center justify-center rounded-md bg-muted/30">
|
||||
{isExpanded ? (
|
||||
<ChevronDown className="w-3 h-3 text-muted-foreground" />
|
||||
<ChevronDown className="h-3 w-3 text-muted-foreground" />
|
||||
) : (
|
||||
<ChevronRight className="w-3 h-3 text-muted-foreground" />
|
||||
<ChevronRight className="h-3 w-3 text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
@@ -282,11 +280,11 @@ export default function SidebarProjectItem({
|
||||
)}
|
||||
onClick={selectAndToggleProject}
|
||||
>
|
||||
<div className="flex items-center gap-3 min-w-0 flex-1">
|
||||
<div className="flex min-w-0 flex-1 items-center gap-3">
|
||||
{isExpanded ? (
|
||||
<FolderOpen className="w-4 h-4 text-primary flex-shrink-0" />
|
||||
<FolderOpen className="h-4 w-4 flex-shrink-0 text-primary" />
|
||||
) : (
|
||||
<Folder className="w-4 h-4 text-muted-foreground flex-shrink-0" />
|
||||
<Folder className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
|
||||
)}
|
||||
<div className="min-w-0 flex-1 text-left">
|
||||
{isEditing ? (
|
||||
@@ -295,7 +293,7 @@ export default function SidebarProjectItem({
|
||||
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"
|
||||
className="w-full rounded border border-border bg-background px-2 py-1 text-sm text-foreground focus:ring-2 focus:ring-primary/20"
|
||||
placeholder={t('projects.projectNamePlaceholder')}
|
||||
autoFocus
|
||||
onKeyDown={(event) => {
|
||||
@@ -307,13 +305,13 @@ export default function SidebarProjectItem({
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div className="text-xs text-muted-foreground truncate" title={project.fullPath}>
|
||||
<div className="truncate text-xs text-muted-foreground" title={project.fullPath}>
|
||||
{project.fullPath}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div className="text-sm font-semibold truncate text-foreground" title={project.displayName}>
|
||||
<div className="truncate text-sm font-semibold text-foreground" title={project.displayName}>
|
||||
{project.displayName}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
@@ -330,26 +328,26 @@ export default function SidebarProjectItem({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
<div className="flex flex-shrink-0 items-center gap-1">
|
||||
{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"
|
||||
className="flex h-6 w-6 cursor-pointer items-center justify-center rounded text-green-600 transition-colors hover:bg-green-50 hover:text-green-700 dark:hover:bg-green-900/20"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
saveProjectName();
|
||||
}}
|
||||
>
|
||||
<Check className="w-3 h-3" />
|
||||
<Check className="h-3 w-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"
|
||||
className="flex h-6 w-6 cursor-pointer items-center justify-center rounded text-gray-500 transition-colors hover:bg-gray-50 hover:text-gray-700 dark:hover:bg-gray-800"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
onCancelEditingProject();
|
||||
}}
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
<X className="h-3 w-3" />
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
@@ -375,29 +373,29 @@ export default function SidebarProjectItem({
|
||||
/>
|
||||
</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"
|
||||
className="touch:opacity-100 flex h-6 w-6 cursor-pointer items-center justify-center rounded opacity-0 transition-all duration-200 hover:bg-accent group-hover:opacity-100"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
onStartEditingProject(project);
|
||||
}}
|
||||
title={t('tooltips.renameProject')}
|
||||
>
|
||||
<Edit3 className="w-3 h-3" />
|
||||
<Edit3 className="h-3 w-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"
|
||||
className="touch:opacity-100 flex h-6 w-6 cursor-pointer items-center justify-center rounded opacity-0 transition-all duration-200 hover:bg-red-50 group-hover:opacity-100 dark:hover:bg-red-900/20"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
onDeleteProject(project);
|
||||
}}
|
||||
title={t('tooltips.deleteProject')}
|
||||
>
|
||||
<Trash2 className="w-3 h-3 text-red-600 dark:text-red-400" />
|
||||
<Trash2 className="h-3 w-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" />
|
||||
<ChevronDown className="h-4 w-4 text-muted-foreground transition-colors group-hover:text-foreground" />
|
||||
) : (
|
||||
<ChevronRight className="w-4 h-4 text-muted-foreground group-hover:text-foreground transition-colors" />
|
||||
<ChevronRight className="h-4 w-4 text-muted-foreground transition-colors group-hover:text-foreground" />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
@@ -424,7 +422,6 @@ export default function SidebarProjectItem({
|
||||
onDeleteSession={onDeleteSession}
|
||||
onLoadMoreSessions={onLoadMoreSessions}
|
||||
onNewSession={onNewSession}
|
||||
touchHandlerFactory={touchHandlerFactory}
|
||||
t={t}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,6 @@ import type {
|
||||
LoadingSessionsByProject,
|
||||
MCPServerStatus,
|
||||
SessionWithProvider,
|
||||
TouchHandlerFactory,
|
||||
} from '../../types/types';
|
||||
import SidebarProjectItem from './SidebarProjectItem';
|
||||
import SidebarProjectsState from './SidebarProjectsState';
|
||||
@@ -51,7 +50,6 @@ export type SidebarProjectListProps = {
|
||||
onStartEditingSession: (sessionId: string, initialName: string) => void;
|
||||
onCancelEditingSession: () => void;
|
||||
onSaveEditingSession: (projectName: string, sessionId: string, summary: string, provider: SessionProvider) => void;
|
||||
touchHandlerFactory: TouchHandlerFactory;
|
||||
t: TFunction;
|
||||
};
|
||||
|
||||
@@ -91,7 +89,6 @@ export default function SidebarProjectList({
|
||||
onStartEditingSession,
|
||||
onCancelEditingSession,
|
||||
onSaveEditingSession,
|
||||
touchHandlerFactory,
|
||||
t,
|
||||
}: SidebarProjectListProps) {
|
||||
const state = (
|
||||
@@ -116,7 +113,7 @@ export default function SidebarProjectList({
|
||||
const showProjects = !isLoading && projects.length > 0 && filteredProjects.length > 0;
|
||||
|
||||
return (
|
||||
<div className="md:space-y-1 pb-safe-area-inset-bottom">
|
||||
<div className="pb-safe-area-inset-bottom md:space-y-1">
|
||||
{!showProjects
|
||||
? state
|
||||
: filteredProjects.map((project) => (
|
||||
@@ -154,7 +151,6 @@ export default function SidebarProjectList({
|
||||
onStartEditingSession={onStartEditingSession}
|
||||
onCancelEditingSession={onCancelEditingSession}
|
||||
onSaveEditingSession={onSaveEditingSession}
|
||||
touchHandlerFactory={touchHandlerFactory}
|
||||
t={t}
|
||||
/>
|
||||
))}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { ChevronDown, Plus } from 'lucide-react';
|
||||
import type { TFunction } from 'i18next';
|
||||
import { Button } from '../../../ui/button';
|
||||
import { Button } from '../../../../shared/view/ui';
|
||||
import type { Project, ProjectSession, SessionProvider } from '../../../../types/app';
|
||||
import type { SessionWithProvider, TouchHandlerFactory } from '../../types/types';
|
||||
import type { SessionWithProvider } from '../../types/types';
|
||||
import SidebarSessionItem from './SidebarSessionItem';
|
||||
|
||||
type SidebarProjectSessionsProps = {
|
||||
@@ -29,7 +29,6 @@ type SidebarProjectSessionsProps = {
|
||||
) => void;
|
||||
onLoadMoreSessions: (project: Project) => void;
|
||||
onNewSession: (project: Project) => void;
|
||||
touchHandlerFactory: TouchHandlerFactory;
|
||||
t: TFunction;
|
||||
};
|
||||
|
||||
@@ -37,12 +36,12 @@ function SessionListSkeleton() {
|
||||
return (
|
||||
<>
|
||||
{Array.from({ length: 3 }).map((_, index) => (
|
||||
<div key={index} className="p-2 rounded-md">
|
||||
<div key={index} className="rounded-md p-2">
|
||||
<div className="flex items-start gap-2">
|
||||
<div className="w-3 h-3 bg-muted rounded-full animate-pulse mt-0.5" />
|
||||
<div className="mt-0.5 h-3 w-3 animate-pulse rounded-full bg-muted" />
|
||||
<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 className="h-3 animate-pulse rounded bg-muted" style={{ width: `${60 + index * 15}%` }} />
|
||||
<div className="h-2 w-1/2 animate-pulse rounded bg-muted" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -70,7 +69,6 @@ export default function SidebarProjectSessions({
|
||||
onDeleteSession,
|
||||
onLoadMoreSessions,
|
||||
onNewSession,
|
||||
touchHandlerFactory,
|
||||
t,
|
||||
}: SidebarProjectSessionsProps) {
|
||||
if (!isExpanded) {
|
||||
@@ -85,7 +83,7 @@ export default function SidebarProjectSessions({
|
||||
{!initialSessionsLoaded ? (
|
||||
<SessionListSkeleton />
|
||||
) : !hasSessions && !isLoadingSessions ? (
|
||||
<div className="py-2 px-3 text-left">
|
||||
<div className="px-3 py-2 text-left">
|
||||
<p className="text-xs text-muted-foreground">{t('sessions.noSessions')}</p>
|
||||
</div>
|
||||
) : (
|
||||
@@ -105,7 +103,6 @@ export default function SidebarProjectSessions({
|
||||
onProjectSelect={onProjectSelect}
|
||||
onSessionSelect={onSessionSelect}
|
||||
onDeleteSession={onDeleteSession}
|
||||
touchHandlerFactory={touchHandlerFactory}
|
||||
t={t}
|
||||
/>
|
||||
))
|
||||
@@ -115,33 +112,33 @@ export default function SidebarProjectSessions({
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full justify-center gap-2 mt-2 text-muted-foreground"
|
||||
className="mt-2 w-full justify-center gap-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" />
|
||||
<div className="h-3 w-3 animate-spin rounded-full border border-muted-foreground border-t-transparent" />
|
||||
{t('sessions.loading')}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ChevronDown className="w-3 h-3" />
|
||||
<ChevronDown className="h-3 w-3" />
|
||||
{t('sessions.showMore')}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<div className="md:hidden px-3 pb-2">
|
||||
<div className="px-3 pb-2 md:hidden">
|
||||
<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"
|
||||
className="flex h-8 w-full items-center justify-center gap-2 rounded-md bg-primary text-xs font-medium text-primary-foreground transition-all duration-150 hover:bg-primary/90 active:scale-[0.98]"
|
||||
onClick={() => {
|
||||
onProjectSelect(project);
|
||||
onNewSession(project);
|
||||
}}
|
||||
>
|
||||
<Plus className="w-3 h-3" />
|
||||
<Plus className="h-3 w-3" />
|
||||
{t('sessions.newSession')}
|
||||
</button>
|
||||
</div>
|
||||
@@ -149,10 +146,10 @@ export default function SidebarProjectSessions({
|
||||
<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"
|
||||
className="mt-1 hidden h-8 w-full justify-start gap-2 bg-primary text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90 md:flex"
|
||||
onClick={() => onNewSession(project)}
|
||||
>
|
||||
<Plus className="w-3 h-3" />
|
||||
<Plus className="h-3 w-3" />
|
||||
{t('sessions.newSession')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -19,16 +19,16 @@ export default function SidebarProjectsState({
|
||||
}: 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 className="px-4 py-12 text-center md:py-8">
|
||||
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-muted md:mb-3">
|
||||
<div className="h-6 w-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>
|
||||
<h3 className="mb-2 text-base font-medium text-foreground 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="h-2 w-full overflow-hidden rounded-full bg-muted">
|
||||
<div
|
||||
className="bg-primary h-full transition-all duration-300 ease-out"
|
||||
className="h-full bg-primary transition-all duration-300 ease-out"
|
||||
style={{ width: `${(loadingProgress.current / loadingProgress.total) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
@@ -37,7 +37,7 @@ export default function SidebarProjectsState({
|
||||
</p>
|
||||
{loadingProgress.currentProject && (
|
||||
<p
|
||||
className="text-xs text-muted-foreground/70 truncate max-w-[200px] mx-auto"
|
||||
className="mx-auto max-w-[200px] truncate text-xs text-muted-foreground/70"
|
||||
title={loadingProgress.currentProject}
|
||||
>
|
||||
{loadingProgress.currentProject.split('-').slice(-2).join('/')}
|
||||
@@ -53,11 +53,11 @@ export default function SidebarProjectsState({
|
||||
|
||||
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 className="px-4 py-12 text-center md:py-8">
|
||||
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-muted md:mb-3">
|
||||
<Folder className="h-6 w-6 text-muted-foreground" />
|
||||
</div>
|
||||
<h3 className="text-base font-medium text-foreground mb-2 md:mb-1">{t('projects.noProjects')}</h3>
|
||||
<h3 className="mb-2 text-base font-medium text-foreground md:mb-1">{t('projects.noProjects')}</h3>
|
||||
<p className="text-sm text-muted-foreground">{t('projects.runClaudeCli')}</p>
|
||||
</div>
|
||||
);
|
||||
@@ -65,11 +65,11 @@ export default function SidebarProjectsState({
|
||||
|
||||
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 className="px-4 py-12 text-center md:py-8">
|
||||
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-muted md:mb-3">
|
||||
<Search className="h-6 w-6 text-muted-foreground" />
|
||||
</div>
|
||||
<h3 className="text-base font-medium text-foreground mb-2 md:mb-1">{t('projects.noMatchingProjects')}</h3>
|
||||
<h3 className="mb-2 text-base font-medium text-foreground md:mb-1">{t('projects.noMatchingProjects')}</h3>
|
||||
<p className="text-sm text-muted-foreground">{t('projects.tryDifferentSearch')}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
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 { Badge, Button } from '../../../../shared/view/ui';
|
||||
import { cn } from '../../../../lib/utils';
|
||||
import { formatTimeAgo } from '../../../../utils/dateUtils';
|
||||
import type { Project, ProjectSession, SessionProvider } from '../../../../types/app';
|
||||
import type { SessionWithProvider, TouchHandlerFactory } from '../../types/types';
|
||||
import type { SessionWithProvider } from '../../types/types';
|
||||
import { createSessionViewModel } from '../../utils/utils';
|
||||
import SessionProviderLogo from '../../../llm-logo-provider/SessionProviderLogo';
|
||||
|
||||
@@ -28,7 +27,6 @@ type SidebarSessionItemProps = {
|
||||
sessionTitle: string,
|
||||
provider: SessionProvider,
|
||||
) => void;
|
||||
touchHandlerFactory: TouchHandlerFactory;
|
||||
t: TFunction;
|
||||
};
|
||||
|
||||
@@ -46,7 +44,6 @@ export default function SidebarSessionItem({
|
||||
onProjectSelect,
|
||||
onSessionSelect,
|
||||
onDeleteSession,
|
||||
touchHandlerFactory,
|
||||
t,
|
||||
}: SidebarSessionItemProps) {
|
||||
const sessionView = createSessionViewModel(session, currentTime, t);
|
||||
@@ -68,8 +65,8 @@ export default function SidebarSessionItem({
|
||||
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 className="absolute left-0 top-1/2 -translate-x-1 -translate-y-1/2 transform">
|
||||
<div className="h-2 w-2 animate-pulse rounded-full bg-green-500" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -91,36 +88,36 @@ export default function SidebarSessionItem({
|
||||
isSelected ? 'bg-primary/10' : 'bg-muted/50',
|
||||
)}
|
||||
>
|
||||
<SessionProviderLogo provider={session.__provider} className="w-3 h-3" />
|
||||
<SessionProviderLogo provider={session.__provider} className="h-3 w-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" />
|
||||
<div className="truncate text-xs font-medium text-foreground">{sessionView.sessionName}</div>
|
||||
<div className="mt-0.5 flex items-center gap-1">
|
||||
<Clock className="h-2.5 w-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">
|
||||
<Badge variant="secondary" className="ml-auto px-1 py-0 text-xs">
|
||||
{sessionView.messageCount}
|
||||
</Badge>
|
||||
)}
|
||||
<span className="ml-1 opacity-70">
|
||||
<SessionProviderLogo provider={session.__provider} className="w-3 h-3" />
|
||||
<SessionProviderLogo provider={session.__provider} className="h-3 w-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"
|
||||
className="ml-1 flex h-5 w-5 items-center justify-center rounded-md bg-red-50 opacity-70 transition-transform active:scale-95 dark:bg-red-900/20"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
requestDeleteSession();
|
||||
}}
|
||||
>
|
||||
<Trash2 className="w-2.5 h-2.5 text-red-600 dark:text-red-400" />
|
||||
<Trash2 className="h-2.5 w-2.5 text-red-600 dark:text-red-400" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@@ -136,32 +133,32 @@ export default function SidebarSessionItem({
|
||||
)}
|
||||
onClick={() => onSessionSelect(session, project.name)}
|
||||
>
|
||||
<div className="flex items-start gap-2 min-w-0 w-full">
|
||||
<SessionProviderLogo provider={session.__provider} className="w-3 h-3 mt-0.5 flex-shrink-0" />
|
||||
<div className="flex w-full min-w-0 items-start gap-2">
|
||||
<SessionProviderLogo provider={session.__provider} className="mt-0.5 h-3 w-3 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" />
|
||||
<div className="truncate text-xs font-medium text-foreground">{sessionView.sessionName}</div>
|
||||
<div className="mt-0.5 flex items-center gap-1">
|
||||
<Clock className="h-2.5 w-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"
|
||||
className="ml-auto px-1 py-0 text-xs transition-opacity group-hover:opacity-0"
|
||||
>
|
||||
{sessionView.messageCount}
|
||||
</Badge>
|
||||
)}
|
||||
<span className="ml-1 opacity-70 group-hover:opacity-0 transition-opacity">
|
||||
<SessionProviderLogo provider={session.__provider} className="w-3 h-3" />
|
||||
<span className="ml-1 opacity-70 transition-opacity group-hover:opacity-0">
|
||||
<SessionProviderLogo provider={session.__provider} className="h-3 w-3" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
|
||||
<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">
|
||||
<div className="absolute right-2 top-1/2 flex -translate-y-1/2 transform items-center gap-1 opacity-0 transition-all duration-200 group-hover:opacity-100">
|
||||
{editingSession === session.id ? (
|
||||
<>
|
||||
<input
|
||||
@@ -177,52 +174,52 @@ export default function SidebarSessionItem({
|
||||
}
|
||||
}}
|
||||
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"
|
||||
className="w-32 rounded border border-border bg-background px-2 py-1 text-xs 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"
|
||||
className="flex h-6 w-6 items-center justify-center rounded bg-green-50 hover:bg-green-100 dark:bg-green-900/20 dark:hover:bg-green-900/40"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
saveEditedSession();
|
||||
}}
|
||||
title={t('tooltips.save')}
|
||||
>
|
||||
<Check className="w-3 h-3 text-green-600 dark:text-green-400" />
|
||||
<Check className="h-3 w-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"
|
||||
className="flex h-6 w-6 items-center justify-center rounded bg-gray-50 hover:bg-gray-100 dark:bg-gray-900/20 dark:hover:bg-gray-900/40"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
onCancelEditingSession();
|
||||
}}
|
||||
title={t('tooltips.cancel')}
|
||||
>
|
||||
<X className="w-3 h-3 text-gray-600 dark:text-gray-400" />
|
||||
<X className="h-3 w-3 text-gray-600 dark:text-gray-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"
|
||||
className="flex h-6 w-6 items-center justify-center rounded bg-gray-50 hover:bg-gray-100 dark:bg-gray-900/20 dark:hover:bg-gray-900/40"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
onStartEditingSession(session.id, sessionView.sessionName);
|
||||
}}
|
||||
title={t('tooltips.editSessionName')}
|
||||
>
|
||||
<Edit2 className="w-3 h-3 text-gray-600 dark:text-gray-400" />
|
||||
<Edit2 className="h-3 w-3 text-gray-600 dark:text-gray-400" />
|
||||
</button>
|
||||
{!sessionView.isCursorSession && (
|
||||
<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"
|
||||
className="flex h-6 w-6 items-center justify-center rounded bg-red-50 hover:bg-red-100 dark:bg-red-900/20 dark:hover:bg-red-900/40"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
requestDeleteSession();
|
||||
}}
|
||||
title={t('tooltips.deleteSession')}
|
||||
>
|
||||
<Trash2 className="w-3 h-3 text-red-600 dark:text-red-400" />
|
||||
<Trash2 className="h-3 w-3 text-red-600 dark:text-red-400" />
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
|
||||
123
src/components/sidebar/view/subcomponents/TaskIndicator.tsx
Normal file
123
src/components/sidebar/view/subcomponents/TaskIndicator.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import { AlertCircle, CheckCircle, Settings, X } from 'lucide-react';
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
import { cn } from '../../../../lib/utils';
|
||||
|
||||
type TaskIndicatorStatus =
|
||||
| 'fully-configured'
|
||||
| 'taskmaster-only'
|
||||
| 'mcp-only'
|
||||
| 'not-configured'
|
||||
| 'error';
|
||||
|
||||
type TaskIndicatorSize = 'xs' | 'sm' | 'md' | 'lg';
|
||||
|
||||
type TaskIndicatorProps = {
|
||||
status?: TaskIndicatorStatus;
|
||||
size?: TaskIndicatorSize;
|
||||
className?: string;
|
||||
showLabel?: boolean;
|
||||
};
|
||||
|
||||
type IndicatorConfig = {
|
||||
icon: LucideIcon;
|
||||
colorClassName: string;
|
||||
backgroundClassName: string;
|
||||
label: string;
|
||||
title: string;
|
||||
};
|
||||
|
||||
const sizeClassNames: Record<TaskIndicatorSize, string> = {
|
||||
xs: 'w-3 h-3',
|
||||
sm: 'w-4 h-4',
|
||||
md: 'w-5 h-5',
|
||||
lg: 'w-6 h-6',
|
||||
};
|
||||
|
||||
const paddingClassNames: Record<TaskIndicatorSize, string> = {
|
||||
xs: 'p-0.5',
|
||||
sm: 'p-1',
|
||||
md: 'p-1.5',
|
||||
lg: 'p-2',
|
||||
};
|
||||
|
||||
const getIndicatorConfig = (status: TaskIndicatorStatus): IndicatorConfig => {
|
||||
// Keep color and label mapping centralized so status display remains consistent in sidebar UIs.
|
||||
if (status === 'fully-configured') {
|
||||
return {
|
||||
icon: CheckCircle,
|
||||
colorClassName: 'text-green-500 dark:text-green-400',
|
||||
backgroundClassName: 'bg-green-50 dark:bg-green-950',
|
||||
label: 'TaskMaster Ready',
|
||||
title: 'TaskMaster fully configured with MCP server',
|
||||
};
|
||||
}
|
||||
|
||||
if (status === 'taskmaster-only') {
|
||||
return {
|
||||
icon: Settings,
|
||||
colorClassName: 'text-blue-500 dark:text-blue-400',
|
||||
backgroundClassName: 'bg-blue-50 dark:bg-blue-950',
|
||||
label: 'TaskMaster Init',
|
||||
title: 'TaskMaster initialized, MCP server needs setup',
|
||||
};
|
||||
}
|
||||
|
||||
if (status === 'mcp-only') {
|
||||
return {
|
||||
icon: AlertCircle,
|
||||
colorClassName: 'text-amber-500 dark:text-amber-400',
|
||||
backgroundClassName: 'bg-amber-50 dark:bg-amber-950',
|
||||
label: 'MCP Ready',
|
||||
title: 'MCP server configured, TaskMaster needs initialization',
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
icon: X,
|
||||
colorClassName: 'text-gray-400 dark:text-gray-500',
|
||||
backgroundClassName: 'bg-gray-50 dark:bg-gray-900',
|
||||
label: 'No TaskMaster',
|
||||
title: 'TaskMaster not configured',
|
||||
};
|
||||
};
|
||||
|
||||
export default function TaskIndicator({
|
||||
status = 'not-configured',
|
||||
size = 'sm',
|
||||
className = '',
|
||||
showLabel = false,
|
||||
}: TaskIndicatorProps) {
|
||||
const indicatorConfig = getIndicatorConfig(status);
|
||||
const Icon = indicatorConfig.icon;
|
||||
|
||||
if (showLabel) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1.5 text-xs rounded-md px-2 py-1 transition-colors',
|
||||
indicatorConfig.backgroundClassName,
|
||||
indicatorConfig.colorClassName,
|
||||
className,
|
||||
)}
|
||||
title={indicatorConfig.title}
|
||||
>
|
||||
<Icon className={sizeClassNames[size]} />
|
||||
<span className="font-medium">{indicatorConfig.label}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'inline-flex items-center justify-center rounded-full transition-colors',
|
||||
indicatorConfig.backgroundClassName,
|
||||
paddingClassNames[size],
|
||||
className,
|
||||
)}
|
||||
title={indicatorConfig.title}
|
||||
>
|
||||
<Icon className={cn(sizeClassNames[size], indicatorConfig.colorClassName)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user