382 lines
19 KiB
TypeScript
382 lines
19 KiB
TypeScript
'use client';
|
|
|
|
import type { BeadIssue } from '../../lib/types';
|
|
|
|
/** Props for an individual task card in the grid. */
|
|
/** Details for a blocker task shown on the card. */
|
|
export interface BlockerDetail {
|
|
id: string;
|
|
title: string;
|
|
status: BeadIssue['status'];
|
|
priority: BeadIssue['priority'];
|
|
epicTitle?: string;
|
|
}
|
|
|
|
/** Props for an individual task card in the grid. */
|
|
interface TaskCardProps {
|
|
/** The issue data for this card. */
|
|
issue: BeadIssue;
|
|
/** Whether this card is the currently selected task. */
|
|
selected: boolean;
|
|
/** List of issues blocking this task. */
|
|
blockers: BlockerDetail[];
|
|
/** List of issues this task blocks. */
|
|
blocking: BlockerDetail[];
|
|
/** Whether this task is actionable (unblocked). */
|
|
isActionable: boolean;
|
|
/** Callback fired when the user clicks this card (or a blocker). */
|
|
onSelect: (id: string, shouldOpenDrawer?: boolean) => void;
|
|
}
|
|
|
|
/** Props for the TaskCardGrid component. */
|
|
interface TaskCardGridProps {
|
|
/** List of tasks to display in the grid. */
|
|
tasks: BeadIssue[];
|
|
/** ID of the currently selected task, or null. */
|
|
selectedId: string | null;
|
|
/** Map of issue ID to detailed blocker info. */
|
|
blockerDetailsMap: Map<string, BlockerDetail[]>;
|
|
/** Map of issue ID to detailed downstream blocking info. */
|
|
blocksDetailsMap: Map<string, BlockerDetail[]>;
|
|
/** Set of actionable (unblocked) task IDs. */
|
|
actionableIds: Set<string>;
|
|
/** Callback fired when the user selects a task. */
|
|
onSelect: (id: string, shouldOpenDrawer?: boolean) => void;
|
|
}
|
|
|
|
/**
|
|
* Returns the Tailwind background color class for a status dot indicator.
|
|
* Mirrors the statusDot function from the original monolith.
|
|
*/
|
|
function statusDot(status: BeadIssue['status']): string {
|
|
switch (status) {
|
|
case 'open':
|
|
return 'bg-emerald-400';
|
|
case 'in_progress':
|
|
return 'bg-amber-400';
|
|
case 'blocked':
|
|
return 'bg-rose-500';
|
|
case 'deferred':
|
|
return 'bg-slate-400';
|
|
case 'closed':
|
|
return 'bg-slate-400';
|
|
case 'pinned':
|
|
return 'bg-violet-400';
|
|
case 'hooked':
|
|
return 'bg-orange-400';
|
|
default:
|
|
return 'bg-zinc-500';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Returns status-tinted gradient background for Aero Chrome styling.
|
|
*/
|
|
function statusGradient(status: BeadIssue['status']): string {
|
|
switch (status) {
|
|
case 'open':
|
|
return 'bg-[linear-gradient(145deg,rgba(34,45,42,0.92)_0%,rgba(24,32,30,0.88)_50%,rgba(18,28,26,0.9)_100%)]';
|
|
case 'in_progress':
|
|
return 'bg-[linear-gradient(145deg,rgba(42,40,32,0.92)_0%,rgba(32,30,24,0.88)_50%,rgba(26,24,18,0.9)_100%)]';
|
|
case 'blocked':
|
|
return 'bg-[linear-gradient(145deg,rgba(60,24,30,0.95)_0%,rgba(45,18,24,0.9)_50%,rgba(32,12,16,0.92)_100%)]';
|
|
case 'closed':
|
|
return 'bg-[linear-gradient(145deg,rgba(28,30,34,0.75)_0%,rgba(22,24,28,0.72)_50%,rgba(18,20,24,0.75)_100%)] opacity-75';
|
|
case 'deferred':
|
|
return 'bg-[linear-gradient(145deg,rgba(38,40,48,0.92)_0%,rgba(28,30,36,0.88)_50%,rgba(22,24,30,0.9)_100%)]';
|
|
default:
|
|
return 'bg-[linear-gradient(145deg,rgba(38,40,48,0.92)_0%,rgba(28,30,36,0.88)_50%,rgba(22,24,30,0.9)_100%)]';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Returns status-colored border for Aero Chrome styling.
|
|
*/
|
|
function statusBorder(status: BeadIssue['status']): string {
|
|
switch (status) {
|
|
case 'open':
|
|
return 'border-emerald-500/20';
|
|
case 'in_progress':
|
|
return 'border-amber-500/20';
|
|
case 'blocked':
|
|
return 'border-rose-500/20';
|
|
case 'closed':
|
|
return 'border-rose-500/30';
|
|
case 'deferred':
|
|
return 'border-slate-500/20';
|
|
default:
|
|
return 'border-white/[0.06]';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Returns title text color class - greyed out for closed status.
|
|
*/
|
|
function titleColorClass(status: BeadIssue['status']): string {
|
|
return status === 'closed' ? 'text-text-muted/70' : 'text-text-strong';
|
|
}
|
|
|
|
/**
|
|
* Returns a human-friendly label and text color class for a status.
|
|
*/
|
|
function statusBadge(status: BeadIssue['status'], isActionable: boolean, hasBlockers: boolean): { label: string; textColor: string; bgColor: string } {
|
|
// Actual blocked status always shows as Blocked in red
|
|
if (status === 'blocked') {
|
|
return { label: 'Blocked', textColor: 'text-rose-400', bgColor: 'bg-rose-400/10' };
|
|
}
|
|
|
|
// If effectively blocked (has open blockers), show Blocked (unless closed/done)
|
|
if (hasBlockers && status !== 'closed' && status !== 'in_progress') {
|
|
return { label: 'Blocked', textColor: 'text-rose-400', bgColor: 'bg-rose-400/10' };
|
|
}
|
|
|
|
switch (status) {
|
|
case 'in_progress':
|
|
return { label: 'In Progress', textColor: 'text-amber-400', bgColor: 'bg-amber-400/10' };
|
|
case 'closed':
|
|
return { label: 'Done', textColor: 'text-emerald-400', bgColor: 'bg-emerald-400/10' };
|
|
case 'deferred':
|
|
return { label: 'Deferred', textColor: 'text-slate-400', bgColor: 'bg-slate-400/10' };
|
|
case 'open':
|
|
// Open with no blockers -> Ready
|
|
return { label: 'Ready', textColor: 'text-cyan-400', bgColor: 'bg-cyan-400/10' };
|
|
default:
|
|
return { label: status, textColor: 'text-zinc-400', bgColor: 'bg-zinc-400/10' };
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* A single task card displaying the issue ID, title, priority, type, assignee,
|
|
* and detailed blocker list (interactive).
|
|
*/
|
|
function TaskCard({ issue, selected, blockers, blocking, isActionable, onSelect }: TaskCardProps) {
|
|
const hasBlockers = blockers.length > 0; // Note: blockers list only contains OPEN blockers (computed in page)
|
|
const badge = statusBadge(issue.status, isActionable, hasBlockers);
|
|
const projectName = (issue as BeadIssue & { project?: { name?: string } }).project?.name ?? null;
|
|
|
|
// Determine effective status: in_progress always shows as in_progress, blocked always blocked, otherwise check blockers
|
|
const effectiveStatus: BeadIssue['status'] = issue.status === 'in_progress' ? 'in_progress' :
|
|
issue.status === 'blocked' ? 'blocked' :
|
|
hasBlockers ? 'blocked' :
|
|
issue.status;
|
|
|
|
return (
|
|
<div
|
|
role="button"
|
|
tabIndex={0}
|
|
onClick={() => onSelect(issue.id, false)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault();
|
|
onSelect(issue.id, false);
|
|
}
|
|
}}
|
|
className={`group relative flex w-full flex-col rounded-xl border ${statusBorder(effectiveStatus)} ${statusGradient(effectiveStatus)} px-4 py-4 text-left transition duration-200 shadow-[0_4px_24px_rgba(0,0,0,0.35),inset_0_1px_0_rgba(255,255,255,0.06)] ${selected
|
|
? 'ring-1 ring-amber-200/30 shadow-[0_0_20px_rgba(251,191,36,0.15)]'
|
|
: 'hover:shadow-[0_8px_30px_rgba(0,0,0,0.4)]'
|
|
}`}
|
|
>
|
|
{/* Expand / Open Drawer Button */}
|
|
<button
|
|
type="button"
|
|
className="absolute right-2 top-2 z-10 rounded p-1.5 text-text-muted/50 hover:bg-white/10 hover:text-sky-300 transition-colors hover:opacity-100"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onSelect(issue.id, true);
|
|
}}
|
|
title="Open Details"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="opacity-70 group-hover:opacity-100"><polyline points="15 3 21 3 21 9" /><polyline points="9 21 3 21 3 15" /><line x1="21" y1="3" x2="14" y2="10" /><line x1="3" y1="21" x2="10" y2="14" /></svg>
|
|
</button>
|
|
|
|
<div className="flex w-full items-start justify-between gap-3 pr-6">
|
|
<div className="flex flex-col gap-1.5 min-w-0 flex-1">
|
|
<div className="flex items-center gap-2">
|
|
<span className={`h-2 w-2 rounded-full ${statusDot(effectiveStatus)} ring-1 ring-white/10`} />
|
|
<span className="font-mono text-[10px] text-text-muted">{issue.id}</span>
|
|
{/* Status Badge */}
|
|
<span className={`rounded px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wider ${badge.textColor} ${badge.bgColor}`}>
|
|
{badge.label}
|
|
</span>
|
|
</div>
|
|
{projectName ? (
|
|
<div className="inline-flex w-fit rounded border border-sky-300/25 bg-sky-500/10 px-1.5 py-0.5 font-mono text-[9px] text-sky-200">
|
|
project: {projectName}
|
|
</div>
|
|
) : null}
|
|
<h3 className={`line-clamp-3 text-sm font-medium leading-snug ${titleColorClass(issue.status)}`}>
|
|
{issue.title}
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Labels */}
|
|
{issue.labels?.length > 0 ? (
|
|
<div className="mt-2 flex flex-wrap gap-1">
|
|
{issue.labels.map((label) => (
|
|
<span key={label} className="rounded bg-white/5 px-1.5 py-0.5 text-[9px] font-medium text-text-muted/80 backdrop-blur-sm border border-white/5">
|
|
{label}
|
|
</span>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
|
|
{/* "Unlocks" section for blockers */}
|
|
{blockers.length > 0 ? (
|
|
<div className="mt-auto pt-2 w-full">
|
|
<div className="rounded-lg bg-black/20 p-2 border border-white/5">
|
|
<p className="mb-1.5 text-[9px] font-bold uppercase tracking-widest text-rose-400/80">Unlocks</p>
|
|
<div className="flex flex-col gap-1.5">
|
|
{blockers.map((blocker) => (
|
|
<div
|
|
key={blocker.id}
|
|
role="button"
|
|
tabIndex={0}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onSelect(blocker.id, false);
|
|
}}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.stopPropagation();
|
|
onSelect(blocker.id, false);
|
|
}
|
|
}}
|
|
className="group relative flex flex-col gap-0.5 rounded border border-white/5 bg-white/5 px-2.5 py-2 hover:border-sky-400/30 hover:bg-white/10 transition-colors"
|
|
>
|
|
{/* Expand Button */}
|
|
<button
|
|
type="button"
|
|
className="absolute right-1 top-1 z-10 rounded p-1 text-text-muted/50 hover:bg-white/10 hover:text-sky-300 transition-colors hover:opacity-100"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onSelect(blocker.id, true);
|
|
}}
|
|
title="Open Details"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="opacity-70 group-hover:opacity-100"><polyline points="15 3 21 3 21 9" /><polyline points="9 21 3 21 3 15" /><line x1="21" y1="3" x2="14" y2="10" /><line x1="3" y1="21" x2="10" y2="14" /></svg>
|
|
</button>
|
|
|
|
<div className="flex items-center gap-2 pr-5">
|
|
<span className={`h-1.5 w-1.5 shrink-0 rounded-full ${statusDot(blocker.status)}`} />
|
|
<span className="font-mono text-[9px] text-text-muted">{blocker.id}</span>
|
|
<span className="line-clamp-1 text-[10px] font-medium text-text-body">{blocker.title}</span>
|
|
</div>
|
|
{blocker.epicTitle ? (
|
|
<div className="pl-3.5 text-[9px] text-text-muted/60 truncate max-w-full pr-5">
|
|
<span className="group-hover:text-sky-300/70 transition-colors">↳ {blocker.epicTitle}</span>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{/* "Blocks" section (downstream) */}
|
|
{blocking.length > 0 ? (
|
|
<div className={`${blockers.length > 0 ? 'mt-2' : 'mt-auto'} w-full`}>
|
|
<div className="rounded-lg bg-black/20 p-2 border border-white/5">
|
|
<p className="mb-1.5 text-[9px] font-bold uppercase tracking-widest text-amber-400/80">Blocks</p>
|
|
<div className="flex flex-col gap-1.5">
|
|
{blocking.map((item) => (
|
|
<div
|
|
key={item.id}
|
|
role="button"
|
|
tabIndex={0}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onSelect(item.id, false);
|
|
}}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.stopPropagation();
|
|
onSelect(item.id, false);
|
|
}
|
|
}}
|
|
className="group relative flex flex-col gap-0.5 rounded border border-white/5 bg-white/5 px-2.5 py-2 hover:border-sky-400/30 hover:bg-white/10 transition-colors"
|
|
>
|
|
{/* Expand Button */}
|
|
<button
|
|
type="button"
|
|
className="absolute right-1 top-1 z-10 rounded p-1 text-text-muted/50 hover:bg-white/10 hover:text-sky-300 transition-colors hover:opacity-100"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onSelect(item.id, true);
|
|
}}
|
|
title="Open Details"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="opacity-70 group-hover:opacity-100"><polyline points="15 3 21 3 21 9" /><polyline points="9 21 3 21 3 15" /><line x1="21" y1="3" x2="14" y2="10" /><line x1="3" y1="21" x2="10" y2="14" /></svg>
|
|
</button>
|
|
|
|
<div className="flex items-center gap-2 pr-5">
|
|
<span className={`h-1.5 w-1.5 shrink-0 rounded-full ${statusDot(item.status)}`} />
|
|
<span className="font-mono text-[9px] text-text-muted">{item.id}</span>
|
|
<span className="line-clamp-1 text-[10px] font-medium text-text-body">{item.title}</span>
|
|
</div>
|
|
{item.epicTitle ? (
|
|
<div className="pl-3.5 text-[9px] text-text-muted/60 truncate max-w-full pr-5">
|
|
<span className="group-hover:text-sky-300/70 transition-colors">↳ {item.epicTitle}</span>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{/* Footer Metadata: Assignee, Due Date */}
|
|
<div className={`mt-3 flex w-full items-center justify-between border-t border-white/5 pt-3 text-[10px] text-text-muted/60`}>
|
|
<div className="flex items-center gap-3">
|
|
{/* Assignee */}
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="i-lucide-user h-3 w-3 opacity-70" />
|
|
<span>{issue.assignee ?? 'Unassigned'}</span>
|
|
</div>
|
|
{/* Due Date (if exists) */}
|
|
{issue.due_at ? (
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="i-lucide-calendar h-3 w-3 opacity-70" />
|
|
<span>{new Date(issue.due_at as string).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}</span>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Renders a responsive grid of task cards.
|
|
* Uses auto-fill with minmax to prevent cards from being too narrow to read.
|
|
*/
|
|
export function TaskCardGrid({ tasks, selectedId, blockerDetailsMap, blocksDetailsMap, actionableIds, onSelect }: TaskCardGridProps) {
|
|
// Show an empty state when no tasks exist in the selected epic
|
|
if (tasks.length === 0) {
|
|
return (
|
|
<div className="rounded-2xl border border-dashed border-white/10 bg-white/[0.02] px-6 py-12 text-center">
|
|
<p className="text-xs font-medium uppercase tracking-widest text-text-muted/50">No tasks in this epic</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="grid gap-3 overflow-y-auto overscroll-contain pr-1 custom-scrollbar grid-cols-[repeat(auto-fill,minmax(18rem,1fr))]">
|
|
{tasks.map((task) => (
|
|
<TaskCard
|
|
key={task.id}
|
|
issue={task}
|
|
selected={selectedId === task.id}
|
|
blockers={blockerDetailsMap?.get(task.id) ?? []}
|
|
blocking={blocksDetailsMap?.get(task.id) ?? []}
|
|
isActionable={actionableIds?.has(task.id) ?? false}
|
|
onSelect={onSelect}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|