Added routes

apps/web/src/features/settings/AppearanceCard.tsx

@@ -0,0 +1,42 @@
+import { Check } from 'lucide-react'
+import { cn } from '../../lib/utils'
+import { useTheme } from '../../context/ThemeProvider'
+import { THEME_ICONS, THEME_OPTIONS } from './constants'
+
+export function AppearanceCard() {
+  const { theme, setTheme } = useTheme()
+
+  return (
+    <div className="divide-y divide-border rounded-xl border border-border bg-surface">
+      <div className="px-4 py-3">
+        <p className="text-sm font-medium text-primary">Apariencia</p>
+        <p className="text-xs text-foreground/50">Tema claro u oscuro</p>
+      </div>
+      {THEME_OPTIONS.map((option) => {
+        const Icon = THEME_ICONS[option.value]
+        const isSelected = theme === option.value
+        return (
+          <button
+            key={option.value}
+            type="button"
+            onClick={() => setTheme(option.value)}
+            className="flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-primary-soft"
+          >
+            <span className={cn('rounded-lg p-2', isSelected ? 'bg-accent-soft' : 'bg-primary-soft')}>
+              <Icon
+                className={cn('size-4', isSelected ? 'text-accent-fg' : 'text-foreground/70')}
+              />
+            </span>
+            <div className="min-w-0 flex-1">
+              <p className={cn('text-sm font-medium', isSelected ? 'text-accent-fg' : 'text-primary')}>
+                {option.label}
+              </p>
+              <p className="text-xs text-foreground/50">{option.description}</p>
+            </div>
+            {isSelected ? <Check className="size-4 text-accent-fg" /> : null}
+          </button>
+        )
+      })}
+    </div>
+  )
+}

apps/web/src/features/settings/SettingsView.tsx

@@ -0,0 +1,41 @@
+import { Link } from '@tanstack/react-router'
+import { Fingerprint } from 'lucide-react'
+import { signOut } from '../../lib/auth-client'
+import { Button } from '../../components/ui'
+import { AppearanceCard } from './AppearanceCard'
+
+export function SettingsView() {
+  const handleSignOut = async () => {
+    await signOut({
+      fetchOptions: { headers: { 'Cache-Control': 'no-cache' } },
+    })
+    window.location.assign('/login')
+  }
+
+  return (
+    <section className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-primary">Ajustes</h1>
+        <p className="mt-1 text-sm text-foreground/60">Configurá tu cuenta y tus grupos.</p>
+      </div>
+
+      <div className="divide-y divide-border rounded-xl border border-border bg-surface">
+        <Link to="/seguridad" className="flex items-center gap-3 px-4 py-3 hover:bg-primary-soft">
+          <span className="rounded-lg bg-accent-soft p-2">
+            <Fingerprint className="size-4 text-accent-fg" />
+          </span>
+          <div className="min-w-0 flex-1">
+            <p className="text-sm font-medium text-primary">Seguridad</p>
+            <p className="text-xs text-foreground/50">Contraseña y passkeys</p>
+          </div>
+        </Link>
+      </div>
+
+      <AppearanceCard />
+
+      <Button variant="outline" onClick={handleSignOut}>
+        Cerrar sesión
+      </Button>
+    </section>
+  )
+}

apps/web/src/features/settings/constants.ts

@@ -0,0 +1,14 @@
+import { Monitor, Moon, Sun } from 'lucide-react'
+import type { Theme } from '../../context/ThemeProvider'
+
+export const THEME_OPTIONS: { value: Theme; label: string; description: string }[] = [
+  { value: 'light', label: 'Claro', description: 'Interfaz en tonos claros' },
+  { value: 'dark', label: 'Oscuro', description: 'Interfaz en tonos oscuros' },
+  { value: 'system', label: 'Sistema', description: 'Sigue la preferencia de tu dispositivo' },
+]
+
+export const THEME_ICONS: Record<Theme, typeof Sun> = {
+  light: Sun,
+  dark: Moon,
+  system: Monitor,
+}