d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2026-04-29 08:51:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor/shared and tasks components (#473)

Browse Source 
* 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
2026-03-06 01:47:58 +03:00
committed by GitHub
parent 8d28438fe7
commit 844de26ada
254 changed files with 14571 additions and 9347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
src/components/prd-editor/PRDEditor.tsx Normal file
View File

@@ -0,0 +1,138 @@
import { useCallback, useMemo, useState } from 'react';
import type { Project } from '../../types/app';
import { usePrdDocument } from './hooks/usePrdDocument';
import { usePrdKeyboardShortcuts } from './hooks/usePrdKeyboardShortcuts';
import { usePrdRegistry } from './hooks/usePrdRegistry';
import { usePrdSave } from './hooks/usePrdSave';
import type { PrdFile } from './types';
import { ensurePrdExtension } from './utils/fileName';
import OverwriteConfirmModal from './view/OverwriteConfirmModal';
import PrdEditorLoadingState from './view/PrdEditorLoadingState';
import PrdEditorWorkspace from './view/PrdEditorWorkspace';
type PRDEditorProps = {
file?: PrdFile | null;
onClose: () => void;
projectPath?: string;
project?: Project | null;
initialContent?: string;
isNewFile?: boolean;
onSave?: () => Promise<void> | void;
};
export default function PRDEditor({
file,
onClose,
projectPath,
project,
initialContent = '',
isNewFile = false,
onSave,
}: PRDEditorProps) {
const [showOverwriteConfirm, setShowOverwriteConfirm] = useState<boolean>(false);
const [overwriteFileName, setOverwriteFileName] = useState<string>('');
const { content, setContent, fileName, setFileName, loading, loadError } = usePrdDocument({
file,
isNewFile,
initialContent,
projectPath,
});
const { existingPrds, refreshExistingPrds } = usePrdRegistry({
projectName: project?.name,
});
const isExistingFile = useMemo(() => !isNewFile || Boolean(file?.isExisting), [file?.isExisting, isNewFile]);
const { savePrd, saving, saveSuccess } = usePrdSave({
projectName: project?.name,
existingPrds,
isExistingFile,
onAfterSave: async () => {
await refreshExistingPrds();
await onSave?.();
},
});
const handleDownload = useCallback(() => {
const blob = new Blob([content], { type: 'text/markdown' });
const url = URL.createObjectURL(blob);
const anchor = document.createElement('a');
const downloadedFileName = ensurePrdExtension(fileName || 'prd');
anchor.href = url;
anchor.download = downloadedFileName;
document.body.appendChild(anchor);
anchor.click();
document.body.removeChild(anchor);
URL.revokeObjectURL(url);
}, [content, fileName]);
const handleSave = useCallback(
async (allowOverwrite = false) => {
const result = await savePrd({
content,
fileName,
allowOverwrite,
});
if (result.status === 'needs-overwrite') {
setOverwriteFileName(result.fileName);
setShowOverwriteConfirm(true);
return;
}
if (result.status === 'failed') {
alert(result.message);
}
},
[content, fileName, savePrd],
);
const confirmOverwrite = useCallback(async () => {
setShowOverwriteConfirm(false);
await handleSave(true);
}, [handleSave]);
usePrdKeyboardShortcuts({
onSave: () => {
void handleSave();
},
onClose,
});
if (loading) {
return <PrdEditorLoadingState />;
}
return (
<>
<PrdEditorWorkspace
content={content}
onContentChange={setContent}
fileName={fileName}
onFileNameChange={setFileName}
isNewFile={isNewFile}
saving={saving}
saveSuccess={saveSuccess}
onSave={() => {
void handleSave();
}}
onDownload={handleDownload}
onClose={onClose}
loadError={loadError}
/>
<OverwriteConfirmModal
isOpen={showOverwriteConfirm}
fileName={overwriteFileName || ensurePrdExtension(fileName || 'prd')}
saving={saving}
onCancel={() => setShowOverwriteConfirm(false)}
onConfirm={() => {
void confirmOverwrite();
}}
/>
</>
);
}

67
src/components/prd-editor/constants.ts Normal file
View File

@@ -0,0 +1,67 @@
export const PRD_TEMPLATE = `# Product Requirements Document
## 1. Overview
- Product Name:
- Owner:
- Last Updated:
- Version:
Describe what problem this product solves and who it serves.
## 2. Objectives
- Primary objective:
- Secondary objective:
- Out-of-scope:
## 3. User Stories
- As a <role>, I want <capability>, so that <benefit>.
- As a <role>, I want <capability>, so that <benefit>.
## 4. Functional Requirements
### Core Requirements
- Requirement 1
- Requirement 2
### Edge Cases
- Edge case 1
- Edge case 2
## 5. Non-Functional Requirements
- Performance:
- Security:
- Reliability:
- Accessibility:
## 6. Success Metrics
- Metric 1:
- Metric 2:
## 7. Technical Notes
- Architecture constraints:
- Dependencies:
- Integration points:
## 8. Release Plan
### Milestone 1
- Scope:
- Exit criteria:
### Milestone 2
- Scope:
- Exit criteria:
## 9. Risks and Mitigations
- Risk:
- Impact:
- Mitigation:
## 10. Open Questions
- Question 1
- Question 2
`;
export const PRD_DOCS_URL =
'https://github.com/eyaltoledano/claude-task-master/blob/main/docs/examples.md';
export const INVALID_FILE_NAME_CHARACTERS = /[<>:"/\\|?*]/g;
export const PRD_EXTENSION_PATTERN = /\.(txt|md)$/i;

132
src/components/prd-editor/hooks/usePrdDocument.ts Normal file
View File

@@ -0,0 +1,132 @@
import { useCallback, useEffect, useState } from 'react';
import { api } from '../../../utils/api';
import { PRD_TEMPLATE } from '../constants';
import type { PrdFile } from '../types';
import { createDefaultPrdName, sanitizeFileName, stripPrdExtension } from '../utils/fileName';
type UsePrdDocumentArgs = {
file?: PrdFile | null;
isNewFile: boolean;
initialContent: string;
projectPath?: string;
};
type UsePrdDocumentResult = {
content: string;
setContent: (nextContent: string) => void;
fileName: string;
setFileName: (nextFileName: string) => void;
loading: boolean;
loadError: string | null;
};
export function usePrdDocument({
file,
isNewFile,
initialContent,
projectPath,
}: UsePrdDocumentArgs): UsePrdDocumentResult {
const [content, setContent] = useState<string>(initialContent || '');
const [fileName, setFileNameState] = useState<string>('');
const [loading, setLoading] = useState<boolean>(!isNewFile);
const [loadError, setLoadError] = useState<string | null>(null);
const setFileName = useCallback((nextFileName: string) => {
setFileNameState(sanitizeFileName(nextFileName));
}, []);
useEffect(() => {
let isMounted = true;
const initialize = async () => {
const defaultName = file?.name
? stripPrdExtension(file.name)
: createDefaultPrdName(new Date());
if (isMounted) {
setFileNameState(defaultName);
}
// Loading precedence:
// 1) new file -> initial content or template
// 2) provided content -> use it directly
// 3) legacy file path -> fetch from API
if (isNewFile) {
if (!isMounted) {
return;
}
setContent(initialContent || PRD_TEMPLATE);
setLoadError(null);
setLoading(false);
return;
}
if (file?.content) {
if (!isMounted) {
return;
}
setContent(file.content);
setLoadError(null);
setLoading(false);
return;
}
if (!file?.projectName || !file?.path) {
if (!isMounted) {
return;
}
setContent(initialContent || PRD_TEMPLATE);
setLoadError(null);
setLoading(false);
return;
}
try {
setLoading(true);
const response = await api.readFile(file.projectName, file.path);
if (!response.ok) {
throw new Error(`Failed to load file: ${response.status} ${response.statusText}`);
}
const data = (await response.json()) as { content?: string };
if (!isMounted) {
return;
}
setContent(data.content || PRD_TEMPLATE);
setLoadError(null);
} catch (error) {
const message = error instanceof Error ? error.message : 'Unknown error';
if (!isMounted) {
return;
}
setContent(initialContent || PRD_TEMPLATE);
setLoadError(`Unable to load file content: ${message}`);
} finally {
if (isMounted) {
setLoading(false);
}
}
};
void initialize();
return () => {
isMounted = false;
};
}, [file, initialContent, isNewFile, projectPath]);
return {
content,
setContent,
fileName,
setFileName,
loading,
loadError,
};
}

34
src/components/prd-editor/hooks/usePrdKeyboardShortcuts.ts Normal file
View File

@@ -0,0 +1,34 @@
import { useEffect } from 'react';
type UsePrdKeyboardShortcutsArgs = {
onSave: () => void;
onClose: () => void;
};
export function usePrdKeyboardShortcuts({
onSave,
onClose,
}: UsePrdKeyboardShortcutsArgs): void {
useEffect(() => {
// Keep shortcuts global so the editor behaves consistently in fullscreen and modal mode.
const handleKeyDown = (event: KeyboardEvent) => {
const loweredKey = event.key.toLowerCase();
if ((event.ctrlKey || event.metaKey) && loweredKey === 's') {
event.preventDefault();
onSave();
return;
}
if (event.key === 'Escape') {
event.preventDefault();
onClose();
}
};
document.addEventListener('keydown', handleKeyDown);
return () => {
document.removeEventListener('keydown', handleKeyDown);
};
}, [onClose, onSave]);
}

50
src/components/prd-editor/hooks/usePrdRegistry.ts Normal file
View File

@@ -0,0 +1,50 @@
import { useCallback, useEffect, useState } from 'react';
import { api } from '../../../utils/api';
import type { ExistingPrdFile, PrdListResponse } from '../types';
type UsePrdRegistryArgs = {
projectName?: string;
};
type UsePrdRegistryResult = {
existingPrds: ExistingPrdFile[];
refreshExistingPrds: () => Promise<void>;
};
function getPrdFiles(data: PrdListResponse): ExistingPrdFile[] {
return data.prdFiles || data.prds || [];
}
export function usePrdRegistry({ projectName }: UsePrdRegistryArgs): UsePrdRegistryResult {
const [existingPrds, setExistingPrds] = useState<ExistingPrdFile[]>([]);
const refreshExistingPrds = useCallback(async () => {
if (!projectName) {
setExistingPrds([]);
return;
}
try {
const response = await api.get(`/taskmaster/prd/${encodeURIComponent(projectName)}`);
if (!response.ok) {
setExistingPrds([]);
return;
}
const data = (await response.json()) as PrdListResponse;
setExistingPrds(getPrdFiles(data));
} catch (error) {
console.error('Failed to fetch existing PRDs:', error);
setExistingPrds([]);
}
}, [projectName]);
useEffect(() => {
void refreshExistingPrds();
}, [refreshExistingPrds]);
return {
existingPrds,
refreshExistingPrds,
};
}

111
src/components/prd-editor/hooks/usePrdSave.ts Normal file
View File

@@ -0,0 +1,111 @@
import { useCallback, useEffect, useRef, useState } from 'react';
import { authenticatedFetch } from '../../../utils/api';
import type { ExistingPrdFile, SavePrdInput, SavePrdResult } from '../types';
import { ensurePrdExtension } from '../utils/fileName';
type UsePrdSaveArgs = {
projectName?: string;
existingPrds: ExistingPrdFile[];
isExistingFile: boolean;
onAfterSave?: () => Promise<void>;
};
type UsePrdSaveResult = {
savePrd: (input: SavePrdInput) => Promise<SavePrdResult>;
saving: boolean;
saveSuccess: boolean;
};
export function usePrdSave({
projectName,
existingPrds,
isExistingFile,
onAfterSave,
}: UsePrdSaveArgs): UsePrdSaveResult {
const [saving, setSaving] = useState<boolean>(false);
const [saveSuccess, setSaveSuccess] = useState<boolean>(false);
const saveSuccessTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
useEffect(() => {
return () => {
if (saveSuccessTimeoutRef.current) {
clearTimeout(saveSuccessTimeoutRef.current);
}
};
}, []);
const savePrd = useCallback(
async ({ content, fileName, allowOverwrite = false }: SavePrdInput): Promise<SavePrdResult> => {
if (!content.trim()) {
return { status: 'failed', message: 'Please add content before saving.' };
}
if (!fileName.trim()) {
return { status: 'failed', message: 'Please provide a filename for the PRD.' };
}
if (!projectName) {
return { status: 'failed', message: 'No project selected. Please reopen the editor.' };
}
const finalFileName = ensurePrdExtension(fileName.trim());
const hasConflict = existingPrds.some((prd) => prd.name === finalFileName);
// Overwrite confirmation is only required when creating a brand-new PRD.
if (hasConflict && !allowOverwrite && !isExistingFile) {
return { status: 'needs-overwrite', fileName: finalFileName };
}
setSaving(true);
try {
const response = await authenticatedFetch(`/api/taskmaster/prd/${encodeURIComponent(projectName)}`, {
method: 'POST',
body: JSON.stringify({
fileName: finalFileName,
content,
}),
});
if (!response.ok) {
const fallbackMessage = `Save failed: ${response.status}`;
try {
const errorData = (await response.json()) as { message?: string };
return { status: 'failed', message: errorData.message || fallbackMessage };
} catch {
return { status: 'failed', message: fallbackMessage };
}
}
if (saveSuccessTimeoutRef.current) {
clearTimeout(saveSuccessTimeoutRef.current);
}
setSaveSuccess(true);
saveSuccessTimeoutRef.current = setTimeout(() => {
setSaveSuccess(false);
saveSuccessTimeoutRef.current = null;
}, 2000);
if (onAfterSave) {
await onAfterSave();
}
return { status: 'saved', fileName: finalFileName };
} catch (error) {
const message = error instanceof Error ? error.message : 'Unknown error';
return { status: 'failed', message: `Error saving PRD: ${message}` };
} finally {
setSaving(false);
}
},
[existingPrds, isExistingFile, onAfterSave, projectName],
);
return {
savePrd,
saving,
saveSuccess,
};
}

1
src/components/prd-editor/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from './PRDEditor';

30
src/components/prd-editor/types.ts Normal file
View File

@@ -0,0 +1,30 @@
export type PrdFile = {
name?: string;
path?: string;
projectName?: string;
content?: string;
isExisting?: boolean;
};
export type ExistingPrdFile = {
name: string;
content?: string;
isExisting?: boolean;
[key: string]: unknown;
};
export type PrdListResponse = {
prdFiles?: ExistingPrdFile[];
prds?: ExistingPrdFile[];
};
export type SavePrdInput = {
content: string;
fileName: string;
allowOverwrite?: boolean;
};
export type SavePrdResult =
| { status: 'saved'; fileName: string }
| { status: 'needs-overwrite'; fileName: string }
| { status: 'failed'; message: string };

18
src/components/prd-editor/utils/fileName.ts Normal file
View File

@@ -0,0 +1,18 @@
import { INVALID_FILE_NAME_CHARACTERS, PRD_EXTENSION_PATTERN } from '../constants';
export function sanitizeFileName(value: string): string {
return value.replace(INVALID_FILE_NAME_CHARACTERS, '');
}
export function stripPrdExtension(value: string): string {
return value.replace(PRD_EXTENSION_PATTERN, '');
}
export function ensurePrdExtension(value: string): string {
return PRD_EXTENSION_PATTERN.test(value) ? value : `${value}.txt`;
}
export function createDefaultPrdName(date: Date): string {
const isoDate = date.toISOString().split('T')[0];
return `prd-${isoDate}`;
}

77
src/components/prd-editor/view/GenerateTasksModal.tsx Normal file
View File

@@ -0,0 +1,77 @@
import { Sparkles, X } from 'lucide-react';
import { PRD_DOCS_URL } from '../constants';
type GenerateTasksModalProps = {
isOpen: boolean;
fileName: string;
onClose: () => void;
};
export default function GenerateTasksModal({
isOpen,
fileName,
onClose,
}: GenerateTasksModalProps) {
if (!isOpen) {
return null;
}
return (
<div className="fixed inset-0 z-[300] flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm">
<div className="w-full max-w-md rounded-lg border border-gray-200 bg-white shadow-xl dark:border-gray-700 dark:bg-gray-800">
<div className="flex items-center justify-between border-b border-gray-200 p-6 dark:border-gray-700">
<div className="flex items-center gap-3">
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-purple-100 dark:bg-purple-900/50">
<Sparkles className="h-4 w-4 text-purple-600 dark:text-purple-400" />
</div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
Generate Tasks from PRD
</h3>
</div>
<button
onClick={onClose}
className="rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-300"
>
<X className="h-5 w-5" />
</button>
</div>
<div className="space-y-4 p-6">
<div className="rounded-lg border border-purple-200 bg-purple-50 p-4 dark:border-purple-800 dark:bg-purple-900/20">
<h4 className="mb-2 font-semibold text-purple-900 dark:text-purple-100">
Ask Claude Code directly
</h4>
<p className="mb-3 text-sm text-purple-800 dark:text-purple-200">
Save this PRD, then ask Claude Code in chat to parse the file and create your initial tasks.
</p>
<div className="rounded border border-purple-200 bg-white p-3 dark:border-purple-700 dark:bg-gray-800">
<p className="mb-1 text-xs font-medium text-gray-600 dark:text-gray-400">Example prompt</p>
<p className="font-mono text-xs text-gray-900 dark:text-white">
I have a PRD at .taskmaster/docs/{fileName}. Parse it and create the initial tasks.
</p>
</div>
</div>
<div className="border-t border-gray-200 pt-4 text-center dark:border-gray-700">
<a
href={PRD_DOCS_URL}
target="_blank"
rel="noopener noreferrer"
className="inline-block text-sm font-medium text-purple-600 underline hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300"
>
View TaskMaster documentation
</a>
</div>
<button
onClick={onClose}
className="w-full rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
>
Got it
</button>
</div>
</div>
</div>
);
}

60
src/components/prd-editor/view/OverwriteConfirmModal.tsx Normal file
View File

@@ -0,0 +1,60 @@
import { AlertTriangle, Save } from 'lucide-react';
type OverwriteConfirmModalProps = {
isOpen: boolean;
fileName: string;
saving: boolean;
onCancel: () => void;
onConfirm: () => void;
};
export default function OverwriteConfirmModal({
isOpen,
fileName,
saving,
onCancel,
onConfirm,
}: OverwriteConfirmModalProps) {
if (!isOpen) {
return null;
}
return (
<div className="fixed inset-0 z-[300] flex items-center justify-center p-4">
<div className="fixed inset-0 bg-black/50" onClick={onCancel} />
<div className="relative w-full max-w-md rounded-lg border border-gray-200 bg-white shadow-xl dark:border-gray-700 dark:bg-gray-800">
<div className="p-6">
<div className="mb-4 flex items-center">
<div className="mr-3 rounded-full bg-yellow-100 p-2 dark:bg-yellow-900">
<AlertTriangle className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />
</div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">File Already Exists</h3>
</div>
<p className="mb-6 text-sm text-gray-600 dark:text-gray-400">
A PRD named "{fileName}" already exists. Do you want to overwrite it?
</p>
<div className="flex justify-end gap-3">
<button
onClick={onCancel}
disabled={saving}
className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
>
Cancel
</button>
<button
onClick={onConfirm}
disabled={saving}
className="flex items-center gap-2 rounded-md bg-yellow-600 px-4 py-2 text-sm text-white transition-colors hover:bg-yellow-700 disabled:opacity-50"
>
<Save className="h-4 w-4" />
<span>{saving ? 'Saving...' : 'Overwrite'}</span>
</button>
</div>
</div>
</div>
</div>
);
}

61
src/components/prd-editor/view/PrdEditorBody.tsx Normal file
View File

@@ -0,0 +1,61 @@
import { useMemo } from 'react';
import { markdown } from '@codemirror/lang-markdown';
import { oneDark } from '@codemirror/theme-one-dark';
import { EditorView } from '@codemirror/view';
import CodeMirror from '@uiw/react-codemirror';
import MarkdownPreview from '../../code-editor/view/subcomponents/markdown/MarkdownPreview';
type PrdEditorBodyProps = {
content: string;
onContentChange: (nextContent: string) => void;
previewMode: boolean;
isDarkMode: boolean;
wordWrap: boolean;
};
export default function PrdEditorBody({
content,
onContentChange,
previewMode,
isDarkMode,
wordWrap,
}: PrdEditorBodyProps) {
const extensions = useMemo(
() => [markdown(), ...(wordWrap ? [EditorView.lineWrapping] : [])],
[wordWrap],
);
if (previewMode) {
return (
<div className="prose prose-gray h-full max-w-none overflow-y-auto p-6 dark:prose-invert">
<MarkdownPreview content={content} />
</div>
);
}
return (
<CodeMirror
value={content}
onChange={onContentChange}
extensions={extensions}
theme={isDarkMode ? oneDark : undefined}
height="100%"
style={{
fontSize: '14px',
height: '100%',
}}
basicSetup={{
lineNumbers: true,
foldGutter: true,
dropCursor: false,
allowMultipleSelections: false,
indentOnInput: true,
bracketMatching: true,
closeBrackets: true,
autocompletion: true,
highlightSelectionMatches: true,
searchKeymap: true,
}}
/>
);
}

36
src/components/prd-editor/view/PrdEditorFooter.tsx Normal file
View File

@@ -0,0 +1,36 @@
import { useMemo } from 'react';
type PrdEditorFooterProps = {
content: string;
};
type ContentStats = {
lines: number;
characters: number;
words: number;
};
function getContentStats(content: string): ContentStats {
return {
lines: content.split('\n').length,
characters: content.length,
words: content.split(/\s+/).filter(Boolean).length,
};
}
export default function PrdEditorFooter({ content }: PrdEditorFooterProps) {
const stats = useMemo(() => getContentStats(content), [content]);
return (
<div className="flex flex-shrink-0 items-center justify-between border-t border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800">
<div className="flex items-center gap-4 text-sm text-gray-600 dark:text-gray-400">
<span>Lines: {stats.lines}</span>
<span>Characters: {stats.characters}</span>
<span>Words: {stats.words}</span>
<span>Format: Markdown</span>
</div>
<div className="text-sm text-gray-500 dark:text-gray-400">Press Ctrl+S to save and Esc to close</div>
</div>
);
}

228
src/components/prd-editor/view/PrdEditorHeader.tsx Normal file
View File

@@ -0,0 +1,228 @@
import { useRef } from 'react';
import type { ReactNode } from 'react';
import {
Download,
Eye,
FileText,
Maximize2,
Minimize2,
Moon,
Save,
Sparkles,
Sun,
X,
} from 'lucide-react';
import { cn } from '../../../lib/utils';
type PrdEditorHeaderProps = {
fileName: string;
onFileNameChange: (nextFileName: string) => void;
isNewFile: boolean;
previewMode: boolean;
onTogglePreview: () => void;
wordWrap: boolean;
onToggleWordWrap: () => void;
isDarkMode: boolean;
onToggleTheme: () => void;
onDownload: () => void;
onOpenGenerateTasks: () => void;
canGenerateTasks: boolean;
onSave: () => void;
saving: boolean;
saveSuccess: boolean;
isFullscreen: boolean;
onToggleFullscreen: () => void;
onClose: () => void;
};
type HeaderIconButtonProps = {
title: string;
onClick: () => void;
icon: ReactNode;
active?: boolean;
};
function HeaderIconButton({ title, onClick, icon, active = false }: HeaderIconButtonProps) {
return (
<button
onClick={onClick}
title={title}
className={cn(
'p-2 rounded-md min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center transition-colors',
active
? 'text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-900/50'
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800',
)}
>
{icon}
</button>
);
}
export default function PrdEditorHeader({
fileName,
onFileNameChange,
isNewFile,
previewMode,
onTogglePreview,
wordWrap,
onToggleWordWrap,
isDarkMode,
onToggleTheme,
onDownload,
onOpenGenerateTasks,
canGenerateTasks,
onSave,
saving,
saveSuccess,
isFullscreen,
onToggleFullscreen,
onClose,
}: PrdEditorHeaderProps) {
const fileNameInputRef = useRef<HTMLInputElement | null>(null);
return (
<div className="flex min-w-0 flex-shrink-0 items-center justify-between border-b border-gray-200 p-4 dark:border-gray-700">
<div className="flex min-w-0 flex-1 items-center gap-3">
<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded bg-purple-600">
<FileText className="h-4 w-4 text-white" />
</div>
<div className="min-w-0 flex-1">
<div className="flex min-w-0 flex-col gap-2 sm:flex-row sm:items-center">
<div className="flex min-w-0 flex-1 items-center gap-1">
<div className="flex min-w-0 flex-1 items-center rounded-md border border-gray-200 bg-gray-50 px-3 py-2 focus-within:border-purple-500 focus-within:ring-2 focus-within:ring-purple-500 dark:border-gray-600 dark:bg-gray-700 dark:focus-within:border-purple-400 dark:focus-within:ring-purple-400">
<input
ref={fileNameInputRef}
type="text"
value={fileName}
onChange={(event) => onFileNameChange(event.target.value)}
className="min-w-0 flex-1 border-none bg-transparent text-base font-medium text-gray-900 placeholder-gray-400 outline-none dark:text-white dark:placeholder-gray-500 sm:text-sm"
placeholder="Enter PRD filename"
maxLength={100}
/>
<span className="ml-1 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 sm:text-xs">
.txt
</span>
</div>
<button
onClick={() => fileNameInputRef.current?.focus()}
className="p-1 text-gray-400 transition-colors hover:text-purple-600 dark:hover:text-purple-400"
title="Focus filename input"
>
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
/>
</svg>
</button>
</div>
<div className="flex flex-shrink-0 items-center gap-2">
<span className="whitespace-nowrap rounded bg-purple-100 px-2 py-1 text-xs text-purple-600 dark:bg-purple-900 dark:text-purple-300">
PRD
</span>
{isNewFile && (
<span className="whitespace-nowrap rounded bg-green-100 px-2 py-1 text-xs text-green-600 dark:bg-green-900 dark:text-green-300">
New
</span>
)}
</div>
</div>
<p className="mt-1 truncate text-xs text-gray-500 dark:text-gray-400 sm:text-sm">
Product Requirements Document
</p>
</div>
</div>
<div className="flex flex-shrink-0 items-center gap-1 md:gap-2">
<HeaderIconButton
title={previewMode ? 'Switch to edit mode' : 'Preview markdown'}
onClick={onTogglePreview}
icon={<Eye className="h-5 w-5 md:h-4 md:w-4" />}
active={previewMode}
/>
<HeaderIconButton
title={wordWrap ? 'Disable word wrap' : 'Enable word wrap'}
onClick={onToggleWordWrap}
icon={<span className="font-mono text-sm font-bold md:text-xs">WRAP</span>}
active={wordWrap}
/>
<HeaderIconButton
title="Toggle theme"
onClick={onToggleTheme}
icon={
isDarkMode ? (
<Sun className="h-5 w-5 md:h-4 md:w-4" />
) : (
<Moon className="h-5 w-5 md:h-4 md:w-4" />
)
}
/>
<HeaderIconButton
title="Download PRD"
onClick={onDownload}
icon={<Download className="h-5 w-5 md:h-4 md:w-4" />}
/>
<button
onClick={onOpenGenerateTasks}
disabled={!canGenerateTasks}
className={cn(
'px-3 py-2 rounded-md disabled:opacity-50 flex items-center gap-2 transition-colors text-sm font-medium text-white min-h-[44px] md:min-h-0',
'bg-purple-600 hover:bg-purple-700',
)}
title="Generate tasks from PRD content"
>
<Sparkles className="h-4 w-4" />
<span className="hidden md:inline">Generate Tasks</span>
</button>
<button
onClick={onSave}
disabled={saving}
className={cn(
'px-3 py-2 text-white rounded-md disabled:opacity-50 flex items-center gap-2 transition-colors min-h-[44px] md:min-h-0',
saveSuccess ? 'bg-green-600 hover:bg-green-700' : 'bg-purple-600 hover:bg-purple-700',
)}
>
{saveSuccess ? (
<>
<svg className="h-5 w-5 md:h-4 md:w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
<span className="hidden sm:inline">Saved!</span>
</>
) : (
<>
<Save className="h-5 w-5 md:h-4 md:w-4" />
<span className="hidden sm:inline">{saving ? 'Saving...' : 'Save PRD'}</span>
</>
)}
</button>
<button
onClick={onToggleFullscreen}
className="hidden items-center justify-center rounded-md p-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white md:flex"
title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
>
{isFullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
</button>
<HeaderIconButton
title="Close"
onClick={onClose}
icon={<X className="h-6 w-6 md:h-4 md:w-4" />}
/>
</div>
</div>
);
}

12
src/components/prd-editor/view/PrdEditorLoadingState.tsx Normal file
View File

@@ -0,0 +1,12 @@
export default function PrdEditorLoadingState() {
return (
<div className="fixed inset-0 z-[200] md:flex md:items-center md:justify-center md:bg-black/50">
<div className="flex h-full w-full items-center justify-center bg-white p-8 dark:bg-gray-900 md:h-auto md:w-auto md:rounded-lg">
<div className="flex items-center gap-3">
<div className="h-6 w-6 animate-spin rounded-full border-b-2 border-blue-600" />
<span className="text-gray-900 dark:text-white">Loading PRD...</span>
</div>
</div>
</div>
);
}

114
src/components/prd-editor/view/PrdEditorWorkspace.tsx Normal file
View File

@@ -0,0 +1,114 @@
import { useState } from 'react';
import { cn } from '../../../lib/utils';
import { ensurePrdExtension } from '../utils/fileName';
import GenerateTasksModal from './GenerateTasksModal';
import PrdEditorBody from './PrdEditorBody';
import PrdEditorFooter from './PrdEditorFooter';
import PrdEditorHeader from './PrdEditorHeader';
type PrdEditorWorkspaceProps = {
content: string;
onContentChange: (nextContent: string) => void;
fileName: string;
onFileNameChange: (nextFileName: string) => void;
isNewFile: boolean;
saving: boolean;
saveSuccess: boolean;
onSave: () => void;
onDownload: () => void;
onClose: () => void;
loadError: string | null;
};
export default function PrdEditorWorkspace({
content,
onContentChange,
fileName,
onFileNameChange,
isNewFile,
saving,
saveSuccess,
onSave,
onDownload,
onClose,
loadError,
}: PrdEditorWorkspaceProps) {
const [isFullscreen, setIsFullscreen] = useState<boolean>(false);
const [isDarkMode, setIsDarkMode] = useState<boolean>(true);
const [previewMode, setPreviewMode] = useState<boolean>(false);
const [wordWrap, setWordWrap] = useState<boolean>(true);
const [showGenerateModal, setShowGenerateModal] = useState<boolean>(false);
const handleOpenGenerateTasks = () => {
if (!content.trim()) {
alert('Please add content to the PRD before generating tasks.');
return;
}
setShowGenerateModal(true);
};
return (
<div
className={cn(
'fixed inset-0 z-[200] md:bg-black/50 md:flex md:items-center md:justify-center',
isFullscreen ? 'md:p-0' : 'md:p-4',
)}
>
<div
className={cn(
'bg-white dark:bg-gray-900 shadow-2xl flex flex-col',
'w-full h-full md:rounded-lg md:shadow-2xl',
isFullscreen
? 'md:w-full md:h-full md:rounded-none'
: 'md:w-full md:max-w-6xl md:h-[85vh] md:max-h-[85vh]',
)}
>
{loadError && (
<div className="border-b border-yellow-200 bg-yellow-50 px-4 py-3 text-sm text-yellow-800 dark:border-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-200">
{loadError}
</div>
)}
<PrdEditorHeader
fileName={fileName}
onFileNameChange={onFileNameChange}
isNewFile={isNewFile}
previewMode={previewMode}
onTogglePreview={() => setPreviewMode((current) => !current)}
wordWrap={wordWrap}
onToggleWordWrap={() => setWordWrap((current) => !current)}
isDarkMode={isDarkMode}
onToggleTheme={() => setIsDarkMode((current) => !current)}
onDownload={onDownload}
onOpenGenerateTasks={handleOpenGenerateTasks}
canGenerateTasks={Boolean(content.trim())}
onSave={onSave}
saving={saving}
saveSuccess={saveSuccess}
isFullscreen={isFullscreen}
onToggleFullscreen={() => setIsFullscreen((current) => !current)}
onClose={onClose}
/>
<div className="flex-1 overflow-hidden">
<PrdEditorBody
content={content}
onContentChange={onContentChange}
previewMode={previewMode}
isDarkMode={isDarkMode}
wordWrap={wordWrap}
/>
</div>
<PrdEditorFooter content={content} />
</div>
<GenerateTasksModal
isOpen={showGenerateModal}
fileName={ensurePrdExtension(fileName || 'prd')}
onClose={() => setShowGenerateModal(false)}
/>
</div>
);
}