nntrivi2001
a2b5fa4669
The detail panel (LaneCard/PipelineMap/proof gallery/console) could grow tall enough to visually crowd out the lane-strip carousel above it once a run was attached in split view. Move the lane list into its own scrolling vertical column beside the detail panel instead of stacking it above, so neither can cover the other; also collapse the info block by default in 2/4-pane split view (toggle to expand) and move the pane-count control into the detail header.
93 lines
3.1 KiB
TypeScript
93 lines
3.1 KiB
TypeScript
/**
|
|
* @file The compact lane tile used in the Workspace's vertical lane list. It
|
|
* carries only what you need to pick a lane — which lane, is it alive, what
|
|
* stage, how far — because the full card, its controls and its working-copy
|
|
* facts live in the detail panel beside it. Keeping the tile small and full
|
|
* width is what lets many lanes stay scannable in one scrolling column.
|
|
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
|
|
*/
|
|
|
|
import { useTranslation } from "react-i18next";
|
|
import type { Lane } from "../../lib/types";
|
|
|
|
const LIVENESS_DOT: Record<Lane["liveness"], string> = {
|
|
active: "bg-status-success",
|
|
idle: "bg-surface-4",
|
|
dead: "bg-status-danger",
|
|
};
|
|
|
|
/** Whether the inferred stage sits ahead of the declared one in node order. */
|
|
function detectionLeads(lane: Lane): boolean {
|
|
if (!lane.detected_stage) return false;
|
|
const ids = lane.pipeline_nodes.map((n) => n.id);
|
|
return ids.indexOf(lane.detected_stage) > ids.indexOf(lane.stage);
|
|
}
|
|
|
|
export default function LaneStripCard({
|
|
lane,
|
|
selected,
|
|
onSelect,
|
|
}: {
|
|
lane: Lane;
|
|
selected: boolean;
|
|
onSelect: () => void;
|
|
}) {
|
|
const { t } = useTranslation(["lanes"]);
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
data-testid={`lane-tile-${lane.id}`}
|
|
data-selected={selected ? "true" : undefined}
|
|
aria-pressed={selected}
|
|
onClick={onSelect}
|
|
title={lane.cwd}
|
|
className={`w-full shrink-0 rounded-lg border p-3 text-left shadow-sm transition-colors ${
|
|
selected
|
|
? "border-accent bg-accent/10"
|
|
: "border-border bg-surface-2 hover:border-border-light hover:bg-surface-3"
|
|
}`}
|
|
>
|
|
<div className="mb-1.5 flex items-center gap-1.5">
|
|
<span className={`h-2 w-2 shrink-0 rounded-full ${LIVENESS_DOT[lane.liveness]}`} />
|
|
<span className="text-[10px] font-semibold uppercase tracking-widest text-fg-muted">
|
|
{t("cardId", { id: lane.id })}
|
|
</span>
|
|
{lane.needs_action && (
|
|
<span className="ml-auto text-status-warning" title={lane.needs_action}>
|
|
⚠
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mb-2 truncate text-[13px] font-medium text-fg-primary">
|
|
{lane.title || lane.cwd}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1.5 text-[11px]">
|
|
<span className="truncate rounded bg-surface-4 px-1.5 py-0.5 text-fg-secondary">
|
|
{lane.stage}
|
|
</span>
|
|
{detectionLeads(lane) && (
|
|
<span
|
|
data-testid={`lane-tile-auto-${lane.id}`}
|
|
title={lane.detected_signal || undefined}
|
|
className="shrink-0 rounded border border-dashed border-status-warning/50 px-1 text-status-warning"
|
|
>
|
|
{lane.detected_stage}
|
|
</span>
|
|
)}
|
|
{lane.progress > 0 && (
|
|
<span className="ml-auto shrink-0 tabular-nums text-fg-muted">{lane.progress}%</span>
|
|
)}
|
|
</div>
|
|
|
|
{lane.progress > 0 && (
|
|
<div className="mt-1.5 h-0.5 overflow-hidden rounded-full bg-surface-4">
|
|
<div className="h-full rounded-full bg-accent" style={{ width: `${lane.progress}%` }} />
|
|
</div>
|
|
)}
|
|
</button>
|
|
);
|
|
}
|