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.

package-lock.json

@@ -21,6 +21,7 @@
         "motion": "^12.38.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-router-dom": "^7.14.0",
         "shadcn": "^4.2.0",
         "tailwind-merge": "^3.5.0",
         "tw-animate-css": "^1.4.0",
@@ -5846,6 +5847,57 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.14.0.tgz",
+      "integrity": "sha512-m/xR9N4LQLmAS0ZhkY2nkPA1N7gQ5TUVa5n8TgANuDTARbn1gt+zLPXEm7W0XDTbrQ2AJSJKhoa6yx1D8BcpxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.14.0.tgz",
+      "integrity": "sha512-2G3ajSVSZMEtmTjIklRWlNvo8wICEpLihfD/0YMDxbWK2UyP5EGfnoIn9AIQGnF3G/FX0MRbHXdFcD+rL1ZreQ==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.14.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/react-router/node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/recast": {
       "version": "0.23.11",
       "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.11.tgz",
@@ -6146,6 +6198,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",

package.json

@@ -24,6 +24,7 @@
     "motion": "^12.38.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-router-dom": "^7.14.0",
     "shadcn": "^4.2.0",
     "tailwind-merge": "^3.5.0",
     "tw-animate-css": "^1.4.0",

src/App.tsx

@@ -5,6 +5,7 @@
 
 import { useState, useMemo, useEffect } from 'react';
 import { LayoutGroup } from 'motion/react';
+import { BrowserRouter, Routes, Route, useNavigate, useSearchParams, useParams, useLocation } from 'react-router-dom';
 import Header from './components/Header';
 import BrowseView from './components/BrowseView';
 import DetailView from './components/DetailView';
@@ -14,19 +15,23 @@ import AddMediaView from './components/AddMediaView';
 import ImporterView from './components/ImporterView';
 import { MOCK_MEDIA, DETAIL_MEDIA } from './data';
 import { Media, Staff, MediaCategory } from './types';
-import { fetchAllMedia, fetchMediaById } from './api';
+import { fetchAllMedia, fetchMediaById, fetchCastById, convertApiCastToStaff } from './api';
 
-export default function App() {
+function AppContent() {
-  const [currentView, setCurrentView] = useState<'browse' | 'detail' | 'cast' | 'castDetail' | 'add' | 'import'>('browse');
+  const navigate = useNavigate();
-  const [activeCategory, setActiveCategory] = useState<MediaCategory>('Anime');
+  const location = useLocation();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [activeCategory, setActiveCategory] = useState<MediaCategory>(
+    (searchParams.get('category') as MediaCategory) || 'Anime'
+  );
   const [selectedMedia, setSelectedMedia] = useState<Media | null>(null);
   const [selectedPerson, setSelectedPerson] = useState<Staff | null>(null);
-  const [searchQuery, setSearchQuery] = useState('');
+  const [searchQuery, setSearchQuery] = useState(searchParams.get('search') || '');
   const [enabledCategories, setEnabledCategories] = useState<MediaCategory[]>(['Anime', 'Movies', 'TV Series', 'Music', 'Books', 'Consoles', 'Games', 'Adult']);
   const [customMedia, setCustomMedia] = useState<Media[]>([]);
   const [adultMedia, setAdultMedia] = useState<Media[]>([]);
 
-  // Load media from API on component mount
+  // Load media from API on component mount (only when not on cast routes)
   const [apiMedia, setApiMedia] = useState<Media[]>([]);
   
   useEffect(() => {
@@ -38,8 +43,12 @@ export default function App() {
         console.error('Failed to load media from API:', error);
       }
     };
-    loadMediaFromApi();
+    
-  }, []);
+    // Only load media if not on cast routes
+    if (!location.pathname.startsWith('/cast')) {
+      loadMediaFromApi();
+    }
+  }, [location.pathname]);
 
   const toggleCategory = (category: MediaCategory) => {
     setEnabledCategories(prev => {
@@ -59,17 +68,18 @@ export default function App() {
 
   const handleCategoryChange = (category: MediaCategory) => {
     setActiveCategory(category);
-    setCurrentView('browse');
+    setSearchParams({ category });
+    navigate('/');
     window.scrollTo({ top: 0, behavior: 'smooth' });
   };
 
   const handleAddMediaView = () => {
-    setCurrentView('add');
+    navigate('/add');
     window.scrollTo({ top: 0, behavior: 'smooth' });
   };
 
   const handleImporterView = () => {
-    setCurrentView('import');
+    navigate('/import');
     window.scrollTo({ top: 0, behavior: 'smooth' });
   };
 
@@ -168,17 +178,17 @@ export default function App() {
       // For non-adult media, use the original media
       setSelectedMedia(media);
     }
-    setCurrentView('detail');
+    navigate(`/media/${media.id}`);
     window.scrollTo({ top: 0, behavior: 'smooth' });
   };
 
   const handleBack = () => {
-    setCurrentView('browse');
+    navigate('/');
     window.scrollTo({ top: 0, behavior: 'smooth' });
   };
 
   const handleCastClick = () => {
-    setCurrentView('cast');
+    navigate('/cast');
     window.scrollTo({ top: 0, behavior: 'smooth' });
   };
 
@@ -192,76 +202,73 @@ export default function App() {
       occupations: ['Voice Actor', 'Singer', 'Narrator']
     };
     setSelectedPerson(enrichedPerson);
-    setCurrentView('castDetail');
+    navigate(`/cast/${person.id}`);
     window.scrollTo({ top: 0, behavior: 'smooth' });
   };
 
   const handleSearch = (query: string) => {
     setSearchQuery(query);
-    if (currentView !== 'browse' && currentView !== 'cast') {
+    const params = new URLSearchParams(searchParams);
-      setCurrentView('browse');
+    if (query) {
+      params.set('search', query);
+    } else {
+      params.delete('search');
     }
+    setSearchParams(params);
+    navigate('/');
   };
 
   return (
     <div className="min-h-screen bg-white font-sans selection:bg-[#6d28d9]/20 selection:text-[#6d28d9]">
       <Header
-        onBrowse={handleBack}
-        onCast={handleCastClick}
-        onAddMedia={handleAddMediaView}
-        onImporter={handleImporterView}
         onSearch={handleSearch}
         activeCategory={activeCategory}
         onCategoryChange={handleCategoryChange}
         enabledCategories={enabledCategories}
         onToggleCategory={toggleCategory}
-        transparent={currentView === 'detail' || currentView === 'castDetail'}
+        transparent={location.pathname.startsWith('/media/') || location.pathname.startsWith('/cast/')}
       />
       
       <main>
         <LayoutGroup>
-          {currentView === 'browse' ? (
+          <Routes>
-            <BrowseView 
+            <Route path="/" element={
-              mediaList={filteredMedia} 
+              <BrowseView 
-              onMediaClick={handleMediaClick} 
+                mediaList={filteredMedia} 
-              activeCategory={activeCategory}
+                onMediaClick={handleMediaClick} 
-            />
+                activeCategory={activeCategory}
-          ) : currentView === 'cast' ? (
-            <CastView 
-              staffList={allStaff} 
-              onPersonClick={handlePersonClick}
-            />
-          ) : currentView === 'castDetail' ? (
-            selectedPerson && (
-              <CastDetailView 
-                person={selectedPerson} 
-                onBack={handleCastClick}
-                onMediaClick={(id) => {
-                  const media = allMedia.find(m => m.id === id);
-                  if (media) handleMediaClick(media);
-                }}
-                relatedMedia={allMedia.filter(m => m.staff?.some(s => s.id === selectedPerson.id))}
               />
-            )
+            } />
-          ) : currentView === 'add' ? (
+            <Route path="/media/:id" element={
-            <AddMediaView
+              <MediaDetailRoute 
-              activeCategory={activeCategory}
+                selectedMedia={selectedMedia} 
-              onBack={handleBack}
+                setSelectedMedia={setSelectedMedia}
-              onAddComplete={handleAddMedia}
+                allMedia={allMedia}
-            />
-          ) : currentView === 'import' ? (
-            <ImporterView
-              onBack={handleBack}
-            />
-          ) : (
-            selectedMedia && (
-              <DetailView 
-                media={selectedMedia} 
-                onBack={handleBack} 
                 onPersonClick={handlePersonClick}
               />
-            )
+            } />
-          )}
+            <Route path="/cast" element={
+              <CastView 
+                onPersonClick={handlePersonClick}
+                enabledCategories={enabledCategories}
+              />
+            } />
+            <Route path="/cast/:id" element={
+              <CastDetailRoute 
+                selectedPerson={selectedPerson}
+                setSelectedPerson={setSelectedPerson}
+              />
+            } />
+            <Route path="/add" element={
+              <AddMediaView
+                activeCategory={activeCategory}
+                onAddComplete={handleAddMedia}
+              />
+            } />
+            <Route path="/import" element={
+              <ImporterView />
+            } />
+          </Routes>
         </LayoutGroup>
       </main>
 
@@ -285,3 +292,87 @@ export default function App() {
     </div>
   );
 }
+
+// Helper component for media detail route
+function MediaDetailRoute({ selectedMedia, setSelectedMedia, allMedia, onPersonClick }: any) {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const loadMedia = async () => {
+      if (id) {
+        // First check if media is in allMedia
+        const media = allMedia.find(m => m.id === id);
+        if (media) {
+          setSelectedMedia(media);
+        } else {
+          // If not found, fetch from API
+          try {
+            const fetchedMedia = await fetchMediaById(id);
+            if (fetchedMedia) {
+              setSelectedMedia(fetchedMedia);
+            } else {
+              navigate('/');
+            }
+          } catch (error) {
+            console.error('Failed to fetch media:', error);
+            navigate('/');
+          }
+        }
+      }
+    };
+    loadMedia();
+  }, [id, allMedia]);
+
+  if (!selectedMedia) return null;
+
+  return (
+    <DetailView 
+      media={selectedMedia} 
+      onPersonClick={onPersonClick}
+    />
+  );
+}
+
+// Helper component for cast detail route
+function CastDetailRoute({ selectedPerson, setSelectedPerson }: any) {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const loadCast = async () => {
+      if (id) {
+        try {
+          const castData = await fetchCastById(id);
+          if (castData) {
+            const person = convertApiCastToStaff(castData);
+            setSelectedPerson(person);
+          } else {
+            navigate('/cast');
+          }
+        } catch (error) {
+          console.error('Failed to load cast:', error);
+          navigate('/cast');
+        }
+      }
+    };
+    loadCast();
+  }, [id]);
+
+  if (!selectedPerson) return null;
+
+  return (
+    <CastDetailView 
+      person={selectedPerson} 
+      relatedMedia={[]}
+    />
+  );
+}
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <AppContent />
+    </BrowserRouter>
+  );
+}

src/api.ts

@@ -111,6 +111,7 @@ export interface CreateStaffInput {
 export interface ApiCastItem {
   id: number;
   name: string;
+  cleanname?: string;
   photo: string | null;
   bio: string | null;
   birthDate: string | null;
@@ -119,6 +120,33 @@ export interface ApiCastItem {
   updatedAt: string;
   occupations?: string[];
   filmography?: ApiCastMediaItem[];
+  media_types?: string[];
+  bust_size?: number | null;
+  cup_size?: string | null;
+  waist_size?: number | null;
+  hip_size?: number | null;
+  height?: number | null;
+  weight?: number | null;
+  hair_color?: string | null;
+  eye_color?: string | null;
+  ethnicity?: string | null;
+  adult_specifics?: {
+    id: number;
+    cast_id: number;
+    bust_size?: number | null;
+    cup_size?: string | null;
+    waist_size?: number | null;
+    hip_size?: number | null;
+    height?: number | null;
+    weight?: number | null;
+    hair_color?: string | null;
+    eye_color?: string | null;
+    ethnicity?: string | null;
+    tattoos?: string | null;
+    piercings?: string | null;
+    measurements?: string | null;
+    shoe_size?: number | null;
+  };
 }
 
 export interface ApiCastMediaItem {
@@ -129,7 +157,7 @@ export interface ApiCastMediaItem {
   category: string | null;
   type: string;
   role: string;
-  characterName: string | null;
+  characterName?: string | null;
 }
 
 export interface CreateCastInput {
@@ -144,6 +172,43 @@ export interface CreateCastInput {
 export interface UpdateCastInput extends Partial<CreateCastInput> {}
 
 
+export function convertApiCastToStaff(apiItem: ApiCastItem): Staff {
+  return {
+    id: apiItem.id.toString(),
+    name: apiItem.name,
+    cleanname: apiItem.cleanname,
+    role: apiItem.occupations?.[0] || 'Actor',
+    photo: normalizeUrl(apiItem.photo) || `https://picsum.photos/seed/cast-${apiItem.id}/200/200`,
+    bio: apiItem.bio || undefined,
+    birthDate: apiItem.birthDate || undefined,
+    birthPlace: apiItem.birthPlace || undefined,
+    occupations: apiItem.occupations || ['Actor'],
+    createdAt: apiItem.createdAt,
+    updatedAt: apiItem.updatedAt,
+    bust_size: apiItem.bust_size,
+    cup_size: apiItem.cup_size,
+    waist_size: apiItem.waist_size,
+    hip_size: apiItem.hip_size,
+    height: apiItem.height,
+    weight: apiItem.weight,
+    hair_color: apiItem.hair_color,
+    eye_color: apiItem.eye_color,
+    ethnicity: apiItem.ethnicity,
+    filmography: apiItem.filmography?.map(item => ({
+      id: item.id,
+      title: item.title,
+      year: item.year,
+      poster: normalizeUrl(item.poster) || `https://picsum.photos/seed/${item.id}/400/600`,
+      category: item.category,
+      type: item.type,
+      role: item.role,
+      characterName: item.characterName
+    })),
+    media_types: apiItem.media_types,
+    adult_specifics: apiItem.adult_specifics
+  };
+}
+
 export function convertApiToMedia(apiItem: ApiMediaItem): Media {
   // Convert staff from API to Media staff format
   const staff: Staff[] = (apiItem.staff || []).map((staffMember) => ({
@@ -360,7 +425,7 @@ export async function deleteMedia(id: number | string): Promise<boolean> {
 }
 
 // Cast API Functions
-export async function fetchAllCast(page: number = 1, limit: number = 100000): Promise<ApiCastItem[]> {
+export async function fetchAllCast(page: number = 1, limit: number = 100000): Promise<Staff[]> {
   try {
     const response = await fetch(`${BASE_URL}/api/cast?page=${page}&limit=${limit}`);
     if (!response.ok) {
@@ -369,7 +434,7 @@ export async function fetchAllCast(page: number = 1, limit: number = 100000): Pr
     const data: ApiResponse<PaginatedResponse<ApiCastItem>> = await response.json();
     
     if (data.success && data.data.items) {
-      return data.data.items;
+      return data.data.items.map(convertApiCastToStaff);
     }
     return [];
   } catch (error) {

src/components/AddMediaView.tsx

@@ -3,17 +3,18 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { createMedia, type CreateMediaInput } from '@/api';
 import { ArrowLeft } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
 interface AddMediaViewProps {
   activeCategory: MediaCategory;
-  onBack: () => void;
   onAddComplete: () => void;
 }
 
-export default function AddMediaView({ activeCategory, onBack, onAddComplete }: AddMediaViewProps) {
+export default function AddMediaView({ activeCategory, onAddComplete }: AddMediaViewProps) {
+  const navigate = useNavigate();
   const [newMedia, setNewMedia] = useState({
     title: '',
     year: '',
@@ -149,7 +150,7 @@ export default function AddMediaView({ activeCategory, onBack, onAddComplete }:
     <div className="pt-24 pb-12 px-6 max-w-[1200px] mx-auto">
       <Button 
         variant="ghost" 
-        onClick={onBack}
+        onClick={() => navigate('/')}
         className="mb-6 gap-2 text-zinc-600 hover:text-zinc-900"
       >
         <ArrowLeft size={20} />

src/components/CastDetailView.tsx

@@ -1,17 +1,21 @@
 import { Staff, Media } from '@/types';
+import { useNavigate } from 'react-router-dom';
 import { motion } from 'motion/react';
-import { ArrowLeft, Calendar, MapPin, Briefcase, Film, User } from 'lucide-react';
+import { ArrowLeft, Calendar, MapPin, Briefcase, Film, User, Ruler, Palette, Eye } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 
 interface CastDetailViewProps {
   person: Staff;
-  onBack: () => void;
-  onMediaClick: (mediaId: string) => void;
   relatedMedia: Media[];
 }
 
-export default function CastDetailView({ person, onBack, onMediaClick, relatedMedia }: CastDetailViewProps) {
+export default function CastDetailView({ person, relatedMedia }: CastDetailViewProps) {
+  const navigate = useNavigate();
+
+  const handleMediaClick = (mediaId: string) => {
+    navigate(`/media/${mediaId}`);
+  };
   return (
     <div className="min-h-screen bg-white pb-20">
       {/* Hero Section */}
@@ -63,7 +67,7 @@ export default function CastDetailView({ person, onBack, onMediaClick, relatedMe
         <Button 
           variant="ghost" 
           size="icon" 
-          onClick={onBack}
+          onClick={() => navigate(-1)}
           className="absolute top-24 left-6 bg-white/20 hover:bg-white/40 text-white rounded-full backdrop-blur-md"
         >
           <ArrowLeft size={24} />
@@ -107,96 +111,211 @@ export default function CastDetailView({ person, onBack, onMediaClick, relatedMe
                   <p className="font-bold text-zinc-700">{person.role}</p>
                 </div>
               </div>
+
+              {(person.ethnicity || person.adult_specifics?.ethnicity) && (
+                <div className="flex items-start gap-4">
+                  <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                    <User size={20} />
+                  </div>
+                  <div>
+                    <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Ethnicity</p>
+                    <p className="font-bold text-zinc-700">{person.adult_specifics?.ethnicity || person.ethnicity}</p>
+                  </div>
+                </div>
+              )}
             </div>
           </div>
+
+            <div className="bg-zinc-50 rounded-3xl p-8 space-y-6">
+              <h3 className="text-xl font-black text-zinc-900">Measurements</h3>
+
+              <div className="space-y-4">
+                
+                  <div className="flex items-start gap-4">
+                    <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                      <Ruler size={20} />
+                    </div>
+                    <div>
+                      <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Height</p>
+                      <p className="font-bold text-zinc-700">{person.adult_specifics?.height || person.height} cm</p>
+                    </div>
+                  </div>
+                
+
+                {(person.weight || person.adult_specifics?.weight) && (
+                  <div className="flex items-start gap-4">
+                    <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                      <Ruler size={20} />
+                    </div>
+                    <div>
+                      <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Weight</p>
+                      <p className="font-bold text-zinc-700">{person.adult_specifics?.weight || person.weight} kg</p>
+                    </div>
+                  </div>
+                )}
+
+                {(person.adult_specifics?.measurements || person.bust_size || person.cup_size || person.waist_size || person.hip_size) && (
+                  <div className="flex items-start gap-4">
+                    <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                      <Ruler size={20} />
+                    </div>
+                    <div>
+                      <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Measurements</p>
+                      <p className="font-bold text-zinc-700">
+                        {person.adult_specifics?.measurements || (
+                          <>
+                            {person.bust_size && `${person.bust_size}`}
+                            {person.cup_size && person.cup_size}
+                            {person.bust_size || person.cup_size ? '-' : ''}
+                            {person.waist_size && `${person.waist_size}`}
+                            {person.waist_size ? '-' : ''}
+                            {person.hip_size && `${person.hip_size}`}
+                          </>
+                        )}
+                      </p>
+                    </div>
+                  </div>
+                )}
+
+                {(person.hair_color || person.adult_specifics?.hair_color) && (
+                  <div className="flex items-start gap-4">
+                    <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                      <Palette size={20} />
+                    </div>
+                    <div>
+                      <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Hair Color</p>
+                      <p className="font-bold text-zinc-700">{person.adult_specifics?.hair_color || person.hair_color}</p>
+                    </div>
+                  </div>
+                )}
+
+                {(person.eye_color || person.adult_specifics?.eye_color) && (
+                  <div className="flex items-start gap-4">
+                    <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                      <Eye size={20} />
+                    </div>
+                    <div>
+                      <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Eye Color</p>
+                      <p className="font-bold text-zinc-700">{person.adult_specifics?.eye_color || person.eye_color}</p>
+                    </div>
+                  </div>
+                )}
+
+                {person.adult_specifics?.tattoos && (
+                  <div className="flex items-start gap-4">
+                    <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                      <Palette size={20} />
+                    </div>
+                    <div>
+                      <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Tattoos</p>
+                      <p className="font-bold text-zinc-700">{person.adult_specifics.tattoos}</p>
+                    </div>
+                  </div>
+                )}
+
+                {person.adult_specifics?.piercings && (
+                  <div className="flex items-start gap-4">
+                    <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                      <Palette size={20} />
+                    </div>
+                    <div>
+                      <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Piercings</p>
+                      <p className="font-bold text-zinc-700">{person.adult_specifics.piercings}</p>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
         </div>
 
         {/* Main Bio & Roles */}
         <div className="lg:col-span-2 space-y-12">
-          <section>
+          {person.bio && (
-            <h2 className="text-2xl font-black text-zinc-900 mb-6 flex items-center gap-3">
+            <section>
-              Biography
+              <h2 className="text-2xl font-black text-zinc-900 mb-6 flex items-center gap-3">
-            </h2>
+                Biography
-            <p className="text-zinc-600 leading-relaxed text-lg">
+              </h2>
-              {person.bio || `${person.name} is a talented ${person.role} known for their work in various media productions. They have brought numerous characters to life with their unique performances.`}
+              <p className="text-zinc-600 leading-relaxed text-lg">
-            </p>
+                {person.bio}
-          </section>
+              </p>
+            </section>
+          )}
 
-          <section>
+          {person.filmography && person.filmography.length > 0 && (
-            <h2 className="text-2xl font-black text-zinc-900 mb-6 flex items-center gap-3">
+            <section>
-              <User className="text-[#6d28d9]" />
+              <h2 className="text-2xl font-black text-zinc-900 mb-6 flex items-center gap-3">
-              Characters
+                <User className="text-[#6d28d9]" />
-            </h2>
+                Characters
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+              </h2>
-              {relatedMedia.map(media => {
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
-                const character = media.staff?.find(s => s.id === person.id);
+                {person.filmography.map(item => (
-                if (!character) return null;
-                return (
                   <div 
-                    key={`${media.id}-char`}
+                    key={`${item.id}-char`}
                     className="flex items-center gap-4 p-4 rounded-2xl bg-zinc-50 border border-zinc-100"
                   >
                     <div className="w-20 h-20 rounded-xl overflow-hidden shrink-0 shadow-sm border-2 border-white">
                       <img 
-                        src={character.characterImage} 
+                        src={item.poster || person.photo} 
-                        alt={character.characterName} 
+                        alt={item.title} 
                         className="w-full h-full object-cover"
                         referrerPolicy="no-referrer"
                       />
                     </div>
                     <div className="min-w-0 flex-1">
                       <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest mb-1">Character</p>
-                      <h4 className="font-black text-zinc-900 truncate">{character.characterName}</h4>
+                      <h4 className="font-black text-zinc-900 truncate">{item.characterName || item.role}</h4>
                       <button 
-                        onClick={() => onMediaClick(media.id)}
+                        onClick={() => handleMediaClick(item.id.toString())}
                         className="text-xs font-bold text-[#6d28d9] hover:underline mt-1 text-left"
                       >
-                        in {media.title}
+                        in {item.title}
                       </button>
                     </div>
                   </div>
-                );
+                ))}
-              })}
+              </div>
-            </div>
+            </section>
-          </section>
+          )}
 
-          <section>
+          {person.filmography && person.filmography.length > 0 && (
-            <h2 className="text-2xl font-black text-zinc-900 mb-6 flex items-center gap-3">
+            <section>
-              <Film className="text-[#6d28d9]" />
+              <h2 className="text-2xl font-black text-zinc-900 mb-6 flex items-center gap-3">
-              Filmography
+                <Film className="text-[#6d28d9]" />
-            </h2>
+                Filmography
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              </h2>
-              {relatedMedia.map(media => (
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                <div 
+                {person.filmography.map(item => (
-                  key={media.id}
+                  <div 
-                  onClick={() => onMediaClick(media.id)}
+                    key={item.id}
-                  className="group flex items-center gap-4 p-4 rounded-2xl bg-white border border-zinc-100 hover:border-[#6d28d9]/30 hover:shadow-lg transition-all cursor-pointer"
+                    onClick={() => handleMediaClick(item.id.toString())}
-                >
+                    className="group flex items-center gap-4 p-4 rounded-2xl bg-white border border-zinc-100 hover:border-[#6d28d9]/30 hover:shadow-lg transition-all cursor-pointer"
-                  <div className="w-16 h-20 rounded-lg overflow-hidden shrink-0 shadow-sm">
+                  >
-                    <img 
+                    <div className="w-16 h-20 rounded-lg overflow-hidden shrink-0 shadow-sm">
-                      src={media.poster} 
+                      <img 
-                      alt={media.title} 
+                        src={item.poster || person.photo} 
-                      className="w-full h-full object-cover"
+                        alt={item.title} 
-                      referrerPolicy="no-referrer"
+                        className="w-full h-full object-cover"
-                    />
+                        referrerPolicy="no-referrer"
-                  </div>
+                      />
-                  <div className="min-w-0">
+                    </div>
-                    <h4 className="font-black text-zinc-900 truncate group-hover:text-[#6d28d9] transition-colors">
+                    <div className="min-w-0">
-                      {media.title}
+                      <h4 className="font-black text-zinc-900 truncate group-hover:text-[#6d28d9] transition-colors">
-                    </h4>
+                        {item.title}
-                    <p className="text-xs font-bold text-zinc-400 uppercase tracking-wider mb-1">
+                      </h4>
-                      {media.year}
+                      <p className="text-xs font-bold text-zinc-400 uppercase tracking-wider mb-1">
-                    </p>
+                        {item.year || 'Unknown'}
-                    <div className="flex items-center gap-2">
+                      </p>
-                      <Badge variant="outline" className="text-[10px] font-bold py-0 h-5 border-zinc-200">
+                      <div className="flex items-center gap-2">
-                        {person.role}
+                        <Badge variant="outline" className="text-[10px] font-bold py-0 h-5 border-zinc-200">
-                      </Badge>
+                          {item.role}
+                        </Badge>
+                      </div>
                     </div>
                   </div>
-                </div>
+                ))}
-              ))}
+              </div>
-            </div>
+            </section>
-          </section>
+          )}
         </div>
       </div>
     </div>

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) {
+export default function CastView({ onPersonClick, enabledCategories }: CastViewProps) {
-  const [searchQuery, setSearchQuery] = useState('');
+  const navigate = useNavigate();
-  const [sortBy, setSortBy] = useState<'name' | 'role'>('name');
+  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 => 
+    let list = staffList.filter(s => {
-      s.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      // Hide actors without linked media
-      s.role.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      if (!s.filmography || s.filmography.length === 0) {
-      s.mediaTitle?.toLowerCase().includes(searchQuery.toLowerCase())
+        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]));
+    // Sort
-  }, [staffList, searchQuery, sortBy]);
+    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">
+                {person.filmography && person.filmography.length > 0 && (
-                  <div className="w-10 h-12 rounded-lg overflow-hidden shrink-0 bg-white">
+                  <div className="bg-zinc-50 rounded-xl p-3 flex items-center gap-3">
-                    <img 
+                    <div className="w-10 h-12 rounded-lg overflow-hidden shrink-0 bg-white">
-                      src={person.characterImage} 
+                      <img 
-                      alt={person.characterName} 
+                        src={person.filmography[0].poster || person.photo} 
-                      className="w-full h-full object-contain"
+                        alt={person.filmography[0].title} 
-                      referrerPolicy="no-referrer"
+                        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>

src/components/DetailView.tsx

@@ -1,4 +1,5 @@
 import { Media, Staff } from '@/types';
+import { useNavigate } from 'react-router-dom';
 import { 
   Play, 
   Bookmark, 
@@ -17,11 +18,11 @@ import { motion } from 'motion/react';
 
 interface DetailViewProps {
   media: Media;
-  onBack: () => void;
   onPersonClick: (person: Staff) => void;
 }
 
-export default function DetailView({ media, onBack, onPersonClick }: DetailViewProps) {
+export default function DetailView({ media, onPersonClick }: DetailViewProps) {
+  const navigate = useNavigate();
   return (
     <div className="min-h-screen bg-zinc-50">
       {/* Banner */}
@@ -35,7 +36,7 @@ export default function DetailView({ media, onBack, onPersonClick }: DetailViewP
         <div className="absolute inset-0 bg-gradient-to-t from-zinc-50 via-zinc-50/40 to-transparent" />
         
         <button 
-          onClick={onBack}
+          onClick={() => navigate(-1)}
           className="absolute top-24 left-6 p-2 bg-black/20 hover:bg-black/40 text-white rounded-full transition-colors z-10"
         >
           <ChevronLeft size={24} />

src/components/Header.tsx

@@ -1,14 +1,11 @@
 import { Search, User, X, Plus, Download } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import React, { useState } from 'react';
+import { Link, NavLink } from 'react-router-dom';
 import { MediaCategory } from '@/types';
 import LibrarySettings from './LibrarySettings';
 
 interface HeaderProps {
-  onBrowse: () => void;
-  onCast: () => void;
-  onAddMedia: () => void;
-  onImporter: () => void;
   onSearch: (query: string) => void;
   activeCategory: MediaCategory;
   onCategoryChange: (category: MediaCategory) => void;
@@ -18,10 +15,6 @@ interface HeaderProps {
 }
 
 export default function Header({
-  onBrowse,
-  onCast,
-  onAddMedia,
-  onImporter,
   onSearch,
   activeCategory,
   onCategoryChange,
@@ -54,15 +47,15 @@ export default function Header({
       )}
     >
       <div className="flex items-center gap-8">
-        <div 
+        <Link 
-          className="text-2xl font-black text-white cursor-pointer flex items-center gap-1"
+          to="/"
-          onClick={onBrowse}
+          className="text-2xl font-black text-white flex items-center gap-1"
         >
           <div className="w-6 h-6 bg-white rounded-full flex items-center justify-center">
             <div className="w-3 h-3 bg-[#6d28d9] rounded-full" />
           </div>
           kyoo
-        </div>
+        </Link>
         <nav className="hidden md:flex items-center gap-6">
           {enabledCategories.map(cat => (
             <button 
@@ -77,12 +70,15 @@ export default function Header({
             </button>
           ))}
           <div className="w-px h-4 bg-white/20 mx-2" />
-          <button 
+          <NavLink 
-            onClick={onCast}
+            to="/cast"
-            className="text-sm font-bold text-white/60 hover:text-white transition-colors uppercase tracking-wider"
+            className={({ isActive }) => cn(
+              "text-sm font-bold transition-colors uppercase tracking-wider",
+              isActive ? "text-white" : "text-white/60 hover:text-white"
+            )}
           >
             CAST
-          </button>
+          </NavLink>
         </nav>
       </div>
       <div className="flex items-center gap-4">
@@ -105,18 +101,18 @@ export default function Header({
         >
           {isSearchOpen ? <X size={20} /> : <Search size={20} />}
         </button>
-        <button
+        <Link
-          onClick={onAddMedia}
+          to="/add"
           className="p-2 text-white/90 hover:text-white transition-colors"
         >
           <Plus size={20} />
-        </button>
+        </Link>
-        <button
+        <Link
-          onClick={onImporter}
+          to="/import"
           className="p-2 text-white/90 hover:text-white transition-colors"
         >
           <Download size={20} />
-        </button>
+        </Link>
         <LibrarySettings 
           enabledCategories={enabledCategories} 
           onToggleCategory={onToggleCategory} 

src/components/ImporterView.tsx

@@ -1,4 +1,5 @@
 import { useState, useRef, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { ArrowLeft, Download, Settings, RefreshCw, CheckCircle, XCircle, AlertCircle, Users, Film, Loader2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
@@ -6,7 +7,8 @@ import { importFromXBVR, XBVRConfig, ImportProgress } from '@/lib/xbvrImporter';
 import { importFromStashAPP, StashAPPConfig, updateActorsFromStashAPP } from '@/lib/stashappImporter';
 import { importFromPlaynite, PlayniteConfig } from '@/lib/playniteImporter';
 
-export default function ImporterView({ onBack }: { onBack: () => void }) {
+export default function ImporterView() {
+  const navigate = useNavigate();
   const [xbvrConfig, setXbvrConfig] = useState<XBVRConfig>({ url: import.meta.env.VITE_XBVR_URL || '' });
   const [stashappConfig, setStashappConfig] = useState<StashAPPConfig>({ 
     url: import.meta.env.VITE_STASHAPP_URL || '', 
@@ -159,7 +161,7 @@ export default function ImporterView({ onBack }: { onBack: () => void }) {
           <Button
             variant="ghost"
             size="icon"
-            onClick={onBack}
+            onClick={() => navigate('/')}
             className="text-zinc-600 hover:text-[#6d28d9]"
           >
             <ArrowLeft size={20} />

src/lib/stashappImporter.ts

@@ -1,6 +1,7 @@
 export interface StashAPPConfig {
   url: string;
   apiKey?: string;
+  blacklist?: ['/AI/', 'temp', 'backup'];
 }
 
 export interface ImportProgress {
@@ -127,6 +128,13 @@ export interface StashAPPPerformersResponse {
 export type LogCallback = (message: string) => void;
 export type ProgressCallback = (progress: Partial<ImportProgress>) => void;
 
+function isPathBlacklisted(filePath: string, blacklist: string[]): boolean {
+  if (!blacklist || blacklist.length === 0) {
+    return false;
+  }
+  return blacklist.some(pattern => filePath.includes(pattern));
+}
+
 export async function updateActorsFromStashAPP(
   config: StashAPPConfig,
   logCallback: LogCallback,
@@ -457,7 +465,7 @@ export async function importFromStashAPP(
       `,
       variables: {
         filter: {
-          per_page: 100,
+          per_page: 20000,
           sort: "date",
           direction: "DESC"
         }
@@ -616,6 +624,20 @@ export async function importFromStashAPP(
     for (let i = 0; i < scenes.length; i++) {
       const scene = scenes[i];
 
+      // Check if scene is blacklisted
+      if (config.blacklist && config.blacklist.length > 0) {
+        const isBlacklisted = scene.files && scene.files.some(file => 
+          isPathBlacklisted(file.path, config.blacklist!)
+        );
+        if (isBlacklisted) {
+          logCallback(`⊘ Skipped blacklisted scene: ${scene.title}`);
+          progressCallback({
+            current: uniquePerformers.length + i + 1
+          });
+          continue;
+        }
+      }
+
       // Check for duplicate
       if (existingTitles.has(scene.title)) {
         logCallback(`⊘ Skipped duplicate: ${scene.title}`);

src/types.ts

@@ -40,14 +40,58 @@ export interface Episode {
 export interface Staff {
   id: string;
   name: string;
+  cleanname?: string;
   role: string;
   photo: string;
-  characterName: string;
+  characterName?: string;
-  characterImage: string;
+  characterImage?: string;
   mediaId?: string;
   mediaTitle?: string;
   bio?: string;
   birthDate?: string;
   birthPlace?: string;
   occupations?: string[];
+  createdAt?: string;
+  updatedAt?: string;
+  bust_size?: number | null;
+  cup_size?: string | null;
+  waist_size?: number | null;
+  hip_size?: number | null;
+  height?: number | null;
+  weight?: number | null;
+  hair_color?: string | null;
+  eye_color?: string | null;
+  ethnicity?: string | null;
+  filmography?: CastMediaItem[];
+  media_types?: string[];
+  adult_specifics?: AdultSpecifics;
+}
+
+export interface CastMediaItem {
+  id: number;
+  title: string;
+  year: number;
+  poster: string | null;
+  category: string | null;
+  type: string;
+  role: string;
+  characterName?: string | null;
+}
+
+export interface AdultSpecifics {
+  id: number;
+  cast_id: number;
+  bust_size?: number | null;
+  cup_size?: string | null;
+  waist_size?: number | null;
+  hip_size?: number | null;
+  height?: number | null;
+  weight?: number | null;
+  hair_color?: string | null;
+  eye_color?: string | null;
+  ethnicity?: string | null;
+  tattoos?: string | null;
+  piercings?: string | null;
+  measurements?: string | null;
+  shoe_size?: number | null;
 }