6.17.6 [design] Public-state header slot — active "Building in public" indicator linking to settings
Estimate: 45m · Type: design
Design the public-state of the project-shell header's build-in-public slot. Today that slot (the right cluster of app/(authed)/_components/TopNav.tsx:82) renders the BuildInPublicButton "Start building in public" CTA only when the project is NOT public — app/(authed)/layout.tsx:122-124 nulls buildInPublicProjectKey once accessLevel === 'public', so when a project IS building in public the header slot goes empty. The status is then legible only in Settings → Members/Access and the public visitor chrome.
The 6.17.3 / 6.17.4 design intent was that the SAME slot becomes a "Building in public" status indicator once public (design/public-projects/design-notes.md §6.17.3a "the SAME header slot that shows the status badge once public" + §6.17.4 Panel 12; the shipped components/projects/BuildingInPublicBadge.tsx's own comment says it is "the same chip the project-shell header shows once 6.17.3's header slot lands") — but that header state was never shipped. This subtask designs it, and goes one step further per Yue's ask: the indicator is clickable and routes to the build-in-public settings.
Design the active affordance that fills the slot when accessLevel === 'public':
- (a) Reads as a live "Building in public" status — reuse the shipped
pill-building/BuildingInPublicBadgevisual language (lavender--el-build-bg+ AA--el-build-text+ accent--el-build-glyphmegaphone) so the team sees the project is building in public right now. - (b) Is CLICKABLE → the build-in-public settings — the manage/stop home at
/settings/project/members(theBuildInPublicManageRow: View public page / Stop). Decide the exact form: the badge made into a link, or abtn-build-style button wrapping the badge; the hover/focus affordance; and the accessible name (e.g. "Building in public — manage"). - Settle VISIBILITY against the mirror + existing intent. The settings badge is described as shown "wherever the project is identified to its team" (§6.17.4), while manage/stop is admin-only (
assertCanManage). Decide whether non-admins see a non-interactive badge while admins get the link-to-settings, or all team members get the link — justify from rung 1 (GitHub / Linear / Notion surface a public/published status to the whole team in the header and route the click to visibility settings).
Update the design/public-projects/ THREE-file asset set together (design-notes.md + public-projects.mock.html + regenerated public-projects.png). Extend the Panel-12 header state to show this active linked indicator, with exact copy, --el-* colour + shape tokens, and the nav target. This is the design gate for 6.17.7.
Acceptance criteria
- The
design/public-projects/three files are updated together (notes +public-projects.mock.html+ regeneratedpublic-projects.png). - The notes specify: the public-state header affordance (badge-as-link vs button), its copy, accessible name, hover/focus,
--el-build-*colour + shape tokens, the navigation target (/settings/project/members), and the visibility / admin-gating decision with its mirror-product justification. - The mock renders the header slot in BOTH states (non-public "Start building in public" CTA vs public linked "Building in public" indicator) so the stateful single slot is unambiguous — it must never show both.
Context refs
app/(authed)/_components/TopNav.tsx:40-93(the header slot),app/(authed)/layout.tsx:116-124(the server gating that nulls the key once public)components/projects/BuildingInPublicBadge.tsx(the reusablepill-buildingchip)design/public-projects/design-notes.md§6.17.3a + §6.17.4 (Panels 10, 12);design/public-projects/public-projects.mock.htmlapp/(authed)/settings/project/members/_components/ProjectMembersSettings.tsxBuildInPublicManageRow(the nav target = manage/stop home)