df53096aa8
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>
23 lines
620 B
TypeScript
23 lines
620 B
TypeScript
import type { Config } from "tailwindcss";
|
|
|
|
export default {
|
|
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
surface: {
|
|
DEFAULT: "#18181b", // zinc-900
|
|
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
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
} satisfies Config;
|