Skip to content

Give the phone document header the project, build status and people here - #537

Merged
MaggieAppleton merged 6 commits into
mainfrom
design-phone-doc-header
Oct 13, 2026
Merged

MaggieAppleton merged 6 commits into
mainfrom
design-phone-doc-header

Conversation

@MaggieAppleton

@MaggieAppleton MaggieAppleton commented Oct 13, 2026 •

Copy link
Copy Markdown
Collaborator

Phones now get the Direction D document header (follow-up from #507): title over a project · build subtitle, the people here, and a child view that takes the bar instead of stacking a second one.

Root

  • Title (14px, unchanged type) over a subtitle: score · <build>. The build part is the capsule's own glyph and label (Building · 2 of 5, ● Built, ⚠ Build failed · Retry, ● 3 changes · Build) or Build plan, shown as links with invisible 44pt targets. Tapping opens Build, explains a block, or runs the action, same as the capsule did.
  • The title still waits until the heading scrolls away. Until then the subtitle sits on the bar's centre line and slides up when the title fades in.
  • Up to two faces (+N) sit before the comments button and ⋯. The build status stays ≥12px from the faces (gap + padding = 14px), and e2e checks this at 390 and 430.
  • Editing now shows in brand ink in the subtitle's build slot, so it's always visible. The separate pill is gone.

Child (Zoom on phone)

  • Back (Back to <Root>), the child's title, in <Root>, the child's people, comments and ⋯. Actions and rename act on the child: the child room portals its controls into the bar, as split Zoom does.
  • The phone stack bar is removed. Compact non-phone windows keep theirs.

Unchanged: bottom tab bar and badges, keyboard-docked formatting toolbar, hide-on-scroll bar, safe areas, translucent glass.

Before / after (390, light):

root
child
430 long title scrolled
build states 390

Decisions (Maggie, after review)

  1. Comments button stays. When the title needs room, the bar first drops to one face plus a count (+1), and returns to two once the title fits again.
  2. Retry / Build links stay in the subtitle.
  3. The title keeps waiting for the heading at the top of the document.
  4. With a child open, the child's bar shows only on the Document tab. On Chat, Decisions and Build the root's bar returns, with Documents, the root's title, its build status and its actions.

Follow-ups from review: reduced motion drops the subtitle slide; a child that is being edited reads in <Root> · Editing; faces are 20px as in the jig.

Tests

  • New e2e: phone-workspace.e2e.ts (390 and 430: subtitle centring, project/build/people, 44pt targets, long-title truncation, one-face fallback, build ≥12px from faces) and responsive-child-phone.e2e.ts (child takes the bar on Document only, the root's bar on Chat and Decisions, child rename, in <Root> · Editing, Back returns).
  • Not run locally because the e2e ports are held by other sessions; relying on CI. bun run ci and bun run types pass, and the web unit tests pass apart from ignored local jig files.
  • A separate commit renews the design-contract hash for workspace.tsx. The only change there is stackBar now being false on phones; the reviewed class boundaries are unchanged.

🤖 Generated with Claude Code

Landing validation

The landing rebase preserves all six author patches. The combined workspace candidate passed CI, types, production build, 20 focused units, 38 workspace browser cases, and all eight latest child-phone cases. The source-preserving refresh is landed with administrator bypass of a new full CI cycle; prior GitHub CI was green.

@MaggieAppleton

Copy link
Copy Markdown
Collaborator Author

Review: Looks good

Checked in headless Chromium on a built server, mobile emulation with touch, at 390×844 and 430×932. I compared against origin/main on a second server.

What works

  • Root: at the top, score · Build plan sits on the bar's centre line (centre 21.5 vs 22). After scrolling, the title fades in and the subtitle slides under it. Long titles truncate before the faces. No horizontal overflow at either width.
  • Tap targets: Documents, ⋯ and Back are 44×44. The subtitle links get a 44px ::after target. Build is 49px from the first face.
  • Faces: two faces, then +1. The group name lists everyone ("People here: ana, bo, cy").
  • Screen-reader order: Documents, title, project, Build plan (aria-disabled, with its reason), people, comments, actions.
  • Editing: shows as score · Editing in brand ink.
  • Keyboard: with the keyboard open, the docked formatting toolbar sits above it and the bar is unchanged. No regression, on the root or on a child.
  • Hide-on-scroll: the bar hides on scroll-down and returns on scroll-up, on the root and on a child.
  • Child: Back is named Back to <Root>. The bar shows the child's title, in <Root>, the child's faces, and Actions for <Child>. The second crumb bar is gone. Rename opens prefilled with the child's title, saves, and updates the bar and the URL. Back returns to the root URL, and the Documents button comes back.
  • Gain over main: on main, a phone has no way to reach a child's own actions (⋯ there is the root's). This PR fixes that.
  • Design contract: the workspace.tsx hash renewal is safe. The only change is stackBar now being false on phones. Child controls reach the bar through the existing ChildTitleContext portal, the same path split Zoom uses.

Nits (non-blocking)

  1. apps/web/src/phone-workspace.css: the new .phone-top-bar-center transition: transform (the subtitle sliding up when the title appears) isn't in the prefers-reduced-motion: reduce block. Add .phone-top-bar-center { transition: none; } there, so reduced motion keeps only the title's opacity fade.
  2. Child while editing: the subtitle becomes just Editing, so the child loses in <Root>. The root keeps score · Editing. Consider in <Root> · Editing for consistency. Back still names the parent, so this is minor.
  3. Face size: faces are 24px; the jig uses 20px. At 390 the trailing cluster (faces + comments + ⋯) is about 170px, which leaves a scrolled long title only about 163px ("Offline sync for the mo…"). 20px faces would give back about 8px.
  4. Pre-existing, not this PR: a child loaded through an old slug, after a rename redirect, shows no pencil until reload. Main does the same. This PR adds the phone rename path, so it's now easier to hit. Worth a follow-up.
  5. Pre-existing: a child document's empty plan-preface (no provenance) adds a second --document-top-inset. The child's heading sits about 60px lower than the root's. That was true on main too.

Open questions (my opinion)

  1. Comments button vs ⋯: keep it, but show it only when there are open threads, which is what it already does. It is the only phone entry point to the list, and the count is useful status. If the title needs room, show one face before dropping comments.
  2. Retry / Build in the subtitle: keep them. The status alone is a dead end, since the Build view has no rebuild control. The brand ink plus the accessible name "3 changes to build" is clear.
  3. Title waits vs always shown: keep it waiting. At rest the page's own H1 is right below, so a repeated title is noise. Subtitle-only at rest reads cleanly, and the slide-in confirms scroll position. This is HIG-consistent (large-title collapse).
  4. Child bar on non-Document tabs: I'd change this in a follow-up. On Chat, the bar says " in " with the child's ⋯, over the root's chat. The header then describes a document that isn't on screen. Suggestion: on Chat, Decisions and Build show the root's bar (Documents button, root title and build). Show the child bar only on Document, where the child is. The pencil already brings the child back.

CI: all 5 checks green (container, e2e, format/lint/types/tests, chopin CLI, chopin CLI Windows).

MaggieAppleton and others added 6 commits October 13, 2026 12:15
The phone top bar now matches the desktop two-bar header's vocabulary: the title sits over a
subtitle naming the project and the build (the capsule's glyph and label, or Build plan, as
links), with up to two faces beside the actions. An open child takes the bar instead of
adding a stack bar: Back on the left, the child's own title, people and actions, and
"in <parent>" beneath it. The build's state keeps 12px or more from the faces.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
workspace.tsx only stops drawing the stack bar on phones; the reviewed feedback and
chatPresence class boundaries are unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…tion, and size phone faces to 20px

Reduced motion drops the subtitle's slide. A child's subtitle reads "in <Root> · Editing"
while editing rather than losing its parent. Faces are 20px, as in the jig; they are not
controls, so they need no target of their own.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
When the title truncates beside two faces, the bar shows one face and counts the rest
before anything else gives way. It returns to two only once the title would still fit.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Chat, Decisions and Build belong to the root, so off Document the bar is the root's again,
with its Documents button, title, build status and actions.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@MaggieAppleton
MaggieAppleton force-pushed the design-phone-doc-header branch from 13549f0 to de8a972 Compare October 13, 2026 11:16
@MaggieAppleton
MaggieAppleton merged commit 5f9ed7c into main Oct 13, 2026
4 checks passed
@MaggieAppleton
MaggieAppleton deleted the design-phone-doc-header branch October 13, 2026 11:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant