RHL-038 fix(search): enhance SearchMultiBranchPicker UI with Checkbox component for improved branch selection experience

components/search/form/SearchMultiBranchPicker.jsx

@@ -7,6 +7,7 @@ import { isValidBranchParam } from "@/lib/frontend/params";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -161,25 +162,54 @@ export default function SearchMultiBranchPicker({
 							Ausgewählt: {selected.length}
 						</div>
 
-						{/* 5 per row on md+ */}
+						{/* 
+							RHL-038 UI polish:
+							- Use shadcn Checkbox + a “selectable card” label wrapper
+							- Checked state highlights the whole tile (border + background)
+							- Keep it compact so it still works with many branches
+						*/}
 						<div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-5">
 							{branchOptions.map((b) => {
 								const id = String(b);
 								const checked = selectedSet.has(id);
 
+								// Stable id for accessibility (Label <-> Checkbox association).
+								const checkboxId = `branch-${id}`;
+
 								return (
-									<label
+									<Label
 										key={id}
-										className="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-muted/50"
+										htmlFor={checkboxId}
+										className={[
+											"hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 transition-colors",
+											// When the checkbox inside is checked, highlight the tile.
+											"has-aria-checked:border-blue-600 has-aria-checked:bg-blue-50",
+											"dark:has-aria-checked:border-blue-900 dark:has-aria-checked:bg-blue-950",
+											// Slightly reduce click affordance when submitting.
+											isSubmitting ? "opacity-60" : "",
+										].join(" ")}
+										title={id}
 									>
-										<input
-											type="checkbox"
+										<Checkbox
+											id={checkboxId}
 											checked={checked}
-											onChange={() => onToggleBranch(id)}
 											disabled={isSubmitting}
+											// We keep the update logic in the parent: toggle by branch id.
+											onCheckedChange={() => onToggleBranch(id)}
+											className={[
+												// Match the shadcn example “blue checked box” styling.
+												"data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white",
+												"dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700",
+											].join(" ")}
 										/>
-										<span className="text-sm">{id}</span>
-									</label>
+
+										<div className="grid gap-1.5 font-normal">
+											<p className="text-sm leading-none font-medium">{id}</p>
+											<p className="text-xs text-muted-foreground">
+												In Suche einbeziehen
+											</p>
+										</div>
+									</Label>
 								);
 							})}
 						</div>