Skip to content
Motir
Start free

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
Follow  — continues on app.motir.co
Request a featureAtom feed

← Motir · Work items

MOTIR-39Done

1.3.3 Mockups: create-project modal, empty state, project switcher

Estimate: 18m · Depends on: 1.0.5.2, 1.0.5.3

Design-first, per Principle #13: mock the three project surfaces before any production React. Compose only existing primitives (Button, Input, Card, Modal, Popover, EmptyState) — the same set Story 1.2's UI used. Save to /design/projects/*.pen + PNG exports.

Three surfaces: (1) Create-project modal — name Input + a live-derived identifier field the user can override (show the PROD → PROD-1 preview), Cancel + Create footer. (2) Empty state — "Create your first project" composing the EmptyState pattern, shown when the active workspace has zero projects. (3) Project switcher — a Popover in the top-nav sitting BESIDE the workspace switcher (document the two-switcher layout: workspace-left, project-next-to-it; this composes atop 1.2.6's TopNav, it does not replace it). Include the archive double-confirmation modal variant (reuse the delete-confirm grammar from 1.2.6 — typed identifier to confirm).

Top-nav note for 1.5: Story 1.5 (app shell) will move project nav into a sidebar. Document in the switcher mockup's notes that this top-nav placement is the minimal 1.3 form and 1.5 composes atop it — same minimal-then-expand pattern 1.2.1 recorded.

Acceptance criteria

  • Three mockups exist under /design/projects/: create-modal.png (with the identifier-override + key preview), empty-state.png, switcher.png (closed + open), plus an archive-confirm.png variant.
  • Each surface composes only existing primitives — introduces no new component patterns (Popover already exists as of 1.2.6).
  • Copy strings drafted verbatim for 1.3.4 to consume (modal title/labels, empty-state headline/CTA, switcher heading, archive-confirm body).
  • Reviewer can view the mockups and react before any production React is written.

Context refs

  • docs/design-system.md + components/ui/{Button,Input,Card,Modal,Popover,EmptyState}.tsx
  • /design/workspaces/*.png from 1.2.1 — the visual grammar to match (switcher, modal, delete-confirm)
  • app/(authed)/_components/{TopNav,WorkspaceSwitcher}.tsx from 1.2.6 — the nav this composes atop