Add routing, cast API conversion, and filters

Introduce client-side routing and cast API support. Key changes:

- Add react-router-dom dependency and wire BrowserRouter in App.
- Convert App to route-based structure (/, /media/:id, /cast, /cast/:id, /add, /import) with MediaDetailRoute and CastDetailRoute helpers.
- Extend API types for cast items and add convertApiCastToStaff; fetchAllCast now returns Staff[] (mapped via converter).
- Update components to use react-router hooks (useNavigate, useParams, useLocation, Link/NavLink): Header links, DetailView, CastDetailView, AddMediaView, ImporterView and others now navigate via routes.
- Enhance CastView: fetch cast list, loading state, persistent search/sort/filter controls, filtering by occupations/media types and enabled categories, improved pagination and UI controls.
- Update stashapp importer: add configurable blacklist check to skip scenes, increase per_page for queries.

These changes consolidate navigation, improve cast data handling from the API, and add richer filtering and importer controls.

src/components/CastView.tsx

@@ -1,36 +1,159 @@
-import { Staff } from '@/types';
+import { Staff, MediaCategory } from '@/types';
 import { useState, useMemo, useEffect } from 'react';
-import { Search, ArrowUpDown, User, ChevronLeft, ChevronRight } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { Search, ArrowUpDown, User, ChevronLeft, ChevronRight, X, Filter } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
 import { motion, AnimatePresence } from 'motion/react';
 import { cn } from '@/lib/utils';
+import { fetchAllCast } from '@/api';
 
 interface CastViewProps {
-  staffList: Staff[];
   onPersonClick: (person: Staff) => void;
+  enabledCategories: MediaCategory[];
 }
 
-export default function CastView({ staffList, onPersonClick }: CastViewProps) {
-  const [searchQuery, setSearchQuery] = useState('');
-  const [sortBy, setSortBy] = useState<'name' | 'role'>('name');
+export default function CastView({ onPersonClick, enabledCategories }: CastViewProps) {
+  const navigate = useNavigate();
+  const [staffList, setStaffList] = useState<Staff[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState(() => {
+    return localStorage.getItem('castSearchQuery') || '';
+  });
+  const [sortBy, setSortBy] = useState<'name' | 'role' | 'birthDate' | 'height'>(() => {
+    return (localStorage.getItem('castSortBy') as 'name' | 'role' | 'birthDate' | 'height') || 'name';
+  });
+  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>(() => {
+    return (localStorage.getItem('castSortOrder') as 'asc' | 'desc') || 'asc';
+  });
+  const [filterOccupation, setFilterOccupation] = useState<string>(() => {
+    return localStorage.getItem('castFilterOccupation') || '';
+  });
+  const [filterMediaType, setFilterMediaType] = useState<string>(() => {
+    return localStorage.getItem('castFilterMediaType') || '';
+  });
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useState(12);
+  const [showFilters, setShowFilters] = useState(false);
+
+  // Persist filters and sorts
+  useEffect(() => {
+    localStorage.setItem('castSearchQuery', searchQuery);
+  }, [searchQuery]);
+
+  useEffect(() => {
+    localStorage.setItem('castSortBy', sortBy);
+  }, [sortBy]);
+
+  useEffect(() => {
+    localStorage.setItem('castSortOrder', sortOrder);
+  }, [sortOrder]);
+
+  useEffect(() => {
+    localStorage.setItem('castFilterOccupation', filterOccupation);
+  }, [filterOccupation]);
+
+  useEffect(() => {
+    localStorage.setItem('castFilterMediaType', filterMediaType);
+  }, [filterMediaType]);
+
+  const handleResetFilters = () => {
+    setSearchQuery('');
+    setSortBy('name');
+    setSortOrder('asc');
+    setFilterOccupation('');
+    setFilterMediaType('');
+  };
+
+  const hasActiveFilters = searchQuery || filterOccupation || filterMediaType || sortBy !== 'name' || sortOrder !== 'asc';
+
+  useEffect(() => {
+    const loadCast = async () => {
+      try {
+        const cast = await fetchAllCast();
+        setStaffList(cast);
+      } catch (error) {
+        console.error('Failed to load cast:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    loadCast();
+  }, []);
 
   const filteredStaff = useMemo(() => {
-    let list = staffList.filter(s => 
-      s.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      s.role.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      s.mediaTitle?.toLowerCase().includes(searchQuery.toLowerCase())
-    );
+    let list = staffList.filter(s => {
+      // Hide actors without linked media
+      if (!s.filmography || s.filmography.length === 0) {
+        return false;
+      }
+      
+      // Filter by enabled categories based on media_types
+      if (s.media_types && s.media_types.length > 0) {
+        const hasEnabledMediaType = s.media_types.some(type => {
+          const category = type.charAt(0).toUpperCase() + type.slice(1);
+          return enabledCategories.includes(category as MediaCategory);
+        });
+        if (!hasEnabledMediaType) {
+          return false;
+        }
+      }
+      
+      // Filter by occupation
+      if (filterOccupation && !s.occupations?.includes(filterOccupation)) {
+        return false;
+      }
+      
+      // Filter by media type
+      if (filterMediaType && !s.media_types?.includes(filterMediaType)) {
+        return false;
+      }
+      
+      return s.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+             s.role.toLowerCase().includes(searchQuery.toLowerCase()) ||
+             s.mediaTitle?.toLowerCase().includes(searchQuery.toLowerCase());
+    });
 
-    return list.sort((a, b) => a[sortBy].localeCompare(b[sortBy]));
-  }, [staffList, searchQuery, sortBy]);
+    // Sort
+    list.sort((a, b) => {
+      let comparison = 0;
+      
+      if (sortBy === 'name' || sortBy === 'role') {
+        comparison = a[sortBy].localeCompare(b[sortBy]);
+      } else if (sortBy === 'birthDate') {
+        const dateA = a.birthDate ? new Date(a.birthDate).getTime() : 0;
+        const dateB = b.birthDate ? new Date(b.birthDate).getTime() : 0;
+        comparison = dateA - dateB;
+      } else if (sortBy === 'height') {
+        const heightA = a.height || 0;
+        const heightB = b.height || 0;
+        comparison = heightA - heightB;
+      }
+      
+      return sortOrder === 'desc' ? -comparison : comparison;
+    });
+
+    return list;
+  }, [staffList, searchQuery, sortBy, sortOrder, filterOccupation, filterMediaType, enabledCategories]);
+
+  // Get unique occupations and media types for filters
+  const uniqueOccupations = useMemo(() => {
+    const occupations = new Set<string>();
+    staffList.forEach(s => s.occupations?.forEach(o => occupations.add(o)));
+    return Array.from(occupations).sort();
+  }, [staffList]);
+
+  const uniqueMediaTypes = useMemo(() => {
+    const mediaTypes = new Set<string>();
+    staffList.forEach(s => s.media_types?.forEach(m => mediaTypes.add(m)));
+    return Array.from(mediaTypes).sort();
+  }, [staffList]);
 
   // Reset to first page when filters or sorting change
   useEffect(() => {
     setCurrentPage(1);
-  }, [searchQuery, sortBy, itemsPerPage]);
+  }, [searchQuery, sortBy, sortOrder, filterOccupation, filterMediaType, itemsPerPage]);
 
   const totalPages = Math.ceil(filteredStaff.length / itemsPerPage);
 
@@ -67,18 +190,127 @@ export default function CastView({ staffList, onPersonClick }: CastViewProps) {
               className="pl-10 w-full md:w-[300px] bg-zinc-100 border-none rounded-full h-11"
             />
           </div>
+          <Button 
+            variant={showFilters ? 'default' : 'outline'}
+            size="icon" 
+            className={`rounded-full h-11 w-11 ${showFilters ? 'bg-[#6d28d9] text-white border-[#6d28d9]' : 'border-zinc-200'}`}
+            onClick={() => setShowFilters(!showFilters)}
+          >
+            <Filter size={20} />
+          </Button>
           <Button 
             variant="outline" 
             size="icon" 
             className="rounded-full h-11 w-11 border-zinc-200"
-            onClick={() => setSortBy(prev => prev === 'name' ? 'role' : 'name')}
+            onClick={() => setSortOrder(prev => prev === 'asc' ? 'desc' : 'asc')}
           >
             <ArrowUpDown size={20} />
           </Button>
+          {hasActiveFilters && (
+            <Button 
+              variant="ghost" 
+              size="icon" 
+              className="rounded-full h-11 w-11 text-zinc-400 hover:text-zinc-900"
+              onClick={handleResetFilters}
+              title="Reset filters"
+            >
+              <X size={20} />
+            </Button>
+          )}
         </div>
       </div>
 
-      {filteredStaff.length === 0 ? (
+      {showFilters && (
+        <motion.div 
+          initial={{ opacity: 0, height: 0 }}
+          animate={{ opacity: 1, height: 'auto' }}
+          exit={{ opacity: 0, height: 0 }}
+          className="bg-zinc-50 rounded-2xl p-6 mb-6"
+        >
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div>
+              <label className="text-sm font-bold text-zinc-700 mb-2 block">Sort By</label>
+              <select 
+                value={sortBy}
+                onChange={(e) => setSortBy(e.target.value as any)}
+                className="w-full bg-white border-zinc-200 rounded-lg px-3 py-2 text-sm font-bold text-zinc-700 focus:ring-2 focus:ring-[#6d28d9] outline-none"
+              >
+                <option value="name">Name</option>
+                <option value="role">Role</option>
+                <option value="birthDate">Birth Date</option>
+                <option value="height">Height</option>
+              </select>
+            </div>
+            <div>
+              <label className="text-sm font-bold text-zinc-700 mb-2 block">Occupation</label>
+              <select 
+                value={filterOccupation}
+                onChange={(e) => setFilterOccupation(e.target.value)}
+                className="w-full bg-white border-zinc-200 rounded-lg px-3 py-2 text-sm font-bold text-zinc-700 focus:ring-2 focus:ring-[#6d28d9] outline-none"
+              >
+                <option value="">All Occupations</option>
+                {uniqueOccupations.map(occ => (
+                  <option key={occ} value={occ}>{occ}</option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label className="text-sm font-bold text-zinc-700 mb-2 block">Media Type</label>
+              <select 
+                value={filterMediaType}
+                onChange={(e) => setFilterMediaType(e.target.value)}
+                className="w-full bg-white border-zinc-200 rounded-lg px-3 py-2 text-sm font-bold text-zinc-700 focus:ring-2 focus:ring-[#6d28d9] outline-none"
+              >
+                <option value="">All Media Types</option>
+                {uniqueMediaTypes.map(type => (
+                  <option key={type} value={type}>{type}</option>
+                ))}
+              </select>
+            </div>
+          </div>
+          <div className="mt-4 flex items-center gap-2">
+            {searchQuery && (
+              <Badge variant="secondary" className="gap-1">
+                Search: {searchQuery}
+                <button onClick={() => setSearchQuery('')} className="hover:text-zinc-900">
+                  <X size={12} />
+                </button>
+              </Badge>
+            )}
+            {filterOccupation && (
+              <Badge variant="secondary" className="gap-1">
+                Occupation: {filterOccupation}
+                <button onClick={() => setFilterOccupation('')} className="hover:text-zinc-900">
+                  <X size={12} />
+                </button>
+              </Badge>
+            )}
+            {filterMediaType && (
+              <Badge variant="secondary" className="gap-1">
+                Media Type: {filterMediaType}
+                <button onClick={() => setFilterMediaType('')} className="hover:text-zinc-900">
+                  <X size={12} />
+                </button>
+              </Badge>
+            )}
+            {(sortBy !== 'name' || sortOrder !== 'asc') && (
+              <Badge variant="secondary" className="gap-1">
+                Sort: {sortBy} ({sortOrder})
+                <button onClick={() => { setSortBy('name'); setSortOrder('asc'); }} className="hover:text-zinc-900">
+                  <X size={12} />
+                </button>
+              </Badge>
+            )}
+          </div>
+        </motion.div>
+      )}
+
+      {loading ? (
+        <div className="flex flex-col items-center justify-center py-20 text-zinc-400">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#6d28d9] mb-4" />
+          <p className="text-lg font-bold">Loading cast...</p>
+        </div>
+      ) : filteredStaff.length === 0 ? (
         <div className="flex flex-col items-center justify-center py-20 text-zinc-400">
           <User size={48} className="mb-4 opacity-20" />
           <p className="text-lg font-bold">No cast members found</p>
@@ -88,7 +320,7 @@ export default function CastView({ staffList, onPersonClick }: CastViewProps) {
           <AnimatePresence mode="popLayout">
             {paginatedStaff.map((person) => (
               <motion.div 
-                key={`${person.id}-${person.mediaId}`}
+                key={person.id}
                 layout
                 initial={{ opacity: 0, scale: 0.9 }}
                 animate={{ opacity: 1, scale: 1 }}
@@ -115,21 +347,23 @@ export default function CastView({ staffList, onPersonClick }: CastViewProps) {
                   </div>
                 </div>
 
-                <div className="bg-zinc-50 rounded-xl p-3 flex items-center gap-3">
-                  <div className="w-10 h-12 rounded-lg overflow-hidden shrink-0 bg-white">
-                    <img 
-                      src={person.characterImage} 
-                      alt={person.characterName} 
-                      className="w-full h-full object-contain"
-                      referrerPolicy="no-referrer"
-                    />
+                {person.filmography && person.filmography.length > 0 && (
+                  <div className="bg-zinc-50 rounded-xl p-3 flex items-center gap-3">
+                    <div className="w-10 h-12 rounded-lg overflow-hidden shrink-0 bg-white">
+                      <img 
+                        src={person.filmography[0].poster || person.photo} 
+                        alt={person.filmography[0].title} 
+                        className="w-full h-full object-cover"
+                        referrerPolicy="no-referrer"
+                      />
+                    </div>
+                    <div className="min-w-0">
+                      <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest leading-none mb-1">Latest Role</p>
+                      <p className="text-xs font-bold text-zinc-700 truncate">{person.filmography[0].title}</p>
+                      <p className="text-[10px] text-[#6d28d9] font-bold truncate mt-1">{person.filmography[0].role}</p>
+                    </div>
                   </div>
-                  <div className="min-w-0">
-                    <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest leading-none mb-1">Character</p>
-                    <p className="text-xs font-bold text-zinc-700 truncate">{person.characterName}</p>
-                    <p className="text-[10px] text-[#6d28d9] font-bold truncate mt-1">in {person.mediaTitle}</p>
-                  </div>
-                </div>
+                )}
               </motion.div>
             ))}
           </AnimatePresence>