Quiet framed empty states for documents and projects #281
- MA
## Why With no document open, the main area was one small grey line on the bare ground, with no frame and no action. An empty project in the sidebar showed "No documents yet." plus a loud underlined "Create document" link that duplicated the sidebar's own New document actions.
## What changed - No-document main area keeps the workspace layout: an empty `room-header` band of the same height, then the same frame classes as the document frame (`m-2` / `shadow-resting` stacked, `mx-3 mb-3` / `shadow-raised` in split mode, `rounded-[12px]`), so the frame top sits at y=50 and nothing jumps when a document opens. Title, one line of help, and a `btn btn-sm btn-secondary` "New document" (or "Add project" with no projects). No icon: the only document-like glyph (`DocumentIcon`) reads as a repository, and the sidebar has no page icon. Lives in lazily loaded `empty-workspace.tsx`. - Empty project in the sidebar is one quiet text-tertiary row: "No documents". Archived view with nothing archived shows "No archived documents" in the same row. The link is removed. Hover/focus behaviour of the project row icon is untouched (owned by compact-sidebar-rows). - Design-audit Empty states specimens updated. - Search/new-document dialog "No matching ..." lines were already the quiet one-line pattern; unchanged. - e2e `document-creation` updated for the new text and the main-area button.
## Screenshots Before desktop:  After desktop:  Before phone:  After phone: 
## Integration and testing
- Replaced the removed `useWorkspaceMode` hook with `useWorkspaceLayout`, attaching its measurement ref to the empty surface so it follows available width and sidebar resizing. - Reviewed the lazy empty fallback and sidebar empty-row changes before renewing their exact dynamic owner hashes. Preserved the scoped 12px frame-radius exception. - Local checks, TypeScript, and all 479 web tests pass. Document-creation browser tests pass on the updated branch. - Full GitHub validation, browser integration, and container checks run before merge.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
MaggieAppletonreferenced this in Compact the Projects sidebar into single-line rows #284last month on GitHub
- MA
**Review:** Changes needed
Checked at c7d9c81b (no newer commit with the shared frame class had landed). `bun run build` passes; the empty state is its own lazy chunk. First-run flow, no-projects state, phone layout and the quiet "No documents" row all look right.
1. **Frame does not match the document frame** (`apps/web/src/empty-workspace.tsx:13`). Measured in the browser at 1440x900: - Empty: radius 10px (`rounded-xl` = `--radius-xl`), `shadow-resting`, box at x=258 y=8. - Document (`workspace.tsx:318-319`): radius 12px (`rounded-[12px]`), `shadow-raised` in split mode, box at x=262 y=50 (m-2 / mx-3 mb-3 plus the header row). Radius differs by 2px and the shadow differs. Fix: share one frame class or constant used by both `workspace.tsx` and `EmptyWorkspace` (same radius, shadow, inset) rather than a second copy of the utilities. Aim for the same inset (mx-3 mb-3 in split) so only the content changes when a document opens. 2. **Top inset jumps ~42px** when a document opens, because the workspace header row (document switcher, avatar) is absent in the empty state. If the shared frame can't absorb that, consider rendering the same header band (empty) above the frame so the frame doesn't move. 3. Minor: the icon is `DocumentIcon`, which renders as a repository glyph at 20px. Fine, but confirm that is the intended icon for "document". 4. Phone (390x844): the empty frame fills the viewport, no horizontal overflow, the sidebar toggle sits in the frame's top-left corner. Acceptable. 5. Not exercised in the browser: button disabled while creating (my route mock raced the POST). The code path (`hasProjects && disabled`) and the updated e2e cover it. No-projects state disables nothing, which is correct.
Everything else (tokens only, tabs/`let`, e2e selector updates, design-audit specimens) is consistent.
- MA
**Review:** Changes needed
Checked at c7d9c81b (no newer commit with the shared frame class had landed). `bun run build` passes; the empty state is its own lazy chunk. First-run flow (Add Project dialog opens over the empty frame), no-projects state, phone layout and the quiet "No documents" row all look right.
1. **Frame does not match the document frame** (`apps/web/src/empty-workspace.tsx:13`). Measured in the browser at 1440x900: - Empty: radius 10px (`rounded-xl` = `--radius-xl`), `shadow-resting`, box at x=258 y=8. - Document (`workspace.tsx:318-319`): radius 12px (`rounded-[12px]`), `shadow-raised` in split mode, box at x=262 y=50 (m-2 / mx-3 mb-3 plus the header row). Radius and shadow differ. Fix: share one frame class or constant used by both `workspace.tsx` and `EmptyWorkspace` (same radius, shadow, inset) rather than a second copy of the utilities, so only the content changes when a document opens. 2. **Top inset jumps ~42px** when a document opens, because the workspace header row (document switcher, avatar) is absent in the empty state. If the shared frame can't absorb that, consider rendering the same empty header band above the frame. 3. Minor: `DocumentIcon` renders as a repository-style glyph at 20px; confirm it is the intended icon. 4. Phone (390x844): the frame fills the viewport, no horizontal overflow, sidebar toggle sits in the frame's top-left corner. Acceptable. 5. Not exercised in the browser: button disabled while creating (my route mock raced the POST). The code (`hasProjects && disabled`) and the updated e2e cover it.
Otherwise consistent: tokens only, tabs/`let`, e2e selectors and design-audit specimens updated.
- MA
Addressed review on c7d9c81b in the latest commits: frame now uses the document frame's classes (rounded-[12px], shadow-raised in split mode, shadow-resting stacked, same margins); an empty room-header band keeps the frame top at y=50; the repository glyph is removed (no page icon exists). Screenshots updated.
lavaman131referenced 7f5e81b0a444last month on GitHub
MaggieAppletonhead-ref-force-pushed 61978cc9bfc7last month on GitHub
MaggieAppletonhead-ref-force-pushed 4b5e93459ecelast month on GitHub
- MA
CI is still failing in `Format, lint, and enforce design tokens`. From the recorded run metadata plus the current diff, the likely root cause is design-contract metadata that still needs review renewal: `scripts/design-contract/exceptions/preserved-values.json` adds the new `EmptyWorkspace` radius exception, and `scripts/design-contract/exceptions/dynamic-web.json` likely still needs refreshed reviewed hashes for the edited dynamic owners in `apps/web/src/navigation-shell.tsx` and `apps/web/src/project-sidebar.tsx`.
I did not push a speculative fix because this runner does not have Bun 1.4.2 available, and the normal Bun installer is blocked here, so I could not run the required reproduction/verification commands (`bun install --frozen-lockfile`, `bun run fix`, `bun run ci`).
Next action for a human: on a machine with Bun 1.4.2, run those commands on `4b5e93459ecec545530d1e635c7145264883d094`, renew any reviewed hashes the design-contract check flags, and rerun CI.
`babysit-head:4b5e93459ecec545530d1e635c7145264883d094`
> [!WARNING] > <details> > <summary>Firewall blocked 1 domain</summary> > > The following domain was blocked by the firewall during workflow execution: > > - `releaseassets.githubusercontent.com` > > To allow these domains, add them to the `network.allowed` list in your workflow frontmatter: > > ```yaml > network: > allowed: > - defaults > - "releaseassets.githubusercontent.com" > ``` > > See [Network Configuration](https://github.github.com/gh-aw/reference/network/) for more information. > > </details>
> Generated by [PR CI fixer](https://github.com/githubnext/chopin/actions/runs/37618976002) · gpt54 · 78.9 AIC · ⌖ 6.27 AIC · ⊞ 15.1K · [◷](https://github.com/search?q=repo%3Agithubnext%2Fchopin+%22gh-aw-workflow-call-id%3A+githubnext%2Fchopin%2Fpr-ci-fix%22&type=issues)
<!-- gh-aw-agentic-workflow: PR CI fixer, engine: codex, model: gpt-5.4, id: 37618976002, workflow_id: pr-ci-fix, run: https://github.com/githubnext/chopin/actions/runs/37618976002 --> <!-- gh-aw-workflow-call-id: githubnext/chopin/pr-ci-fix -->
MaggieAppletonhead-ref-force-pushed 413d87f4f778last month on GitHub
- MA
CI babysitter rechecked the current failed `ci` run for `413d87f4f7789f7864d76964c629c66a50fc4a3e`. The head still matches the recorded candidate, `e2e` and `container` are green, and the latest failure still stops in `Format, lint, and enforce design tokens` before types/tests run. Based on the current diff and prior notes on this head, the first meaningful blocker is still design-contract review metadata rather than product code: `scripts/design-contract/exceptions/preserved-values.json` plus the reviewed dynamic-owner hashes for `apps/web/src/navigation-shell.tsx` and `apps/web/src/project-sidebar.tsx` need human renewal if the UI changes are approved.
I did not queue a commit from this runner because `bun` is not installed here, so I could not run the required local reproduction and verification commands (`bun install --frozen-lockfile`, `bun run fix`, `bun run ci`). Next action for a human: on a machine with Bun 1.4.2 available, rerun those commands on this head, confirm the exact design-contract output, and renew the reviewed hash entries only if the changed frame/empty-state ownership is accepted.
`babysit-head:413d87f4f7789f7864d76964c629c66a50fc4a3e`
> Generated by [PR CI fixer](https://github.com/githubnext/chopin/actions/runs/37619036193) · gpt54 · 39 AIC · ⌖ 4.24 AIC · ⊞ 16.4K · [◷](https://github.com/search?q=repo%3Agithubnext%2Fchopin+%22gh-aw-workflow-call-id%3A+githubnext%2Fchopin%2Fpr-ci-fix%22&type=issues)
<!-- gh-aw-agentic-workflow: PR CI fixer, engine: codex, model: gpt-5.4, id: 37619036193, workflow_id: pr-ci-fix, run: https://github.com/githubnext/chopin/actions/runs/37619036193 --> <!-- gh-aw-workflow-call-id: githubnext/chopin/pr-ci-fix -->
MaggieAppletonhead-ref-force-pushed 564b44b8bbc4last month on GitHub
MaggieAppletonhead-ref-force-pushed 29f95e8253d8last month on GitHub
- MA
CI babysitter rechecked the current failed `ci` run for `29f95e8253d8542ea80f50a5ca9c7ec3edf83c3d`. The first meaningful failure is still the `Format, lint, and enforce design tokens` step, and the job log narrows it to reviewed dynamic-owner hashes only:
- `apps/web/src/navigation-shell.tsx` at the reviewed dynamic-owner sites now hashes to `3d83751fcfb0513151fcb0595e7d2327f5c8d5b90ec7320aaffa325bcd0b07bf` - `apps/web/src/project-sidebar.tsx` now hashes to `c664c3cc97c9b65fc8533073a8a9c061ba8dc99b6223848148ad4fac90dc840d`
I did not queue a `[ci-fix]` commit from this runner because I could not run the required verification commands here: `bun` is not installed on `PATH`, downloading Bun is blocked in this environment, and without a workspace install I could not rerun `bun install --frozen-lockfile`, `bun run fix`, or `bun run ci` locally.
Next action for a human: on a machine with Bun 1.4.2 available, update those two `sourceHash` entries in `scripts/design-contract/exceptions/dynamic-web.json`, run `bun install --frozen-lockfile`, `bun run fix`, and `bun run ci`, and push only if the design-contract check is then clean.
`babysit-head:29f95e8253d8542ea80f50a5ca9c7ec3edf83c3d`
> [!WARNING] > <details> > <summary>Firewall blocked 1 domain</summary> > > The following domain was blocked by the firewall during workflow execution: > > - `releaseassets.githubusercontent.com` > > To allow these domains, add them to the `network.allowed` list in your workflow frontmatter: > > ```yaml > network: > allowed: > - defaults > - "releaseassets.githubusercontent.com" > ``` > > See [Network Configuration](https://github.github.com/gh-aw/reference/network/) for more information. > > </details>
> Generated by [PR CI fixer](https://github.com/githubnext/chopin/actions/runs/37632098780) · gpt54 · 98.5 AIC · ⌖ 4.01 AIC · ⊞ 16.5K · [◷](https://github.com/search?q=repo%3Agithubnext%2Fchopin+%22gh-aw-workflow-call-id%3A+githubnext%2Fchopin%2Fpr-ci-fix%22&type=issues)
<!-- gh-aw-agentic-workflow: PR CI fixer, engine: codex, model: gpt-5.4, id: 37632098780, workflow_id: pr-ci-fix, run: https://github.com/githubnext/chopin/actions/runs/37632098780 --> <!-- gh-aw-workflow-call-id: githubnext/chopin/pr-ci-fix -->
- MA
@copilot make the backgrounds on the empty states the cream background and not white
Copilotmentionedlast month on GitHub
Copilotsubscribedlast month on GitHub
MaggieAppletoncopilot-work-startedlast month on GitHub
> @copilot make the backgrounds on the empty states the cream background and not white
Changed the empty workspace backgrounds to the cream ground token in both layout modes. Commit: `206f68a`.
Copilotmentionedlast month on GitHub
Copilotsubscribedlast month on GitHub
MaggieAppletoncopilot-work-finishedlast month on GitHub
MaggieAppletonhead-ref-force-pushed 3ac085807673last month on GitHub
MaggieAppletonhead-ref-force-pushed bc0e40da5262last month on GitHub
MaggieAppletonmerged 7ac6b1eab271last month on GitHub
MaggieAppletonhead-ref-deletedlast month on GitHub