fix(mobile): off-canvas drawers for the Files & Artifacts views #42

Merged

lz merged 9 commits from fix/mobile-ui-files into main

2026-06-23 16:14:17 +02:00

lz commented

2026-06-21 23:45:47 +02:00

Owner

Summary

On phone-width viewports the Files and Artifacts views were unreadably narrow: MainSplit collapses its two top-level panes at 768px, but the nested side columns had no responsive handling, so three fixed columns (240px artifact list + 280px comment sidebar, or the 220px file tree) squeezed the content to nothing.

This adds Pattern A — off-canvas drawers, scoped entirely to @media (max-width: 768px):

File tree, artifact list → left drawers; comment sidebar → right drawer (transform: translateX(±100%) + an .open class).
Toggles live in MainSplit's right-pane toolbar: tree/list immediately right of the ‹ back button, comments N (open-comment count) on the right. Text labels, no emoji — matching the existing pin/save button convention (the project has no icon library). .scope-chip is hidden ≤768px to make room.
State threads from MainSplit via Svelte 5 $bindable props into FileExplorerPanel (treeOpen), ArtifactsPanel (listOpen/commentsOpen/openCommentCount) and ArtifactViewer → CommentSidebar (drawerOpen). Left drawers auto-close on selection; a tap-scrim closes any drawer.
New pure helper countOpenComments (unit-tested) backs the comment-count badge.

Desktop (>768px) is unchanged by construction — every new rule is inside the media query or gated on a .mobile-drawer/.open class; no original column rule was touched.

Opt-in gating keeps shared components safe: the drawer behavior only activates when a mobileDrawer prop is passed, so the Config Explorer (FileExplorerPanel) and the artifact pop-out page (ArtifactViewer) render exactly as before.

Pop-out page drawerization is intentionally deferred (it has no toolbar to host a toggle) — see the spec's "Out of scope".

Design spec: docs/superpowers/specs/2026-06-21-mobile-drawers-files-artifacts-design.md
Plan: docs/superpowers/plans/2026-06-21-mobile-drawers-files-artifacts.md

Test Plan

Automated (all green): pnpm test (539 passed, incl. new artifact-comments), pnpm typecheck (0 errors), pnpm lint (clean).

Manual ⚠️ still pending (no headless browser in the dev worker) — please verify at ≤768px:

Files tab: tree toggle right of back; tree slides over and closes on file-select; scrim closes it.
Artifacts tab: list (right of back) + comments N (right) toggles; both drawers slide; list closes on artifact-select; N tracks open comments.
Submitting/approving still flips to the Terminal tab.
Regression: Config Explorer file tree and the artifact pop-out page are unchanged at ≤768px.
>768px: every view pixel-identical to main.

## Summary On phone-width viewports the Files and Artifacts views were unreadably narrow: `MainSplit` collapses its two top-level panes at 768px, but the **nested** side columns had no responsive handling, so three fixed columns (240px artifact list + 280px comment sidebar, or the 220px file tree) squeezed the content to nothing. This adds **Pattern A — off-canvas drawers**, scoped entirely to `@media (max-width: 768px)`: - **File tree**, **artifact list** → left drawers; **comment sidebar** → right drawer (`transform: translateX(±100%)` + an `.open` class). - Toggles live in `MainSplit`'s right-pane toolbar: `tree`/`list` immediately right of the `‹` back button, `comments N` (open-comment count) on the right. Text labels, no emoji — matching the existing `pin`/`save` button convention (the project has no icon library). `.scope-chip` is hidden ≤768px to make room. - State threads from `MainSplit` via Svelte 5 `$bindable` props into `FileExplorerPanel` (`treeOpen`), `ArtifactsPanel` (`listOpen`/`commentsOpen`/`openCommentCount`) and `ArtifactViewer` → `CommentSidebar` (`drawerOpen`). Left drawers auto-close on selection; a tap-scrim closes any drawer. - New pure helper `countOpenComments` (unit-tested) backs the comment-count badge. **Desktop (>768px) is unchanged by construction** — every new rule is inside the media query or gated on a `.mobile-drawer`/`.open` class; no original column rule was touched. **Opt-in gating** keeps shared components safe: the drawer behavior only activates when a `mobileDrawer` prop is passed, so the Config Explorer (`FileExplorerPanel`) and the artifact pop-out page (`ArtifactViewer`) render exactly as before. Pop-out page drawerization is intentionally deferred (it has no toolbar to host a toggle) — see the spec's "Out of scope". Design spec: `docs/superpowers/specs/2026-06-21-mobile-drawers-files-artifacts-design.md` Plan: `docs/superpowers/plans/2026-06-21-mobile-drawers-files-artifacts.md` ## Test Plan Automated (all green): `pnpm test` (539 passed, incl. new `artifact-comments`), `pnpm typecheck` (0 errors), `pnpm lint` (clean). Manual ⚠️ **still pending** (no headless browser in the dev worker) — please verify at ≤768px: - [ ] Files tab: `tree` toggle right of back; tree slides over and closes on file-select; scrim closes it. - [ ] Artifacts tab: `list` (right of back) + `comments N` (right) toggles; both drawers slide; `list` closes on artifact-select; `N` tracks open comments. - [ ] Submitting/approving still flips to the Terminal tab. - [ ] Regression: Config Explorer file tree and the artifact pop-out page are unchanged at ≤768px. - [ ] >768px: every view pixel-identical to `main`.

lz added 9 commits

2026-06-21 23:45:48 +02:00

docs(spec): mobile drawers for Files & Artifacts views 888dd83e18

docs(plan): implementation plan for mobile drawers (Files & Artifacts) c58f8fa07a

feat(artifacts): countOpenComments helper for mobile comment badge 6eb7725e88

feat(file-explorer): opt-in mobile drawer for the file tree f867cc4841

feat(main-split): mobile file-tree toggle in the right-pane toolbar ca5d8965ff

feat(artifacts): opt-in mobile drawer for the comment sidebar 98acdc2acc

feat(artifacts): forward mobile comment-drawer state through ArtifactViewer 64b1e77428

feat(artifacts): mobile list drawer + open-comment count in ArtifactsPanel 0b58fc2be6

feat(main-split): mobile artifact list + comments toggles in the toolbar

ci / nexus (pull_request) Successful in 4m4s