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/components/UserMenu.tsx

@@ -1,10 +1,12 @@
 import { Link } from "@tanstack/react-router";
 import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useAuth, useLogout } from "../hooks/useAuth";
 import { usePublicProfile } from "../hooks/useProfile";
 import { LucideIcon } from "../lib/iconData";
 
 export function UserMenu() {
+	const { t } = useTranslation();
 	const [open, setOpen] = useState(false);
 	const menuRef = useRef<HTMLDivElement>(null);
 	const { logout } = useLogout();
@@ -34,7 +36,7 @@ export function UserMenu() {
 				{avatarUrl ? (
 					<img
 						src={avatarUrl}
-						alt="Profile"
+						alt={t("nav.profile")}
 						className="w-8 h-8 rounded-full object-cover"
 					/>
 				) : (
@@ -53,7 +55,7 @@ export function UserMenu() {
 							size={16}
 							className="text-gray-400"
 						/>
-						Profile
+						{t("nav.profile")}
 					</Link>
 					<Link
 						to="/settings"
@@ -61,7 +63,7 @@ export function UserMenu() {
 						className="flex items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
 					>
 						<LucideIcon name="settings" size={16} className="text-gray-400" />
-						Settings
+						{t("nav.settings")}
 					</Link>
 					<div className="border-t border-gray-100 my-1" />
 					<button
@@ -73,7 +75,7 @@ export function UserMenu() {
 						className="flex items-center gap-2 w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
 					>
 						<LucideIcon name="log-out" size={16} className="text-gray-400" />
-						Sign out
+						{t("auth.signOut")}
 					</button>
 				</div>
 			)}