feat(client): add i18n with i18next and react-i18next

- install i18next and react-i18next
- create src/i18n/index.ts bootstrapping i18next with initReactI18next
- add src/i18n/locales/en.json with keys for nav, all pages, and ThemeSwitcher
- replace hardcoded English strings in App, all pages, and ThemeSwitcher with t()
- move static column definitions inside components where useTranslation is available

client/src/pages/SessionsPage.tsx

@@ -1,10 +1,12 @@
 import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { sessions } from '../api';
 import type { Session } from '../api';
 import { Badge, Button, Table, type TableColumn } from '../ui';
 import styles from './Page.module.css';
 
 export function SessionsPage() {
+  const { t } = useTranslation();
   const [items, setItems] = useState<Session[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -25,11 +27,11 @@ export function SessionsPage() {
   };
 
   const columns: TableColumn<Session>[] = [
-    { key: 'id',      header: 'ID',       render: (s) => s.id,          width: 60 },
-    { key: 'name',    header: 'Name',     render: (s) => s.sessionName },
+    { key: 'id',      header: t('sessions.col_id'),       render: (s) => s.id,          width: 60 },
+    { key: 'name',    header: t('sessions.col_name'),     render: (s) => s.sessionName },
     {
       key: 'status',
-      header: 'Status',
+      header: t('sessions.col_status'),
       width: 100,
       render: (s) => (
         <Badge variant={s.status === 'open' ? 'success' : 'neutral'}>
@@ -39,7 +41,7 @@ export function SessionsPage() {
     },
     {
       key: 'lastUsed',
-      header: 'Last Used',
+      header: t('sessions.col_lastUsed'),
       width: 160,
       render: (s) => s.lastUsedAt ? new Date(s.lastUsedAt).toLocaleString() : '—',
     },
@@ -50,7 +52,7 @@ export function SessionsPage() {
       align: 'right',
       render: (s) => (
         <Button variant="secondary" size="sm" onClick={() => handleDelete(s.id)}>
-          Delete
+          {t('sessions.action_delete')}
         </Button>
       ),
     },
@@ -58,14 +60,14 @@ export function SessionsPage() {
 
   return (
     <div>
-      <h1 className={styles.heading}>Sessions</h1>
+      <h1 className={styles.heading}>{t('sessions.title')}</h1>
       {error && <p className={styles.error}>{error}</p>}
       <Table
         columns={columns}
         data={items}
         rowKey={(s) => s.id}
         loading={loading}
-        emptyMessage="No sessions yet."
+        emptyMessage={t('sessions.empty')}
       />
     </div>
   );