feat: add <Placeholder> component with ASCII bird states

[boojack]

Summary

• Adds a new <Placeholder variant="empty | loading | noResults | notFound"> component that renders a hand-curated ASCII bird from a pool-shaped data file, with subtle CSS-only motion that respects prefers-reduced-motion.
• Replaces the single-purpose Empty.tsx everywhere it was used (Inboxes.tsx, PagedMemoList.tsx) with <Placeholder variant="empty">.
• ASCII art is from Joan Stark's (jgs) classic collection — attribution lives in a co-located CREDITS.md and on each AsciiPiece.credit field (not rendered in the UI).
• Only the empty variant is wired up in this PR — the other three variants ship as a reusable surface for future PRs to consume.

Architecture

web/src/components/Placeholder/
  index.tsx              # the <Placeholder> component (default export)
  Placeholder.css        # keyframes + .placeholder-motion-* classes
  ascii-pool.ts          # AsciiPiece type, ASCII_POOL array, pickPiece()
  messages.ts            # DEFAULT_MESSAGES map (i18n-ready seam)
  CREDITS.md             # Joan Stark attribution + link to oldcompcz/jgs

The pool is variant-tagged and extensible: future PRs can drop additional entries into ASCII_POOL without touching the component. pickPiece(variant) returns a random matching entry on mount.

Out of scope (follow-up opportunities)

• Wire <Placeholder variant="noResults"> into the memo search results page.
• Wire <Placeholder variant="notFound"> into the router 404 catch-all.
• Wire <Placeholder variant="loading"> into Suspense fallbacks.
• Seed additional ASCII pieces per variant — the pool architecture supports it; just append entries to ASCII_POOL.

Test plan

• pnpm lint clean
• pnpm test green (17 new assertions across placeholder-pool + placeholder-component suites, 94 total)
• pnpm build succeeds
• Inbox empty state shows the ASCII parrot, bobs gently, and renders the filter-specific message
• Home / memo list empty state shows the same parrot placeholder
• prefers-reduced-motion: reduce produces a static bird

🤖 Generated with Claude Code

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 603cb536-0d40-48a7-88cb-4250d193e4ae

📥 Commits

Reviewing files that changed from the base of the PR and between f1e2a06 and 01d6a9b.

📒 Files selected for processing (12)

• docs/superpowers/plans/2026-05-12-placeholder-component.md
• docs/superpowers/specs/2026-05-12-placeholder-component-design.md
• web/src/components/Empty.tsx
• web/src/components/PagedMemoList/PagedMemoList.tsx
• web/src/components/Placeholder/CREDITS.md
• web/src/components/Placeholder/Placeholder.css
• web/src/components/Placeholder/ascii-pool.ts
• web/src/components/Placeholder/index.tsx
• web/src/components/Placeholder/messages.ts
• web/src/pages/Inboxes.tsx
• web/tests/placeholder-component.test.tsx
• web/tests/placeholder-pool.test.ts

---

📝 Walkthrough

Walkthrough

This PR introduces a new Placeholder React component to replace the existing Empty component. The component features variant-driven ASCII art selection from a pool, CSS animations with accessibility support, and integration across page components. Includes design specs, planning docs, and comprehensive tests.

Changes

Placeholder Component Implementation

Layer / File(s)	Summary
ASCII pool and variant types web/src/components/Placeholder/ascii-pool.ts, web/tests/placeholder-pool.test.ts	Defines PlaceholderVariant ("empty" | "loading" | "noResults" | "notFound"), MotionStyle ("bob" | "flutter" | "none"), and AsciiPiece shape. Exports ASCII_POOL seeded with artist-credited pieces per variant and pickPiece(variant) selector. Tests validate pool integrity (per-variant coverage, unique IDs, credit attribution, valid motion types).
Default messages and animations web/src/components/Placeholder/messages.ts, web/src/components/Placeholder/Placeholder.css	Introduces DEFAULT_MESSAGES mapping each variant to a default UI string with an i18n seam comment. Adds CSS keyframes for "bob" and "flutter" animations guarded by prefers-reduced-motion: no-preference media query.
Placeholder component web/src/components/Placeholder/index.tsx, web/tests/placeholder-component.test.tsx	Implements the default-exported Placeholder component: selects a memoized ASCII piece per variant, resolves message from prop or defaults, renders centered layout with ASCII art (decorated <pre aria-hidden>), message text, and optional children. Sets role="status" and aria-live="polite" only when variant="loading". Motion class applied via MOTION_CLASS map. Tests cover variant rendering, custom messages, ASCII presence, aria attributes, and className merging.
Integration and deletion web/src/pages/Inboxes.tsx, web/src/components/PagedMemoList/PagedMemoList.tsx, web/src/components/Empty.tsx (deleted), web/src/components/Placeholder/CREDITS.md	Replaces Empty with Placeholder variant="empty" in both Inboxes.tsx and PagedMemoList.tsx. Removes the now-unused Empty.tsx file. Adds CREDITS.md with attribution links and pool-extension guidelines acknowledging Joan Stark's ASCII art source.
Design specification and planning docs/superpowers/specs/2026-05-12-placeholder-component-design.md, docs/superpowers/plans/2026-05-12-placeholder-component.md	Specifies the public <Placeholder> API, pool/message/animation architecture, file layout, accessibility contract, and testing strategy. Planning doc outlines step-by-step TDD workflow, ASCII seeding, CSS/messaging/component/integration tasks, verification steps, and self-review checklist.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}