feat(i18n): extract strings from navigation, dialogs, onboarding, settings, and login

- Add useTranslation() to TopNav, BottomTabBar, FabMenu, UserMenu
- Internationalize ConfirmDialog, AuthPromptModal, ExternalLinkDialog
- Extract all onboarding flow strings (Welcome, HobbyPicker, ItemBrowser, Review, Done)
- Internationalize settings page (weight unit, currency, API keys, import/export)
- Internationalize login page and root error boundary
- All dialogs in __root.tsx use t() for UI chrome

Phase 34, Plan 02 (core navigation and global UI)

src/client/routes/settings.tsx

@@ -1,5 +1,6 @@
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
 import {
 	useApiKeys,
 	useAuth,
@@ -27,6 +28,7 @@ export const Route = createFileRoute("/settings")({
 });
 
 function ApiKeySection() {
+	const { t } = useTranslation("settings");
 	const { data: keys } = useApiKeys();
 	const createKey = useCreateApiKey();
 	const deleteKey = useDeleteApiKey();
@@ -42,16 +44,15 @@ function ApiKeySection() {
 
 	return (
 		<div className="space-y-3">
-			<h3 className="text-sm font-medium text-gray-900">API Keys</h3>
+			<h3 className="text-sm font-medium text-gray-900">{t("apiKeys.title")}</h3>
 			<p className="text-xs text-gray-500">
-				API keys allow programmatic access to GearBox (e.g., from Claude Desktop
-				or scripts).
+				{t("apiKeys.description")}
 			</p>
 
 			{newKey && (
 				<div className="bg-amber-50 border border-amber-200 rounded-lg p-3">
 					<p className="text-xs font-medium text-amber-800 mb-1">
-						Copy this key now — it won't be shown again:
+						{t("apiKeys.copyWarning")}
 					</p>
 					<code className="text-xs text-amber-900 break-all select-all">
 						{newKey}
@@ -61,7 +62,7 @@ function ApiKeySection() {
 						onClick={() => setNewKey(null)}
 						className="mt-2 block text-xs text-amber-700 hover:text-amber-900"
 					>
-						Dismiss
+						{t("common:actions.dismiss")}
 					</button>
 				</div>
 			)}
@@ -69,7 +70,7 @@ function ApiKeySection() {
 			<form onSubmit={handleCreate} className="flex gap-2">
 				<input
 					type="text"
-					placeholder="Key name (e.g., claude-desktop)"
+					placeholder={t("apiKeys.namePlaceholder")}
 					value={name}
 					onChange={(e) => setName(e.target.value)}
 					required
@@ -80,7 +81,7 @@ function ApiKeySection() {
 					disabled={createKey.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"
 				>
-					Create
+					{t("common:actions.create")}
 				</button>
 			</form>
 
@@ -102,7 +103,7 @@ function ApiKeySection() {
 								onClick={() => deleteKey.mutate(key.id)}
 								className="text-xs text-red-500 hover:text-red-700"
 							>
-								Revoke
+								{t("common:actions.revoke")}
 							</button>
 						</div>
 					))}
@@ -113,6 +114,7 @@ function ApiKeySection() {
 }
 
 function ImportExportSection() {
+	const { t } = useTranslation("settings");
 	const exportItems = useExportItems();
 	const importItems = useImportItems();
 	const fileInputRef = useRef<HTMLInputElement>(null);
@@ -142,9 +144,9 @@ function ImportExportSection() {
 
 	return (
 		<div className="space-y-3">
-			<h3 className="text-sm font-medium text-gray-900">Import / Export</h3>
+			<h3 className="text-sm font-medium text-gray-900">{t("importExport.title")}</h3>
 			<p className="text-xs text-gray-500">
-				Export your gear collection as a CSV file, or import items from a CSV.
+				{t("importExport.description")}
 			</p>
 
 			<div className="flex flex-wrap gap-2">
@@ -153,11 +155,11 @@ function ImportExportSection() {
 					onClick={exportItems}
 					className="px-4 py-2 text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 rounded-lg transition-colors"
 				>
-					Export CSV
+					{t("importExport.export")}
 				</button>
 
 				<label className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 hover:bg-gray-50 rounded-lg transition-colors cursor-pointer">
-					{importItems.isPending ? "Importing..." : "Import CSV"}
+					{importItems.isPending ? t("importExport.importing") : t("importExport.import")}
 					<input
 						ref={fileInputRef}
 						type="file"
@@ -179,12 +181,11 @@ function ImportExportSection() {
 				>
 					{importResult.imported > 0 && (
 						<p className="font-medium">
-							{importResult.imported} item
-							{importResult.imported !== 1 ? "s" : ""} imported.
+							{t("importExport.imported", { count: importResult.imported })}
 						</p>
 					)}
 					{importResult.createdCategories.length > 0 && (
-						<p>New categories: {importResult.createdCategories.join(", ")}</p>
+						<p>{t("importExport.newCategories", { categories: importResult.createdCategories.join(", ") })}</p>
 					)}
 					{importResult.errors.map((err, i) => (
 						// biome-ignore lint/suspicious/noArrayIndexKey: static error list
@@ -193,7 +194,7 @@ function ImportExportSection() {
 						</p>
 					))}
 					{importResult.imported === 0 && importResult.errors.length === 0 && (
-						<p>No items found in the CSV.</p>
+						<p>{t("importExport.noItemsFound")}</p>
 					)}
 				</div>
 			)}
@@ -228,6 +229,7 @@ function getSuggestedCurrency(): Currency | null {
 }
 
 function SettingsPage() {
+	const { t } = useTranslation("settings");
 	const unit = useWeightUnit();
 	const { currency, showConversions } = useCurrency();
 	const updateSetting = useUpdateSetting();
@@ -245,9 +247,9 @@ function SettingsPage() {
 					to="/"
 					className="text-sm text-gray-500 hover:text-gray-700 mb-2 inline-block"
 				>
-					&larr; Back
+					&larr; {t("common:actions.back")}
 				</Link>
-				<h1 className="text-xl font-semibold text-gray-900">Settings</h1>
+				<h1 className="text-xl font-semibold text-gray-900">{t("title")}</h1>
 			</div>
 
 			{showSuggestion && (
@@ -279,9 +281,9 @@ function SettingsPage() {
 			<div className="bg-white rounded-xl border border-gray-100 p-5 space-y-6">
 				<div className="flex items-center justify-between">
 					<div>
-						<h3 className="text-sm font-medium text-gray-900">Weight Unit</h3>
+						<h3 className="text-sm font-medium text-gray-900">{t("weightUnit.title")}</h3>
 						<p className="text-xs text-gray-500 mt-0.5">
-							Choose the unit used to display weights across the app
+							{t("weightUnit.description")}
 						</p>
 					</div>
 					<div className="flex items-center gap-1 bg-gray-100 rounded-full px-1 py-0.5">
@@ -312,10 +314,10 @@ function SettingsPage() {
 				<div className="flex items-center justify-between">
 					<div>
 						<h3 className="text-sm font-medium text-gray-900">
-							Market & Currency
+							{t("currency.title")}
 						</h3>
 						<p className="text-xs text-gray-500 mt-0.5">
-							Sets your market region and currency for price display
+							{t("currency.description")}
 						</p>
 					</div>
 					<div className="flex items-center gap-1 bg-gray-100 rounded-full px-1 py-0.5">