f5ce8a9091
Complete implementation of 7 slices addressing E2E testing gaps: Slice 0+1: Wire Actions + ReasonPrompt - FocusView now uses useActions hook instead of direct act() calls - Added pendingAction state pattern for skip/defer/complete actions - ReasonPrompt integration with proper confirm/cancel flow - Tags support in DecisionEntry interface Slice 2: Drag Reorder UI - Installed @dnd-kit (core, sortable, utilities) - QueueView with DndContext, SortableContext, verticalListSortingStrategy - SortableQueueItem wrapper component using useSortable hook - pendingReorder state with ReasonPrompt for reorder reasons - Cmd+Up/Down keyboard shortcuts for accessibility - Fixed: Store item ID in PendingReorder to avoid stale queue reference Slice 3: System Tray Integration - tray.rs with TrayState, setup_tray, toggle_window_visibility - Menu with Show/Quit items - Left-click toggles window visibility - update_tray_badge command updates tooltip with item count - Frontend wiring in AppShell Slice 4: E2E Test Updates - Fixed test selectors for InboxView, Queue badge - Exposed inbox store for test seeding Slice 5: Staleness Visualization - Already implemented in computeStaleness() with tests Slice 6: Quick Wiring - onStartBatch callback wired to QueueView - SyncStatus rendered in nav area - SettingsView renders Settings component Slice 7: State Persistence - settings-store with hydrate/update methods - Tauri backend integration via read_settings/write_settings - AppShell hydrates settings on mount Bug fixes from code review: - close_bead now has error isolation (try/catch) so decision logging and queue advancement continue even if bead close fails - PendingReorder stores item ID to avoid stale queue reference E2E tests for all ACs (tests/e2e/followup-acs.spec.ts): - AC-F1: Drag reorder (4 tests) - AC-F2: ReasonPrompt integration (7 tests) - AC-F5: Staleness visualization (3 tests) - AC-F6: Batch mode (2 tests) - AC-F7: SyncStatus (2 tests) - ReasonPrompt behavior (3 tests) Tests: 388 frontend + 119 Rust + 32 E2E all passing Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
99 lines
2.7 KiB
TypeScript
99 lines
2.7 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";
|
|
|
|
export interface QueueItemProps {
|
|
item: FocusItem;
|
|
onClick: (id: string) => void;
|
|
isFocused?: boolean;
|
|
isDragging?: 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,
|
|
isDragging = false,
|
|
}: QueueItemProps): React.ReactElement {
|
|
const staleness = computeStaleness(item.updatedAt);
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
data-staleness={staleness}
|
|
data-focused={isFocused}
|
|
data-dragging={isDragging}
|
|
onClick={() => onClick(item.id)}
|
|
className={`flex w-full items-center gap-3 rounded-lg border px-4 py-3 text-left transition-colors ${
|
|
isDragging
|
|
? "border-mc-fresh/40 bg-surface-overlay shadow-lg"
|
|
: 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>
|
|
);
|
|
}
|