Motir

Estimate: 22m · Depends on: 1.0.5.2, 1.0.5.3

Produce viewable mockups of the app shell across its three breakpoints + two interaction states, BEFORE any production React lands. Per Principle #13: design-before-code within every Story. The shell is the chrome every Epic-2-through-7 surface renders inside, so getting the IA + visual density right here pays back across the entire build.

Why mockups instead of straight-to-code: the existing (authed)/_components/TopNav.tsx carries a comment that says "Story 1.5 will move project nav into a left sidebar, at which point the top-nav project switcher is demoted or retired" — but the exact division (what stays in top-nav vs. moves to sidebar, what the collapsed-sidebar shape is, how the mobile drawer animates in) was never pinned. The mockup is where that gets pinned, with the design-system primitives (Button, Card, Tooltip, Popover) composed visually so the code Subtask can compose the same primitives in code. Mockup also reveals whether the cmd-k palette fits the existing Dialog primitive (it should) or needs a new wrapper.

What you'll do: Open @pencil.dev/cli (per feedback_pencil_cli_for_design_subtasks — the desktop MCP has no save()). Compose with canonical primitives only — Button, Input, Card, Avatar, Badge, Popover, Dialog from components/ui/. Lay out:

• Desktop persistent (/design/shell/desktop.pen): top-nav (workspace switcher · theme toggle · cmd-k trigger · user menu) + left sidebar (project switcher in sidebar header · "Issues" · "Boards" · "Reports" · divider · "Settings" · "Docs" · footer collapse-toggle) + main panel with the dashboard surface. ~240px sidebar width; main panel uses the existing max-w-6xl mx-auto px-4 sm:px-6 container — sidebar is OUTSIDE the container so it pins to viewport edge.
• Desktop collapsed-sidebar (/design/shell/desktop-collapsed.pen): sidebar narrows to ~56px, icon-only, with tooltips on hover that show the full label. Same content, same order. The toggle in the sidebar footer (chevron-double-left ↔ chevron-double-right) drives this state; preference is persisted in localStorage.
• Mobile drawer (/design/shell/mobile-drawer.pen): viewport < md (768px). Top-nav adds a hamburger button on the left. Sidebar becomes an off-canvas drawer that slides in from the left with a scrim behind. Drawer header shows the project switcher; drawer body shows the same nav as desktop. Drawer closes via scrim click, escape key, or hamburger.
• Cmd-K palette (/design/shell/cmd-k.pen): centered Dialog ~640px wide, search input at top, grouped action list below (Navigation / Workspace / Project / Account). Selected row highlighted, kbd hint chips on the right for shortcut keys, footer hint strip ("↑↓ to navigate, ↵ to select, esc to close"). Show with an empty query (all actions visible, grouped) AND with the query "iss" (filtered to "Go to Issues" + "Switch workspace if its name contains 'iss'").
• Shortcuts cheatsheet (/design/shell/shortcuts.pen): a Dialog opened by pressing ?, listing every shortcut the shell registers — ⌘K (palette), ⌘\ (toggle sidebar), ? (this dialog), g→i / g→b / g→r (g-prefix go-to navigation, Linear convention), esc, etc. Two columns: shortcut chip on the left, action label on the right.

Brand-mark deferral (MOTIR.md): no wordmark / logomark anywhere in these mockups. The top-nav left edge sits empty where a logo would otherwise live; do not invent placeholder branding (mistake #19 + #26). Save .pen sources AND PNG exports for each surface.

Acceptance criteria

• Five .pen files exist under /design/shell/ with PNG exports alongside (desktop, desktop-collapsed, mobile-drawer, cmd-k, shortcuts).
• Sidebar shows: project switcher in header, "Issues" + "Boards" + "Reports" placeholder links, a hairline divider, "Settings" + "Docs" links, footer collapse-toggle. Active route is visually distinguished (bg + foreground color shift).
• Top-nav after 1.5: workspace switcher · theme toggle (with tri-state icon) · cmd-k trigger (button labeled "Search" with ⌘K hint chip) · user menu. NO project switcher (moved to sidebar). NO wordmark slot.
• Mobile drawer mockup shows the off-canvas position, scrim, hamburger entry point, and the in-drawer header carrying the project switcher.
• Cmd-K mockup shows grouped actions, kbd hint chips, footer hint strip, AND the filtered state for the "iss" query (proves the visual treatment of filtering).
• Shortcuts cheatsheet enumerates ≥6 shortcuts with their action labels.
• All surfaces compose only existing primitives (Button, Input, Card, Avatar, Badge, Popover, Dialog, Tooltip). No new design tokens introduced.
• Mockups respect the brand-mark deferral principle — no wordmark / logomark anywhere.
• Any pattern that does not compose cleanly from existing primitives surfaces as a finding in PRODECT_FINDINGS.md before merging (per mistake #27).

Context refs

• /docs/design-system.md — canonical visual reference
• /components/ui/Button.tsx, Card.tsx, Dialog.tsx, Popover.tsx, Tooltip.tsx — primitives to compose from
• /design/projects/*.pen from Subtask 1.3.3 — switcher visual grammar
• /design/work-items/*.pen from Subtask 1.4.1 — the surfaces this shell will host
• MOTIR.md — brand-mark deferral principle, design-system tokens