Feat/settings page redesign (#104)

* include credentials on login fetch requests, allows set header response

* Add theme composable and utility improvements

- Create useTheme composable for centralized theme management
- Update main.ts to use useTheme for initialization
- Generalize getCookie utility in user module
- Add utility functions for data formatting

* Add Plex integration composables and icons

- Create usePlexAuth composable for Plex OAuth flow
- Create usePlexApi composable for Plex API interactions
- Create useRandomWords composable for password generation
- Add Plex-related icons (IconPlex, IconServer, IconSync)
- Add Plex helper utilities
- Update API with Plex-related endpoints

* Add storage management components for data & privacy section

- Create StorageManager component for browser storage overview
- Create StorageSectionBrowser for localStorage/sessionStorage/cookies
- Create StorageSectionServer for server-side data (mock)
- Create ExportSection for data export functionality
- Refactor DataExport component with modular sections
- Add storage icons (IconCookie, IconDatabase, IconTimer)
- Implement collapsible sections with visual indicators
- Add colored borders per storage type
- Display item counts and total size in headers

* Add theme, password, and security settings components

- Create ThemePreferences with visual theme selector
- Create PasswordGenerator with passphrase and random modes
- Create SecuritySettings wrapper for password management
- Update ChangePassword to work with new layout
- Implement improved slider UX with visual feedback
- Add theme preview cards with gradients
- Standardize component styling and typography

* Add Plex settings and authentication components

- Create PlexSettings component for Plex account management
- Create PlexAuthButton with improved OAuth flow
- Create PlexServerInfo for server details display
- Use icon components instead of inline SVGs
- Add sync and unlink functionality
- Implement user-friendly authentication flow

* Redesign settings page with two-column layout and ProfileHero

- Create ProfileHero component with avatar and user info
- Create RequestHistory component for Plex requests (placeholder)
- Redesign SettingsPage with modern two-column grid layout
- Add shared-settings.scss for consistent styling
- Organize sections: Appearance, Security, Integrations, Data & Privacy
- Implement responsive mobile layout
- Standardize typography (h2: 1.5rem, 700 weight)
- Add compact modifier for tighter sections

src/composables/useTheme.ts

@@ -0,0 +1,56 @@
+import { ref, computed } from "vue";
+
+type Theme = "light" | "dark" | "auto";
+
+const currentTheme = ref<Theme>("auto");
+
+function systemDarkModeEnabled(): boolean {
+  const computedStyle = window.getComputedStyle(document.body);
+  if (computedStyle?.colorScheme != null) {
+    return computedStyle.colorScheme.includes("dark");
+  }
+  return false;
+}
+
+function applyTheme(theme: Theme) {
+  if (theme === "auto") {
+    const systemDark = systemDarkModeEnabled();
+    document.body.className = systemDark ? "dark" : "light";
+  } else {
+    document.body.className = theme;
+  }
+}
+
+export function useTheme() {
+  const savedTheme = computed(() => {
+    return (localStorage.getItem("theme-preference") as Theme) || "auto";
+  });
+
+  function initTheme() {
+    const theme = savedTheme.value;
+    currentTheme.value = theme;
+    applyTheme(theme);
+
+    // Listen for system theme changes when in auto mode
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    mediaQuery.addEventListener("change", e => {
+      const currentSetting = localStorage.getItem("theme-preference") as Theme;
+      if (currentSetting === "auto") {
+        document.body.className = e.matches ? "dark" : "light";
+      }
+    });
+  }
+
+  function setTheme(theme: Theme) {
+    currentTheme.value = theme;
+    localStorage.setItem("theme-preference", theme);
+    applyTheme(theme);
+  }
+
+  return {
+    currentTheme,
+    savedTheme,
+    initTheme,
+    setTheme
+  };
+}