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

6.11.1 Design — the triage inbox + the submission surfaces (widget + portal form)

Done
Description

Estimate: 55m

⚠️ Partially superseded (Yue, 2026-06-14). The public portal form panel (unauthenticated, captured name/email, confirmation + rate-limit states) is dropped — a work item is created only by a signed-in account; the external-intake surface is the 6.12 signed-in "Submit a request". The design/triage/ asset has been revised accordingly (in-app widget + inbox only; the "external" chip is now a "Public" chip). This card is kept as the record of what was designed; see the story revision note + 6.11.10.

Type: design (THE design gate — produced FIRST; every UI code subtask here, 6.11.6 and 6.11.7, depends on this card and is blocked until it lands). Produce the surface design assets for BOTH UI surfaces under motir-core/design/triage/, 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.

Two surfaces, each a panel in the mock:

  1. The admin triage inbox — a paginated QUEUE list (each row: kind icon via IssueTypeIcon, title, submitter [member avatar OR "external" chip], age, a snippet) + a DETAIL pane (full submission body, comments, attachments, submitter attribution) + the ACTION bar: Accept, Promote (a picker for backlog / sprint / epic / story parent + position), Decline, Mark duplicate / Merge (a canonical-item picker), Snooze (a time picker). Mirror Linear Triage’s queue+detail+action shape.
  2. The submission surfaces — (a) the in-app "report a bug / request a feature" widget (a compact modal/popover: type toggle, title, description, optional attachment), and (b) the shareable public portal form (an unauthenticated, branded, single-column form; a "thanks, we got it" confirmation state; the rate-limit / error states).

design-notes.md MUST name every primitive used, the exact copy for each action + the empty-queue state, and the --el-* role for every colour (e.g. the "external" chip tint, the kind hue, the destructive --el-danger for Decline). Call out the empty state ("No items to triage") and the loading/error states for the public form.

Acceptance criteria

  • design/triage/*.mock.html renders the inbox (queue + detail + actions) AND both submission surfaces (widget + public form, incl. its confirmation + rate-limit states) as panels, composing only shipped components/ui/* + --el-* + [data-display-style] tokens.
  • design/triage/design-notes.md names every primitive + the copy for every action and empty/confirmation/error state, with the --el-* role for each colour; no Tier-0 --color-* and no raw spacing/radius anywhere.
  • The promote picker design shows the four targets (backlog / sprint / epic / story) and where position/rank is chosen.
  • AA contrast holds for the external chip and the destructive action (tint background + --el-text-strong).

Context refs

  • scripts/plan-seed/data/story-7.0.ts § 7.0.1 — the multi-panel design-card shape to mirror.
  • Linear Triage (https://linear.app/docs/triage) — the queue + detail + action-set surface being mirrored.
  • 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 the rows use.