From 5b4026d36fc83271e8c3198200428b8104862404 Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Tue, 17 Mar 2026 15:30:38 +0100
Subject: [PATCH] feat(12-01): wire compare toggle and ComparisonTable into
 thread detail

- Extend uiStore candidateViewMode union to include "compare" value
- Add columns-3 compare toggle button, shown only when thread has 2+ candidates
- Hide "Add Candidate" button when in compare view (read-only intent)
- Import and render ComparisonTable when candidateViewMode === "compare"
- Pass displayItems so compare view reflects any pending reorder state
- Existing list/grid views unchanged; all 135 tests pass
---
 src/client/routes/threads/$threadId.tsx | 22 +++++++++++++++++++++-
 src/client/stores/uiStore.ts            |  4 ++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/client/routes/threads/$threadId.tsx b/src/client/routes/threads/$threadId.tsx
index f16ccc2..4ba63b2 100644
--- a/src/client/routes/threads/$threadId.tsx
+++ b/src/client/routes/threads/$threadId.tsx
@@ -3,6 +3,7 @@ import { Reorder } from "framer-motion";
 import { useEffect, useState } from "react";
 import { CandidateCard } from "../../components/CandidateCard";
 import { CandidateListItem } from "../../components/CandidateListItem";
+import { ComparisonTable } from "../../components/ComparisonTable";
 import {
 	useReorderCandidates,
 	useUpdateCandidate,
@@ -120,7 +121,7 @@ function ThreadDetailPage() {
 
 			{/* Toolbar: Add candidate + view toggle */}
 			<div className="mb-6 flex items-center gap-3">
-				{isActive && (
+				{isActive && candidateViewMode !== "compare" && (
 					<button
 						type="button"
 						onClick={openCandidateAddPanel}
@@ -168,6 +169,20 @@ function ThreadDetailPage() {
 						>
 							<LucideIcon name="layout-grid" size={16} />
 						</button>
+						{thread.candidates.length >= 2 && (
+							<button
+								type="button"
+								onClick={() => setCandidateViewMode("compare")}
+								className={`p-1.5 rounded-md transition-colors ${
+									candidateViewMode === "compare"
+										? "bg-gray-200 text-gray-900"
+										: "text-gray-400 hover:text-gray-600"
+								}`}
+								title="Compare view"
+							>
+								<LucideIcon name="columns-3" size={16} />
+							</button>
+						)}
 					</div>
 				)}
 			</div>
@@ -189,6 +204,11 @@ function ThreadDetailPage() {
 						Add your first candidate to start comparing.
 					</p>
 				</div>
+			) : candidateViewMode === "compare" ? (
+				<ComparisonTable
+					candidates={displayItems}
+					resolvedCandidateId={thread.resolvedCandidateId}
+				/>
 			) : candidateViewMode === "list" ? (
 				isActive ? (
 					<Reorder.Group
diff --git a/src/client/stores/uiStore.ts b/src/client/stores/uiStore.ts
index 571d9be..8bd5c19 100644
--- a/src/client/stores/uiStore.ts
+++ b/src/client/stores/uiStore.ts
@@ -50,8 +50,8 @@ interface UIState {
 	closeExternalLink: () => void;
 
 	// Candidate view mode
-	candidateViewMode: "list" | "grid";
-	setCandidateViewMode: (mode: "list" | "grid") => void;
+	candidateViewMode: "list" | "grid" | "compare";
+	setCandidateViewMode: (mode: "list" | "grid" | "compare") => void;
 }
 
 export const useUIStore = create<UIState>((set) => ({