feat: implement React UI components for focus and queue views

Complete frontend implementation for Mission Control's core workflow:
surface THE ONE THING and let the user act on it.

Layout (AppShell.tsx):
- Tab navigation: Focus | Queue | Inbox
- View switching with AnimatePresence transitions
- Global shortcut event listener for quick capture
- Batch mode overlay when active

Focus View (FocusView.tsx, FocusCard.tsx):
- Prominent display of THE ONE THING
- Type badge with staleness coloring (fresh/normal/amber/urgent)
- Context quote and requestedBy for reviews
- Action buttons: Start (Enter), 1h (Cmd+1), Tomorrow (Cmd+2), Skip (Cmd+S)
- Empty state: "All Clear" when queue is empty

Queue View (QueueView.tsx, QueueItem.tsx, QueueSummary.tsx):
- List view of all items with reordering capability
- Click to set as focus (promotes to THE ONE THING)
- Summary shows counts by type
- Links back to Focus view

Quick Capture (QuickCapture.tsx):
- Modal overlay triggered by Cmd+Shift+C
- Creates new bead via quick_capture command
- Shows success/error feedback

Batch Mode (BatchMode.tsx):
- Full-screen overlay for rapid item processing
- Progress indicator: 3/10 DONE
- Same action buttons as FocusCard
- Exit returns to regular Focus view

App entry updates:
- App.tsx now renders AppShell
- main.tsx unchanged (React 19 + StrictMode)
- Tailwind config adds MC-specific colors

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
teernisse
2026-02-26 09:54:34 -05:00
parent 259f751f45
commit df53096aa8
11 changed files with 1055 additions and 24 deletions

View File

@@ -11,6 +11,10 @@ export default {
raised: "#27272a", // zinc-800
overlay: "#3f3f46", // zinc-700
},
// Staleness indicator colors
"mc-fresh": "#22c55e", // green-500 -- updated < 1 day
"mc-amber": "#f59e0b", // amber-500 -- updated 3-6 days
"mc-urgent": "#ef4444", // red-500 -- updated 7+ days
},
},
},