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 / BuildingInPublicBadge visual language (lavender --el-build-bg + AA --el-build-text + accent --el-build-glyph megaphone) 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 (the BuildInPublicManageRow: View public page / Stop). Decide the exact form: the badge made into a link, or a btn-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 + regenerated public-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 reusable pill-building chip)
• design/public-projects/design-notes.md §6.17.3a + §6.17.4 (Panels 10, 12); design/public-projects/public-projects.mock.html
• app/(authed)/settings/project/members/_components/ProjectMembersSettings.tsx BuildInPublicManageRow (the nav target = manage/stop home)