feat: migrate workspace to shadcn sidebar and chat components

2026-09-28 17:29:08 +09:00
parent 2346848839
commit 96e545401e
61 changed files with 6727 additions and 1146 deletions
@@ -0,0 +1,54 @@
+# shadcn workspace migration
+
+## Target
+
+Replace the custom workspace UI with the Base UI version of shadcn sidebar-09
+at commit 98a1fe67b439324ddc857f47fbdce056600a4329. Preserve its icon rail,
+contextual second sidebar and SidebarInset. Adapt the rail to research chat and
+deck management, keeping the research panel mounted so SSE state remains live.
+On small screens, use the sidebar Sheet and keep all actions reachable.
+
+Use official MessageScroller, Message, Bubble and Marker for the existing Codex
+conversation. Keep transport, history, retry, stop, account selection, Markdown
+and citation navigation. Use shadcn primitives for forms, dialogs, menus and
+post metadata throughout the app. Use Tailwind v4 and shared shadcn semantic
+tokens; remove legacy control styles that override primitives.
+
+Install @shadcn/lint with an executable design-token policy alongside Biome.
+Update README and Nix dependency hash as needed.
+
+## Verification
+
+- Typecheck, Biome, design lint, unit suite, production build, unused-code check.
+- Browser integration suite: decks, source editing, connections, conversation,
+  citation navigation, menus and keyboard focus.
+- Render desktop plus 320/375/414/768 px: rail collapse, mobile Sheet, independent
+  column scrolling, chat composer visibility, no document horizontal overflow.
+- Inspect screenshots and run Axe on relevant states.
+
+## Status
+
+Completed on 2026-09-28.
+
+- SidebarProvider, nested icon/context Sidebars and SidebarInset now implement
+  the referenced sidebar-09 structure; the mobile Sheet keeps its content mounted.
+- Research state and deck-dialog drafts live above the responsive shell. Closing
+  or resizing the sidebar preserves drafts, selected accounts and retry identity.
+- MessageScroller, Message, Bubble/BubbleContent, Marker/MarkerContent, InputGroup
+  and Collapsible replace the chat UI. Markdown list markers and headings remain
+  visible after Tailwind's reset; citation highlighting uses theme tokens.
+- Forms, dialogs, dropdown menus, avatars, badges and empty states use Base UI
+  shadcn components. No backend transport, storage or access contracts changed.
+- @shadcn/lint runs in pnpm lint and rejects raw palette colors. Nix dependency
+  hash and README/deck docs are updated.
+
+Verification: 336 unit tests passed (one explicit live-relay test skipped), all
+56 desktop/mobile E2E tests passed. After the final isolated chat styling fixes,
+all 10 research E2E tests and 22 related unit tests passed again. Typecheck,
+Biome/design lint, Knip, production build and the Nix package build passed.
+Browser checks covered 320/375/414/768px, rendered chat and post screenshots,
+Axe, dialog focus restoration, breakpoint draft preservation and closed-sidebar
+SSE deck updates. Automated browser tests use mock relay/research data.
+A subsequent dev-server smoke check through the Tailscale HTTPS URL confirmed
+the real relay displayed 14 posts across six columns without UI alerts.
+No production deployment was performed.
@@ -2,12 +2,14 @@

 ## Workspace

-Both `/` and `/deck` render the deck-only application. A dark sidebar switches
-decks, adds columns, and jumps to a column. Up to six ordered columns scroll
-independently; only the active deck mounts and fetches its columns. On mobile,
-the sidebar becomes a compact top bar. Native dialogs handle creation and
-editing, with Escape and focus restoration. Column menus offer editing,
-ordering, and deletion; refresh and pagination are manual.
+Both `/` and `/deck` render the research workspace. A collapsible shadcn/ui
+sidebar based on `sidebar-09` switches between research chat and deck management.
+Deck management switches decks, adds columns, and manages connected accounts. Up to six ordered columns scroll independently; only the active deck
+mounts and fetches its columns. On mobile, the sidebar opens as a sheet.
+shadcn Base UI dialogs handle creation and editing, with Escape and focus
+restoration. Column menus offer editing, ordering, and deletion; refresh and
+pagination are manual. The adjacent chat uses MessageScroller, Message, Bubble,
+Marker and InputGroup with the existing research backend.

 Twitter and Mastodon can appear together, with different accounts in each
 column. Original-post links open their source site. Separate reader, search,