Refactor the UI and add Documents back.#777
Conversation
WalkthroughReplaces local visual containers with shared UI primitives, adds project layout modes and search, implements Documents CRUD with new service/hooks and modals, refactors Tasks UI/styling and accessibility, and re-exports a pill-navigation primitive. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant Viewer as DocumentViewer
participant Docs as DocsTab
participant Mut as useUpdateDocument
participant Svc as documentService
participant API as /api/projects/:pid/docs/:did
U->>Viewer: edit content
U->>Viewer: click Save
Viewer->>Docs: onSave(documentId, content)
Docs->>Mut: mutate({ documentId, updates })
Mut->>Svc: updateDocument(projectId, documentId, updates)
Svc->>API: PUT /api/projects/:pid/docs/:did
API-->>Svc: 200 updated document
Svc-->>Mut: ProjectDocument
Mut-->>Docs: onSuccess (invalidate queries, toast)
Docs-->>Viewer: save complete (exit edit mode)
sequenceDiagram
autonumber
participant U as User
participant Header as ProjectHeader
participant View as ProjectsView
participant List as ProjectList
U->>Header: type search
Header->>View: onSearchChange(query)
View->>View: filter & sort projects
View->>List: render filtered list
U->>Header: toggle layout
Header->>View: onLayoutModeChange(mode)
View->>List: render chosen layout (horizontal/sidebar)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~75 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Merged in PR #776 (refactor/knowledge-ui) from main. No conflicts - different features.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
archon-ui-main/src/features/projects/documents/DocsTab.tsx (1)
71-83: Add error handling to ensure modal closes on failure.If
deleteDocumentMutation.mutateAsyncthrows, the modal cleanup code (lines 81-82) won't execute, leaving the modal open with stale state. While the mutation'sonErrorcallback shows a toast, the user experience is degraded because they must manually cancel a stuck modal.Apply this diff to handle errors gracefully:
const confirmDelete = async () => { if (!documentToDelete) return; - await deleteDocumentMutation.mutateAsync(documentToDelete.id); - - // Clear selection if deleted document was selected - if (selectedDocument?.id === documentToDelete.id) { - setSelectedDocument(null); - } - - setShowDeleteModal(false); - setDocumentToDelete(null); + try { + await deleteDocumentMutation.mutateAsync(documentToDelete.id); + + // Clear selection if deleted document was selected + if (selectedDocument?.id === documentToDelete.id) { + setSelectedDocument(null); + } + } finally { + // Always clean up modal state, even on error + setShowDeleteModal(false); + setDocumentToDelete(null); + } };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
archon-ui-main/src/features/projects/documents/DocsTab.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
archon-ui-main/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
archon-ui-main/src/**/*.{ts,tsx}: Frontend TypeScript must use strict mode with no implicit any
Use TanStack Query for all data fetching; avoid prop drilling
Use database values directly in the frontend; avoid mapping layers between BE and FE typesNever return null to indicate failure in frontend TypeScript; throw errors with details instead
Files:
archon-ui-main/src/features/projects/documents/DocsTab.tsx
archon-ui-main/src/features/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use Biome in features: 120 character line length, double quotes, and trailing commas
Use Biome formatting/conventions in features (120 char lines, double quotes, trailing commas)
Files:
archon-ui-main/src/features/projects/documents/DocsTab.tsx
archon-ui-main/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use ESLint rules for legacy frontend code outside /src/features
Files:
archon-ui-main/src/features/projects/documents/DocsTab.tsx
archon-ui-main/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
TypeScript strict mode with no implicit any in the frontend
Files:
archon-ui-main/src/features/projects/documents/DocsTab.tsx
archon-ui-main/src/features/**/*.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
Ensure no dynamic Tailwind class construction (avoid runtime-generated class strings)
Files:
archon-ui-main/src/features/projects/documents/DocsTab.tsx
🧠 Learnings (1)
📚 Learning: 2025-10-11T01:51:55.916Z
Learnt from: sean-eskerium
PR: coleam00/Archon#777
File: archon-ui-main/src/features/projects/documents/DocsTab.tsx:59-59
Timestamp: 2025-10-11T01:51:55.916Z
Learning: The Archon codebase is a single-user application without user authentication. Hardcoded "User" author values in document creation (e.g., in DocsTab.tsx) are intentional and serve to identify user-created content versus AI-generated content. Do not recommend adding authentication, user context, or retrieving author information from auth hooks.
Applied to files:
archon-ui-main/src/features/projects/documents/DocsTab.tsx
🧬 Code graph analysis (1)
archon-ui-main/src/features/projects/documents/DocsTab.tsx (7)
archon-ui-main/src/features/projects/documents/hooks/useDocumentQueries.ts (3)
useUpdateDocument(57-78)useCreateDocument(83-114)useDeleteDocument(119-137)archon-ui-main/src/features/projects/documents/types/document.ts (1)
DocumentContent(8-17)archon-ui-main/src/features/ui/primitives/button.tsx (1)
Button(11-130)archon-ui-main/src/features/ui/primitives/input.tsx (1)
Input(8-29)archon-ui-main/src/features/projects/documents/components/DocumentCard.tsx (1)
DocumentCard(67-183)archon-ui-main/src/features/projects/documents/components/DocumentViewer.tsx (1)
DocumentViewer(18-279)archon-ui-main/src/features/projects/documents/components/AddDocumentModal.tsx (1)
AddDocumentModal(25-136)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Backend Tests (Python + pytest)
🔇 Additional comments (3)
archon-ui-main/src/features/projects/documents/DocsTab.tsx (3)
40-51: LGTM! Type safety and error propagation improvements implemented.The function now uses the properly typed
DocumentContentinterface and rethrows errors so theDocumentViewercan maintain edit mode on failure. This addresses the previous concerns about type safety and error handling.
90-97: LGTM! State reset fully addresses previous concerns.The effect now comprehensively resets all state when switching projects, including modal flags and staged deletion. This prevents stale viewer content, failed saves, and lingering modals.
208-218: LGTM! Consistent modal control pattern implemented.The modal now uses a clean controlled pattern with the
openprop managing visibility,onOpenChangehandling cleanup, and null-safe access todocumentToDelete. This resolves the previous inconsistency between conditional rendering and controlled props.
Refactor the UI and add Documents back.
Runs `gh auth status` as a non-blocking check after server starts. Logs a warning if gh is not authenticated, helping diagnose expired tokens or missing auth before workflows fail at runtime. Closes #777 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Runs `gh auth status` as a non-blocking check after server starts. Logs a warning if gh is not authenticated, helping diagnose expired tokens or missing auth before workflows fail at runtime. Closes coleam00#777 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Runs `gh auth status` as a non-blocking check after server starts. Logs a warning if gh is not authenticated, helping diagnose expired tokens or missing auth before workflows fail at runtime. Closes coleam00#777 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 participant
Pull Request
Summary
Complete Projects Feature UI Refactor implementing UI_STANDARDS.md compliance, primitive library adoption, and full document CRUD functionality. This PR modernizes the entire Projects feature with glassmorphism consistency, accessibility improvements, responsive design, and adds comprehensive project document management.
Changes Made
Phase 0-4: UI Standards Compliance - Fixed 21/24 violations from UI consistency review
Primitive Library Migration
Layout Toggle System
Project Search
Document Browser Feature (Complete CRUD)
/api/projects/{projectId}/docsendpointsCode Quality
anytounknownfor type safetyType of Change
Affected Services
Testing
Test Evidence
Checklist
Breaking Changes
None. All changes are additive or improve existing functionality without breaking the API.
Additional Notes
UI Consistency Review
Created comprehensive review document:
PRPs/reviews/ui-consistency-review-projects.mdFiles Modified (18 files)
Core Components:
ProjectsView.tsx- Layout toggle system, search, PillNavigation integrationProjectHeader.tsx- Added layout toggle, search inputProjectCard.tsx- SelectableCard migration, responsive pillsProjectList.tsx- w-full constraintTaskCard.tsx- Glassmorphism tokens, cn() conversionsTasksTab.tsx- ViewControls Card primitive, aria-pressedTableView.tsx- Row variants, aria-labels on action buttonsBoardView.tsx- Responsive gridKanbanColumn.tsx- Transparent columnstask-styles.tsx- Dark mode variantsDocuments Feature (New):
DocsTab.tsx- Complete rebuild with CRUD operationsDocumentCard.tsx- Full-width cards with type-colored glow, accessibility fixesDocumentViewer.tsx- ReactMarkdown rendering, Edit/Preview toggle, Save functionalityAddDocumentModal.tsx- Create documents with error handlingdocumentService.ts- API integration with null-safety checksuseDocumentQueries.ts- TanStack Query hooks with proper invalidationPrimitives:
primitives/index.ts- Exported PillNavigationPerformance Improvements
Dependencies
No new dependencies added. Used existing:
react-markdown(already installed, v10.1.0)Screenshots
See PR description for before/after screenshots of:
Summary by CodeRabbit
New Features
Refactor
Style