Add genre browsing page with filtering, sorting, and overviews

src/App.jsx

@@ -37,6 +37,7 @@ import UpdateModal from "./components/UpdateModal";
 const HomePage = lazy(() => import("./pages/HomePage"));
 const MoviePage = lazy(() => import("./pages/MoviePage"));
 const TVPage = lazy(() => import("./pages/TVPage"));
+const GenresPage = lazy(() => import("./pages/GenresPage"));
 const LibraryPage = lazy(() => import("./pages/LibraryPage"));
 const SettingsPage = lazy(() => import("./pages/SettingsPage"));
 const DownloadsPage = lazy(() => import("./pages/DownloadsPage"));
@@ -1082,6 +1083,16 @@ export default function App() {
                 onEpisodeChange={setWatchingEpisode}
               />
             )}
+            {page === "genres" && (
+              <GenresPage
+                apiKey={apiKey}
+                offline={offline}
+                onSelect={handleSelectResult}
+                watched={watched}
+                onMarkWatched={markWatched}
+                onMarkUnwatched={markUnwatched}
+              />
+            )}
             {page === "history" && (
               <LibraryPage
                 history={history}

src/components/Icons.jsx

@@ -345,6 +345,20 @@ export const SubtitlesIcon = ({ size = 16, ...props }) => (
   </svg>
 );
 
+export const TagIcon = () => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M20.59 13.41 11 3.83A2 2 0 0 0 9.59 3.24L4 3a1 1 0 0 0-1 1l.24 5.59a2 2 0 0 0 .59 1.41l9.58 9.58a2 2 0 0 0 2.83 0l4.35-4.35a2 2 0 0 0 0-2.82Z" />
+    <circle cx="7.5" cy="7.5" r="1.5" fill="currentColor" stroke="none" />
+  </svg>
+);
+
 export const PopOutIcon = ({ size = 16 }) => (
   <svg
     width={size}

src/components/MediaCard.jsx

@@ -18,6 +18,7 @@ const MediaCard = memo(function MediaCard({
   onMarkUnwatched,
   ageRating,
   restricted,
+  overview,
 }) {
   const title = item.title || item.name;
   const year = (item.release_date || item.first_air_date || "").slice(0, 4);
@@ -123,6 +124,7 @@ const MediaCard = memo(function MediaCard({
                 <PlayIcon />
               </div>
             )}
+            {overview && <div className="card-overview">{overview}</div>}
           </div>
           {!isUnreleased && progress > 0 && !isWatched && (
             <div className="card-progress">

src/components/Sidebar.jsx

@@ -12,6 +12,7 @@ import {
   QuitIcon,
   BackIcon,
   HelpIcon,
+  TagIcon,
 } from "./Icons";
 
 export default function Sidebar({
@@ -123,6 +124,12 @@ export default function Sidebar({
         icon={<HomeIcon />}
         label="Home"
       />
+      <SideBtn
+        active={page === "genres"}
+        onClick={() => onNavigate("genres")}
+        icon={<TagIcon />}
+        label="Genres"
+      />
       <SideBtn
         active={page === "history"}
         onClick={() => onNavigate("history")}