test(ui): explore passive branch result indication

2026-08-20 05:55:25 +01:00
parent 058ad2326f
commit ad42f67800
2 changed files with 198 additions and 29 deletions
@@ -0,0 +1,123 @@
+/**
+ * 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, onClick }) {
+  const isActive = Boolean(active);
+
+  return (
+    <button
+      onClick={onClick}
+      disabled={isActive}
+      aria-current={isActive ? "page" : undefined}
+      className={`w-full flex items-center 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-300"
+        }`}
+        aria-hidden="true"
+      >
+        {isActive ? "●" : "○"}
+      </span>
+
+      {/* Branch label */}
+      <span className="flex-1 truncate">{label}</span>
+
+      {/* Passive new-result indicator (only for inactive branches) */}
+      {!isActive && <NewIndicator visible={isNew} />}
+    </button>
+  );
+}
+
+/* ── Card wrapper ────────────────────────────────────────── */
+
+export default function ExperimentalBranchSwitcher({
+  branches = [],
+  activeBranchId,
+  branchNewResults = {},
+  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-400">
+        Branches{" "}
+        <span className="font-normal text-gray-300">(exp)</span>
+      </h2>
+      <p className="mb-3 text-[11px] text-gray-400/60">
+        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])}
+            onClick={() => onBranchSelect?.(branch.id)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export { PulseStyle };