33 lines
2.4 KiB
Markdown
33 lines
2.4 KiB
Markdown
|
# Phase 4 Notes (T6)
|
||
|
|
|
||
|
|
## Pages built
|
||
|
|
- **Tasks** (`/tasks`): Kanban board with dnd-kit drag-and-drop between 4 status columns (Todo, In Progress, Done, Cancelled) + List view with TanStack Table. Create/edit via dialog/side panel. Optimistic updates via TanStack Query mutations.
|
||
|
|
- **Habits** (`/habits`): List with streak display, 7-day mini completion grid, "Mark complete" button. Create/edit via dialog/side panel. History tab shows completion log.
|
||
|
|
- **Projects** (`/projects`): Card grid with progress bars. Detail panel with Overview/Tasks/Sections tabs. Create/edit via dialog.
|
||
|
|
- **Notes** (`/notes`): Two-pane layout (list + contentEditable editor). Backlinks and version history toggles. Auto-save on 500ms debounce.
|
||
|
|
- **Calendar** (`/calendar`): Month grid with date-fns. Events from API displayed with color coding. Create/edit/delete via dialogs.
|
||
|
|
- **Graph** (`/graph`): SVG-based circular layout visualization. Filter panel for entity types. Node detail panel. Full react-force-graph-2d integration deferred to T8.
|
||
|
|
- **Search** (`/search`): Debounced cross-entity search. Type filter chips. Recent searches in localStorage. Results grouped by type with highlighted snippets.
|
||
|
|
|
||
|
|
## Shared infrastructure
|
||
|
|
- `src/hooks/use-realtime.ts`: SSE hook subscribing to `/api/realtime` with exponential backoff reconnect. Invalidates TanStack Query caches on entity events.
|
||
|
|
- `src/components/entities/entity-detail-panel.tsx`: Reusable Sheet-based side panel.
|
||
|
|
- `src/lib/types/index.ts`: Shared TypeScript interfaces for all entities.
|
||
|
|
|
||
|
|
## Packages installed
|
||
|
|
- @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities
|
||
|
|
- @tiptap/react, @tiptap/starter-kit, @tiptap/extension-placeholder, @tiptap/extension-mention, @tiptap/extension-task-list, @tiptap/extension-task-item, @tiptap/extension-link, @tiptap/extension-code-block-lowlight, @tiptap/pm, @tiptap/suggestion
|
||
|
|
- recharts
|
||
|
|
- react-big-calendar
|
||
|
|
- react-force-graph-2d
|
||
|
|
- react-hook-form, @hookform/resolvers
|
||
|
|
- @tanstack/react-table
|
||
|
|
- date-fns
|
||
|
|
|
||
|
|
## Notes for T7
|
||
|
|
- useApiQuery / useApiMutation patterns in `src/lib/api.ts` are the standard for all data fetching
|
||
|
|
- EntityDetailPanel in `src/components/entities/` is reusable for any entity
|
||
|
|
- Forms use controlled state (not react-hook-form yet - T7 can upgrade)
|
||
|
|
- Calendar and Graph use basic implementations; T8 will formalize with react-big-calendar and react-force-graph-2d
|
||
|
|
- TipTap is installed but Notes page uses a simple contentEditable for now; T7/T8 can upgrade to full TipTap
|