add media page

src/App.tsx

@@ -10,17 +10,18 @@ import BrowseView from './components/BrowseView';
 import DetailView from './components/DetailView';
 import CastView from './components/CastView';
 import CastDetailView from './components/CastDetailView';
+import AddMediaView from './components/AddMediaView';
 import { MOCK_MEDIA, DETAIL_MEDIA } from './data';
 import { Media, Staff, MediaCategory } from './types';
 import { fetchAllMedia, fetchMediaById } from './api';
 
 export default function App() {
-  const [currentView, setCurrentView] = useState<'browse' | 'detail' | 'cast' | 'castDetail'>('browse');
+  const [currentView, setCurrentView] = useState<'browse' | 'detail' | 'cast' | 'castDetail' | 'add'>('browse');
   const [activeCategory, setActiveCategory] = useState<MediaCategory>('Anime');
   const [selectedMedia, setSelectedMedia] = useState<Media | null>(null);
   const [selectedPerson, setSelectedPerson] = useState<Staff | null>(null);
   const [searchQuery, setSearchQuery] = useState('');
-  const [enabledCategories, setEnabledCategories] = useState<MediaCategory[]>(['Anime', 'Movies', 'Music', 'Books', 'Consoles', 'Games', 'Adult']);
+  const [enabledCategories, setEnabledCategories] = useState<MediaCategory[]>(['Anime', 'Movies', 'TV Series', 'Music', 'Books', 'Consoles', 'Games', 'Adult']);
   const [customMedia, setCustomMedia] = useState<Media[]>([]);
   const [adultMedia, setAdultMedia] = useState<Media[]>([]);
 
@@ -61,6 +62,11 @@ export default function App() {
     window.scrollTo({ top: 0, behavior: 'smooth' });
   };
 
+  const handleAddMediaView = () => {
+    setCurrentView('add');
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
   const allMedia = useMemo(() => {
     // Use API data if available, otherwise fall back to mock data
     let list: Media[] = [];
@@ -83,7 +89,7 @@ export default function App() {
     return list.filter(m => m.category === activeCategory && enabledCategories.includes(m.category));
   }, [activeCategory, enabledCategories, customMedia, apiMedia]);
 
-  const handleAddMedia = async (newMedia: Media) => {
+  const handleAddMedia = async () => {
     // Reload all media from API to get the newly added item
     try {
       const media = await fetchAllMedia();
@@ -196,6 +202,7 @@ export default function App() {
       <Header 
         onBrowse={handleBack} 
         onCast={handleCastClick}
+        onAddMedia={handleAddMediaView}
         onSearch={handleSearch}
         activeCategory={activeCategory}
         onCategoryChange={handleCategoryChange}
@@ -210,7 +217,6 @@ export default function App() {
             <BrowseView 
               mediaList={filteredMedia} 
               onMediaClick={handleMediaClick} 
-              onAddMedia={handleAddMedia}
               activeCategory={activeCategory}
             />
           ) : currentView === 'cast' ? (
@@ -230,6 +236,12 @@ export default function App() {
                 relatedMedia={allMedia.filter(m => m.staff?.some(s => s.id === selectedPerson.id))}
               />
             )
+          ) : currentView === 'add' ? (
+            <AddMediaView 
+              activeCategory={activeCategory}
+              onBack={handleBack}
+              onAddComplete={handleAddMedia}
+            />
           ) : (
             selectedMedia && (
               <DetailView