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/components/CastView.tsx

@@ -12,9 +12,10 @@ import { fetchAllCast } from '@/api';
 interface CastViewProps {
   onPersonClick: (person: Staff) => void;
   enabledCategories: MediaCategory[];
+  itemsPerPage?: number;
 }
 
-export default function CastView({ onPersonClick, enabledCategories }: CastViewProps) {
+export default function CastView({ onPersonClick, enabledCategories, itemsPerPage: initialItemsPerPage = 12 }: CastViewProps) {
   const navigate = useNavigate();
   const [staffList, setStaffList] = useState<Staff[]>([]);
   const [loading, setLoading] = useState(true);
@@ -34,7 +35,7 @@ export default function CastView({ onPersonClick, enabledCategories }: CastViewP
     return localStorage.getItem('castFilterMediaType') || '';
   });
   const [currentPage, setCurrentPage] = useState(1);
-  const [itemsPerPage, setItemsPerPage] = useState(12);
+  const [itemsPerPage, setItemsPerPage] = useState(initialItemsPerPage);
   const [showFilters, setShowFilters] = useState(false);
 
   // Persist filters and sorts
@@ -382,7 +383,7 @@ export default function CastView({ onPersonClick, enabledCategories }: CastViewP
               }}
               className="bg-zinc-100 border-none rounded-md px-2 py-1 text-sm font-bold text-zinc-700 focus:ring-2 focus:ring-[#6d28d9] outline-none"
             >
-              {[8, 12, 16, 24, 48].map(size => (
+              {[12, 20, 36, 48, 60].map(size => (
                 <option key={size} value={size}>{size}</option>
               ))}
             </select>