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>

.dockerignore

@@ -0,0 +1,10 @@
+node_modules
+dist
+gearbox.db*
+uploads/*
+!uploads/.gitkeep
+.git
+.idea
+.claude
+.gitea
+.planning

.gitea/workflows/ci.yml

@@ -0,0 +1,28 @@
+name: CI
+
+on:
+  push:
+    branches: [Develop]
+  pull_request:
+    branches: [Develop]
+
+jobs:
+  ci:
+    runs-on: docker
+    container:
+      image: oven/bun:1
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install dependencies
+        run: bun install --frozen-lockfile --ignore-scripts
+
+      - name: Lint
+        run: bun run lint
+
+      - name: Test
+        run: bun test
+
+      - name: Build
+        run: bun run build

.gitea/workflows/release.yml

@@ -0,0 +1,108 @@
+name: Release
+
+on:
+  workflow_dispatch:
+    inputs:
+      bump:
+        description: "Version bump type"
+        required: true
+        default: "patch"
+        type: choice
+        options:
+          - patch
+          - minor
+          - major
+
+jobs:
+  ci:
+    runs-on: docker
+    container:
+      image: oven/bun:1
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install dependencies
+        run: bun install --frozen-lockfile --ignore-scripts
+
+      - name: Lint
+        run: bun run lint
+
+      - name: Test
+        run: bun test
+
+      - name: Build
+        run: bun run build
+
+  release:
+    needs: ci
+    runs-on: dind
+    steps:
+      - name: Clone repository
+        run: |
+          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 }}
+
+      - name: Compute version
+        working-directory: repo
+        run: |
+          LATEST_TAG=$(git tag -l 'v*' --sort=-v:refname | head -n1)
+          if [ -z "$LATEST_TAG" ]; then
+            LATEST_TAG="v0.0.0"
+          fi
+          MAJOR=$(echo "$LATEST_TAG" | sed 's/v//' | cut -d. -f1)
+          MINOR=$(echo "$LATEST_TAG" | sed 's/v//' | cut -d. -f2)
+          PATCH=$(echo "$LATEST_TAG" | sed 's/v//' | cut -d. -f3)
+          case "${{ gitea.event.inputs.bump }}" in
+            major) MAJOR=$((MAJOR+1)); MINOR=0; PATCH=0 ;;
+            minor) MINOR=$((MINOR+1)); PATCH=0 ;;
+            patch) PATCH=$((PATCH+1)) ;;
+          esac
+          NEW_VERSION="v${MAJOR}.${MINOR}.${PATCH}"
+          echo "VERSION=$NEW_VERSION" >> "$GITHUB_ENV"
+          echo "PREV_TAG=$LATEST_TAG" >> "$GITHUB_ENV"
+          echo "New version: $NEW_VERSION"
+
+      - name: Generate changelog
+        working-directory: repo
+        run: |
+          if [ "$PREV_TAG" = "v0.0.0" ]; then
+            CHANGELOG=$(git log --pretty=format:"- %s" HEAD)
+          else
+            CHANGELOG=$(git log --pretty=format:"- %s" "${PREV_TAG}..HEAD")
+          fi
+          echo "CHANGELOG<<CHANGELOG_EOF" >> "$GITHUB_ENV"
+          echo "$CHANGELOG" >> "$GITHUB_ENV"
+          echo "CHANGELOG_EOF" >> "$GITHUB_ENV"
+
+      - name: Create and push tag
+        working-directory: repo
+        run: |
+          git config user.name "Gitea Actions"
+          git config user.email "actions@gitea.jeanlucmakiola.de"
+          git tag -a "$VERSION" -m "Release $VERSION"
+          git push origin "$VERSION"
+
+      - name: Build and push Docker image
+        working-directory: repo
+        run: |
+          REGISTRY="gitea.jeanlucmakiola.de"
+          IMAGE="${REGISTRY}/${{ gitea.repository_owner }}/gearbox"
+          docker build -t "${IMAGE}:${VERSION}" -t "${IMAGE}:latest" .
+          echo "${{ secrets.REGISTRY_TOKEN }}" | docker login "$REGISTRY" -u "${{ gitea.repository_owner }}" --password-stdin
+          docker push "${IMAGE}:${VERSION}"
+          docker push "${IMAGE}:latest"
+
+      - name: Create Gitea release
+        run: |
+          API_URL="${GITHUB_SERVER_URL}/api/v1/repos/${{ gitea.repository }}/releases"
+          curl -s -X POST "$API_URL" \
+            -H "Authorization: token ${{ secrets.GITEA_TOKEN }}" \
+            -H "Content-Type: application/json" \
+            -d "$(jq -n \
+              --arg tag "$VERSION" \
+              --arg name "$VERSION" \
+              --arg body "$CHANGELOG" \
+              '{tag_name: $tag, name: $name, body: $body, draft: false, prerelease: false}')"

.gitignore

@@ -223,3 +223,6 @@ dist/
 uploads/*
 !uploads/.gitkeep
 
+# Claude Code
+.claude/
+

.planning/config.json

@@ -5,7 +5,7 @@
 	"commit_docs": true,
 	"model_profile": "quality",
 	"workflow": {
-    "research": true,
+		"research": false,
 		"plan_check": true,
 		"verifier": true,
 		"nyquist_validation": true,

CLAUDE.md

@@ -0,0 +1,70 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+GearBox is a single-user web app for managing gear collections (bikepacking, sim racing, etc.), tracking weight/price, and planning purchases through research threads. Full-stack TypeScript monolith running on Bun.
+
+## Commands
+
+```bash
+# Development (run both in separate terminals)
+bun run dev:client          # Vite dev server on :5173 (proxies /api to :3000)
+bun run dev:server          # Hono server on :3000 with hot reload
+
+# Database
+bun run db:generate         # Generate Drizzle migration from schema changes
+bun run db:push             # Apply migrations to gearbox.db
+
+# Testing
+bun test                    # Run all tests
+bun test tests/services/item.service.test.ts  # Run single test file
+
+# Lint & Format
+bun run lint                # Biome check (tabs, double quotes, organized imports)
+
+# Build
+bun run build               # Vite build → dist/client/
+```
+
+## Architecture
+
+**Stack**: React 19 + Hono + Drizzle ORM + SQLite, all running on Bun.
+
+### Client (`src/client/`)
+- **Routing**: TanStack Router with file-based routes in `src/client/routes/`. Route tree auto-generated to `routeTree.gen.ts` — never edit manually.
+- **Data fetching**: TanStack React Query via custom hooks in `src/client/hooks/` (e.g., `useItems`, `useThreads`, `useSetups`). Mutations invalidate related query keys.
+- **UI state**: Zustand store (`stores/uiStore.ts`) for panel/dialog state only — server data lives in React Query.
+- **API calls**: Thin fetch wrapper in `lib/api.ts` (`apiGet`, `apiPost`, `apiPut`, `apiDelete`, `apiUpload`).
+- **Styling**: Tailwind CSS v4.
+
+### Server (`src/server/`)
+- **Routes** (`routes/`): Hono handlers with Zod validation via `@hono/zod-validator`. Delegate to services.
+- **Services** (`services/`): Pure business logic functions that take a db instance. No HTTP awareness — testable without mocking.
+- Route registration in `src/server/index.ts` via `app.route("/api/...", routes)`.
+
+### Shared (`src/shared/`)
+- **`schemas.ts`**: Zod schemas for API request validation (source of truth for types).
+- **`types.ts`**: Types inferred from Zod schemas + Drizzle table definitions. No manual type duplication.
+
+### Database (`src/db/`)
+- **Schema**: `schema.ts` — Drizzle table definitions for SQLite.
+- **Prices stored as cents** (`priceCents: integer`) to avoid float rounding.
+- **Timestamps**: stored as integers (unix epoch) with `{ mode: "timestamp" }`.
+- Tables: `categories`, `items`, `threads`, `threadCandidates`, `setups`, `setupItems`, `settings`.
+
+### Testing (`tests/`)
+- Bun test runner. Tests at service level and route level.
+- `tests/helpers/db.ts`: `createTestDb()` creates in-memory SQLite with full schema and seeds an "Uncategorized" category. When adding schema columns, update both `src/db/schema.ts` and the test helper's CREATE TABLE statements.
+
+## Path Alias
+
+`@/*` maps to `./src/*` (configured in tsconfig.json).
+
+## Key Patterns
+
+- **Thread resolution**: Resolving a thread copies the winning candidate's data into a new item in the collection, sets `resolvedCandidateId`, and changes status to "resolved".
+- **Setup item sync**: `PUT /api/setups/:id/items` replaces all setup_items atomically (delete all, re-insert).
+- **Image uploads**: `POST /api/images` saves to `./uploads/` with UUID filename, returned as `imageFilename` on item/candidate records.
+- **Aggregates** (weight/cost totals): Computed via SQL on read, not stored on records.

Dockerfile

@@ -0,0 +1,26 @@
+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
+
+FROM deps AS build
+COPY . .
+RUN bun run build
+
+FROM oven/bun:1-slim AS production
+WORKDIR /app
+ENV NODE_ENV=production
+COPY --from=deps /app/node_modules ./node_modules
+COPY --from=build /app/dist/client ./dist/client
+COPY src/server ./src/server
+COPY src/db ./src/db
+COPY src/shared ./src/shared
+COPY drizzle.config.ts package.json ./
+COPY drizzle ./drizzle
+COPY entrypoint.sh ./
+RUN chmod +x entrypoint.sh && mkdir -p data uploads
+EXPOSE 3000
+HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \
+  CMD bun -e "fetch('http://localhost:3000/api/health').then(r=>r.ok?process.exit(0):process.exit(1)).catch(()=>process.exit(1))"
+ENTRYPOINT ["./entrypoint.sh"]

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

@@ -0,0 +1,23 @@
+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:

drizzle.config.ts

@@ -5,6 +5,6 @@ export default defineConfig({
 	schema: "./src/db/schema.ts",
 	dialect: "sqlite",
 	dbCredentials: {
-    url: "gearbox.db",
+		url: process.env.DATABASE_PATH || "gearbox.db",
 	},
 });

drizzle/0000_bitter_luckman.sql

@@ -0,0 +1,68 @@
+CREATE TABLE `categories` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`name` text NOT NULL,
+	`emoji` text DEFAULT '📦' NOT NULL,
+	`created_at` integer NOT NULL
+);
+--> statement-breakpoint
+CREATE UNIQUE INDEX `categories_name_unique` ON `categories` (`name`);--> statement-breakpoint
+CREATE TABLE `items` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`name` text NOT NULL,
+	`weight_grams` real,
+	`price_cents` integer,
+	`category_id` integer NOT NULL,
+	`notes` text,
+	`product_url` text,
+	`image_filename` text,
+	`created_at` integer NOT NULL,
+	`updated_at` integer NOT NULL,
+	FOREIGN KEY (`category_id`) REFERENCES `categories`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+CREATE TABLE `settings` (
+	`key` text PRIMARY KEY NOT NULL,
+	`value` text NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE `setup_items` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`setup_id` integer NOT NULL,
+	`item_id` integer NOT NULL,
+	FOREIGN KEY (`setup_id`) REFERENCES `setups`(`id`) ON UPDATE no action ON DELETE cascade,
+	FOREIGN KEY (`item_id`) REFERENCES `items`(`id`) ON UPDATE no action ON DELETE cascade
+);
+--> statement-breakpoint
+CREATE TABLE `setups` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`name` text NOT NULL,
+	`created_at` integer NOT NULL,
+	`updated_at` integer NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE `thread_candidates` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`thread_id` integer NOT NULL,
+	`name` text NOT NULL,
+	`weight_grams` real,
+	`price_cents` integer,
+	`category_id` integer NOT NULL,
+	`notes` text,
+	`product_url` text,
+	`image_filename` text,
+	`created_at` integer NOT NULL,
+	`updated_at` integer NOT NULL,
+	FOREIGN KEY (`thread_id`) REFERENCES `threads`(`id`) ON UPDATE no action ON DELETE cascade,
+	FOREIGN KEY (`category_id`) REFERENCES `categories`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+CREATE TABLE `threads` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`name` text NOT NULL,
+	`status` text DEFAULT 'active' NOT NULL,
+	`resolved_candidate_id` integer,
+	`category_id` integer NOT NULL,
+	`created_at` integer NOT NULL,
+	`updated_at` integer NOT NULL,
+	FOREIGN KEY (`category_id`) REFERENCES `categories`(`id`) ON UPDATE no action ON DELETE no action
+);

drizzle/meta/0000_snapshot.json

@@ -0,0 +1,441 @@
+{
+	"version": "6",
+	"dialect": "sqlite",
+	"id": "78e5f5c8-f8f0-43f4-93f8-5ef68154ed17",
+	"prevId": "00000000-0000-0000-0000-000000000000",
+	"tables": {
+		"categories": {
+			"name": "categories",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "integer",
+					"primaryKey": true,
+					"notNull": true,
+					"autoincrement": true
+				},
+				"name": {
+					"name": "name",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"emoji": {
+					"name": "emoji",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false,
+					"default": "'📦'"
+				},
+				"created_at": {
+					"name": "created_at",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				}
+			},
+			"indexes": {
+				"categories_name_unique": {
+					"name": "categories_name_unique",
+					"columns": ["name"],
+					"isUnique": true
+				}
+			},
+			"foreignKeys": {},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {},
+			"checkConstraints": {}
+		},
+		"items": {
+			"name": "items",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "integer",
+					"primaryKey": true,
+					"notNull": true,
+					"autoincrement": true
+				},
+				"name": {
+					"name": "name",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"weight_grams": {
+					"name": "weight_grams",
+					"type": "real",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"price_cents": {
+					"name": "price_cents",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"category_id": {
+					"name": "category_id",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"notes": {
+					"name": "notes",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"product_url": {
+					"name": "product_url",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"image_filename": {
+					"name": "image_filename",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"created_at": {
+					"name": "created_at",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"updated_at": {
+					"name": "updated_at",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				}
+			},
+			"indexes": {},
+			"foreignKeys": {
+				"items_category_id_categories_id_fk": {
+					"name": "items_category_id_categories_id_fk",
+					"tableFrom": "items",
+					"tableTo": "categories",
+					"columnsFrom": ["category_id"],
+					"columnsTo": ["id"],
+					"onDelete": "no action",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {},
+			"checkConstraints": {}
+		},
+		"settings": {
+			"name": "settings",
+			"columns": {
+				"key": {
+					"name": "key",
+					"type": "text",
+					"primaryKey": true,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"value": {
+					"name": "value",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				}
+			},
+			"indexes": {},
+			"foreignKeys": {},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {},
+			"checkConstraints": {}
+		},
+		"setup_items": {
+			"name": "setup_items",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "integer",
+					"primaryKey": true,
+					"notNull": true,
+					"autoincrement": true
+				},
+				"setup_id": {
+					"name": "setup_id",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"item_id": {
+					"name": "item_id",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				}
+			},
+			"indexes": {},
+			"foreignKeys": {
+				"setup_items_setup_id_setups_id_fk": {
+					"name": "setup_items_setup_id_setups_id_fk",
+					"tableFrom": "setup_items",
+					"tableTo": "setups",
+					"columnsFrom": ["setup_id"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				},
+				"setup_items_item_id_items_id_fk": {
+					"name": "setup_items_item_id_items_id_fk",
+					"tableFrom": "setup_items",
+					"tableTo": "items",
+					"columnsFrom": ["item_id"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {},
+			"checkConstraints": {}
+		},
+		"setups": {
+			"name": "setups",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "integer",
+					"primaryKey": true,
+					"notNull": true,
+					"autoincrement": true
+				},
+				"name": {
+					"name": "name",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"created_at": {
+					"name": "created_at",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"updated_at": {
+					"name": "updated_at",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				}
+			},
+			"indexes": {},
+			"foreignKeys": {},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {},
+			"checkConstraints": {}
+		},
+		"thread_candidates": {
+			"name": "thread_candidates",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "integer",
+					"primaryKey": true,
+					"notNull": true,
+					"autoincrement": true
+				},
+				"thread_id": {
+					"name": "thread_id",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"name": {
+					"name": "name",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"weight_grams": {
+					"name": "weight_grams",
+					"type": "real",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"price_cents": {
+					"name": "price_cents",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"category_id": {
+					"name": "category_id",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"notes": {
+					"name": "notes",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"product_url": {
+					"name": "product_url",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"image_filename": {
+					"name": "image_filename",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"created_at": {
+					"name": "created_at",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"updated_at": {
+					"name": "updated_at",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				}
+			},
+			"indexes": {},
+			"foreignKeys": {
+				"thread_candidates_thread_id_threads_id_fk": {
+					"name": "thread_candidates_thread_id_threads_id_fk",
+					"tableFrom": "thread_candidates",
+					"tableTo": "threads",
+					"columnsFrom": ["thread_id"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				},
+				"thread_candidates_category_id_categories_id_fk": {
+					"name": "thread_candidates_category_id_categories_id_fk",
+					"tableFrom": "thread_candidates",
+					"tableTo": "categories",
+					"columnsFrom": ["category_id"],
+					"columnsTo": ["id"],
+					"onDelete": "no action",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {},
+			"checkConstraints": {}
+		},
+		"threads": {
+			"name": "threads",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "integer",
+					"primaryKey": true,
+					"notNull": true,
+					"autoincrement": true
+				},
+				"name": {
+					"name": "name",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"status": {
+					"name": "status",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false,
+					"default": "'active'"
+				},
+				"resolved_candidate_id": {
+					"name": "resolved_candidate_id",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"category_id": {
+					"name": "category_id",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"created_at": {
+					"name": "created_at",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"updated_at": {
+					"name": "updated_at",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				}
+			},
+			"indexes": {},
+			"foreignKeys": {
+				"threads_category_id_categories_id_fk": {
+					"name": "threads_category_id_categories_id_fk",
+					"tableFrom": "threads",
+					"tableTo": "categories",
+					"columnsFrom": ["category_id"],
+					"columnsTo": ["id"],
+					"onDelete": "no action",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {},
+			"checkConstraints": {}
+		}
+	},
+	"views": {},
+	"enums": {},
+	"_meta": {
+		"schemas": {},
+		"tables": {},
+		"columns": {}
+	},
+	"internal": {
+		"indexes": {}
+	}
+}

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

@@ -0,0 +1,4 @@
+#!/bin/sh
+set -e
+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

@@ -10,6 +10,7 @@ interface CandidateCardProps {
 	categoryName: string;
 	categoryIcon: string;
 	imageFilename: string | null;
+	productUrl?: string | null;
 	threadId: number;
 	isActive: boolean;
 }
@@ -22,6 +23,7 @@ export function CandidateCard({
 	categoryName,
 	categoryIcon,
 	imageFilename,
+	productUrl,
 	threadId,
 	isActive,
 }: CandidateCardProps) {
@@ -30,9 +32,38 @@ export function CandidateCard({
 		(s) => s.openConfirmDeleteCandidate,
 	);
 	const openResolveDialog = useUIStore((s) => s.openResolveDialog);
+	const openExternalLink = useUIStore((s) => s.openExternalLink);
 
 	return (
-		<div className="bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-sm transition-all overflow-hidden">
+		<div className="relative bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-sm transition-all overflow-hidden group">
+			{productUrl && (
+				<span
+					role="button"
+					tabIndex={0}
+					onClick={() => openExternalLink(productUrl)}
+					onKeyDown={(e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							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-gray-200 hover:text-gray-600 opacity-0 group-hover:opacity-100 transition-all cursor-pointer"
+					title="Open product link"
+				>
+					<svg
+						className="w-3.5 h-3.5"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth={2}
+							d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"
+						/>
+					</svg>
+				</span>
+			)}
 			<div className="aspect-[4/3] bg-gray-50">
 				{imageFilename ? (
 					<img
@@ -42,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>
@@ -52,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

@@ -1,11 +1,11 @@
 import { Link } from "@tanstack/react-router";
-import type { ReactNode } from "react";
+import { LucideIcon } from "../lib/iconData";
 
 interface DashboardCardProps {
 	to: string;
 	search?: Record<string, string>;
 	title: string;
-  icon: ReactNode;
+	icon: string;
 	stats: Array<{ label: string; value: string }>;
 	emptyText?: string;
 }
@@ -29,7 +29,7 @@ export function DashboardCard({
 			className="block bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-md transition-all p-6"
 		>
 			<div className="flex items-center gap-3 mb-4">
-        <span className="text-2xl">{icon}</span>
+				<LucideIcon name={icon} size={24} className="text-gray-500" />
 				<h2 className="text-lg font-semibold text-gray-900">{title}</h2>
 			</div>
 			<div className="space-y-1.5">
@@ -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

@@ -0,0 +1,63 @@
+import { useEffect } from "react";
+import { useUIStore } from "../stores/uiStore";
+
+export function ExternalLinkDialog() {
+	const externalLinkUrl = useUIStore((s) => s.externalLinkUrl);
+	const closeExternalLink = useUIStore((s) => s.closeExternalLink);
+
+	useEffect(() => {
+		function handleKeyDown(e: KeyboardEvent) {
+			if (e.key === "Escape") closeExternalLink();
+		}
+		if (externalLinkUrl) {
+			document.addEventListener("keydown", handleKeyDown);
+			return () => document.removeEventListener("keydown", handleKeyDown);
+		}
+	}, [externalLinkUrl, closeExternalLink]);
+
+	if (!externalLinkUrl) return null;
+
+	function handleContinue() {
+		if (externalLinkUrl) {
+			window.open(externalLinkUrl, "_blank", "noopener,noreferrer");
+		}
+		closeExternalLink();
+	}
+
+	return (
+		<div className="fixed inset-0 z-50 flex items-center justify-center">
+			<div
+				className="absolute inset-0 bg-black/30"
+				onClick={closeExternalLink}
+				onKeyDown={(e) => {
+					if (e.key === "Escape") closeExternalLink();
+				}}
+			/>
+			<div className="relative bg-white rounded-xl shadow-lg p-6 max-w-sm mx-4 w-full">
+				<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-gray-600 break-all mb-6">
+					{externalLinkUrl}
+				</p>
+				<div className="flex justify-end gap-3">
+					<button
+						type="button"
+						onClick={closeExternalLink}
+						className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
+					>
+						Cancel
+					</button>
+					<button
+						type="button"
+						onClick={handleContinue}
+						className="px-4 py-2 text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 rounded-lg transition-colors"
+					>
+						Continue
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}

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

@@ -10,6 +10,7 @@ interface ItemCardProps {
 	categoryName: string;
 	categoryIcon: string;
 	imageFilename: string | null;
+	productUrl?: string | null;
 	onRemove?: () => void;
 }
 
@@ -21,9 +22,11 @@ export function ItemCard({
 	categoryName,
 	categoryIcon,
 	imageFilename,
+	productUrl,
 	onRemove,
 }: ItemCardProps) {
 	const openEditPanel = useUIStore((s) => s.openEditPanel);
+	const openExternalLink = useUIStore((s) => s.openExternalLink);
 
 	return (
 		<button
@@ -31,6 +34,38 @@ export function ItemCard({
 			onClick={() => openEditPanel(id)}
 			className="relative w-full text-left bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-sm transition-all overflow-hidden group"
 		>
+			{productUrl && (
+				<span
+					role="button"
+					tabIndex={0}
+					onClick={(e) => {
+						e.stopPropagation();
+						openExternalLink(productUrl);
+					}}
+					onKeyDown={(e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.stopPropagation();
+							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-gray-200 hover:text-gray-600 opacity-0 group-hover:opacity-100 transition-all cursor-pointer`}
+					title="Open product link"
+				>
+					<svg
+						className="w-3.5 h-3.5"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth={2}
+							d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"
+						/>
+					</svg>
+				</span>
+			)}
 			{onRemove && (
 				<span
 					role="button"
@@ -72,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>
@@ -82,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

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { useCreateCategory } from "../hooks/useCategories";
 import { useCreateItem } from "../hooks/useItems";
 import { useUpdateSetting } from "../hooks/useSettings";
+import { LucideIcon } from "../lib/iconData";
 import { IconPicker } from "./IconPicker";
 
 interface OnboardingWizardProps {
@@ -15,7 +16,9 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
 	const [categoryName, setCategoryName] = useState("");
 	const [categoryIcon, setCategoryIcon] = useState("");
 	const [categoryError, setCategoryError] = useState("");
-  const [createdCategoryId, setCreatedCategoryId] = useState<number | null>(null);
+	const [createdCategoryId, setCreatedCategoryId] = useState<number | null>(
+		null,
+	);
 
 	// Step 3 state
 	const [itemName, setItemName] = useState("");
@@ -99,9 +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"
 							}`}
 						/>
 					))}
@@ -120,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>
@@ -158,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>
 
@@ -184,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>
@@ -221,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>
 
@@ -242,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>
@@ -260,22 +259,20 @@ 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>
 							</div>
 
-              {itemError && (
-                <p className="text-xs text-red-500">{itemError}</p>
-              )}
+							{itemError && <p className="text-xs text-red-500">{itemError}</p>}
 						</div>
 
 						<button
 							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>
@@ -292,19 +289,25 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
 				{/* Step 4: Done */}
 				{step === 4 && (
 					<div className="text-center">
-            <div className="text-4xl mb-4">&#127881;</div>
+						<div className="mb-4">
+							<LucideIcon
+								name="party-popper"
+								size={48}
+								className="text-gray-400 mx-auto"
+							/>
+						</div>
 						<h2 className="text-xl font-semibold text-gray-900 mb-2">
 							You&apos;re all set!
 						</h2>
 						<p className="text-sm text-gray-500 mb-8">
-              Your first item has been added. You can now browse your collection,
-              add more gear, and track your setup.
+							Your first item has been added. You can now browse your
+							collection, add more gear, and track your setup.
 						</p>
 						<button
 							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,21 +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,
@@ -73,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
@@ -88,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>
 		);
 	}
@@ -142,6 +149,9 @@ function RootLayout() {
 			{/* Item Confirm Delete Dialog */}
 			<ConfirmDialog />
 
+			{/* External Link Confirmation Dialog */}
+			<ExternalLinkDialog />
+
 			{/* Candidate Delete Confirm Dialog */}
 			{confirmDeleteCandidateId != null && currentThreadId != null && (
 				<CandidateDeleteDialog
@@ -169,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,16 +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/")({
@@ -25,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>
 	);
@@ -61,7 +70,13 @@ function CollectionView() {
 		return (
 			<div className="py-16 text-center">
 				<div className="max-w-md mx-auto">
-					<div className="text-5xl mb-4">🎒</div>
+					<div className="mb-4">
+						<LucideIcon
+							name="backpack"
+							size={48}
+							className="text-gray-400 mx-auto"
+						/>
+					</div>
 					<h2 className="text-xl font-semibold text-gray-900 mb-2">
 						Your collection is empty
 					</h2>
@@ -72,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"
@@ -158,6 +173,7 @@ function CollectionView() {
 										categoryName={categoryName}
 										categoryIcon={categoryIcon}
 										imageFilename={item.imageFilename}
+										productUrl={item.productUrl}
 									/>
 								))}
 							</div>
@@ -209,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"
@@ -238,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"
 						}`}
 					>
@@ -249,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"
 						}`}
 					>
@@ -263,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) => (
@@ -283,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>
@@ -294,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>
@@ -305,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>
@@ -319,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"
@@ -366,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

@@ -1,9 +1,9 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { useTotals } from "../hooks/useTotals";
-import { useThreads } from "../hooks/useThreads";
-import { useSetups } from "../hooks/useSetups";
 import { DashboardCard } from "../components/DashboardCard";
-import { formatWeight, formatPrice } from "../lib/formatters";
+import { useSetups } from "../hooks/useSetups";
+import { useThreads } from "../hooks/useThreads";
+import { useTotals } from "../hooks/useTotals";
+import { formatPrice, formatWeight } from "../lib/formatters";
 
 export const Route = createFileRoute("/")({
 	component: DashboardPage,
@@ -24,10 +24,13 @@ function DashboardPage() {
 				<DashboardCard
 					to="/collection"
 					title="Collection"
-          icon="🎒"
+					icon="backpack"
 					stats={[
 						{ label: "Items", value: String(global?.itemCount ?? 0) },
-            { label: "Weight", value: formatWeight(global?.totalWeight ?? null) },
+						{
+							label: "Weight",
+							value: formatWeight(global?.totalWeight ?? null),
+						},
 						{ label: "Cost", value: formatPrice(global?.totalCost ?? null) },
 					]}
 					emptyText="Get started"
@@ -36,18 +39,17 @@ function DashboardPage() {
 					to="/collection"
 					search={{ tab: "planning" }}
 					title="Planning"
-          icon="🔍"
+					icon="search"
 					stats={[
 						{ label: "Active threads", value: String(activeThreadCount) },
 					]}
 				/>
 				<DashboardCard
-          to="/setups"
+					to="/collection"
+					search={{ tab: "setups" }}
 					title="Setups"
-          icon="🏕️"
-          stats={[
-            { label: "Setups", value: String(setupCount) },
-          ]}
+					icon="tent"
+					stats={[{ label: "Setups", value: String(setupCount) }]}
 				/>
 			</div>
 		</div>

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

@@ -1,14 +1,15 @@
-import { useState } from "react";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import {
-  useSetup,
-  useDeleteSetup,
-  useRemoveSetupItem,
-} from "../../hooks/useSetups";
+import { useState } from "react";
 import { CategoryHeader } from "../../components/CategoryHeader";
 import { ItemCard } from "../../components/ItemCard";
 import { ItemPicker } from "../../components/ItemPicker";
-import { formatWeight, formatPrice } from "../../lib/formatters";
+import {
+	useDeleteSetup,
+	useRemoveSetupItem,
+	useSetup,
+} from "../../hooks/useSetups";
+import { formatPrice, formatWeight } from "../../lib/formatters";
+import { LucideIcon } from "../../lib/iconData";
 
 export const Route = createFileRoute("/setups/$setupId")({
 	component: SetupDetailPage,
@@ -123,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"
@@ -153,7 +154,13 @@ function SetupDetailPage() {
 			{itemCount === 0 && (
 				<div className="py-16 text-center">
 					<div className="max-w-md mx-auto">
-            <div className="text-5xl mb-4">📦</div>
+						<div className="mb-4">
+							<LucideIcon
+								name="package"
+								size={48}
+								className="text-gray-400 mx-auto"
+							/>
+						</div>
 						<h2 className="text-xl font-semibold text-gray-900 mb-2">
 							No items in this setup
 						</h2>
@@ -163,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>
@@ -208,6 +215,7 @@ function SetupDetailPage() {
 												categoryName={categoryName}
 												categoryIcon={categoryIcon}
 												imageFilename={item.imageFilename}
+												productUrl={item.productUrl}
 												onRemove={() => removeItem.mutate(item.id)}
 											/>
 										))}

src/client/routes/setups/index.tsx

@@ -1,86 +0,0 @@
-import { useState } from "react";
-import { createFileRoute } from "@tanstack/react-router";
-import { useSetups, useCreateSetup } from "../../hooks/useSetups";
-import { SetupCard } from "../../components/SetupCard";
-
-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="text-5xl mb-4">🏕️</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

@@ -1,6 +1,7 @@
 import { createFileRoute, Link } from "@tanstack/react-router";
-import { useThread } from "../../hooks/useThreads";
 import { CandidateCard } from "../../components/CandidateCard";
+import { useThread } from "../../hooks/useThreads";
+import { LucideIcon } from "../../lib/iconData";
 import { useUIStore } from "../../stores/uiStore";
 
 export const Route = createFileRoute("/threads/$threadId")({
@@ -37,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>
@@ -62,13 +63,11 @@ function ThreadDetailPage() {
 					&larr; Back to planning
 				</Link>
 				<div className="flex items-center gap-3">
-          <h1 className="text-xl font-semibold text-gray-900">
-            {thread.name}
-          </h1>
+					<h1 className="text-xl font-semibold text-gray-900">{thread.name}</h1>
 					<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"
 						}`}
 					>
@@ -93,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"
@@ -116,7 +115,13 @@ function ThreadDetailPage() {
 			{/* Candidate grid */}
 			{thread.candidates.length === 0 ? (
 				<div className="py-12 text-center">
-          <div className="text-4xl mb-3">🏷️</div>
+					<div className="mb-3">
+						<LucideIcon
+							name="tag"
+							size={48}
+							className="text-gray-400 mx-auto"
+						/>
+					</div>
 					<h3 className="text-lg font-semibold text-gray-900 mb-1">
 						No candidates yet
 					</h3>
@@ -136,6 +141,7 @@ function ThreadDetailPage() {
 							categoryName={candidate.categoryName}
 							categoryIcon={candidate.categoryIcon}
 							imageFilename={candidate.imageFilename}
+							productUrl={candidate.productUrl}
 							threadId={threadId}
 							isActive={isActive}
 						/>

src/client/stores/uiStore.ts

@@ -43,6 +43,11 @@ interface UIState {
 	createThreadModalOpen: boolean;
 	openCreateThreadModal: () => void;
 	closeCreateThreadModal: () => void;
+
+	// External link dialog
+	externalLinkUrl: string | null;
+	openExternalLink: (url: string) => void;
+	closeExternalLink: () => void;
 }
 
 export const useUIStore = create<UIState>((set) => ({
@@ -93,4 +98,9 @@ export const useUIStore = create<UIState>((set) => ({
 	createThreadModalOpen: false,
 	openCreateThreadModal: () => set({ createThreadModalOpen: true }),
 	closeCreateThreadModal: () => set({ createThreadModalOpen: false }),
+
+	// External link dialog
+	externalLinkUrl: null,
+	openExternalLink: (url) => set({ externalLinkUrl: url }),
+	closeExternalLink: () => set({ externalLinkUrl: null }),
 }));

src/db/index.ts

@@ -2,7 +2,7 @@ import { Database } from "bun:sqlite";
 import { drizzle } from "drizzle-orm/bun-sqlite";
 import * as schema from "./schema.ts";
 
-const sqlite = new Database("gearbox.db");
+const sqlite = new Database(process.env.DATABASE_PATH || "gearbox.db");
 sqlite.run("PRAGMA journal_mode = WAL");
 sqlite.run("PRAGMA foreign_keys = ON");
 

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: [