tas/Codewalkers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
478a7f18e9ac9f8ee41a535f39feca1416ea4ed4
Codewalkers/docs/wireframes/v2/content-tab.md
Lukas May 478a7f18e9 docs: Add v2 wireframes and theme specification 
14 files in docs/wireframes/v2/ addressing 13 UX gaps from v1:
- Theme spec with indigo brand, status tokens, terminal/diff tokens,
  dark mode, Geist typography, 6px radius, layered shadows
- Wireframes for all pages with loading/error/empty states
- Shared component specs (SaveIndicator, EmptyState, ErrorState,
  CommandPalette, ThemeToggle)
2026-03-02 18:13:17 +09:00

9.7 KiB
Raw Blame History

Content Tab (v2)

Route: /initiatives/$id (Content tab)

Source: packages/web/src/components/editor/ContentTab.tsx, packages/web/src/components/editor/

v1 -> v2 Changes

Aspect v1 v2
Breadcrumbs None Root > Parent > Current row above title, clickable
Save indicator Bare "Saving..." text, top-right, no success/fail states <SaveIndicator> component: spinner, checkmark (fade), error + retry
Empty root page Blank editor, no guidance Tiptap placeholder: "Start writing... use / for commands"
Root page creation Only via tree context menu hover [+] on nodes Additional [+] button in sidebar header for root-level pages
Deep breadcrumbs N/A Ellipsis collapse: Root > ... > Parent > Current

Default State (with content)

+=============================================================================+
|  Pages              [+]   |  Root > Architecture > Current Page             |
|  --------------------------+                                  [✓] Saved     |
|  ├── Architecture          |  ------------------------------------------------|
|  │   ├── Overview          |                                                 |
|  │   └── Decisions         |  # Authentication Architecture                  |
|  ├── Requirements          |                                                 |
|  └── API Design            |  This document outlines the OAuth 2.0           |
|                             |  implementation strategy for...                 |
|                             |                                                 |
|        192px                |              editor area (flex-1)               |
|                             |                                                 |
+=============================================================================+
  • [+] in sidebar header creates a new root-level child page
  • Breadcrumb segments are clickable links that call onNavigate(pageId)
  • [✓] Saved indicator fades after 2s via CSS opacity transition
  • Tree nodes still show hover [+] for nested child creation (unchanged from v1)

Empty Root Page (placeholder)

+=============================================================================+
|  Pages              [+]   |  Root                                           |
|  --------------------------+                                                 |
|  (empty tree)              |  ------------------------------------------------|
|                             |                                                 |
|                             |  My Initiative Name                             |
|                             |  ^^^^^^^^^^^^^^^^^^^^^^                         |
|                             |  3xl bold title input                           |
|                             |                                                 |
|                             |  Start writing... use / for commands            |
|                             |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^             |
|                             |  muted placeholder text (text-muted-foreground) |
|                             |                                                 |
|                             |                                                 |
|        192px                |              editor area (flex-1)               |
|                             |                                                 |
+=============================================================================+
  • Placeholder uses @tiptap/extension-placeholder with emptyEditorClass
  • Placeholder text disappears on focus/first keystroke
  • Root page title maps to initiativeName (edits update initiative, not page)

Save Indicator States

Three-state component positioned top-right of editor area, inline with breadcrumb row.

Saving (spinner)

  Root > Architecture > Current Page                  [spinner] Saving...
  • Loader2 icon with animate-spin, text-muted-foreground
  • Shown while isSaving or updateInitiativeMutation.isPending

Saved (checkmark, fading)

  Root > Architecture > Current Page                       [✓] Saved
  • Green checkmark icon, text-green-500
  • Fades to opacity-0 after 2s via transition-opacity duration-1000
  • Resets to full opacity on next save cycle

Failed (error with retry)

  Root > Architecture > Current Page                  [!] Failed  [retry]
  • AlertCircle icon, text-destructive
  • [retry] is a ghost button that triggers manual save flush
  • Persists until retry succeeds or new edit triggers auto-save

With Refine Panel Open (3-column layout)

+=============================================================================+
|  Pages    [+]  |  Root > Current Page    [✓] Saved  |  Refine with Agent    |
|  ---------------+                                     |                      |
|  ├── Arch       |  # Auth Architecture               |  [spinner] Architect |
|  │   ├── Ovw    |                                     |  is refining...      |
|  │   └── Dec    |  This document outlines the         |                      |
|  ├── Req        |  OAuth 2.0 implementation...        |                      |
|  └── API        |                                     |                      |
|                  |                                     |                      |
|     192px        |        editor (flex-1)              |       320px          |
|                  |                                     |                      |
+=============================================================================+
  • Refine panel sits above editor in v1 source (not beside it)
  • v2 proposal: move to right column when viewport >= 1280px
  • Below 1280px, refine panel stays above editor (current v1 behavior)
  • Panel width: 320px fixed, editor remains flex-1

Breadcrumb with Deep Nesting (ellipsis collapse)

Depth <= 3: show all segments

  Root > Architecture > Decisions

Depth > 3: collapse middle with ellipsis

  Root > ... > API Endpoints > Rate Limiting
  • Root always visible (first segment)
  • ... is a dropdown trigger showing collapsed intermediate segments
  • Last two segments always visible
  • Clicking ... opens a popover with the full path as clickable links:
  +---------------------------+
  |  System Design            |
  |  Backend Architecture     |
  |  API Layer                |
  +---------------------------+

Page Tree Sidebar Detail

+--------------------------+
|  Pages              [+]  |
|                          |
|  ├── Architecture   [+]  |  <-- [+] on hover: create child
|  │   ├── Overview        |  <-- active page: bg-accent
|  │   └── Decisions       |
|  ├── Requirements   [+]  |
|  └── API Design     [+]  |
|                          |
+--------------------------+
     192px, border-right
  • Header [+] always visible (new in v2) -- creates page under root
  • Node [+] on hover only (unchanged from v1)
  • FileText icon + truncated title per node
  • Active page: bg-accent rounded-md highlight
  • Indentation: 12px per depth level
  • Click navigates; keyboard nav not yet implemented

Loading State

+=============================================================================+
|  +----------+              |  +------------------------------------------+  |
|  |  ░░░░░░  |  skeleton    |  |  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  |  |
|  |  ░░░░░░  |  h-64 w-48   |  |  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  |  |
|  |  ░░░░░░  |              |  |  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  |  |
|  +----------+              |  +------------------------------------------+  |
|     192px                  |              flex-1                             |
+=============================================================================+
  • Shown while rootPageQuery.isLoading
  • Skeleton shimmer components from @/components/Skeleton

Error State

+=============================================================================+
|                                                                             |
|                          [AlertCircle]                                      |
|                  Failed to load editor: <message>                           |
|                                                                             |
|              Make sure the backend server is running                         |
|              with the latest code.                                          |
|                                                                             |
|                          [ Retry ]                                          |
|                                                                             |
+=============================================================================+
  • text-destructive for error message
  • text-muted-foreground for help text
  • Retry button calls rootPageQuery.refetch()

Source

  • packages/web/src/components/editor/ContentTab.tsx
  • packages/web/src/components/editor/PageTree.tsx
  • packages/web/src/components/editor/TiptapEditor.tsx
  • packages/web/src/components/editor/RefineAgentPanel.tsx
  • packages/web/src/components/editor/DeleteSubpageDialog.tsx
  • packages/web/src/components/editor/PageTitleContext.tsx
  • packages/web/src/hooks/useAutoSave.ts
Reference in New Issue View Git Blame Copy Permalink