Add user settings UI and API integration

Introduce a full user settings feature: add a SettingsView component and UserSettings type, plus API helpers to fetch, create, and update settings (convertors between API and app shapes). App now loads settings on mount, persists category toggles to the API, exposes a /settings route, and passes itemsPerPage into BrowseView and CastView. Header gains a settings icon/link and BrowseView/CastView update pagination option defaults. This enables centralized library/display/content preferences and syncs them with the backend.

src/api.ts

@@ -1,4 +1,4 @@
-import { Media, Staff } from './types';
+import { Media, Staff, UserSettings, MediaCategory } from './types';
 
 const BASE_URL = 'http://192.168.1.102:6400';
 
@@ -625,3 +625,144 @@ export async function fetchMediaFromApi(apiUrl?: string): Promise<Media[]> {
 export async function fetchMediaFromLocalJson(): Promise<Media[]> {
   return fetchAllMedia();
 }
+
+// Settings API Types
+export interface ApiSettingsItem {
+  id?: number;
+  enabled_categories: string[];
+  items_per_page: number;
+  default_view: string;
+  show_adult_content: boolean;
+  auto_play_trailers: boolean;
+  language: string;
+  theme: string;
+  created_at?: string;
+  updated_at?: string;
+}
+
+export interface CreateSettingsInput {
+  enabled_categories: string[];
+  items_per_page?: number;
+  default_view?: string;
+  show_adult_content?: boolean;
+  auto_play_trailers?: boolean;
+  language?: string;
+  theme?: string;
+}
+
+export interface UpdateSettingsInput extends Partial<CreateSettingsInput> {}
+
+export function convertApiToSettings(apiItem: ApiSettingsItem): UserSettings {
+  return {
+    id: apiItem.id,
+    enabledCategories: apiItem.enabled_categories as MediaCategory[],
+    itemsPerPage: apiItem.items_per_page || 20,
+    defaultView: (apiItem.default_view as 'grid' | 'list') || 'grid',
+    showAdultContent: apiItem.show_adult_content || false,
+    autoPlayTrailers: apiItem.auto_play_trailers || false,
+    language: apiItem.language || 'en',
+    theme: (apiItem.theme as 'light' | 'dark' | 'system') || 'system',
+    createdAt: apiItem.created_at,
+    updatedAt: apiItem.updated_at,
+  };
+}
+
+export function convertSettingsToApi(settings: UserSettings): CreateSettingsInput {
+  return {
+    enabled_categories: settings.enabledCategories,
+    items_per_page: settings.itemsPerPage,
+    default_view: settings.defaultView,
+    show_adult_content: settings.showAdultContent,
+    auto_play_trailers: settings.autoPlayTrailers,
+    language: settings.language,
+    theme: settings.theme,
+  };
+}
+
+// Settings API Functions
+export async function fetchSettings(): Promise<UserSettings | null> {
+  try {
+    const response = await fetch(`${BASE_URL}/api/settings`);
+    if (!response.ok) {
+      // If settings don't exist (404), return null to use defaults
+      if (response.status === 404) {
+        return null;
+      }
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const data: ApiResponse<ApiSettingsItem> = await response.json();
+    
+    if (data.success && data.data) {
+      return convertApiToSettings(data.data);
+    }
+    return null;
+  } catch (error) {
+    console.error('Error fetching settings:', error);
+    return null;
+  }
+}
+
+export async function createSettings(settings: UserSettings): Promise<UserSettings | null> {
+  try {
+    const apiSettings = convertSettingsToApi(settings);
+    console.log('Creating settings:', apiSettings);
+    const response = await fetch(`${BASE_URL}/api/settings`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(apiSettings),
+    });
+    console.log('Create settings response status:', response.status);
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error('Create settings error response:', errorText);
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const data: ApiResponse<ApiSettingsItem> = await response.json();
+    console.log('Create settings response:', data);
+    
+    if (data.success && data.data) {
+      return convertApiToSettings(data.data);
+    }
+    return null;
+  } catch (error) {
+    console.error('Error creating settings:', error);
+    return null;
+  }
+}
+
+export async function updateSettings(settings: UserSettings): Promise<UserSettings | null> {
+  try {
+    const apiSettings = convertSettingsToApi(settings);
+    console.log('Updating settings:', apiSettings);
+    const response = await fetch(`${BASE_URL}/api/settings`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(apiSettings),
+    });
+    console.log('Update settings response status:', response.status);
+    if (!response.ok) {
+      // If settings don't exist (404), try creating them instead
+      if (response.status === 404) {
+        console.log('Settings not found, attempting to create...');
+        return createSettings(settings);
+      }
+      const errorText = await response.text();
+      console.error('Update settings error response:', errorText);
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const data: ApiResponse<ApiSettingsItem> = await response.json();
+    console.log('Update settings response:', data);
+    
+    if (data.success && data.data) {
+      return convertApiToSettings(data.data);
+    }
+    return null;
+  } catch (error) {
+    console.error('Error updating settings:', error);
+    return null;
+  }
+}