From 0b46eff243c4767671df2bc0b0619e9754ef1281 Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Mon, 13 Apr 2026 18:04:41 +0200
Subject: [PATCH] feat: add shared setup viewer with token detection and
 read-only mode

Detect ?share=token query param on setup detail page, fetch via
/api/shared/:token, and display read-only view with "Shared setup"
banner. Hide all owner controls (add items, share, delete, classification)
in shared view. Show "Link not available" error for invalid tokens.

Plan: 32-04 (Setup Sharing System - Shared Setup Viewer)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/client/hooks/useSetups.ts         |  9 ++++
 src/client/routes/setups/$setupId.tsx | 75 +++++++++++++++++++++------
 2 files changed, 68 insertions(+), 16 deletions(-)

diff --git a/src/client/hooks/useSetups.ts b/src/client/hooks/useSetups.ts
index 5ef7b1b..158a17c 100644
--- a/src/client/hooks/useSetups.ts
+++ b/src/client/hooks/useSetups.ts
@@ -74,6 +74,15 @@ export function usePublicSetup(setupId: number | null) {
 	});
 }
 
+export function useSharedSetup(token: string | null) {
+	return useQuery({
+		queryKey: ["shared-setup", token],
+		queryFn: () => apiGet<SetupWithItems>(`/api/shared/${token}`),
+		enabled: !!token,
+		retry: false,
+	});
+}
+
 export function useCreateSetup() {
 	const queryClient = useQueryClient();
 	return useMutation({
diff --git a/src/client/routes/setups/$setupId.tsx b/src/client/routes/setups/$setupId.tsx
index aae970c..8e6abc9 100644
--- a/src/client/routes/setups/$setupId.tsx
+++ b/src/client/routes/setups/$setupId.tsx
@@ -1,5 +1,6 @@
 import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
 import { useState } from "react";
+import { z } from "zod";
 import { CategoryHeader } from "../../components/CategoryHeader";
 import { ItemCard } from "../../components/ItemCard";
 import { ItemPicker } from "../../components/ItemPicker";
@@ -12,6 +13,7 @@ import {
 	usePublicSetup,
 	useRemoveSetupItem,
 	useSetup,
+	useSharedSetup,
 	useUpdateItemClassification,
 	useUpdateSetup,
 } from "../../hooks/useSetups";
@@ -19,22 +21,35 @@ import { LucideIcon } from "../../lib/iconData";
 
 export const Route = createFileRoute("/setups/$setupId")({
 	component: SetupDetailPage,
+	validateSearch: z.object({
+		share: z.string().optional(),
+	}),
 });
 
 function SetupDetailPage() {
 	const { setupId } = Route.useParams();
+	const { share: shareToken } = Route.useSearch();
 	const { weight, price } = useFormatters();
 	const navigate = useNavigate();
 	const numericId = Number(setupId);
 
 	const { data: auth } = useAuth();
 	const isAuthenticated = !!auth?.user;
+	const isSharedView = !!shareToken;
 
-	const privateSetup = useSetup(isAuthenticated ? numericId : null);
-	const publicSetup = usePublicSetup(!isAuthenticated ? numericId : null);
-	const { data: setup, isLoading } = isAuthenticated
-		? privateSetup
-		: publicSetup;
+	// Priority: share token > authenticated owner > public viewer
+	const sharedSetup = useSharedSetup(shareToken ?? null);
+	const privateSetup = useSetup(
+		!isSharedView && isAuthenticated ? numericId : null,
+	);
+	const publicSetup = usePublicSetup(
+		!isSharedView && !isAuthenticated ? numericId : null,
+	);
+	const {
+		data: setup,
+		isLoading,
+		isError: isSharedError,
+	} = isSharedView ? sharedSetup : isAuthenticated ? privateSetup : publicSetup;
 
 	const deleteSetup = useDeleteSetup();
 	const updateSetup = useUpdateSetup(numericId);
@@ -60,6 +75,24 @@ function SetupDetailPage() {
 		);
 	}
 
+	if (isSharedView && isSharedError) {
+		return (
+			<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 text-center">
+				<LucideIcon
+					name="link"
+					size={48}
+					className="text-gray-300 mx-auto mb-4"
+				/>
+				<h2 className="text-xl font-semibold text-gray-900 mb-2">
+					Link not available
+				</h2>
+				<p className="text-sm text-gray-500">
+					This share link has expired or is no longer valid.
+				</p>
+			</div>
+		);
+	}
+
 	if (!setup) {
 		return (
 			<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center">
@@ -115,8 +148,18 @@ function SetupDetailPage() {
 		});
 	}
 
+	const showOwnerControls = !isSharedView && isAuthenticated;
+
 	return (
 		<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+			{/* Shared setup banner */}
+			{isSharedView && setup && (
+				<div className="flex items-center gap-2 px-4 py-2 bg-blue-50 border-b border-blue-100 -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8">
+					<LucideIcon name="link" size={16} className="text-blue-500" />
+					<span className="text-sm text-blue-700">Shared setup</span>
+				</div>
+			)}
+
 			{/* Setup-specific sticky bar */}
 			<div className="sticky top-14 z-[9] bg-gray-50 border-b border-gray-100 -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8">
 				<div className="flex items-center justify-between h-12">
@@ -153,8 +196,8 @@ function SetupDetailPage() {
 				</div>
 			</div>
 
-			{/* Actions — only visible to authenticated users */}
-			{isAuthenticated && (
+			{/* Actions — only visible to authenticated owner (hidden in shared view) */}
+			{showOwnerControls && (
 				<div className="flex items-center gap-3 py-4">
 					{/* Add Items — desktop */}
 					<button
@@ -265,7 +308,7 @@ function SetupDetailPage() {
 						<p className="text-sm text-gray-500 mb-6">
 							Add items from your collection to build this loadout.
 						</p>
-						{isAuthenticated && (
+						{showOwnerControls && (
 							<button
 								type="button"
 								onClick={() => setPickerOpen(true)}
@@ -322,13 +365,13 @@ function SetupDetailPage() {
 												imageUrl={item.imageUrl}
 												productUrl={item.productUrl}
 												onRemove={
-													isAuthenticated
+													showOwnerControls
 														? () => removeItem.mutate(item.id)
 														: undefined
 												}
 												classification={item.classification}
 												onClassificationCycle={
-													isAuthenticated
+													showOwnerControls
 														? () =>
 																updateClassification.mutate({
 																	itemId: item.id,
@@ -348,8 +391,8 @@ function SetupDetailPage() {
 				</div>
 			)}
 
-			{/* Item Picker — only for authenticated users */}
-			{isAuthenticated && (
+			{/* Item Picker — only for authenticated owner */}
+			{showOwnerControls && (
 				<ItemPicker
 					setupId={numericId}
 					currentItemIds={currentItemIds}
@@ -358,8 +401,8 @@ function SetupDetailPage() {
 				/>
 			)}
 
-			{/* Share Modal — only for authenticated users */}
-			{isAuthenticated && (
+			{/* Share Modal — only for authenticated owner */}
+			{showOwnerControls && (
 				<ShareModal
 					isOpen={shareModalOpen}
 					onClose={() => setShareModalOpen(false)}
@@ -369,8 +412,8 @@ function SetupDetailPage() {
 				/>
 			)}
 
-			{/* Delete Confirmation Dialog — only for authenticated users */}
-			{isAuthenticated && confirmDelete && (
+			{/* Delete Confirmation Dialog — only for authenticated owner */}
+			{showOwnerControls && confirmDelete && (
 				<div className="fixed inset-0 z-50 flex items-center justify-center">
 					<div
 						className="absolute inset-0 bg-black/30"