diff --git a/.pql/changelog/ticket_history/2026-06.sql b/.pql/changelog/ticket_history/2026-06.sql index 1bfb6dc2..fd1c8ec2 100644 --- a/.pql/changelog/ticket_history/2026-06.sql +++ b/.pql/changelog/ticket_history/2026-06.sql @@ -1143,3 +1143,50 @@ Implications for the mock: - Collapsed pane can be fully hidden (no thin rail needed) since the re-open control lives on the center edge. - Sidebar and context pane share one mirrored control pattern (parity). - Chevron direction reflects state: points outward to expand, inward to collapse.', NULL, '2026-06-09 15:21:37', '2026-06-09 15:21:37', '2026-06-09 15:21:37', NULL, '123270ca44c9cfc48192cfc2412410f7', 1) ON CONFLICT(hash) DO NOTHING; +INSERT INTO ticket_history (ticket_id, field, old_value, new_value, changed_by, changed_at, created_at, updated_at, deleted_at, hash, canonical_version) VALUES ('T-294', 'description', 'Design and add collapse/expand controls for the left sidebar and the right context pane, along the lines of the reference screenshot (green arrows mark the two intended affordance locations — bottom-left of the sidebar and bottom-right of the context pane). + +Scope of this ticket: set up a Frame0 mock to talk through the design before implementing. + +Open questions to resolve in the mock: +- Affordance placement: footer/status-bar anchored (as the screenshot arrows suggest) vs. pane-edge chevron. +- Collapsed state: fully hidden vs. thin rail with a re-expand handle. +- Iconography (chevron direction) and hover/active states. +- Whether sidebar and context pane share one control pattern (parity) or differ. +- Keyboard/CLI parity (D-6): each collapse action needs a clide verb. + +Deliverable: Frame0 wireframe(s) of collapsed + expanded states for both panes, reviewed before any code. + +DESIGN DIRECTION (settled): anchor both toggles on the OUTER EDGES of the center (Claude conversation) pane — one on the left edge controlling the sidebar, one on the right edge controlling the context pane. The control stays fixed on the center-pane edge whether the adjacent pane is open or collapsed, so a single button both collapses an open pane and re-opens a collapsed one (chevron flips direction). This avoids needing a separate "re-expand" handle on the collapsed pane. + +Implications for the mock: +- Collapsed pane can be fully hidden (no thin rail needed) since the re-open control lives on the center edge. +- Sidebar and context pane share one mirrored control pattern (parity). +- Chevron direction reflects state: points outward to expand, inward to collapse.', 'Design and add collapse/expand controls for the left sidebar and the right context pane, along the lines of the reference screenshot (green arrows mark the two intended affordance locations — bottom-left of the sidebar and bottom-right of the context pane). + +Scope of this ticket: set up a Frame0 mock to talk through the design before implementing. + +Open questions to resolve in the mock: +- Affordance placement: footer/status-bar anchored (as the screenshot arrows suggest) vs. pane-edge chevron. +- Collapsed state: fully hidden vs. thin rail with a re-expand handle. +- Iconography (chevron direction) and hover/active states. +- Whether sidebar and context pane share one control pattern (parity) or differ. +- Keyboard/CLI parity (D-6): each collapse action needs a clide verb. + +Deliverable: Frame0 wireframe(s) of collapsed + expanded states for both panes, reviewed before any code. + +DESIGN DIRECTION (settled): anchor both toggles on the OUTER EDGES of the center (Claude conversation) pane — one on the left edge controlling the sidebar, one on the right edge controlling the context pane. The control stays fixed on the center-pane edge whether the adjacent pane is open or collapsed, so a single button both collapses an open pane and re-opens a collapsed one (chevron flips direction). This avoids needing a separate "re-expand" handle on the collapsed pane. + +Implications for the mock: +- Collapsed pane can be fully hidden (no thin rail needed) since the re-open control lives on the center edge. +- Sidebar and context pane share one mirrored control pattern (parity). +- Chevron direction reflects state: points outward to expand, inward to collapse. + +IMPLEMENTATION NOTE: the collapse logic already exists — no new toggle behaviour needed. Commands `sidebar.collapse` (ctrl+shift+1) and `context.collapse` (ctrl+shift+3) are registered in lib/builtin/default_layout/src/extension.dart, exposed in the command palette + menubar, and call arrangement.toggleCollapsed(Slots.sidebar|contextPanel), returning isCollapsed (D-051, D-054). + +So this ticket is scoped to the VISUAL AFFORDANCE only: +- Add the two edge-anchored toggle buttons on the center (Claude) pane''s outer edges. +- On click, invoke the existing `sidebar.collapse` / `context.collapse` commands (do NOT reimplement collapse). +- Read arrangement.isCollapsed(...) to flip the chevron direction per state. +- D-6 CLI/keyboard parity is already satisfied by the existing commands; this adds the mouse affordance. + +Mock: docs/design/wireframes/hud/pane-collapse-toggles.{json,png} — State A (open) + State B (collapsed).', NULL, '2026-06-09 15:24:00', '2026-06-09 15:24:00', '2026-06-09 15:24:00', NULL, '216c6fef2135525d9a901d01975f9f74', 1) ON CONFLICT(hash) DO NOTHING; diff --git a/.pql/changelog/tickets/2026-06.sql b/.pql/changelog/tickets/2026-06.sql index a24fd153..1280b330 100644 --- a/.pql/changelog/tickets/2026-06.sql +++ b/.pql/changelog/tickets/2026-06.sql @@ -2645,3 +2645,32 @@ Implications for the mock: - Collapsed pane can be fully hidden (no thin rail needed) since the re-open control lives on the center edge. - Sidebar and context pane share one mirrored control pattern (parity). - Chevron direction reflects state: points outward to expand, inward to collapse.', 'backlog', 'medium', NULL, NULL, NULL, '2026-06-09 15:18:22', '2026-06-09 15:21:37', NULL, '20afe9ffa7639aca6c6e3f5e85bdbb5e', 1) ON CONFLICT(id) DO UPDATE SET type=excluded.type, parent_id=excluded.parent_id, title=excluded.title, description=excluded.description, status=excluded.status, priority=excluded.priority, assigned_to=excluded.assigned_to, team=excluded.team, decision_ref=excluded.decision_ref, updated_at=excluded.updated_at, deleted_at=excluded.deleted_at, hash=excluded.hash, canonical_version=excluded.canonical_version WHERE excluded.updated_at > tickets.updated_at OR (excluded.updated_at = tickets.updated_at AND excluded.hash > tickets.hash); +INSERT INTO tickets (id, type, parent_id, title, description, status, priority, assigned_to, team, decision_ref, created_at, updated_at, deleted_at, hash, canonical_version) VALUES ('T-294', 'task', 'T-276', 'Collapse buttons for sidebar and context pane', 'Design and add collapse/expand controls for the left sidebar and the right context pane, along the lines of the reference screenshot (green arrows mark the two intended affordance locations — bottom-left of the sidebar and bottom-right of the context pane). + +Scope of this ticket: set up a Frame0 mock to talk through the design before implementing. + +Open questions to resolve in the mock: +- Affordance placement: footer/status-bar anchored (as the screenshot arrows suggest) vs. pane-edge chevron. +- Collapsed state: fully hidden vs. thin rail with a re-expand handle. +- Iconography (chevron direction) and hover/active states. +- Whether sidebar and context pane share one control pattern (parity) or differ. +- Keyboard/CLI parity (D-6): each collapse action needs a clide verb. + +Deliverable: Frame0 wireframe(s) of collapsed + expanded states for both panes, reviewed before any code. + +DESIGN DIRECTION (settled): anchor both toggles on the OUTER EDGES of the center (Claude conversation) pane — one on the left edge controlling the sidebar, one on the right edge controlling the context pane. The control stays fixed on the center-pane edge whether the adjacent pane is open or collapsed, so a single button both collapses an open pane and re-opens a collapsed one (chevron flips direction). This avoids needing a separate "re-expand" handle on the collapsed pane. + +Implications for the mock: +- Collapsed pane can be fully hidden (no thin rail needed) since the re-open control lives on the center edge. +- Sidebar and context pane share one mirrored control pattern (parity). +- Chevron direction reflects state: points outward to expand, inward to collapse. + +IMPLEMENTATION NOTE: the collapse logic already exists — no new toggle behaviour needed. Commands `sidebar.collapse` (ctrl+shift+1) and `context.collapse` (ctrl+shift+3) are registered in lib/builtin/default_layout/src/extension.dart, exposed in the command palette + menubar, and call arrangement.toggleCollapsed(Slots.sidebar|contextPanel), returning isCollapsed (D-051, D-054). + +So this ticket is scoped to the VISUAL AFFORDANCE only: +- Add the two edge-anchored toggle buttons on the center (Claude) pane''s outer edges. +- On click, invoke the existing `sidebar.collapse` / `context.collapse` commands (do NOT reimplement collapse). +- Read arrangement.isCollapsed(...) to flip the chevron direction per state. +- D-6 CLI/keyboard parity is already satisfied by the existing commands; this adds the mouse affordance. + +Mock: docs/design/wireframes/hud/pane-collapse-toggles.{json,png} — State A (open) + State B (collapsed).', 'backlog', 'medium', NULL, NULL, NULL, '2026-06-09 15:18:22', '2026-06-09 15:24:00', NULL, '87737b23e9119a0d46bba4977801997f', 1) ON CONFLICT(id) DO UPDATE SET type=excluded.type, parent_id=excluded.parent_id, title=excluded.title, description=excluded.description, status=excluded.status, priority=excluded.priority, assigned_to=excluded.assigned_to, team=excluded.team, decision_ref=excluded.decision_ref, updated_at=excluded.updated_at, deleted_at=excluded.deleted_at, hash=excluded.hash, canonical_version=excluded.canonical_version WHERE excluded.updated_at > tickets.updated_at OR (excluded.updated_at = tickets.updated_at AND excluded.hash > tickets.hash); diff --git a/docs/design/wireframes/hud/pane-collapse-toggles.json b/docs/design/wireframes/hud/pane-collapse-toggles.json new file mode 100644 index 00000000..5606bfad --- /dev/null +++ b/docs/design/wireframes/hud/pane-collapse-toggles.json @@ -0,0 +1,120 @@ +{ + "name": "Pane Collapse Toggles", + "shapes": { + "titleA": { + "type": "Text", + "left": 40, "top": 50, + "text": "STATE A — both side panes open (toggles sit on center-pane edges)", + "fontColor": "#c8d8f0", "fontSize": 15 + }, + "a-sidebar": { + "type": "Rectangle", + "left": 40, "top": 90, "width": 200, "height": 250, + "fillColor": "#1a1e24", "strokeColor": "#333340", "corners": [6, 6, 6, 6] + }, + "a-sidebar-lbl": { + "type": "Text", "parent": "a-sidebar", + "left": 60, "top": 105, "text": "Sidebar\n(ticket list)", + "fontColor": "#c8d0e0", "fontSize": 13 + }, + "a-center": { + "type": "Rectangle", + "left": 250, "top": 90, "width": 480, "height": 250, + "fillColor": "#2a3040", "strokeColor": "#333340", "corners": [6, 6, 6, 6] + }, + "a-center-lbl": { + "type": "Text", "parent": "a-center", + "left": 270, "top": 105, "text": "Claude conversation (center)", + "fontColor": "#c8d0e0", "fontSize": 13 + }, + "a-context": { + "type": "Rectangle", + "left": 740, "top": 90, "width": 200, "height": 250, + "fillColor": "#1a1e24", "strokeColor": "#333340", "corners": [6, 6, 6, 6] + }, + "a-context-lbl": { + "type": "Text", "parent": "a-context", + "left": 760, "top": 105, "text": "Context\npane", + "fontColor": "#c8d0e0", "fontSize": 13 + }, + "a-toggle-left": { + "type": "Rectangle", + "left": 233, "top": 200, "width": 26, "height": 30, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", "corners": [5, 5, 5, 5] + }, + "a-toggle-left-icon": { + "type": "Text", "parent": "a-toggle-left", + "left": 240, "top": 205, "text": "<", "fontColor": "#c8d8f0", "fontSize": 16 + }, + "a-toggle-right": { + "type": "Rectangle", + "left": 721, "top": 200, "width": 26, "height": 30, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", "corners": [5, 5, 5, 5] + }, + "a-toggle-right-icon": { + "type": "Text", "parent": "a-toggle-right", + "left": 729, "top": 205, "text": ">", "fontColor": "#c8d8f0", "fontSize": 16 + }, + "a-note-left": { + "type": "Text", + "left": 150, "top": 348, "text": "click -> collapse sidebar (edge slides left)", + "fontColor": "#8a92a6", "fontSize": 11 + }, + "a-note-right": { + "type": "Text", + "left": 600, "top": 348, "text": "click -> collapse context (edge slides right)", + "fontColor": "#8a92a6", "fontSize": 11 + }, + + "titleB": { + "type": "Text", + "left": 40, "top": 410, + "text": "STATE B — both collapsed: same buttons stay anchored on center edge, chevrons flip to re-open", + "fontColor": "#c8d8f0", "fontSize": 15 + }, + "b-center": { + "type": "Rectangle", + "left": 40, "top": 450, "width": 900, "height": 250, + "fillColor": "#2a3040", "strokeColor": "#333340", "corners": [6, 6, 6, 6] + }, + "b-center-lbl": { + "type": "Text", "parent": "b-center", + "left": 380, "top": 465, "text": "Claude conversation — full width", + "fontColor": "#c8d0e0", "fontSize": 13 + }, + "b-toggle-left": { + "type": "Rectangle", + "left": 40, "top": 560, "width": 26, "height": 30, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", "corners": [0, 5, 5, 0] + }, + "b-toggle-left-icon": { + "type": "Text", "parent": "b-toggle-left", + "left": 48, "top": 565, "text": ">", "fontColor": "#c8d8f0", "fontSize": 16 + }, + "b-toggle-right": { + "type": "Rectangle", + "left": 914, "top": 560, "width": 26, "height": 30, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", "corners": [5, 0, 0, 5] + }, + "b-toggle-right-icon": { + "type": "Text", "parent": "b-toggle-right", + "left": 921, "top": 565, "text": "<", "fontColor": "#c8d8f0", "fontSize": 16 + }, + "b-note-left": { + "type": "Text", + "left": 80, "top": 595, "text": "click -> re-open sidebar", + "fontColor": "#8a92a6", "fontSize": 11 + }, + "b-note-right": { + "type": "Text", + "left": 760, "top": 595, "text": "click -> re-open context pane", + "fontColor": "#8a92a6", "fontSize": 11 + }, + "footer": { + "type": "Text", + "left": 40, "top": 720, + "text": "One control per edge, fixed to the center pane. Collapsed panes hide fully (no rail). Chevron points the way the edge travels. Mirrored left/right for parity. Each toggle = a clide verb (D-6).", + "fontColor": "#8a92a6", "fontSize": 11 + } + } +} diff --git a/docs/design/wireframes/hud/pane-collapse-toggles.png b/docs/design/wireframes/hud/pane-collapse-toggles.png new file mode 100644 index 00000000..7204385d Binary files /dev/null and b/docs/design/wireframes/hud/pane-collapse-toggles.png differ