refactor: move setups list into collection page as third tab

Setups now lives alongside My Gear and Planning under /collection?tab=setups
instead of its own /setups route. Dashboard card updated to link to the new
tab. Setup detail pages (/setups/:id) remain unchanged.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.gitea/workflows/ci.yml

@@ -2,9 +2,9 @@ name: CI
 
 on:
   push:
-    branches: [develop]
+    branches: [Develop]
   pull_request:
-    branches: [develop]
+    branches: [Develop]
 
 jobs:
   ci:
@@ -16,7 +16,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Install dependencies
-        run: bun install --frozen-lockfile
+        run: bun install --frozen-lockfile --ignore-scripts
 
       - name: Lint
         run: bun run lint

.gitea/workflows/release.yml

@@ -23,7 +23,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Install dependencies
-        run: bun install --frozen-lockfile
+        run: bun install --frozen-lockfile --ignore-scripts
 
       - name: Lint
         run: bun run lint
@@ -40,7 +40,7 @@ jobs:
     steps:
       - name: Clone repository
         run: |
-          apk add --no-cache git curl jq
+          apk add --no-cache git curl jq docker-cli
           git clone https://${{ secrets.GITEA_TOKEN }}@gitea.jeanlucmakiola.de/${{ gitea.repository }}.git repo
           cd repo
           git checkout ${{ gitea.ref_name }}

Dockerfile

@@ -1,5 +1,6 @@
 FROM oven/bun:1 AS deps
 WORKDIR /app
+RUN apt-get update && apt-get install -y python3 make g++ && rm -rf /var/lib/apt/lists/*
 COPY package.json bun.lock ./
 RUN bun install --frozen-lockfile
 

README.md

@@ -1,2 +1,83 @@
 # GearBox
 
+A single-user web app for managing gear collections (bikepacking, sim racing, etc.), tracking weight and price, and planning purchases through research threads.
+
+## Features
+
+- Organize gear into categories with custom icons
+- Track weight and price for every item
+- Create setups (packing lists) from your collection with automatic weight/cost totals
+- Research threads for comparing candidates before buying
+- Image uploads for items and candidates
+
+## Quick Start
+
+### Docker Compose (recommended)
+
+Create a `docker-compose.yml`:
+
+```yaml
+services:
+  gearbox:
+    image: gitea.jeanlucmakiola.de/makiolaj/gearbox:latest
+    container_name: gearbox
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production
+      - DATABASE_PATH=./data/gearbox.db
+    volumes:
+      - gearbox-data:/app/data
+      - gearbox-uploads:/app/uploads
+    healthcheck:
+      test: ["CMD", "bun", "-e", "fetch('http://localhost:3000/api/health').then(r=>r.ok?process.exit(0):process.exit(1)).catch(()=>process.exit(1))"]
+      interval: 30s
+      timeout: 5s
+      start_period: 10s
+      retries: 3
+    restart: unless-stopped
+
+volumes:
+  gearbox-data:
+  gearbox-uploads:
+```
+
+Then run:
+
+```bash
+docker compose up -d
+```
+
+GearBox will be available at `http://localhost:3000`.
+
+### Docker
+
+```bash
+docker run -d \
+  --name gearbox \
+  -p 3000:3000 \
+  -e NODE_ENV=production \
+  -e DATABASE_PATH=./data/gearbox.db \
+  -v gearbox-data:/app/data \
+  -v gearbox-uploads:/app/uploads \
+  --restart unless-stopped \
+  gitea.jeanlucmakiola.de/makiolaj/gearbox:latest
+```
+
+## Data
+
+All data is stored in two Docker volumes:
+
+- **gearbox-data** -- SQLite database
+- **gearbox-uploads** -- uploaded images
+
+Back up these volumes to preserve your data.
+
+## Updating
+
+```bash
+docker compose pull
+docker compose up -d
+```
+
+Database migrations run automatically on startup.

biome.json

@@ -6,7 +6,8 @@
 		"useIgnoreFile": true
 	},
 	"files": {
-		"ignoreUnknown": false
+		"ignoreUnknown": false,
+		"includes": ["**", "!src/client/routeTree.gen.ts"]
 	},
 	"formatter": {
 		"enabled": true,
@@ -15,7 +16,22 @@
 	"linter": {
 		"enabled": true,
 		"rules": {
-			"recommended": true
+			"recommended": true,
+			"a11y": {
+				"noSvgWithoutTitle": "off",
+				"noStaticElementInteractions": "off",
+				"useKeyWithClickEvents": "off",
+				"useSemanticElements": "off",
+				"noAutofocus": "off",
+				"useAriaPropsSupportedByRole": "off",
+				"noLabelWithoutControl": "off"
+			},
+			"suspicious": {
+				"noExplicitAny": "off"
+			},
+			"style": {
+				"noNonNullAssertion": "off"
+			}
 		}
 	},
 	"javascript": {

docker-compose.yml

@@ -1,6 +1,6 @@
 services:
   gearbox:
-    build: .
+    image: gitea.jeanlucmakiola.de/makiolaj/gearbox:latest
     container_name: gearbox
     ports:
       - "3000:3000"
@@ -10,6 +10,12 @@ services:
     volumes:
       - gearbox-data:/app/data
       - gearbox-uploads:/app/uploads
+    healthcheck:
+      test: ["CMD", "bun", "-e", "fetch('http://localhost:3000/api/health').then(r=>r.ok?process.exit(0):process.exit(1)).catch(()=>process.exit(1))"]
+      interval: 30s
+      timeout: 5s
+      start_period: 10s
+      retries: 3
     restart: unless-stopped
 
 volumes:

drizzle/meta/0000_snapshot.json

@@ -40,9 +40,7 @@
 			"indexes": {
 				"categories_name_unique": {
 					"name": "categories_name_unique",
-          "columns": [
-            "name"
-          ],
+					"columns": ["name"],
 					"isUnique": true
 				}
 			},
@@ -131,12 +129,8 @@
 					"name": "items_category_id_categories_id_fk",
 					"tableFrom": "items",
 					"tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+					"columnsFrom": ["category_id"],
+					"columnsTo": ["id"],
 					"onDelete": "no action",
 					"onUpdate": "no action"
 				}
@@ -200,12 +194,8 @@
 					"name": "setup_items_setup_id_setups_id_fk",
 					"tableFrom": "setup_items",
 					"tableTo": "setups",
-          "columnsFrom": [
-            "setup_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+					"columnsFrom": ["setup_id"],
+					"columnsTo": ["id"],
 					"onDelete": "cascade",
 					"onUpdate": "no action"
 				},
@@ -213,12 +203,8 @@
 					"name": "setup_items_item_id_items_id_fk",
 					"tableFrom": "setup_items",
 					"tableTo": "items",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+					"columnsFrom": ["item_id"],
+					"columnsTo": ["id"],
 					"onDelete": "cascade",
 					"onUpdate": "no action"
 				}
@@ -352,12 +338,8 @@
 					"name": "thread_candidates_thread_id_threads_id_fk",
 					"tableFrom": "thread_candidates",
 					"tableTo": "threads",
-          "columnsFrom": [
-            "thread_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+					"columnsFrom": ["thread_id"],
+					"columnsTo": ["id"],
 					"onDelete": "cascade",
 					"onUpdate": "no action"
 				},
@@ -365,12 +347,8 @@
 					"name": "thread_candidates_category_id_categories_id_fk",
 					"tableFrom": "thread_candidates",
 					"tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+					"columnsFrom": ["category_id"],
+					"columnsTo": ["id"],
 					"onDelete": "no action",
 					"onUpdate": "no action"
 				}
@@ -439,12 +417,8 @@
 					"name": "threads_category_id_categories_id_fk",
 					"tableFrom": "threads",
 					"tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+					"columnsFrom": ["category_id"],
+					"columnsTo": ["id"],
 					"onDelete": "no action",
 					"onUpdate": "no action"
 				}

drizzle/meta/0001_snapshot.json

@@ -40,9 +40,7 @@
 			"indexes": {
 				"categories_name_unique": {
 					"name": "categories_name_unique",
-          "columns": [
-            "name"
-          ],
+					"columns": ["name"],
 					"isUnique": true
 				}
 			},
@@ -131,12 +129,8 @@
 					"name": "items_category_id_categories_id_fk",
 					"tableFrom": "items",
 					"tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+					"columnsFrom": ["category_id"],
+					"columnsTo": ["id"],
 					"onDelete": "no action",
 					"onUpdate": "no action"
 				}
@@ -200,12 +194,8 @@
 					"name": "setup_items_setup_id_setups_id_fk",
 					"tableFrom": "setup_items",
 					"tableTo": "setups",
-          "columnsFrom": [
-            "setup_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+					"columnsFrom": ["setup_id"],
+					"columnsTo": ["id"],
 					"onDelete": "cascade",
 					"onUpdate": "no action"
 				},
@@ -213,12 +203,8 @@
 					"name": "setup_items_item_id_items_id_fk",
 					"tableFrom": "setup_items",
 					"tableTo": "items",
-          "columnsFrom": [
-            "item_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+					"columnsFrom": ["item_id"],
+					"columnsTo": ["id"],
 					"onDelete": "cascade",
 					"onUpdate": "no action"
 				}
@@ -352,12 +338,8 @@
 					"name": "thread_candidates_thread_id_threads_id_fk",
 					"tableFrom": "thread_candidates",
 					"tableTo": "threads",
-          "columnsFrom": [
-            "thread_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+					"columnsFrom": ["thread_id"],
+					"columnsTo": ["id"],
 					"onDelete": "cascade",
 					"onUpdate": "no action"
 				},
@@ -365,12 +347,8 @@
 					"name": "thread_candidates_category_id_categories_id_fk",
 					"tableFrom": "thread_candidates",
 					"tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+					"columnsFrom": ["category_id"],
+					"columnsTo": ["id"],
 					"onDelete": "no action",
 					"onUpdate": "no action"
 				}
@@ -439,12 +417,8 @@
 					"name": "threads_category_id_categories_id_fk",
 					"tableFrom": "threads",
 					"tableTo": "categories",
-          "columnsFrom": [
-            "category_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+					"columnsFrom": ["category_id"],
+					"columnsTo": ["id"],
 					"onDelete": "no action",
 					"onUpdate": "no action"
 				}

entrypoint.sh

@@ -1,4 +1,4 @@
 #!/bin/sh
 set -e
-bun run db:push
+bun run src/db/migrate.ts
 exec bun run src/server/index.ts

index.html

@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>GearBox</title>
   </head>
   <body>

public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7.5 4.27 9 5.15"/><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></svg>

src/client/components/CandidateCard.tsx

@@ -46,7 +46,7 @@ export function CandidateCard({
 							openExternalLink(productUrl);
 						}
 					}}
-					className="absolute top-2 right-2 z-10 w-6 h-6 flex items-center justify-center rounded-full bg-gray-100/80 text-gray-400 hover:bg-blue-100 hover:text-blue-500 opacity-0 group-hover:opacity-100 transition-all cursor-pointer"
+					className="absolute top-2 right-2 z-10 w-6 h-6 flex items-center justify-center rounded-full bg-gray-100/80 text-gray-400 hover:bg-gray-200 hover:text-gray-600 opacity-0 group-hover:opacity-100 transition-all cursor-pointer"
 					title="Open product link"
 				>
 					<svg
@@ -73,7 +73,11 @@ export function CandidateCard({
 					/>
 				) : (
 					<div className="w-full h-full flex flex-col items-center justify-center">
-						<LucideIcon name={categoryIcon} size={36} className="text-gray-400" />
+						<LucideIcon
+							name={categoryIcon}
+							size={36}
+							className="text-gray-400"
+						/>
 					</div>
 				)}
 			</div>
@@ -83,24 +87,29 @@ export function CandidateCard({
 				</h3>
 				<div className="flex flex-wrap gap-1.5 mb-3">
 					{weightGrams != null && (
-						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700">
+						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-400">
 							{formatWeight(weightGrams)}
 						</span>
 					)}
 					{priceCents != null && (
-						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-700">
+						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-500">
 							{formatPrice(priceCents)}
 						</span>
 					)}
 					<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
-						<LucideIcon name={categoryIcon} size={14} className="inline-block mr-1 text-gray-500" /> {categoryName}
+						<LucideIcon
+							name={categoryIcon}
+							size={14}
+							className="inline-block mr-1 text-gray-500"
+						/>{" "}
+						{categoryName}
 					</span>
 				</div>
 				<div className="flex gap-2">
 					<button
 						type="button"
 						onClick={() => openCandidateEditPanel(id)}
-						className="text-xs text-gray-500 hover:text-blue-600 transition-colors"
+						className="text-xs text-gray-500 hover:text-gray-700 transition-colors"
 					>
 						Edit
 					</button>

src/client/components/CandidateForm.tsx

@@ -1,8 +1,5 @@
-import { useState, useEffect } from "react";
-import {
-  useCreateCandidate,
-  useUpdateCandidate,
-} from "../hooks/useCandidates";
+import { useEffect, useState } from "react";
+import { useCreateCandidate, useUpdateCandidate } from "../hooks/useCandidates";
 import { useThread } from "../hooks/useThreads";
 import { useUIStore } from "../stores/uiStore";
 import { CategoryPicker } from "./CategoryPicker";
@@ -78,13 +75,13 @@ export function CandidateForm({
 		}
 		if (
 			form.weightGrams &&
-      (isNaN(Number(form.weightGrams)) || Number(form.weightGrams) < 0)
+			(Number.isNaN(Number(form.weightGrams)) || Number(form.weightGrams) < 0)
 		) {
 			newErrors.weightGrams = "Must be a positive number";
 		}
 		if (
 			form.priceDollars &&
-      (isNaN(Number(form.priceDollars)) || Number(form.priceDollars) < 0)
+			(Number.isNaN(Number(form.priceDollars)) || Number(form.priceDollars) < 0)
 		) {
 			newErrors.priceDollars = "Must be a positive number";
 		}
@@ -155,9 +152,8 @@ export function CandidateForm({
 					type="text"
 					value={form.name}
 					onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
-          className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+					className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
 					placeholder="e.g. Osprey Talon 22"
-          autoFocus
 				/>
 				{errors.name && (
 					<p className="mt-1 text-xs text-red-500">{errors.name}</p>
@@ -181,7 +177,7 @@ export function CandidateForm({
 					onChange={(e) =>
 						setForm((f) => ({ ...f, weightGrams: e.target.value }))
 					}
-          className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+					className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
 					placeholder="e.g. 680"
 				/>
 				{errors.weightGrams && (
@@ -206,7 +202,7 @@ export function CandidateForm({
 					onChange={(e) =>
 						setForm((f) => ({ ...f, priceDollars: e.target.value }))
 					}
-          className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+					className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
 					placeholder="e.g. 129.99"
 				/>
 				{errors.priceDollars && (
@@ -238,7 +234,7 @@ export function CandidateForm({
 					value={form.notes}
 					onChange={(e) => setForm((f) => ({ ...f, notes: e.target.value }))}
 					rows={3}
-          className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+					className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent resize-none"
 					placeholder="Any additional notes..."
 				/>
 			</div>
@@ -258,7 +254,7 @@ export function CandidateForm({
 					onChange={(e) =>
 						setForm((f) => ({ ...f, productUrl: e.target.value }))
 					}
-          className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+					className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
 					placeholder="https://..."
 				/>
 				{errors.productUrl && (
@@ -271,7 +267,7 @@ export function CandidateForm({
 				<button
 					type="submit"
 					disabled={isPending}
-          className="flex-1 py-2.5 px-4 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
+					className="flex-1 py-2.5 px-4 bg-gray-700 hover:bg-gray-800 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
 				>
 					{isPending
 						? "Saving..."

src/client/components/CategoryHeader.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
-import { formatWeight, formatPrice } from "../lib/formatters";
-import { useUpdateCategory, useDeleteCategory } from "../hooks/useCategories";
+import { useDeleteCategory, useUpdateCategory } from "../hooks/useCategories";
+import { formatPrice, formatWeight } from "../lib/formatters";
 import { LucideIcon } from "../lib/iconData";
 import { IconPicker } from "./IconPicker";
 
@@ -39,7 +39,9 @@ export function CategoryHeader({
 
 	function handleDelete() {
 		if (
-			confirm(`Delete category "${name}"? Items will be moved to Uncategorized.`)
+			confirm(
+				`Delete category "${name}"? Items will be moved to Uncategorized.`,
+			)
 		) {
 			deleteCategory.mutate(categoryId);
 		}
@@ -58,12 +60,11 @@ export function CategoryHeader({
 						if (e.key === "Enter") handleSave();
 						if (e.key === "Escape") setIsEditing(false);
 					}}
-					autoFocus
 				/>
 				<button
 					type="button"
 					onClick={handleSave}
-					className="text-sm text-blue-600 hover:text-blue-800 font-medium"
+					className="text-sm text-gray-600 hover:text-gray-800 font-medium"
 				>
 					Save
 				</button>

src/client/components/CategoryPicker.tsx

@@ -1,8 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import {
-	useCategories,
-	useCreateCategory,
-} from "../hooks/useCategories";
+import { useCategories, useCreateCategory } from "../hooks/useCategories";
 import { LucideIcon } from "../lib/iconData";
 import { IconPicker } from "./IconPicker";
 
@@ -109,10 +106,7 @@ export function CategoryPicker({ value, onChange }: CategoryPickerProps) {
 					handleConfirmCreate();
 				} else if (highlightIndex >= 0 && highlightIndex < filtered.length) {
 					handleSelect(filtered[highlightIndex].id);
-				} else if (
-					showCreateOption &&
-					highlightIndex === filtered.length
-				) {
+				} else if (showCreateOption && highlightIndex === filtered.length) {
 					handleStartCreate();
 				}
 				break;
@@ -162,11 +156,7 @@ export function CategoryPicker({ value, onChange }: CategoryPickerProps) {
 							: undefined
 					}
 					value={
-						isOpen
-							? inputValue
-							: selectedCategory
-								? selectedCategory.name
-								: ""
+						isOpen ? inputValue : selectedCategory ? selectedCategory.name : ""
 					}
 					placeholder="Search or create category..."
 					onChange={(e) => {
@@ -179,7 +169,7 @@ export function CategoryPicker({ value, onChange }: CategoryPickerProps) {
 						setInputValue("");
 					}}
 					onKeyDown={handleKeyDown}
-					className={`w-full py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+					className={`w-full py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent ${
 						!isOpen && selectedCategory ? "pl-8 pr-3" : "px-3"
 					}`}
 				/>
@@ -188,18 +178,16 @@ export function CategoryPicker({ value, onChange }: CategoryPickerProps) {
 				<ul
 					ref={listRef}
 					id="category-listbox"
-					role="listbox"
 					className="absolute z-20 mt-1 w-full max-h-48 overflow-auto bg-white border border-gray-200 rounded-lg shadow-lg"
 				>
 					{filtered.map((cat, i) => (
 						<li
 							key={cat.id}
 							id={`category-option-${i}`}
-							role="option"
 							aria-selected={cat.id === value}
 							className={`px-3 py-2 text-sm cursor-pointer flex items-center gap-1.5 ${
 								i === highlightIndex
-									? "bg-blue-50 text-blue-900"
+									? "bg-gray-100 text-gray-900"
 									: "hover:bg-gray-50"
 							} ${cat.id === value ? "font-medium" : ""}`}
 							onClick={() => handleSelect(cat.id)}
@@ -216,11 +204,10 @@ export function CategoryPicker({ value, onChange }: CategoryPickerProps) {
 					{showCreateOption && !isCreating && (
 						<li
 							id={`category-option-${filtered.length}`}
-							role="option"
 							aria-selected={false}
 							className={`px-3 py-2 text-sm cursor-pointer border-t border-gray-100 ${
 								highlightIndex === filtered.length
-									? "bg-blue-50 text-blue-900"
+									? "bg-gray-100 text-gray-900"
 									: "hover:bg-gray-50 text-gray-600"
 							}`}
 							onClick={handleStartCreate}
@@ -244,7 +231,7 @@ export function CategoryPicker({ value, onChange }: CategoryPickerProps) {
 									type="button"
 									onClick={handleConfirmCreate}
 									disabled={createCategory.isPending}
-									className="text-xs font-medium text-blue-600 hover:text-blue-800 disabled:opacity-50"
+									className="text-xs font-medium text-gray-600 hover:text-gray-800 disabled:opacity-50"
 								>
 									{createCategory.isPending ? "..." : "Create"}
 								</button>

src/client/components/ConfirmDialog.tsx

@@ -1,6 +1,5 @@
+import { useDeleteItem, useItems } from "../hooks/useItems";
 import { useUIStore } from "../stores/uiStore";
-import { useDeleteItem } from "../hooks/useItems";
-import { useItems } from "../hooks/useItems";
 
 export function ConfirmDialog() {
 	const confirmDeleteItemId = useUIStore((s) => s.confirmDeleteItemId);

src/client/components/CreateThreadModal.tsx

@@ -93,7 +93,7 @@ export function CreateThreadModal() {
 							value={name}
 							onChange={(e) => setName(e.target.value)}
 							placeholder="e.g. Lightweight sleeping bag"
-							className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+							className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
 						/>
 					</div>
 
@@ -108,7 +108,7 @@ export function CreateThreadModal() {
 							id="thread-category"
 							value={categoryId ?? ""}
 							onChange={(e) => setCategoryId(Number(e.target.value))}
-							className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white"
+							className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent bg-white"
 						>
 							{categories?.map((cat) => (
 								<option key={cat.id} value={cat.id}>
@@ -131,7 +131,7 @@ export function CreateThreadModal() {
 						<button
 							type="submit"
 							disabled={createThread.isPending}
-							className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50 rounded-lg transition-colors"
+							className="px-4 py-2 text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 disabled:opacity-50 rounded-lg transition-colors"
 						>
 							{createThread.isPending ? "Creating..." : "Create Thread"}
 						</button>

src/client/components/DashboardCard.tsx

@@ -43,7 +43,7 @@ export function DashboardCard({
 				))}
 			</div>
 			{allZero && emptyText && (
-				<p className="mt-4 text-sm text-blue-600 font-medium">{emptyText}</p>
+				<p className="mt-4 text-sm text-gray-500 font-medium">{emptyText}</p>
 			)}
 		</Link>
 	);

src/client/components/ExternalLinkDialog.tsx

@@ -37,10 +37,8 @@ export function ExternalLinkDialog() {
 				<h3 className="text-lg font-semibold text-gray-900 mb-2">
 					You are about to leave GearBox
 				</h3>
-				<p className="text-sm text-gray-600 mb-1">
-					You will be redirected to:
-				</p>
-				<p className="text-sm text-blue-600 break-all mb-6">
+				<p className="text-sm text-gray-600 mb-1">You will be redirected to:</p>
+				<p className="text-sm text-gray-600 break-all mb-6">
 					{externalLinkUrl}
 				</p>
 				<div className="flex justify-end gap-3">
@@ -54,7 +52,7 @@ export function ExternalLinkDialog() {
 					<button
 						type="button"
 						onClick={handleContinue}
-						className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
+						className="px-4 py-2 text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 rounded-lg transition-colors"
 					>
 						Continue
 					</button>

src/client/components/IconPicker.tsx

@@ -8,11 +8,7 @@ interface IconPickerProps {
 	size?: "sm" | "md";
 }
 
-export function IconPicker({
-	value,
-	onChange,
-	size = "md",
-}: IconPickerProps) {
+export function IconPicker({ value, onChange, size = "md" }: IconPickerProps) {
 	const [isOpen, setIsOpen] = useState(false);
 	const [search, setSearch] = useState("");
 	const [activeGroup, setActiveGroup] = useState(0);
@@ -99,8 +95,7 @@ export function IconPicker({
 		const results = iconGroups.flatMap((group) =>
 			group.icons.filter(
 				(icon) =>
-					icon.name.includes(q) ||
-					icon.keywords.some((kw) => kw.includes(q)),
+					icon.name.includes(q) || icon.keywords.some((kw) => kw.includes(q)),
 			),
 		);
 		// Deduplicate by name (some icons appear in multiple groups)
@@ -118,8 +113,7 @@ export function IconPicker({
 		setSearch("");
 	}
 
-	const buttonSize =
-		size === "sm" ? "w-10 h-10" : "w-12 h-12";
+	const buttonSize = size === "sm" ? "w-10 h-10" : "w-12 h-12";
 	const iconSize = size === "sm" ? 20 : 24;
 
 	return (
@@ -156,7 +150,7 @@ export function IconPicker({
 									setActiveGroup(0);
 								}}
 								placeholder="Search icons..."
-								className="w-full px-2 py-1.5 text-sm border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+								className="w-full px-2 py-1.5 text-sm border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
 							/>
 						</div>
 
@@ -170,7 +164,7 @@ export function IconPicker({
 										onClick={() => setActiveGroup(i)}
 										className={`flex-1 flex items-center justify-center py-1 rounded transition-colors ${
 											i === activeGroup
-												? "bg-blue-50 text-blue-700"
+												? "bg-gray-200 text-gray-700"
 												: "hover:bg-gray-50 text-gray-500"
 										}`}
 										title={group.name}
@@ -179,9 +173,7 @@ export function IconPicker({
 											name={group.icon}
 											size={16}
 											className={
-												i === activeGroup
-													? "text-blue-700"
-													: "text-gray-400"
+												i === activeGroup ? "text-gray-700" : "text-gray-400"
 											}
 										/>
 									</button>

src/client/components/ImageUpload.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef } from "react";
+import { useRef, useState } from "react";
 import { apiUpload } from "../lib/api";
 
 interface ImageUploadProps {
@@ -32,10 +32,7 @@ export function ImageUpload({ value, onChange }: ImageUploadProps) {
 
 		setUploading(true);
 		try {
-			const result = await apiUpload<{ filename: string }>(
-				"/api/images",
-				file,
-			);
+			const result = await apiUpload<{ filename: string }>("/api/images", file);
 			onChange(result.filename);
 		} catch {
 			setError("Upload failed. Please try again.");

src/client/components/ItemCard.tsx

@@ -48,7 +48,7 @@ export function ItemCard({
 							openExternalLink(productUrl);
 						}
 					}}
-					className={`absolute top-2 ${onRemove ? "right-10" : "right-2"} z-10 w-6 h-6 flex items-center justify-center rounded-full bg-gray-100/80 text-gray-400 hover:bg-blue-100 hover:text-blue-500 opacity-0 group-hover:opacity-100 transition-all cursor-pointer`}
+					className={`absolute top-2 ${onRemove ? "right-10" : "right-2"} z-10 w-6 h-6 flex items-center justify-center rounded-full bg-gray-100/80 text-gray-400 hover:bg-gray-200 hover:text-gray-600 opacity-0 group-hover:opacity-100 transition-all cursor-pointer`}
 					title="Open product link"
 				>
 					<svg
@@ -107,7 +107,11 @@ export function ItemCard({
 					/>
 				) : (
 					<div className="w-full h-full flex flex-col items-center justify-center">
-						<LucideIcon name={categoryIcon} size={36} className="text-gray-400" />
+						<LucideIcon
+							name={categoryIcon}
+							size={36}
+							className="text-gray-400"
+						/>
 					</div>
 				)}
 			</div>
@@ -117,17 +121,22 @@ export function ItemCard({
 				</h3>
 				<div className="flex flex-wrap gap-1.5">
 					{weightGrams != null && (
-						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700">
+						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-400">
 							{formatWeight(weightGrams)}
 						</span>
 					)}
 					{priceCents != null && (
-						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-700">
+						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-500">
 							{formatPrice(priceCents)}
 						</span>
 					)}
 					<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
-						<LucideIcon name={categoryIcon} size={14} className="inline-block mr-1 text-gray-500" /> {categoryName}
+						<LucideIcon
+							name={categoryIcon}
+							size={14}
+							className="inline-block mr-1 text-gray-500"
+						/>{" "}
+						{categoryName}
 					</span>
 				</div>
 			</div>

src/client/components/ItemForm.tsx

@@ -1,5 +1,5 @@
-import { useState, useEffect } from "react";
-import { useCreateItem, useUpdateItem, useItems } from "../hooks/useItems";
+import { useEffect, useState } from "react";
+import { useCreateItem, useItems, useUpdateItem } from "../hooks/useItems";
 import { useUIStore } from "../stores/uiStore";
 import { CategoryPicker } from "./CategoryPicker";
 import { ImageUpload } from "./ImageUpload";
@@ -46,8 +46,7 @@ export function ItemForm({ mode, itemId }: ItemFormProps) {
 			if (item) {
 				setForm({
 					name: item.name,
-          weightGrams:
-            item.weightGrams != null ? String(item.weightGrams) : "",
+					weightGrams: item.weightGrams != null ? String(item.weightGrams) : "",
 					priceDollars:
 						item.priceCents != null ? (item.priceCents / 100).toFixed(2) : "",
 					categoryId: item.categoryId,
@@ -66,10 +65,16 @@ export function ItemForm({ mode, itemId }: ItemFormProps) {
 		if (!form.name.trim()) {
 			newErrors.name = "Name is required";
 		}
-    if (form.weightGrams && (isNaN(Number(form.weightGrams)) || Number(form.weightGrams) < 0)) {
+		if (
+			form.weightGrams &&
+			(Number.isNaN(Number(form.weightGrams)) || Number(form.weightGrams) < 0)
+		) {
 			newErrors.weightGrams = "Must be a positive number";
 		}
-    if (form.priceDollars && (isNaN(Number(form.priceDollars)) || Number(form.priceDollars) < 0)) {
+		if (
+			form.priceDollars &&
+			(Number.isNaN(Number(form.priceDollars)) || Number(form.priceDollars) < 0)
+		) {
 			newErrors.priceDollars = "Must be a positive number";
 		}
 		if (
@@ -139,9 +144,8 @@ export function ItemForm({ mode, itemId }: ItemFormProps) {
 					type="text"
 					value={form.name}
 					onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
-          className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+					className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
 					placeholder="e.g. Osprey Talon 22"
-          autoFocus
 				/>
 				{errors.name && (
 					<p className="mt-1 text-xs text-red-500">{errors.name}</p>
@@ -165,7 +169,7 @@ export function ItemForm({ mode, itemId }: ItemFormProps) {
 					onChange={(e) =>
 						setForm((f) => ({ ...f, weightGrams: e.target.value }))
 					}
-          className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+					className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
 					placeholder="e.g. 680"
 				/>
 				{errors.weightGrams && (
@@ -190,7 +194,7 @@ export function ItemForm({ mode, itemId }: ItemFormProps) {
 					onChange={(e) =>
 						setForm((f) => ({ ...f, priceDollars: e.target.value }))
 					}
-          className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+					className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
 					placeholder="e.g. 129.99"
 				/>
 				{errors.priceDollars && (
@@ -222,7 +226,7 @@ export function ItemForm({ mode, itemId }: ItemFormProps) {
 					value={form.notes}
 					onChange={(e) => setForm((f) => ({ ...f, notes: e.target.value }))}
 					rows={3}
-          className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+					className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent resize-none"
 					placeholder="Any additional notes..."
 				/>
 			</div>
@@ -242,7 +246,7 @@ export function ItemForm({ mode, itemId }: ItemFormProps) {
 					onChange={(e) =>
 						setForm((f) => ({ ...f, productUrl: e.target.value }))
 					}
-          className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+					className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
 					placeholder="https://..."
 				/>
 				{errors.productUrl && (
@@ -255,7 +259,7 @@ export function ItemForm({ mode, itemId }: ItemFormProps) {
 				<button
 					type="submit"
 					disabled={isPending}
-          className="flex-1 py-2.5 px-4 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
+					className="flex-1 py-2.5 px-4 bg-gray-700 hover:bg-gray-800 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
 				>
 					{isPending
 						? "Saving..."

src/client/components/ItemPicker.tsx

@@ -1,9 +1,9 @@
-import { useState, useEffect } from "react";
-import { SlideOutPanel } from "./SlideOutPanel";
+import { useEffect, useState } from "react";
 import { useItems } from "../hooks/useItems";
 import { useSyncSetupItems } from "../hooks/useSetups";
-import { formatWeight, formatPrice } from "../lib/formatters";
+import { formatPrice, formatWeight } from "../lib/formatters";
 import { LucideIcon } from "../lib/iconData";
+import { SlideOutPanel } from "./SlideOutPanel";
 
 interface ItemPickerProps {
 	setupId: number;
@@ -84,10 +84,18 @@ export function ItemPicker({
 						</div>
 					) : (
 						Array.from(grouped.entries()).map(
-              ([categoryId, { categoryName, categoryIcon, items: catItems }]) => (
+							([
+								categoryId,
+								{ categoryName, categoryIcon, items: catItems },
+							]) => (
 								<div key={categoryId} className="mb-4">
 									<h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">
-                    <LucideIcon name={categoryIcon} size={16} className="inline-block mr-1 text-gray-500" /> {categoryName}
+										<LucideIcon
+											name={categoryIcon}
+											size={16}
+											className="inline-block mr-1 text-gray-500"
+										/>{" "}
+										{categoryName}
 									</h3>
 									<div className="space-y-1">
 										{catItems.map((item) => (
@@ -99,15 +107,19 @@ export function ItemPicker({
 													type="checkbox"
 													checked={selectedIds.has(item.id)}
 													onChange={() => handleToggle(item.id)}
-                          className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+													className="rounded border-gray-300 text-gray-600 focus:ring-gray-400"
 												/>
 												<span className="flex-1 text-sm text-gray-900 truncate">
 													{item.name}
 												</span>
 												<span className="text-xs text-gray-400 shrink-0">
-                          {item.weightGrams != null && formatWeight(item.weightGrams)}
-                          {item.weightGrams != null && item.priceCents != null && " · "}
-                          {item.priceCents != null && formatPrice(item.priceCents)}
+													{item.weightGrams != null &&
+														formatWeight(item.weightGrams)}
+													{item.weightGrams != null &&
+														item.priceCents != null &&
+														" · "}
+													{item.priceCents != null &&
+														formatPrice(item.priceCents)}
 												</span>
 											</label>
 										))}
@@ -131,7 +143,7 @@ export function ItemPicker({
 						type="button"
 						onClick={handleDone}
 						disabled={syncItems.isPending}
-            className="flex-1 px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50 rounded-lg transition-colors"
+						className="flex-1 px-4 py-2 text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 disabled:opacity-50 rounded-lg transition-colors"
 					>
 						{syncItems.isPending ? "Saving..." : "Done"}
 					</button>

src/client/components/OnboardingWizard.tsx

@@ -102,7 +102,7 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
 						<div
 							key={s}
 							className={`h-1.5 rounded-full transition-all ${
-								s <= Math.min(step, 3) ? "bg-blue-600 w-8" : "bg-gray-200 w-6"
+								s <= Math.min(step, 3) ? "bg-gray-700 w-8" : "bg-gray-200 w-6"
 							}`}
 						/>
 					))}
@@ -121,7 +121,7 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
 						<button
 							type="button"
 							onClick={() => setStep(2)}
-							className="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors"
+							className="w-full py-3 px-4 bg-gray-700 hover:bg-gray-800 text-white font-medium rounded-lg transition-colors"
 						>
 							Get Started
 						</button>
@@ -159,9 +159,8 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
 									type="text"
 									value={categoryName}
 									onChange={(e) => setCategoryName(e.target.value)}
-									className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+									className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
 									placeholder="e.g. Shelter"
-									autoFocus
 								/>
 							</div>
 
@@ -185,7 +184,7 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
 							type="button"
 							onClick={handleCreateCategory}
 							disabled={createCategory.isPending}
-							className="mt-6 w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white font-medium rounded-lg transition-colors"
+							className="mt-6 w-full py-3 px-4 bg-gray-700 hover:bg-gray-800 disabled:opacity-50 text-white font-medium rounded-lg transition-colors"
 						>
 							{createCategory.isPending ? "Creating..." : "Create Category"}
 						</button>
@@ -222,9 +221,8 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
 									type="text"
 									value={itemName}
 									onChange={(e) => setItemName(e.target.value)}
-									className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+									className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
 									placeholder="e.g. Big Agnes Copper Spur"
-									autoFocus
 								/>
 							</div>
 
@@ -243,7 +241,7 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
 										step="any"
 										value={itemWeight}
 										onChange={(e) => setItemWeight(e.target.value)}
-										className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+										className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
 										placeholder="e.g. 1200"
 									/>
 								</div>
@@ -261,7 +259,7 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
 										step="0.01"
 										value={itemPrice}
 										onChange={(e) => setItemPrice(e.target.value)}
-										className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+										className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
 										placeholder="e.g. 349.99"
 									/>
 								</div>
@@ -274,7 +272,7 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
 							type="button"
 							onClick={handleCreateItem}
 							disabled={createItem.isPending}
-							className="mt-6 w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white font-medium rounded-lg transition-colors"
+							className="mt-6 w-full py-3 px-4 bg-gray-700 hover:bg-gray-800 disabled:opacity-50 text-white font-medium rounded-lg transition-colors"
 						>
 							{createItem.isPending ? "Adding..." : "Add Item"}
 						</button>
@@ -309,7 +307,7 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
 							type="button"
 							onClick={handleDone}
 							disabled={updateSetting.isPending}
-							className="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white font-medium rounded-lg transition-colors"
+							className="w-full py-3 px-4 bg-gray-700 hover:bg-gray-800 disabled:opacity-50 text-white font-medium rounded-lg transition-colors"
 						>
 							{updateSetting.isPending ? "Finishing..." : "Done"}
 						</button>

src/client/components/SetupCard.tsx

@@ -1,5 +1,5 @@
 import { Link } from "@tanstack/react-router";
-import { formatWeight, formatPrice } from "../lib/formatters";
+import { formatPrice, formatWeight } from "../lib/formatters";
 
 interface SetupCardProps {
 	id: number;
@@ -23,18 +23,16 @@ export function SetupCard({
 			className="block w-full text-left bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-md transition-all p-4"
 		>
 			<div className="flex items-start justify-between mb-3">
-        <h3 className="text-sm font-semibold text-gray-900 truncate">
-          {name}
-        </h3>
-        <span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700 shrink-0">
+				<h3 className="text-sm font-semibold text-gray-900 truncate">{name}</h3>
+				<span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-400 shrink-0">
 					{itemCount} {itemCount === 1 ? "item" : "items"}
 				</span>
 			</div>
 			<div className="flex flex-wrap gap-1.5">
-        <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700">
+				<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-400">
 					{formatWeight(totalWeight)}
 				</span>
-        <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-700">
+				<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-500">
 					{formatPrice(totalCost)}
 				</span>
 			</div>

src/client/components/ThreadCard.tsx

@@ -66,17 +66,22 @@ export function ThreadCard({
 				)}
 			</div>
 			<div className="flex flex-wrap gap-1.5">
-				<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700">
-					<LucideIcon name={categoryIcon} size={16} className="inline-block mr-1 text-gray-500" /> {categoryName}
+				<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
+					<LucideIcon
+						name={categoryIcon}
+						size={16}
+						className="inline-block mr-1 text-gray-500"
+					/>{" "}
+					{categoryName}
 				</span>
-				<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-50 text-purple-700">
+				<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-50 text-purple-500">
 					{candidateCount} {candidateCount === 1 ? "candidate" : "candidates"}
 				</span>
 				<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
 					{formatDate(createdAt)}
 				</span>
 				{priceRange && (
-					<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-700">
+					<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-500">
 						{priceRange}
 					</span>
 				)}

src/client/components/ThreadTabs.tsx

@@ -1,14 +1,17 @@
-interface ThreadTabsProps {
-  active: "gear" | "planning";
-  onChange: (tab: "gear" | "planning") => void;
+type TabKey = "gear" | "planning" | "setups";
+
+interface CollectionTabsProps {
+	active: TabKey;
+	onChange: (tab: TabKey) => void;
 }
 
 const tabs = [
 	{ key: "gear" as const, label: "My Gear" },
 	{ key: "planning" as const, label: "Planning" },
+	{ key: "setups" as const, label: "Setups" },
 ];
 
-export function ThreadTabs({ active, onChange }: ThreadTabsProps) {
+export function CollectionTabs({ active, onChange }: CollectionTabsProps) {
 	return (
 		<div className="flex border-b border-gray-200">
 			{tabs.map((tab) => (
@@ -18,13 +21,13 @@ export function ThreadTabs({ active, onChange }: ThreadTabsProps) {
 					onClick={() => onChange(tab.key)}
 					className={`px-4 py-2.5 text-sm font-medium transition-colors relative ${
 						active === tab.key
-              ? "text-blue-600"
+							? "text-gray-700"
 							: "text-gray-500 hover:text-gray-700"
 					}`}
 				>
 					{tab.label}
 					{active === tab.key && (
-            <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-600 rounded-t" />
+						<span className="absolute bottom-0 left-0 right-0 h-0.5 bg-gray-700 rounded-t" />
 					)}
 				</button>
 			))}

src/client/components/TotalsBar.tsx

@@ -1,6 +1,7 @@
 import { Link } from "@tanstack/react-router";
 import { useTotals } from "../hooks/useTotals";
-import { formatWeight, formatPrice } from "../lib/formatters";
+import { formatPrice, formatWeight } from "../lib/formatters";
+import { LucideIcon } from "../lib/iconData";
 
 interface TotalsBarProps {
 	title?: string;
@@ -8,11 +9,17 @@ interface TotalsBarProps {
 	linkTo?: string;
 }
 
-export function TotalsBar({ title = "GearBox", stats, linkTo }: TotalsBarProps) {
+export function TotalsBar({
+	title = "GearBox",
+	stats,
+	linkTo,
+}: TotalsBarProps) {
 	const { data } = useTotals();
 
 	// When no stats provided, use global totals (backward compatible)
-  const displayStats = stats ?? (data?.global
+	const displayStats =
+		stats ??
+		(data?.global
 			? [
 					{ label: "items", value: String(data.global.itemCount) },
 					{ label: "total", value: formatWeight(data.global.totalWeight) },
@@ -24,12 +31,22 @@ export function TotalsBar({ title = "GearBox", stats, linkTo }: TotalsBarProps)
 					{ label: "spent", value: formatPrice(null) },
 				]);
 
-  const titleElement = linkTo ? (
-    <Link to={linkTo} className="text-lg font-semibold text-gray-900 hover:text-blue-600 transition-colors">
+	const titleContent = (
+		<span className="flex items-center gap-2">
+			<LucideIcon name="package" size={20} className="text-gray-500" />
 			{title}
+		</span>
+	);
+
+	const titleElement = linkTo ? (
+		<Link
+			to={linkTo}
+			className="text-lg font-semibold text-gray-900 hover:text-gray-600 transition-colors"
+		>
+			{titleContent}
 		</Link>
 	) : (
-    <h1 className="text-lg font-semibold text-gray-900">{title}</h1>
+		<h1 className="text-lg font-semibold text-gray-900">{titleContent}</h1>
 	);
 
 	// If stats prop is explicitly an empty array, show title only (dashboard mode)

src/client/hooks/useCandidates.ts

@@ -1,6 +1,6 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { apiPost, apiPut, apiDelete } from "../lib/api";
 import type { CreateCandidate, UpdateCandidate } from "../../shared/types";
+import { apiDelete, apiPost, apiPut } from "../lib/api";
 
 interface CandidateResponse {
 	id: number;

src/client/hooks/useCategories.ts

@@ -1,6 +1,6 @@
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { apiGet, apiPost, apiPut, apiDelete } from "../lib/api";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import type { Category, CreateCategory } from "../../shared/types";
+import { apiDelete, apiGet, apiPost, apiPut } from "../lib/api";
 
 export function useCategories() {
 	return useQuery({

src/client/hooks/useItems.ts

@@ -1,6 +1,6 @@
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { apiGet, apiPost, apiPut, apiDelete } from "../lib/api";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import type { CreateItem } from "../../shared/types";
+import { apiDelete, apiGet, apiPost, apiPut } from "../lib/api";
 
 interface ItemWithCategory {
 	id: number;

src/client/hooks/useSettings.ts

@@ -1,4 +1,4 @@
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { apiGet, apiPut } from "../lib/api";
 
 interface Setting {

src/client/hooks/useSetups.ts

@@ -1,5 +1,5 @@
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { apiGet, apiPost, apiPut, apiDelete } from "../lib/api";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { apiDelete, apiGet, apiPost, apiPut } from "../lib/api";
 
 interface SetupListItem {
 	id: number;
@@ -34,7 +34,7 @@ interface SetupWithItems {
 	items: SetupItemWithCategory[];
 }
 
-export type { SetupListItem, SetupWithItems, SetupItemWithCategory };
+export type { SetupItemWithCategory, SetupListItem, SetupWithItems };
 
 export function useSetups() {
 	return useQuery({

src/client/hooks/useThreads.ts

@@ -1,5 +1,5 @@
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { apiGet, apiPost, apiPut, apiDelete } from "../lib/api";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { apiDelete, apiGet, apiPost, apiPut } from "../lib/api";
 
 interface ThreadListItem {
 	id: number;

src/client/main.tsx

@@ -1,7 +1,7 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createRouter, RouterProvider } from "@tanstack/react-router";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { RouterProvider, createRouter } from "@tanstack/react-router";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { routeTree } from "./routeTree.gen";
 
 const queryClient = new QueryClient();

src/client/routeTree.gen.ts

@@ -10,7 +10,6 @@
 
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as IndexRouteImport } from './routes/index'
-import { Route as SetupsIndexRouteImport } from './routes/setups/index'
 import { Route as CollectionIndexRouteImport } from './routes/collection/index'
 import { Route as ThreadsThreadIdRouteImport } from './routes/threads/$threadId'
 import { Route as SetupsSetupIdRouteImport } from './routes/setups/$setupId'
@@ -20,11 +19,6 @@ const IndexRoute = IndexRouteImport.update({
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
-const SetupsIndexRoute = SetupsIndexRouteImport.update({
-  id: '/setups/',
-  path: '/setups/',
-  getParentRoute: () => rootRouteImport,
-} as any)
 const CollectionIndexRoute = CollectionIndexRouteImport.update({
   id: '/collection/',
   path: '/collection/',
@@ -46,14 +40,12 @@ export interface FileRoutesByFullPath {
   '/setups/$setupId': typeof SetupsSetupIdRoute
   '/threads/$threadId': typeof ThreadsThreadIdRoute
   '/collection/': typeof CollectionIndexRoute
-  '/setups/': typeof SetupsIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/setups/$setupId': typeof SetupsSetupIdRoute
   '/threads/$threadId': typeof ThreadsThreadIdRoute
   '/collection': typeof CollectionIndexRoute
-  '/setups': typeof SetupsIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -61,30 +53,18 @@ export interface FileRoutesById {
   '/setups/$setupId': typeof SetupsSetupIdRoute
   '/threads/$threadId': typeof ThreadsThreadIdRoute
   '/collection/': typeof CollectionIndexRoute
-  '/setups/': typeof SetupsIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths:
-    | '/'
-    | '/setups/$setupId'
-    | '/threads/$threadId'
-    | '/collection/'
-    | '/setups/'
+  fullPaths: '/' | '/setups/$setupId' | '/threads/$threadId' | '/collection/'
   fileRoutesByTo: FileRoutesByTo
-  to:
-    | '/'
-    | '/setups/$setupId'
-    | '/threads/$threadId'
-    | '/collection'
-    | '/setups'
+  to: '/' | '/setups/$setupId' | '/threads/$threadId' | '/collection'
   id:
     | '__root__'
     | '/'
     | '/setups/$setupId'
     | '/threads/$threadId'
     | '/collection/'
-    | '/setups/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -92,7 +72,6 @@ export interface RootRouteChildren {
   SetupsSetupIdRoute: typeof SetupsSetupIdRoute
   ThreadsThreadIdRoute: typeof ThreadsThreadIdRoute
   CollectionIndexRoute: typeof CollectionIndexRoute
-  SetupsIndexRoute: typeof SetupsIndexRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -104,13 +83,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/setups/': {
-      id: '/setups/'
-      path: '/setups'
-      fullPath: '/setups/'
-      preLoaderRoute: typeof SetupsIndexRouteImport
-      parentRoute: typeof rootRouteImport
-    }
     '/collection/': {
       id: '/collection/'
       path: '/collection'
@@ -140,7 +112,6 @@ const rootRouteChildren: RootRouteChildren = {
   SetupsSetupIdRoute: SetupsSetupIdRoute,
   ThreadsThreadIdRoute: ThreadsThreadIdRoute,
   CollectionIndexRoute: CollectionIndexRoute,
-  SetupsIndexRoute: SetupsIndexRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

src/client/routes/__root.tsx

@@ -1,22 +1,22 @@
-import { useState } from "react";
 import {
 	createRootRoute,
 	Outlet,
 	useMatchRoute,
 	useNavigate,
 } from "@tanstack/react-router";
+import { useState } from "react";
 import "../app.css";
-import { TotalsBar } from "../components/TotalsBar";
-import { SlideOutPanel } from "../components/SlideOutPanel";
-import { ItemForm } from "../components/ItemForm";
 import { CandidateForm } from "../components/CandidateForm";
 import { ConfirmDialog } from "../components/ConfirmDialog";
 import { ExternalLinkDialog } from "../components/ExternalLinkDialog";
+import { ItemForm } from "../components/ItemForm";
 import { OnboardingWizard } from "../components/OnboardingWizard";
-import { useUIStore } from "../stores/uiStore";
-import { useOnboardingComplete } from "../hooks/useSettings";
-import { useThread, useResolveThread } from "../hooks/useThreads";
+import { SlideOutPanel } from "../components/SlideOutPanel";
+import { TotalsBar } from "../components/TotalsBar";
 import { useDeleteCandidate } from "../hooks/useCandidates";
+import { useOnboardingComplete } from "../hooks/useSettings";
+import { useResolveThread, useThread } from "../hooks/useThreads";
+import { useUIStore } from "../stores/uiStore";
 
 export const Route = createRootRoute({
 	component: RootLayout,
@@ -74,7 +74,7 @@ function RootLayout() {
 	const isSetupDetail = !!matchRoute({ to: "/setups/$setupId", fuzzy: true });
 
 	// Determine TotalsBar props based on current route
-  const totalsBarProps = isDashboard
+	const _totalsBarProps = isDashboard
 		? { stats: [] as Array<{ label: string; value: string }> } // Title only, no stats, no link
 		: isSetupDetail
 			? { linkTo: "/" } // Setup detail will render its own local bar; root bar just has link
@@ -89,14 +89,20 @@ function RootLayout() {
 			: { linkTo: "/" };
 
 	// FAB visibility: only show on /collection route when gear tab is active
-  const collectionSearch = matchRoute({ to: "/collection" }) as { tab?: string } | false;
-  const showFab = isCollection && (!collectionSearch || (collectionSearch as Record<string, string>).tab !== "planning");
+	const collectionSearch = matchRoute({ to: "/collection" }) as
+		| { tab?: string }
+		| false;
+	const showFab =
+		isCollection &&
+		(!collectionSearch ||
+			!(collectionSearch as Record<string, string>).tab ||
+			(collectionSearch as Record<string, string>).tab === "gear");
 
 	// Show a minimal loading state while checking onboarding status
 	if (onboardingLoading) {
 		return (
 			<div className="min-h-screen bg-gray-50 flex items-center justify-center">
-        <div className="w-6 h-6 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
+				<div className="w-6 h-6 border-2 border-gray-600 border-t-transparent rounded-full animate-spin" />
 			</div>
 		);
 	}
@@ -173,7 +179,7 @@ function RootLayout() {
 				<button
 					type="button"
 					onClick={openAddPanel}
-          className="fixed bottom-6 right-6 z-20 w-14 h-14 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg hover:shadow-xl transition-all flex items-center justify-center"
+					className="fixed bottom-6 right-6 z-20 w-14 h-14 bg-gray-700 hover:bg-gray-800 text-white rounded-full shadow-lg hover:shadow-xl transition-all flex items-center justify-center"
 					title="Add new item"
 				>
 					<svg

src/client/routes/collection/index.tsx

@@ -4,17 +4,19 @@ import { z } from "zod";
 import { CategoryHeader } from "../../components/CategoryHeader";
 import { CreateThreadModal } from "../../components/CreateThreadModal";
 import { ItemCard } from "../../components/ItemCard";
+import { SetupCard } from "../../components/SetupCard";
 import { ThreadCard } from "../../components/ThreadCard";
-import { ThreadTabs } from "../../components/ThreadTabs";
+import { CollectionTabs } from "../../components/ThreadTabs";
 import { useCategories } from "../../hooks/useCategories";
 import { useItems } from "../../hooks/useItems";
+import { useCreateSetup, useSetups } from "../../hooks/useSetups";
 import { useThreads } from "../../hooks/useThreads";
 import { useTotals } from "../../hooks/useTotals";
 import { LucideIcon } from "../../lib/iconData";
 import { useUIStore } from "../../stores/uiStore";
 
 const searchSchema = z.object({
-	tab: z.enum(["gear", "planning"]).catch("gear"),
+	tab: z.enum(["gear", "planning", "setups"]).catch("gear"),
 });
 
 export const Route = createFileRoute("/collection/")({
@@ -26,15 +28,21 @@ function CollectionPage() {
 	const { tab } = Route.useSearch();
 	const navigate = useNavigate();
 
-	function handleTabChange(newTab: "gear" | "planning") {
+	function handleTabChange(newTab: "gear" | "planning" | "setups") {
 		navigate({ to: "/collection", search: { tab: newTab } });
 	}
 
 	return (
 		<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-			<ThreadTabs active={tab} onChange={handleTabChange} />
+			<CollectionTabs active={tab} onChange={handleTabChange} />
 			<div className="mt-6">
-				{tab === "gear" ? <CollectionView /> : <PlanningView />}
+				{tab === "gear" ? (
+					<CollectionView />
+				) : tab === "planning" ? (
+					<PlanningView />
+				) : (
+					<SetupsView />
+				)}
 			</div>
 		</div>
 	);
@@ -79,7 +87,7 @@ function CollectionView() {
 					<button
 						type="button"
 						onClick={openAddPanel}
-						className="inline-flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors"
+						className="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-700 hover:bg-gray-800 text-white text-sm font-medium rounded-lg transition-colors"
 					>
 						<svg
 							aria-hidden="true"
@@ -217,7 +225,7 @@ function PlanningView() {
 				<button
 					type="button"
 					onClick={openCreateThreadModal}
-					className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors"
+					className="inline-flex items-center gap-2 px-4 py-2 bg-gray-700 hover:bg-gray-800 text-white text-sm font-medium rounded-lg transition-colors"
 				>
 					<svg
 						aria-hidden="true"
@@ -246,7 +254,7 @@ function PlanningView() {
 						onClick={() => setActiveTab("active")}
 						className={`px-4 py-1.5 text-sm font-medium rounded-full transition-colors ${
 							activeTab === "active"
-								? "bg-blue-600 text-white"
+								? "bg-gray-700 text-white"
 								: "text-gray-600 hover:bg-gray-200"
 						}`}
 					>
@@ -257,7 +265,7 @@ function PlanningView() {
 						onClick={() => setActiveTab("resolved")}
 						className={`px-4 py-1.5 text-sm font-medium rounded-full transition-colors ${
 							activeTab === "resolved"
-								? "bg-blue-600 text-white"
+								? "bg-gray-700 text-white"
 								: "text-gray-600 hover:bg-gray-200"
 						}`}
 					>
@@ -271,7 +279,7 @@ function PlanningView() {
 					onChange={(e) =>
 						setCategoryFilter(e.target.value ? Number(e.target.value) : null)
 					}
-					className="px-3 py-1.5 border border-gray-200 rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+					className="px-3 py-1.5 border border-gray-200 rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
 				>
 					<option value="">All categories</option>
 					{categories?.map((cat) => (
@@ -291,7 +299,7 @@ function PlanningView() {
 						</h2>
 						<div className="space-y-6 text-left mb-10">
 							<div className="flex items-start gap-4">
-								<div className="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-700 font-bold text-sm shrink-0">
+								<div className="flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 text-gray-700 font-bold text-sm shrink-0">
 									1
 								</div>
 								<div>
@@ -302,7 +310,7 @@ function PlanningView() {
 								</div>
 							</div>
 							<div className="flex items-start gap-4">
-								<div className="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-700 font-bold text-sm shrink-0">
+								<div className="flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 text-gray-700 font-bold text-sm shrink-0">
 									2
 								</div>
 								<div>
@@ -313,7 +321,7 @@ function PlanningView() {
 								</div>
 							</div>
 							<div className="flex items-start gap-4">
-								<div className="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-700 font-bold text-sm shrink-0">
+								<div className="flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 text-gray-700 font-bold text-sm shrink-0">
 									3
 								</div>
 								<div>
@@ -327,7 +335,7 @@ function PlanningView() {
 						<button
 							type="button"
 							onClick={openCreateThreadModal}
-							className="inline-flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors"
+							className="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-700 hover:bg-gray-800 text-white text-sm font-medium rounded-lg transition-colors"
 						>
 							<svg
 								aria-hidden="true"
@@ -374,3 +382,87 @@ function PlanningView() {
 		</div>
 	);
 }
+
+function SetupsView() {
+	const [newSetupName, setNewSetupName] = useState("");
+	const { data: setups, isLoading } = useSetups();
+	const createSetup = useCreateSetup();
+
+	function handleCreateSetup(e: React.FormEvent) {
+		e.preventDefault();
+		const name = newSetupName.trim();
+		if (!name) return;
+		createSetup.mutate({ name }, { onSuccess: () => setNewSetupName("") });
+	}
+
+	return (
+		<div>
+			{/* Create setup form */}
+			<form onSubmit={handleCreateSetup} className="flex gap-2 mb-6">
+				<input
+					type="text"
+					value={newSetupName}
+					onChange={(e) => setNewSetupName(e.target.value)}
+					placeholder="New setup name..."
+					className="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
+				/>
+				<button
+					type="submit"
+					disabled={!newSetupName.trim() || createSetup.isPending}
+					className="px-4 py-2 bg-gray-700 hover:bg-gray-800 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
+				>
+					{createSetup.isPending ? "Creating..." : "Create"}
+				</button>
+			</form>
+
+			{/* Loading skeleton */}
+			{isLoading && (
+				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+					{[1, 2].map((i) => (
+						<div
+							key={i}
+							className="h-24 bg-gray-200 rounded-xl animate-pulse"
+						/>
+					))}
+				</div>
+			)}
+
+			{/* Empty state */}
+			{!isLoading && (!setups || setups.length === 0) && (
+				<div className="py-16 text-center">
+					<div className="max-w-md mx-auto">
+						<div className="mb-4">
+							<LucideIcon
+								name="tent"
+								size={48}
+								className="text-gray-400 mx-auto"
+							/>
+						</div>
+						<h2 className="text-xl font-semibold text-gray-900 mb-2">
+							No setups yet
+						</h2>
+						<p className="text-sm text-gray-500">
+							Create one to plan your loadout.
+						</p>
+					</div>
+				</div>
+			)}
+
+			{/* Setup grid */}
+			{!isLoading && setups && setups.length > 0 && (
+				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+					{setups.map((setup) => (
+						<SetupCard
+							key={setup.id}
+							id={setup.id}
+							name={setup.name}
+							itemCount={setup.itemCount}
+							totalWeight={setup.totalWeight}
+							totalCost={setup.totalCost}
+						/>
+					))}
+				</div>
+			)}
+		</div>
+	);
+}

src/client/routes/index.tsx

@@ -45,7 +45,8 @@ function DashboardPage() {
 					]}
 				/>
 				<DashboardCard
-					to="/setups"
+					to="/collection"
+					search={{ tab: "setups" }}
 					title="Setups"
 					icon="tent"
 					stats={[{ label: "Setups", value: String(setupCount) }]}

src/client/routes/setups/$setupId.tsx

@@ -124,7 +124,7 @@ function SetupDetailPage() {
 				<button
 					type="button"
 					onClick={() => setPickerOpen(true)}
-					className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors"
+					className="inline-flex items-center gap-2 px-4 py-2 bg-gray-700 hover:bg-gray-800 text-white text-sm font-medium rounded-lg transition-colors"
 				>
 					<svg
 						className="w-4 h-4"
@@ -170,7 +170,7 @@ function SetupDetailPage() {
 						<button
 							type="button"
 							onClick={() => setPickerOpen(true)}
-							className="inline-flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors"
+							className="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-700 hover:bg-gray-800 text-white text-sm font-medium rounded-lg transition-colors"
 						>
 							Add Items
 						</button>

src/client/routes/setups/index.tsx

@@ -1,93 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { useState } from "react";
-import { SetupCard } from "../../components/SetupCard";
-import { useCreateSetup, useSetups } from "../../hooks/useSetups";
-import { LucideIcon } from "../../lib/iconData";
-
-export const Route = createFileRoute("/setups/")({
-	component: SetupsListPage,
-});
-
-function SetupsListPage() {
-	const [newSetupName, setNewSetupName] = useState("");
-	const { data: setups, isLoading } = useSetups();
-	const createSetup = useCreateSetup();
-
-	function handleCreateSetup(e: React.FormEvent) {
-		e.preventDefault();
-		const name = newSetupName.trim();
-		if (!name) return;
-		createSetup.mutate({ name }, { onSuccess: () => setNewSetupName("") });
-	}
-
-	return (
-		<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-			{/* Create setup form */}
-			<form onSubmit={handleCreateSetup} className="flex gap-2 mb-6">
-				<input
-					type="text"
-					value={newSetupName}
-					onChange={(e) => setNewSetupName(e.target.value)}
-					placeholder="New setup name..."
-					className="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-				/>
-				<button
-					type="submit"
-					disabled={!newSetupName.trim() || createSetup.isPending}
-					className="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
-				>
-					{createSetup.isPending ? "Creating..." : "Create"}
-				</button>
-			</form>
-
-			{/* Loading skeleton */}
-			{isLoading && (
-				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-					{[1, 2].map((i) => (
-						<div
-							key={i}
-							className="h-24 bg-gray-200 rounded-xl animate-pulse"
-						/>
-					))}
-				</div>
-			)}
-
-			{/* Empty state */}
-			{!isLoading && (!setups || setups.length === 0) && (
-				<div className="py-16 text-center">
-					<div className="max-w-md mx-auto">
-						<div className="mb-4">
-							<LucideIcon
-								name="tent"
-								size={48}
-								className="text-gray-400 mx-auto"
-							/>
-						</div>
-						<h2 className="text-xl font-semibold text-gray-900 mb-2">
-							No setups yet
-						</h2>
-						<p className="text-sm text-gray-500">
-							Create one to plan your loadout.
-						</p>
-					</div>
-				</div>
-			)}
-
-			{/* Setup grid */}
-			{!isLoading && setups && setups.length > 0 && (
-				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-					{setups.map((setup) => (
-						<SetupCard
-							key={setup.id}
-							id={setup.id}
-							name={setup.name}
-							itemCount={setup.itemCount}
-							totalWeight={setup.totalWeight}
-							totalCost={setup.totalCost}
-						/>
-					))}
-				</div>
-			)}
-		</div>
-	);
-}

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

@@ -38,7 +38,7 @@ function ThreadDetailPage() {
 				<Link
 					to="/"
 					search={{ tab: "planning" }}
-					className="text-sm text-blue-600 hover:text-blue-700"
+					className="text-sm text-gray-600 hover:text-gray-700"
 				>
 					Back to planning
 				</Link>
@@ -67,7 +67,7 @@ function ThreadDetailPage() {
 					<span
 						className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
 							isActive
-								? "bg-blue-50 text-blue-700"
+								? "bg-gray-100 text-gray-600"
 								: "bg-gray-100 text-gray-500"
 						}`}
 					>
@@ -92,7 +92,7 @@ function ThreadDetailPage() {
 					<button
 						type="button"
 						onClick={openCandidateAddPanel}
-						className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors"
+						className="inline-flex items-center gap-2 px-4 py-2 bg-gray-700 hover:bg-gray-800 text-white text-sm font-medium rounded-lg transition-colors"
 					>
 						<svg
 							className="w-4 h-4"

src/db/migrate.ts

@@ -0,0 +1,13 @@
+import { Database } from "bun:sqlite";
+import { drizzle } from "drizzle-orm/bun-sqlite";
+import { migrate } from "drizzle-orm/bun-sqlite/migrator";
+
+const sqlite = new Database(process.env.DATABASE_PATH || "gearbox.db");
+sqlite.run("PRAGMA journal_mode = WAL");
+sqlite.run("PRAGMA foreign_keys = ON");
+
+const db = drizzle(sqlite);
+migrate(db, { migrationsFolder: "./drizzle" });
+
+sqlite.close();
+console.log("Migrations applied successfully");

src/db/schema.ts

@@ -1,4 +1,4 @@
-import { sqliteTable, text, integer, real } from "drizzle-orm/sqlite-core";
+import { integer, real, sqliteTable, text } from "drizzle-orm/sqlite-core";
 
 export const categories = sqliteTable("categories", {
 	id: integer("id").primaryKey({ autoIncrement: true }),

src/server/index.ts

@@ -1,13 +1,13 @@
 import { Hono } from "hono";
 import { serveStatic } from "hono/bun";
 import { seedDefaults } from "../db/seed.ts";
-import { itemRoutes } from "./routes/items.ts";
 import { categoryRoutes } from "./routes/categories.ts";
-import { totalRoutes } from "./routes/totals.ts";
 import { imageRoutes } from "./routes/images.ts";
+import { itemRoutes } from "./routes/items.ts";
 import { settingsRoutes } from "./routes/settings.ts";
-import { threadRoutes } from "./routes/threads.ts";
 import { setupRoutes } from "./routes/setups.ts";
+import { threadRoutes } from "./routes/threads.ts";
+import { totalRoutes } from "./routes/totals.ts";
 
 // Seed default data on startup
 seedDefaults();

src/server/routes/categories.ts

@@ -1,14 +1,14 @@
-import { Hono } from "hono";
 import { zValidator } from "@hono/zod-validator";
+import { Hono } from "hono";
 import {
 	createCategorySchema,
 	updateCategorySchema,
 } from "../../shared/schemas.ts";
 import {
-  getAllCategories,
 	createCategory,
-  updateCategory,
 	deleteCategory,
+	getAllCategories,
+	updateCategory,
 } from "../services/category.service.ts";
 
 type Env = { Variables: { db?: any } };

src/server/routes/images.ts

@@ -1,7 +1,7 @@
-import { Hono } from "hono";
 import { randomUUID } from "node:crypto";
-import { join } from "node:path";
 import { mkdir } from "node:fs/promises";
+import { join } from "node:path";
+import { Hono } from "hono";
 
 const ALLOWED_TYPES = ["image/jpeg", "image/png", "image/webp"];
 const MAX_SIZE = 5 * 1024 * 1024; // 5MB
@@ -10,7 +10,7 @@ const app = new Hono();
 
 app.post("/", async (c) => {
 	const body = await c.req.parseBody();
-  const file = body["image"];
+	const file = body.image;
 
 	if (!file || typeof file === "string") {
 		return c.json({ error: "No image file provided" }, 400);
@@ -30,7 +30,8 @@ app.post("/", async (c) => {
 	}
 
 	// Generate unique filename
-  const ext = file.type.split("/")[1] === "jpeg" ? "jpg" : file.type.split("/")[1];
+	const ext =
+		file.type.split("/")[1] === "jpeg" ? "jpg" : file.type.split("/")[1];
 	const filename = `${Date.now()}-${randomUUID()}.${ext}`;
 
 	// Ensure uploads directory exists

src/server/routes/items.ts

@@ -1,15 +1,15 @@
-import { Hono } from "hono";
-import { zValidator } from "@hono/zod-validator";
-import { createItemSchema, updateItemSchema } from "../../shared/schemas.ts";
-import {
-  getAllItems,
-  getItemById,
-  createItem,
-  updateItem,
-  deleteItem,
-} from "../services/item.service.ts";
 import { unlink } from "node:fs/promises";
 import { join } from "node:path";
+import { zValidator } from "@hono/zod-validator";
+import { Hono } from "hono";
+import { createItemSchema, updateItemSchema } from "../../shared/schemas.ts";
+import {
+	createItem,
+	deleteItem,
+	getAllItems,
+	getItemById,
+	updateItem,
+} from "../services/item.service.ts";
 
 type Env = { Variables: { db?: any } };
 
@@ -36,14 +36,18 @@ app.post("/", zValidator("json", createItemSchema), (c) => {
 	return c.json(item, 201);
 });
 
-app.put("/:id", zValidator("json", updateItemSchema.omit({ id: true })), (c) => {
+app.put(
+	"/:id",
+	zValidator("json", updateItemSchema.omit({ id: true })),
+	(c) => {
 		const db = c.get("db");
 		const id = Number(c.req.param("id"));
 		const data = c.req.valid("json");
 		const item = updateItem(db, id, data);
 		if (!item) return c.json({ error: "Item not found" }, 404);
 		return c.json(item);
-});
+	},
+);
 
 app.delete("/:id", async (c) => {
 	const db = c.get("db");

src/server/routes/settings.ts

@@ -1,5 +1,5 @@
-import { Hono } from "hono";
 import { eq } from "drizzle-orm";
+import { Hono } from "hono";
 import { db as prodDb } from "../../db/index.ts";
 import { settings } from "../../db/schema.ts";
 
@@ -10,7 +10,11 @@ const app = new Hono<Env>();
 app.get("/:key", (c) => {
 	const database = c.get("db") ?? prodDb;
 	const key = c.req.param("key");
-  const row = database.select().from(settings).where(eq(settings.key, key)).get();
+	const row = database
+		.select()
+		.from(settings)
+		.where(eq(settings.key, key))
+		.get();
 	if (!row) return c.json({ error: "Setting not found" }, 404);
 	return c.json(row);
 });
@@ -30,7 +34,11 @@ app.put("/:key", async (c) => {
 		.onConflictDoUpdate({ target: settings.key, set: { value: body.value } })
 		.run();
 
-  const row = database.select().from(settings).where(eq(settings.key, key)).get();
+	const row = database
+		.select()
+		.from(settings)
+		.where(eq(settings.key, key))
+		.get();
 	return c.json(row);
 });
 

src/server/routes/setups.ts

@@ -1,18 +1,18 @@
-import { Hono } from "hono";
 import { zValidator } from "@hono/zod-validator";
+import { Hono } from "hono";
 import {
 	createSetupSchema,
-  updateSetupSchema,
 	syncSetupItemsSchema,
+	updateSetupSchema,
 } from "../../shared/schemas.ts";
 import {
+	createSetup,
+	deleteSetup,
 	getAllSetups,
 	getSetupWithItems,
-  createSetup,
-  updateSetup,
-  deleteSetup,
-  syncSetupItems,
 	removeSetupItem,
+	syncSetupItems,
+	updateSetup,
 } from "../services/setup.service.ts";
 
 type Env = { Variables: { db?: any } };

src/server/routes/threads.ts

@@ -1,25 +1,25 @@
-import { Hono } from "hono";
-import { zValidator } from "@hono/zod-validator";
-import {
-  createThreadSchema,
-  updateThreadSchema,
-  createCandidateSchema,
-  updateCandidateSchema,
-  resolveThreadSchema,
-} from "../../shared/schemas.ts";
-import {
-  getAllThreads,
-  getThreadWithCandidates,
-  createThread,
-  updateThread,
-  deleteThread,
-  createCandidate,
-  updateCandidate,
-  deleteCandidate,
-  resolveThread,
-} from "../services/thread.service.ts";
 import { unlink } from "node:fs/promises";
 import { join } from "node:path";
+import { zValidator } from "@hono/zod-validator";
+import { Hono } from "hono";
+import {
+	createCandidateSchema,
+	createThreadSchema,
+	resolveThreadSchema,
+	updateCandidateSchema,
+	updateThreadSchema,
+} from "../../shared/schemas.ts";
+import {
+	createCandidate,
+	createThread,
+	deleteCandidate,
+	deleteThread,
+	getAllThreads,
+	getThreadWithCandidates,
+	resolveThread,
+	updateCandidate,
+	updateThread,
+} from "../services/thread.service.ts";
 
 type Env = { Variables: { db?: any } };
 
@@ -91,14 +91,18 @@ app.post("/:id/candidates", zValidator("json", createCandidateSchema), (c) => {
 	return c.json(candidate, 201);
 });
 
-app.put("/:threadId/candidates/:candidateId", zValidator("json", updateCandidateSchema), (c) => {
+app.put(
+	"/:threadId/candidates/:candidateId",
+	zValidator("json", updateCandidateSchema),
+	(c) => {
 		const db = c.get("db");
 		const candidateId = Number(c.req.param("candidateId"));
 		const data = c.req.valid("json");
 		const candidate = updateCandidate(db, candidateId, data);
 		if (!candidate) return c.json({ error: "Candidate not found" }, 404);
 		return c.json(candidate);
-});
+	},
+);
 
 app.delete("/:threadId/candidates/:candidateId", async (c) => {
 	const db = c.get("db");

src/server/services/category.service.ts

@@ -1,6 +1,6 @@
-import { eq, asc } from "drizzle-orm";
-import { categories, items } from "../../db/schema.ts";
+import { asc, eq } from "drizzle-orm";
 import { db as prodDb } from "../../db/index.ts";
+import { categories, items } from "../../db/schema.ts";
 
 type Db = typeof prodDb;
 
@@ -49,7 +49,10 @@ export function deleteCategory(
 ): { success: boolean; error?: string } {
 	// Guard: cannot delete Uncategorized (id=1)
 	if (id === 1) {
-    return { success: false, error: "Cannot delete the Uncategorized category" };
+		return {
+			success: false,
+			error: "Cannot delete the Uncategorized category",
+		};
 	}
 
 	// Check if category exists

src/server/services/item.service.ts

@@ -1,6 +1,6 @@
-import { eq, sql } from "drizzle-orm";
-import { items, categories } from "../../db/schema.ts";
+import { eq } from "drizzle-orm";
 import { db as prodDb } from "../../db/index.ts";
+import { categories, items } from "../../db/schema.ts";
 import type { CreateItem } from "../../shared/types.ts";
 
 type Db = typeof prodDb;
@@ -49,7 +49,11 @@ export function getItemById(db: Db = prodDb, id: number) {
 
 export function createItem(
 	db: Db = prodDb,
-  data: Partial<CreateItem> & { name: string; categoryId: number; imageFilename?: string },
+	data: Partial<CreateItem> & {
+		name: string;
+		categoryId: number;
+		imageFilename?: string;
+	},
 ) {
 	return db
 		.insert(items)
@@ -98,11 +102,7 @@ export function updateItem(
 
 export function deleteItem(db: Db = prodDb, id: number) {
 	// Get item first (for image cleanup info)
-  const item = db
-    .select()
-    .from(items)
-    .where(eq(items.id, id))
-    .get();
+	const item = db.select().from(items).where(eq(items.id, id)).get();
 
 	if (!item) return null;
 

src/server/services/setup.service.ts

@@ -1,16 +1,12 @@
 import { eq, sql } from "drizzle-orm";
-import { setups, setupItems, items, categories } from "../../db/schema.ts";
 import { db as prodDb } from "../../db/index.ts";
+import { categories, items, setupItems, setups } from "../../db/schema.ts";
 import type { CreateSetup, UpdateSetup } from "../../shared/types.ts";
 
 type Db = typeof prodDb;
 
 export function createSetup(db: Db = prodDb, data: CreateSetup) {
-  return db
-    .insert(setups)
-    .values({ name: data.name })
-    .returning()
-    .get();
+	return db.insert(setups).values({ name: data.name }).returning().get();
 }
 
 export function getAllSetups(db: Db = prodDb) {
@@ -40,8 +36,7 @@ export function getAllSetups(db: Db = prodDb) {
 }
 
 export function getSetupWithItems(db: Db = prodDb, setupId: number) {
-  const setup = db.select().from(setups)
-    .where(eq(setups.id, setupId)).get();
+	const setup = db.select().from(setups).where(eq(setups.id, setupId)).get();
 	if (!setup) return null;
 
 	const itemList = db
@@ -68,9 +63,16 @@ export function getSetupWithItems(db: Db = prodDb, setupId: number) {
 	return { ...setup, items: itemList };
 }
 
-export function updateSetup(db: Db = prodDb, setupId: number, data: UpdateSetup) {
-  const existing = db.select({ id: setups.id }).from(setups)
-    .where(eq(setups.id, setupId)).get();
+export function updateSetup(
+	db: Db = prodDb,
+	setupId: number,
+	data: UpdateSetup,
+) {
+	const existing = db
+		.select({ id: setups.id })
+		.from(setups)
+		.where(eq(setups.id, setupId))
+		.get();
 	if (!existing) return null;
 
 	return db
@@ -82,15 +84,22 @@ export function updateSetup(db: Db = prodDb, setupId: number, data: UpdateSetup)
 }
 
 export function deleteSetup(db: Db = prodDb, setupId: number) {
-  const existing = db.select({ id: setups.id }).from(setups)
-    .where(eq(setups.id, setupId)).get();
+	const existing = db
+		.select({ id: setups.id })
+		.from(setups)
+		.where(eq(setups.id, setupId))
+		.get();
 	if (!existing) return false;
 
 	db.delete(setups).where(eq(setups.id, setupId)).run();
 	return true;
 }
 
-export function syncSetupItems(db: Db = prodDb, setupId: number, itemIds: number[]) {
+export function syncSetupItems(
+	db: Db = prodDb,
+	setupId: number,
+	itemIds: number[],
+) {
 	return db.transaction((tx) => {
 		// Delete all existing items for this setup
 		tx.delete(setupItems).where(eq(setupItems.setupId, setupId)).run();
@@ -102,10 +111,14 @@ export function syncSetupItems(db: Db = prodDb, setupId: number, itemIds: number
 	});
 }
 
-export function removeSetupItem(db: Db = prodDb, setupId: number, itemId: number) {
+export function removeSetupItem(
+	db: Db = prodDb,
+	setupId: number,
+	itemId: number,
+) {
 	db.delete(setupItems)
 		.where(
-      sql`${setupItems.setupId} = ${setupId} AND ${setupItems.itemId} = ${itemId}`
+			sql`${setupItems.setupId} = ${setupId} AND ${setupItems.itemId} = ${itemId}`,
 		)
 		.run();
 }

src/server/services/thread.service.ts

@@ -1,7 +1,12 @@
-import { eq, desc, sql } from "drizzle-orm";
-import { threads, threadCandidates, items, categories } from "../../db/schema.ts";
+import { desc, eq, sql } from "drizzle-orm";
 import { db as prodDb } from "../../db/index.ts";
-import type { CreateThread, UpdateThread, CreateCandidate } from "../../shared/types.ts";
+import {
+	categories,
+	items,
+	threadCandidates,
+	threads,
+} from "../../db/schema.ts";
+import type { CreateCandidate, CreateThread } from "../../shared/types.ts";
 
 type Db = typeof prodDb;
 
@@ -49,8 +54,11 @@ export function getAllThreads(db: Db = prodDb, includeResolved = false) {
 }
 
 export function getThreadWithCandidates(db: Db = prodDb, threadId: number) {
-  const thread = db.select().from(threads)
-    .where(eq(threads.id, threadId)).get();
+	const thread = db
+		.select()
+		.from(threads)
+		.where(eq(threads.id, threadId))
+		.get();
 	if (!thread) return null;
 
 	const candidateList = db
@@ -77,9 +85,16 @@ export function getThreadWithCandidates(db: Db = prodDb, threadId: number) {
 	return { ...thread, candidates: candidateList };
 }
 
-export function updateThread(db: Db = prodDb, threadId: number, data: Partial<{ name: string; categoryId: number }>) {
-  const existing = db.select({ id: threads.id }).from(threads)
-    .where(eq(threads.id, threadId)).get();
+export function updateThread(
+	db: Db = prodDb,
+	threadId: number,
+	data: Partial<{ name: string; categoryId: number }>,
+) {
+	const existing = db
+		.select({ id: threads.id })
+		.from(threads)
+		.where(eq(threads.id, threadId))
+		.get();
 	if (!existing) return null;
 
 	return db
@@ -91,8 +106,11 @@ export function updateThread(db: Db = prodDb, threadId: number, data: Partial<{
 }
 
 export function deleteThread(db: Db = prodDb, threadId: number) {
-  const thread = db.select().from(threads)
-    .where(eq(threads.id, threadId)).get();
+	const thread = db
+		.select()
+		.from(threads)
+		.where(eq(threads.id, threadId))
+		.get();
 	if (!thread) return null;
 
 	// Collect candidate image filenames for cleanup
@@ -105,13 +123,20 @@ export function deleteThread(db: Db = prodDb, threadId: number) {
 
 	db.delete(threads).where(eq(threads.id, threadId)).run();
 
-  return { ...thread, candidateImages: candidatesWithImages.map((c) => c.imageFilename!) };
+	return {
+		...thread,
+		candidateImages: candidatesWithImages.map((c) => c.imageFilename!),
+	};
 }
 
 export function createCandidate(
 	db: Db = prodDb,
 	threadId: number,
-  data: Partial<CreateCandidate> & { name: string; categoryId: number; imageFilename?: string },
+	data: Partial<CreateCandidate> & {
+		name: string;
+		categoryId: number;
+		imageFilename?: string;
+	},
 ) {
 	return db
 		.insert(threadCandidates)
@@ -142,8 +167,11 @@ export function updateCandidate(
 		imageFilename: string;
 	}>,
 ) {
-  const existing = db.select({ id: threadCandidates.id }).from(threadCandidates)
-    .where(eq(threadCandidates.id, candidateId)).get();
+	const existing = db
+		.select({ id: threadCandidates.id })
+		.from(threadCandidates)
+		.where(eq(threadCandidates.id, candidateId))
+		.get();
 	if (!existing) return null;
 
 	return db
@@ -155,8 +183,11 @@ export function updateCandidate(
 }
 
 export function deleteCandidate(db: Db = prodDb, candidateId: number) {
-  const candidate = db.select().from(threadCandidates)
-    .where(eq(threadCandidates.id, candidateId)).get();
+	const candidate = db
+		.select()
+		.from(threadCandidates)
+		.where(eq(threadCandidates.id, candidateId))
+		.get();
 	if (!candidate) return null;
 
 	db.delete(threadCandidates).where(eq(threadCandidates.id, candidateId)).run();
@@ -170,15 +201,21 @@ export function resolveThread(
 ): { success: boolean; item?: any; error?: string } {
 	return db.transaction((tx) => {
 		// 1. Check thread is active
-    const thread = tx.select().from(threads)
-      .where(eq(threads.id, threadId)).get();
+		const thread = tx
+			.select()
+			.from(threads)
+			.where(eq(threads.id, threadId))
+			.get();
 		if (!thread || thread.status !== "active") {
 			return { success: false, error: "Thread not active" };
 		}
 
 		// 2. Get the candidate data
-    const candidate = tx.select().from(threadCandidates)
-      .where(eq(threadCandidates.id, candidateId)).get();
+		const candidate = tx
+			.select()
+			.from(threadCandidates)
+			.where(eq(threadCandidates.id, candidateId))
+			.get();
 		if (!candidate) {
 			return { success: false, error: "Candidate not found" };
 		}
@@ -187,8 +224,11 @@ export function resolveThread(
 		}
 
 		// 3. Verify categoryId still exists, fallback to Uncategorized (id=1)
-    const category = tx.select({ id: categories.id }).from(categories)
-      .where(eq(categories.id, candidate.categoryId)).get();
+		const category = tx
+			.select({ id: categories.id })
+			.from(categories)
+			.where(eq(categories.id, candidate.categoryId))
+			.get();
 		const safeCategoryId = category ? candidate.categoryId : 1;
 
 		// 4. Create collection item from candidate data

src/server/services/totals.service.ts

@@ -1,6 +1,6 @@
 import { eq, sql } from "drizzle-orm";
-import { items, categories } from "../../db/schema.ts";
 import { db as prodDb } from "../../db/index.ts";
+import { categories, items } from "../../db/schema.ts";
 
 type Db = typeof prodDb;
 

src/shared/types.ts

@@ -1,19 +1,26 @@
 import type { z } from "zod";
 import type {
-  createItemSchema,
-  updateItemSchema,
-  createCategorySchema,
-  updateCategorySchema,
-  createThreadSchema,
-  updateThreadSchema,
+	categories,
+	items,
+	setupItems,
+	setups,
+	threadCandidates,
+	threads,
+} from "../db/schema.ts";
+import type {
 	createCandidateSchema,
-  updateCandidateSchema,
-  resolveThreadSchema,
+	createCategorySchema,
+	createItemSchema,
 	createSetupSchema,
-  updateSetupSchema,
+	createThreadSchema,
+	resolveThreadSchema,
 	syncSetupItemsSchema,
+	updateCandidateSchema,
+	updateCategorySchema,
+	updateItemSchema,
+	updateSetupSchema,
+	updateThreadSchema,
 } from "./schemas.ts";
-import type { items, categories, threads, threadCandidates, setups, setupItems } from "../db/schema.ts";
 
 // Types inferred from Zod schemas
 export type CreateItem = z.infer<typeof createItemSchema>;

tests/routes/categories.test.ts

@@ -1,8 +1,8 @@
-import { describe, it, expect, beforeEach } from "bun:test";
+import { beforeEach, describe, expect, it } from "bun:test";
 import { Hono } from "hono";
-import { createTestDb } from "../helpers/db.ts";
 import { categoryRoutes } from "../../src/server/routes/categories.ts";
 import { itemRoutes } from "../../src/server/routes/items.ts";
+import { createTestDb } from "../helpers/db.ts";
 
 function createTestApp() {
 	const db = createTestDb();

tests/routes/items.test.ts

@@ -1,8 +1,8 @@
-import { describe, it, expect, beforeEach } from "bun:test";
+import { beforeEach, describe, expect, it } from "bun:test";
 import { Hono } from "hono";
-import { createTestDb } from "../helpers/db.ts";
-import { itemRoutes } from "../../src/server/routes/items.ts";
 import { categoryRoutes } from "../../src/server/routes/categories.ts";
+import { itemRoutes } from "../../src/server/routes/items.ts";
+import { createTestDb } from "../helpers/db.ts";
 
 function createTestApp() {
 	const db = createTestDb();

tests/routes/setups.test.ts

@@ -1,8 +1,8 @@
-import { describe, it, expect, beforeEach } from "bun:test";
+import { beforeEach, describe, expect, it } from "bun:test";
 import { Hono } from "hono";
-import { createTestDb } from "../helpers/db.ts";
-import { setupRoutes } from "../../src/server/routes/setups.ts";
 import { itemRoutes } from "../../src/server/routes/items.ts";
+import { setupRoutes } from "../../src/server/routes/setups.ts";
+import { createTestDb } from "../helpers/db.ts";
 
 function createTestApp() {
 	const db = createTestDb();
@@ -179,8 +179,14 @@ describe("Setup Routes", () => {
 	describe("PUT /api/setups/:id/items", () => {
 		it("syncs items to setup", async () => {
 			const setup = await createSetupViaAPI(app, "Kit");
-      const item1 = await createItemViaAPI(app, { name: "Item 1", categoryId: 1 });
-      const item2 = await createItemViaAPI(app, { name: "Item 2", categoryId: 1 });
+			const item1 = await createItemViaAPI(app, {
+				name: "Item 1",
+				categoryId: 1,
+			});
+			const item2 = await createItemViaAPI(app, {
+				name: "Item 2",
+				categoryId: 1,
+			});
 
 			const res = await app.request(`/api/setups/${setup.id}/items`, {
 				method: "PUT",
@@ -202,8 +208,14 @@ describe("Setup Routes", () => {
 	describe("DELETE /api/setups/:id/items/:itemId", () => {
 		it("removes single item from setup", async () => {
 			const setup = await createSetupViaAPI(app, "Kit");
-      const item1 = await createItemViaAPI(app, { name: "Item 1", categoryId: 1 });
-      const item2 = await createItemViaAPI(app, { name: "Item 2", categoryId: 1 });
+			const item1 = await createItemViaAPI(app, {
+				name: "Item 1",
+				categoryId: 1,
+			});
+			const item2 = await createItemViaAPI(app, {
+				name: "Item 2",
+				categoryId: 1,
+			});
 
 			// Sync both items
 			await app.request(`/api/setups/${setup.id}/items`, {
@@ -213,9 +225,12 @@ describe("Setup Routes", () => {
 			});
 
 			// Remove one
-      const res = await app.request(`/api/setups/${setup.id}/items/${item1.id}`, {
+			const res = await app.request(
+				`/api/setups/${setup.id}/items/${item1.id}`,
+				{
 					method: "DELETE",
-      });
+				},
+			);
 
 			expect(res.status).toBe(200);
 

tests/routes/threads.test.ts

@@ -1,7 +1,7 @@
-import { describe, it, expect, beforeEach } from "bun:test";
+import { beforeEach, describe, expect, it } from "bun:test";
 import { Hono } from "hono";
-import { createTestDb } from "../helpers/db.ts";
 import { threadRoutes } from "../../src/server/routes/threads.ts";
+import { createTestDb } from "../helpers/db.ts";
 
 function createTestApp() {
 	const db = createTestDb();
@@ -87,7 +87,7 @@ describe("Thread Routes", () => {
 		});
 
 		it("?includeResolved=true includes archived threads", async () => {
-      const t1 = await createThreadViaAPI(app, "Active");
+			const _t1 = await createThreadViaAPI(app, "Active");
 			const t2 = await createThreadViaAPI(app, "To Resolve");
 			const candidate = await createCandidateViaAPI(app, t2.id, {
 				name: "Winner",

tests/services/category.service.test.ts

@@ -1,14 +1,14 @@
-import { describe, it, expect, beforeEach } from "bun:test";
-import { createTestDb } from "../helpers/db.ts";
+import { beforeEach, describe, expect, it } from "bun:test";
+import { eq } from "drizzle-orm";
+import { items } from "../../src/db/schema.ts";
 import {
-  getAllCategories,
 	createCategory,
-  updateCategory,
 	deleteCategory,
+	getAllCategories,
+	updateCategory,
 } from "../../src/server/services/category.service.ts";
 import { createItem } from "../../src/server/services/item.service.ts";
-import { items } from "../../src/db/schema.ts";
-import { eq } from "drizzle-orm";
+import { createTestDb } from "../helpers/db.ts";
 
 describe("Category Service", () => {
 	let db: ReturnType<typeof createTestDb>;
@@ -22,16 +22,16 @@ describe("Category Service", () => {
 			const cat = createCategory(db, { name: "Shelter", icon: "tent" });
 
 			expect(cat).toBeDefined();
-      expect(cat!.id).toBeGreaterThan(0);
-      expect(cat!.name).toBe("Shelter");
-      expect(cat!.icon).toBe("tent");
+			expect(cat?.id).toBeGreaterThan(0);
+			expect(cat?.name).toBe("Shelter");
+			expect(cat?.icon).toBe("tent");
 		});
 
 		it("uses default icon if not provided", () => {
 			const cat = createCategory(db, { name: "Cooking" });
 
 			expect(cat).toBeDefined();
-      expect(cat!.icon).toBe("package");
+			expect(cat?.icon).toBe("package");
 		});
 	});
 
@@ -49,19 +49,19 @@ describe("Category Service", () => {
 	describe("updateCategory", () => {
 		it("renames category", () => {
 			const cat = createCategory(db, { name: "Shelter", icon: "tent" });
-      const updated = updateCategory(db, cat!.id, { name: "Sleep System" });
+			const updated = updateCategory(db, cat?.id, { name: "Sleep System" });
 
 			expect(updated).toBeDefined();
-      expect(updated!.name).toBe("Sleep System");
-      expect(updated!.icon).toBe("tent");
+			expect(updated?.name).toBe("Sleep System");
+			expect(updated?.icon).toBe("tent");
 		});
 
 		it("changes icon", () => {
 			const cat = createCategory(db, { name: "Shelter", icon: "tent" });
-      const updated = updateCategory(db, cat!.id, { icon: "home" });
+			const updated = updateCategory(db, cat?.id, { icon: "home" });
 
 			expect(updated).toBeDefined();
-      expect(updated!.icon).toBe("home");
+			expect(updated?.icon).toBe("home");
 		});
 
 		it("returns null for non-existent id", () => {
@@ -73,10 +73,10 @@ describe("Category Service", () => {
 	describe("deleteCategory", () => {
 		it("reassigns items to Uncategorized (id=1) then deletes", () => {
 			const shelter = createCategory(db, { name: "Shelter", icon: "tent" });
-      createItem(db, { name: "Tent", categoryId: shelter!.id });
-      createItem(db, { name: "Tarp", categoryId: shelter!.id });
+			createItem(db, { name: "Tent", categoryId: shelter?.id });
+			createItem(db, { name: "Tarp", categoryId: shelter?.id });
 
-      const result = deleteCategory(db, shelter!.id);
+			const result = deleteCategory(db, shelter?.id);
 			expect(result.success).toBe(true);
 
 			// Items should now be in Uncategorized (id=1)

tests/services/item.service.test.ts

@@ -1,12 +1,12 @@
-import { describe, it, expect, beforeEach } from "bun:test";
-import { createTestDb } from "../helpers/db.ts";
+import { beforeEach, describe, expect, it } from "bun:test";
 import {
+	createItem,
+	deleteItem,
 	getAllItems,
 	getItemById,
-  createItem,
 	updateItem,
-  deleteItem,
 } from "../../src/server/services/item.service.ts";
+import { createTestDb } from "../helpers/db.ts";
 
 describe("Item Service", () => {
 	let db: ReturnType<typeof createTestDb>;
@@ -17,39 +17,36 @@ describe("Item Service", () => {
 
 	describe("createItem", () => {
 		it("creates item with all fields, returns item with id and timestamps", () => {
-      const item = createItem(
-        db,
-        {
+			const item = createItem(db, {
 				name: "Tent",
 				weightGrams: 1200,
 				priceCents: 35000,
 				categoryId: 1,
 				notes: "Ultralight 2-person",
 				productUrl: "https://example.com/tent",
-        },
-      );
+			});
 
 			expect(item).toBeDefined();
-      expect(item!.id).toBeGreaterThan(0);
-      expect(item!.name).toBe("Tent");
-      expect(item!.weightGrams).toBe(1200);
-      expect(item!.priceCents).toBe(35000);
-      expect(item!.categoryId).toBe(1);
-      expect(item!.notes).toBe("Ultralight 2-person");
-      expect(item!.productUrl).toBe("https://example.com/tent");
-      expect(item!.createdAt).toBeDefined();
-      expect(item!.updatedAt).toBeDefined();
+			expect(item?.id).toBeGreaterThan(0);
+			expect(item?.name).toBe("Tent");
+			expect(item?.weightGrams).toBe(1200);
+			expect(item?.priceCents).toBe(35000);
+			expect(item?.categoryId).toBe(1);
+			expect(item?.notes).toBe("Ultralight 2-person");
+			expect(item?.productUrl).toBe("https://example.com/tent");
+			expect(item?.createdAt).toBeDefined();
+			expect(item?.updatedAt).toBeDefined();
 		});
 
 		it("only name and categoryId are required, other fields optional", () => {
 			const item = createItem(db, { name: "Spork", categoryId: 1 });
 
 			expect(item).toBeDefined();
-      expect(item!.name).toBe("Spork");
-      expect(item!.weightGrams).toBeNull();
-      expect(item!.priceCents).toBeNull();
-      expect(item!.notes).toBeNull();
-      expect(item!.productUrl).toBeNull();
+			expect(item?.name).toBe("Spork");
+			expect(item?.weightGrams).toBeNull();
+			expect(item?.priceCents).toBeNull();
+			expect(item?.notes).toBeNull();
+			expect(item?.productUrl).toBeNull();
 		});
 	});
 
@@ -68,9 +65,9 @@ describe("Item Service", () => {
 	describe("getItemById", () => {
 		it("returns single item or null", () => {
 			const created = createItem(db, { name: "Tent", categoryId: 1 });
-      const found = getItemById(db, created!.id);
+			const found = getItemById(db, created?.id);
 			expect(found).toBeDefined();
-      expect(found!.name).toBe("Tent");
+			expect(found?.name).toBe("Tent");
 
 			const notFound = getItemById(db, 9999);
 			expect(notFound).toBeNull();
@@ -85,14 +82,14 @@ describe("Item Service", () => {
 				categoryId: 1,
 			});
 
-      const updated = updateItem(db, created!.id, {
+			const updated = updateItem(db, created?.id, {
 				name: "Big Agnes Tent",
 				weightGrams: 1100,
 			});
 
 			expect(updated).toBeDefined();
-      expect(updated!.name).toBe("Big Agnes Tent");
-      expect(updated!.weightGrams).toBe(1100);
+			expect(updated?.name).toBe("Big Agnes Tent");
+			expect(updated?.weightGrams).toBe(1100);
 		});
 
 		it("returns null for non-existent id", () => {
@@ -109,13 +106,13 @@ describe("Item Service", () => {
 				imageFilename: "tent.jpg",
 			});
 
-      const deleted = deleteItem(db, created!.id);
+			const deleted = deleteItem(db, created?.id);
 			expect(deleted).toBeDefined();
-      expect(deleted!.name).toBe("Tent");
-      expect(deleted!.imageFilename).toBe("tent.jpg");
+			expect(deleted?.name).toBe("Tent");
+			expect(deleted?.imageFilename).toBe("tent.jpg");
 
 			// Verify it's gone
-      const found = getItemById(db, created!.id);
+			const found = getItemById(db, created?.id);
 			expect(found).toBeNull();
 		});
 

tests/services/setup.service.test.ts

@@ -1,15 +1,15 @@
-import { describe, it, expect, beforeEach } from "bun:test";
-import { createTestDb } from "../helpers/db.ts";
+import { beforeEach, describe, expect, it } from "bun:test";
+import { createItem } from "../../src/server/services/item.service.ts";
 import {
+	createSetup,
+	deleteSetup,
 	getAllSetups,
 	getSetupWithItems,
-  createSetup,
-  updateSetup,
-  deleteSetup,
-  syncSetupItems,
 	removeSetupItem,
+	syncSetupItems,
+	updateSetup,
 } from "../../src/server/services/setup.service.ts";
-import { createItem } from "../../src/server/services/item.service.ts";
+import { createTestDb } from "../helpers/db.ts";
 
 describe("Setup Service", () => {
 	let db: ReturnType<typeof createTestDb>;
@@ -79,11 +79,11 @@ describe("Setup Service", () => {
 
 			const result = getSetupWithItems(db, setup.id);
 			expect(result).toBeDefined();
-      expect(result!.name).toBe("Day Hike");
-      expect(result!.items).toHaveLength(1);
-      expect(result!.items[0].name).toBe("Water Bottle");
-      expect(result!.items[0].categoryName).toBe("Uncategorized");
-      expect(result!.items[0].categoryIcon).toBeDefined();
+			expect(result?.name).toBe("Day Hike");
+			expect(result?.items).toHaveLength(1);
+			expect(result?.items[0].name).toBe("Water Bottle");
+			expect(result?.items[0].categoryName).toBe("Uncategorized");
+			expect(result?.items[0].categoryIcon).toBeDefined();
 		});
 
 		it("returns null for non-existent setup", () => {
@@ -98,7 +98,7 @@ describe("Setup Service", () => {
 			const updated = updateSetup(db, setup.id, { name: "Renamed" });
 
 			expect(updated).toBeDefined();
-      expect(updated!.name).toBe("Renamed");
+			expect(updated?.name).toBe("Renamed");
 		});
 
 		it("returns null for non-existent setup", () => {
@@ -137,13 +137,13 @@ describe("Setup Service", () => {
 			// Initial sync
 			syncSetupItems(db, setup.id, [item1.id, item2.id]);
 			let result = getSetupWithItems(db, setup.id);
-      expect(result!.items).toHaveLength(2);
+			expect(result?.items).toHaveLength(2);
 
 			// Re-sync with different items
 			syncSetupItems(db, setup.id, [item2.id, item3.id]);
 			result = getSetupWithItems(db, setup.id);
-      expect(result!.items).toHaveLength(2);
-      const names = result!.items.map((i: any) => i.name).sort();
+			expect(result?.items).toHaveLength(2);
+			const names = result?.items.map((i: any) => i.name).sort();
 			expect(names).toEqual(["Item 2", "Item 3"]);
 		});
 
@@ -154,7 +154,7 @@ describe("Setup Service", () => {
 
 			syncSetupItems(db, setup.id, []);
 			const result = getSetupWithItems(db, setup.id);
-      expect(result!.items).toHaveLength(0);
+			expect(result?.items).toHaveLength(0);
 		});
 	});
 
@@ -167,8 +167,8 @@ describe("Setup Service", () => {
 
 			removeSetupItem(db, setup.id, item1.id);
 			const result = getSetupWithItems(db, setup.id);
-      expect(result!.items).toHaveLength(1);
-      expect(result!.items[0].name).toBe("Item 2");
+			expect(result?.items).toHaveLength(1);
+			expect(result?.items[0].name).toBe("Item 2");
 		});
 	});
 
@@ -185,8 +185,8 @@ describe("Setup Service", () => {
 			db.delete(itemsTable).where(eq(itemsTable.id, item1.id)).run();
 
 			const result = getSetupWithItems(db, setup.id);
-      expect(result!.items).toHaveLength(1);
-      expect(result!.items[0].name).toBe("Item 2");
+			expect(result?.items).toHaveLength(1);
+			expect(result?.items[0].name).toBe("Item 2");
 		});
 	});
 });

tests/services/thread.service.test.ts

@@ -1,17 +1,16 @@
-import { describe, it, expect, beforeEach } from "bun:test";
-import { createTestDb } from "../helpers/db.ts";
+import { beforeEach, describe, expect, it } from "bun:test";
 import {
+	createCandidate,
 	createThread,
+	deleteCandidate,
+	deleteThread,
 	getAllThreads,
 	getThreadWithCandidates,
-  createCandidate,
-  updateCandidate,
-  deleteCandidate,
-  updateThread,
-  deleteThread,
 	resolveThread,
+	updateCandidate,
+	updateThread,
 } from "../../src/server/services/thread.service.ts";
-import { createItem } from "../../src/server/services/item.service.ts";
+import { createTestDb } from "../helpers/db.ts";
 
 describe("Thread Service", () => {
 	let db: ReturnType<typeof createTestDb>;
@@ -36,7 +35,10 @@ describe("Thread Service", () => {
 
 	describe("getAllThreads", () => {
 		it("returns active threads with candidateCount and price range", () => {
-      const thread = createThread(db, { name: "Backpack Options", categoryId: 1 });
+			const thread = createThread(db, {
+				name: "Backpack Options",
+				categoryId: 1,
+			});
 			createCandidate(db, thread.id, {
 				name: "Pack A",
 				categoryId: 1,
@@ -57,7 +59,7 @@ describe("Thread Service", () => {
 		});
 
 		it("excludes resolved threads by default", () => {
-      const t1 = createThread(db, { name: "Active Thread", categoryId: 1 });
+			const _t1 = createThread(db, { name: "Active Thread", categoryId: 1 });
 			const t2 = createThread(db, { name: "Resolved Thread", categoryId: 1 });
 			const candidate = createCandidate(db, t2.id, {
 				name: "Winner",
@@ -71,7 +73,7 @@ describe("Thread Service", () => {
 		});
 
 		it("includes resolved threads when includeResolved=true", () => {
-      const t1 = createThread(db, { name: "Active Thread", categoryId: 1 });
+			const _t1 = createThread(db, { name: "Active Thread", categoryId: 1 });
 			const t2 = createThread(db, { name: "Resolved Thread", categoryId: 1 });
 			const candidate = createCandidate(db, t2.id, {
 				name: "Winner",
@@ -96,11 +98,11 @@ describe("Thread Service", () => {
 
 			const result = getThreadWithCandidates(db, thread.id);
 			expect(result).toBeDefined();
-      expect(result!.name).toBe("Tent Options");
-      expect(result!.candidates).toHaveLength(1);
-      expect(result!.candidates[0].name).toBe("Tent A");
-      expect(result!.candidates[0].categoryName).toBe("Uncategorized");
-      expect(result!.candidates[0].categoryIcon).toBeDefined();
+			expect(result?.name).toBe("Tent Options");
+			expect(result?.candidates).toHaveLength(1);
+			expect(result?.candidates[0].name).toBe("Tent A");
+			expect(result?.candidates[0].categoryName).toBe("Uncategorized");
+			expect(result?.candidates[0].categoryIcon).toBeDefined();
 		});
 
 		it("returns null for non-existent thread", () => {
@@ -147,8 +149,8 @@ describe("Thread Service", () => {
 			});
 
 			expect(updated).toBeDefined();
-      expect(updated!.name).toBe("Updated Name");
-      expect(updated!.priceCents).toBe(15000);
+			expect(updated?.name).toBe("Updated Name");
+			expect(updated?.priceCents).toBe(15000);
 		});
 
 		it("returns null for non-existent candidate", () => {
@@ -167,11 +169,11 @@ describe("Thread Service", () => {
 
 			const deleted = deleteCandidate(db, candidate.id);
 			expect(deleted).toBeDefined();
-      expect(deleted!.name).toBe("To Delete");
+			expect(deleted?.name).toBe("To Delete");
 
 			// Verify it's gone
 			const result = getThreadWithCandidates(db, thread.id);
-      expect(result!.candidates).toHaveLength(0);
+			expect(result?.candidates).toHaveLength(0);
 		});
 
 		it("returns null for non-existent candidate", () => {
@@ -186,7 +188,7 @@ describe("Thread Service", () => {
 			const updated = updateThread(db, thread.id, { name: "Renamed" });
 
 			expect(updated).toBeDefined();
-      expect(updated!.name).toBe("Renamed");
+			expect(updated?.name).toBe("Renamed");
 		});
 
 		it("returns null for non-existent thread", () => {
@@ -202,7 +204,7 @@ describe("Thread Service", () => {
 
 			const deleted = deleteThread(db, thread.id);
 			expect(deleted).toBeDefined();
-      expect(deleted!.name).toBe("To Delete");
+			expect(deleted?.name).toBe("To Delete");
 
 			// Thread and candidates gone
 			const result = getThreadWithCandidates(db, thread.id);
@@ -230,21 +232,24 @@ describe("Thread Service", () => {
 			const result = resolveThread(db, thread.id, candidate.id);
 			expect(result.success).toBe(true);
 			expect(result.item).toBeDefined();
-      expect(result.item!.name).toBe("Winner Tent");
-      expect(result.item!.weightGrams).toBe(1200);
-      expect(result.item!.priceCents).toBe(30000);
-      expect(result.item!.categoryId).toBe(1);
-      expect(result.item!.notes).toBe("Best choice");
-      expect(result.item!.productUrl).toBe("https://example.com/tent");
+			expect(result.item?.name).toBe("Winner Tent");
+			expect(result.item?.weightGrams).toBe(1200);
+			expect(result.item?.priceCents).toBe(30000);
+			expect(result.item?.categoryId).toBe(1);
+			expect(result.item?.notes).toBe("Best choice");
+			expect(result.item?.productUrl).toBe("https://example.com/tent");
 
 			// Thread should be resolved
 			const resolved = getThreadWithCandidates(db, thread.id);
-      expect(resolved!.status).toBe("resolved");
-      expect(resolved!.resolvedCandidateId).toBe(candidate.id);
+			expect(resolved?.status).toBe("resolved");
+			expect(resolved?.resolvedCandidateId).toBe(candidate.id);
 		});
 
 		it("fails if thread is not active", () => {
-      const thread = createThread(db, { name: "Already Resolved", categoryId: 1 });
+			const thread = createThread(db, {
+				name: "Already Resolved",
+				categoryId: 1,
+			});
 			const candidate = createCandidate(db, thread.id, {
 				name: "Winner",
 				categoryId: 1,

tests/services/totals.test.ts

@@ -1,11 +1,11 @@
-import { describe, it, expect, beforeEach } from "bun:test";
-import { createTestDb } from "../helpers/db.ts";
-import { createItem } from "../../src/server/services/item.service.ts";
+import { beforeEach, describe, expect, it } from "bun:test";
 import { createCategory } from "../../src/server/services/category.service.ts";
+import { createItem } from "../../src/server/services/item.service.ts";
 import {
 	getCategoryTotals,
 	getGlobalTotals,
 } from "../../src/server/services/totals.service.ts";
+import { createTestDb } from "../helpers/db.ts";
 
 describe("Totals Service", () => {
 	let db: ReturnType<typeof createTestDb>;
@@ -21,13 +21,13 @@ describe("Totals Service", () => {
 				name: "Tent",
 				weightGrams: 1200,
 				priceCents: 35000,
-        categoryId: shelter!.id,
+				categoryId: shelter?.id,
 			});
 			createItem(db, {
 				name: "Tarp",
 				weightGrams: 300,
 				priceCents: 8000,
-        categoryId: shelter!.id,
+				categoryId: shelter?.id,
 			});
 
 			const totals = getCategoryTotals(db);
@@ -63,17 +63,17 @@ describe("Totals Service", () => {
 
 			const totals = getGlobalTotals(db);
 			expect(totals).toBeDefined();
-      expect(totals!.totalWeight).toBe(1220);
-      expect(totals!.totalCost).toBe(35500);
-      expect(totals!.itemCount).toBe(2);
+			expect(totals?.totalWeight).toBe(1220);
+			expect(totals?.totalCost).toBe(35500);
+			expect(totals?.itemCount).toBe(2);
 		});
 
 		it("returns zeros when no items exist", () => {
 			const totals = getGlobalTotals(db);
 			expect(totals).toBeDefined();
-      expect(totals!.totalWeight).toBe(0);
-      expect(totals!.totalCost).toBe(0);
-      expect(totals!.itemCount).toBe(0);
+			expect(totals?.totalWeight).toBe(0);
+			expect(totals?.totalCost).toBe(0);
+			expect(totals?.itemCount).toBe(0);
 		});
 	});
 });

vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
 import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
 
 export default defineConfig({
 	plugins: [