fix: include quantity in getAllItems select, createItem values, and updateItem type

Quantity was missing from three places in item.service.ts:
- getAllItems didn't select it (API returned undefined)
- createItem didn't pass it to insert (always used DB default of 1)
- updateItem type didn't include it (silently stripped from updates)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/client/components/CandidateListItem.tsx

@@ -1,4 +1,5 @@
-import { Reorder, useDragControls } from "framer-motion";
+import { Reorder } from "framer-motion";
+import { useRef } from "react";
 import { useFormatters } from "../hooks/useFormatters";
 import type { CandidateDelta } from "../hooks/useImpactDeltas";
 import { LucideIcon } from "../lib/iconData";
@@ -31,6 +32,7 @@ interface CandidateListItemProps {
 	isActive: boolean;
 	onStatusChange: (status: "researching" | "ordered" | "arrived") => void;
 	delta?: CandidateDelta;
+	onDragEnd?: () => void;
 }
 
 const RANK_COLORS = ["#D4AF37", "#C0C0C0", "#CD7F32"]; // gold, silver, bronze
@@ -53,8 +55,9 @@ export function CandidateListItem({
 	isActive,
 	onStatusChange,
 	delta,
+	onDragEnd,
 }: CandidateListItemProps) {
-	const controls = useDragControls();
+	const isDragging = useRef(false);
 	const { weight, price } = useFormatters();
 	const openCandidateEditPanel = useUIStore((s) => s.openCandidateEditPanel);
 	const openConfirmDeleteCandidate = useUIStore(
@@ -64,20 +67,15 @@ export function CandidateListItem({
 	const openExternalLink = useUIStore((s) => s.openExternalLink);
 
 	const sharedClassName =
-		"flex items-center gap-3 bg-white rounded-xl border border-gray-100 p-3 hover:border-gray-200 hover:shadow-sm transition-all group cursor-default";
+		"flex items-center gap-3 bg-white rounded-xl border border-gray-100 p-3 hover:border-gray-200 hover:shadow-sm group cursor-default";
 
 	const innerContent = (
 		<>
-			{/* Drag handle */}
+			{/* Drag handle indicator */}
 			{isActive && (
-				<button
+				<span className="text-gray-300 shrink-0">
-					type="button"
-					onPointerDown={(e) => controls.start(e)}
-					className="cursor-grab active:cursor-grabbing text-gray-300 hover:text-gray-500 touch-none shrink-0"
-					title="Drag to reorder"
-				>
 					<LucideIcon name="grip-vertical" size={16} />
-				</button>
+				</span>
 			)}
 
 			{/* Rank badge */}
@@ -103,7 +101,10 @@ export function CandidateListItem({
 			{/* Name + badges */}
 			<button
 				type="button"
-				onClick={() => openCandidateEditPanel(candidate.id)}
+				onClick={() => {
+					if (isDragging.current) return;
+					openCandidateEditPanel(candidate.id);
+				}}
 				className="flex-1 min-w-0 text-left"
 			>
 				<p className="text-sm font-semibold text-gray-900 truncate">
@@ -215,8 +216,17 @@ export function CandidateListItem({
 		return (
 			<Reorder.Item
 				value={candidate}
-				dragControls={controls}
+				onDragStart={() => {
-				dragListener={false}
+					isDragging.current = true;
+				}}
+				onDragEnd={() => {
+					setTimeout(() => {
+						isDragging.current = false;
+					}, 0);
+					onDragEnd?.();
+				}}
+				whileDrag={{ cursor: "grabbing" }}
+				style={{ marginBottom: 8, cursor: "grab" }}
 				className={sharedClassName}
 			>
 				{innerContent}

src/client/hooks/useItems.ts

@@ -1,6 +1,13 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import type { CreateItem } from "../../shared/types";
-import { apiDelete, apiGet, apiPost, apiPut, apiUpload } from "../lib/api";
+import {
+	ApiError,
+	apiDelete,
+	apiGet,
+	apiPost,
+	apiPut,
+	apiUpload,
+} from "../lib/api";
 
 interface Item {
 	id: number;
@@ -45,6 +52,8 @@ export function useItem(id: number | null) {
 		queryKey: ["items", id],
 		queryFn: () => apiGet<ItemWithCategory>(`/api/items/${id}`),
 		enabled: id != null,
+		retry: (count, error) =>
+			error instanceof ApiError && error.status === 404 ? false : count < 3,
 	});
 }
 

src/client/hooks/useSetups.ts

@@ -1,5 +1,12 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { apiDelete, apiGet, apiPatch, apiPost, apiPut } from "../lib/api";
+import {
+	ApiError,
+	apiDelete,
+	apiGet,
+	apiPatch,
+	apiPost,
+	apiPut,
+} from "../lib/api";
 
 interface SetupListItem {
 	id: number;
@@ -50,6 +57,8 @@ export function useSetup(setupId: number | null) {
 		queryKey: ["setups", setupId],
 		queryFn: () => apiGet<SetupWithItems>(`/api/setups/${setupId}`),
 		enabled: setupId != null,
+		retry: (count, error) =>
+			error instanceof ApiError && error.status === 404 ? false : count < 3,
 	});
 }
 

src/client/hooks/useThreads.ts

@@ -1,5 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { apiDelete, apiGet, apiPost, apiPut } from "../lib/api";
+import { ApiError, apiDelete, apiGet, apiPost, apiPut } from "../lib/api";
 
 interface ThreadListItem {
 	id: number;
@@ -61,6 +61,8 @@ export function useThread(threadId: number | null) {
 		queryKey: ["threads", threadId],
 		queryFn: () => apiGet<ThreadWithCandidates>(`/api/threads/${threadId}`),
 		enabled: threadId != null,
+		retry: (count, error) =>
+			error instanceof ApiError && error.status === 404 ? false : count < 3,
 	});
 }
 

src/client/lib/api.ts

@@ -1,4 +1,4 @@
-class ApiError extends Error {
+export class ApiError extends Error {
 	constructor(
 		message: string,
 		public status: number,

src/client/routes/collection/index.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, Link } from "@tanstack/react-router";
 import { AnimatePresence, motion } from "framer-motion";
 import { useRef } from "react";
 import { z } from "zod";
@@ -16,6 +16,11 @@ export const Route = createFileRoute("/collection/")({
 });
 
 const TAB_ORDER = ["gear", "planning", "setups"] as const;
+const TAB_LABELS: Record<(typeof TAB_ORDER)[number], string> = {
+	gear: "Gear",
+	planning: "Planning",
+	setups: "Setups",
+};
 
 const slideVariants = {
 	enter: (dir: number) => ({ x: `${dir * 15}%`, opacity: 0 }),
@@ -33,6 +38,26 @@ function CollectionPage() {
 
 	return (
 		<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 overflow-x-hidden">
+			{/* Tab navigation */}
+			<div className="flex justify-center mb-6">
+				<div className="flex bg-gray-100 rounded-full p-0.5 gap-0.5">
+					{TAB_ORDER.map((t) => (
+						<Link
+							key={t}
+							to="/collection"
+							search={{ tab: t }}
+							className={`px-4 py-1.5 text-sm font-medium rounded-full transition-colors ${
+								tab === t
+									? "bg-gray-700 text-white"
+									: "text-gray-600 hover:bg-gray-200"
+							}`}
+						>
+							{TAB_LABELS[t]}
+						</Link>
+					))}
+				</div>
+			</div>
+
 			<AnimatePresence mode="wait" initial={false} custom={direction}>
 				<motion.div
 					key={tab}

src/client/routes/threads/$threadId.tsx

@@ -36,12 +36,11 @@ function ThreadDetailPage() {
 		thread?.categoryId ?? 0,
 	);
 
-	const [tempItems, setTempItems] =
+	const [tempItems, setTempItems] = useState<
-		useState<typeof thread extends { candidates: infer C } ? C : never | null>(
+		NonNullable<typeof thread>["candidates"] | null
-			null,
+	>(null);
-		);
 
-	// Clear tempItems when server data changes (biome-ignore: thread?.candidates is intentional dep)
+	// Clear tempItems when server data changes
 	// biome-ignore lint/correctness/useExhaustiveDependencies: thread?.candidates is the intended trigger
 	useEffect(() => {
 		setTempItems(null);
@@ -88,10 +87,9 @@ function ThreadDetailPage() {
 
 	function handleDragEnd() {
 		if (!tempItems) return;
-		reorderMutation.mutate(
+		reorderMutation.mutate({
-			{ orderedIds: tempItems.map((c) => c.id) },
+			orderedIds: tempItems.map((c) => c.id),
-			{ onSettled: () => setTempItems(null) },
+		});
-		);
 	}
 
 	return (
@@ -131,7 +129,7 @@ function ThreadDetailPage() {
 
 			{/* Toolbar: Add candidate + view toggle */}
 			<div className="mb-6 flex items-center gap-3 flex-wrap">
-				{isActive && candidateViewMode !== "compare" && (
+				{isActive && (
 					<button
 						type="button"
 						onClick={openCandidateAddPanel}
@@ -227,8 +225,7 @@ function ThreadDetailPage() {
 						axis="y"
 						values={displayItems}
 						onReorder={setTempItems}
-						onPointerUp={handleDragEnd}
+						className="flex flex-col"
-						className="flex flex-col gap-2"
 					>
 						{displayItems.map((candidate, index) => (
 							<CandidateListItem
@@ -243,6 +240,7 @@ function ThreadDetailPage() {
 									})
 								}
 								delta={deltas[candidate.id]}
+								onDragEnd={handleDragEnd}
 							/>
 						))}
 					</Reorder.Group>

src/server/services/item.service.ts

@@ -12,6 +12,7 @@ export function getAllItems(db: Db = prodDb) {
 			name: items.name,
 			weightGrams: items.weightGrams,
 			priceCents: items.priceCents,
+			quantity: items.quantity,
 			categoryId: items.categoryId,
 			notes: items.notes,
 			productUrl: items.productUrl,
@@ -63,6 +64,7 @@ export function createItem(
 			name: data.name,
 			weightGrams: data.weightGrams ?? null,
 			priceCents: data.priceCents ?? null,
+			quantity: data.quantity ?? 1,
 			categoryId: data.categoryId,
 			notes: data.notes ?? null,
 			productUrl: data.productUrl ?? null,
@@ -80,6 +82,7 @@ export function updateItem(
 		name: string;
 		weightGrams: number;
 		priceCents: number;
+		quantity: number;
 		categoryId: number;
 		notes: string;
 		productUrl: string;