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>
94 lines
2.5 KiB
TypeScript
94 lines
2.5 KiB
TypeScript
/**
|
|
* QueueItem -- a single row in the queue list.
|
|
*
|
|
* Shows type badge, staleness indicator, title, project/IID, and requestedBy.
|
|
* Clicking sets this item as THE ONE THING.
|
|
*/
|
|
|
|
import type { FocusItem, FocusItemType, Staleness } from "@/lib/types";
|
|
import { computeStaleness } from "@/lib/types";
|
|
import { formatIid } from "@/lib/format";
|
|
|
|
interface QueueItemProps {
|
|
item: FocusItem;
|
|
onClick: (id: string) => void;
|
|
isFocused?: boolean;
|
|
}
|
|
|
|
const TYPE_LABELS: Record<FocusItemType, string> = {
|
|
mr_review: "MR REVIEW",
|
|
issue: "ISSUE",
|
|
mr_authored: "MR AUTHORED",
|
|
manual: "TASK",
|
|
};
|
|
|
|
const STALENESS_DOT: Record<Staleness, string> = {
|
|
fresh: "bg-mc-fresh",
|
|
normal: "bg-zinc-500",
|
|
amber: "bg-mc-amber",
|
|
urgent: "bg-mc-urgent animate-pulse",
|
|
};
|
|
|
|
const STALENESS_LABEL: Record<Staleness, string> = {
|
|
fresh: "Updated recently",
|
|
normal: "Updated 1-2 days ago",
|
|
amber: "Updated 3-6 days ago",
|
|
urgent: "Needs attention - over a week old",
|
|
};
|
|
|
|
export function QueueItem({
|
|
item,
|
|
onClick,
|
|
isFocused = false,
|
|
}: QueueItemProps): React.ReactElement {
|
|
const staleness = computeStaleness(item.updatedAt);
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
data-staleness={staleness}
|
|
data-focused={isFocused}
|
|
onClick={() => onClick(item.id)}
|
|
className={`flex w-full items-center gap-3 rounded-lg border px-4 py-3 text-left transition-colors ${
|
|
isFocused
|
|
? "border-mc-fresh/30 bg-mc-fresh/5"
|
|
: "border-zinc-800 bg-surface-raised hover:border-zinc-700 hover:bg-surface-overlay/50"
|
|
}`}
|
|
>
|
|
{/* Staleness dot with accessible label */}
|
|
<span
|
|
className={`h-2.5 w-2.5 flex-shrink-0 rounded-full ${STALENESS_DOT[staleness]}`}
|
|
role="img"
|
|
aria-label={STALENESS_LABEL[staleness]}
|
|
/>
|
|
|
|
{/* Type badge */}
|
|
<span className="flex-shrink-0 rounded bg-zinc-800 px-2 py-0.5 text-[10px] font-bold tracking-wider text-zinc-400">
|
|
{TYPE_LABELS[item.type]}
|
|
</span>
|
|
|
|
{/* IID */}
|
|
<span className="flex-shrink-0 text-xs text-zinc-500">
|
|
{formatIid(item.type, item.iid)}
|
|
</span>
|
|
|
|
{/* Title */}
|
|
<span className="min-w-0 flex-1 truncate text-sm text-zinc-200">
|
|
{item.title}
|
|
</span>
|
|
|
|
{/* Project */}
|
|
<span className="flex-shrink-0 text-xs text-zinc-600">
|
|
{item.project}
|
|
</span>
|
|
|
|
{/* Requested by */}
|
|
{item.requestedBy && (
|
|
<span className="flex-shrink-0 text-xs text-zinc-500">
|
|
@{item.requestedBy}
|
|
</span>
|
|
)}
|
|
</button>
|
|
);
|
|
}
|