mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-03-11 17:07:40 +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
@@ -1,7 +1,7 @@
|
||||
import type { MainContentHeaderProps } from '../../types/types';
|
||||
import MobileMenuButton from './MobileMenuButton';
|
||||
import MainContentTabSwitcher from './MainContentTabSwitcher';
|
||||
import MainContentTitle from './MainContentTitle';
|
||||
import type { MainContentHeaderProps } from '../../types/types';
|
||||
|
||||
export default function MainContentHeader({
|
||||
activeTab,
|
||||
@@ -13,9 +13,9 @@ export default function MainContentHeader({
|
||||
onMenuClick,
|
||||
}: MainContentHeaderProps) {
|
||||
return (
|
||||
<div className="bg-background border-b border-border/60 px-3 py-1.5 sm:px-4 sm:py-2 pwa-header-safe flex-shrink-0">
|
||||
<div className="pwa-header-safe flex-shrink-0 border-b border-border/60 bg-background px-3 py-1.5 sm:px-4 sm:py-2">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-2 min-w-0 flex-1">
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2">
|
||||
{isMobile && <MobileMenuButton onMenuClick={onMenuClick} />}
|
||||
<MainContentTitle
|
||||
activeTab={activeTab}
|
||||
@@ -25,7 +25,7 @@ export default function MainContentHeader({
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-shrink-0 hidden sm:block">
|
||||
<div className="hidden flex-shrink-0 sm:block">
|
||||
<MainContentTabSwitcher
|
||||
activeTab={activeTab}
|
||||
setActiveTab={setActiveTab}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Folder } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import MobileMenuButton from './MobileMenuButton';
|
||||
import type { MainContentStateViewProps } from '../../types/types';
|
||||
import MobileMenuButton from './MobileMenuButton';
|
||||
|
||||
export default function MainContentStateView({ mode, isMobile, onMenuClick }: MainContentStateViewProps) {
|
||||
const { t } = useTranslation();
|
||||
@@ -9,19 +9,19 @@ export default function MainContentStateView({ mode, isMobile, onMenuClick }: Ma
|
||||
const isLoading = mode === 'loading';
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="flex h-full flex-col">
|
||||
{isMobile && (
|
||||
<div className="bg-background/80 backdrop-blur-sm border-b border-border/50 p-2 sm:p-3 pwa-header-safe flex-shrink-0">
|
||||
<div className="pwa-header-safe flex-shrink-0 border-b border-border/50 bg-background/80 p-2 backdrop-blur-sm sm:p-3">
|
||||
<MobileMenuButton onMenuClick={onMenuClick} compact />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<div className="flex flex-1 items-center justify-center">
|
||||
<div className="text-center text-muted-foreground">
|
||||
<div className="w-10 h-10 mx-auto mb-4">
|
||||
<div className="mx-auto mb-4 h-10 w-10">
|
||||
<div
|
||||
className="w-full h-full rounded-full border-[3px] border-muted border-t-primary"
|
||||
className="h-full w-full rounded-full border-[3px] border-muted border-t-primary"
|
||||
style={{
|
||||
animation: 'spin 1s linear infinite',
|
||||
WebkitAnimation: 'spin 1s linear infinite',
|
||||
@@ -29,19 +29,19 @@ export default function MainContentStateView({ mode, isMobile, onMenuClick }: Ma
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<h2 className="text-lg font-semibold text-foreground mb-1">{t('mainContent.loading')}</h2>
|
||||
<h2 className="mb-1 text-lg font-semibold text-foreground">{t('mainContent.loading')}</h2>
|
||||
<p className="text-sm">{t('mainContent.settingUpWorkspace')}</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<div className="text-center max-w-md mx-auto px-6">
|
||||
<div className="w-14 h-14 mx-auto mb-5 bg-muted/50 rounded-2xl flex items-center justify-center">
|
||||
<Folder className="w-7 h-7 text-muted-foreground" />
|
||||
<div className="flex flex-1 items-center justify-center">
|
||||
<div className="mx-auto max-w-md px-6 text-center">
|
||||
<div className="mx-auto mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-muted/50">
|
||||
<Folder className="h-7 w-7 text-muted-foreground" />
|
||||
</div>
|
||||
<h2 className="text-xl font-semibold mb-2 text-foreground">{t('mainContent.chooseProject')}</h2>
|
||||
<p className="text-sm text-muted-foreground mb-5 leading-relaxed">{t('mainContent.selectProjectDescription')}</p>
|
||||
<div className="bg-primary/5 rounded-xl p-3.5 border border-primary/10">
|
||||
<h2 className="mb-2 text-xl font-semibold text-foreground">{t('mainContent.chooseProject')}</h2>
|
||||
<p className="mb-5 text-sm leading-relaxed text-muted-foreground">{t('mainContent.selectProjectDescription')}</p>
|
||||
<div className="rounded-xl border border-primary/10 bg-primary/5 p-3.5">
|
||||
<p className="text-sm text-primary">
|
||||
<strong>{t('mainContent.tip')}:</strong> {isMobile ? t('mainContent.createProjectMobile') : t('mainContent.createProjectDesktop')}
|
||||
</p>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { MessageSquare, Terminal, Folder, GitBranch, ClipboardCheck, type LucideIcon } from 'lucide-react';
|
||||
import Tooltip from '../../../Tooltip';
|
||||
import type { AppTab } from '../../../../types/app';
|
||||
import type { Dispatch, SetStateAction } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Tooltip } from '../../../../shared/view/ui';
|
||||
import type { AppTab } from '../../../../types/app';
|
||||
|
||||
type MainContentTabSwitcherProps = {
|
||||
activeTab: AppTab;
|
||||
@@ -39,7 +39,7 @@ export default function MainContentTabSwitcher({
|
||||
const tabs = shouldShowTasksTab ? [...BASE_TABS, TASKS_TAB] : BASE_TABS;
|
||||
|
||||
return (
|
||||
<div className="inline-flex items-center bg-muted/60 rounded-lg p-[3px] gap-[2px]">
|
||||
<div className="inline-flex items-center gap-[2px] rounded-lg bg-muted/60 p-[3px]">
|
||||
{tabs.map((tab) => {
|
||||
const Icon = tab.icon;
|
||||
const isActive = tab.id === activeTab;
|
||||
@@ -48,13 +48,13 @@ export default function MainContentTabSwitcher({
|
||||
<Tooltip key={tab.id} content={t(tab.labelKey)} position="bottom">
|
||||
<button
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={`relative flex items-center gap-1.5 px-2.5 py-[5px] text-sm font-medium rounded-md transition-all duration-150 ${
|
||||
className={`relative flex items-center gap-1.5 rounded-md px-2.5 py-[5px] text-sm font-medium transition-all duration-150 ${
|
||||
isActive
|
||||
? 'bg-background text-foreground shadow-sm'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-3.5 h-3.5" strokeWidth={isActive ? 2.2 : 1.8} />
|
||||
<Icon className="h-3.5 w-3.5" strokeWidth={isActive ? 2.2 : 1.8} />
|
||||
<span className="hidden lg:inline">{t(tab.labelKey)}</span>
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
@@ -45,32 +45,32 @@ export default function MainContentTitle({
|
||||
const showChatNewSession = activeTab === 'chat' && !selectedSession;
|
||||
|
||||
return (
|
||||
<div className="min-w-0 flex items-center gap-2 flex-1 overflow-x-auto scrollbar-hide">
|
||||
<div className="scrollbar-hide flex min-w-0 flex-1 items-center gap-2 overflow-x-auto">
|
||||
{showSessionIcon && (
|
||||
<div className="w-5 h-5 flex-shrink-0 flex items-center justify-center">
|
||||
<SessionProviderLogo provider={selectedSession?.__provider} className="w-4 h-4" />
|
||||
<div className="flex h-5 w-5 flex-shrink-0 items-center justify-center">
|
||||
<SessionProviderLogo provider={selectedSession?.__provider} className="h-4 w-4" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="min-w-0 flex-1">
|
||||
{activeTab === 'chat' && selectedSession ? (
|
||||
<div className="min-w-0">
|
||||
<h2 className="text-sm font-semibold text-foreground whitespace-nowrap overflow-x-auto scrollbar-hide leading-tight">
|
||||
<h2 className="scrollbar-hide overflow-x-auto whitespace-nowrap text-sm font-semibold leading-tight text-foreground">
|
||||
{getSessionTitle(selectedSession)}
|
||||
</h2>
|
||||
<div className="text-[11px] text-muted-foreground truncate leading-tight">{selectedProject.displayName}</div>
|
||||
<div className="truncate text-[11px] leading-tight text-muted-foreground">{selectedProject.displayName}</div>
|
||||
</div>
|
||||
) : showChatNewSession ? (
|
||||
<div className="min-w-0">
|
||||
<h2 className="text-base font-semibold text-foreground leading-tight">{t('mainContent.newSession')}</h2>
|
||||
<div className="text-xs text-muted-foreground truncate leading-tight">{selectedProject.displayName}</div>
|
||||
<h2 className="text-base font-semibold leading-tight text-foreground">{t('mainContent.newSession')}</h2>
|
||||
<div className="truncate text-xs leading-tight text-muted-foreground">{selectedProject.displayName}</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="min-w-0">
|
||||
<h2 className="text-sm font-semibold text-foreground leading-tight">
|
||||
<h2 className="text-sm font-semibold leading-tight text-foreground">
|
||||
{getTabTitle(activeTab, shouldShowTasksTab, t)}
|
||||
</h2>
|
||||
<div className="text-[11px] text-muted-foreground truncate leading-tight">{selectedProject.displayName}</div>
|
||||
<div className="truncate text-[11px] leading-tight text-muted-foreground">{selectedProject.displayName}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -15,7 +15,7 @@ export default function MobileMenuButton({ onMenuClick, compact = false }: Mobil
|
||||
className={buttonClasses}
|
||||
aria-label="Open menu"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
@@ -1,206 +0,0 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import TaskList from '../../../TaskList';
|
||||
import TaskDetail from '../../../TaskDetail';
|
||||
import PRDEditor from '../../../PRDEditor';
|
||||
import { useTaskMaster } from '../../../../contexts/TaskMasterContext';
|
||||
import { api } from '../../../../utils/api';
|
||||
import type { Project } from '../../../../types/app';
|
||||
import type { PrdFile, TaskMasterPanelProps, TaskMasterTask, TaskSelection } from '../../types/types';
|
||||
|
||||
const AnyTaskList = TaskList as any;
|
||||
const AnyTaskDetail = TaskDetail as any;
|
||||
const AnyPRDEditor = PRDEditor as any;
|
||||
|
||||
type TaskMasterContextValue = {
|
||||
tasks?: TaskMasterTask[];
|
||||
currentProject?: Project | null;
|
||||
refreshTasks?: (() => void) | null;
|
||||
};
|
||||
|
||||
type PrdListResponse = {
|
||||
prdFiles?: PrdFile[];
|
||||
prds?: PrdFile[];
|
||||
};
|
||||
|
||||
const PRD_SAVED_MESSAGE = 'PRD saved successfully!';
|
||||
|
||||
function getPrdFiles(data: PrdListResponse): PrdFile[] {
|
||||
return data.prdFiles || data.prds || [];
|
||||
}
|
||||
|
||||
export default function TaskMasterPanel({ isVisible }: TaskMasterPanelProps) {
|
||||
const { tasks = [], currentProject, refreshTasks } = useTaskMaster() as TaskMasterContextValue;
|
||||
|
||||
const [selectedTask, setSelectedTask] = useState<TaskMasterTask | null>(null);
|
||||
const [showTaskDetail, setShowTaskDetail] = useState(false);
|
||||
|
||||
const [showPRDEditor, setShowPRDEditor] = useState(false);
|
||||
const [selectedPRD, setSelectedPRD] = useState<PrdFile | null>(null);
|
||||
const [existingPRDs, setExistingPRDs] = useState<PrdFile[]>([]);
|
||||
const [prdNotification, setPRDNotification] = useState<string | null>(null);
|
||||
|
||||
const prdNotificationTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
const showPrdNotification = useCallback((message: string) => {
|
||||
if (prdNotificationTimeoutRef.current) {
|
||||
clearTimeout(prdNotificationTimeoutRef.current);
|
||||
}
|
||||
|
||||
setPRDNotification(message);
|
||||
prdNotificationTimeoutRef.current = setTimeout(() => {
|
||||
setPRDNotification(null);
|
||||
prdNotificationTimeoutRef.current = null;
|
||||
}, 3000);
|
||||
}, []);
|
||||
|
||||
const loadExistingPrds = useCallback(async () => {
|
||||
if (!currentProject?.name) {
|
||||
setExistingPRDs([]);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await api.get(`/taskmaster/prd/${encodeURIComponent(currentProject.name)}`);
|
||||
if (!response.ok) {
|
||||
setExistingPRDs([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const data = (await response.json()) as PrdListResponse;
|
||||
setExistingPRDs(getPrdFiles(data));
|
||||
} catch (error) {
|
||||
console.error('Failed to load existing PRDs:', error);
|
||||
setExistingPRDs([]);
|
||||
}
|
||||
}, [currentProject?.name]);
|
||||
|
||||
const refreshPrds = useCallback(
|
||||
async (showNotification = false) => {
|
||||
await loadExistingPrds();
|
||||
|
||||
if (showNotification) {
|
||||
showPrdNotification(PRD_SAVED_MESSAGE);
|
||||
}
|
||||
},
|
||||
[loadExistingPrds, showPrdNotification],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
void loadExistingPrds();
|
||||
}, [loadExistingPrds]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (prdNotificationTimeoutRef.current) {
|
||||
clearTimeout(prdNotificationTimeoutRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleTaskClick = useCallback(
|
||||
(task: TaskSelection) => {
|
||||
if (!task || typeof task !== 'object' || !('id' in task)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!('title' in task) || !task.title) {
|
||||
const fullTask = tasks.find((candidate) => String(candidate.id) === String(task.id));
|
||||
if (fullTask) {
|
||||
setSelectedTask(fullTask);
|
||||
setShowTaskDetail(true);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
setSelectedTask(task as TaskMasterTask);
|
||||
setShowTaskDetail(true);
|
||||
},
|
||||
[tasks],
|
||||
);
|
||||
|
||||
const handleTaskDetailClose = useCallback(() => {
|
||||
setShowTaskDetail(false);
|
||||
setSelectedTask(null);
|
||||
}, []);
|
||||
|
||||
const handleTaskStatusChange = useCallback(
|
||||
(taskId: string | number, newStatus: string) => {
|
||||
console.log('Update task status:', taskId, newStatus);
|
||||
refreshTasks?.();
|
||||
},
|
||||
[refreshTasks],
|
||||
);
|
||||
|
||||
const handleOpenPrdEditor = useCallback((prd: PrdFile | null = null) => {
|
||||
setSelectedPRD(prd);
|
||||
setShowPRDEditor(true);
|
||||
}, []);
|
||||
|
||||
const handleClosePrdEditor = useCallback(() => {
|
||||
setShowPRDEditor(false);
|
||||
setSelectedPRD(null);
|
||||
}, []);
|
||||
|
||||
const handlePrdSave = useCallback(async () => {
|
||||
handleClosePrdEditor();
|
||||
await refreshPrds(true);
|
||||
refreshTasks?.();
|
||||
}, [handleClosePrdEditor, refreshPrds, refreshTasks]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`h-full ${isVisible ? 'block' : 'hidden'}`}>
|
||||
<div className="h-full flex flex-col overflow-hidden">
|
||||
<AnyTaskList
|
||||
tasks={tasks}
|
||||
onTaskClick={handleTaskClick}
|
||||
showParentTasks
|
||||
className="flex-1 overflow-y-auto p-4"
|
||||
currentProject={currentProject}
|
||||
onTaskCreated={refreshTasks || undefined}
|
||||
onShowPRDEditor={handleOpenPrdEditor}
|
||||
existingPRDs={existingPRDs}
|
||||
onRefreshPRDs={(showNotification = false) => {
|
||||
void refreshPrds(showNotification);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showTaskDetail && selectedTask && (
|
||||
<AnyTaskDetail
|
||||
task={selectedTask}
|
||||
isOpen={showTaskDetail}
|
||||
onClose={handleTaskDetailClose}
|
||||
onStatusChange={handleTaskStatusChange}
|
||||
onTaskClick={handleTaskClick}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showPRDEditor && (
|
||||
<AnyPRDEditor
|
||||
project={currentProject}
|
||||
projectPath={currentProject?.fullPath || currentProject?.path}
|
||||
onClose={handleClosePrdEditor}
|
||||
isNewFile={!selectedPRD?.isExisting}
|
||||
file={{
|
||||
name: selectedPRD?.name || 'prd.txt',
|
||||
content: selectedPRD?.content || '',
|
||||
}}
|
||||
onSave={handlePrdSave}
|
||||
/>
|
||||
)}
|
||||
|
||||
{prdNotification && (
|
||||
<div className="fixed bottom-4 right-4 z-50 animate-in slide-in-from-bottom-2 duration-300">
|
||||
<div className="bg-green-600 text-white px-4 py-3 rounded-lg shadow-lg flex items-center gap-3">
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span className="font-medium">{prdNotification}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user