From 40916d3127f97bc3dd27c1388d77b489b3c29d65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Fri, 15 May 2026 19:07:07 +0200
Subject: [PATCH] feat(coach): swap the sources-rail toggle to a shadcn
 Checkbox

Replace the raw <input type="checkbox"> in the sources rail with a
shadcn-style <Checkbox> backed by radix-ui. The new primitive ships
a real focus ring, a Space-toggles keyboard contract, and a touch-
friendly hit target so the rail behaves correctly on the right-edge
side-tray surface mobile users open via the chevron button.
---
 .../insights/coach-panel/sources-rail.tsx     | 20 ++++----
 src/components/ui/checkbox.tsx                | 47 +++++++++++++++++++
 2 files changed, 58 insertions(+), 9 deletions(-)
 create mode 100644 src/components/ui/checkbox.tsx

diff --git a/src/components/insights/coach-panel/sources-rail.tsx b/src/components/insights/coach-panel/sources-rail.tsx
index bb84eccfc..3db63809f 100644
--- a/src/components/insights/coach-panel/sources-rail.tsx
+++ b/src/components/insights/coach-panel/sources-rail.tsx
@@ -10,6 +10,7 @@ import {
   Smile,
 } from "lucide-react";
 
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Select,
   SelectContent,
@@ -234,20 +235,21 @@ export function SourcesRail({
                 !checked && "opacity-60",
               )}
             >
-              <input
+              {/* v1.4.27 R3d MB4 / CF-40 — swap the raw HTML checkbox
+                  for the shadcn `<Checkbox>` primitive so the rail
+                  ships a real focus ring, a proper keyboard contract
+                  (Space toggles, Tab moves), and a touch-friendly
+                  hit target on the side-tray surface. The wrapping
+                  `<label htmlFor={checkboxId}>` below still acts as
+                  the row-wide tap target on mobile. */}
+              <Checkbox
                 id={checkboxId}
-                type="checkbox"
                 checked={checked}
                 disabled={!interactive}
-                onChange={() => toggleSource(row.key)}
+                onCheckedChange={() => toggleSource(row.key)}
                 data-slot="coach-sources-checkbox"
                 aria-label={t(row.metricKey)}
-                className={cn(
-                  "border-border/70 text-dracula-purple",
-                  "size-4 shrink-0 cursor-pointer rounded",
-                  "focus-visible:ring-ring/50 focus-visible:ring-2",
-                  "disabled:cursor-not-allowed disabled:opacity-50",
-                )}
+                className="cursor-pointer"
               />
               <row.Icon
                 className={cn("size-3.5", row.accentClass)}
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
new file mode 100644
index 000000000..c7922bedd
--- /dev/null
+++ b/src/components/ui/checkbox.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import * as React from "react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import { Check } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * v1.4.27 R3d MB4 / CF-40 — shadcn-style `<Checkbox>` primitive backed
+ * by `radix-ui`'s `Checkbox` namespace. Brought in so the Coach
+ * sources-rail can drop its raw `<input type="checkbox">` for a
+ * keyboard + touch accessible control that ships proper focus rings
+ * and a 44 px hit target on mobile.
+ *
+ * Mirrors the v1.4.27 shadcn `<Checkbox>` recipe: a Root that draws
+ * the border + checked-state background, an Indicator slot that
+ * shows the lucide `<Check>` when the box is checked.
+ */
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-border/70 size-4 shrink-0 rounded border",
+        "data-[state=checked]:bg-dracula-purple data-[state=checked]:border-dracula-purple data-[state=checked]:text-background",
+        "focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "transition-colors",
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current"
+      >
+        <Check className="size-3" aria-hidden="true" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };