chore: merge executor worktree (worktree-agent-a1291d63 — plan 34-02)

src/client/components/AddToCollectionModal.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { useCategories } from "../hooks/useCategories";
 import { useCurrency } from "../hooks/useCurrency";
@@ -7,6 +8,7 @@ import { useUIStore } from "../stores/uiStore";
 import { CategoryPicker } from "./CategoryPicker";
 
 export function AddToCollectionModal() {
+	const { t } = useTranslation(["collection", "common"]);
 	const { open, globalItemId, globalItemName } = useUIStore(
 		(s) => s.addToCollectionModal,
 	);
@@ -47,7 +49,7 @@ export function AddToCollectionModal() {
 	function handleSubmit(e: React.FormEvent) {
 		e.preventDefault();
 		if (categoryId === null) {
-			setError("Please select a category");
+			setError(t("collection:addToCollection.selectCategory"));
 			return;
 		}
 		setError(null);
@@ -66,11 +68,11 @@ export function AddToCollectionModal() {
 			},
 			{
 				onSuccess: () => {
-					toast.success("Added to Collection");
+					toast.success(t("collection:addToCollection.added"));
 					closeAddToCollection();
 				},
 				onError: (err) => {
-					setError(err instanceof Error ? err.message : "Failed to add item");
+					setError(err instanceof Error ? err.message : t("collection:addToCollection.failedToAdd"));
 				},
 			},
 		);
@@ -92,14 +94,14 @@ export function AddToCollectionModal() {
 				onKeyDown={() => {}}
 			>
 				<h2 className="text-lg font-semibold text-gray-900 mb-1">
-					Add to Collection
+					{t("collection:addToCollection.title")}
 				</h2>
 				<p className="text-sm text-gray-500 mb-4">{globalItemName}</p>
 
 				<form onSubmit={handleSubmit} className="space-y-4">
 					<div>
 						<label className="block text-sm font-medium text-gray-700 mb-1">
-							Category
+							{t("collection:addToCollection.categoryLabel")}
 						</label>
 						<CategoryPicker
 							value={categoryId ?? 0}
@@ -112,13 +114,13 @@ export function AddToCollectionModal() {
 							htmlFor="collection-notes"
 							className="block text-sm font-medium text-gray-700 mb-1"
 						>
-							Notes
+							{t("collection:addToCollection.notesLabel")}
 						</label>
 						<textarea
 							id="collection-notes"
 							value={notes}
 							onChange={(e) => setNotes(e.target.value)}
-							placeholder="Personal notes (optional)"
+							placeholder={t("collection:addToCollection.notesPlaceholder")}
 							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-gray-400 focus:border-transparent resize-none"
 						/>
@@ -129,14 +131,14 @@ export function AddToCollectionModal() {
 							htmlFor="collection-price"
 							className="block text-sm font-medium text-gray-700 mb-1"
 						>
-							Purchase Price ({currency})
+							{t("collection:addToCollection.purchasePriceLabel", { currency })}
 						</label>
 						<input
 							id="collection-price"
 							type="number"
 							value={purchasePrice}
 							onChange={(e) => setPurchasePrice(e.target.value)}
-							placeholder="Purchase price (optional)"
+							placeholder={t("collection:addToCollection.purchasePricePlaceholder")}
 							min="0"
 							step="0.01"
 							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"
@@ -151,14 +153,14 @@ export function AddToCollectionModal() {
 							onClick={handleClose}
 							className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
 						>
-							Cancel
+							{t("common:actions.cancel")}
 						</button>
 						<button
 							type="submit"
 							disabled={createItem.isPending}
 							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"
 						>
-							{createItem.isPending ? "Adding..." : "Add to Collection"}
+							{createItem.isPending ? t("collection:addToCollection.addingButton") : t("collection:addToCollection.addButton")}
 						</button>
 					</div>
 				</form>

src/client/components/AddToThreadModal.tsx

@@ -1,5 +1,6 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { useCategories } from "../hooks/useCategories";
 import { useGlobalItem } from "../hooks/useGlobalItems";
@@ -8,6 +9,7 @@ import { apiPost } from "../lib/api";
 import { useUIStore } from "../stores/uiStore";
 
 export function AddToThreadModal() {
+	const { t } = useTranslation(["threads", "common"]);
 	const { open, globalItemId, globalItemName } = useUIStore(
 		(s) => s.addToThreadModal,
 	);
@@ -114,7 +116,7 @@ export function AddToThreadModal() {
 			toast.success(`Added to "${thread?.name ?? "thread"}"`);
 			closeAddToThread();
 		} catch (err) {
-			setError(err instanceof Error ? err.message : "Failed to add candidate");
+			setError(err instanceof Error ? err.message : t("addToThread.failedToAdd"));
 		} finally {
 			setIsSubmitting(false);
 		}
@@ -142,7 +144,7 @@ export function AddToThreadModal() {
 			toast.success(`Created "${trimmedName}" with first candidate`);
 			closeAddToThread();
 		} catch (err) {
-			setError(err instanceof Error ? err.message : "Failed to create thread");
+			setError(err instanceof Error ? err.message : t("addToThread.failedToCreate"));
 		} finally {
 			setIsSubmitting(false);
 		}
@@ -173,7 +175,7 @@ export function AddToThreadModal() {
 				onKeyDown={() => {}}
 			>
 				<h2 className="text-lg font-semibold text-gray-900 mb-1">
-					{mode === "pick" ? "Add to Thread" : "New Thread + Candidate"}
+					{mode === "pick" ? t("addToThread.title") : t("addToThread.newThreadTitle")}
 				</h2>
 				<p className="text-sm text-gray-500 mb-4">{globalItemName}</p>
 
@@ -184,7 +186,7 @@ export function AddToThreadModal() {
 								htmlFor="thread-select"
 								className="block text-sm font-medium text-gray-700 mb-1"
 							>
-								Thread
+								{t("addToThread.thread")}
 							</label>
 							<select
 								id="thread-select"
@@ -197,7 +199,7 @@ export function AddToThreadModal() {
 										{t.name} ({t.categoryName})
 									</option>
 								))}
-								<option value="new">+ New Thread...</option>
+								<option value="new">{t("addToThread.newThread")}</option>
 							</select>
 						</div>
 					) : (
@@ -207,14 +209,14 @@ export function AddToThreadModal() {
 									htmlFor="new-thread-name"
 									className="block text-sm font-medium text-gray-700 mb-1"
 								>
-									Thread name
+									{t("addToThread.threadName")}
 								</label>
 								<input
 									id="new-thread-name"
 									type="text"
 									value={newThreadName}
 									onChange={(e) => setNewThreadName(e.target.value)}
-									placeholder="e.g. Lightweight sleeping bag"
+									placeholder={t("create.namePlaceholder")}
 									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>
@@ -224,7 +226,7 @@ export function AddToThreadModal() {
 									htmlFor="new-thread-category"
 									className="block text-sm font-medium text-gray-700 mb-1"
 								>
-									Category
+									{t("create.category")}
 								</label>
 								<select
 									id="new-thread-category"
@@ -248,7 +250,7 @@ export function AddToThreadModal() {
 									onClick={() => setMode("pick")}
 									className="text-sm text-gray-500 hover:text-gray-700 underline"
 								>
-									Back to thread picker
+									{t("addToThread.backToPicker")}
 								</button>
 							)}
 						</>
@@ -266,7 +268,7 @@ export function AddToThreadModal() {
 							}
 							className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
 						>
-							Cancel
+							{t("common:actions.cancel")}
 						</button>
 						<button
 							type="submit"
@@ -274,10 +276,10 @@ export function AddToThreadModal() {
 							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"
 						>
 							{isSubmitting
-								? "Adding..."
+								? t("addToThread.adding")
 								: mode === "pick"
-									? "Add as Candidate"
-									: "Create & Add"}
+									? t("addToThread.addAsCandidate")
+									: t("addToThread.createAndAdd")}
 						</button>
 					</div>
 				</form>

src/client/components/CandidateCard.tsx

@@ -1,4 +1,5 @@
 import { useNavigate } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
 import { useFormatters } from "../hooks/useFormatters";
 import type { CandidateDelta } from "../hooks/useImpactDeltas";
 import { LucideIcon } from "../lib/iconData";
@@ -55,6 +56,7 @@ export function CandidateCard({
 	rank,
 	delta,
 }: CandidateCardProps) {
+	const { t } = useTranslation("threads");
 	const { weight, price } = useFormatters();
 	const navigate = useNavigate();
 	const openConfirmDeleteCandidate = useUIStore(
@@ -90,10 +92,10 @@ export function CandidateCard({
 						}
 					}}
 					className="absolute top-2 left-2 z-10 px-2 py-0.5 flex items-center gap-1 rounded-full text-xs font-medium bg-amber-100/90 text-amber-700 hover:bg-amber-200 opacity-0 group-hover:opacity-100 transition-all cursor-pointer"
-					title="Pick as winner"
+					title={t("candidateCard.pickAsWinner")}
 				>
 					<LucideIcon name="trophy" size={12} />
-					Winner
+					{t("candidateCard.winner")}
 				</span>
 			)}
 			<span
@@ -110,7 +112,7 @@ export function CandidateCard({
 					}
 				}}
 				className={`absolute top-2 ${productUrl ? "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-red-100 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-all cursor-pointer`}
-				title="Delete candidate"
+				title={t("candidateCard.deleteCandidate")}
 			>
 				<svg
 					className="w-3.5 h-3.5"
@@ -141,7 +143,7 @@ export function CandidateCard({
 						}
 					}}
 					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"
+					title={t("candidateCard.openProductLink")}
 				>
 					<svg
 						className="w-3.5 h-3.5"
@@ -214,7 +216,7 @@ export function CandidateCard({
 					<StatusBadge status={status} onStatusChange={onStatusChange} />
 					{(pros || cons) && (
 						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-50 text-purple-700">
-							+/- Notes
+							{t("candidateCard.prosCons")}
 						</span>
 					)}
 				</div>

src/client/components/CandidateForm.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useCreateCandidate, useUpdateCandidate } from "../hooks/useCandidates";
 import { useCurrency } from "../hooks/useCurrency";
 import { useThread } from "../hooks/useThreads";
@@ -42,6 +43,7 @@ export function CandidateForm({
 	candidateId,
 	onClose,
 }: CandidateFormProps) {
+	const { t } = useTranslation(["threads", "common"]);
 	const { data: thread } = useThread(threadId);
 	const { currency } = useCurrency();
 	const createCandidate = useCreateCandidate(threadId);
@@ -79,26 +81,26 @@ export function CandidateForm({
 	function validate(): boolean {
 		const newErrors: Record<string, string> = {};
 		if (!form.name.trim()) {
-			newErrors.name = "Name is required";
+			newErrors.name = t("common:errors.nameRequired");
 		}
 		if (
 			form.weightGrams &&
 			(Number.isNaN(Number(form.weightGrams)) || Number(form.weightGrams) < 0)
 		) {
-			newErrors.weightGrams = "Must be a positive number";
+			newErrors.weightGrams = t("common:errors.positiveNumber");
 		}
 		if (
 			form.priceDollars &&
 			(Number.isNaN(Number(form.priceDollars)) || Number(form.priceDollars) < 0)
 		) {
-			newErrors.priceDollars = "Must be a positive number";
+			newErrors.priceDollars = t("common:errors.positiveNumber");
 		}
 		if (
 			form.productUrl &&
 			form.productUrl.trim() !== "" &&
 			!form.productUrl.match(/^https?:\/\//)
 		) {
-			newErrors.productUrl = "Must be a valid URL (https://...)";
+			newErrors.productUrl = t("common:errors.validUrl");
 		}
 		setErrors(newErrors);
 		return Object.keys(newErrors).length === 0;
@@ -160,7 +162,7 @@ export function CandidateForm({
 					htmlFor="candidate-name"
 					className="block text-sm font-medium text-gray-700 mb-1"
 				>
-					Name *
+					{t("candidateForm.nameRequired")}
 				</label>
 				<input
 					id="candidate-name"
@@ -168,7 +170,7 @@ export function CandidateForm({
 					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-gray-400 focus:border-transparent"
-					placeholder="e.g. Osprey Talon 22"
+					placeholder={t("candidateForm.namePlaceholder")}
 				/>
 				{errors.name && (
 					<p className="mt-1 text-xs text-red-500">{errors.name}</p>
@@ -181,7 +183,7 @@ export function CandidateForm({
 					htmlFor="candidate-weight"
 					className="block text-sm font-medium text-gray-700 mb-1"
 				>
-					Weight (g)
+					{t("candidateForm.weightLabel")}
 				</label>
 				<input
 					id="candidate-weight"
@@ -193,7 +195,7 @@ export function CandidateForm({
 						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-gray-400 focus:border-transparent"
-					placeholder="e.g. 680"
+					placeholder={t("candidateForm.weightPlaceholder")}
 				/>
 				{errors.weightGrams && (
 					<p className="mt-1 text-xs text-red-500">{errors.weightGrams}</p>
@@ -218,7 +220,7 @@ export function CandidateForm({
 						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-gray-400 focus:border-transparent"
-					placeholder="e.g. 129.99"
+					placeholder={t("candidateForm.pricePlaceholder")}
 				/>
 				{errors.priceDollars && (
 					<p className="mt-1 text-xs text-red-500">{errors.priceDollars}</p>
@@ -228,7 +230,7 @@ export function CandidateForm({
 			{/* Category */}
 			<div>
 				<label className="block text-sm font-medium text-gray-700 mb-1">
-					Category
+					{t("candidateForm.categoryLabel")}
 				</label>
 				<CategoryPicker
 					value={form.categoryId}
@@ -242,7 +244,7 @@ export function CandidateForm({
 					htmlFor="candidate-notes"
 					className="block text-sm font-medium text-gray-700 mb-1"
 				>
-					Notes
+					{t("candidateForm.notesLabel")}
 				</label>
 				<textarea
 					id="candidate-notes"
@@ -250,7 +252,7 @@ export function CandidateForm({
 					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-gray-400 focus:border-transparent resize-none"
-					placeholder="Any additional notes..."
+					placeholder={t("candidateForm.notesPlaceholder")}
 				/>
 			</div>
 
@@ -260,7 +262,7 @@ export function CandidateForm({
 					htmlFor="candidate-pros"
 					className="block text-sm font-medium text-gray-700 mb-1"
 				>
-					Pros
+					{t("candidateForm.prosLabel")}
 				</label>
 				<textarea
 					id="candidate-pros"
@@ -268,7 +270,7 @@ export function CandidateForm({
 					onChange={(e) => setForm((f) => ({ ...f, pros: 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-gray-400 focus:border-transparent resize-none"
-					placeholder="One pro per line..."
+					placeholder={t("candidateForm.prosPlaceholder")}
 				/>
 			</div>
 
@@ -278,7 +280,7 @@ export function CandidateForm({
 					htmlFor="candidate-cons"
 					className="block text-sm font-medium text-gray-700 mb-1"
 				>
-					Cons
+					{t("candidateForm.consLabel")}
 				</label>
 				<textarea
 					id="candidate-cons"
@@ -286,7 +288,7 @@ export function CandidateForm({
 					onChange={(e) => setForm((f) => ({ ...f, cons: 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-gray-400 focus:border-transparent resize-none"
-					placeholder="One con per line..."
+					placeholder={t("candidateForm.consPlaceholder")}
 				/>
 			</div>
 
@@ -296,7 +298,7 @@ export function CandidateForm({
 					htmlFor="candidate-url"
 					className="block text-sm font-medium text-gray-700 mb-1"
 				>
-					Product Link
+					{t("candidateForm.productLinkLabel")}
 				</label>
 				<input
 					id="candidate-url"
@@ -306,7 +308,7 @@ export function CandidateForm({
 						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-gray-400 focus:border-transparent"
-					placeholder="https://..."
+					placeholder={t("candidateForm.urlPlaceholder")}
 				/>
 				{errors.productUrl && (
 					<p className="mt-1 text-xs text-red-500">{errors.productUrl}</p>
@@ -321,10 +323,10 @@ export function CandidateForm({
 					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..."
+						? t("common:actions.saving")
 						: mode === "add"
-							? "Add Candidate"
-							: "Save Changes"}
+							? t("candidateForm.addCandidate")
+							: t("candidateForm.saveChanges")}
 				</button>
 			</div>
 		</form>

src/client/components/CandidateListItem.tsx

@@ -1,6 +1,7 @@
 import { useNavigate } from "@tanstack/react-router";
 import { Reorder } from "framer-motion";
 import { useRef } from "react";
+import { useTranslation } from "react-i18next";
 import { useFormatters } from "../hooks/useFormatters";
 import type { CandidateDelta } from "../hooks/useImpactDeltas";
 import { LucideIcon } from "../lib/iconData";
@@ -61,6 +62,7 @@ export function CandidateListItem({
 	delta,
 	onDragEnd,
 }: CandidateListItemProps) {
+	const { t } = useTranslation("threads");
 	const isDragging = useRef(false);
 	const { weight, price } = useFormatters();
 	const navigate = useNavigate();
@@ -150,7 +152,7 @@ export function CandidateListItem({
 					/>
 					{(candidate.pros || candidate.cons) && (
 						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-50 text-purple-700">
-							+/- Notes
+							{t("candidateCard.prosCons")}
 						</span>
 					)}
 				</div>
@@ -166,10 +168,10 @@ export function CandidateListItem({
 							openResolveDialog(candidate.threadId, candidate.id);
 						}}
 						className="px-2 py-0.5 flex items-center gap-1 rounded-full text-xs font-medium bg-amber-100/90 text-amber-700 hover:bg-amber-200 cursor-pointer"
-						title="Pick as winner"
+						title={t("candidateCard.pickAsWinner")}
 					>
 						<LucideIcon name="trophy" size={12} />
-						Winner
+						{t("candidateCard.winner")}
 					</button>
 				)}
 				{candidate.productUrl && (
@@ -180,7 +182,7 @@ export function CandidateListItem({
 							openExternalLink(candidate.productUrl as string);
 						}}
 						className="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 cursor-pointer"
-						title="Open product link"
+						title={t("candidateCard.openProductLink")}
 					>
 						<svg
 							className="w-3.5 h-3.5"
@@ -204,7 +206,7 @@ export function CandidateListItem({
 						openConfirmDeleteCandidate(candidate.id);
 					}}
 					className="w-6 h-6 flex items-center justify-center rounded-full bg-gray-100/80 text-gray-400 hover:bg-red-100 hover:text-red-500 cursor-pointer"
-					title="Delete candidate"
+					title={t("candidateCard.deleteCandidate")}
 				>
 					<svg
 						className="w-3.5 h-3.5"

src/client/components/CategoryFilterDropdown.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { LucideIcon } from "../lib/iconData";
 
 interface CategoryFilterDropdownProps {
@@ -12,6 +13,7 @@ export function CategoryFilterDropdown({
 	onChange,
 	categories,
 }: CategoryFilterDropdownProps) {
+	const { t } = useTranslation("collection");
 	const [isOpen, setIsOpen] = useState(false);
 	const [searchText, setSearchText] = useState("");
 	const containerRef = useRef<HTMLDivElement>(null);
@@ -81,7 +83,7 @@ export function CategoryFilterDropdown({
 						<span className="text-gray-900">{selectedCategory.name}</span>
 					</>
 				) : (
-					<span className="text-gray-600">All categories</span>
+					<span className="text-gray-600">{t("categoryFilter.allCategories")}</span>
 				)}
 				{selectedCategory ? (
 					<button
@@ -131,7 +133,7 @@ export function CategoryFilterDropdown({
 						<input
 							ref={searchInputRef}
 							type="text"
-							placeholder="Search categories..."
+							placeholder={t("categoryFilter.searchPlaceholder")}
 							value={searchText}
 							onChange={(e) => setSearchText(e.target.value)}
 							className="w-full px-2.5 py-1.5 border border-gray-200 rounded text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
@@ -153,7 +155,7 @@ export function CategoryFilterDropdown({
 											: "text-gray-700"
 									}`}
 								>
-									All categories
+									{t("categoryFilter.allCategories")}
 								</button>
 							</li>
 						)}
@@ -187,7 +189,7 @@ export function CategoryFilterDropdown({
 								"all categories".includes(searchText.toLowerCase())
 							) && (
 								<li className="px-3 py-2 text-sm text-gray-400">
-									No categories found
+									{t("categoryFilter.noResults")}
 								</li>
 							)}
 					</ul>

src/client/components/CategoryHeader.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useDeleteCategory, useUpdateCategory } from "../hooks/useCategories";
 import { useFormatters } from "../hooks/useFormatters";
 import { LucideIcon } from "../lib/iconData";
@@ -21,6 +22,7 @@ export function CategoryHeader({
 	totalCost,
 	itemCount,
 }: CategoryHeaderProps) {
+	const { t } = useTranslation("collection");
 	const { weight, price } = useFormatters();
 	const [isEditing, setIsEditing] = useState(false);
 	const [editName, setEditName] = useState(name);
@@ -67,14 +69,14 @@ export function CategoryHeader({
 					onClick={handleSave}
 					className="text-sm text-gray-600 hover:text-gray-800 font-medium"
 				>
-					Save
+					{t("categoryHeader.save")}
 				</button>
 				<button
 					type="button"
 					onClick={() => setIsEditing(false)}
 					className="text-sm text-gray-400 hover:text-gray-600"
 				>
-					Cancel
+					{t("categoryHeader.cancel")}
 				</button>
 			</div>
 		);
@@ -85,7 +87,7 @@ export function CategoryHeader({
 			<LucideIcon name={icon} size={22} className="text-gray-500" />
 			<h2 className="text-lg font-semibold text-gray-900">{name}</h2>
 			<span className="text-sm text-gray-400">
-				{itemCount} {itemCount === 1 ? "item" : "items"} · {weight(totalWeight)}{" "}
+				{t("categoryHeader.itemCount", { count: itemCount })} · {weight(totalWeight)}{" "}
 				· {price(totalCost)}
 			</span>
 			{!isUncategorized && (

src/client/components/CategoryPicker.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useCategories, useCreateCategory } from "../hooks/useCategories";
 import { LucideIcon } from "../lib/iconData";
 import { IconPicker } from "./IconPicker";
@@ -9,6 +10,7 @@ interface CategoryPickerProps {
 }
 
 export function CategoryPicker({ value, onChange }: CategoryPickerProps) {
+	const { t } = useTranslation("collection");
 	const { data: categories = [] } = useCategories();
 	const createCategory = useCreateCategory();
 	const [inputValue, setInputValue] = useState("");
@@ -158,7 +160,7 @@ export function CategoryPicker({ value, onChange }: CategoryPickerProps) {
 					value={
 						isOpen ? inputValue : selectedCategory ? selectedCategory.name : ""
 					}
-					placeholder="Search or create category..."
+					placeholder={t("categoryPicker.searchOrCreate")}
 					onChange={(e) => {
 						setInputValue(e.target.value);
 						setIsOpen(true);
@@ -233,14 +235,14 @@ export function CategoryPicker({ value, onChange }: CategoryPickerProps) {
 									disabled={createCategory.isPending}
 									className="text-xs font-medium text-gray-600 hover:text-gray-800 disabled:opacity-50"
 								>
-									{createCategory.isPending ? "..." : "Create"}
+									{createCategory.isPending ? "..." : t("categoryPicker.create")}
 								</button>
 							</div>
 						</li>
 					)}
 					{filtered.length === 0 && !showCreateOption && (
 						<li className="px-3 py-2 text-sm text-gray-400">
-							No categories found
+							{t("categoryPicker.noCategories")}
 						</li>
 					)}
 				</ul>

src/client/components/CollectionView.tsx

@@ -1,4 +1,5 @@
 import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useCategories } from "../hooks/useCategories";
 import { useFormatters } from "../hooks/useFormatters";
 import { useItems } from "../hooks/useItems";
@@ -10,6 +11,7 @@ import { CategoryHeader } from "./CategoryHeader";
 import { ItemCard } from "./ItemCard";
 
 export function CollectionView() {
+	const { t } = useTranslation(["collection", "common"]);
 	const { data: items, isLoading: itemsLoading } = useItems();
 	const { data: totals } = useTotals();
 	const { data: categories } = useCategories();
@@ -58,11 +60,10 @@ export function CollectionView() {
 						/>
 					</div>
 					<h2 className="text-xl font-semibold text-gray-900 mb-2">
-						Your collection is empty
+						{t("collection:empty.title")}
 					</h2>
 					<p className="text-sm text-gray-500 mb-6">
-						Start cataloging your gear by adding your first item. Track weight,
-						price, and organize by category.
+						{t("collection:empty.description")}
 					</p>
 					<button
 						type="button"
@@ -83,7 +84,7 @@ export function CollectionView() {
 								d="M12 4v16m8-8H4"
 							/>
 						</svg>
-						Add your first item
+						{t("collection:empty.addFirst")}
 					</button>
 				</div>
 			</div>
@@ -136,14 +137,14 @@ export function CollectionView() {
 					<div className="flex items-center gap-8">
 						<div className="flex flex-col items-center gap-1">
 							<LucideIcon name="layers" size={14} className="text-gray-400" />
-							<span className="text-xs text-gray-500">Items</span>
+							<span className="text-xs text-gray-500">{t("common:stats.items")}</span>
 							<span className="text-sm font-semibold text-gray-900">
 								{totals.global.itemCount}
 							</span>
 						</div>
 						<div className="flex flex-col items-center gap-1">
 							<LucideIcon name="weight" size={14} className="text-gray-400" />
-							<span className="text-xs text-gray-500">Total Weight</span>
+							<span className="text-xs text-gray-500">{t("common:stats.totalWeight")}</span>
 							<span className="text-sm font-semibold text-gray-900">
 								{weight(totals.global.totalWeight)}
 							</span>
@@ -154,7 +155,7 @@ export function CollectionView() {
 								size={14}
 								className="text-gray-400"
 							/>
-							<span className="text-xs text-gray-500">Total Spent</span>
+							<span className="text-xs text-gray-500">{t("common:stats.totalSpent")}</span>
 							<span className="text-sm font-semibold text-gray-900">
 								{price(totals.global.totalCost)}
 							</span>
@@ -169,7 +170,7 @@ export function CollectionView() {
 					<div className="relative flex-1">
 						<input
 							type="text"
-							placeholder="Search items..."
+							placeholder={t("common:filter.searchItems")}
 							value={searchText}
 							onChange={(e) => setSearchText(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-gray-400 focus:border-transparent"
@@ -204,7 +205,7 @@ export function CollectionView() {
 				</div>
 				{hasActiveFilters && (
 					<p className="text-xs text-gray-500 mt-2">
-						Showing {filteredItems.length} of {items.length} items
+						{t("common:filter.showing", { filtered: filteredItems.length, total: items.length })}
 					</p>
 				)}
 			</div>
@@ -213,7 +214,7 @@ export function CollectionView() {
 			{hasActiveFilters ? (
 				filteredItems.length === 0 ? (
 					<div className="py-12 text-center">
-						<p className="text-sm text-gray-500">No items match your search</p>
+						<p className="text-sm text-gray-500">{t("common:empty.noItems")}</p>
 					</div>
 				) : (
 					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

src/client/components/ComparisonTable.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { useFormatters } from "../hooks/useFormatters";
 import type { CandidateDelta } from "../hooks/useImpactDeltas";
 import { LucideIcon } from "../lib/iconData";
@@ -33,17 +34,17 @@ interface ComparisonTableProps {
 	deltas?: Record<number, CandidateDelta>;
 }
 
-const STATUS_LABELS: Record<"researching" | "ordered" | "arrived", string> = {
-	researching: "Researching",
-	ordered: "Ordered",
-	arrived: "Arrived",
-};
-
 export function ComparisonTable({
 	candidates,
 	resolvedCandidateId,
 	deltas,
 }: ComparisonTableProps) {
+	const { t } = useTranslation("threads");
+	const STATUS_LABELS: Record<"researching" | "ordered" | "arrived", string> = {
+		researching: t("statusBadge.researching"),
+		ordered: t("statusBadge.ordered"),
+		arrived: t("statusBadge.arrived"),
+	};
 	const { weight, price } = useFormatters();
 	const openExternalLink = useUIStore((s) => s.openExternalLink);
 
@@ -113,7 +114,7 @@ export function ComparisonTable({
 	}> = [
 		{
 			key: "image",
-			label: "Image",
+			label: t("comparisonTable.image"),
 			render: (c) => (
 				<div
 					className="w-12 h-12 rounded-lg overflow-hidden flex items-center justify-center"
@@ -138,19 +139,19 @@ export function ComparisonTable({
 		},
 		{
 			key: "name",
-			label: "Name",
+			label: t("comparisonTable.name"),
 			render: (c) => (
 				<span className="text-sm font-medium text-gray-900">{c.name}</span>
 			),
 		},
 		{
 			key: "rank",
-			label: "Rank",
+			label: t("comparisonTable.rank"),
 			render: (_c, index) => <RankBadge rank={index + 1} />,
 		},
 		{
 			key: "weight",
-			label: "Weight",
+			label: t("comparisonTable.weight"),
 			render: (c) => {
 				const isBest = c.id === bestWeightId;
 				const delta = weightDeltas[c.id];
@@ -176,7 +177,7 @@ export function ComparisonTable({
 		},
 		{
 			key: "price",
-			label: "Price",
+			label: t("comparisonTable.price"),
 			render: (c) => {
 				const isBest = c.id === bestPriceId;
 				const delta = priceDeltas[c.id];
@@ -202,14 +203,14 @@ export function ComparisonTable({
 		},
 		{
 			key: "status",
-			label: "Status",
+			label: t("comparisonTable.status"),
 			render: (c) => (
 				<span className="text-xs text-gray-600">{STATUS_LABELS[c.status]}</span>
 			),
 		},
 		{
 			key: "link",
-			label: "Link",
+			label: t("comparisonTable.link"),
 			render: (c) =>
 				c.productUrl ? (
 					<button
@@ -217,7 +218,7 @@ export function ComparisonTable({
 						onClick={() => openExternalLink(c.productUrl as string)}
 						className="text-xs text-blue-500 hover:underline"
 					>
-						View
+						{t("comparisonTable.view")}
 					</button>
 				) : (
 					<span className="text-gray-300">—</span>
@@ -225,7 +226,7 @@ export function ComparisonTable({
 		},
 		{
 			key: "notes",
-			label: "Notes",
+			label: t("comparisonTable.notes"),
 			render: (c) =>
 				c.notes ? (
 					<p className="text-xs text-gray-700 whitespace-pre-line">{c.notes}</p>
@@ -235,7 +236,7 @@ export function ComparisonTable({
 		},
 		{
 			key: "pros",
-			label: "Pros",
+			label: t("comparisonTable.pros"),
 			render: (c) => {
 				if (!c.pros) return <span className="text-gray-300">—</span>;
 				const items = c.pros.split("\n").filter((s) => s.trim() !== "");
@@ -254,7 +255,7 @@ export function ComparisonTable({
 		},
 		{
 			key: "cons",
-			label: "Cons",
+			label: t("comparisonTable.cons"),
 			render: (c) => {
 				if (!c.cons) return <span className="text-gray-300">—</span>;
 				const items = c.cons.split("\n").filter((s) => s.trim() !== "");
@@ -342,7 +343,7 @@ export function ComparisonTable({
 						<>
 							<tr className="border-b border-gray-50">
 								<td className="sticky left-0 z-10 bg-white px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wide w-28">
-									Weight Impact
+									{t("comparisonTable.weightImpact")}
 								</td>
 								{candidates.map((candidate) => {
 									const isWinner = candidate.id === resolvedCandidateId;
@@ -362,7 +363,7 @@ export function ComparisonTable({
 							</tr>
 							<tr className="border-b border-gray-50">
 								<td className="sticky left-0 z-10 bg-white px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wide w-28">
-									Price Impact
+									{t("comparisonTable.priceImpact")}
 								</td>
 								{candidates.map((candidate) => {
 									const isWinner = candidate.id === resolvedCandidateId;

src/client/components/CreateThreadModal.tsx

@@ -1,9 +1,11 @@
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useCategories } from "../hooks/useCategories";
 import { useCreateThread } from "../hooks/useThreads";
 import { useUIStore } from "../stores/uiStore";
 
 export function CreateThreadModal() {
+	const { t } = useTranslation(["threads", "common"]);
 	const isOpen = useUIStore((s) => s.createThreadModalOpen);
 	const closeModal = useUIStore((s) => s.closeCreateThreadModal);
 
@@ -38,11 +40,11 @@ export function CreateThreadModal() {
 		e.preventDefault();
 		const trimmed = name.trim();
 		if (!trimmed) {
-			setError("Thread name is required");
+			setError(t("create.nameRequired"));
 			return;
 		}
 		if (categoryId === null) {
-			setError("Please select a category");
+			setError(t("create.selectCategory"));
 			return;
 		}
 		setError(null);
@@ -55,7 +57,7 @@ export function CreateThreadModal() {
 				},
 				onError: (err) => {
 					setError(
-						err instanceof Error ? err.message : "Failed to create thread",
+						err instanceof Error ? err.message : t("create.createFailed"),
 					);
 				},
 			},
@@ -77,7 +79,7 @@ export function CreateThreadModal() {
 				onClick={(e) => e.stopPropagation()}
 				onKeyDown={() => {}}
 			>
-				<h2 className="text-lg font-semibold text-gray-900 mb-4">New Thread</h2>
+				<h2 className="text-lg font-semibold text-gray-900 mb-4">{t("create.title")}</h2>
 
 				<form onSubmit={handleSubmit} className="space-y-4">
 					<div>
@@ -85,14 +87,14 @@ export function CreateThreadModal() {
 							htmlFor="thread-name"
 							className="block text-sm font-medium text-gray-700 mb-1"
 						>
-							Thread name
+							{t("create.threadName")}
 						</label>
 						<input
 							id="thread-name"
 							type="text"
 							value={name}
 							onChange={(e) => setName(e.target.value)}
-							placeholder="e.g. Lightweight sleeping bag"
+							placeholder={t("create.namePlaceholder")}
 							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>
@@ -102,7 +104,7 @@ export function CreateThreadModal() {
 							htmlFor="thread-category"
 							className="block text-sm font-medium text-gray-700 mb-1"
 						>
-							Category
+							{t("create.category")}
 						</label>
 						<select
 							id="thread-category"
@@ -126,14 +128,14 @@ export function CreateThreadModal() {
 							onClick={handleClose}
 							className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
 						>
-							Cancel
+							{t("common:actions.cancel")}
 						</button>
 						<button
 							type="submit"
 							disabled={createThread.isPending}
 							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"}
+							{createThread.isPending ? t("common:actions.creating") : t("create.createThread")}
 						</button>
 					</div>
 				</form>

src/client/components/ItemCard.tsx

@@ -1,4 +1,5 @@
 import { useNavigate } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
 import { useFormatters } from "../hooks/useFormatters";
 import { useDuplicateItem } from "../hooks/useItems";
 import { LucideIcon } from "../lib/iconData";
@@ -51,6 +52,7 @@ export function ItemCard({
 	linkTo,
 	priceCurrency,
 }: ItemCardProps) {
+	const { t } = useTranslation("collection");
 	const { weight, price } = useFormatters();
 	const navigate = useNavigate();
 	const openExternalLink = useUIStore((s) => s.openExternalLink);
@@ -102,7 +104,7 @@ export function ItemCard({
 						}
 					}}
 					className={`absolute top-2 ${productUrl ? "right-10" : "right-2"} z-10 w-6 h-6 flex items-center justify-center rounded-full bg-gray-100/80 text-gray-400 hover:bg-blue-100 hover:text-blue-500 opacity-0 group-hover:opacity-100 transition-all cursor-pointer`}
-					title="Duplicate item"
+					title={t("itemCard.duplicateItem")}
 				>
 					<svg
 						className="w-3.5 h-3.5"
@@ -134,7 +136,7 @@ export function ItemCard({
 						}
 					}}
 					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"
+					title={t("itemCard.openProductLink")}
 				>
 					<svg
 						className="w-3.5 h-3.5"
@@ -166,7 +168,7 @@ export function ItemCard({
 						}
 					}}
 					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-red-100 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-all cursor-pointer"
-					title="Remove from setup"
+					title={t("itemCard.removeFromSetup")}
 				>
 					<svg
 						className="w-3.5 h-3.5"

src/client/components/ItemForm.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useCurrency } from "../hooks/useCurrency";
 import { useCreateItem, useItems, useUpdateItem } from "../hooks/useItems";
 import { useUIStore } from "../stores/uiStore";
@@ -34,6 +35,7 @@ const INITIAL_FORM: FormData = {
 };
 
 export function ItemForm({ mode, itemId, onClose }: ItemFormProps) {
+	const { t } = useTranslation(["collection", "common"]);
 	const { data: items } = useItems();
 	const { currency } = useCurrency();
 	const createItem = useCreateItem();
@@ -68,26 +70,26 @@ export function ItemForm({ mode, itemId, onClose }: ItemFormProps) {
 	function validate(): boolean {
 		const newErrors: Record<string, string> = {};
 		if (!form.name.trim()) {
-			newErrors.name = "Name is required";
+			newErrors.name = t("common:errors.nameRequired");
 		}
 		if (
 			form.weightGrams &&
 			(Number.isNaN(Number(form.weightGrams)) || Number(form.weightGrams) < 0)
 		) {
-			newErrors.weightGrams = "Must be a positive number";
+			newErrors.weightGrams = t("common:errors.positiveNumber");
 		}
 		if (
 			form.priceDollars &&
 			(Number.isNaN(Number(form.priceDollars)) || Number(form.priceDollars) < 0)
 		) {
-			newErrors.priceDollars = "Must be a positive number";
+			newErrors.priceDollars = t("common:errors.positiveNumber");
 		}
 		if (
 			form.productUrl &&
 			form.productUrl.trim() !== "" &&
 			!form.productUrl.match(/^https?:\/\//)
 		) {
-			newErrors.productUrl = "Must be a valid URL (https://...)";
+			newErrors.productUrl = t("common:errors.validUrl");
 		}
 		setErrors(newErrors);
 		return Object.keys(newErrors).length === 0;
@@ -148,7 +150,7 @@ export function ItemForm({ mode, itemId, onClose }: ItemFormProps) {
 					htmlFor="item-name"
 					className="block text-sm font-medium text-gray-700 mb-1"
 				>
-					Name *
+					{t("collection:form.nameRequired")}
 				</label>
 				<input
 					id="item-name"
@@ -156,7 +158,7 @@ export function ItemForm({ mode, itemId, onClose }: ItemFormProps) {
 					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-gray-400 focus:border-transparent"
-					placeholder="e.g. Osprey Talon 22"
+					placeholder={t("collection:form.namePlaceholder")}
 				/>
 				{errors.name && (
 					<p className="mt-1 text-xs text-red-500">{errors.name}</p>
@@ -169,7 +171,7 @@ export function ItemForm({ mode, itemId, onClose }: ItemFormProps) {
 					htmlFor="item-weight"
 					className="block text-sm font-medium text-gray-700 mb-1"
 				>
-					Weight (g)
+					{t("collection:form.weight")}
 				</label>
 				<input
 					id="item-weight"
@@ -181,7 +183,7 @@ export function ItemForm({ mode, itemId, onClose }: ItemFormProps) {
 						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-gray-400 focus:border-transparent"
-					placeholder="e.g. 680"
+					placeholder={t("collection:form.weightPlaceholder")}
 				/>
 				{errors.weightGrams && (
 					<p className="mt-1 text-xs text-red-500">{errors.weightGrams}</p>
@@ -194,7 +196,7 @@ export function ItemForm({ mode, itemId, onClose }: ItemFormProps) {
 					htmlFor="item-price"
 					className="block text-sm font-medium text-gray-700 mb-1"
 				>
-					{`Price (${currency})`}
+					{`${t("collection:form.price")} (${currency})`}
 				</label>
 				<input
 					id="item-price"
@@ -206,7 +208,7 @@ export function ItemForm({ mode, itemId, onClose }: ItemFormProps) {
 						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-gray-400 focus:border-transparent"
-					placeholder="e.g. 129.99"
+					placeholder={t("collection:form.pricePlaceholder")}
 				/>
 				{errors.priceDollars && (
 					<p className="mt-1 text-xs text-red-500">{errors.priceDollars}</p>
@@ -219,7 +221,7 @@ export function ItemForm({ mode, itemId, onClose }: ItemFormProps) {
 					htmlFor="item-quantity"
 					className="block text-sm font-medium text-gray-700 mb-1"
 				>
-					Quantity
+					{t("collection:form.quantity")}
 				</label>
 				<input
 					id="item-quantity"
@@ -240,7 +242,7 @@ export function ItemForm({ mode, itemId, onClose }: ItemFormProps) {
 			{/* Category */}
 			<div>
 				<label className="block text-sm font-medium text-gray-700 mb-1">
-					Category
+					{t("collection:form.category")}
 				</label>
 				<CategoryPicker
 					value={form.categoryId}
@@ -254,7 +256,7 @@ export function ItemForm({ mode, itemId, onClose }: ItemFormProps) {
 					htmlFor="item-notes"
 					className="block text-sm font-medium text-gray-700 mb-1"
 				>
-					Notes
+					{t("collection:form.notes")}
 				</label>
 				<textarea
 					id="item-notes"
@@ -262,7 +264,7 @@ export function ItemForm({ mode, itemId, onClose }: ItemFormProps) {
 					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-gray-400 focus:border-transparent resize-none"
-					placeholder="Any additional notes..."
+					placeholder={t("collection:form.notesPlaceholder")}
 				/>
 			</div>
 
@@ -272,7 +274,7 @@ export function ItemForm({ mode, itemId, onClose }: ItemFormProps) {
 					htmlFor="item-url"
 					className="block text-sm font-medium text-gray-700 mb-1"
 				>
-					Product Link
+					{t("collection:form.productLink")}
 				</label>
 				<input
 					id="item-url"
@@ -282,7 +284,7 @@ export function ItemForm({ mode, itemId, onClose }: ItemFormProps) {
 						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-gray-400 focus:border-transparent"
-					placeholder="https://..."
+					placeholder={t("collection:form.urlPlaceholder")}
 				/>
 				{errors.productUrl && (
 					<p className="mt-1 text-xs text-red-500">{errors.productUrl}</p>
@@ -297,10 +299,10 @@ export function ItemForm({ mode, itemId, onClose }: ItemFormProps) {
 					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..."
+						? t("common:actions.saving")
 						: mode === "add"
-							? "Add Item"
-							: "Save Changes"}
+							? t("common:actions.addItem")
+							: t("common:actions.saveChanges")}
 				</button>
 				{mode === "edit" && itemId != null && (
 					<button
@@ -308,7 +310,7 @@ export function ItemForm({ mode, itemId, onClose }: ItemFormProps) {
 						onClick={() => openConfirmDelete(itemId)}
 						className="py-2.5 px-4 text-red-600 hover:bg-red-50 text-sm font-medium rounded-lg transition-colors"
 					>
-						Delete
+						{t("common:actions.delete")}
 					</button>
 				)}
 			</div>

src/client/components/ItemPicker.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useFormatters } from "../hooks/useFormatters";
 import { useItems } from "../hooks/useItems";
 import { useSyncSetupItems } from "../hooks/useSetups";
@@ -18,6 +19,7 @@ export function ItemPicker({
 	isOpen,
 	onClose,
 }: ItemPickerProps) {
+	const { t } = useTranslation(["collection", "common"]);
 	const { data: items } = useItems();
 	const syncItems = useSyncSetupItems(setupId);
 	const { weight, price } = useFormatters();
@@ -74,13 +76,13 @@ export function ItemPicker({
 	}
 
 	return (
-		<SlideOutPanel isOpen={isOpen} onClose={onClose} title="Select Items">
+		<SlideOutPanel isOpen={isOpen} onClose={onClose} title={t("collection:itemPicker.title")}>
 			<div className="flex flex-col h-full">
 				<div className="flex-1 overflow-y-auto -mx-6 px-6">
 					{!items || items.length === 0 ? (
 						<div className="py-8 text-center">
 							<p className="text-sm text-gray-500">
-								No items in your collection yet.
+								{t("collection:itemPicker.noItems")}
 							</p>
 						</div>
 					) : (
@@ -136,7 +138,7 @@ export function ItemPicker({
 						onClick={onClose}
 						className="flex-1 px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
 					>
-						Cancel
+						{t("common:actions.cancel")}
 					</button>
 					<button
 						type="button"
@@ -144,7 +146,7 @@ export function ItemPicker({
 						disabled={syncItems.isPending}
 						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"}
+						{syncItems.isPending ? t("common:actions.saving") : t("collection:itemPicker.done")}
 					</button>
 				</div>
 			</div>

src/client/components/LinkToGlobalItem.tsx

@@ -1,5 +1,6 @@
 import { Link } from "@tanstack/react-router";
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import {
 	useGlobalItem,
 	useGlobalItems,
@@ -17,6 +18,7 @@ export function LinkToGlobalItem({
 	itemId,
 	linkedGlobalItemId,
 }: LinkToGlobalItemProps) {
+	const { t } = useTranslation("collection");
 	const [isOpen, setIsOpen] = useState(false);
 	const [searchInput, setSearchInput] = useState("");
 	const [debouncedQuery, setDebouncedQuery] = useState("");
@@ -85,7 +87,7 @@ export function LinkToGlobalItem({
 						disabled={unlinkItem.isPending}
 						className="text-xs text-gray-400 hover:text-red-500 transition-colors shrink-0"
 					>
-						{unlinkItem.isPending ? "..." : "Unlink"}
+						{unlinkItem.isPending ? "..." : t("linkToGlobal.unlink")}
 					</button>
 				</div>
 			</div>
@@ -113,7 +115,7 @@ export function LinkToGlobalItem({
 						d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
 					/>
 				</svg>
-				Link to catalog
+				{t("linkToGlobal.linkToCatalog")}
 			</button>
 		);
 	}
@@ -124,7 +126,7 @@ export function LinkToGlobalItem({
 			<div className="p-3">
 				<div className="flex items-center justify-between mb-2">
 					<span className="text-xs font-medium text-gray-500">
-						Link to global catalog
+						{t("linkToGlobal.linkToGlobalCatalog")}
 					</span>
 					<button
 						type="button"
@@ -154,7 +156,7 @@ export function LinkToGlobalItem({
 					type="text"
 					value={searchInput}
 					onChange={(e) => setSearchInput(e.target.value)}
-					placeholder="Search by brand or model..."
+					placeholder={t("linkToGlobal.searchPlaceholder")}
 					className="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-md text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:border-gray-300"
 					autoFocus
 				/>
@@ -165,7 +167,7 @@ export function LinkToGlobalItem({
 				<div className="border-t border-gray-100 max-h-48 overflow-y-auto">
 					{isSearching ? (
 						<div className="p-3 text-center">
-							<span className="text-xs text-gray-400">Searching...</span>
+							<span className="text-xs text-gray-400">{t("linkToGlobal.searching")}</span>
 						</div>
 					) : searchResults && searchResults.length > 0 ? (
 						<div>
@@ -195,7 +197,7 @@ export function LinkToGlobalItem({
 						</div>
 					) : (
 						<div className="p-3 text-center">
-							<span className="text-xs text-gray-400">No items found</span>
+							<span className="text-xs text-gray-400">{t("linkToGlobal.noItemsFound")}</span>
 						</div>
 					)}
 				</div>

src/client/components/ManualEntryForm.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useCategories } from "../hooks/useCategories";
 import { useCurrency } from "../hooks/useCurrency";
 import { useCreateItem } from "../hooks/useItems";
@@ -14,6 +15,7 @@ export function ManualEntryForm({
 	initialName,
 	onSuccess,
 }: ManualEntryFormProps) {
+	const { t } = useTranslation(["collection", "common"]);
 	const { data: categories } = useCategories();
 	const { currency } = useCurrency();
 	const createItem = useCreateItem();
@@ -39,11 +41,11 @@ export function ManualEntryForm({
 		e.preventDefault();
 
 		if (!name.trim()) {
-			setError("Name is required");
+			setError(t("collection:manualEntry.nameRequired"));
 			return;
 		}
 		if (categoryId === null) {
-			setError("Please select a category");
+			setError(t("collection:manualEntry.selectCategory"));
 			return;
 		}
 
@@ -69,7 +71,7 @@ export function ManualEntryForm({
 					onSuccess(item.name);
 				},
 				onError: (err) => {
-					setError(err instanceof Error ? err.message : "Failed to save");
+					setError(err instanceof Error ? err.message : t("collection:manualEntry.failedToSave"));
 				},
 			},
 		);
@@ -92,14 +94,14 @@ export function ManualEntryForm({
 						htmlFor="manual-name"
 						className="block text-sm font-medium text-gray-700 mb-1"
 					>
-						Name <span className="text-red-500">*</span>
+						{t("collection:form.name")} <span className="text-red-500">*</span>
 					</label>
 					<input
 						id="manual-name"
 						type="text"
 						value={name}
 						onChange={(e) => setName(e.target.value)}
-						placeholder="Item name"
+						placeholder={t("collection:manualEntry.namePlaceholder")}
 						required
 						className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
 					/>
@@ -108,7 +110,7 @@ export function ManualEntryForm({
 				{/* Category */}
 				<div>
 					<label className="block text-sm font-medium text-gray-700 mb-1">
-						Category
+						{t("collection:form.category")}
 					</label>
 					<CategoryPicker
 						value={categoryId ?? 0}
@@ -123,7 +125,7 @@ export function ManualEntryForm({
 							htmlFor="manual-weight"
 							className="block text-sm font-medium text-gray-700 mb-1"
 						>
-							Weight (g)
+							{t("collection:manualEntry.weightLabel")}
 						</label>
 						<input
 							id="manual-weight"
@@ -141,7 +143,7 @@ export function ManualEntryForm({
 							htmlFor="manual-price"
 							className="block text-sm font-medium text-gray-700 mb-1"
 						>
-							MSRP ($)
+							{t("collection:manualEntry.msrpLabel")}
 						</label>
 						<input
 							id="manual-price"
@@ -162,7 +164,7 @@ export function ManualEntryForm({
 						htmlFor="manual-purchase-price"
 						className="block text-sm font-medium text-gray-700 mb-1"
 					>
-						{`Purchase Price (${currency})`}
+						{`${t("collection:manualEntry.purchasePrice")} (${currency})`}
 					</label>
 					<input
 						id="manual-purchase-price"
@@ -182,14 +184,14 @@ export function ManualEntryForm({
 						htmlFor="manual-product-url"
 						className="block text-sm font-medium text-gray-700 mb-1"
 					>
-						Product Link
+						{t("collection:manualEntry.productLink")}
 					</label>
 					<input
 						id="manual-product-url"
 						type="url"
 						value={productUrl}
 						onChange={(e) => setProductUrl(e.target.value)}
-						placeholder="https://..."
+						placeholder={t("collection:form.urlPlaceholder")}
 						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>
@@ -200,13 +202,13 @@ export function ManualEntryForm({
 						htmlFor="manual-notes"
 						className="block text-sm font-medium text-gray-700 mb-1"
 					>
-						Notes
+						{t("collection:manualEntry.notesLabel")}
 					</label>
 					<textarea
 						id="manual-notes"
 						value={notes}
 						onChange={(e) => setNotes(e.target.value)}
-						placeholder="Optional notes..."
+						placeholder={t("collection:manualEntry.optionalNotes")}
 						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-gray-400 focus:border-transparent resize-none"
 					/>
@@ -221,7 +223,7 @@ export function ManualEntryForm({
 					disabled={createItem.isPending || !name.trim() || categoryId === null}
 					className="w-full px-4 py-2.5 text-sm font-medium text-white bg-gray-900 rounded-lg hover:bg-gray-800 disabled:opacity-50 transition-colors"
 				>
-					{createItem.isPending ? "Saving..." : "Add to Collection"}
+					{createItem.isPending ? t("common:actions.saving") : t("collection:manualEntry.addToCollection")}
 				</button>
 			</form>
 		</div>

src/client/components/ProfileSection.tsx

@@ -1,9 +1,11 @@
 import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useAuth } from "../hooks/useAuth";
 import { usePublicProfile, useUpdateProfile } from "../hooks/useProfile";
 import { apiUpload } from "../lib/api";
 
 export function ProfileSection() {
+	const { t } = useTranslation(["collection", "common"]);
 	const { data: auth } = useAuth();
 	const userId = auth?.user?.id ?? null;
 	const { data: profile } = usePublicProfile(userId);
@@ -40,7 +42,7 @@ export function ProfileSection() {
 				bio: bio.trim() || undefined,
 			});
 			setDirty(false);
-			setMessage({ type: "success", text: "Profile updated" });
+			setMessage({ type: "success", text: t("profileSection.profileUpdated") });
 		} catch (err) {
 			setMessage({ type: "error", text: (err as Error).message });
 		}
@@ -56,12 +58,12 @@ export function ProfileSection() {
 		if (!accepted.includes(file.type)) {
 			setMessage({
 				type: "error",
-				text: "Please select a JPG, PNG, or WebP image.",
+				text: t("common:imageUpload.invalidType"),
 			});
 			return;
 		}
 		if (file.size > maxSize) {
-			setMessage({ type: "error", text: "Image must be under 5MB." });
+			setMessage({ type: "error", text: t("common:imageUpload.tooLarge") });
 			return;
 		}
 
@@ -75,7 +77,7 @@ export function ProfileSection() {
 			setDirty(true);
 		} catch {
 			setAvatarDisplayUrl(null);
-			setMessage({ type: "error", text: "Avatar upload failed." });
+			setMessage({ type: "error", text: t("collection:profileSection.avatarUploadFailed") });
 		} finally {
 			setUploading(false);
 			if (fileInputRef.current) fileInputRef.current.value = "";
@@ -85,9 +87,9 @@ export function ProfileSection() {
 	return (
 		<form onSubmit={handleSave} className="space-y-4">
 			<div>
-				<h3 className="text-sm font-medium text-gray-900">Profile</h3>
+				<h3 className="text-sm font-medium text-gray-900">{t("collection:profileSection.title")}</h3>
 				<p className="text-xs text-gray-500 mt-0.5">
-					Your public profile information
+					{t("collection:profileSection.subtitle")}
 				</p>
 			</div>
 
@@ -148,7 +150,7 @@ export function ProfileSection() {
 						disabled={uploading}
 						className="text-sm text-gray-600 hover:text-gray-800 transition-colors"
 					>
-						{uploading ? "Uploading..." : "Change avatar"}
+						{uploading ? t("collection:profileSection.uploadingAvatar") : t("collection:profileSection.changeAvatar")}
 					</button>
 					{avatarFilename && (
 						<button
@@ -160,7 +162,7 @@ export function ProfileSection() {
 							}}
 							className="block text-xs text-red-500 hover:text-red-700 mt-0.5"
 						>
-							Remove
+							{t("collection:profileSection.removeAvatar")}
 						</button>
 					)}
 				</div>
@@ -179,7 +181,7 @@ export function ProfileSection() {
 					htmlFor="displayName"
 					className="block text-sm font-medium text-gray-700 mb-1"
 				>
-					Display Name
+					{t("collection:profileSection.displayName")}
 				</label>
 				<input
 					id="displayName"
@@ -201,7 +203,7 @@ export function ProfileSection() {
 					htmlFor="bio"
 					className="block text-sm font-medium text-gray-700 mb-1"
 				>
-					Bio
+					{t("collection:profileSection.bio")}
 				</label>
 				<textarea
 					id="bio"
@@ -233,7 +235,7 @@ export function ProfileSection() {
 				disabled={updateProfile.isPending}
 				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"
 			>
-				{updateProfile.isPending ? "Saving..." : "Save Profile"}
+				{updateProfile.isPending ? t("common:actions.saving") : t("collection:profileSection.saveProfile")}
 			</button>
 		</form>
 	);

src/client/components/StatusBadge.tsx

@@ -1,13 +1,14 @@
 import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { LucideIcon } from "../lib/iconData";
 
-const STATUS_CONFIG = {
-	researching: { icon: "search", label: "Researching" },
-	ordered: { icon: "truck", label: "Ordered" },
-	arrived: { icon: "check", label: "Arrived" },
+const STATUS_ICONS = {
+	researching: "search",
+	ordered: "truck",
+	arrived: "check",
 } as const;
 
-type CandidateStatus = keyof typeof STATUS_CONFIG;
+type CandidateStatus = keyof typeof STATUS_ICONS;
 
 interface StatusBadgeProps {
 	status: CandidateStatus;
@@ -15,10 +16,15 @@ interface StatusBadgeProps {
 }
 
 export function StatusBadge({ status, onStatusChange }: StatusBadgeProps) {
+	const { t } = useTranslation("threads");
 	const [isOpen, setIsOpen] = useState(false);
 	const containerRef = useRef<HTMLDivElement>(null);
 
-	const config = STATUS_CONFIG[status];
+	const STATUS_LABELS: Record<CandidateStatus, string> = {
+		researching: t("statusBadge.researching"),
+		ordered: t("statusBadge.ordered"),
+		arrived: t("statusBadge.arrived"),
+	};
 
 	useEffect(() => {
 		if (!isOpen) return;
@@ -56,14 +62,13 @@ export function StatusBadge({ status, onStatusChange }: StatusBadgeProps) {
 				}}
 				className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors cursor-pointer"
 			>
-				<LucideIcon name={config.icon} size={14} className="text-gray-500" />
-				{config.label}
+				<LucideIcon name={STATUS_ICONS[status]} size={14} className="text-gray-500" />
+				{STATUS_LABELS[status]}
 			</button>
 
 			{isOpen && (
 				<div className="absolute right-0 top-full mt-1 z-20 bg-white border border-gray-200 rounded-lg shadow-lg py-1 min-w-[150px]">
-					{(Object.keys(STATUS_CONFIG) as CandidateStatus[]).map((key) => {
-						const option = STATUS_CONFIG[key];
+					{(Object.keys(STATUS_ICONS) as CandidateStatus[]).map((key) => {
 						const isActive = key === status;
 						return (
 							<button
@@ -79,12 +84,12 @@ export function StatusBadge({ status, onStatusChange }: StatusBadgeProps) {
 								}`}
 							>
 								<LucideIcon
-									name={option.icon}
+									name={STATUS_ICONS[key]}
 									size={14}
 									className={isActive ? "text-gray-700" : "text-gray-400"}
 								/>
 								<span className={isActive ? "text-gray-900" : "text-gray-600"}>
-									{option.label}
+									{STATUS_LABELS[key]}
 								</span>
 								{isActive && (
 									<LucideIcon

src/client/components/WeightSummaryCard.tsx

@@ -7,6 +7,7 @@ import {
 	ResponsiveContainer,
 	Tooltip,
 } from "recharts";
+import { useTranslation } from "react-i18next";
 import { useFormatters } from "../hooks/useFormatters";
 import type { SetupItemWithCategory } from "../hooks/useSetups";
 import { formatWeight, type WeightUnit } from "../lib/formatters";
@@ -150,6 +151,7 @@ function LegendRow({
 }
 
 export function WeightSummaryCard({ items }: WeightSummaryCardProps) {
+	const { t } = useTranslation("collection");
 	const { unit } = useFormatters();
 	const [viewMode, setViewMode] = useState<ViewMode>("category");
 
@@ -192,9 +194,9 @@ export function WeightSummaryCard({ items }: WeightSummaryCardProps) {
 		return (
 			<div className="bg-white rounded-xl border border-gray-100 p-5 mb-6">
 				<h3 className="text-sm font-medium text-gray-700 mb-2">
-					Weight Summary
+					{t("weightSummary.title")}
 				</h3>
-				<p className="text-sm text-gray-400">No weight data to display</p>
+				<p className="text-sm text-gray-400">{t("weightSummary.noData")}</p>
 			</div>
 		);
 	}
@@ -203,7 +205,7 @@ export function WeightSummaryCard({ items }: WeightSummaryCardProps) {
 		<div className="bg-white rounded-xl border border-gray-100 p-5 mb-6">
 			{/* Header with pill toggle */}
 			<div className="flex items-center justify-between mb-4">
-				<h3 className="text-sm font-medium text-gray-700">Weight Summary</h3>
+				<h3 className="text-sm font-medium text-gray-700">{t("weightSummary.title")}</h3>
 				<div className="flex items-center gap-1 bg-gray-100 rounded-full px-1 py-0.5">
 					{VIEW_MODES.map((mode) => (
 						<button
@@ -216,7 +218,7 @@ export function WeightSummaryCard({ items }: WeightSummaryCardProps) {
 									: "text-gray-400 hover:text-gray-600"
 							}`}
 						>
-							{mode === "category" ? "Category" : "Classification"}
+							{mode === "category" ? t("weightSummary.category") : t("weightSummary.classification")}
 						</button>
 					))}
 				</div>
@@ -260,21 +262,21 @@ export function WeightSummaryCard({ items }: WeightSummaryCardProps) {
 				<div className="flex-1 flex flex-col justify-center min-w-0">
 					<LegendRow
 						color="#6b7280"
-						label="Base Weight"
+						label={t("weightSummary.baseWeight")}
 						weight={baseWeight}
 						unit={unit}
 						percent={totalWeight > 0 ? baseWeight / totalWeight : undefined}
 					/>
 					<LegendRow
 						color="#9ca3af"
-						label="Worn"
+						label={t("weightSummary.worn")}
 						weight={wornWeight}
 						unit={unit}
 						percent={totalWeight > 0 ? wornWeight / totalWeight : undefined}
 					/>
 					<LegendRow
 						color="#d1d5db"
-						label="Consumable"
+						label={t("weightSummary.consumable")}
 						weight={consumableWeight}
 						unit={unit}
 						percent={
@@ -289,7 +291,7 @@ export function WeightSummaryCard({ items }: WeightSummaryCardProps) {
 								className="text-gray-400 shrink-0 ml-0.5"
 							/>
 							<span className="text-sm font-medium text-gray-700 flex-1">
-								Total
+								{t("weightSummary.total")}
 							</span>
 							<span className="text-sm font-bold text-gray-900 tabular-nums">
 								{formatWeight(totalWeight, unit)}

src/client/lib/i18n.ts

@@ -1,12 +1,14 @@
 import i18n from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
 import { initReactI18next } from "react-i18next";
+import deCatalog from "../locales/de/catalog.json";
 import deCollection from "../locales/de/collection.json";
 import deCommon from "../locales/de/common.json";
 import deOnboarding from "../locales/de/onboarding.json";
 import deSettings from "../locales/de/settings.json";
 import deSetups from "../locales/de/setups.json";
 import deThreads from "../locales/de/threads.json";
+import enCatalog from "../locales/en/catalog.json";
 import enCollection from "../locales/en/collection.json";
 import enCommon from "../locales/en/common.json";
 import enOnboarding from "../locales/en/onboarding.json";
@@ -26,6 +28,7 @@ i18n
 				setups: enSetups,
 				onboarding: enOnboarding,
 				settings: enSettings,
+				catalog: enCatalog,
 			},
 			de: {
 				common: deCommon,
@@ -34,6 +37,7 @@ i18n
 				setups: deSetups,
 				onboarding: deOnboarding,
 				settings: deSettings,
+				catalog: deCatalog,
 			},
 		},
 		supportedLngs: ["en", "de"],

src/client/locales/de/catalog.json

@@ -0,0 +1,21 @@
+{
+	"discover": "Entdecken",
+	"searchPlaceholder": "Katalog durchsuchen...",
+	"filter": {
+		"tags": "Tags",
+		"weight": "Gewicht",
+		"price": "Preis",
+		"weightRange": "Gewichtsbereich",
+		"priceRange": "Preisbereich",
+		"min": "Min: {{value}}",
+		"max": "Max: {{value}}",
+		"reset": "Zurücksetzen",
+		"clearAll": "Alle löschen",
+		"listView": "Listenansicht",
+		"gridView": "Gitteransicht"
+	},
+	"empty": {
+		"noResults": "Keine Artikel gefunden",
+		"noCatalogItems": "Noch keine Artikel im globalen Katalog"
+	}
+}

src/client/locales/de/collection.json

@@ -39,5 +39,106 @@
 		"base": "Basisgewicht",
 		"worn": "Getragen",
 		"consumable": "Verbrauchsmaterial"
+	},
+	"categoryPicker": {
+		"searchOrCreate": "Kategorie suchen oder erstellen...",
+		"create": "Erstellen",
+		"noCategories": "Keine Kategorien gefunden"
+	},
+	"categoryFilter": {
+		"allCategories": "Alle Kategorien",
+		"searchPlaceholder": "Kategorien suchen...",
+		"noResults": "Keine Kategorien gefunden"
+	},
+	"weightSummary": {
+		"title": "Gewichtsübersicht",
+		"noData": "Keine Gewichtsdaten verfügbar",
+		"baseWeight": "Basisgewicht",
+		"worn": "Getragen",
+		"consumable": "Verbrauchsmaterial",
+		"total": "Gesamt",
+		"category": "Kategorie",
+		"classification": "Klassifikation"
+	},
+	"itemPicker": {
+		"title": "Gegenstände auswählen",
+		"noItems": "Noch keine Gegenstände in Ihrer Sammlung.",
+		"done": "Fertig"
+	},
+	"categoryHeader": {
+		"itemCount": "{{count}} Gegenstände",
+		"itemCount_one": "{{count}} Gegenstand",
+		"save": "Speichern",
+		"cancel": "Abbrechen"
+	},
+	"linkToGlobal": {
+		"linkToCatalog": "Mit Katalog verknüpfen",
+		"linkToGlobalCatalog": "Mit globalem Katalog verknüpfen",
+		"searching": "Suchen...",
+		"noItemsFound": "Keine Gegenstände gefunden",
+		"unlink": "Verknüpfung aufheben",
+		"searchPlaceholder": "Nach Marke oder Modell suchen..."
+	},
+	"manualEntry": {
+		"namePlaceholder": "Gegenstandsname",
+		"weightLabel": "Gewicht (g)",
+		"msrpLabel": "UVP ($)",
+		"notesLabel": "Notizen",
+		"optionalNotes": "Optionale Notizen...",
+		"productLink": "Produktlink",
+		"addToCollection": "Zur Sammlung hinzufügen",
+		"nameRequired": "Name ist erforderlich",
+		"selectCategory": "Bitte wählen Sie eine Kategorie",
+		"failedToSave": "Speichern fehlgeschlagen"
+	},
+	"itemCard": {
+		"duplicateItem": "Gegenstand duplizieren",
+		"openProductLink": "Produktlink öffnen",
+		"removeFromSetup": "Aus Setup entfernen"
+	},
+	"addToCollection": {
+		"title": "Zur Sammlung hinzufügen",
+		"categoryLabel": "Kategorie",
+		"notesLabel": "Notizen",
+		"notesPlaceholder": "Persönliche Notizen (optional)",
+		"purchasePriceLabel": "Kaufpreis ({{currency}})",
+		"purchasePricePlaceholder": "Kaufpreis (optional)",
+		"selectCategory": "Bitte wählen Sie eine Kategorie",
+		"addButton": "Zur Sammlung hinzufügen",
+		"addingButton": "Hinzufügen...",
+		"added": "Zur Sammlung hinzugefügt",
+		"failedToAdd": "Gegenstand konnte nicht hinzugefügt werden"
+	},
+	"item": {
+		"backToSetup": "Zurück zum Setup",
+		"backToCollection": "Zurück zur Sammlung",
+		"notFound": "Gegenstand nicht gefunden",
+		"nameFromCatalog": "Name und Marke stammen aus dem Katalog",
+		"removeFromCollection": "Aus der Sammlung entfernen",
+		"weightLabel": "Gewicht (g)",
+		"msrpLabel": "UVP",
+		"priceLabel": "Preis ({{currency}})",
+		"quantityLabel": "Menge",
+		"categoryLabel": "Kategorie",
+		"notesLabel": "Notizen",
+		"notesPlaceholder": "Notizen hinzufügen...",
+		"productUrlLabel": "Produkt-URL",
+		"urlPlaceholder": "https://...",
+		"viewProduct": "Produkt ansehen",
+		"qty": "Menge: {{count}}",
+		"added": "Hinzugefügt",
+		"updated": "Aktualisiert"
+	},
+	"profileSection": {
+		"title": "Profil",
+		"subtitle": "Ihre öffentlichen Profilinformationen",
+		"changeAvatar": "Avatar ändern",
+		"removeAvatar": "Entfernen",
+		"uploadingAvatar": "Hochladen...",
+		"displayName": "Anzeigename",
+		"bio": "Biografie",
+		"saveProfile": "Profil speichern",
+		"profileUpdated": "Profil aktualisiert",
+		"avatarUploadFailed": "Avatar-Upload fehlgeschlagen."
 	}
 }

src/client/locales/de/common.json

@@ -27,6 +27,7 @@
 		"loading": "Laden...",
 		"addItem": "Gegenstand hinzufügen",
 		"saveChanges": "Änderungen speichern",
+		"duplicate": "Duplizieren",
 		"revoke": "Widerrufen",
 		"skipStep": "Diesen Schritt überspringen"
 	},
@@ -79,21 +80,21 @@
 	},
 	"home": {
 		"popularSetups": "Beliebte Setups",
-		"recentlyAdded": "Kürzlich hinzugefügt",
-		"trendingCategories": "Beliebte Kategorien"
+		"recentlyAdded": "Zuletzt hinzugefügt",
+		"trendingCategories": "Trending-Kategorien"
 	},
 	"imageUpload": {
-		"clickToAdd": "Klicken, um Foto hinzuzufügen",
+		"clickToAdd": "Klicken zum Hinzufügen eines Fotos",
 		"invalidType": "Bitte wählen Sie ein JPG-, PNG- oder WebP-Bild.",
 		"tooLarge": "Das Bild muss kleiner als 5 MB sein.",
-		"uploadFailed": "Upload fehlgeschlagen. Bitte versuchen Sie es erneut."
+		"uploadFailed": "Upload fehlgeschlagen. Bitte erneut versuchen."
 	},
 	"profile": {
 		"title": "Profil",
 		"account": "Konto",
 		"accountInfo": "Ihre Kontoinformationen",
 		"email": "E-Mail",
-		"noEmail": "Keine E-Mail hinterlegt",
+		"noEmail": "Keine E-Mail-Adresse hinterlegt",
 		"change": "Ändern",
 		"newEmailPlaceholder": "Neue E-Mail-Adresse",
 		"updating": "Wird aktualisiert...",
@@ -101,7 +102,7 @@
 		"emailUpdated": "E-Mail aktualisiert",
 		"memberSince": "Mitglied seit",
 		"security": "Sicherheit",
-		"managePassword": "Passwort verwalten",
+		"managePassword": "Ihr Passwort verwalten",
 		"currentPassword": "Aktuelles Passwort",
 		"newPassword": "Neues Passwort",
 		"password": "Passwort",
@@ -112,9 +113,9 @@
 		"changePassword": "Passwort ändern",
 		"setPassword": "Passwort festlegen",
 		"dangerZone": "Gefahrenzone",
-		"dangerZoneDescription": "Löschen Sie Ihr Konto und alle persönlichen Daten. Öffentliche Setups werden als 'Gelöschter Benutzer' angezeigt.",
+		"dangerZoneDescription": "Konto und alle persönlichen Daten löschen. Öffentliche Setups werden dem \"Gelöschten Benutzer\" zugeordnet.",
 		"deleteAccount": "Konto löschen",
-		"deleteConfirmMessage": "Diese Aktion ist dauerhaft. Geben Sie DELETE zur Bestätigung ein.",
-		"deleteConfirmPlaceholder": "DELETE zur Bestätigung eingeben"
+		"deleteConfirmMessage": "Diese Aktion ist dauerhaft. Geben Sie LÖSCHEN ein, um zu bestätigen.",
+		"deleteConfirmPlaceholder": "Geben Sie LÖSCHEN ein, um zu bestätigen"
 	}
 }

src/client/locales/de/setups.json

@@ -37,6 +37,40 @@
 		"public": "Öffentlich",
 		"publicDescription": "Sichtbar auf Ihrem Profil"
 	},
+	"namePlaceholder": "Neuer Setup-Name...",
+	"creating": "Erstellen...",
+	"emptyState": {
+		"title": "Bauen Sie Ihr perfektes Loadout",
+		"step1Title": "Setup erstellen",
+		"step1Description": "Benennen Sie Ihr Loadout für eine bestimmte Tour oder Aktivität",
+		"step2Title": "Gegenstände hinzufügen",
+		"step2Description": "Wählen Sie Ausrüstung aus Ihrer Sammlung für das Setup",
+		"step3Title": "Gewicht verfolgen",
+		"step3Description": "Gewichtsverteilung anzeigen und Rucksack optimieren"
+	},
+	"detail": {
+		"itemCount": "{{count}} Gegenstände",
+		"itemCount_one": "{{count}} Gegenstand",
+		"total": "gesamt",
+		"cost": "Kosten",
+		"sharedSetup": "Geteiltes Setup",
+		"linkNotAvailable": "Link nicht verfügbar",
+		"linkExpired": "Dieser Freigabelink ist abgelaufen oder nicht mehr gültig.",
+		"setupNotFound": "Setup nicht gefunden.",
+		"noItemsTitle": "Keine Gegenstände in diesem Setup",
+		"noItemsDescription": "Fügen Sie Gegenstände aus Ihrer Sammlung hinzu, um dieses Loadout aufzubauen.",
+		"addItems": "Gegenstände hinzufügen",
+		"share": "Teilen",
+		"deleteSetup": "Setup löschen",
+		"deleteConfirmMessage": "Möchten Sie {{name}} wirklich löschen? Gegenstände werden nicht aus Ihrer Sammlung entfernt.",
+		"shareSettings": "Freigabeeinstellungen"
+	},
+	"profile": {
+		"userNotFound": "Benutzer nicht gefunden.",
+		"backToHome": "Zurück zur Startseite",
+		"publicSetups": "Öffentliche Setups",
+		"noPublicSetups": "Noch keine öffentlichen Setups"
+	},
 	"impact": {
 		"title": "Auswirkungsvorschau",
 		"adding": "Hinzufügen",

src/client/locales/de/threads.json

@@ -46,15 +46,92 @@
 		"candidates": "{{count}} Kandidaten",
 		"candidates_one": "{{count}} Kandidat"
 	},
+	"candidateCard": {
+		"pickAsWinner": "Als Gewinner wählen",
+		"winner": "Gewinner",
+		"deleteCandidate": "Kandidat löschen",
+		"openProductLink": "Produktlink öffnen",
+		"prosCons": "+/- Notizen"
+	},
+	"candidateForm": {
+		"nameRequired": "Name *",
+		"weightLabel": "Gewicht (g)",
+		"priceLabel": "Preis ({{currency}})",
+		"categoryLabel": "Kategorie",
+		"notesLabel": "Notizen",
+		"prosLabel": "Vorteile",
+		"consLabel": "Nachteile",
+		"productLinkLabel": "Produktlink",
+		"namePlaceholder": "z.B. Osprey Talon 22",
+		"weightPlaceholder": "z.B. 680",
+		"pricePlaceholder": "z.B. 129,99",
+		"notesPlaceholder": "Weitere Notizen...",
+		"prosPlaceholder": "Ein Vorteil pro Zeile...",
+		"consPlaceholder": "Ein Nachteil pro Zeile...",
+		"urlPlaceholder": "https://...",
+		"addCandidate": "Kandidat hinzufügen",
+		"saveChanges": "Änderungen speichern"
+	},
+	"comparisonTable": {
+		"image": "Bild",
+		"name": "Name",
+		"rank": "Rang",
+		"weight": "Gewicht",
+		"price": "Preis",
+		"status": "Status",
+		"link": "Link",
+		"notes": "Notizen",
+		"pros": "Vorteile",
+		"cons": "Nachteile",
+		"weightImpact": "Gewichtsauswirkung",
+		"priceImpact": "Preisauswirkung",
+		"view": "Ansehen"
+	},
+	"addToThread": {
+		"title": "Zum Thread hinzufügen",
+		"newThreadTitle": "Neuer Thread + Kandidat",
+		"thread": "Thread",
+		"threadName": "Thread-Name",
+		"newThread": "+ Neuer Thread...",
+		"backToPicker": "Zurück zur Thread-Auswahl",
+		"addAsCandidate": "Als Kandidat hinzufügen",
+		"createAndAdd": "Erstellen & hinzufügen",
+		"adding": "Hinzufügen...",
+		"failedToAdd": "Kandidat konnte nicht hinzugefügt werden",
+		"failedToCreate": "Thread konnte nicht erstellt werden"
+	},
+	"statusBadge": {
+		"researching": "Recherche",
+		"ordered": "Bestellt",
+		"arrived": "Angekommen"
+	},
 	"planning": {
 		"title": "Planungs-Threads",
-		"emptyTitle": "Planen Sie Ihren nächsten Kauf",
-		"createFirst": "Erstellen Sie Ihren ersten Thread",
+		"emptyTitle": "Nächsten Kauf planen",
+		"createFirst": "Ersten Thread erstellen",
 		"step1Title": "Thread erstellen",
 		"step1Description": "Starten Sie einen Recherche-Thread für Ausrüstung, die Sie in Betracht ziehen",
 		"step2Title": "Kandidaten hinzufügen",
-		"step2Description": "Fügen Sie Produkte zum Vergleich mit Preisen und Gewichten hinzu",
+		"step2Description": "Fügen Sie Produkte mit Preisen und Gewichten hinzu",
 		"step3Title": "Gewinner wählen",
-		"step3Description": "Schließen Sie den Thread ab und der Gewinner wird Ihrer Sammlung hinzugefügt"
+		"step3Description": "Thread auflösen und der Gewinner kommt in Ihre Sammlung"
+	},
+	"detail": {
+		"notFound": "Thread nicht gefunden",
+		"backToPlanning": "Zurück zur Planung",
+		"statusActive": "Aktiv",
+		"statusResolved": "Abgeschlossen",
+		"resolutionBanner": "wurde als Gewinner gewählt und Ihrer Sammlung hinzugefügt.",
+		"addCandidate": "Kandidat hinzufügen",
+		"emptyCandidatesTitle": "Noch keine Kandidaten",
+		"emptyCandidatesDescription": "Fügen Sie Ihren ersten Kandidaten hinzu, um zu vergleichen.",
+		"listView": "Listenansicht",
+		"gridView": "Gitteransicht",
+		"compareView": "Vergleichsansicht",
+		"addCandidateModal": {
+			"title": "Kandidat hinzufügen",
+			"submit": "Kandidat hinzufügen",
+			"adding": "Hinzufügen..."
+		}
 	}
 }

src/client/locales/en/catalog.json

@@ -0,0 +1,21 @@
+{
+	"discover": "Discover",
+	"searchPlaceholder": "Search the catalog...",
+	"filter": {
+		"tags": "Tags",
+		"weight": "Weight",
+		"price": "Price",
+		"weightRange": "Weight range",
+		"priceRange": "Price range",
+		"min": "Min: {{value}}",
+		"max": "Max: {{value}}",
+		"reset": "Reset",
+		"clearAll": "Clear all",
+		"listView": "List view",
+		"gridView": "Grid view"
+	},
+	"empty": {
+		"noResults": "No items found matching your search",
+		"noCatalogItems": "No items in the global catalog yet"
+	}
+}

src/client/locales/en/collection.json

@@ -20,7 +20,11 @@
 		"notes": "Notes",
 		"notesPlaceholder": "Any additional notes...",
 		"productLink": "Product Link",
-		"urlPlaceholder": "https://..."
+		"urlPlaceholder": "https://...",
+		"msrp": "MSRP",
+		"purchasePrice": "Purchase Price",
+		"itemNamePlaceholder": "Item name",
+		"optionalNotes": "Optional notes..."
 	},
 	"classification": {
 		"ultralight": "Ultralight",
@@ -39,5 +43,106 @@
 		"base": "Base Weight",
 		"worn": "Worn",
 		"consumable": "Consumable"
+	},
+	"categoryPicker": {
+		"searchOrCreate": "Search or create category...",
+		"create": "Create",
+		"noCategories": "No categories found"
+	},
+	"categoryFilter": {
+		"allCategories": "All categories",
+		"searchPlaceholder": "Search categories...",
+		"noResults": "No categories found"
+	},
+	"weightSummary": {
+		"title": "Weight Summary",
+		"noData": "No weight data to display",
+		"baseWeight": "Base Weight",
+		"worn": "Worn",
+		"consumable": "Consumable",
+		"total": "Total",
+		"category": "Category",
+		"classification": "Classification"
+	},
+	"itemPicker": {
+		"title": "Select Items",
+		"noItems": "No items in your collection yet.",
+		"done": "Done"
+	},
+	"categoryHeader": {
+		"itemCount": "{{count}} items",
+		"itemCount_one": "{{count}} item",
+		"save": "Save",
+		"cancel": "Cancel"
+	},
+	"linkToGlobal": {
+		"linkToCatalog": "Link to catalog",
+		"linkToGlobalCatalog": "Link to global catalog",
+		"searching": "Searching...",
+		"noItemsFound": "No items found",
+		"unlink": "Unlink",
+		"searchPlaceholder": "Search by brand or model..."
+	},
+	"manualEntry": {
+		"namePlaceholder": "Item name",
+		"weightLabel": "Weight (g)",
+		"msrpLabel": "MSRP ($)",
+		"notesLabel": "Notes",
+		"optionalNotes": "Optional notes...",
+		"productLink": "Product Link",
+		"addToCollection": "Add to Collection",
+		"nameRequired": "Name is required",
+		"selectCategory": "Please select a category",
+		"failedToSave": "Failed to save"
+	},
+	"itemCard": {
+		"duplicateItem": "Duplicate item",
+		"openProductLink": "Open product link",
+		"removeFromSetup": "Remove from setup"
+	},
+	"addToCollection": {
+		"title": "Add to Collection",
+		"categoryLabel": "Category",
+		"notesLabel": "Notes",
+		"notesPlaceholder": "Personal notes (optional)",
+		"purchasePriceLabel": "Purchase Price ({{currency}})",
+		"purchasePricePlaceholder": "Purchase price (optional)",
+		"selectCategory": "Please select a category",
+		"addButton": "Add to Collection",
+		"addingButton": "Adding...",
+		"added": "Added to Collection",
+		"failedToAdd": "Failed to add item"
+	},
+	"item": {
+		"backToSetup": "Back to setup",
+		"backToCollection": "Back to collection",
+		"notFound": "Item not found",
+		"nameFromCatalog": "Name and brand are from the catalog",
+		"removeFromCollection": "Remove from Collection",
+		"weightLabel": "Weight (g)",
+		"msrpLabel": "MSRP",
+		"priceLabel": "Price ({{currency}})",
+		"quantityLabel": "Quantity",
+		"categoryLabel": "Category",
+		"notesLabel": "Notes",
+		"notesPlaceholder": "Add notes...",
+		"productUrlLabel": "Product URL",
+		"urlPlaceholder": "https://...",
+		"viewProduct": "View product",
+		"qty": "Qty: {{count}}",
+		"added": "Added",
+		"updated": "Updated"
+	},
+	"profileSection": {
+		"title": "Profile",
+		"subtitle": "Your public profile information",
+		"changeAvatar": "Change avatar",
+		"removeAvatar": "Remove",
+		"uploadingAvatar": "Uploading...",
+		"displayName": "Display Name",
+		"bio": "Bio",
+		"saveProfile": "Save Profile",
+		"profileUpdated": "Profile updated",
+		"avatarUploadFailed": "Avatar upload failed."
 	}
 }

src/client/locales/en/common.json

@@ -27,6 +27,7 @@
 		"loading": "Loading...",
 		"addItem": "Add Item",
 		"saveChanges": "Save Changes",
+		"duplicate": "Duplicate",
 		"revoke": "Revoke",
 		"skipStep": "Skip this step"
 	},

src/client/locales/en/setups.json

@@ -1,6 +1,34 @@
 {
 	"title": "Setups",
 	"create": "New Setup",
+	"namePlaceholder": "New setup name...",
+	"creating": "Creating...",
+	"emptyState": {
+		"title": "Build your perfect loadout",
+		"step1Title": "Create a setup",
+		"step1Description": "Name your loadout for a specific trip or activity",
+		"step2Title": "Add items",
+		"step2Description": "Pick gear from your collection to include in the setup",
+		"step3Title": "Track weight",
+		"step3Description": "See weight breakdown and optimize your pack"
+	},
+	"detail": {
+		"itemCount": "{{count}} items",
+		"itemCount_one": "{{count}} item",
+		"total": "total",
+		"cost": "cost",
+		"sharedSetup": "Shared setup",
+		"linkNotAvailable": "Link not available",
+		"linkExpired": "This share link has expired or is no longer valid.",
+		"setupNotFound": "Setup not found.",
+		"noItemsTitle": "No items in this setup",
+		"noItemsDescription": "Add items from your collection to build this loadout.",
+		"addItems": "Add Items",
+		"share": "Share",
+		"deleteSetup": "Delete Setup",
+		"deleteConfirmMessage": "Are you sure you want to delete {{name}}? This will not remove items from your collection.",
+		"shareSettings": "Share settings"
+	},
 	"empty": {
 		"title": "No setups yet",
 		"description": "Create a setup to organize gear for specific trips or activities."
@@ -37,6 +65,12 @@
 		"public": "Public",
 		"publicDescription": "Visible on your profile"
 	},
+	"profile": {
+		"userNotFound": "User not found.",
+		"backToHome": "Back to home",
+		"publicSetups": "Public Setups",
+		"noPublicSetups": "No public setups yet"
+	},
 	"impact": {
 		"title": "Impact Preview",
 		"adding": "Adding",

src/client/locales/en/threads.json

@@ -46,6 +46,83 @@
 		"candidates": "{{count}} candidates",
 		"candidates_one": "{{count}} candidate"
 	},
+	"candidateCard": {
+		"pickAsWinner": "Pick as winner",
+		"winner": "Winner",
+		"deleteCandidate": "Delete candidate",
+		"openProductLink": "Open product link",
+		"prosCons": "+/- Notes"
+	},
+	"candidateForm": {
+		"nameRequired": "Name *",
+		"weightLabel": "Weight (g)",
+		"priceLabel": "Price ({{currency}})",
+		"categoryLabel": "Category",
+		"notesLabel": "Notes",
+		"prosLabel": "Pros",
+		"consLabel": "Cons",
+		"productLinkLabel": "Product Link",
+		"namePlaceholder": "e.g. Osprey Talon 22",
+		"weightPlaceholder": "e.g. 680",
+		"pricePlaceholder": "e.g. 129.99",
+		"notesPlaceholder": "Any additional notes...",
+		"prosPlaceholder": "One pro per line...",
+		"consPlaceholder": "One con per line...",
+		"urlPlaceholder": "https://...",
+		"addCandidate": "Add Candidate",
+		"saveChanges": "Save Changes"
+	},
+	"comparisonTable": {
+		"image": "Image",
+		"name": "Name",
+		"rank": "Rank",
+		"weight": "Weight",
+		"price": "Price",
+		"status": "Status",
+		"link": "Link",
+		"notes": "Notes",
+		"pros": "Pros",
+		"cons": "Cons",
+		"weightImpact": "Weight Impact",
+		"priceImpact": "Price Impact",
+		"view": "View"
+	},
+	"addToThread": {
+		"title": "Add to Thread",
+		"newThreadTitle": "New Thread + Candidate",
+		"thread": "Thread",
+		"threadName": "Thread name",
+		"newThread": "+ New Thread...",
+		"backToPicker": "Back to thread picker",
+		"addAsCandidate": "Add as Candidate",
+		"createAndAdd": "Create & Add",
+		"adding": "Adding...",
+		"failedToAdd": "Failed to add candidate",
+		"failedToCreate": "Failed to create thread"
+	},
+	"statusBadge": {
+		"researching": "Researching",
+		"ordered": "Ordered",
+		"arrived": "Arrived"
+	},
+	"detail": {
+		"notFound": "Thread not found",
+		"backToPlanning": "Back to planning",
+		"statusActive": "Active",
+		"statusResolved": "Resolved",
+		"resolutionBanner": "was picked as the winner and added to your collection.",
+		"addCandidate": "Add Candidate",
+		"emptyCandidatesTitle": "No candidates yet",
+		"emptyCandidatesDescription": "Add your first candidate to start comparing.",
+		"listView": "List view",
+		"gridView": "Grid view",
+		"compareView": "Compare view",
+		"addCandidateModal": {
+			"title": "Add Candidate",
+			"submit": "Add Candidate",
+			"adding": "Adding..."
+		}
+	},
 	"planning": {
 		"title": "Planning Threads",
 		"emptyTitle": "Plan your next purchase",

src/client/routes/collection/index.tsx

@@ -1,6 +1,7 @@
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { AnimatePresence, motion } from "framer-motion";
 import { useRef } from "react";
+import { useTranslation } from "react-i18next";
 import { z } from "zod";
 import { CollectionView } from "../../components/CollectionView";
 import { PlanningView } from "../../components/PlanningView";
@@ -15,10 +16,6 @@ export const Route = createFileRoute("/collection/")({
 });
 
 const TAB_ORDER = ["gear", "planning"] as const;
-const TAB_LABELS: Record<(typeof TAB_ORDER)[number], string> = {
-	gear: "Gear",
-	planning: "Planning",
-};
 
 const slideVariants = {
 	enter: (dir: number) => ({ x: `${dir * 15}%`, opacity: 0 }),
@@ -27,9 +24,15 @@ const slideVariants = {
 };
 
 function CollectionPage() {
+	const { t } = useTranslation("collection");
 	const { tab } = Route.useSearch();
 	const prevTab = useRef(tab);
 
+	const TAB_LABELS: Record<(typeof TAB_ORDER)[number], string> = {
+		gear: t("gear"),
+		planning: t("planning"),
+	};
+
 	const direction =
 		TAB_ORDER.indexOf(tab) >= TAB_ORDER.indexOf(prevTab.current) ? 1 : -1;
 	prevTab.current = tab;
@@ -39,18 +42,18 @@ function CollectionPage() {
 			{/* Tab navigation */}
 			<div className="flex justify-center mb-6">
 				<div className="flex bg-gray-100 rounded-full p-0.5 gap-0.5">
-					{TAB_ORDER.map((t) => (
+					{TAB_ORDER.map((tabKey) => (
 						<Link
-							key={t}
+							key={tabKey}
 							to="/collection"
-							search={{ tab: t }}
+							search={{ tab: tabKey }}
 							className={`px-4 py-1.5 text-sm font-medium rounded-full transition-colors ${
-								tab === t
+								tab === tabKey
 									? "bg-gray-700 text-white"
 									: "text-gray-600 hover:bg-gray-200"
 							}`}
 						>
-							{TAB_LABELS[t]}
+							{TAB_LABELS[tabKey]}
 						</Link>
 					))}
 				</div>

src/client/routes/global-items/index.tsx

@@ -1,5 +1,6 @@
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { ArrowLeft, LayoutGrid, LayoutList, X } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { z } from "zod";
 import { GearImage } from "../../components/GearImage";
@@ -18,6 +19,7 @@ export const Route = createFileRoute("/global-items/")({
 type ViewMode = "grid" | "list";
 
 function GlobalItemsCatalog() {
+	const { t } = useTranslation("catalog");
 	const { q } = Route.useSearch();
 
 	const [searchInput, setSearchInput] = useState(q ?? "");
@@ -128,7 +130,7 @@ function GlobalItemsCatalog() {
 							className="inline-flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-700 transition-colors shrink-0"
 						>
 							<ArrowLeft className="w-3.5 h-3.5" />
-							<span className="hidden sm:inline">Discover</span>
+							<span className="hidden sm:inline">{t("discover")}</span>
 						</Link>
 
 						{/* Search input */}
@@ -137,7 +139,7 @@ function GlobalItemsCatalog() {
 								type="text"
 								value={searchInput}
 								onChange={(e) => setSearchInput(e.target.value)}
-								placeholder="Search the catalog..."
+								placeholder={t("searchPlaceholder")}
 								className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition-colors"
 							/>
 							{searchInput && (
@@ -161,7 +163,7 @@ function GlobalItemsCatalog() {
 										? "bg-white text-gray-900 shadow-sm"
 										: "text-gray-400 hover:text-gray-600"
 								}`}
-								title="List view"
+								title={t("filter.listView")}
 							>
 								<LayoutList className="w-4 h-4" />
 							</button>
@@ -173,7 +175,7 @@ function GlobalItemsCatalog() {
 										? "bg-white text-gray-900 shadow-sm"
 										: "text-gray-400 hover:text-gray-600"
 								}`}
-								title="Grid view"
+								title={t("filter.gridView")}
 							>
 								<LayoutGrid className="w-4 h-4" />
 							</button>
@@ -201,7 +203,7 @@ function GlobalItemsCatalog() {
 												: "bg-white text-gray-600 border-gray-200 hover:border-gray-300"
 										}`}
 									>
-										Tags
+										{t("filter.tags")}
 										{selectedTags.length > 0 && (
 											<span className="ml-0.5 inline-flex items-center justify-center w-4 h-4 rounded-full bg-blue-500 text-white text-[10px] font-bold">
 												{selectedTags.length}
@@ -250,7 +252,7 @@ function GlobalItemsCatalog() {
 											: "bg-white text-gray-600 border-gray-200 hover:border-gray-300"
 									}`}
 								>
-									Weight
+									{t("filter.weight")}
 									{(weightMin > 0 || weightMax < 5000) && (
 										<span className="ml-0.5 text-blue-500">
 											{weightMin > 0 && weightMax < 5000
@@ -265,7 +267,7 @@ function GlobalItemsCatalog() {
 								{weightFilterOpen && (
 									<div className="absolute left-0 top-full mt-1 z-20 bg-white border border-gray-200 rounded-lg shadow-lg p-4 w-56">
 										<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">
-											Weight range
+											{t("filter.weightRange")}
 										</h3>
 										<div className="space-y-2">
 											<div>
@@ -318,7 +320,7 @@ function GlobalItemsCatalog() {
 												}}
 												className="mt-2 text-xs text-gray-400 hover:text-gray-600"
 											>
-												Reset
+												{t("filter.reset")}
 											</button>
 										)}
 									</div>
@@ -340,7 +342,7 @@ function GlobalItemsCatalog() {
 											: "bg-white text-gray-600 border-gray-200 hover:border-gray-300"
 									}`}
 								>
-									Price
+									{t("filter.price")}
 									{(priceMin > 0 || priceMax < 100000) && (
 										<span className="ml-0.5 text-green-600">
 											{priceMin > 0 && priceMax < 100000
@@ -355,7 +357,7 @@ function GlobalItemsCatalog() {
 								{priceFilterOpen && (
 									<div className="absolute left-0 top-full mt-1 z-20 bg-white border border-gray-200 rounded-lg shadow-lg p-4 w-56">
 										<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">
-											Price range
+											{t("filter.priceRange")}
 										</h3>
 										<div className="space-y-2">
 											<div>
@@ -408,7 +410,7 @@ function GlobalItemsCatalog() {
 												}}
 												className="mt-2 text-xs text-gray-400 hover:text-gray-600"
 											>
-												Reset
+												{t("filter.reset")}
 											</button>
 										)}
 									</div>
@@ -467,7 +469,7 @@ function GlobalItemsCatalog() {
 									onClick={clearAllFilters}
 									className="text-xs text-gray-400 hover:text-gray-600 px-1 transition-colors"
 								>
-									Clear all
+									{t("filter.clearAll")}
 								</button>
 							)}
 						</div>
@@ -644,6 +646,7 @@ function SkeletonList() {
 // ── Empty State ────────────────────────────────────────────────────────
 
 function EmptyState({ hasQuery }: { hasQuery: boolean }) {
+	const { t } = useTranslation("catalog");
 	return (
 		<div className="flex flex-col items-center justify-center py-20 px-4">
 			<svg
@@ -661,8 +664,8 @@ function EmptyState({ hasQuery }: { hasQuery: boolean }) {
 			</svg>
 			<p className="text-sm text-gray-500 text-center">
 				{hasQuery
-					? "No items found matching your search"
-					: "No items in the global catalog yet"}
+					? t("empty.noResults")
+					: t("empty.noCatalogItems")}
 			</p>
 		</div>
 	);

src/client/routes/items/$itemId.tsx

@@ -1,5 +1,6 @@
 import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { z } from "zod";
 import { CategoryPicker } from "../../components/CategoryPicker";
 import { GearImage, imageContainerBg } from "../../components/GearImage";
@@ -36,6 +37,7 @@ interface EditFormState {
 }
 
 function ItemDetail() {
+	const { t } = useTranslation(["collection", "common"]);
 	const { itemId } = Route.useParams();
 	const { setup: setupId, share: shareToken } = Route.useSearch();
 	const navigate = useNavigate();
@@ -205,7 +207,7 @@ function ItemDetail() {
 				search: shareToken ? { share: shareToken } : {},
 			}
 		: { to: "/collection" as const, params: {}, search: {} };
-	const backLabel = setupId ? "Back to setup" : "Back to collection";
+	const backLabel = setupId ? t("collection:item.backToSetup") : t("collection:item.backToCollection");
 
 	if (error || !item) {
 		return (
@@ -219,7 +221,7 @@ function ItemDetail() {
 					← {backLabel}
 				</Link>
 				<div className="text-center py-16">
-					<p className="text-sm text-gray-500">Item not found</p>
+					<p className="text-sm text-gray-500">{t("collection:item.notFound")}</p>
 				</div>
 			</div>
 		);
@@ -249,7 +251,7 @@ function ItemDetail() {
 							disabled={duplicateItem.isPending}
 							className="hidden md:inline-flex items-center gap-1.5 px-3 py-1.5 text-sm text-gray-500 hover:text-gray-700 hover:bg-gray-50 rounded-lg transition-colors"
 						>
-							Duplicate
+							{t("common:actions.duplicate")}
 						</button>
 						{/* Duplicate — mobile */}
 						<button
@@ -257,8 +259,8 @@ function ItemDetail() {
 							onClick={handleDuplicate}
 							disabled={duplicateItem.isPending}
 							className="md:hidden inline-flex items-center justify-center min-w-[44px] min-h-[44px] p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-50 rounded-lg transition-colors"
-							aria-label="Duplicate"
-							title="Duplicate"
+							aria-label={t("common:actions.duplicate")}
+							title={t("common:actions.duplicate")}
 						>
 							<LucideIcon name="copy" size={16} />
 						</button>
@@ -268,15 +270,15 @@ function ItemDetail() {
 							onClick={handleDelete}
 							className="hidden md:inline-flex items-center gap-1.5 px-3 py-1.5 text-sm text-red-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
 						>
-							{isReference ? "Remove from Collection" : "Delete"}
+							{isReference ? t("collection:item.removeFromCollection") : t("common:actions.delete")}
 						</button>
 						{/* Delete — mobile */}
 						<button
 							type="button"
 							onClick={handleDelete}
 							className="md:hidden inline-flex items-center justify-center min-w-[44px] min-h-[44px] p-2 text-red-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
-							aria-label={isReference ? "Remove from Collection" : "Delete"}
-							title={isReference ? "Remove from Collection" : "Delete"}
+							aria-label={isReference ? t("collection:item.removeFromCollection") : t("common:actions.delete")}
+							title={isReference ? t("collection:item.removeFromCollection") : t("common:actions.delete")}
 						>
 							<LucideIcon name="trash-2" size={16} />
 						</button>
@@ -286,15 +288,15 @@ function ItemDetail() {
 							onClick={enterEditMode}
 							className="hidden md:inline-flex items-center gap-1.5 px-4 py-1.5 text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 rounded-lg transition-colors"
 						>
-							Edit
+							{t("common:actions.edit")}
 						</button>
 						{/* Edit — mobile */}
 						<button
 							type="button"
 							onClick={enterEditMode}
 							className="md:hidden inline-flex items-center justify-center min-w-[44px] min-h-[44px] p-2 text-white bg-gray-700 hover:bg-gray-800 rounded-lg transition-colors"
-							aria-label="Edit"
-							title="Edit"
+							aria-label={t("common:actions.edit")}
+							title={t("common:actions.edit")}
 						>
 							<LucideIcon name="pencil" size={16} />
 						</button>
@@ -307,7 +309,7 @@ function ItemDetail() {
 							onClick={cancelEdit}
 							className="px-3 py-1.5 text-sm text-gray-500 hover:text-gray-700 hover:bg-gray-50 rounded-lg transition-colors"
 						>
-							Cancel
+							{t("common:actions.cancel")}
 						</button>
 						<button
 							type="button"
@@ -315,7 +317,7 @@ function ItemDetail() {
 							disabled={updateItem.isPending || !form.name.trim()}
 							className="px-4 py-1.5 text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 rounded-lg transition-colors disabled:opacity-50"
 						>
-							{updateItem.isPending ? "Saving..." : "Save"}
+							{updateItem.isPending ? t("common:actions.saving") : t("common:actions.save")}
 						</button>
 					</div>
 				)}
@@ -415,7 +417,7 @@ function ItemDetail() {
 									: item.name}
 							</h1>
 							<p className="text-xs text-gray-400 mt-1">
-								Name and brand are from the catalog
+								{t("collection:item.nameFromCatalog")}
 							</p>
 						</>
 					) : (
@@ -463,7 +465,7 @@ function ItemDetail() {
 							{item.weightGrams != null && (
 								<div>
 									<label className="block text-xs font-medium text-gray-500 mb-1">
-										Weight (g)
+										{t("collection:item.weightLabel")}
 									</label>
 									<p className="py-2 px-3 bg-gray-50 border border-gray-100 rounded-lg text-sm text-gray-500">
 										{item.weightGrams}
@@ -473,7 +475,7 @@ function ItemDetail() {
 							{item.priceCents != null && (
 								<div>
 									<label className="block text-xs font-medium text-gray-500 mb-1">
-										MSRP
+										{t("collection:item.msrpLabel")}
 									</label>
 									<p className="py-2 px-3 bg-gray-50 border border-gray-100 rounded-lg text-sm text-gray-500">
 										{price(item.priceCents)}
@@ -485,7 +487,7 @@ function ItemDetail() {
 						<>
 							<div>
 								<label className="block text-xs font-medium text-gray-500 mb-1">
-									Weight (g)
+									{t("collection:item.weightLabel")}
 								</label>
 								<input
 									type="number"
@@ -502,7 +504,7 @@ function ItemDetail() {
 							</div>
 							<div>
 								<label className="block text-xs font-medium text-gray-500 mb-1">
-									{`Price (${currency})`}
+									{t("collection:item.priceLabel", { currency })}
 								</label>
 								<input
 									type="number"
@@ -522,7 +524,7 @@ function ItemDetail() {
 					)}
 					<div>
 						<label className="block text-xs font-medium text-gray-500 mb-1">
-							Quantity
+							{t("collection:item.quantityLabel")}
 						</label>
 						<input
 							type="number"
@@ -539,7 +541,7 @@ function ItemDetail() {
 					</div>
 					<div>
 						<label className="block text-xs font-medium text-gray-500 mb-1">
-							Category
+							{t("collection:item.categoryLabel")}
 						</label>
 						<CategoryPicker
 							value={form.categoryId}
@@ -569,7 +571,7 @@ function ItemDetail() {
 					</span>
 					{item.quantity > 1 && (
 						<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-50 text-purple-500">
-							Qty: {item.quantity}
+							{t("collection:item.qty", { count: item.quantity })}
 						</span>
 					)}
 				</div>
@@ -579,21 +581,21 @@ function ItemDetail() {
 			{isEditing ? (
 				<div className="mb-6">
 					<label className="block text-xs font-medium text-gray-500 mb-1">
-						Notes
+						{t("collection:item.notesLabel")}
 					</label>
 					<textarea
 						value={form.notes}
 						onChange={(e) => setForm((f) => ({ ...f, notes: e.target.value }))}
 						rows={4}
 						className="w-full py-2 px-3 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent resize-none"
-						placeholder="Add notes..."
+						placeholder={t("collection:item.notesPlaceholder")}
 					/>
 				</div>
 			) : (
 				item.notes && (
 					<div className="mb-6">
 						<h2 className="text-xs font-medium text-gray-400 uppercase tracking-wide mb-2">
-							Notes
+							{t("collection:item.notesLabel")}
 						</h2>
 						<p className="text-gray-600 text-sm leading-relaxed">
 							{item.notes}
@@ -606,7 +608,7 @@ function ItemDetail() {
 			{isEditing ? (
 				<div className="mb-6">
 					<label className="block text-xs font-medium text-gray-500 mb-1">
-						Product URL
+						{t("collection:item.productUrlLabel")}
 					</label>
 					<input
 						type="url"
@@ -618,7 +620,7 @@ function ItemDetail() {
 							}))
 						}
 						className="w-full py-2 px-3 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
-						placeholder="https://..."
+						placeholder={t("collection:item.urlPlaceholder")}
 					/>
 				</div>
 			) : (
@@ -642,7 +644,7 @@ function ItemDetail() {
 									d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
 								/>
 							</svg>
-							View product
+							{t("collection:item.viewProduct")}
 						</button>
 					</div>
 				)
@@ -653,7 +655,7 @@ function ItemDetail() {
 				<div className="border-t border-gray-100 pt-4 mt-8">
 					<div className="flex gap-6 text-xs text-gray-400">
 						<span>
-							Added{" "}
+							{t("collection:item.added")}{" "}
 							{new Date(item.createdAt).toLocaleDateString(undefined, {
 								year: "numeric",
 								month: "short",
@@ -661,7 +663,7 @@ function ItemDetail() {
 							})}
 						</span>
 						<span>
-							Updated{" "}
+							{t("collection:item.updated")}{" "}
 							{new Date(item.updatedAt).toLocaleDateString(undefined, {
 								year: "numeric",
 								month: "short",

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

@@ -1,5 +1,6 @@
 import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { z } from "zod";
 import { CategoryHeader } from "../../components/CategoryHeader";
 import { ItemCard } from "../../components/ItemCard";
@@ -27,6 +28,7 @@ export const Route = createFileRoute("/setups/$setupId")({
 });
 
 function SetupDetailPage() {
+	const { t } = useTranslation(["setups", "common"]);
 	const { setupId } = Route.useParams();
 	const { share: shareToken } = Route.useSearch();
 	const { weight, price } = useFormatters();
@@ -84,10 +86,10 @@ function SetupDetailPage() {
 					className="text-gray-300 mx-auto mb-4"
 				/>
 				<h2 className="text-xl font-semibold text-gray-900 mb-2">
-					Link not available
+					{t("setups:detail.linkNotAvailable")}
 				</h2>
 				<p className="text-sm text-gray-500">
-					This share link has expired or is no longer valid.
+					{t("setups:detail.linkExpired")}
 				</p>
 			</div>
 		);
@@ -96,7 +98,7 @@ function SetupDetailPage() {
 	if (!setup) {
 		return (
 			<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center">
-				<p className="text-gray-500">Setup not found.</p>
+				<p className="text-gray-500">{t("setups:detail.setupNotFound")}</p>
 			</div>
 		);
 	}
@@ -156,7 +158,7 @@ function SetupDetailPage() {
 			{isSharedView && setup && (
 				<div className="flex items-center gap-2 px-4 py-2 bg-blue-50 border-b border-blue-100 -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8">
 					<LucideIcon name="link" size={16} className="text-blue-500" />
-					<span className="text-sm text-blue-700">Shared setup</span>
+					<span className="text-sm text-blue-700">{t("setups:detail.sharedSetup")}</span>
 				</div>
 			)}
 
@@ -178,19 +180,19 @@ function SetupDetailPage() {
 					<div className="flex items-center gap-4 text-sm text-gray-500">
 						<span>
 							<span className="font-medium text-gray-700">{itemCount}</span>{" "}
-							{itemCount === 1 ? "item" : "items"}
+							{t("setups:detail.itemCount", { count: itemCount })}
 						</span>
 						<span>
 							<span className="font-medium text-gray-700">
 								{weight(totalWeight)}
 							</span>{" "}
-							total
+							{t("setups:detail.total")}
 						</span>
 						<span>
 							<span className="font-medium text-gray-700">
 								{price(totalCost)}
 							</span>{" "}
-							cost
+							{t("setups:detail.cost")}
 						</span>
 					</div>
 				</div>
@@ -206,15 +208,15 @@ function SetupDetailPage() {
 						className="hidden md: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"
 					>
 						<LucideIcon name="plus" size={16} />
-						Add Items
+						{t("setups:detail.addItems")}
 					</button>
 					{/* Add Items — mobile */}
 					<button
 						type="button"
 						onClick={() => setPickerOpen(true)}
 						className="md:hidden inline-flex items-center justify-center min-w-[44px] min-h-[44px] p-2 bg-gray-700 hover:bg-gray-800 text-white rounded-lg transition-colors"
-						aria-label="Add Items"
-						title="Add Items"
+						aria-label={t("setups:detail.addItems")}
+						title={t("setups:detail.addItems")}
 					>
 						<LucideIcon name="plus" size={16} />
 					</button>
@@ -241,7 +243,7 @@ function SetupDetailPage() {
 							}
 							size={16}
 						/>
-						Share
+						{t("setups:detail.share")}
 					</button>
 					{/* Share button — mobile */}
 					<button
@@ -254,8 +256,8 @@ function SetupDetailPage() {
 									? "text-blue-600 bg-blue-50 hover:bg-blue-100"
 									: "text-gray-500 bg-gray-50 hover:bg-gray-100"
 						}`}
-						aria-label="Share settings"
-						title="Share settings"
+						aria-label={t("setups:detail.shareSettings")}
+						title={t("setups:detail.shareSettings")}
 					>
 						<LucideIcon
 							name={
@@ -276,15 +278,15 @@ function SetupDetailPage() {
 						onClick={() => setConfirmDelete(true)}
 						className="hidden md:inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-red-600 bg-red-50 hover:bg-red-100 rounded-lg transition-colors"
 					>
-						Delete Setup
+						{t("setups:detail.deleteSetup")}
 					</button>
 					{/* Delete Setup — mobile */}
 					<button
 						type="button"
 						onClick={() => setConfirmDelete(true)}
 						className="md:hidden inline-flex items-center justify-center min-w-[44px] min-h-[44px] p-2 text-red-600 bg-red-50 hover:bg-red-100 rounded-lg transition-colors"
-						aria-label="Delete Setup"
-						title="Delete Setup"
+						aria-label={t("setups:detail.deleteSetup")}
+						title={t("setups:detail.deleteSetup")}
 					>
 						<LucideIcon name="trash-2" size={16} />
 					</button>
@@ -303,10 +305,10 @@ function SetupDetailPage() {
 							/>
 						</div>
 						<h2 className="text-xl font-semibold text-gray-900 mb-2">
-							No items in this setup
+							{t("setups:detail.noItemsTitle")}
 						</h2>
 						<p className="text-sm text-gray-500 mb-6">
-							Add items from your collection to build this loadout.
+							{t("setups:detail.noItemsDescription")}
 						</p>
 						{showOwnerControls && (
 							<button
@@ -314,7 +316,7 @@ function SetupDetailPage() {
 								onClick={() => setPickerOpen(true)}
 								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
+								{t("setups:detail.addItems")}
 							</button>
 						)}
 					</div>
@@ -427,12 +429,10 @@ function SetupDetailPage() {
 					/>
 					<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">
-							Delete Setup
+							{t("setups:detail.deleteSetup")}
 						</h3>
 						<p className="text-sm text-gray-600 mb-6">
-							Are you sure you want to delete{" "}
-							<span className="font-medium">{setup.name}</span>? This will not
-							remove items from your collection.
+							{t("setups:detail.deleteConfirmMessage", { name: setup.name })}
 						</p>
 						<div className="flex justify-end gap-3">
 							<button
@@ -440,7 +440,7 @@ function SetupDetailPage() {
 								onClick={() => setConfirmDelete(false)}
 								className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
 							>
-								Cancel
+								{t("common:actions.cancel")}
 							</button>
 							<button
 								type="button"
@@ -448,7 +448,7 @@ function SetupDetailPage() {
 								disabled={deleteSetup.isPending}
 								className="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 disabled:opacity-50 rounded-lg transition-colors"
 							>
-								{deleteSetup.isPending ? "Deleting..." : "Delete"}
+								{deleteSetup.isPending ? t("common:actions.deleting") : t("common:actions.delete")}
 							</button>
 						</div>
 					</div>

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

@@ -1,6 +1,7 @@
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { Reorder } from "framer-motion";
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { CandidateCard } from "../../../components/CandidateCard";
 import { CandidateListItem } from "../../../components/CandidateListItem";
 import { CategoryPicker } from "../../../components/CategoryPicker";
@@ -24,6 +25,7 @@ export const Route = createFileRoute("/threads/$threadId/")({
 });
 
 function ThreadDetailPage() {
+	const { t } = useTranslation(["threads", "common"]);
 	const { threadId: threadIdParam } = Route.useParams();
 	const threadId = Number(threadIdParam);
 	const { data: thread, isLoading, isError } = useThread(threadId);
@@ -70,14 +72,14 @@ function ThreadDetailPage() {
 		return (
 			<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center">
 				<h2 className="text-xl font-semibold text-gray-900 mb-2">
-					Thread not found
+					{t("threads:detail.notFound")}
 				</h2>
 				<Link
 					to="/"
 					search={{ tab: "planning" }}
 					className="text-sm text-gray-600 hover:text-gray-700"
 				>
-					Back to planning
+					{t("threads:detail.backToPlanning")}
 				</Link>
 			</div>
 		);
@@ -106,7 +108,7 @@ function ThreadDetailPage() {
 					search={{ tab: "planning" }}
 					className="text-sm text-gray-500 hover:text-gray-700 mb-2 inline-block"
 				>
-					&larr; Back to planning
+					&larr; {t("threads:detail.backToPlanning")}
 				</Link>
 				<div className="flex items-center gap-3">
 					<h1 className="text-xl font-semibold text-gray-900">{thread.name}</h1>
@@ -117,7 +119,7 @@ function ThreadDetailPage() {
 								: "bg-gray-100 text-gray-500"
 						}`}
 					>
-						{isActive ? "Active" : "Resolved"}
+						{isActive ? t("threads:detail.statusActive") : t("threads:detail.statusResolved")}
 					</span>
 				</div>
 			</div>
@@ -126,8 +128,8 @@ function ThreadDetailPage() {
 			{!isActive && winningCandidate && (
 				<div className="mb-6 p-4 bg-amber-50 border border-amber-200 rounded-xl">
 					<p className="text-sm text-amber-800">
-						<span className="font-medium">{winningCandidate.name}</span> was
-						picked as the winner and added to your collection.
+						<span className="font-medium">{winningCandidate.name}</span>{" "}
+						{t("threads:detail.resolutionBanner")}
 					</p>
 				</div>
 			)}
@@ -153,7 +155,7 @@ function ThreadDetailPage() {
 								d="M12 4v16m8-8H4"
 							/>
 						</svg>
-						Add Candidate
+						{t("threads:detail.addCandidate")}
 					</button>
 				)}
 				{thread.candidates.length > 0 && (
@@ -166,7 +168,7 @@ function ThreadDetailPage() {
 									? "bg-gray-200 text-gray-900"
 									: "text-gray-400 hover:text-gray-600"
 							}`}
-							title="List view"
+							title={t("threads:detail.listView")}
 						>
 							<LucideIcon name="layout-list" size={16} />
 						</button>
@@ -178,7 +180,7 @@ function ThreadDetailPage() {
 									? "bg-gray-200 text-gray-900"
 									: "text-gray-400 hover:text-gray-600"
 							}`}
-							title="Grid view"
+							title={t("threads:detail.gridView")}
 						>
 							<LucideIcon name="layout-grid" size={16} />
 						</button>
@@ -191,7 +193,7 @@ function ThreadDetailPage() {
 										? "bg-gray-200 text-gray-900"
 										: "text-gray-400 hover:text-gray-600"
 								}`}
-								title="Compare view"
+								title={t("threads:detail.compareView")}
 							>
 								<LucideIcon name="columns-3" size={16} />
 							</button>
@@ -212,10 +214,10 @@ function ThreadDetailPage() {
 						/>
 					</div>
 					<h3 className="text-lg font-semibold text-gray-900 mb-1">
-						No candidates yet
+						{t("threads:detail.emptyCandidatesTitle")}
 					</h3>
 					<p className="text-sm text-gray-500">
-						Add your first candidate to start comparing.
+						{t("threads:detail.emptyCandidatesDescription")}
 					</p>
 				</div>
 			) : candidateViewMode === "compare" ? (
@@ -340,6 +342,7 @@ const INITIAL_MODAL_FORM: ModalFormData = {
 };
 
 function AddCandidateModal({ threadId, onClose }: AddCandidateModalProps) {
+	const { t } = useTranslation(["threads", "common"]);
 	const createCandidate = useCreateCandidate(threadId);
 	const { currency } = useCurrency();
 	const [form, setForm] = useState<ModalFormData>(INITIAL_MODAL_FORM);
@@ -348,26 +351,26 @@ function AddCandidateModal({ threadId, onClose }: AddCandidateModalProps) {
 	function validate(): boolean {
 		const newErrors: Record<string, string> = {};
 		if (!form.name.trim()) {
-			newErrors.name = "Name is required";
+			newErrors.name = t("common:errors.nameRequired");
 		}
 		if (
 			form.weightGrams &&
 			(Number.isNaN(Number(form.weightGrams)) || Number(form.weightGrams) < 0)
 		) {
-			newErrors.weightGrams = "Must be a positive number";
+			newErrors.weightGrams = t("common:errors.positiveNumber");
 		}
 		if (
 			form.priceDollars &&
 			(Number.isNaN(Number(form.priceDollars)) || Number(form.priceDollars) < 0)
 		) {
-			newErrors.priceDollars = "Must be a positive number";
+			newErrors.priceDollars = t("common:errors.positiveNumber");
 		}
 		if (
 			form.productUrl &&
 			form.productUrl.trim() !== "" &&
 			!form.productUrl.match(/^https?:\/\//)
 		) {
-			newErrors.productUrl = "Must be a valid URL (https://...)";
+			newErrors.productUrl = t("common:errors.validUrl");
 		}
 		setErrors(newErrors);
 		return Object.keys(newErrors).length === 0;
@@ -416,7 +419,7 @@ function AddCandidateModal({ threadId, onClose }: AddCandidateModalProps) {
 				onKeyDown={(e) => e.stopPropagation()}
 			>
 				<div className="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
-					<h2 className="text-lg font-semibold text-gray-900">Add Candidate</h2>
+					<h2 className="text-lg font-semibold text-gray-900">{t("threads:detail.addCandidateModal.title")}</h2>
 					<button
 						type="button"
 						onClick={onClose}
@@ -441,7 +444,7 @@ function AddCandidateModal({ threadId, onClose }: AddCandidateModalProps) {
 							htmlFor="modal-candidate-name"
 							className="block text-sm font-medium text-gray-700 mb-1"
 						>
-							Name *
+							{t("threads:candidateForm.nameRequired")}
 						</label>
 						<input
 							id="modal-candidate-name"
@@ -449,7 +452,7 @@ function AddCandidateModal({ threadId, onClose }: AddCandidateModalProps) {
 							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-gray-400 focus:border-transparent"
-							placeholder="e.g. Osprey Talon 22"
+							placeholder={t("threads:candidateForm.namePlaceholder")}
 							autoFocus
 						/>
 						{errors.name && (
@@ -464,7 +467,7 @@ function AddCandidateModal({ threadId, onClose }: AddCandidateModalProps) {
 								htmlFor="modal-candidate-weight"
 								className="block text-sm font-medium text-gray-700 mb-1"
 							>
-								Weight (g)
+								{t("threads:candidateForm.weightLabel")}
 							</label>
 							<input
 								id="modal-candidate-weight"
@@ -479,7 +482,7 @@ function AddCandidateModal({ threadId, onClose }: AddCandidateModalProps) {
 									}))
 								}
 								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"
+								placeholder={t("threads:candidateForm.weightPlaceholder")}
 							/>
 							{errors.weightGrams && (
 								<p className="mt-1 text-xs text-red-500">
@@ -492,7 +495,7 @@ function AddCandidateModal({ threadId, onClose }: AddCandidateModalProps) {
 								htmlFor="modal-candidate-price"
 								className="block text-sm font-medium text-gray-700 mb-1"
 							>
-								{`Price (${currency})`}
+								{t("threads:candidateForm.priceLabel", { currency })}
 							</label>
 							<input
 								id="modal-candidate-price"
@@ -507,7 +510,7 @@ function AddCandidateModal({ threadId, onClose }: AddCandidateModalProps) {
 									}))
 								}
 								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"
+								placeholder={t("threads:candidateForm.pricePlaceholder")}
 							/>
 							{errors.priceDollars && (
 								<p className="mt-1 text-xs text-red-500">
@@ -520,7 +523,7 @@ function AddCandidateModal({ threadId, onClose }: AddCandidateModalProps) {
 					{/* Category */}
 					<div>
 						<label className="block text-sm font-medium text-gray-700 mb-1">
-							Category
+							{t("threads:candidateForm.categoryLabel")}
 						</label>
 						<CategoryPicker
 							value={form.categoryId}
@@ -534,7 +537,7 @@ function AddCandidateModal({ threadId, onClose }: AddCandidateModalProps) {
 							htmlFor="modal-candidate-notes"
 							className="block text-sm font-medium text-gray-700 mb-1"
 						>
-							Notes
+							{t("threads:candidateForm.notesLabel")}
 						</label>
 						<textarea
 							id="modal-candidate-notes"
@@ -544,7 +547,7 @@ function AddCandidateModal({ threadId, onClose }: AddCandidateModalProps) {
 							}
 							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-gray-400 focus:border-transparent resize-none"
-							placeholder="Any additional notes..."
+							placeholder={t("threads:candidateForm.notesPlaceholder")}
 						/>
 					</div>
 
@@ -554,7 +557,7 @@ function AddCandidateModal({ threadId, onClose }: AddCandidateModalProps) {
 							htmlFor="modal-candidate-pros"
 							className="block text-sm font-medium text-gray-700 mb-1"
 						>
-							Pros
+							{t("threads:candidateForm.prosLabel")}
 						</label>
 						<textarea
 							id="modal-candidate-pros"
@@ -562,7 +565,7 @@ function AddCandidateModal({ threadId, onClose }: AddCandidateModalProps) {
 							onChange={(e) => setForm((f) => ({ ...f, pros: 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-gray-400 focus:border-transparent resize-none"
-							placeholder="One pro per line..."
+							placeholder={t("threads:candidateForm.prosPlaceholder")}
 						/>
 					</div>
 
@@ -572,7 +575,7 @@ function AddCandidateModal({ threadId, onClose }: AddCandidateModalProps) {
 							htmlFor="modal-candidate-cons"
 							className="block text-sm font-medium text-gray-700 mb-1"
 						>
-							Cons
+							{t("threads:candidateForm.consLabel")}
 						</label>
 						<textarea
 							id="modal-candidate-cons"
@@ -580,7 +583,7 @@ function AddCandidateModal({ threadId, onClose }: AddCandidateModalProps) {
 							onChange={(e) => setForm((f) => ({ ...f, cons: 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-gray-400 focus:border-transparent resize-none"
-							placeholder="One con per line..."
+							placeholder={t("threads:candidateForm.consPlaceholder")}
 						/>
 					</div>
 
@@ -590,7 +593,7 @@ function AddCandidateModal({ threadId, onClose }: AddCandidateModalProps) {
 							htmlFor="modal-candidate-url"
 							className="block text-sm font-medium text-gray-700 mb-1"
 						>
-							Product Link
+							{t("threads:candidateForm.productLinkLabel")}
 						</label>
 						<input
 							id="modal-candidate-url"
@@ -600,7 +603,7 @@ function AddCandidateModal({ threadId, onClose }: AddCandidateModalProps) {
 								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-gray-400 focus:border-transparent"
-							placeholder="https://..."
+							placeholder={t("threads:candidateForm.urlPlaceholder")}
 						/>
 						{errors.productUrl && (
 							<p className="mt-1 text-xs text-red-500">{errors.productUrl}</p>
@@ -614,14 +617,14 @@ function AddCandidateModal({ threadId, onClose }: AddCandidateModalProps) {
 							disabled={createCandidate.isPending}
 							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"
 						>
-							{createCandidate.isPending ? "Adding..." : "Add Candidate"}
+							{createCandidate.isPending ? t("threads:detail.addCandidateModal.adding") : t("threads:detail.addCandidateModal.submit")}
 						</button>
 						<button
 							type="button"
 							onClick={onClose}
 							className="py-2.5 px-4 text-sm text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-lg transition-colors"
 						>
-							Cancel
+							{t("common:actions.cancel")}
 						</button>
 					</div>
 				</form>

src/client/routes/users/$userId.tsx

@@ -1,4 +1,5 @@
 import { createFileRoute, Link } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
 import { PublicSetupCard } from "../../components/PublicSetupCard";
 import { usePublicProfile } from "../../hooks/useProfile";
 
@@ -7,6 +8,7 @@ export const Route = createFileRoute("/users/$userId")({
 });
 
 function PublicProfilePage() {
+	const { t } = useTranslation(["setups", "common"]);
 	const { userId } = Route.useParams();
 	const numericId = Number(userId);
 	const { data: profile, isLoading, isError } = usePublicProfile(numericId);
@@ -35,12 +37,12 @@ function PublicProfilePage() {
 	if (isError || !profile) {
 		return (
 			<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center">
-				<p className="text-gray-500">User not found.</p>
+				<p className="text-gray-500">{t("profile.userNotFound")}</p>
 				<Link
 					to="/"
 					className="text-sm text-gray-500 hover:text-gray-700 mt-4 inline-block"
 				>
-					&larr; Back to home
+					&larr; {t("profile.backToHome")}
 				</Link>
 			</div>
 		);
@@ -83,11 +85,11 @@ function PublicProfilePage() {
 			{/* Public setups */}
 			<div>
 				<h2 className="text-base font-medium text-gray-900 mb-4">
-					Public Setups
+					{t("profile.publicSetups")}
 				</h2>
 				{profile.setups.length === 0 ? (
 					<p className="text-sm text-gray-400 py-8 text-center">
-						No public setups yet
+						{t("profile.noPublicSetups")}
 					</p>
 				) : (
 					<div className="grid grid-cols-1 md:grid-cols-2 gap-4">