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-409

6.12.1 Design — the public project view + public roadmap + submit/upvote/comment surfaces + the make-public toggle

Done
Description

Estimate: 55m

Type: design (THE design gate — produced FIRST; every UI code subtask here — 6.12.4, 6.12.6, 6.12.7, 6.12.8 — depends on this card and is blocked until it lands). Produce the surface design assets under motir-core/design/public-projects/, composing ONLY shipped components/ui/* primitives + --el-* colour tokens + [data-display-style] shape tokens (NO Tier-0 --color-*, no hand-rolled spacing/radius), mirroring 7.0.1’s multi-panel design-card shape.

The surfaces to draw (every panel — the multi-panel rule, mistake #31):

  • Panel 1 — the public read-only project view (board / work items). The board columns + work item list as a NON-member sees them: read-only, with NO edit affordances (no create / move / assign / status control, no drag handles). INTERNAL fields are absent — draw a work item card / row WITHOUT assignee, WITHOUT estimate, and note that internal comments are not shown. Make the "you are viewing a public project" framing explicit (a banner: "anyone can view — no account needed; sign in to act"), and draw the logged-out top-bar (a Sign-in / Start-free CTA, not a signed-in identity — the read is anonymous).
  • Panel 2 — the public roadmap. Status-grouped columns (submitted → planned → in progress → done) of public-facing items, each with its vote count + a link to the request; paginated / lazy (the at-scale rule — NOT load-all). Mirror the Canny / Productboard status-column roadmap.
  • Panel 3 — submit a request + DUPLICATE DETECTION. The submit form (type toggle bug | feature, title, description) AND the duplicate-detection state: as the title is entered, surface matching existing request(s) with an "Upvote this instead" affordance (the Canny behaviour) so the user joins the existing request rather than creating a dupe; plus the "submit as new" path + the "thanks, we got it" confirmation.
  • Panel 4 — a public request detail with upvote + comments. The request body, its upvote control + count (showing the already-voted state), and the comment thread + a comment composer — the only interactive elements on the public surface besides submit.
  • Panel 5 — project settings: the make-public toggle + share link. The four-level Access control extended to public > open > limited > private (with one-line copy for each, and a clear "public = anyone can view, no account, indexable by search engines; sign in only to submit/upvote/comment" explanation), plus the shareable public link (copy, disable, rotate) and the no-sign-in-to-view note.
  • Panel 9 — SEO + GEO scaffolding. The fully-public page is server-rendered + crawlable: head meta / OpenGraph / canonical, JSON-LD (SoftwareApplication), a semantic HTML outline, and the GEO answer-engine framing (the Overview/README as the citable description + an FAQ).
  • Panel 6 — empty / loading / error / permission states. The empty roadmap + empty request list, the paginated loading skeleton, the fetch-error state, and the rate-limited submit state (graceful, not a raw 500).

Write design/public-projects/design-notes.md naming every primitive composed (e.g. IssueTypeIcon for the kind hue, Pill for status/vote tone, Combobox/picker reuse, the EmptyState/ErrorState family, the skeleton/loader), the EXACT copy for each Access-level line + each action + each empty/confirmation/error state, the per---el-* colour role for every element (use the palette, not grey-only — finding #54; e.g. the public-banner tint, the upvote accent, the roadmap status tones), and a "primitives composed (no hand-rolling)" checklist. It MUST state, in writing, that internal fields (assignees / estimates / internal comments) are ABSENT from the public view, that the public surface has NO edit affordances, and that READ is fully public / anonymous + crawlable (SEO/GEO) while the three WRITES require sign-in (sign-in-to-act).

Acceptance criteria

  • design/public-projects/*.mock.html renders the six panels above, referencing ONLY --el-* + [data-display-style] tokens (no Tier-0 --color-*, no hand-rolled spacing/radius) + shipped components/ui/*.
  • The public board/work item panel shows NO edit affordances and NO internal fields (assignee / estimate / internal comments absent); the public-project framing (banner/chip) is drawn.
  • The roadmap is drawn status-grouped (submitted → planned → in progress → done) with vote counts, paginated/lazy; the submit panel draws the duplicate-detection "upvote this instead" state; the request detail draws upvote + comments.
  • The Access control is drawn with all FOUR levels (public > open > limited > private) + copy, the shareable link (copy/disable/rotate), and the no-sign-in-to-view note; the SEO/GEO scaffolding (Panel 9) is drawn.
  • design-notes.md names every primitive + copy + per-element --el-* role, and states the hidden-internal-fields + no-edit-affordances + anonymous-READ / sign-in-to-WRITE + SEO/GEO invariants; AA contrast holds for the public banner + the upvote/roadmap tints.

Context refs

  • scripts/plan-seed/data/story-7.0.ts § 7.0.1 — the multi-panel design-card shape to mirror.
  • scripts/plan-seed/data/story-6.11.ts § 6.11.1 — the triage submission-surface design this composes with (the submit form reuses its shape).
  • Canny (https://canny.io/use-cases/feature-request-management) — the status-column roadmap + vote count + "upvote the existing request" surface being mirrored.
  • Productboard portal (https://support.productboard.com/hc/en-us/articles/360056315454) — the public portal + share-link + status roadmap shape.
  • motir-core/components/ui/*, app/globals.css (the --el-* + [data-display-style] token layers), motir-core/CLAUDE.md § colour + shape tokens; IssueTypeIcon / Pill (the kind-hue + tone primitives).