MotirBuilding in public
MOTIR · moooon
onMotir
You’re viewing a public project. Anyone can view it — no account needed. Sign in to submit, upvote, or comment on requests.View-only — you can’t edit work items
MOTIR-775

6.16.1 [design] In-place public-page editing UX — authorable hero (text + tags) + readme

Done
Description

Estimate: 75m · Type: design

Design the in-place public-page editing experience for a fully authorable hero. Update the design/public-projects/ three-file asset set (notes + *.mock.html + .png export) — the design gate for every UI subtask below.

Design:

  • Authorable heropublicTagline as the subtitle (with an unset → generic i18n fallback state) and publicTags rendered as the meta Pills (replacing the four hardcoded i18n pills).
  • Admin "Edit page" affordance — visible ONLY to a signed-in project admin viewing the public page (e.g. top-right near the CTA row). Anonymous / non-admin viewers never see it.
  • Edit mode (in place) — entering edit makes editable, on the real page: (a) the tagline (inline input, placeholder "Add a tagline…"), (b) the tags (chips with an ✕ to remove + an "Add tag" input, max-count + empty states), (c) the README body via the shipped MarkdownEditor. A sticky Save / Cancel bar; the page itself is the preview (WYSIWYG). States: empty tagline, zero tags, unsaved-changes guard, save-in-flight, save error.
  • Settings consolidation — the Settings "Public share" section drops the embedded editor and shows the make-public toggle + share link + an "Edit on the public page →" link. Update Panel 6; retire Panel 7's settings split-editor framing.

Acceptance criteria

  • design-notes.md + public-projects.mock.html + public-projects.png updated/committed (three-file rule); copy index updated.
  • Mock from real components/ui/* primitives + --el-*/shape tokens (no Tier-0), AA-safe; full-page Playwright render (light, 2x, ~1200px).
  • Affordance + edit mode (tagline, add/remove tags, body) + all states + settings link shown.

Context refs

  • design/public-projects/; components/ui/MarkdownEditor, Pill, Button, Input; PublicOverviewHero.tsx