144 lines
4.2 KiB
React
144 lines
4.2 KiB
React
/**
|
|
* Experimental branch switcher — RTO.25A
|
|
*
|
|
* Smallest branch representation needed to test passive late-result indication.
|
|
* Does NOT replace production branch navigation. Temporary fixture only.
|
|
*/
|
|
|
|
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
|
|
/* ── Keyframes (injected once via <style> at render) ───── */
|
|
|
|
const PulseStyle = () => (
|
|
<style>{`
|
|
@keyframes rto-pulse {
|
|
0%, 100% { opacity: 0.6; }
|
|
50% { opacity: 1; }
|
|
}
|
|
`}</style>
|
|
);
|
|
|
|
/* ── Status dot (passive new-result indicator) ─────────── */
|
|
|
|
function NewIndicator({ visible }) {
|
|
if (!visible) return null;
|
|
|
|
return (
|
|
<span
|
|
className="ml-2 inline-flex items-center"
|
|
title="Something new is available here"
|
|
aria-label="New result available"
|
|
>
|
|
<span
|
|
className="relative inline-block h-[8px] w-[8px]"
|
|
style={{ animation: "rto-pulse 3s ease-in-out infinite" }}
|
|
>
|
|
<span
|
|
className="absolute inset-0 rounded-full bg-blue-400/70"
|
|
aria-hidden="true"
|
|
/>
|
|
</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
/* ── Single branch row ─────────────────────────────────── */
|
|
|
|
function BranchRow({ id, label, active, isNew, isPaused, origin, onClick }) {
|
|
const isActive = Boolean(active);
|
|
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
disabled={isActive}
|
|
aria-current={isActive ? "page" : undefined}
|
|
className={`w-full flex items-start gap-2 rounded-md px-3 py-2 text-left transition text-sm ${
|
|
isActive
|
|
? "bg-blue-50/80 border border-blue-200/60 text-blue-900 font-medium"
|
|
: "text-gray-600 hover:bg-gray-100/70 hover:text-gray-800 border border-transparent"
|
|
} ${!isActive ? "cursor-pointer" : "cursor-default"}`}
|
|
>
|
|
{/* Active indicator — ● vs ○ */}
|
|
<span
|
|
className={`flex-none leading-none text-base ${
|
|
isActive ? "text-blue-500" : "text-gray-400"
|
|
}`}
|
|
aria-hidden="true"
|
|
>
|
|
{isActive ? "●" : "○"}
|
|
</span>
|
|
|
|
{/* Branch label + origin */}
|
|
<span className="flex-1 min-w-0">
|
|
<span className="truncate block">{label}</span>
|
|
{origin && (
|
|
<span className="block text-[11px] leading-tight text-gray-500/80 truncate" title={origin}>
|
|
{origin}
|
|
</span>
|
|
)}
|
|
</span>
|
|
|
|
{/* Passive indicators: pause + new */}
|
|
<span className="flex items-center gap-1.5 flex-none">
|
|
{!isActive && isPaused && (
|
|
<span
|
|
className="text-[10px] text-gray-400"
|
|
title="Done for now"
|
|
>
|
|
Paused
|
|
</span>
|
|
)}
|
|
{!isActive && <NewIndicator visible={isNew} />}
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
/* ── Card wrapper ────────────────────────────────────────── */
|
|
|
|
export default function ExperimentalBranchSwitcher({
|
|
branches = [],
|
|
activeBranchId,
|
|
branchNewResults = {},
|
|
branchPauseState = [],
|
|
onBranchSelect,
|
|
}) {
|
|
if (!branches.length) return null;
|
|
|
|
return (
|
|
<div
|
|
className="rounded-lg border border-gray-200/60 bg-gray-50/30 p-4"
|
|
role="radiogroup"
|
|
aria-label="Experimental branch switcher — RTO.25A"
|
|
>
|
|
{/* Label — clearly experimental */}
|
|
<h2 className="mb-1 text-[10px] font-semibold tracking-widest uppercase text-gray-600">
|
|
Branches{" "}
|
|
<span className="font-normal text-gray-500">(exp)</span>
|
|
</h2>
|
|
<p className="mb-3 text-[11px] font-medium leading-tight text-gray-500/80">
|
|
Browse branches. Current focus is preserved.
|
|
</p>
|
|
|
|
<div className="space-y-1" role="list" aria-label="Available branches">
|
|
{branches.map((branch) => (
|
|
<BranchRow
|
|
key={branch.id}
|
|
id={branch.id}
|
|
label={branch.label}
|
|
active={activeBranchId === branch.id}
|
|
isNew={Boolean(branchNewResults[branch.id])}
|
|
isPaused={branchPauseState.includes(branch.id)}
|
|
origin={branch.origin}
|
|
onClick={() => onBranchSelect?.(branch.id)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export { PulseStyle };
|