Skip to content

moooon

Motir

Vibe your whole project. Bring an idea — Motir's three AI layers plan it, track it, and ship it, end to end. You're looking at Motir, built in Motir.

  • Vibe Project
  • Open Source
  • AI Agent
  • AI Loop
1
requests
0
upvotes
145
planned
1,361
shipped

Motir · Work items

MOTIR-1401Done

5.8.1 Design — work-item mention picker + internal-link chip (+ title link, archived/deleted states)

Type: design · Executor: coding_agent · Repo: motir-core (design assets). Design-first — no blockers.

Produce the three-file design asset for the work-item internal-link surfaces under design/work-items/internal-links.{mock.html,png} + internal-links notes appended to design/work-items/design-notes.md. Composes existing assets — does NOT redraw them (the reuse-axis / design-compose rule): ground the picker in the shipped design/work-items/comments.mock.html mention popup and the chip/relationship grammar in design/work-items/relationships.mock.html + links.mock.html; cite those paths and state this asset does not redesign them.

Surfaces to draw (each from live primitives + --el-* color and shape-semantic tokens only — never Tier-0):

  1. The unified @ picker — extends the member popup (MentionList) with a work-item section: a Combobox-vocabulary option row = type icon (hue) · key (mono, muted) · title · status Pill. Sectioned "People / Work items" when both match; filter-as-you-type; ↑/↓/Enter/Esc + aria-activedescendant (the shipped listbox a11y bar). Empty / short-query ("type to search") / loading / no-results states.
  2. The inline internal-link chip (in rendered body text) — key · title · status badge; hover affordance signalling it opens the quick-view peek. Distinct from the .mention-chip user pill (this one carries a status).
  3. State variants of the chip: archived target → muted/dimmed treatment + an "archived" cue; deleted targetstrikethrough with the bare key retained; no-access → bare key, no title leak.
  4. Title link — how a bare MOTIR-N in a work item's title renders as a link on the detail header and in the quick-view peek (subtle, doesn't fight the heading weight).

Acceptance criteria

  • The three-file set exists (notes + .mock.html built from real primitives + a same-basename .png Playwright export, light theme); pnpm format:check clean (design docs are linted — prettier the assets).
  • Every state in (1)–(4) is drawn, including archived/deleted/no-access chips and the empty/loading picker states.
  • design-notes.md names each primitive, the --el-*/shape tokens, the copy, AND the access path (the @ trigger inside the editor; the chip's peek entry) — and cites comments.mock.html + relationships.mock.html/links.mock.html as the composed sources.
  • Self-review pass: icon viewBox, no nested interactive elements (the chip is a single control), AA contrast on muted/strikethrough states.

Workflow it draws — linked (relates_to, not blocked_by): the picker + autolink behaviour is specified by 5.8.3 (service) and 5.8.5 (editor); the chip states by 5.8.6 (render). Read those descriptions as the spec; do not invent the interaction.

Context refs: design/work-items/comments.mock.html, design/work-items/relationships.mock.html, design/work-items/links.mock.html, design/work-items/design-notes.md, components/ui/markdownEditorMentions.tsx (MentionList), components/ui/markdown-editor.css (.mention-chip).