feat: add settings page and theme toggle in user dropdown

- Settings page with Appearance, Navigation, and Account sections
- Theme toggle (System/Light/Dark) in profile dropdown
- Theme syncs with API preferences on login
- Default room preference syncs with backend

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

lib/shared/layouts/widgets/profile_dropdown.dart

@@ -1,7 +1,10 @@
+import 'dart:developer' as developer;
+
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
 import 'package:tatlock_ui/core/auth/auth_provider.dart';
+import 'package:tatlock_ui/core/theme/theme_provider.dart';
 import 'package:tatlock_ui/routing/app_router.dart';
 
 /// Profile dropdown menu in the header.
@@ -13,6 +16,7 @@ class ProfileDropdown extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final authState = ref.watch(authProvider);
+    final currentTheme = ref.watch(themeProvider);
     final colorScheme = Theme.of(context).colorScheme;
 
     return authState.when(
@@ -76,6 +80,102 @@ class ProfileDropdown extends ConsumerWidget {
             ),
           ),
 
+          // Theme submenu header
+          PopupMenuItem<String>(
+            enabled: false,
+            height: 32,
+            child: Text(
+              'THEME',
+              style: Theme.of(context).textTheme.labelSmall?.copyWith(
+                    color: colorScheme.onSurfaceVariant,
+                    letterSpacing: 0.5,
+                  ),
+            ),
+          ),
+
+          // Theme: System
+          PopupMenuItem<String>(
+            value: 'theme_system',
+            height: 40,
+            child: Row(
+              children: [
+                Icon(
+                  Icons.brightness_auto,
+                  size: 18,
+                  color: currentTheme == ThemeSetting.system
+                      ? colorScheme.primary
+                      : null,
+                ),
+                const SizedBox(width: 12),
+                Text(
+                  'System',
+                  style: currentTheme == ThemeSetting.system
+                      ? TextStyle(color: colorScheme.primary)
+                      : null,
+                ),
+                const Spacer(),
+                if (currentTheme == ThemeSetting.system)
+                  Icon(Icons.check, size: 16, color: colorScheme.primary),
+              ],
+            ),
+          ),
+
+          // Theme: Light
+          PopupMenuItem<String>(
+            value: 'theme_light',
+            height: 40,
+            child: Row(
+              children: [
+                Icon(
+                  Icons.light_mode,
+                  size: 18,
+                  color: currentTheme == ThemeSetting.light
+                      ? colorScheme.primary
+                      : null,
+                ),
+                const SizedBox(width: 12),
+                Text(
+                  'Light',
+                  style: currentTheme == ThemeSetting.light
+                      ? TextStyle(color: colorScheme.primary)
+                      : null,
+                ),
+                const Spacer(),
+                if (currentTheme == ThemeSetting.light)
+                  Icon(Icons.check, size: 16, color: colorScheme.primary),
+              ],
+            ),
+          ),
+
+          // Theme: Dark
+          PopupMenuItem<String>(
+            value: 'theme_dark',
+            height: 40,
+            child: Row(
+              children: [
+                Icon(
+                  Icons.dark_mode,
+                  size: 18,
+                  color: currentTheme == ThemeSetting.dark
+                      ? colorScheme.primary
+                      : null,
+                ),
+                const SizedBox(width: 12),
+                Text(
+                  'Dark',
+                  style: currentTheme == ThemeSetting.dark
+                      ? TextStyle(color: colorScheme.primary)
+                      : null,
+                ),
+                const Spacer(),
+                if (currentTheme == ThemeSetting.dark)
+                  Icon(Icons.check, size: 16, color: colorScheme.primary),
+              ],
+            ),
+          ),
+
+          const PopupMenuDivider(),
+
           // Logout (only if authenticated)
           if (auth.isAuthenticated)
             const PopupMenuItem<String>(
@@ -93,6 +193,12 @@ class ProfileDropdown extends ConsumerWidget {
           switch (value) {
             case 'settings':
               context.go(AppRoutes.settings);
+            case 'theme_system':
+              _updateTheme(ref, ThemeSetting.system);
+            case 'theme_light':
+              _updateTheme(ref, ThemeSetting.light);
+            case 'theme_dark':
+              _updateTheme(ref, ThemeSetting.dark);
             case 'logout':
               ref.read(authProvider.notifier).signOut();
           }
@@ -126,4 +232,20 @@ class ProfileDropdown extends ConsumerWidget {
     }
     return name[0].toUpperCase();
   }
+
+  /// Update theme locally and sync to API.
+  Future<void> _updateTheme(WidgetRef ref, ThemeSetting setting) async {
+    // Update local theme immediately for instant UI response
+    await ref.read(themeProvider.notifier).setSetting(setting);
+
+    // Sync to backend (fire-and-forget, errors logged not shown)
+    try {
+      await ref.read(authProvider.notifier).updatePreferences(
+            theme: setting.name,
+          );
+    } catch (e) {
+      // Theme still works locally even if API sync fails
+      developer.log('Failed to sync theme preference: $e', name: 'profile');
+    }
+  }
 }