adding claude file and some plans

2026-08-12 18:55:18 -06:00
parent b206964417
commit 4da16c7573
19 changed files with 1294 additions and 0 deletions
@@ -0,0 +1,71 @@
+# 13 — Frontend (Vue 3 SPA)
+
+Vue 3 + TypeScript + Vite + Pinia + Vue Router + Tailwind, pnpm, in `web/`. Styling authority is [14-design-system.md](14-design-system.md). All API access through one typed client; all live updates through one SSE module.
+
+## Structure
+
+- [ ] `web/src/api/client.ts` — typed fetch wrapper (base `/api/v1`, JSON, error envelope → typed `ApiError`, cookie credentials)
+- [ ] `web/src/api/sse.ts` — EventSource wrapper: connect after login, auto-reconnect with backoff, dispatch frames to the `realtime` store, expose `onReconnect` hooks (pages refetch)
+- [ ] `web/src/router/index.ts` — routes below; global guard redirects unauthenticated → `/login` (bootstraps via `GET /me`)
+- [ ] Layout: `AppShell` (fixed sidebar + navbar + `<router-view>`), auth pages bare
+- [ ] Vite dev proxy: `/api`, `/files`, `/webhooks` → Go server port
+
+## Routes & pages
+
+- [ ] `/login` — email/password + OAuth buttons (hidden per config)
+- [ ] `/register` — sign-up (notes that first user becomes admin)
+- [ ] `/oauth/callback` — post-OAuth landing, bootstraps session, redirects
+- [ ] `/` — **Dashboard**: favorite + recent projects, "assigned to me" issue list, cross-project activity feed
+- [ ] `/inbox` — notification inbox (unread filter, mark read/all)
+- [ ] `/search` — full search page (type tabs)
+- [ ] `/projects` — project cards (favorites first, status/priority badges, favorite toggle)
+- [ ] `/projects/:id` — **Project overview**: description (markdown), members, links, attachments, dependencies (both directions), activity feed
+- [ ] `/projects/:id/issues` — **Issue table**: sortable columns, FilterBar, URL-synced filters/sort, row click → detail
+- [ ] `/projects/:id/board` — **Kanban**: 7 fixed status columns, drag-and-drop (optimistic), card = `#N`, title, labels, assignee avatar, points badge, blocked indicator, epic color strip
+- [ ] `/projects/:id/issues/:num` — **Issue detail**: editable title/description, sidebar (status, priority, points, assignee, epic, dates, labels, watchers, watch toggle), sub-issues list (+create), blockers list, attachments, links, activity feed ∪ comments with resolve, MarkdownEditor for comments
+- [ ] `/projects/:id/epics` — epic list with progress bars (counts + points), status filter
+- [ ] `/projects/:id/epics/:epicId` — epic detail: description, status, color, ordered issue list (drag to reorder, attach existing / create new)
+- [ ] `/projects/:id/wiki` — page list; `/projects/:id/wiki/:slug` — view; `/projects/:id/wiki/:slug/edit` + `/projects/:id/wiki/new` — edit/create with preview
+- [ ] `/projects/:id/settings` — tabs: general (fields, status, git URL, transfer, delete) | members | labels | webhooks (incoming secret, outgoing CRUD + delivery log) | export | danger zone — owner-gated tabs hidden for members
+- [ ] `/settings` — tabs: profile | security (password) | tokens (PAT create/reveal-once/revoke) | notifications (email_mode)
+- [ ] `/admin/users` — admin only: user list, admin toggle, delete
+- [ ] 404 page; project-scope 404s render "not found or no access"
+
+## Pinia stores
+
+- [ ] `auth` — me, bootstrap, login/logout, guards
+- [ ] `projects` — list + current project (members, labels, dependencies)
+- [ ] `issues` — table query state (filters/sort/page, URL-synced), detail cache
+- [ ] `board` — per-status ordered lists, optimistic move (rank computed client-side between neighbors, PATCH sent, rollback on error)
+- [ ] `epics` — list + detail + ordering
+- [ ] `comments` — per-issue comments + resolve state
+- [ ] `wiki` — page list + current page
+- [ ] `notifications` — unread count, inbox, mark-read
+- [ ] `realtime` — SSE connection state; routes `data` frames: if the pointed-at resource is in an active store (current board/table/detail/feed), patch or refetch it; `notification` frames → `notifications` store + toast
+- [ ] `search` — palette state, recents (localStorage)
+- [ ] `ui` — toasts, modals, sidebar collapse
+
+## Shared components
+
+- [ ] `KanbanBoard` / `KanbanColumn` / `IssueCard` — drag via vuedraggable or a small pointer-events implementation; column headers show count
+- [ ] `IssueTable` + `FilterBar` (status/assignee/label/priority/epic pickers + text search) + `SortHeader`
+- [ ] `MarkdownEditor` — textarea + write/preview tabs, `@` mention autocomplete (project members), `#` issue autocomplete, paste/drop image → attachment upload
+- [ ] `MarkdownView` — markdown-it + DOMPurify, mention chips, `#N` router-links, code highlight
+- [ ] `ActivityFeed` — renders audit entries (icon + actor + verb + target + relative time)
+- [ ] `NotificationBell` — unread badge, dropdown of latest 10, link to `/inbox`
+- [ ] `CommandPalette` — Cmd/Ctrl+K overlay ([10-search.md](10-search.md))
+- [ ] Badges/pills: `StatusBadge` (per-status colors), `PriorityBadge`, `PointsBadge`, `LabelPill` (label color), `EpicPill` (epic color)
+- [ ] `UserAvatar` (initials fallback) + `AssigneePicker` + `MemberPicker`
+- [ ] `EpicProgressBar` (counts + points tooltip)
+- [ ] `WatchButton`, `FavoriteStar`
+- [ ] `AttachmentUploader` (drag-drop zone) + `AttachmentList` (image preview, download, delete)
+- [ ] `DatePicker`, `ConfirmDialog`, `ToastHost`, `EmptyState` (illustrated, per design system)
+
+## Behaviors
+
+- [ ] Optimistic updates for board drags and inline status/assignee edits; rollback + toast on API error
+- [ ] URL is the source of truth for table filters/sort (shareable, refresh-safe)
+- [ ] SSE reconnect → refetch active page data + unread count ([09-notifications-realtime.md](09-notifications-realtime.md))
+- [ ] Keyboard: Cmd/Ctrl+K palette; `c` new issue on board/table pages; Esc closes modals
+- [ ] Every list has loading skeletons + designed empty states; destructive actions use `ConfirmDialog`
+- [ ] Route titles set per page (`SoloPM — {project} — {page}`)