Use Zustand store; modularize API & routes

Introduce a centralized Zustand store and refactor app state out of App.tsx into src/store/appStore.ts. Modularize API surface by moving media/cast/settings/converters/types into src/lib/api/* and re-exporting from src/api.ts for backward compatibility. Replace inline route helpers with dedicated route components (MediaDetailRoute, CastDetailRoute, CategoryBrowseRoute) and wire CATEGORY_PATHS/PATH_TO_CATEGORY constants. Update AddMediaView UI (icons, layout) and adjust settings/category handling to use DEFAULT_SETTINGS and the store. Add zustand to package.json/package-lock.json and include a new React SKILL.md. Overall changes improve state management, API organization, and route/component separation for better maintainability and code-splitting.

src/components/Sidebar.tsx

@@ -20,11 +20,13 @@ import {
   ChevronDown, 
   ChevronRight,
   Menu,
-  X
+  X,
+  Plus
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useTheme } from '@/contexts/ThemeContext';
 import { MediaCategory } from '@/types';
+import { CATEGORY_PATHS } from '@/constants';
 
 interface SidebarProps {
   enabledCategories: MediaCategory[];
@@ -37,16 +39,6 @@ export default function Sidebar({ enabledCategories, onToggleCategory }: Sidebar
   const { theme, setTheme } = useTheme();
   const location = useLocation();
 
-  const categoryPaths: Record<MediaCategory, string> = {
-    'Anime': 'anime',
-    'Movies': 'movies',
-    'TV Series': 'tv-series',
-    'Music': 'music',
-    'Books': 'books',
-    'Games': 'games',
-    'Consoles': 'consoles',
-    'Adult': 'adult'
-  };
 
   const categoryIcons: Record<string, any> = {
     'Audio Book': <BookOpen size={18} />,
@@ -84,7 +76,9 @@ export default function Sidebar({ enabledCategories, onToggleCategory }: Sidebar
     //{ icon: <Dumbbell size={18} />, label: 'Fitness', path: '/fitness' },
     //{ icon: <Calendar size={18} />, label: 'Calendar', path: '/calendar' },
     //{ icon: <FolderKanban size={18} />, label: 'Collections', path: '/collections' },
-    { icon: <Settings size={18} />, label: 'Settings', path: '/settings' }
+    { icon: <Plus size={18} />, label: 'Add Media', path: '/add' },
+    { icon: <Settings size={18} />, label: 'Settings', path: '/settings' },
+    { icon: <FolderKanban size={18} />, label: 'Import', path: '/import' }
   ];
 
   const toggleTheme = () => {