[V1] Major Revisions to Search & New Preview + Genre Filter (WIP Commit)

src/App.tsx

@@ -8,6 +8,7 @@ import { useStore } from "./store";
 import Layout from "./components/layout/Layout";
 import Reader from "./components/pages/Reader";
 import Settings from "./components/settings/Settings";
+import MangaPreview from "./components/explore/MangaPreview";
 import TitleBar from "./components/layout/TitleBar";
 import Toaster from "./components/layout/Toaster";
 import type { DownloadStatus, DownloadQueueItem } from "./lib/types";
@@ -103,6 +104,7 @@ export default function App() {
         {activeChapter ? <Reader /> : <Layout />}
       </div>
       {settingsOpen && <Settings />}
+      <MangaPreview />
       <Toaster />
     </div>
   );

src/components/explore/Explore.tsx

@@ -0,0 +1,472 @@
+import { useEffect, useState, useMemo, useRef, memo } from "react";
+import { ArrowRight, Compass, List, BookOpen, Star, Fire, BookmarkSimple, FolderSimplePlus, Folder } from "@phosphor-icons/react";
+import GenreDrillPage from "./GenreDrillPage";
+import { gql, thumbUrl } from "../../lib/client";
+import { UPDATE_MANGA } from "../../lib/queries";
+import { cache, CACHE_KEYS, getTopSources } from "../../lib/cache";
+import { dedupeSources, dedupeMangaByTitle } from "../../lib/sourceUtils";
+import ContextMenu, { type ContextMenuEntry } from "../context/ContextMenu";
+import { GET_ALL_MANGA, GET_LIBRARY, GET_SOURCES, FETCH_SOURCE_MANGA } from "../../lib/queries";
+import { useStore } from "../../store";
+import type { Manga, Source } from "../../lib/types";
+import SourceList from "../sources/SourceList";
+import SourceBrowse from "../sources/SourceBrowse";
+import s from "./Explore.module.css";
+
+// ── Frecency score ────────────────────────────────────────────────────────────
+
+function frecencyScore(readAt: number, count: number): number {
+  const hoursSince = (Date.now() - readAt) / 3_600_000;
+  return count / Math.log(hoursSince + 2);
+}
+
+// ── Ghost / Skeleton ──────────────────────────────────────────────────────────
+
+function GhostCard() { return <div className={s.ghostCard} aria-hidden />; }
+const GHOST_COUNT = 3;
+
+function SkeletonRow({ count = 8 }: { count?: number }) {
+  return (
+    <div className={s.skeletonRow}>
+      {Array.from({ length: count }).map((_, i) => (
+        <div key={i} className={s.cardSkeleton}>
+          <div className={["skeleton", s.coverSkeleton].join(" ")} />
+          <div className={["skeleton", s.titleSkeleton].join(" ")} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ── Cover image with fade-in ──────────────────────────────────────────────────
+
+const CoverImg = memo(function CoverImg({ src, alt, className }: { src: string; alt: string; className?: string }) {
+  const [loaded, setLoaded] = useState(false);
+  return (
+    <img
+      src={src} alt={alt} className={className}
+      loading="lazy" decoding="async"
+      onLoad={() => setLoaded(true)}
+      style={{ opacity: loaded ? 1 : 0, transition: loaded ? "opacity 0.15s ease" : "none" }}
+    />
+  );
+});
+
+// ── Mini card ─────────────────────────────────────────────────────────────────
+
+const MiniCard = memo(function MiniCard({
+  manga, onClick, onContextMenu, subtitle, progress,
+}: {
+  manga: Manga;
+  onClick: () => void;
+  onContextMenu?: (e: React.MouseEvent) => void;
+  subtitle?: string;
+  progress?: number;
+}) {
+  return (
+    <button className={s.card} onClick={onClick} onContextMenu={onContextMenu}>
+      <div className={s.coverWrap}>
+        <CoverImg src={thumbUrl(manga.thumbnailUrl)} alt={manga.title} className={s.cover} />
+        {manga.inLibrary && <span className={s.inLibraryBadge}>Saved</span>}
+        {progress !== undefined && progress > 0 && (
+          <div className={s.progressBar}>
+            <div className={s.progressFill} style={{ width: `${progress * 100}%` }} />
+          </div>
+        )}
+      </div>
+      <p className={s.title}>{manga.title}</p>
+      {subtitle && <p className={s.subtitle}>{subtitle}</p>}
+    </button>
+  );
+});
+
+// ── Section ───────────────────────────────────────────────────────────────────
+
+function Section({
+  title, icon, onSeeAll, loading, children,
+}: {
+  title: string; icon?: React.ReactNode; onSeeAll?: () => void;
+  loading?: boolean; children: React.ReactNode;
+}) {
+  return (
+    <div className={s.section}>
+      <div className={s.sectionHeader}>
+        <span className={s.sectionTitle}>
+          <span className={s.sectionTitleIcon}>{icon}{title}</span>
+        </span>
+        {onSeeAll && (
+          <button className={s.seeAll} onClick={onSeeAll}>
+            See all <ArrowRight size={11} weight="light" />
+          </button>
+        )}
+      </div>
+      {loading ? <SkeletonRow /> : children}
+    </div>
+  );
+}
+
+// ── Main component ────────────────────────────────────────────────────────────
+
+type ExploreMode = "explore" | "sources";
+
+export default function Explore() {
+  const [mode, setMode] = useState<ExploreMode>("explore");
+  const activeSource = useStore((s) => s.activeSource);
+  const genreFilter  = useStore((s) => s.genreFilter);
+
+  if (activeSource) return <SourceBrowse />;
+  if (genreFilter)  return <GenreDrillPage />;
+
+  return (
+    <div className={s.root}>
+      <div className={s.header}>
+        <div className={s.headerLeft}>
+          <h1 className={s.heading}>Explore</h1>
+          <div className={s.tabs}>
+            <button
+              className={[s.tab, mode === "explore" ? s.tabActive : ""].join(" ").trim()}
+              onClick={() => setMode("explore")}
+            >
+              <Compass size={11} weight="bold" /> Explore
+            </button>
+            <button
+              className={[s.tab, mode === "sources" ? s.tabActive : ""].join(" ").trim()}
+              onClick={() => setMode("sources")}
+            >
+              <List size={11} weight="bold" /> Sources
+            </button>
+          </div>
+        </div>
+      </div>
+      {/* Keep ExploreFeed always mounted so data survives tab switches */}
+      <div style={{ display: mode === "explore" ? "contents" : "none" }}><ExploreFeed /></div>
+      {mode === "sources" && <SourceList />}
+    </div>
+  );
+}
+
+// ── Explore feed ──────────────────────────────────────────────────────────────
+
+const FOUNDATIONAL_GENRES = ["Action", "Romance", "Fantasy", "Adventure", "Comedy", "Drama"];
+
+function ExploreFeed() {
+  const [allManga, setAllManga]             = useState<Manga[]>([]);
+  const [loadingLib, setLoadingLib]         = useState(true);
+  const [popularManga, setPopularManga]     = useState<Manga[]>([]);
+  const [loadingPopular, setLoadingPopular] = useState(true);
+  const [genreResults, setGenreResults]     = useState<Map<string, Manga[]>>(new Map());
+  const [loadingGenres, setLoadingGenres]   = useState(false);
+  const [sources, setSources]               = useState<Source[]>([]);
+  const abortRef                            = useRef<AbortController | null>(null);
+  const fetchedGenresRef                    = useRef<string>("");
+
+  const history             = useStore((s) => s.history);
+  const settings            = useStore((s) => s.settings);
+  const setPreviewManga     = useStore((s) => s.setPreviewManga);
+  const setGenreFilter      = useStore((s) => s.setGenreFilter);
+  const folders             = useStore((s) => s.settings.folders);
+  const addFolder           = useStore((s) => s.addFolder);
+  const assignMangaToFolder = useStore((s) => s.assignMangaToFolder);
+  const [ctx, setCtx]       = useState<{ x: number; y: number; manga: Manga } | null>(null);
+
+  useEffect(() => {
+    return () => { abortRef.current?.abort(); };
+  }, []);
+
+  function openCtx(e: React.MouseEvent, m: Manga) {
+    e.preventDefault(); e.stopPropagation();
+    setCtx({ x: e.clientX, y: e.clientY, manga: m });
+  }
+
+  function buildCtxItems(m: Manga): ContextMenuEntry[] {
+    return [
+      {
+        label: m.inLibrary ? "In Library" : "Add to library",
+        icon: <BookmarkSimple size={13} weight={m.inLibrary ? "fill" : "light"} />,
+        disabled: m.inLibrary,
+        onClick: () => gql(UPDATE_MANGA, { id: m.id, inLibrary: true })
+          .then(() => { cache.clear(CACHE_KEYS.LIBRARY); })
+          .catch(console.error),
+      },
+      ...(folders.length > 0 ? [
+        { separator: true } as ContextMenuEntry,
+        ...folders.map((f): ContextMenuEntry => ({
+          label: f.mangaIds.includes(m.id) ? `✓ ${f.name}` : f.name,
+          icon: <Folder size={13} weight={f.mangaIds.includes(m.id) ? "fill" : "light"} />,
+          onClick: () => assignMangaToFolder(f.id, m.id),
+        })),
+      ] : []),
+      { separator: true },
+      {
+        label: "New folder & add",
+        icon: <FolderSimplePlus size={13} weight="light" />,
+        onClick: () => {
+          const name = prompt("Folder name:");
+          if (name?.trim()) { const id = addFolder(name.trim()); assignMangaToFolder(id, m.id); }
+        },
+      },
+    ];
+  }
+
+  // ── Library + sources load (runs once) ────────────────────────────────────
+  useEffect(() => {
+    const preferredLang = settings.preferredExtensionLang || "en";
+
+    // Library — fire immediately, independent of sources
+    cache.get(CACHE_KEYS.LIBRARY, () =>
+      Promise.all([
+        gql<{ mangas: { nodes: Manga[] } }>(GET_ALL_MANGA),
+        gql<{ mangas: { nodes: Manga[] } }>(GET_LIBRARY),
+      ]).then(([all, lib]) => {
+        const libMap = new Map(lib.mangas.nodes.map((m) => [m.id, m]));
+        return all.mangas.nodes.map((m) => libMap.get(m.id) ?? m);
+      })
+    ).then(setAllManga)
+     .catch(console.error)
+     .finally(() => setLoadingLib(false));
+
+    // Sources — then kick off popular AND genres simultaneously
+    cache.get(CACHE_KEYS.SOURCES, () =>
+      gql<{ sources: { nodes: Source[] } }>(GET_SOURCES)
+        .then((d) => dedupeSources(d.sources.nodes, preferredLang))
+    ).then((allSources) => {
+      if (allSources.length === 0) { setLoadingPopular(false); return; }
+
+      // Cap to 2 sources for the explore feed — halves the network calls
+      const topSources = getTopSources(allSources).slice(0, 2);
+      setSources(allSources);
+
+      // ── Popular — don't block genres ──────────────────────────────────
+      cache.get(CACHE_KEYS.POPULAR, () =>
+        Promise.allSettled(
+          topSources.map((src) =>
+            gql<{ fetchSourceManga: { mangas: Manga[] } }>(FETCH_SOURCE_MANGA, {
+              source: src.id, type: "POPULAR", page: 1, query: null,
+            }).then((d) => d.fetchSourceManga.mangas)
+          )
+        ).then((results) => {
+          const merged: Manga[] = [];
+          for (const r of results)
+            if (r.status === "fulfilled") merged.push(...r.value);
+          return dedupeMangaByTitle(merged).slice(0, 30);
+        })
+      ).then(setPopularManga).catch(console.error).finally(() => setLoadingPopular(false));
+
+      // ── Genres — start immediately alongside popular using foundational
+      // genres as a starting point; personalized genres replace these once
+      // library loads. Results stream in as each genre resolves.
+      const genresToFetch = FOUNDATIONAL_GENRES.slice(0, 3);
+      const genreKey = genresToFetch.join(",");
+      if (fetchedGenresRef.current === genreKey) return;
+      fetchedGenresRef.current = genreKey;
+
+      setLoadingGenres(true);
+      abortRef.current?.abort();
+      const ctrl = new AbortController();
+      abortRef.current = ctrl;
+
+      const streamingMap = new Map<string, Manga[]>();
+      Promise.allSettled(
+        genresToFetch.map((genre) =>
+          cache.get(CACHE_KEYS.GENRE(genre), () =>
+            Promise.allSettled(
+              topSources.map((src) =>
+                gql<{ fetchSourceManga: { mangas: Manga[] } }>(FETCH_SOURCE_MANGA, {
+                  source: src.id, type: "SEARCH", page: 1, query: genre,
+                }, ctrl.signal).then((d) => d.fetchSourceManga.mangas)
+              )
+            ).then((results) => {
+              const merged: Manga[] = [];
+              for (const r of results)
+                if (r.status === "fulfilled") merged.push(...r.value);
+              return dedupeMangaByTitle(merged).slice(0, 24);
+            })
+          ).then((mangas) => {
+            if (ctrl.signal.aborted) return;
+            // Stream: each genre paints immediately as it resolves
+            streamingMap.set(genre, mangas);
+            setGenreResults(new Map(streamingMap));
+          })
+        )
+      )
+      .catch((e) => { if (e?.name !== "AbortError") console.error(e); })
+      .finally(() => { if (!ctrl.signal.aborted) setLoadingGenres(false); });
+    })
+    .catch(console.error);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // ── Frecency genres (derived from history + library) ──────────────────────
+  const frecencyGenres = useMemo(() => {
+    const mangaScores = new Map<number, number>();
+    const mangaReadAt = new Map<number, number>();
+    for (const entry of history) {
+      mangaScores.set(entry.mangaId, (mangaScores.get(entry.mangaId) ?? 0) + 1);
+      if (entry.readAt > (mangaReadAt.get(entry.mangaId) ?? 0))
+        mangaReadAt.set(entry.mangaId, entry.readAt);
+    }
+    const genreWeights = new Map<string, number>();
+    const mangaMap = new Map(allManga.map((m) => [m.id, m]));
+    for (const [mangaId, count] of mangaScores.entries()) {
+      const score = frecencyScore(mangaReadAt.get(mangaId) ?? 0, count);
+      for (const genre of mangaMap.get(mangaId)?.genre ?? [])
+        genreWeights.set(genre, (genreWeights.get(genre) ?? 0) + score);
+    }
+    if (genreWeights.size === 0)
+      allManga.filter((m) => m.inLibrary).forEach((m) =>
+        (m.genre ?? []).forEach((g) => genreWeights.set(g, (genreWeights.get(g) ?? 0) + 1)));
+    if (genreWeights.size === 0) return FOUNDATIONAL_GENRES.slice(0, 3);
+    return Array.from(genreWeights.entries())
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 3)
+      .map(([g]) => g);
+  }, [allManga, history]);
+
+  // ── Re-fetch only when personalized genres differ from what's cached ───────
+  useEffect(() => {
+    if (frecencyGenres.length === 0 || sources.length === 0) return;
+
+    const genreKey = frecencyGenres.join(",");
+    if (fetchedGenresRef.current === genreKey) return; // already fetched, cache hit
+    fetchedGenresRef.current = genreKey;
+
+    setLoadingGenres(true);
+    abortRef.current?.abort();
+    const ctrl = new AbortController();
+    abortRef.current = ctrl;
+
+    const topSources = getTopSources(sources).slice(0, 2);
+    const streamingMap = new Map<string, Manga[]>();
+
+    Promise.allSettled(
+      frecencyGenres.map((genre) =>
+        cache.get(CACHE_KEYS.GENRE(genre), () =>
+          Promise.allSettled(
+            topSources.map((src) =>
+              gql<{ fetchSourceManga: { mangas: Manga[] } }>(FETCH_SOURCE_MANGA, {
+                source: src.id, type: "SEARCH", page: 1, query: genre,
+              }, ctrl.signal).then((d) => d.fetchSourceManga.mangas)
+            )
+          ).then((results) => {
+            const merged: Manga[] = [];
+            for (const r of results)
+              if (r.status === "fulfilled") merged.push(...r.value);
+            return dedupeMangaByTitle(merged).slice(0, 24);
+          })
+        ).then((mangas) => {
+          if (ctrl.signal.aborted) return;
+          streamingMap.set(genre, mangas);
+          setGenreResults(new Map(streamingMap));
+        })
+      )
+    )
+    .catch((e) => { if (e?.name !== "AbortError") console.error(e); })
+    .finally(() => { if (!ctrl.signal.aborted) setLoadingGenres(false); });
+  }, [frecencyGenres, sources]);
+
+  function openManga(m: Manga) { setPreviewManga(m); }
+
+  // ── Continue reading ──────────────────────────────────────────────────────
+  const continueReading = useMemo(() => {
+    const mangaMap = new Map(allManga.map((m) => [m.id, m]));
+    const seen = new Set<number>();
+    const result: { manga: Manga; chapterName: string; progress: number }[] = [];
+    for (const entry of history) {
+      if (seen.has(entry.mangaId)) continue;
+      seen.add(entry.mangaId);
+      const manga = mangaMap.get(entry.mangaId);
+      if (!manga) continue;
+      result.push({ manga, chapterName: entry.chapterName, progress: entry.pageNumber > 0 ? Math.min(entry.pageNumber / 20, 1) : 0 });
+      if (result.length >= 12) break;
+    }
+    return result;
+  }, [history, allManga]);
+
+  // ── Recommended ───────────────────────────────────────────────────────────
+  const recommended = useMemo(() => {
+    if (allManga.length === 0 || frecencyGenres.length === 0) return [];
+    const continueIds = new Set(continueReading.map((r) => r.manga.id));
+    return allManga
+      .filter((m) => m.inLibrary && !continueIds.has(m.id) &&
+        frecencyGenres.some((g) => (m.genre ?? []).includes(g)))
+      .slice(0, 20);
+  }, [allManga, frecencyGenres, continueReading]);
+
+  const genresLoading = loadingGenres;
+
+  return (
+    <div className={s.body}>
+
+      {(continueReading.length > 0 || loadingLib) && (
+        <Section title="Continue Reading" icon={<BookOpen size={11} weight="bold" />} loading={loadingLib}>
+          <div className={s.row}>
+            {continueReading.map(({ manga, chapterName, progress }) => (
+              <MiniCard key={manga.id} manga={manga} onClick={() => openManga(manga)}
+                onContextMenu={(e) => openCtx(e, manga)} subtitle={chapterName} progress={progress} />
+            ))}
+            {Array.from({ length: GHOST_COUNT }).map((_, i) => <GhostCard key={`ghost-cr-${i}`} />)}
+          </div>
+        </Section>
+      )}
+
+      {(recommended.length > 0 || loadingLib) && (
+        <Section title="Recommended for You" icon={<Star size={11} weight="bold" />} loading={loadingLib}>
+          <div className={s.row}>
+            {recommended.map((m) => (
+              <MiniCard key={m.id} manga={m} onClick={() => openManga(m)} onContextMenu={(e) => openCtx(e, m)} />
+            ))}
+            {Array.from({ length: GHOST_COUNT }).map((_, i) => <GhostCard key={`ghost-rec-${i}`} />)}
+          </div>
+        </Section>
+      )}
+
+      {(popularManga.length > 0 || loadingPopular) && (
+        <Section
+          title={sources.length === 1 ? `Popular on ${sources[0].displayName}` : sources.length > 1 ? `Popular across ${sources.length} sources` : "Popular"}
+          icon={<Fire size={11} weight="bold" />}
+          loading={loadingPopular}
+        >
+          {sources.length === 0 ? (
+            <div className={s.noSource}>No sources installed. Add extensions first.</div>
+          ) : (
+            <div className={s.row}>
+              {popularManga.map((m) => (
+                <MiniCard key={m.id} manga={m} onClick={() => openManga(m)} onContextMenu={(e) => openCtx(e, m)} />
+              ))}
+              {Array.from({ length: GHOST_COUNT }).map((_, i) => <GhostCard key={`ghost-pop-${i}`} />)}
+            </div>
+          )}
+        </Section>
+      )}
+
+      {frecencyGenres.map((genre) => {
+        const items = genreResults.get(genre) ?? [];
+        const isLoading = genresLoading && items.length === 0;
+        if (!isLoading && items.length === 0) return null;
+        return (
+          <Section key={genre} title={genre} onSeeAll={() => setGenreFilter(genre)} loading={isLoading}>
+            <div className={s.row}>
+              {items.map((m) => (
+                <MiniCard key={m.id} manga={m} onClick={() => openManga(m)} onContextMenu={(e) => openCtx(e, m)} />
+              ))}
+              {Array.from({ length: GHOST_COUNT }).map((_, i) => <GhostCard key={`ghost-${genre}-${i}`} />)}
+            </div>
+          </Section>
+        );
+      })}
+
+      {!loadingLib && !loadingPopular && !loadingGenres &&
+        continueReading.length === 0 && recommended.length === 0 &&
+        popularManga.length === 0 && frecencyGenres.every((g) => !genreResults.get(g)?.length) && (
+        <div className={s.empty}>
+          <span>Nothing to explore yet</span>
+          <span className={s.emptyHint}>Add manga to your library or install sources to get started.</span>
+        </div>
+      )}
+
+      {ctx && (
+        <ContextMenu x={ctx.x} y={ctx.y} items={buildCtxItems(ctx.manga)} onClose={() => setCtx(null)} />
+      )}
+    </div>
+  );
+}

src/components/explore/GenreDrillPage.module.css

@@ -0,0 +1,136 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  animation: fadeIn 0.14s ease both;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  padding: var(--sp-4) var(--sp-6);
+  border-bottom: 1px solid var(--border-dim);
+  flex-shrink: 0;
+}
+
+.back {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  color: var(--text-muted);
+  font-size: var(--text-xs);
+  font-family: var(--font-ui);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  transition: color var(--t-base);
+  flex-shrink: 0;
+}
+.back:hover { color: var(--text-secondary); }
+
+.title {
+  font-size: var(--text-base);
+  font-weight: var(--weight-medium);
+  color: var(--text-secondary);
+  letter-spacing: var(--tracking-tight);
+}
+
+.loadingHint {
+  margin-left: auto;
+  font-family: var(--font-ui);
+  font-size: var(--text-2xs);
+  color: var(--text-faint);
+  letter-spacing: var(--tracking-wide);
+}
+
+/* Grid fills entire remaining height, no show-more needed */
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(clamp(100px, 13vw, 140px), 1fr));
+  gap: var(--sp-4);
+  padding: var(--sp-5) var(--sp-6) var(--sp-6);
+  overflow-y: auto;
+  flex: 1;
+  align-content: start;
+  /* Smooth GPU-accelerated scrolling */
+  will-change: scroll-position;
+  -webkit-overflow-scrolling: touch;
+  contain: layout style;
+}
+
+.card {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  text-align: left;
+}
+.card:hover .cover { filter: brightness(1.06); }
+.card:hover .cardTitle { color: var(--text-primary); }
+
+.coverWrap {
+  position: relative;
+  aspect-ratio: 2 / 3;
+  overflow: hidden;
+  border-radius: var(--radius-md);
+  /* Solid bg shown while image fades in — matches skeleton color */
+  background: var(--bg-raised);
+  border: 1px solid var(--border-dim);
+  transform: translateZ(0);
+}
+
+.cover {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: filter var(--t-base);
+  will-change: filter;
+}
+
+.inLibraryBadge {
+  position: absolute;
+  bottom: var(--sp-1);
+  left: var(--sp-1);
+  font-family: var(--font-ui);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+  background: var(--accent-muted);
+  color: var(--accent-fg);
+  border: 1px solid var(--accent-dim);
+  padding: 2px 5px;
+  border-radius: var(--radius-sm);
+}
+
+.cardTitle {
+  margin-top: var(--sp-2);
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  line-height: var(--leading-snug);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  transition: color var(--t-base);
+}
+
+/* Skeletons */
+.cardSkeleton { padding: 0; }
+.coverSkeleton { aspect-ratio: 2 / 3; border-radius: var(--radius-md); }
+.titleSkeleton { height: 11px; margin-top: var(--sp-2); width: 75%; }
+
+.empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  color: var(--text-faint);
+  font-family: var(--font-ui);
+  font-size: var(--text-xs);
+  letter-spacing: var(--tracking-wide);
+}

src/components/explore/GenreDrillPage.tsx

@@ -0,0 +1,182 @@
+import { useEffect, useState, useMemo, useRef, memo } from "react";
+import { ArrowLeft, BookmarkSimple, FolderSimplePlus, Folder } from "@phosphor-icons/react";
+import { gql, thumbUrl } from "../../lib/client";
+import { GET_ALL_MANGA, GET_LIBRARY, GET_SOURCES, FETCH_SOURCE_MANGA, UPDATE_MANGA } from "../../lib/queries";
+import { cache, CACHE_KEYS, getTopSources } from "../../lib/cache";
+import { dedupeSources, dedupeMangaByTitle, dedupeMangaById } from "../../lib/sourceUtils";
+import { useStore } from "../../store";
+import ContextMenu, { type ContextMenuEntry } from "../context/ContextMenu";
+import type { Manga, Source } from "../../lib/types";
+import s from "./GenreDrillPage.module.css";
+
+const CoverImg = memo(function CoverImg({ src, alt, className }: { src: string; alt: string; className?: string }) {
+  const [loaded, setLoaded] = useState(false);
+  return (
+    <img
+      src={src} alt={alt} className={className}
+      loading="lazy" decoding="async"
+      onLoad={() => setLoaded(true)}
+      style={{ opacity: loaded ? 1 : 0, transition: loaded ? "opacity 0.15s ease" : "none" }}
+    />
+  );
+});
+
+export default function GenreDrillPage() {
+  const genre               = useStore((st) => st.genreFilter);
+  const setGenreFilter      = useStore((st) => st.setGenreFilter);
+  const setPreviewManga     = useStore((st) => st.setPreviewManga);
+  const settings            = useStore((st) => st.settings);
+  const folders             = useStore((st) => st.settings.folders);
+  const addFolder           = useStore((st) => st.addFolder);
+  const assignMangaToFolder = useStore((st) => st.assignMangaToFolder);
+
+  const [libraryManga, setLibraryManga]   = useState<Manga[]>([]);
+  const [sourceManga, setSourceManga]     = useState<Manga[]>([]);
+  const [loadingLibrary, setLoadingLibrary] = useState(true);
+  const [loadingSources, setLoadingSources] = useState(true);
+  const [ctx, setCtx] = useState<{ x: number; y: number; manga: Manga } | null>(null);
+  const abortRef = useRef<AbortController | null>(null);
+
+  useEffect(() => {
+    if (!genre) return;
+
+    abortRef.current?.abort();
+    const ctrl = new AbortController();
+    abortRef.current = ctrl;
+
+    setLoadingLibrary(true);
+    setLoadingSources(true);
+    setSourceManga([]);
+
+    // ── Library ────────────────────────────────────────────────────────────
+    cache.get(CACHE_KEYS.LIBRARY, () =>
+      Promise.all([
+        gql<{ mangas: { nodes: Manga[] } }>(GET_ALL_MANGA),
+        gql<{ mangas: { nodes: Manga[] } }>(GET_LIBRARY),
+      ]).then(([all, lib]) => {
+        const libMap = new Map(lib.mangas.nodes.map((m) => [m.id, m]));
+        return all.mangas.nodes.map((m) => libMap.get(m.id) ?? m);
+      })
+    ).then(setLibraryManga)
+     .catch((e) => { if (e?.name !== "AbortError") console.error(e); })
+     .finally(() => setLoadingLibrary(false));
+
+    // ── Sources ────────────────────────────────────────────────────────────
+    const preferredLang = settings.preferredExtensionLang || "en";
+    cache.get(CACHE_KEYS.SOURCES, () =>
+      gql<{ sources: { nodes: Source[] } }>(GET_SOURCES)
+        .then((d) => dedupeSources(d.sources.nodes, preferredLang))
+    ).then((allSources) => {
+      const topSources = getTopSources(allSources);
+      return cache.get(CACHE_KEYS.GENRE(genre), () =>
+        Promise.allSettled(
+          topSources.map((src) =>
+            gql<{ fetchSourceManga: { mangas: Manga[] } }>(FETCH_SOURCE_MANGA, {
+              source: src.id, type: "SEARCH", page: 1, query: genre,
+            }, ctrl.signal).then((d) => d.fetchSourceManga.mangas)
+          )
+        ).then((results) => {
+          const merged: Manga[] = [];
+          for (const r of results)
+            if (r.status === "fulfilled") merged.push(...r.value);
+          return dedupeMangaByTitle(merged);
+        })
+      );
+    })
+    .then((manga) => { if (!ctrl.signal.aborted) setSourceManga(manga); })
+    .catch((e) => { if (e?.name !== "AbortError") console.error(e); })
+    .finally(() => { if (!ctrl.signal.aborted) setLoadingSources(false); });
+
+    return () => { ctrl.abort(); };
+  }, [genre]);
+
+  const filtered = useMemo(() => {
+    const libMatches = libraryManga.filter((m) => (m.genre ?? []).includes(genre));
+    const srcMatches = sourceManga.filter((m) => !m.genre?.length || m.genre.includes(genre));
+    return dedupeMangaById([...libMatches, ...srcMatches]);
+  }, [libraryManga, sourceManga, genre]);
+
+  function openCtx(e: React.MouseEvent, m: Manga) {
+    e.preventDefault(); e.stopPropagation();
+    setCtx({ x: e.clientX, y: e.clientY, manga: m });
+  }
+
+  function buildCtxItems(m: Manga): ContextMenuEntry[] {
+    return [
+      {
+        label: m.inLibrary ? "In Library" : "Add to library",
+        icon: <BookmarkSimple size={13} weight={m.inLibrary ? "fill" : "light"} />,
+        disabled: m.inLibrary,
+        onClick: () => gql(UPDATE_MANGA, { id: m.id, inLibrary: true })
+          .then(() => {
+            setSourceManga((prev) => prev.map((x) => x.id === m.id ? { ...x, inLibrary: true } : x));
+            cache.clear(CACHE_KEYS.LIBRARY);
+          })
+          .catch(console.error),
+      },
+      ...(folders.length > 0 ? [
+        { separator: true } as ContextMenuEntry,
+        ...folders.map((f): ContextMenuEntry => ({
+          label: f.mangaIds.includes(m.id) ? `✓ ${f.name}` : f.name,
+          icon: <Folder size={13} weight={f.mangaIds.includes(m.id) ? "fill" : "light"} />,
+          onClick: () => assignMangaToFolder(f.id, m.id),
+        })),
+      ] : []),
+      { separator: true },
+      {
+        label: "New folder & add",
+        icon: <FolderSimplePlus size={13} weight="light" />,
+        onClick: () => {
+          const name = prompt("Folder name:");
+          if (name?.trim()) { const id = addFolder(name.trim()); assignMangaToFolder(id, m.id); }
+        },
+      },
+    ];
+  }
+
+  const showSkeleton = loadingLibrary && filtered.length === 0;
+
+  return (
+    <div className={s.root}>
+      <div className={s.header}>
+        <button className={s.back} onClick={() => setGenreFilter("")}>
+          <ArrowLeft size={13} weight="light" />
+          <span>Back</span>
+        </button>
+        <span className={s.title}>{genre}</span>
+        {loadingSources && !loadingLibrary && filtered.length > 0 && (
+          <span className={s.loadingHint}>Loading more…</span>
+        )}
+      </div>
+
+      {showSkeleton ? (
+        <div className={s.grid}>
+          {Array.from({ length: 24 }).map((_, i) => (
+            <div key={i} className={s.cardSkeleton}>
+              <div className={["skeleton", s.coverSkeleton].join(" ")} />
+              <div className={["skeleton", s.titleSkeleton].join(" ")} />
+            </div>
+          ))}
+        </div>
+      ) : filtered.length === 0 && !loadingSources ? (
+        <div className={s.empty}>No manga found for "{genre}".</div>
+      ) : (
+        <div className={s.grid}>
+          {filtered.map((m) => (
+            <button key={m.id} className={s.card} onClick={() => setPreviewManga(m)} onContextMenu={(e) => openCtx(e, m)}>
+              <div className={s.coverWrap}>
+                <CoverImg src={thumbUrl(m.thumbnailUrl)} alt={m.title} className={s.cover} />
+                {m.inLibrary && <span className={s.inLibraryBadge}>Saved</span>}
+              </div>
+              <p className={s.cardTitle}>{m.title}</p>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {ctx && (
+        <ContextMenu x={ctx.x} y={ctx.y} items={buildCtxItems(ctx.manga)} onClose={() => setCtx(null)} />
+      )}
+    </div>
+  );
+}

src/components/explore/MangaPreview.module.css

@@ -0,0 +1,385 @@
+/* ── Animations ──────────────────────────────────────────────────────────── */
+@keyframes fadeIn  { from { opacity: 0 } to { opacity: 1 } }
+@keyframes scaleIn { from { opacity: 0; transform: scale(0.97) } to { opacity: 1; transform: scale(1) } }
+@keyframes pulse   { 0%,100% { opacity: 0.4 } 50% { opacity: 0.8 } }
+
+/* ── Backdrop ────────────────────────────────────────────────────────────── */
+.backdrop {
+  position: fixed; inset: 0;
+  background: rgba(0,0,0,0.72);
+  z-index: var(--z-settings);
+  display: flex; align-items: center; justify-content: center;
+  animation: fadeIn 0.12s ease both;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+/* ── Modal shell ─────────────────────────────────────────────────────────── */
+.modal {
+  width: min(800px, calc(100vw - 48px));
+  height: min(560px, calc(100vh - 80px));
+  display: flex;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-base);
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  animation: scaleIn 0.16s ease both;
+  box-shadow: 0 0 0 1px var(--border-dim), 0 24px 64px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.4);
+}
+
+/* ── Cover column ────────────────────────────────────────────────────────── */
+.coverCol {
+  width: 190px; flex-shrink: 0;
+  background: var(--bg-raised);
+  border-right: 1px solid var(--border-dim);
+  display: flex; flex-direction: column;
+  padding: var(--sp-5) var(--sp-4) var(--sp-4);
+  gap: var(--sp-3);
+  overflow-y: auto; overflow-x: hidden;
+  scrollbar-width: none;
+}
+.coverCol::-webkit-scrollbar { display: none; }
+
+.coverWrap {
+  position: relative;
+  width: 100%;
+}
+
+.cover {
+  width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-dim);
+  display: block;
+}
+
+.coverSpinner {
+  position: absolute; inset: 0;
+  display: flex; align-items: center; justify-content: center;
+  background: rgba(0,0,0,0.35);
+  border-radius: var(--radius-md);
+  color: var(--text-faint);
+}
+
+.coverActions {
+  display: flex; flex-direction: column; gap: var(--sp-2);
+}
+
+/* ── Cover action buttons ────────────────────────────────────────────────── */
+.actionBtn {
+  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
+  width: 100%; padding: 7px var(--sp-3);
+  border-radius: var(--radius-md);
+  font-family: var(--font-ui); font-size: var(--text-xs);
+  letter-spacing: var(--tracking-wide);
+  border: 1px solid var(--border-strong);
+  background: none; color: var(--text-muted);
+  cursor: pointer;
+  transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  text-align: center;
+}
+.actionBtn:hover:not(:disabled) { color: var(--accent-fg); border-color: var(--accent); background: var(--accent-muted); }
+.actionBtn:disabled { opacity: 0.4; cursor: default; }
+
+.actionBtnActive {
+  background: var(--accent-muted);
+  border-color: var(--accent-dim);
+  color: var(--accent-fg);
+}
+.actionBtnActive:hover:not(:disabled) { filter: brightness(1.1); }
+
+.actionBtnFolder { color: var(--text-secondary); border-color: var(--border-strong); }
+
+.actionBtnLabel {
+  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
+}
+
+/* ── Folder picker ───────────────────────────────────────────────────────── */
+.folderWrap { position: relative; width: 100%; }
+
+.folderMenu {
+  position: absolute;
+  bottom: calc(100% + 4px); left: 0; right: 0;
+  background: var(--bg-raised);
+  border: 1px solid var(--border-base);
+  border-radius: var(--radius-md);
+  padding: var(--sp-1);
+  display: flex; flex-direction: column; gap: 1px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
+  z-index: 10;
+  animation: scaleIn 0.1s ease both;
+  transform-origin: bottom center;
+}
+
+.folderEmpty {
+  font-family: var(--font-ui); font-size: var(--text-xs);
+  color: var(--text-faint); padding: var(--sp-2) var(--sp-3);
+}
+
+.folderItem {
+  display: flex; align-items: center; gap: var(--sp-2);
+  padding: 6px var(--sp-3); border-radius: var(--radius-sm);
+  font-family: var(--font-ui); font-size: var(--text-xs);
+  color: var(--text-muted);
+  background: none; border: none; cursor: pointer; text-align: left;
+  transition: background var(--t-fast), color var(--t-fast);
+}
+.folderItem:hover { background: var(--bg-overlay); color: var(--text-primary); }
+.folderItemOn { color: var(--accent-fg); }
+
+.folderDivider { height: 1px; background: var(--border-dim); margin: var(--sp-1) 0; }
+
+.folderCreateRow {
+  display: flex; gap: var(--sp-1); padding: var(--sp-1);
+}
+.folderInput {
+  flex: 1; background: var(--bg-overlay);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm); padding: 4px 8px;
+  color: var(--text-secondary); font-family: var(--font-ui); font-size: var(--text-xs);
+  outline: none; min-width: 0;
+}
+.folderInput:focus { border-color: var(--border-focus); }
+
+.folderOkBtn {
+  font-family: var(--font-ui); font-size: var(--text-xs);
+  padding: 4px 8px; border-radius: var(--radius-sm);
+  border: 1px solid var(--border-strong);
+  background: none; color: var(--text-muted); cursor: pointer; flex-shrink: 0;
+  transition: color var(--t-base);
+}
+.folderOkBtn:disabled { opacity: 0.4; cursor: default; }
+.folderOkBtn:not(:disabled):hover { color: var(--accent-fg); border-color: var(--accent); }
+
+.folderNewBtn {
+  padding: 6px var(--sp-3); border-radius: var(--radius-sm);
+  font-family: var(--font-ui); font-size: var(--text-xs);
+  color: var(--text-faint); background: none; border: none;
+  cursor: pointer; text-align: left; width: 100%;
+  transition: color var(--t-fast);
+}
+.folderNewBtn:hover { color: var(--accent-fg); }
+
+/* ── Content column ──────────────────────────────────────────────────────── */
+.content {
+  flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0;
+}
+
+/* ── Header ──────────────────────────────────────────────────────────────── */
+.contentHeader {
+  display: flex; align-items: flex-start; justify-content: space-between;
+  gap: var(--sp-4); padding: var(--sp-5) var(--sp-6) var(--sp-4);
+  border-bottom: 1px solid var(--border-dim); flex-shrink: 0;
+}
+
+.titleBlock {
+  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1);
+}
+
+.title {
+  font-size: var(--text-lg); font-weight: var(--weight-medium);
+  color: var(--text-primary); letter-spacing: var(--tracking-tight);
+  line-height: var(--leading-tight);
+}
+
+.byline {
+  font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-snug);
+}
+
+.skByline {
+  height: 14px; width: 55%;
+  background: var(--bg-overlay); border-radius: var(--radius-sm);
+  animation: pulse 1.4s ease infinite;
+}
+
+.closeBtn {
+  display: flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; border-radius: var(--radius-sm);
+  color: var(--text-faint); border: none; background: none;
+  cursor: pointer; flex-shrink: 0;
+  transition: color var(--t-base), background var(--t-base);
+}
+.closeBtn:hover { color: var(--text-muted); background: var(--bg-raised); }
+
+/* ── Scrollable body ─────────────────────────────────────────────────────── */
+.contentBody {
+  flex: 1; overflow-y: auto;
+  padding: var(--sp-5) var(--sp-6);
+  display: flex; flex-direction: column; gap: var(--sp-4);
+  scrollbar-width: thin;
+}
+
+/* ── Error banner ────────────────────────────────────────────────────────── */
+.errorBanner {
+  font-family: var(--font-ui); font-size: var(--text-xs);
+  color: var(--color-warn, #f59e0b);
+  background: color-mix(in srgb, var(--color-warn, #f59e0b) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-warn, #f59e0b) 25%, transparent);
+  border-radius: var(--radius-sm); padding: 6px var(--sp-3);
+}
+
+/* ── Skeleton rows ───────────────────────────────────────────────────────── */
+.skRow {
+  display: flex; gap: var(--sp-2); align-items: center;
+}
+.skBadge {
+  height: 20px; width: 54px;
+  background: var(--bg-overlay); border-radius: var(--radius-sm);
+  animation: pulse 1.4s ease infinite;
+}
+
+.skDesc {
+  display: flex; flex-direction: column; gap: 8px; padding: var(--sp-2) 0;
+}
+.skLine {
+  height: 13px; background: var(--bg-overlay);
+  border-radius: var(--radius-sm);
+  animation: pulse 1.4s ease infinite;
+}
+
+/* ── Badges ──────────────────────────────────────────────────────────────── */
+.badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
+
+.badge {
+  font-family: var(--font-ui); font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide); text-transform: uppercase;
+  padding: 3px 8px; border-radius: var(--radius-sm);
+  border: 1px solid var(--border-dim);
+  background: var(--bg-raised); color: var(--text-faint);
+}
+.badgeGreen {
+  background: color-mix(in srgb, #22c55e 12%, transparent);
+  border-color: color-mix(in srgb, #22c55e 30%, transparent);
+  color: #22c55e;
+}
+.badgeDim { /* default */ }
+.badgeAccent {
+  background: var(--accent-muted); border-color: var(--accent-dim); color: var(--accent-fg);
+}
+.badgeUnread {
+  background: color-mix(in srgb, #f59e0b 12%, transparent);
+  border-color: color-mix(in srgb, #f59e0b 30%, transparent);
+  color: #f59e0b;
+}
+.badgeNsfw {
+  background: color-mix(in srgb, #ef4444 12%, transparent);
+  border-color: color-mix(in srgb, #ef4444 30%, transparent);
+  color: #ef4444;
+}
+
+/* ── Chapter box — clearly separated from description ────────────────────── */
+.chapterBox {
+  display: flex; flex-direction: column; gap: var(--sp-3);
+  padding: var(--sp-4);
+  background: var(--bg-raised);
+  border: 1px solid var(--border-dim);
+  border-radius: var(--radius-md);
+}
+
+.chapterLoading {
+  display: flex; align-items: center; gap: var(--sp-2);
+}
+.chapterLoadingLabel {
+  font-family: var(--font-ui); font-size: var(--text-xs);
+  color: var(--text-faint); letter-spacing: var(--tracking-wide);
+}
+
+.chapterMeta {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
+}
+
+.chapterLabel {
+  font-family: var(--font-ui); font-size: var(--text-xs);
+  color: var(--text-muted); letter-spacing: var(--tracking-wide);
+}
+
+.dlAllBtn {
+  display: flex; align-items: center; gap: var(--sp-1);
+  font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
+  padding: 3px 10px; border-radius: var(--radius-sm);
+  border: 1px solid var(--border-dim); background: none; color: var(--text-faint);
+  cursor: pointer; flex-shrink: 0;
+  transition: color var(--t-base), border-color var(--t-base);
+}
+.dlAllBtn:hover:not(:disabled) { color: var(--text-muted); border-color: var(--border-strong); }
+.dlAllBtn:disabled { opacity: 0.5; cursor: default; }
+
+.progressTrack {
+  height: 3px; background: var(--bg-overlay);
+  border-radius: var(--radius-full); overflow: hidden;
+}
+.progressFill {
+  height: 100%; background: var(--accent);
+  border-radius: var(--radius-full);
+  transition: width 0.3s ease;
+}
+
+.readBtn {
+  display: flex; align-items: center; gap: var(--sp-2);
+  padding: 8px var(--sp-4);
+  border-radius: var(--radius-md);
+  font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
+  background: var(--accent-muted); border: 1px solid var(--accent-dim); color: var(--accent-fg);
+  cursor: pointer; align-self: flex-start;
+  transition: filter var(--t-base);
+}
+.readBtn:hover { filter: brightness(1.1); }
+
+/* ── Description block ───────────────────────────────────────────────────── */
+.descBlock {
+  display: flex; flex-direction: column; gap: var(--sp-2);
+  border-top: 1px solid var(--border-dim); padding-top: var(--sp-3);
+}
+
+.desc {
+  font-size: var(--text-sm); color: var(--text-muted);
+  line-height: var(--leading-base);
+  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
+}
+.descOpen {
+  display: block; -webkit-line-clamp: unset; overflow: visible;
+}
+
+.descToggle {
+  display: flex; align-items: center; gap: var(--sp-1);
+  font-family: var(--font-ui); font-size: var(--text-xs);
+  color: var(--text-faint); background: none; border: none;
+  cursor: pointer; padding: 0; align-self: flex-start;
+  transition: color var(--t-base);
+}
+.descToggle:hover { color: var(--accent-fg); }
+
+/* ── Genre tags ──────────────────────────────────────────────────────────── */
+.genres { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
+
+.genreTag {
+  font-family: var(--font-ui); font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide); padding: 3px 8px;
+  border-radius: var(--radius-sm); border: 1px solid var(--border-dim);
+  background: var(--bg-raised); color: var(--text-faint);
+}
+
+/* ── Metadata table ──────────────────────────────────────────────────────── */
+.metaTable {
+  display: flex; flex-direction: column; gap: 1px;
+  border-top: 1px solid var(--border-dim); padding-top: var(--sp-3);
+}
+
+.metaRow {
+  display: flex; align-items: baseline; gap: var(--sp-3); padding: 5px 0;
+}
+.metaKey {
+  font-family: var(--font-ui); font-size: var(--text-xs);
+  color: var(--text-faint); letter-spacing: var(--tracking-wide);
+  text-transform: uppercase; min-width: 56px; flex-shrink: 0;
+}
+.metaVal {
+  font-size: var(--text-sm); color: var(--text-secondary);
+  line-height: var(--leading-snug);
+}
+.metaLink {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: var(--text-sm); color: var(--accent-fg);
+  text-decoration: none; transition: opacity var(--t-base);
+}
+.metaLink:hover { opacity: 0.75; }

src/components/explore/MangaPreview.tsx

@@ -0,0 +1,555 @@
+import { useEffect, useRef, useState, useCallback } from "react";
+import {
+  X, BookmarkSimple, ArrowSquareOut, Play,
+  CircleNotch, Books, CaretDown, FolderSimplePlus, Folder,
+} from "@phosphor-icons/react";
+import { gql, thumbUrl } from "../../lib/client";
+import {
+  GET_MANGA, GET_CHAPTERS, FETCH_MANGA, FETCH_CHAPTERS, UPDATE_MANGA, ENQUEUE_CHAPTERS_DOWNLOAD,
+} from "../../lib/queries";
+import { cache, CACHE_KEYS } from "../../lib/cache";
+import { useStore } from "../../store";
+import type { Manga, Chapter } from "../../lib/types";
+import s from "./MangaPreview.module.css";
+
+export default function MangaPreview() {
+  const previewManga          = useStore((st) => st.previewManga);
+  const setPreviewManga       = useStore((st) => st.setPreviewManga);
+  const setActiveManga        = useStore((st) => st.setActiveManga);
+  const setNavPage            = useStore((st) => st.setNavPage);
+  const openReader            = useStore((st) => st.openReader);
+  const addToast              = useStore((st) => st.addToast);
+  const folders               = useStore((st) => st.settings.folders);
+  const addFolder             = useStore((st) => st.addFolder);
+  const assignMangaToFolder   = useStore((st) => st.assignMangaToFolder);
+  const removeMangaFromFolder = useStore((st) => st.removeMangaFromFolder);
+
+  const [manga, setManga]                     = useState<Manga | null>(null);
+  const [chapters, setChapters]               = useState<Chapter[]>([]);
+  const [loadingDetail, setLoadingDetail]     = useState(false);
+  const [loadingChapters, setLoadingChapters] = useState(false);
+  const [togglingLib, setTogglingLib]         = useState(false);
+  const [descExpanded, setDescExpanded]       = useState(false);
+  const [folderOpen, setFolderOpen]           = useState(false);
+  const [newFolderName, setNewFolderName]     = useState("");
+  const [creatingFolder, setCreatingFolder]   = useState(false);
+  const [queueingAll, setQueueingAll]         = useState(false);
+  const [fetchError, setFetchError]           = useState<string | null>(null);
+
+  const backdropRef = useRef<HTMLDivElement>(null);
+  const detailAbort = useRef<AbortController | null>(null);
+  const chapterAbort = useRef<AbortController | null>(null);
+  const folderRef   = useRef<HTMLDivElement>(null);
+
+  const close = useCallback(() => {
+    detailAbort.current?.abort();
+    chapterAbort.current?.abort();
+    setPreviewManga(null);
+    setManga(null);
+    setChapters([]);
+    setDescExpanded(false);
+    setFolderOpen(false);
+    setCreatingFolder(false);
+    setNewFolderName("");
+    setFetchError(null);
+  }, [setPreviewManga]);
+
+  // ── Fetch detail + chapters on open ──────────────────────────────────────
+  useEffect(() => {
+    if (!previewManga) return;
+
+    // Abort any in-flight requests from previous manga
+    detailAbort.current?.abort();
+    chapterAbort.current?.abort();
+
+    const dCtrl = new AbortController();
+    const cCtrl = new AbortController();
+    detailAbort.current  = dCtrl;
+    chapterAbort.current = cCtrl;
+
+    setManga(null);
+    setChapters([]);
+    setDescExpanded(false);
+    setFetchError(null);
+    setLoadingDetail(true);
+    setLoadingChapters(true);
+
+    const id = previewManga.id;
+
+    // ── Detail fetch strategy ─────────────────────────────────────────────
+    // For source/explore manga we must call FETCH_MANGA (mutation that
+    // hits the source and syncs to the local DB). GET_MANGA only works for
+    // manga already in the local DB with full metadata.
+    //
+    // Fast path: if we already cached a full record, use it directly.
+    // Slow path: always try FETCH_MANGA first — it never fails for valid IDs
+    //   and returns the richest data. Fall back to GET_MANGA if it errors.
+    //
+    (async (): Promise<Manga> => {
+      const cacheKey = CACHE_KEYS.MANGA(id);
+
+      // Already have a cached rich record — no network needed
+      if (cache.has(cacheKey)) {
+        return cache.get(cacheKey, () =>
+          Promise.resolve(previewManga as Manga)
+        ) as Promise<Manga>;
+      }
+
+      // Try FETCH_MANGA first — works for all manga regardless of whether
+      // they are in the local DB yet (it fetches from source and syncs).
+      try {
+        const d = await gql<{ fetchManga: { manga: Manga } }>(
+          FETCH_MANGA, { id }, dCtrl.signal
+        );
+        return d.fetchManga.manga;
+      } catch (e: any) {
+        if (e?.name === "AbortError") throw e;
+        // FETCH_MANGA failed (e.g. source offline) — fall back to local DB
+        const local = await gql<{ manga: Manga }>(
+          GET_MANGA, { id }, dCtrl.signal
+        ).then((d) => d.manga);
+        if (local) return local;
+        throw new Error("Could not load manga details");
+      }
+    })()
+      .then((fullManga) => {
+        if (dCtrl.signal.aborted) return;
+        // Cache the rich record so re-opening is instant
+        if (!cache.has(CACHE_KEYS.MANGA(id))) {
+          cache.get(CACHE_KEYS.MANGA(id), () => Promise.resolve(fullManga));
+        }
+        setManga(fullManga);
+        setLoadingDetail(false);
+      })
+      .catch((e) => {
+        if (e?.name === "AbortError") return;
+        console.error("MangaPreview detail fetch:", e);
+        // Show whatever sparse data we have from previewManga
+        setManga(previewManga as Manga);
+        setFetchError("Could not load full details — showing cached data");
+        setLoadingDetail(false);
+      });
+
+    // ── Chapter fetch — local DB first, fall back to source fetch ────────
+    gql<{ chapters: { nodes: Chapter[] } }>(
+      GET_CHAPTERS, { mangaId: id }, cCtrl.signal
+    )
+      .then(async (d) => {
+        if (cCtrl.signal.aborted) return;
+        let nodes = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
+        // If no local chapters yet (explore/source manga), fetch from source
+        if (nodes.length === 0) {
+          try {
+            const fetched = await gql<{ fetchChapters: { chapters: Chapter[] } }>(
+              FETCH_CHAPTERS, { mangaId: id }, cCtrl.signal
+            );
+            if (!cCtrl.signal.aborted)
+              nodes = [...fetched.fetchChapters.chapters].sort((a, b) => a.sourceOrder - b.sourceOrder);
+          } catch (e: any) {
+            if (e?.name === "AbortError") return;
+            // Leave nodes empty — not a fatal error
+          }
+        }
+        if (!cCtrl.signal.aborted) setChapters(nodes);
+      })
+      .catch((e) => { if (e?.name !== "AbortError") console.error(e); })
+      .finally(() => { if (!cCtrl.signal.aborted) setLoadingChapters(false); });
+
+    return () => { dCtrl.abort(); cCtrl.abort(); };
+  }, [previewManga?.id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ── Keyboard close ────────────────────────────────────────────────────────
+  useEffect(() => {
+    if (!previewManga) return;
+    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") close(); };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [previewManga, close]);
+
+  // ── Folder outside click ──────────────────────────────────────────────────
+  useEffect(() => {
+    if (!folderOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (folderRef.current && !folderRef.current.contains(e.target as Node)) {
+        setFolderOpen(false); setCreatingFolder(false); setNewFolderName("");
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [folderOpen]);
+
+  if (!previewManga) return null;
+
+  // Always show title/cover from previewManga immediately; upgrade to fetched manga when ready
+  const displayManga    = manga ?? previewManga;
+  const totalCount      = chapters.length;
+  const readCount       = chapters.filter((c) => c.isRead).length;
+  const unreadCount     = totalCount - readCount;
+  const downloadedCount = chapters.filter((c) => c.isDownloaded).length;
+  const bookmarkCount   = chapters.filter((c) => c.isBookmarked).length;
+  const inLibrary       = manga?.inLibrary ?? previewManga.inLibrary ?? false;
+
+  // Scanlators — deduplicated, non-empty
+  const scanlators = [...new Set(
+    chapters.map((c) => c.scanlator).filter((sc): sc is string => !!sc?.trim())
+  )];
+
+  // Publication date range from chapter upload dates
+  const uploadDates = chapters
+    .map((c) => c.uploadDate ? new Date(c.uploadDate).getTime() : null)
+    .filter((d): d is number => d !== null && !isNaN(d));
+  const firstUpload = uploadDates.length ? new Date(Math.min(...uploadDates)) : null;
+  const lastUpload  = uploadDates.length ? new Date(Math.max(...uploadDates)) : null;
+
+  function formatDate(d: Date) {
+    return d.toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });
+  }
+
+  const statusLabel = displayManga.status
+    ? displayManga.status.charAt(0) + displayManga.status.slice(1).toLowerCase()
+    : null;
+
+  const continueChapter = (() => {
+    if (!chapters.length) return null;
+    const asc = [...chapters];
+    const inProgress = asc.find((c) => !c.isRead && (c.lastPageRead ?? 0) > 0);
+    if (inProgress) return { ch: inProgress, label: `Continue · Ch.${inProgress.chapterNumber}` };
+    const firstUnread = asc.find((c) => !c.isRead);
+    if (firstUnread) return { ch: firstUnread, label: `Start · Ch.${firstUnread.chapterNumber}` };
+    return { ch: asc[0], label: "Read again" };
+  })();
+
+  async function toggleLibrary() {
+    if (!manga) return;
+    setTogglingLib(true);
+    const next = !manga.inLibrary;
+    await gql(UPDATE_MANGA, { id: manga.id, inLibrary: next }).catch(console.error);
+    const updated = { ...manga, inLibrary: next };
+    setManga(updated);
+    // Update cache so subsequent opens reflect new state
+    cache.clear(CACHE_KEYS.MANGA(manga.id));
+    cache.get(CACHE_KEYS.MANGA(manga.id), () => Promise.resolve(updated));
+    cache.clear(CACHE_KEYS.LIBRARY);
+    setTogglingLib(false);
+    addToast({ kind: "success", title: next ? "Added to library" : "Removed from library" });
+  }
+
+  async function downloadAll() {
+    const ids = chapters.filter((c) => !c.isDownloaded && !c.isRead).map((c) => c.id);
+    if (!ids.length) return;
+    setQueueingAll(true);
+    await gql(ENQUEUE_CHAPTERS_DOWNLOAD, { chapterIds: ids }).catch(console.error);
+    addToast({ kind: "download", title: "Downloading", body: `${ids.length} chapters queued` });
+    setQueueingAll(false);
+  }
+
+  function openSeriesDetail() {
+    setActiveManga(displayManga);
+    setNavPage("library");
+    close();
+  }
+
+  function handleFolderCreate() {
+    const name = newFolderName.trim();
+    if (!name || !previewManga) return;
+    const newId = addFolder(name);
+    assignMangaToFolder(newId, previewManga.id);
+    setNewFolderName("");
+    setCreatingFolder(false);
+  }
+
+  const assignedFolders = folders.filter((f) => f.mangaIds.includes(previewManga.id));
+
+  return (
+    <div
+      className={s.backdrop}
+      ref={backdropRef}
+      onClick={(e) => { if (e.target === backdropRef.current) close(); }}
+    >
+      <div className={s.modal} role="dialog" aria-label="Manga preview">
+
+        {/* ── Cover column ── */}
+        <div className={s.coverCol}>
+          <div className={s.coverWrap}>
+            <img
+              src={thumbUrl(previewManga.thumbnailUrl)}
+              alt={displayManga.title}
+              className={s.cover}
+            />
+            {loadingDetail && (
+              <div className={s.coverSpinner}>
+                <CircleNotch size={18} weight="light" className="anim-spin" />
+              </div>
+            )}
+          </div>
+
+          <div className={s.coverActions}>
+            <button
+              className={[s.actionBtn, inLibrary ? s.actionBtnActive : ""].join(" ")}
+              onClick={toggleLibrary}
+              disabled={togglingLib || loadingDetail}
+            >
+              <BookmarkSimple size={13} weight={inLibrary ? "fill" : "light"} />
+              {togglingLib ? "…" : inLibrary ? "In Library" : "Add to Library"}
+            </button>
+
+            <button className={s.actionBtn} onClick={openSeriesDetail}>
+              <Books size={13} weight="light" />
+              Series Detail
+            </button>
+
+            {/* Folder picker */}
+            <div className={s.folderWrap} ref={folderRef}>
+              <button
+                className={[s.actionBtn, assignedFolders.length > 0 ? s.actionBtnFolder : ""].join(" ")}
+                onClick={() => setFolderOpen((p) => !p)}
+              >
+                <FolderSimplePlus size={13} weight={assignedFolders.length > 0 ? "fill" : "light"} />
+                <span className={s.actionBtnLabel}>
+                  {assignedFolders.length > 0 ? assignedFolders.map((f) => f.name).join(", ") : "Add to folder"}
+                </span>
+              </button>
+
+              {folderOpen && (
+                <div className={s.folderMenu}>
+                  {folders.length === 0 && !creatingFolder && (
+                    <p className={s.folderEmpty}>No folders yet</p>
+                  )}
+                  {folders.map((f) => {
+                    const isIn = f.mangaIds.includes(previewManga.id);
+                    return (
+                      <button key={f.id}
+                        className={[s.folderItem, isIn ? s.folderItemOn : ""].join(" ")}
+                        onClick={() => isIn
+                          ? removeMangaFromFolder(f.id, previewManga.id)
+                          : assignMangaToFolder(f.id, previewManga.id)}
+                      >
+                        <Folder size={12} weight={isIn ? "fill" : "light"} />
+                        {isIn ? "✓ " : ""}{f.name}
+                      </button>
+                    );
+                  })}
+                  <div className={s.folderDivider} />
+                  {creatingFolder ? (
+                    <div className={s.folderCreateRow}>
+                      <input autoFocus className={s.folderInput} placeholder="Folder name…"
+                        value={newFolderName} onChange={(e) => setNewFolderName(e.target.value)}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter") handleFolderCreate();
+                          if (e.key === "Escape") { setCreatingFolder(false); setNewFolderName(""); }
+                        }}
+                      />
+                      <button className={s.folderOkBtn} onClick={handleFolderCreate} disabled={!newFolderName.trim()}>Add</button>
+                    </div>
+                  ) : (
+                    <button className={s.folderNewBtn} onClick={() => setCreatingFolder(true)}>+ New folder</button>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* ── Content column ── */}
+        <div className={s.content}>
+
+          {/* Header — title visible immediately from previewManga */}
+          <div className={s.contentHeader}>
+            <div className={s.titleBlock}>
+              <h2 className={s.title}>{displayManga.title}</h2>
+              {loadingDetail
+                ? <div className={s.skByline} />
+                : (displayManga.author || displayManga.artist)
+                  ? <p className={s.byline}>
+                      {[displayManga.author, displayManga.artist]
+                        .filter(Boolean).filter((v, i, a) => a.indexOf(v) === i).join(" · ")}
+                    </p>
+                  : null}
+            </div>
+            <button className={s.closeBtn} onClick={close}><X size={15} weight="light" /></button>
+          </div>
+
+          {/* Scrollable body */}
+          <div className={s.contentBody}>
+
+            {/* Error banner */}
+            {fetchError && (
+              <div className={s.errorBanner}>{fetchError}</div>
+            )}
+
+            {/* ── Badges ── */}
+            {loadingDetail ? (
+              <div className={s.skRow}>
+                <div className={s.skBadge} />
+                <div className={s.skBadge} style={{ width: 72 }} />
+              </div>
+            ) : (
+              <div className={s.badges}>
+                {statusLabel && (
+                  <span className={[s.badge,
+                    displayManga.status === "ONGOING" ? s.badgeGreen : s.badgeDim
+                  ].join(" ")}>{statusLabel}</span>
+                )}
+                {displayManga.source && (
+                  <span className={[s.badge, (displayManga.source as any).isNsfw ? s.badgeNsfw : ""].join(" ").trim()}>
+                    {displayManga.source.displayName}{(displayManga.source as any).isNsfw ? " · 18+" : ""}
+                  </span>
+                )}
+                {inLibrary && <span className={[s.badge, s.badgeAccent].join(" ")}>In Library</span>}
+                {!loadingChapters && unreadCount > 0 && (
+                  <span className={[s.badge, s.badgeUnread].join(" ")}>{unreadCount} unread</span>
+                )}
+                {!loadingChapters && bookmarkCount > 0 && (
+                  <span className={s.badge}>{bookmarkCount} bookmarked</span>
+                )}
+              </div>
+            )}
+
+            {/* ── Chapter section — visually separated box ── */}
+            <div className={s.chapterBox}>
+              {loadingChapters ? (
+                <div className={s.chapterLoading}>
+                  <CircleNotch size={13} weight="light" className="anim-spin" style={{ color: "var(--text-faint)" }} />
+                  <span className={s.chapterLoadingLabel}>Loading chapters…</span>
+                </div>
+              ) : totalCount > 0 ? (
+                <>
+                  <div className={s.chapterMeta}>
+                    <span className={s.chapterLabel}>
+                      {totalCount} {totalCount === 1 ? "chapter" : "chapters"}
+                      {readCount > 0 && ` · ${readCount} read`}
+                      {unreadCount > 0 && readCount > 0 && ` · ${unreadCount} left`}
+                      {downloadedCount > 0 && ` · ${downloadedCount} dl`}
+                    </span>
+                    {unreadCount > 0 && (
+                      <button className={s.dlAllBtn} onClick={downloadAll} disabled={queueingAll}>
+                        {queueingAll && <CircleNotch size={11} weight="light" className="anim-spin" />}
+                        {queueingAll ? "Queuing…" : "Download unread"}
+                      </button>
+                    )}
+                  </div>
+                  {readCount > 0 && (
+                    <div className={s.progressTrack}>
+                      <div className={s.progressFill} style={{ width: `${(readCount / totalCount) * 100}%` }} />
+                    </div>
+                  )}
+                  {continueChapter && (
+                    <button className={s.readBtn}
+                      onClick={() => { openReader(continueChapter.ch, chapters); close(); }}
+                    >
+                      <Play size={12} weight="fill" />
+                      {continueChapter.label}
+                    </button>
+                  )}
+                </>
+              ) : !loadingDetail ? (
+                <span className={s.chapterLabel} style={{ color: "var(--text-faint)" }}>
+                  No chapters in local library
+                </span>
+              ) : null}
+            </div>
+
+            {/* ── Description — clearly separated from chapter block ── */}
+            {loadingDetail ? (
+              <div className={s.skDesc}>
+                <div className={s.skLine} style={{ width: "100%" }} />
+                <div className={s.skLine} style={{ width: "88%" }} />
+                <div className={s.skLine} style={{ width: "70%" }} />
+              </div>
+            ) : displayManga.description ? (
+              <div className={s.descBlock}>
+                <p className={[s.desc, descExpanded ? s.descOpen : ""].join(" ")}>
+                  {displayManga.description}
+                </p>
+                {displayManga.description.length > 220 && (
+                  <button className={s.descToggle} onClick={() => setDescExpanded((p) => !p)}>
+                    {descExpanded ? "Show less" : "Show more"}
+                    <CaretDown size={10} weight="light" style={{
+                      transform: descExpanded ? "rotate(180deg)" : "none",
+                      transition: "transform 0.15s ease",
+                    }} />
+                  </button>
+                )}
+              </div>
+            ) : null}
+
+            {/* ── Genre tags ── */}
+            {!loadingDetail && displayManga.genre && displayManga.genre.length > 0 && (
+              <div className={s.genres}>
+                {displayManga.genre.map((g) => <span key={g} className={s.genreTag}>{g}</span>)}
+              </div>
+            )}
+
+            {/* ── Metadata table ── */}
+            {!loadingDetail && (
+              <div className={s.metaTable}>
+                {displayManga.author && (
+                  <div className={s.metaRow}>
+                    <span className={s.metaKey}>Author</span>
+                    <span className={s.metaVal}>{displayManga.author}</span>
+                  </div>
+                )}
+                {displayManga.artist && displayManga.artist !== displayManga.author && (
+                  <div className={s.metaRow}>
+                    <span className={s.metaKey}>Artist</span>
+                    <span className={s.metaVal}>{displayManga.artist}</span>
+                  </div>
+                )}
+                {statusLabel && (
+                  <div className={s.metaRow}>
+                    <span className={s.metaKey}>Status</span>
+                    <span className={s.metaVal}>{statusLabel}</span>
+                  </div>
+                )}
+                {displayManga.source && (
+                  <div className={s.metaRow}>
+                    <span className={s.metaKey}>Source</span>
+                    <span className={s.metaVal}>{displayManga.source.displayName}</span>
+                  </div>
+                )}
+                {!loadingChapters && scanlators.length > 0 && (
+                  <div className={s.metaRow}>
+                    <span className={s.metaKey}>{scanlators.length === 1 ? "Scanlator" : "Scanlators"}</span>
+                    <span className={s.metaVal}>{scanlators.join(", ")}</span>
+                  </div>
+                )}
+                {!loadingChapters && firstUpload && lastUpload && (
+                  <div className={s.metaRow}>
+                    <span className={s.metaKey}>Published</span>
+                    <span className={s.metaVal}>
+                      {firstUpload.getTime() === lastUpload.getTime()
+                        ? formatDate(firstUpload)
+                        : `${formatDate(firstUpload)} – ${formatDate(lastUpload)}`}
+                    </span>
+                  </div>
+                )}
+                {!loadingChapters && downloadedCount > 0 && (
+                  <div className={s.metaRow}>
+                    <span className={s.metaKey}>Downloaded</span>
+                    <span className={s.metaVal}>{downloadedCount} / {totalCount} chapters</span>
+                  </div>
+                )}
+                {!loadingChapters && bookmarkCount > 0 && (
+                  <div className={s.metaRow}>
+                    <span className={s.metaKey}>Bookmarks</span>
+                    <span className={s.metaVal}>{bookmarkCount} chapter{bookmarkCount !== 1 ? "s" : ""}</span>
+                  </div>
+                )}
+                {displayManga.realUrl && (
+                  <div className={s.metaRow}>
+                    <span className={s.metaKey}>Link</span>
+                    <a href={displayManga.realUrl} target="_blank" rel="noreferrer" className={s.metaLink}>
+                      Open <ArrowSquareOut size={11} weight="light" />
+                    </a>
+                  </div>
+                )}
+              </div>
+            )}
+
+          </div>
+        </div>
+
+      </div>
+    </div>
+  );
+}

src/components/layout/Layout.tsx

@@ -4,7 +4,7 @@ import Library from "../pages/Library";
 import SeriesDetail from "../pages/SeriesDetail";
 import History from "../pages/History";
 import Search from "../pages/Search";
-import Explore from "../sources/Explore";
+import Explore from "../explore/Explore";
 import DownloadQueue from "../downloads/DownloadQueue";
 import ExtensionList from "../extensions/ExtensionList";
 import s from "./Layout.module.css";
@@ -14,7 +14,7 @@ export default function Layout() {
   const activeManga = useStore((s) => s.activeManga);
 
   function renderContent() {
-    if (navPage === "library" && activeManga) return <SeriesDetail />;
+    if (activeManga)  return <SeriesDetail />;
     switch (navPage) {
       case "library":    return <Library />;
       case "search":     return <Search />;

src/components/layout/Sidebar.tsx

@@ -20,10 +20,13 @@ export default function Sidebar() {
   const setActiveSource  = useStore((state) => state.setActiveSource);
   const setActiveManga   = useStore((state) => state.setActiveManga);
   const setLibraryFilter = useStore((state) => state.setLibraryFilter);
+  const setGenreFilter   = useStore((state) => state.setGenreFilter);
   const openSettings     = useStore((state) => state.openSettings);
 
   function navigate(id: NavPage) {
     setNavPage(id);
+    setActiveManga(null);
+    setGenreFilter("");
     if (id !== "explore") setActiveSource(null);
   }
 

src/components/pages/Library.tsx

@@ -3,21 +3,30 @@ import { MagnifyingGlass, Books, DownloadSimple, X, Folder, FolderSimplePlus, Tr
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { gql, thumbUrl } from "../../lib/client";
 import { GET_LIBRARY, UPDATE_MANGA, GET_CHAPTERS, DELETE_DOWNLOADED_CHAPTERS, DEQUEUE_DOWNLOAD } from "../../lib/queries";
+import { cache, CACHE_KEYS } from "../../lib/cache";
 import { useStore } from "../../store";
 import type { Manga, Chapter } from "../../lib/types";
 import ContextMenu, { type ContextMenuEntry } from "../context/ContextMenu";
 import s from "./Library.module.css";
 
-// Keep in sync with CSS grid: minmax(130px, 1fr) + var(--sp-4)=16px gap
 const CARD_MIN_W = 130;
 const CARD_GAP   = 16;
-const ROW_HEIGHT = 260; // ~195px cover + ~40px title + 16px gap + buffer
+const ROW_HEIGHT = 260;
+
+function FadeImg({ src, alt, className, objectFit }: { src: string; alt: string; className?: string; objectFit?: string }) {
+  const [loaded, setLoaded] = useState(false);
+  return (
+    <img
+      src={src} alt={alt} className={className}
+      loading="lazy" decoding="async"
+      style={{ objectFit: (objectFit ?? "cover") as any, opacity: loaded ? 1 : 0, transition: loaded ? "opacity 0.15s ease" : "none" }}
+      onLoad={() => setLoaded(true)}
+    />
+  );
+}
 
 const MangaCard = memo(function MangaCard({
-  manga,
+  manga, onClick, onContextMenu, cropCovers,
-  onClick,
-  onContextMenu,
-  cropCovers,
 }: {
   manga: Manga;
   onClick: () => void;
@@ -27,13 +36,11 @@ const MangaCard = memo(function MangaCard({
   return (
     <button className={s.card} onClick={onClick} onContextMenu={onContextMenu}>
       <div className={s.coverWrap}>
-        <img
+        <FadeImg
           src={thumbUrl(manga.thumbnailUrl)}
           alt={manga.title}
           className={s.cover}
-          style={{ objectFit: cropCovers ? "cover" : "contain" }}
+          objectFit={cropCovers ? "cover" : "contain"}
-          loading="lazy"
-          decoding="async"
         />
         {!!manga.downloadCount && (
           <span className={s.downloadedBadge}>{manga.downloadCount}</span>
@@ -44,6 +51,12 @@ const MangaCard = memo(function MangaCard({
   );
 });
 
+function fetchLibrary() {
+  return cache.get(CACHE_KEYS.LIBRARY, () =>
+    gql<{ mangas: { nodes: Manga[] } }>(GET_LIBRARY).then((lib) => lib.mangas.nodes)
+  );
+}
+
 export default function Library() {
   const [allManga, setAllManga]   = useState<Manga[]>([]);
   const [loading, setLoading]     = useState(true);
@@ -59,19 +72,27 @@ export default function Library() {
   const settings            = useStore((state) => state.settings);
   const libraryTagFilter    = useStore((state) => state.libraryTagFilter);
   const setLibraryTagFilter = useStore((state) => state.setLibraryTagFilter);
+  const setGenreFilter      = useStore((state) => state.setGenreFilter);
   const folders                = useStore((state) => state.settings.folders);
   const addFolder              = useStore((state) => state.addFolder);
   const assignMangaToFolder    = useStore((state) => state.assignMangaToFolder);
   const removeMangaFromFolder  = useStore((state) => state.removeMangaFromFolder);
 
-  useEffect(() => {
+  const loadData = useCallback((showLoading = false) => {
-    gql<{ mangas: { nodes: Manga[] } }>(GET_LIBRARY)
+    if (showLoading) setLoading(true);
-      .then((lib) => setAllManga(lib.mangas.nodes))
+    fetchLibrary()
+      .then((nodes) => { setAllManga(nodes); setError(null); })
       .catch((e) => setError(e.message))
       .finally(() => setLoading(false));
   }, []);
 
-  // Reset scroll when filter/search changes
+  useEffect(() => {
+    loadData(true);
+    // Re-fetch when library cache is invalidated (e.g. by Explore or GenreDrillPage)
+    const unsub = cache.subscribe(CACHE_KEYS.LIBRARY, () => loadData(false));
+    return unsub;
+  }, [loadData]);
+
   useEffect(() => {
     scrollRef.current?.scrollTo({ top: 0 });
   }, [libraryFilter, search]);
@@ -138,7 +159,9 @@ export default function Library() {
 
   async function removeFromLibrary(manga: Manga) {
     await gql(UPDATE_MANGA, { id: manga.id, inLibrary: false }).catch(console.error);
+    // Optimistic update first, then invalidate cache
     setAllManga((prev) => prev.map((m) => m.id === manga.id ? { ...m, inLibrary: false } : m));
+    cache.clear(CACHE_KEYS.LIBRARY);
   }
 
   async function deleteAllDownloads(manga: Manga) {
@@ -147,14 +170,8 @@ export default function Library() {
       const downloadedChapters = data.chapters.nodes.filter((c) => c.isDownloaded);
       const ids = downloadedChapters.map((c) => c.id);
       if (!ids.length) return;
-
-      // Delete the downloaded files
       await gql(DELETE_DOWNLOADED_CHAPTERS, { ids });
-
-      // Also remove these chapters from the download queue (fix #12)
-      // Fire-and-forget — queue removal is best-effort
       await Promise.allSettled(ids.map((id) => gql(DEQUEUE_DOWNLOAD, { chapterId: id })));
-
       setAllManga((prev) => prev.map((m) => m.id === manga.id ? { ...m, downloadCount: 0 } : m));
     } catch (e) { console.error(e); }
   }
@@ -172,9 +189,7 @@ export default function Library() {
       return {
         label: inFolder ? `✓ ${f.name}` : f.name,
         icon: <Folder size={13} weight={inFolder ? "fill" : "light"} />,
-        onClick: () => inFolder
+        onClick: () => inFolder ? removeMangaFromFolder(f.id, m.id) : assignMangaToFolder(f.id, m.id),
-          ? removeMangaFromFolder(f.id, m.id)
-          : assignMangaToFolder(f.id, m.id),
       };
     });
 
@@ -192,7 +207,10 @@ export default function Library() {
         onClick: () => m.inLibrary
           ? removeFromLibrary(m)
           : gql(UPDATE_MANGA, { id: m.id, inLibrary: true })
-              .then(() => setAllManga((prev) => prev.map((x) => x.id === m.id ? { ...x, inLibrary: true } : x)))
+              .then(() => {
+                setAllManga((prev) => prev.map((x) => x.id === m.id ? { ...x, inLibrary: true } : x));
+                cache.clear(CACHE_KEYS.LIBRARY);
+              })
               .catch(console.error),
       },
       {
@@ -262,7 +280,6 @@ export default function Library() {
       className={s.root}
       ref={scrollRef}
       onContextMenu={(e) => {
-        // Only fire on the bare background, not on cards
         if ((e.target as HTMLElement).closest("button")) return;
         e.preventDefault();
         setEmptyCtx({ x: e.clientX, y: e.clientY });
@@ -322,9 +339,7 @@ export default function Library() {
             return (
               <button key={tag}
                 className={[s.tagChip, active ? s.tagChipActive : ""].join(" ")}
-                onClick={() => setLibraryTagFilter(
+                onClick={() => setGenreFilter(tag)}>
-                  active ? libraryTagFilter.filter((t) => t !== tag) : [...libraryTagFilter, tag]
-                )}>
                 {tag}
               </button>
             );
@@ -352,13 +367,7 @@ export default function Library() {
             : "No manga found."}
         </div>
       ) : (
-        /* Virtual scroll container */
+        <div style={{ height: virtualizer.getTotalSize(), position: "relative" }}>
-        <div
-          style={{
-            height: virtualizer.getTotalSize(),
-            position: "relative",
-          }}
-        >
           {virtualizer.getVirtualItems().map((virtualRow) => {
             const rowManga = rows[virtualRow.index];
             return (
@@ -382,7 +391,6 @@ export default function Library() {
                     cropCovers={settings.libraryCropCovers}
                   />
                 ))}
-                {/* Ghost cards on last row to fill grid */}
                 {virtualRow.index === rows.length - 1 &&
                   Array.from({ length: cols - rowManga.length }).map((_, i) => (
                     <div key={`ghost-${i}`} className={s.ghostCard} aria-hidden />
@@ -394,20 +402,10 @@ export default function Library() {
       )}
 
       {ctx && (
-        <ContextMenu
+        <ContextMenu x={ctx.x} y={ctx.y} items={buildCtxItems(ctx.manga)} onClose={() => setCtx(null)} />
-          x={ctx.x}
-          y={ctx.y}
-          items={buildCtxItems(ctx.manga)}
-          onClose={() => setCtx(null)}
-        />
       )}
       {emptyCtx && (
-        <ContextMenu
+        <ContextMenu x={emptyCtx.x} y={emptyCtx.y} items={buildEmptyCtxItems()} onClose={() => setEmptyCtx(null)} />
-          x={emptyCtx.x}
-          y={emptyCtx.y}
-          items={buildEmptyCtxItems()}
-          onClose={() => setEmptyCtx(null)}
-        />
       )}
     </div>
   );

src/components/pages/Search.module.css

@@ -1,30 +1,79 @@
+/* ── Root ────────────────────────────────────────────────────────────────── */
 .root {
   display: flex; flex-direction: column; height: 100%;
   overflow: hidden; animation: fadeIn 0.14s ease both;
 }
 
+/* ── Header ──────────────────────────────────────────────────────────────── */
 .header {
   display: flex; align-items: center; gap: var(--sp-4);
-  padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border-dim); flex-shrink: 0;
+  padding: var(--sp-3) var(--sp-6) var(--sp-3) var(--sp-6);
+  border-bottom: 1px solid var(--border-dim); flex-shrink: 0;
 }
+
 .heading {
   font-family: var(--font-ui); font-size: var(--text-xs);
   color: var(--text-faint); letter-spacing: var(--tracking-wider);
   text-transform: uppercase; flex-shrink: 0;
 }
+
+/* ── Tab bar ─────────────────────────────────────────────────────────────── */
+.tabs {
+  display: flex; gap: 2px;
+  background: var(--bg-raised); border: 1px solid var(--border-dim);
+  border-radius: var(--radius-md); padding: 2px;
+}
+.tab {
+  display: flex; align-items: center; gap: 5px;
+  font-family: var(--font-ui); font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide); text-transform: uppercase;
+  padding: 4px 10px; border-radius: var(--radius-sm); border: none;
+  background: none; color: var(--text-faint); cursor: pointer;
+  transition: background var(--t-base), color var(--t-base); white-space: nowrap;
+}
+.tab:hover { color: var(--text-muted); }
+.tabActive {
+  background: var(--accent-muted); color: var(--accent-fg);
+  border: 1px solid var(--accent-dim);
+}
+.tabActive:hover { color: var(--accent-fg); }
+
+/* ── Keyword tab bar area ────────────────────────────────────────────────── */
+.keywordBar {
+  flex-shrink: 0; display: flex; flex-direction: column;
+  border-bottom: 1px solid var(--border-dim);
+}
+
+/* ── Shared search bar ───────────────────────────────────────────────────── */
 .searchBar {
-  flex: 1; display: flex; align-items: center; gap: var(--sp-2);
+  display: flex; align-items: center; gap: var(--sp-2);
   background: var(--bg-raised); border: 1px solid var(--border-dim);
   border-radius: var(--radius-lg); padding: 0 var(--sp-3) 0 var(--sp-2);
   transition: border-color var(--t-base);
+  margin: var(--sp-3) var(--sp-6);
 }
 .searchBar:focus-within { border-color: var(--border-strong); }
+
 .searchIcon { color: var(--text-faint); flex-shrink: 0; }
+
 .searchInput {
   flex: 1; background: none; border: none; outline: none;
   color: var(--text-primary); font-size: var(--text-sm); padding: 8px 0;
 }
 .searchInput::placeholder { color: var(--text-faint); }
+
+.advancedBtn {
+  display: flex; align-items: center; justify-content: center;
+  width: 26px; height: 26px; border-radius: var(--radius-sm);
+  background: none; border: 1px solid transparent;
+  color: var(--text-faint); cursor: pointer; flex-shrink: 0;
+  transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
+}
+.advancedBtn:hover { color: var(--text-muted); border-color: var(--border-dim); }
+.advancedBtnActive {
+  background: var(--accent-muted); border-color: var(--accent-dim); color: var(--accent-fg);
+}
+
 .searchBtn {
   font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
   padding: 5px 12px; border-radius: var(--radius-md); flex-shrink: 0;
@@ -35,74 +84,108 @@
 .searchBtn:hover:not(:disabled) { filter: brightness(1.1); }
 .searchBtn:disabled { opacity: 0.4; cursor: default; }
 
-.langBar {
+.clearSearchBtn {
-  display: flex;
+  display: flex; align-items: center; justify-content: center;
-  align-items: center;
+  width: 20px; height: 20px; border-radius: 50%;
-  flex-wrap: wrap;
+  font-size: 15px; line-height: 1;
-  gap: var(--sp-1);
+  color: var(--text-faint); background: var(--bg-overlay); border: none;
-  padding: var(--sp-2) var(--sp-6);
+  cursor: pointer; flex-shrink: 0; transition: color var(--t-base);
-  border-bottom: 1px solid var(--border-dim);
+}
-  flex-shrink: 0;
+.clearSearchBtn:hover { color: var(--text-muted); }
+
+/* ── Advanced filter panel ───────────────────────────────────────────────── */
+.advancedPanel {
+  display: flex; flex-direction: column; gap: var(--sp-3);
+  padding: 0 var(--sp-6) var(--sp-4);
+  animation: fadeIn 0.1s ease both;
 }
 
-.langBtn {
+.advancedHeader { display: flex; align-items: center; justify-content: space-between; }
-  font-family: var(--font-ui);
+.advancedTitle {
-  font-size: var(--text-2xs);
+  font-family: var(--font-ui); font-size: var(--text-2xs);
-  letter-spacing: var(--tracking-wider);
+  color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase;
-  padding: 3px 8px;
+}
-  border-radius: var(--radius-sm);
+.advancedActions { display: flex; gap: var(--sp-3); }
-  border: 1px solid var(--border-dim);
+.advancedLink {
-  background: none;
+  font-family: var(--font-ui); font-size: var(--text-2xs);
-  color: var(--text-faint);
+  letter-spacing: var(--tracking-wide); color: var(--accent-fg);
-  cursor: pointer;
+  background: none; border: none; cursor: pointer; padding: 0;
+  transition: opacity var(--t-base);
+}
+.advancedLink:hover { opacity: 0.7; }
+
+.langGrid { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
+.langFilterRow { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding: var(--sp-3) var(--sp-3) 0; }
+
+.langChip {
+  font-family: var(--font-ui); font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wider); padding: 3px 8px;
+  border-radius: var(--radius-sm); border: 1px solid var(--border-dim);
+  background: none; color: var(--text-faint); cursor: pointer;
   transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
+  white-space: nowrap;
 }
-.langBtn:hover { color: var(--text-muted); border-color: var(--border-strong); }
+.langChip:hover { color: var(--text-muted); border-color: var(--border-strong); }
-.langBtnActive {
+.langChipActive {
-  background: var(--accent-muted);
+  background: var(--accent-muted); border-color: var(--accent-dim); color: var(--accent-fg);
-  border-color: var(--accent-dim);
-  color: var(--accent-fg);
-}
-.langBtnActive:hover { background: var(--accent-muted); color: var(--accent-fg); }
-
-.sourceCount {
-  font-family: var(--font-ui);
-  font-size: var(--text-2xs);
-  color: var(--text-faint);
-  letter-spacing: var(--tracking-wide);
-  margin-left: auto;
 }
 
-.results { flex: 1; overflow-y: auto; padding: var(--sp-5) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-6); }
+.advancedDivider { height: 1px; background: var(--border-dim); margin: 0 calc(-1 * var(--sp-6)); }
+.advancedCheck {
+  display: flex; align-items: center; gap: var(--sp-2);
+  font-family: var(--font-ui); font-size: var(--text-xs);
+  color: var(--text-muted); cursor: pointer; user-select: none;
+}
+.checkbox { accent-color: var(--accent-fg); width: 13px; height: 13px; cursor: pointer; }
+.advancedFooter {
+  font-family: var(--font-ui); font-size: var(--text-2xs);
+  color: var(--text-faint); letter-spacing: var(--tracking-wide);
+}
+.advancedFooter strong { color: var(--text-muted); font-weight: var(--weight-medium); }
+
+/* ── Keyword results list ────────────────────────────────────────────────── */
+.results {
+  flex: 1; overflow-y: auto; padding: var(--sp-5) var(--sp-6);
+  display: flex; flex-direction: column; gap: var(--sp-6);
+  scrollbar-width: thin;
+}
 
 .sourceSection { display: flex; flex-direction: column; gap: var(--sp-3); }
 
-.sourceHeader {
+.sourceHeader { display: flex; align-items: center; gap: var(--sp-2); }
-  display: flex; align-items: center; gap: var(--sp-2);
-}
 .sourceIcon { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
 .sourceName { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); }
-.resultCount {
+.sourceLang {
   font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint);
-  letter-spacing: var(--tracking-wide); margin-left: auto;
+  letter-spacing: var(--tracking-wider); padding: 1px 5px;
+  border: 1px solid var(--border-dim); border-radius: var(--radius-sm);
+}
+.resultCount {
+  font-family: var(--font-ui); font-size: var(--text-2xs);
+  color: var(--text-faint); letter-spacing: var(--tracking-wide); margin-left: auto;
 }
 .sourceError { font-size: var(--text-xs); color: var(--color-error); padding: 0 var(--sp-1); }
 
 .sourceRow {
   display: flex; gap: var(--sp-3); overflow-x: auto;
-  padding-bottom: var(--sp-2);
+  padding-bottom: var(--sp-2); scrollbar-width: thin;
-  scrollbar-width: thin;
 }
+
+/* ── Shared manga card ───────────────────────────────────────────────────── */
 .card {
-  flex-shrink: 0; width: 110px; background: none; border: none; padding: 0;
+  flex-shrink: 0; width: 110px;
+  background: none; border: none; padding: 0;
   cursor: pointer; text-align: left;
 }
 .card:hover .cover { filter: brightness(1.06); }
+
 .coverWrap {
-  position: relative; aspect-ratio: 2/3; border-radius: var(--radius-md);
+  position: relative; aspect-ratio: 2/3;
-  overflow: hidden; background: var(--bg-raised); border: 1px solid var(--border-dim);
+  border-radius: var(--radius-md); overflow: hidden;
+  background: var(--bg-raised); border: 1px solid var(--border-dim);
 }
 .cover { width: 100%; height: 100%; object-fit: cover; transition: filter var(--t-base); }
+
 .inLibBadge {
   position: absolute; bottom: var(--sp-1); left: var(--sp-1);
   font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
@@ -115,14 +198,127 @@
   line-height: var(--leading-snug);
 }
 
+/* ── Skeleton cards ──────────────────────────────────────────────────────── */
 .skCard { flex-shrink: 0; width: 110px; }
-.skCover { aspect-ratio: 2/3; border-radius: var(--radius-md); }
+.skCover { aspect-ratio: 2/3; border-radius: var(--radius-md); width: 100%; }
-.skTitle { height: 11px; margin-top: var(--sp-1); width: 75%; }
+.skTitle { height: 11px; margin-top: var(--sp-1); width: 75%; border-radius: 3px; }
 
+/* ── Empty state ─────────────────────────────────────────────────────────── */
 .empty {
   flex: 1; display: flex; flex-direction: column;
   align-items: center; justify-content: center; gap: var(--sp-2);
+  padding: var(--sp-6);
 }
 .emptyIcon { color: var(--text-faint); }
 .emptyText { font-size: var(--text-base); color: var(--text-muted); }
-.emptyHint { font-size: var(--text-sm); color: var(--text-faint); }
+.emptyHint { font-size: var(--text-sm); color: var(--text-faint); text-align: center; max-width: 280px; }
+
+.advancedLinkStandalone {
+  display: flex; align-items: center; gap: var(--sp-1);
+  font-family: var(--font-ui); font-size: var(--text-xs);
+  color: var(--text-faint); background: none; border: none;
+  cursor: pointer; padding: 0; margin-top: var(--sp-1);
+  transition: color var(--t-base);
+}
+.advancedLinkStandalone:hover { color: var(--accent-fg); }
+
+/* ── Split layout (tag + source tabs) ───────────────────────────────────── */
+.splitRoot { flex: 1; display: flex; overflow: hidden; }
+
+.splitSidebar {
+  width: 192px; flex-shrink: 0;
+  border-right: 1px solid var(--border-dim);
+  display: flex; flex-direction: column; overflow: hidden;
+  background: var(--bg-raised);
+}
+
+.splitSearchWrap {
+  display: flex; align-items: center; gap: var(--sp-2);
+  padding: var(--sp-3);
+  border-bottom: 1px solid var(--border-dim); flex-shrink: 0;
+}
+.splitSearchIcon { color: var(--text-faint); flex-shrink: 0; }
+.splitSearchInput {
+  flex: 1; background: none; border: none; outline: none;
+  color: var(--text-primary); font-size: var(--text-xs);
+  font-family: var(--font-ui); letter-spacing: var(--tracking-wide);
+}
+.splitSearchInput::placeholder { color: var(--text-faint); }
+
+.splitList {
+  flex: 1; overflow-y: auto; padding: var(--sp-2);
+  display: flex; flex-direction: column; gap: 1px; scrollbar-width: thin;
+}
+
+.splitItem {
+  display: flex; align-items: center; width: 100%;
+  padding: 7px var(--sp-2); border-radius: var(--radius-md);
+  border: none; background: none;
+  color: var(--text-muted); font-size: var(--text-sm);
+  cursor: pointer; text-align: left;
+  transition: background var(--t-fast), color var(--t-fast);
+}
+.splitItem:hover { background: var(--bg-overlay); color: var(--text-secondary); }
+.splitItemActive { background: var(--accent-muted); color: var(--accent-fg); }
+.splitItemActive:hover { background: var(--accent-muted); color: var(--accent-fg); }
+
+.splitItemSource { gap: var(--sp-2); }
+.splitItemLabel { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.splitSourceIcon { width: 16px; height: 16px; border-radius: 3px; object-fit: cover; flex-shrink: 0; }
+
+.splitEmpty {
+  font-family: var(--font-ui); font-size: var(--text-xs);
+  color: var(--text-faint); padding: var(--sp-3) var(--sp-2);
+}
+.splitLoading {
+  flex: 1; display: flex; align-items: center; justify-content: center;
+}
+
+/* ── Split right content ─────────────────────────────────────────────────── */
+.splitContent { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+
+.splitContentHeader {
+  display: flex; align-items: center; gap: var(--sp-3);
+  padding: var(--sp-3) var(--sp-5);
+  border-bottom: 1px solid var(--border-dim); flex-shrink: 0;
+  flex-wrap: wrap;
+  min-height: 52px;
+}
+.splitContentTitle {
+  font-size: var(--text-base); font-weight: var(--weight-medium);
+  color: var(--text-secondary); letter-spacing: var(--tracking-tight);
+}
+.splitResultCount {
+  font-family: var(--font-ui); font-size: var(--text-2xs);
+  color: var(--text-faint); letter-spacing: var(--tracking-wide);
+  margin-left: auto;
+}
+.splitSourceTitle {
+  display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0;
+}
+.sourceBrowseBar {
+  display: flex; align-items: center; gap: var(--sp-2); flex: 1; min-width: 0;
+}
+
+/* ── Grid (tag + source results) ─────────────────────────────────────────── */
+.tagGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(clamp(90px, 9vw, 120px), 1fr));
+  gap: var(--sp-3);
+  padding: var(--sp-4) var(--sp-5);
+  overflow-y: auto; flex: 1;
+  align-content: start;
+  scrollbar-width: thin;
+}
+/* In the grid, cards stretch to fill the column */
+.tagGrid .card { width: auto; }
+.tagGrid .skCard { width: auto; }
+.tagGrid .skCover { width: 100%; }
+
+/* ── NSFW badge ──────────────────────────────────────────────────────────── */
+.nsfwBadge {
+  font-family: var(--font-ui); font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide); padding: 1px 5px;
+  border-radius: var(--radius-sm); border: 1px solid var(--border-dim);
+  color: var(--text-faint); flex-shrink: 0;
+}

src/components/pages/Search.tsx

@@ -1,11 +1,19 @@
-import { useState, useRef, useCallback, useEffect } from "react";
+import { useState, useRef, useCallback, useEffect, memo, useMemo } from "react";
-import { MagnifyingGlass, CircleNotch } from "@phosphor-icons/react";
+import {
+  MagnifyingGlass, CircleNotch, SlidersHorizontal, Hash, List,
+} from "@phosphor-icons/react";
 import { gql, thumbUrl } from "../../lib/client";
 import { GET_SOURCES, FETCH_SOURCE_MANGA } from "../../lib/queries";
+import { cache, CACHE_KEYS, getTopSources } from "../../lib/cache";
+import { dedupeSources, dedupeMangaByTitle } from "../../lib/sourceUtils";
 import { useStore } from "../../store";
 import type { Manga, Source } from "../../lib/types";
 import s from "./Search.module.css";
 
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+type SearchTab = "keyword" | "tag" | "source";
+
 interface SourceResult {
   source: Source;
   mangas: Manga[];
@@ -13,15 +21,30 @@ interface SourceResult {
   error: string | null;
 }
 
-const CONCURRENCY = 3;
+// ── Constants ─────────────────────────────────────────────────────────────────
+
+const CONCURRENCY = 4;
+const RESULTS_PER_SOURCE = 8;
+
+const COMMON_GENRES = [
+  "Action","Adventure","Comedy","Drama","Fantasy","Romance",
+  "Sci-Fi","Slice of Life","Horror","Mystery","Thriller","Sports",
+  "Supernatural","Mecha","Historical","Psychological","School Life",
+  "Shounen","Seinen","Josei","Shoujo","Isekai","Martial Arts",
+  "Magic","Music","Cooking","Medical","Military","Harem","Ecchi",
+];
+
+// ── Concurrent fetch helper ───────────────────────────────────────────────────
 
 async function runConcurrent<T>(
   items: T[],
-  fn: (item: T) => Promise<void>
+  fn: (item: T) => Promise<void>,
+  signal: AbortSignal,
 ): Promise<void> {
   let i = 0;
   async function worker() {
     while (i < items.length) {
+      if (signal.aborted) return;
       const item = items[i++];
       await fn(item).catch(() => {});
     }
@@ -29,84 +52,280 @@ async function runConcurrent<T>(
   await Promise.all(Array.from({ length: Math.min(CONCURRENCY, items.length) }, worker));
 }
 
+// ── Shared card ───────────────────────────────────────────────────────────────
+
+const CoverImg = memo(function CoverImg({
+  src, alt, className,
+}: { src: string; alt: string; className?: string }) {
+  const [loaded, setLoaded] = useState(false);
+  return (
+    <img src={src} alt={alt} className={className}
+      loading="lazy" decoding="async" onLoad={() => setLoaded(true)}
+      style={{ opacity: loaded ? 1 : 0, transition: loaded ? "opacity 0.15s ease" : "none" }}
+    />
+  );
+});
+
+function MangaCard({ manga, onClick }: { manga: Manga; onClick: () => void }) {
+  return (
+    <button className={s.card} onClick={onClick}>
+      <div className={s.coverWrap}>
+        <CoverImg src={thumbUrl(manga.thumbnailUrl)} alt={manga.title} className={s.cover} />
+        {manga.inLibrary && <span className={s.inLibBadge}>Saved</span>}
+      </div>
+      <p className={s.cardTitle}>{manga.title}</p>
+    </button>
+  );
+}
+
+function GridSkeleton({ count = 18 }: { count?: number }) {
+  return (
+    <div className={s.tagGrid}>
+      {Array.from({ length: count }).map((_, i) => (
+        <div key={i} className={s.skCard} style={{ width: "auto" }}>
+          <div className={["skeleton", s.skCover].join(" ")} style={{ aspectRatio: "2/3", width: "100%" }} />
+          <div className={["skeleton", s.skTitle].join(" ")} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function RowSkeleton({ count = 4 }: { count?: number }) {
+  return (
+    <div className={s.sourceRow}>
+      {Array.from({ length: count }).map((_, i) => (
+        <div key={i} className={s.skCard}>
+          <div className={["skeleton", s.skCover].join(" ")} />
+          <div className={["skeleton", s.skTitle].join(" ")} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ── Root ──────────────────────────────────────────────────────────────────────
+
 export default function Search() {
-  const [query, setQuery]         = useState("");
+  const [tab, setTab] = useState<SearchTab>("keyword");
-  const [submitted, setSubmitted] = useState("");
+
-  const [results, setResults]     = useState<SourceResult[]>([]);
+  const preferredLang    = useStore((st) => st.settings.preferredExtensionLang);
-  const [allSources, setAllSources]   = useState<Source[]>([]);
+  const searchPrefill    = useStore((st) => st.searchPrefill ?? "");
+  const setSearchPrefill = useStore((st) => st.setSearchPrefill);
+  const setPreviewManga  = useStore((st) => st.setPreviewManga);
+
+  const [allSources, setAllSources]       = useState<Source[]>([]);
   const [loadingSources, setLoadingSources] = useState(false);
-  const [activeLang, setActiveLang] = useState<string>("preferred");
-  const inputRef = useRef<HTMLInputElement>(null);
 
-  const setActiveManga = useStore((st) => st.setActiveManga);
+  const pendingPrefill = useRef<string>("");
-  const setNavPage     = useStore((st) => st.setNavPage);
-  const preferredLang  = useStore((st) => st.settings.preferredExtensionLang);
 
+  // Consume searchPrefill → route to keyword tab
+  useEffect(() => {
+    if (!searchPrefill) return;
+    pendingPrefill.current = searchPrefill;
+    setTab("keyword");
+    setSearchPrefill("");
+  }, [searchPrefill, setSearchPrefill]);
+
+  // Load sources once, shared across all tabs
   useEffect(() => {
     setLoadingSources(true);
-    gql<{ sources: { nodes: Source[] } }>(GET_SOURCES)
+    cache.get(CACHE_KEYS.SOURCES, () =>
-      .then((d) => setAllSources(d.sources.nodes.filter((s) => s.id !== "0")))
+      gql<{ sources: { nodes: Source[] } }>(GET_SOURCES)
+        .then((d) => d.sources.nodes.filter((src) => src.id !== "0"))
+    )
+      .then(setAllSources)
       .catch(console.error)
       .finally(() => setLoadingSources(false));
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const langs = ["preferred", ...Array.from(new Set(allSources.map((s) => s.lang))).sort(), "all"];
+  const availableLangs   = useMemo(() =>
-
+    Array.from(new Set<string>(allSources.map((s) => s.lang))).sort(), [allSources]);
-  const visibleSources = allSources.filter((src) => {
+  const hasMultipleLangs = availableLangs.length > 1;
-    if (activeLang === "all") return true;
-    if (activeLang === "preferred") return src.lang === preferredLang;
-    return src.lang === activeLang;
-  });
-
-  const runSearch = useCallback(async () => {
-    const q = query.trim();
-    if (!q || !visibleSources.length) return;
-    setSubmitted(q);
-
-    setResults(visibleSources.map((src) => ({ source: src, mangas: [], loading: true, error: null })));
-
-    await runConcurrent(visibleSources, async (src) => {
-      try {
-        const d = await gql<{ fetchSourceManga: { mangas: Manga[] } }>(FETCH_SOURCE_MANGA, {
-          source: src.id, type: "SEARCH", page: 1, query: q,
-        });
-        setResults((prev) => prev.map((r) =>
-          r.source.id === src.id ? { ...r, mangas: d.fetchSourceManga.mangas, loading: false } : r
-        ));
-      } catch (e: any) {
-        setResults((prev) => prev.map((r) =>
-          r.source.id === src.id ? { ...r, loading: false, error: e.message } : r
-        ));
-      }
-    });
-  }, [query, visibleSources]);
-
-  function openManga(m: Manga) {
-    setActiveManga(m);
-    setNavPage("library");
-  }
-
-  const hasResults = results.some((r) => r.mangas.length > 0);
-  const allDone    = results.every((r) => !r.loading);
 
   return (
     <div className={s.root}>
       <div className={s.header}>
         <h1 className={s.heading}>Search</h1>
+        <div className={s.tabs}>
+          <button className={[s.tab, tab === "keyword" ? s.tabActive : ""].join(" ")} onClick={() => setTab("keyword")}>
+            <MagnifyingGlass size={11} weight="bold" /> Keyword
+          </button>
+          <button className={[s.tab, tab === "tag" ? s.tabActive : ""].join(" ")} onClick={() => setTab("tag")}>
+            <Hash size={11} weight="bold" /> Tags
+          </button>
+          <button className={[s.tab, tab === "source" ? s.tabActive : ""].join(" ")} onClick={() => setTab("source")}>
+            <List size={11} weight="bold" /> Sources
+          </button>
+        </div>
+      </div>
+
+      {tab === "keyword" && (
+        <KeywordTab
+          allSources={allSources}
+          loadingSources={loadingSources}
+          availableLangs={availableLangs}
+          hasMultipleLangs={hasMultipleLangs}
+          preferredLang={preferredLang}
+          pendingPrefill={pendingPrefill}
+          onMangaClick={setPreviewManga}
+        />
+      )}
+      {tab === "tag" && (
+        <TagTab
+          allSources={allSources}
+          loadingSources={loadingSources}
+          preferredLang={preferredLang}
+          onMangaClick={setPreviewManga}
+        />
+      )}
+      {tab === "source" && (
+        <SourceTab
+          allSources={allSources}
+          loadingSources={loadingSources}
+          availableLangs={availableLangs}
+          hasMultipleLangs={hasMultipleLangs}
+          onMangaClick={setPreviewManga}
+        />
+      )}
+    </div>
+  );
+}
+
+// ── Keyword tab ───────────────────────────────────────────────────────────────
+
+function KeywordTab({
+  allSources, loadingSources, availableLangs, hasMultipleLangs,
+  preferredLang, pendingPrefill, onMangaClick,
+}: {
+  allSources: Source[];
+  loadingSources: boolean;
+  availableLangs: string[];
+  hasMultipleLangs: boolean;
+  preferredLang: string;
+  pendingPrefill: React.MutableRefObject<string>;
+  onMangaClick: (m: Manga) => void;
+}) {
+  const [query, setQuery]               = useState("");
+  const [submitted, setSubmitted]       = useState("");
+  const [results, setResults]           = useState<SourceResult[]>([]);
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [selectedLangs, setSelectedLangs] = useState<Set<string>>(new Set());
+  const [includeNsfw, setIncludeNsfw]     = useState(false);
+
+  const abortRef         = useRef<AbortController | null>(null);
+  const inputRef         = useRef<HTMLInputElement>(null);
+  const allSourcesRef    = useRef<Source[]>([]);
+  const selectedLangsRef = useRef<Set<string>>(new Set());
+
+  useEffect(() => { allSourcesRef.current = allSources; }, [allSources]);
+  useEffect(() => { selectedLangsRef.current = selectedLangs; }, [selectedLangs]);
+
+  // Set default lang selection once sources load
+  useEffect(() => {
+    if (!allSources.length) return;
+    const available = new Set(allSources.map((s) => s.lang));
+    setSelectedLangs(available.has(preferredLang)
+      ? new Set([preferredLang])
+      : new Set(availableLangs.slice(0, 1))
+    );
+  }, [allSources]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Consume prefill once sources are ready
+  useEffect(() => {
+    if (loadingSources || !pendingPrefill.current || submitted) return;
+    if (!allSourcesRef.current.length) return;
+    const q = pendingPrefill.current;
+    pendingPrefill.current = "";
+    setQuery(q);
+    doSearch(q);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [loadingSources]);
+
+  useEffect(() => () => { abortRef.current?.abort(); }, []);
+
+  const getVisibleSources = useCallback((): Source[] => {
+    let filtered = allSourcesRef.current;
+    if (selectedLangsRef.current.size > 0)
+      filtered = filtered.filter((s) => selectedLangsRef.current.has(s.lang));
+    if (!includeNsfw)
+      filtered = filtered.filter((s) => !s.isNsfw);
+    return filtered;
+  }, [includeNsfw]);
+
+  const doSearch = useCallback(async (q: string) => {
+    const trimmed = q.trim();
+    if (!trimmed) return;
+    const visible = getVisibleSources();
+    if (!visible.length) return;
+
+    abortRef.current?.abort();
+    const ctrl = new AbortController();
+    abortRef.current = ctrl;
+
+    setSubmitted(trimmed);
+    setResults(visible.map((src) => ({ source: src, mangas: [], loading: true, error: null })));
+
+    await runConcurrent(visible, async (src) => {
+      if (ctrl.signal.aborted) return;
+      try {
+        const d = await gql<{ fetchSourceManga: { mangas: Manga[] } }>(
+          FETCH_SOURCE_MANGA,
+          { source: src.id, type: "SEARCH", page: 1, query: trimmed },
+          ctrl.signal,
+        );
+        if (ctrl.signal.aborted) return;
+        setResults((prev) => prev.map((r) =>
+          r.source.id === src.id ? { ...r, mangas: d.fetchSourceManga.mangas, loading: false } : r
+        ));
+      } catch (e: any) {
+        if (ctrl.signal.aborted || e?.name === "AbortError") return;
+        setResults((prev) => prev.map((r) =>
+          r.source.id === src.id ? { ...r, loading: false, error: e.message } : r
+        ));
+      }
+    }, ctrl.signal);
+  }, [getVisibleSources]);
+
+  function toggleLang(lang: string) {
+    setSelectedLangs((prev) => {
+      const next = new Set(prev);
+      if (next.has(lang)) { if (next.size === 1) return prev; next.delete(lang); }
+      else next.add(lang);
+      return next;
+    });
+  }
+
+  const visibleCount = getVisibleSources().length;
+  const hasResults   = results.some((r) => r.mangas.length > 0);
+  const allDone      = results.every((r) => !r.loading);
+
+  return (
+    <>
+      <div className={s.keywordBar}>
         <div className={s.searchBar}>
           <MagnifyingGlass size={14} className={s.searchIcon} weight="light" />
           <input
-            ref={inputRef}
+            ref={inputRef} autoFocus
             className={s.searchInput}
             placeholder="Search across sources…"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
-            onKeyDown={(e) => e.key === "Enter" && runSearch()}
+            onKeyDown={(e) => e.key === "Enter" && doSearch(query)}
-            autoFocus
           />
+          {hasMultipleLangs && (
+            <button
+              className={[s.advancedBtn, showAdvanced ? s.advancedBtnActive : ""].join(" ")}
+              onClick={() => setShowAdvanced((v) => !v)}
+              title="Language & filter options"
+            >
+              <SlidersHorizontal size={13} weight="light" />
+            </button>
+          )}
           <button
             className={s.searchBtn}
-            onClick={runSearch}
+            onClick={() => doSearch(query)}
             disabled={!query.trim() || loadingSources}
           >
             {loadingSources
@@ -114,20 +333,36 @@ export default function Search() {
               : "Search"}
           </button>
         </div>
-      </div>
 
-      <div className={s.langBar}>
+        {hasMultipleLangs && showAdvanced && (
-        {langs.map((l) => (
+          <div className={s.advancedPanel}>
-          <button
+            <div className={s.advancedHeader}>
-            key={l}
+              <span className={s.advancedTitle}>Languages</span>
-            onClick={() => setActiveLang(l)}
+              <div className={s.advancedActions}>
-            className={[s.langBtn, activeLang === l ? s.langBtnActive : ""].join(" ").trim()}
+                <button className={s.advancedLink} onClick={() => setSelectedLangs(new Set(availableLangs))}>All</button>
-          >
+                <button className={s.advancedLink} onClick={() => setSelectedLangs(new Set([preferredLang]))}>Reset</button>
-            {l === "preferred" ? `${preferredLang.toUpperCase()} (default)` : l === "all" ? "All" : l.toUpperCase()}
+              </div>
-          </button>
+            </div>
-        ))}
+            <div className={s.langGrid}>
-        {visibleSources.length > 0 && (
+              {availableLangs.map((lang) => (
-          <span className={s.sourceCount}>{visibleSources.length} sources</span>
+                <button key={lang}
+                  className={[s.langChip, selectedLangs.has(lang) ? s.langChipActive : ""].join(" ")}
+                  onClick={() => toggleLang(lang)}
+                >
+                  {lang === preferredLang ? `${lang.toUpperCase()} ★` : lang.toUpperCase()}
+                </button>
+              ))}
+            </div>
+            <div className={s.advancedDivider} />
+            <label className={s.advancedCheck}>
+              <input type="checkbox" checked={includeNsfw}
+                onChange={(e) => setIncludeNsfw(e.target.checked)} className={s.checkbox} />
+              Include NSFW sources
+            </label>
+            <div className={s.advancedFooter}>
+              Searching <strong>{visibleCount}</strong> source{visibleCount !== 1 ? "s" : ""}
+            </div>
+          </div>
         )}
       </div>
 
@@ -136,8 +371,15 @@ export default function Search() {
           <MagnifyingGlass size={36} weight="light" className={s.emptyIcon} />
           <p className={s.emptyText}>Search across sources</p>
           <p className={s.emptyHint}>
-            Searching {visibleSources.length} {activeLang === "preferred" ? `${preferredLang.toUpperCase()}` : activeLang === "all" ? "" : activeLang.toUpperCase()} source{visibleSources.length !== 1 ? "s" : ""}.
+            {hasMultipleLangs
+              ? `${visibleCount} source${visibleCount !== 1 ? "s" : ""} · ${selectedLangs.size} language${selectedLangs.size !== 1 ? "s" : ""}`
+              : `${visibleCount} source${visibleCount !== 1 ? "s" : ""}`}
           </p>
+          {hasMultipleLangs && !showAdvanced && (
+            <button className={s.advancedLinkStandalone} onClick={() => setShowAdvanced(true)}>
+              <SlidersHorizontal size={12} weight="light" /> Adjust language filters
+            </button>
+          )}
         </div>
       )}
 
@@ -148,59 +390,321 @@ export default function Search() {
               <CircleNotch size={20} weight="light" className="anim-spin" style={{ color: "var(--text-faint)" }} />
             </div>
           )}
-
           {results
             .filter((r) => r.mangas.length > 0 || r.loading || r.error)
             .map(({ source, mangas, loading, error }) => (
               <div key={source.id} className={s.sourceSection}>
                 <div className={s.sourceHeader}>
-                  <img
+                  <img src={thumbUrl(source.iconUrl)} alt={source.displayName} className={s.sourceIcon}
-                    src={thumbUrl(source.iconUrl)}
+                    onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }} />
-                    alt={source.displayName}
-                    className={s.sourceIcon}
-                    onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
-                  />
                   <span className={s.sourceName}>{source.displayName}</span>
-                  {loading && <CircleNotch size={12} weight="light" className="anim-spin" style={{ color: "var(--text-faint)" }} />}
+                  {hasMultipleLangs && <span className={s.sourceLang}>{source.lang.toUpperCase()}</span>}
-                  {!loading && mangas.length > 0 && (
+                  {loading && <CircleNotch size={12} weight="light" className="anim-spin" style={{ color: "var(--text-faint)", marginLeft: "auto" }} />}
-                    <span className={s.resultCount}>{mangas.length} results</span>
+                  {!loading && mangas.length > 0 && <span className={s.resultCount}>{mangas.length} results</span>}
-                  )}
                 </div>
-
                 {error ? (
                   <p className={s.sourceError}>{error}</p>
                 ) : loading ? (
-                  <div className={s.sourceRow}>
+                  <RowSkeleton />
-                    {Array.from({ length: 4 }).map((_, i) => (
-                      <div key={i} className={s.skCard}>
-                        <div className={["skeleton", s.skCover].join(" ")} />
-                        <div className={["skeleton", s.skTitle].join(" ")} />
-                      </div>
-                    ))}
-                  </div>
                 ) : mangas.length > 0 ? (
                   <div className={s.sourceRow}>
-                    {mangas.slice(0, 8).map((m) => (
+                    {mangas.slice(0, RESULTS_PER_SOURCE).map((m) => (
-                      <button key={m.id} className={s.card} onClick={() => openManga(m)}>
+                      <MangaCard key={m.id} manga={m} onClick={() => onMangaClick(m)} />
-                        <div className={s.coverWrap}>
-                          <img src={thumbUrl(m.thumbnailUrl)} alt={m.title} className={s.cover} />
-                          {m.inLibrary && <span className={s.inLibBadge}>In Library</span>}
-                        </div>
-                        <p className={s.cardTitle}>{m.title}</p>
-                      </button>
                     ))}
                   </div>
                 ) : null}
               </div>
             ))}
-
+          {allDone && !hasResults && (
-          {allDone && !hasResults && submitted && (
             <div className={s.empty}>
               <p className={s.emptyText}>No results for "{submitted}"</p>
             </div>
           )}
         </div>
       )}
+    </>
+  );
+}
+
+// ── Tag tab ───────────────────────────────────────────────────────────────────
+
+function TagTab({
+  preferredLang, onMangaClick,
+}: {
+  allSources: Source[];
+  loadingSources: boolean;
+  preferredLang: string;
+  onMangaClick: (m: Manga) => void;
+}) {
+  const [activeTag, setActiveTag]   = useState<string | null>(null);
+  const [tagResults, setTagResults] = useState<Manga[]>([]);
+  const [loadingTag, setLoadingTag] = useState(false);
+  const [tagFilter, setTagFilter]   = useState("");
+  const abortRef = useRef<AbortController | null>(null);
+
+  useEffect(() => () => { abortRef.current?.abort(); }, []);
+
+  async function drillTag(tag: string) {
+    if (tag === activeTag && !loadingTag) return;
+    setActiveTag(tag);
+    setTagResults([]);
+    setLoadingTag(true);
+
+    abortRef.current?.abort();
+    const ctrl = new AbortController();
+    abortRef.current = ctrl;
+
+    try {
+      const sources = await cache.get(CACHE_KEYS.SOURCES, () =>
+        gql<{ sources: { nodes: Source[] } }>(GET_SOURCES)
+          .then((d) => d.sources.nodes.filter((s) => s.id !== "0"))
+      );
+      const deduped = dedupeSources(sources, preferredLang);
+      const top     = getTopSources(deduped);
+
+      const results = await cache.get(CACHE_KEYS.GENRE(tag), () =>
+        Promise.allSettled(
+          top.map((src) =>
+            gql<{ fetchSourceManga: { mangas: Manga[] } }>(
+              FETCH_SOURCE_MANGA,
+              { source: src.id, type: "SEARCH", page: 1, query: tag },
+              ctrl.signal,
+            ).then((d) => d.fetchSourceManga.mangas)
+          )
+        ).then((settled) => {
+          const merged: Manga[] = [];
+          for (const r of settled)
+            if (r.status === "fulfilled") merged.push(...r.value);
+          return dedupeMangaByTitle(merged);
+        })
+      );
+
+      if (!ctrl.signal.aborted) setTagResults(results);
+    } catch (e: any) {
+      if (e?.name !== "AbortError") console.error(e);
+    } finally {
+      if (!ctrl.signal.aborted) setLoadingTag(false);
+    }
+  }
+
+  const filteredGenres = useMemo(() => {
+    const q = tagFilter.trim().toLowerCase();
+    return q ? COMMON_GENRES.filter((g) => g.toLowerCase().includes(q)) : COMMON_GENRES;
+  }, [tagFilter]);
+
+  return (
+    <div className={s.splitRoot}>
+      <div className={s.splitSidebar}>
+        <div className={s.splitSearchWrap}>
+          <MagnifyingGlass size={12} className={s.splitSearchIcon} weight="light" />
+          <input
+            className={s.splitSearchInput}
+            placeholder="Filter tags…"
+            value={tagFilter}
+            onChange={(e) => setTagFilter(e.target.value)}
+          />
+        </div>
+        <div className={s.splitList}>
+          {filteredGenres.map((tag) => (
+            <button
+              key={tag}
+              className={[s.splitItem, activeTag === tag ? s.splitItemActive : ""].join(" ")}
+              onClick={() => drillTag(tag)}
+            >
+              {tag}
+            </button>
+          ))}
+          {filteredGenres.length === 0 && <p className={s.splitEmpty}>No matching tags</p>}
+        </div>
+      </div>
+
+      <div className={s.splitContent}>
+        {!activeTag ? (
+          <div className={s.empty}>
+            <Hash size={32} weight="light" className={s.emptyIcon} />
+            <p className={s.emptyText}>Browse by tag</p>
+            <p className={s.emptyHint}>Select a genre tag to see matching manga across your sources.</p>
+          </div>
+        ) : (
+          <>
+            <div className={s.splitContentHeader}>
+              <span className={s.splitContentTitle}>{activeTag}</span>
+              {loadingTag
+                ? <CircleNotch size={13} weight="light" className="anim-spin" style={{ color: "var(--text-faint)" }} />
+                : <span className={s.splitResultCount}>{tagResults.length} results</span>}
+            </div>
+            {loadingTag ? (
+              <GridSkeleton />
+            ) : tagResults.length > 0 ? (
+              <div className={s.tagGrid}>
+                {tagResults.map((m) => (
+                  <MangaCard key={m.id} manga={m} onClick={() => onMangaClick(m)} />
+                ))}
+              </div>
+            ) : (
+              <div className={s.empty}>
+                <p className={s.emptyText}>No results for "{activeTag}"</p>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ── Source tab ────────────────────────────────────────────────────────────────
+
+function SourceTab({
+  allSources, loadingSources, availableLangs, hasMultipleLangs, onMangaClick,
+}: {
+  allSources: Source[];
+  loadingSources: boolean;
+  availableLangs: string[];
+  hasMultipleLangs: boolean;
+  onMangaClick: (m: Manga) => void;
+}) {
+  const [selectedLang, setSelectedLang]   = useState<string>("all");
+  const [activeSource, setActiveSource]   = useState<Source | null>(null);
+  const [browseResults, setBrowseResults] = useState<Manga[]>([]);
+  const [loadingBrowse, setLoadingBrowse] = useState(false);
+  const [browseQuery, setBrowseQuery]     = useState("");
+  const [submitted, setSubmitted]         = useState("");
+  const abortRef = useRef<AbortController | null>(null);
+
+  useEffect(() => () => { abortRef.current?.abort(); }, []);
+
+  const visibleSources = useMemo(() =>
+    selectedLang === "all" ? allSources : allSources.filter((s) => s.lang === selectedLang),
+    [allSources, selectedLang]
+  );
+
+  async function fetchBrowse(src: Source, type: "POPULAR" | "SEARCH", q?: string) {
+    abortRef.current?.abort();
+    const ctrl = new AbortController();
+    abortRef.current = ctrl;
+    setLoadingBrowse(true);
+    setBrowseResults([]);
+
+    try {
+      const d = await gql<{ fetchSourceManga: { mangas: Manga[] } }>(
+        FETCH_SOURCE_MANGA,
+        { source: src.id, type, page: 1, query: q ?? null },
+        ctrl.signal,
+      );
+      if (!ctrl.signal.aborted) setBrowseResults(d.fetchSourceManga.mangas);
+    } catch (e: any) {
+      if (e?.name !== "AbortError") console.error(e);
+    } finally {
+      if (!ctrl.signal.aborted) setLoadingBrowse(false);
+    }
+  }
+
+  function selectSource(src: Source) {
+    setActiveSource(src);
+    setBrowseQuery("");
+    setSubmitted("");
+    fetchBrowse(src, "POPULAR");
+  }
+
+  function handleSearch() {
+    if (!activeSource || !browseQuery.trim()) return;
+    setSubmitted(browseQuery.trim());
+    fetchBrowse(activeSource, "SEARCH", browseQuery.trim());
+  }
+
+  function clearSearch() {
+    setBrowseQuery("");
+    setSubmitted("");
+    if (activeSource) fetchBrowse(activeSource, "POPULAR");
+  }
+
+  return (
+    <div className={s.splitRoot}>
+      <div className={s.splitSidebar}>
+        {hasMultipleLangs && (
+          <div className={s.langFilterRow}>
+            {["all", ...availableLangs].map((lang) => (
+              <button key={lang}
+                className={[s.langChip, selectedLang === lang ? s.langChipActive : ""].join(" ")}
+                onClick={() => setSelectedLang(lang)}
+              >
+                {lang === "all" ? "All" : lang.toUpperCase()}
+              </button>
+            ))}
+          </div>
+        )}
+        {loadingSources ? (
+          <div className={s.splitLoading}>
+            <CircleNotch size={16} weight="light" className="anim-spin" style={{ color: "var(--text-faint)" }} />
+          </div>
+        ) : (
+          <div className={s.splitList}>
+            {visibleSources.map((src) => (
+              <button key={src.id}
+                className={[s.splitItem, s.splitItemSource, activeSource?.id === src.id ? s.splitItemActive : ""].join(" ")}
+                onClick={() => selectSource(src)}
+              >
+                <img src={thumbUrl(src.iconUrl)} alt="" className={s.splitSourceIcon}
+                  onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }} />
+                <span className={s.splitItemLabel}>{src.displayName}</span>
+                {src.isNsfw && <span className={s.nsfwBadge}>18+</span>}
+              </button>
+            ))}
+            {visibleSources.length === 0 && <p className={s.splitEmpty}>No sources for this language</p>}
+          </div>
+        )}
+      </div>
+
+      <div className={s.splitContent}>
+        {!activeSource ? (
+          <div className={s.empty}>
+            <List size={32} weight="light" className={s.emptyIcon} />
+            <p className={s.emptyText}>Browse a source</p>
+            <p className={s.emptyHint}>Select a source to see its popular titles, or search within it.</p>
+          </div>
+        ) : (
+          <>
+            <div className={s.splitContentHeader}>
+              <div className={s.splitSourceTitle}>
+                <img src={thumbUrl(activeSource.iconUrl)} alt="" className={s.splitSourceIcon}
+                  onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }} />
+                <span className={s.splitContentTitle}>{activeSource.displayName}</span>
+                {loadingBrowse && <CircleNotch size={13} weight="light" className="anim-spin" style={{ color: "var(--text-faint)" }} />}
+                {!loadingBrowse && browseResults.length > 0 && <span className={s.splitResultCount}>{browseResults.length} results</span>}
+              </div>
+              <div className={s.sourceBrowseBar}>
+                <div className={s.searchBar} style={{ flex: 1 }}>
+                  <MagnifyingGlass size={12} className={s.searchIcon} weight="light" />
+                  <input
+                    className={s.searchInput}
+                    placeholder={`Search ${activeSource.displayName}…`}
+                    value={browseQuery}
+                    onChange={(e) => setBrowseQuery(e.target.value)}
+                    onKeyDown={(e) => e.key === "Enter" && handleSearch()}
+                  />
+                  {submitted && (
+                    <button className={s.clearSearchBtn} onClick={clearSearch} title="Clear search">×</button>
+                  )}
+                </div>
+                <button className={s.searchBtn} onClick={handleSearch} disabled={!browseQuery.trim() || loadingBrowse}>
+                  Search
+                </button>
+              </div>
+            </div>
+
+            {loadingBrowse ? <GridSkeleton /> : browseResults.length > 0 ? (
+              <div className={s.tagGrid}>
+                {browseResults.map((m) => <MangaCard key={m.id} manga={m} onClick={() => onMangaClick(m)} />)}
+              </div>
+            ) : (
+              <div className={s.empty}>
+                <p className={s.emptyText}>{submitted ? `No results for "${submitted}"` : "No results"}</p>
+              </div>
+            )}
+          </>
+        )}
+      </div>
     </div>
   );
 }

src/components/pages/SeriesDetail.module.css

@@ -724,6 +724,18 @@
   pointer-events: none;
 }
 
+/* In-progress progress fill bar (width set inline) */
+.gridCellProgress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  background: var(--accent);
+  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
+  pointer-events: none;
+  z-index: 2;
+}
+
 /* In-progress — accent highlight on bottom edge */
 .gridCellInProgress {
   border-color: var(--accent-dim);
@@ -933,18 +945,23 @@
   align-items: center;
   gap: var(--sp-2);
   width: 100%;
-  margin-top: var(--sp-2);
+  padding: 6px var(--sp-2);
-  padding: 7px var(--sp-3);
   border-radius: var(--radius-md);
+  font-family: var(--font-ui);
   font-size: var(--text-xs);
-  color: var(--color-error);
+  letter-spacing: var(--tracking-wide);
+  color: var(--text-faint);
   background: none;
-  border: 1px solid var(--color-error);
+  border: 1px solid var(--border-dim);
   cursor: pointer;
   text-align: left;
-  transition: background var(--t-base);
+  transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
+}
+.deleteAllBtn:hover:not(:disabled) {
+  color: var(--color-error);
+  border-color: color-mix(in srgb, var(--color-error) 40%, transparent);
+  background: var(--color-error-bg, color-mix(in srgb, var(--color-error) 8%, transparent));
 }
-.deleteAllBtn:hover:not(:disabled) { background: var(--color-error-bg); }
 .deleteAllBtn:disabled { opacity: 0.4; cursor: default; }
 
 /* ── Danger item in dl dropdown ─────────────────────────────────────── */

src/components/pages/SeriesDetail.tsx

@@ -11,6 +11,7 @@ import {
   UPDATE_MANGA, MARK_CHAPTER_READ, MARK_CHAPTERS_READ, DELETE_DOWNLOADED_CHAPTERS,
   ENQUEUE_CHAPTERS_DOWNLOAD,
 } from "../../lib/queries";
+import { cache, CACHE_KEYS, recordSourceAccess } from "../../lib/cache";
 import { useStore } from "../../store";
 import ContextMenu, { type ContextMenuEntry } from "../context/ContextMenu";
 import MigrateModal from "./MigrateModal";
@@ -35,6 +36,18 @@ interface CtxState {
 
 const CHAPTERS_PER_PAGE = 25;
 
+// How long before we consider a manga detail / chapter list stale and silently re-fetch.
+// This prevents hammering the server when rapidly opening/closing while still keeping
+// data fresh enough for normal use.
+const MANGA_CACHE_TTL_MS  = 5 * 60 * 1000;  // 5 min — detail rarely changes mid-session
+const CHAPTER_CACHE_TTL_MS = 2 * 60 * 1000; // 2 min — chapters update more often
+
+// ── TTL-aware memory stores (cleared on page refresh, not persisted) ──────────
+// These supplement the session `cache` with timestamp tracking so we know when
+// to silently re-validate in the background.
+const mangaDetailStore  = new Map<number, { data: Manga;  fetchedAt: number }>();
+const chapterStore      = new Map<number, { data: Chapter[]; fetchedAt: number }>();
+
 // ── Download dropdown ─────────────────────────────────────────────────────────
 
 interface DownloadDropdownProps {
@@ -93,7 +106,6 @@ function DownloadDropdown({
 
   return (
     <div className={s.dlDropdown} ref={ref}>
-
       {continueChapter && continueIdx >= 0 && (
         <>
           <p className={s.dlSectionLabel}>From Ch.{continueChapter.chapter.chapterNumber}</p>
@@ -289,10 +301,9 @@ export default function SeriesDetail() {
   const settings            = useStore((state) => state.settings);
   const updateSettings      = useStore((state) => state.updateSettings);
   const addToast            = useStore((state) => state.addToast);
-  const setLibraryTagFilter = useStore((state) => state.setLibraryTagFilter);
+  const setGenreFilter      = useStore((state) => state.setGenreFilter);
-  const setLibraryFilter    = useStore((state) => state.setLibraryFilter);
 
-  const [manga, setManga]                   = useState<Manga | null>(activeManga);
+  const [manga, setManga]                   = useState<Manga | null>(null);
   const [chapters, setChapters]             = useState<Chapter[]>([]);
   const [loadingManga, setLoadingManga]     = useState(false);
   const [loadingChapters, setLoadingChapters] = useState(true);
@@ -311,47 +322,140 @@ export default function SeriesDetail() {
   const [descExpanded, setDescExpanded]     = useState(false);
   const [genresExpanded, setGenresExpanded] = useState(false);
 
+  // Track the abort controllers for in-flight requests so we can cancel on unmount/change
+  // Manga detail and chapters each get their own controller so they don't clobber each other
+  const mangaAbortRef   = useRef<AbortController | null>(null);
+  const chapterAbortRef = useRef<AbortController | null>(null);
+  // Track the manga ID we're currently loading to discard stale results
+  const loadingForRef = useRef<number | null>(null);
+
   const sortDir = settings.chapterSortDir;
 
-  // Load extended manga details
+  // ── Manga detail: serve from TTL cache, silently re-validate if stale ──────
   useEffect(() => {
     if (!activeManga) return;
+
+    const mangaId = activeManga.id;
+
+    // Cancel any in-flight manga detail request from a previous manga
+    mangaAbortRef.current?.abort();
+    const ctrl = new AbortController();
+    mangaAbortRef.current = ctrl;
+    loadingForRef.current = mangaId;
+
+    const cached = mangaDetailStore.get(mangaId);
+    const now = Date.now();
+
+    if (cached) {
+      // Serve from memory immediately — no loading state, no flash
+      setManga(cached.data);
+      setLoadingManga(false);
+
+      // If cache is fresh enough, skip the network entirely
+      if (now - cached.fetchedAt < MANGA_CACHE_TTL_MS) return;
+
+      // Stale: re-validate silently in the background (no spinner)
+      gql<{ manga: Manga }>(GET_MANGA, { id: mangaId }, ctrl.signal)
+        .then((data) => {
+          if (ctrl.signal.aborted || loadingForRef.current !== mangaId) return;
+          mangaDetailStore.set(mangaId, { data: data.manga, fetchedAt: Date.now() });
+          setManga(data.manga);
+          if (data.manga.source?.id) recordSourceAccess(data.manga.source.id);
+        })
+        .catch((e) => { if (e?.name !== "AbortError") console.error(e); });
+
+      return;
+    }
+
+    // Nothing cached — show skeleton and fetch
     setLoadingManga(true);
-    gql<{ manga: Manga }>(GET_MANGA, { id: activeManga.id })
+    gql<{ manga: Manga }>(GET_MANGA, { id: mangaId }, ctrl.signal)
-      .then((data) => setManga(data.manga))
+      .then((data) => {
-      .catch(console.error)
+        if (ctrl.signal.aborted || loadingForRef.current !== mangaId) return;
-      .finally(() => setLoadingManga(false));
+        mangaDetailStore.set(mangaId, { data: data.manga, fetchedAt: Date.now() });
+        setManga(data.manga);
+        if (data.manga.source?.id) recordSourceAccess(data.manga.source.id);
+      })
+      .catch((e) => { if (e?.name !== "AbortError") console.error(e); })
+      .finally(() => {
+        if (!ctrl.signal.aborted && loadingForRef.current === mangaId) setLoadingManga(false);
+      });
+
+    return () => { ctrl.abort(); mangaAbortRef.current = null; };
   }, [activeManga?.id]);
 
-  const loadChapters = useCallback((mangaId: number) => {
+  // ── Chapter loading: cache-first, background refresh only when stale ────────
-    return gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId })
+  const applyChapters = useCallback((nodes: Chapter[]) => {
-      .then((data) => {
+    const sorted = [...nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
-        const sorted = [...data.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
+    setChapters(sorted);
-        setChapters(sorted);
+    return sorted;
-        return sorted;
-      });
   }, []);
 
-  // Load chapters: show cache immediately, then silently refresh from source
   useEffect(() => {
     if (!activeManga) return;
-    setLoadingChapters(true);
+
-    setChapters([]);
+    const mangaId = activeManga.id;
     setChapterPage(1);
 
-    loadChapters(activeManga.id)
+    // Cancel any previous in-flight chapter requests
-      .then((cached) =>
+    chapterAbortRef.current?.abort();
-        gql(FETCH_CHAPTERS, { mangaId: activeManga.id })
+    const ctrl = new AbortController();
-          .then(() => loadChapters(activeManga.id))
+    chapterAbortRef.current = ctrl;
+    loadingForRef.current = mangaId;
+
+    const cached = chapterStore.get(mangaId);
+    const now = Date.now();
+
+    if (cached) {
+      // Show cached data instantly
+      applyChapters(cached.data);
+      setLoadingChapters(false);
+
+      // Fresh enough — don't touch the network at all
+      if (now - cached.fetchedAt < CHAPTER_CACHE_TTL_MS) return;
+
+      // Stale — silently re-validate: fetch from source then re-read local DB
+      // We don't clear the chapter list while this happens (no flicker)
+      gql(FETCH_CHAPTERS, { mangaId }, ctrl.signal)
+        .then(() => gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId }, ctrl.signal))
+        .then((data) => {
+          if (ctrl.signal.aborted || loadingForRef.current !== mangaId) return;
+          chapterStore.set(mangaId, { data: data.chapters.nodes, fetchedAt: Date.now() });
+          applyChapters(data.chapters.nodes);
+        })
+        .catch((e) => { if (e?.name !== "AbortError") console.error(e); });
+
+      return;
+    }
+
+    // Nothing cached — show skeleton, load local DB first (fast), then source
+    setChapters([]);
+    setLoadingChapters(true);
+
+    gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId }, ctrl.signal)
+      .then((data) => {
+        if (ctrl.signal.aborted || loadingForRef.current !== mangaId) return;
+        // Show local DB result immediately so the user isn't staring at a spinner
+        applyChapters(data.chapters.nodes);
+        setLoadingChapters(false);
+
+        // Now silently fetch from the source to pick up any new chapters
+        return gql(FETCH_CHAPTERS, { mangaId }, ctrl.signal)
+          .then(() => gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId }, ctrl.signal))
           .then((fresh) => {
-            // Suppress no-op: if count unchanged the state is already correct
+            if (ctrl.signal.aborted || loadingForRef.current !== mangaId) return;
-            void (fresh.length === cached.length);
+            chapterStore.set(mangaId, { data: fresh.chapters.nodes, fetchedAt: Date.now() });
-          })
+            applyChapters(fresh.chapters.nodes);
-          .catch(console.error)
+          });
-      )
+      })
-      .catch(console.error)
+      .catch((e) => {
-      .finally(() => setLoadingChapters(false));
+        if (ctrl.signal.aborted || e?.name === "AbortError") return;
-  }, [activeManga?.id]);
+        console.error(e);
+        setLoadingChapters(false);
+      });
+
+    return () => { ctrl.abort(); chapterAbortRef.current = null; };
+  }, [activeManga?.id, applyChapters]);
 
   // ── Derived state ──────────────────────────────────────────────────────────
 
@@ -388,17 +492,32 @@ export default function SeriesDetail() {
     setTogglingLibrary(true);
     const next = !manga.inLibrary;
     await gql(UPDATE_MANGA, { id: manga.id, inLibrary: next }).catch(console.error);
-    setManga((prev) => prev ? { ...prev, inLibrary: next } : prev);
+    const updated = { ...manga, inLibrary: next };
+    setManga(updated);
+    // Update the detail cache so re-open reflects the new state
+    if (mangaDetailStore.has(manga.id)) {
+      const entry = mangaDetailStore.get(manga.id)!;
+      mangaDetailStore.set(manga.id, { ...entry, data: updated });
+    }
+    cache.clear(CACHE_KEYS.LIBRARY);
     setTogglingLibrary(false);
   }
 
+  const reloadChapters = useCallback((mangaId: number, signal?: AbortSignal) => {
+    return gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId }, signal)
+      .then((data) => {
+        chapterStore.set(mangaId, { data: data.chapters.nodes, fetchedAt: Date.now() });
+        applyChapters(data.chapters.nodes);
+      });
+  }, [applyChapters]);
+
   async function enqueue(chapter: Chapter, e: React.MouseEvent) {
     e.stopPropagation();
     setEnqueueing((prev) => new Set(prev).add(chapter.id));
     await gql(ENQUEUE_DOWNLOAD, { chapterId: chapter.id }).catch(console.error);
     addToast({ kind: "download", title: "Download queued", body: chapter.name });
     setEnqueueing((prev) => { const n = new Set(prev); n.delete(chapter.id); return n; });
-    if (activeManga) loadChapters(activeManga.id);
+    if (activeManga) reloadChapters(activeManga.id);
   }
 
   async function enqueueMultiple(chapterIds: number[]) {
@@ -409,18 +528,27 @@ export default function SeriesDetail() {
       title: "Download queued",
       body: `${chapterIds.length} chapter${chapterIds.length !== 1 ? "s" : ""} added to queue`,
     });
-    if (activeManga) loadChapters(activeManga.id);
+    if (activeManga) reloadChapters(activeManga.id);
   }
 
   async function markRead(chapterId: number, isRead: boolean) {
     await gql(MARK_CHAPTER_READ, { id: chapterId, isRead }).catch(console.error);
-    setChapters((prev) => prev.map((c) => c.id === chapterId ? { ...c, isRead } : c));
+    setChapters((prev) => {
+      const updated = prev.map((c) => c.id === chapterId ? { ...c, isRead } : c);
+      if (activeManga) chapterStore.set(activeManga.id, { data: updated, fetchedAt: Date.now() });
+      return updated;
+    });
   }
 
   async function markBulk(ids: number[], isRead: boolean) {
     if (!ids.length) return;
     await gql(MARK_CHAPTERS_READ, { ids, isRead }).catch(console.error);
-    setChapters((prev) => prev.map((c) => ids.includes(c.id) ? { ...c, isRead } : c));
+    setChapters((prev) => {
+      const idSet = new Set(ids);
+      const updated = prev.map((c) => idSet.has(c.id) ? { ...c, isRead } : c);
+      if (activeManga) chapterStore.set(activeManga.id, { data: updated, fetchedAt: Date.now() });
+      return updated;
+    });
   }
 
   const markAllAboveRead    = (i: number) =>
@@ -434,7 +562,11 @@ export default function SeriesDetail() {
 
   async function deleteDownloaded(chapterId: number) {
     await gql(DELETE_DOWNLOADED_CHAPTERS, { ids: [chapterId] }).catch(console.error);
-    setChapters((prev) => prev.map((c) => c.id === chapterId ? { ...c, isDownloaded: false } : c));
+    setChapters((prev) => {
+      const updated = prev.map((c) => c.id === chapterId ? { ...c, isDownloaded: false } : c);
+      if (activeManga) chapterStore.set(activeManga.id, { data: updated, fetchedAt: Date.now() });
+      return updated;
+    });
   }
 
   async function deleteAllDownloads() {
@@ -442,21 +574,26 @@ export default function SeriesDetail() {
     if (!ids.length) return;
     setDeletingAll(true);
     await gql(DELETE_DOWNLOADED_CHAPTERS, { ids }).catch(console.error);
-    setChapters((prev) => prev.map((c) => ({ ...c, isDownloaded: false })));
+    setChapters((prev) => {
+      const updated = prev.map((c) => ({ ...c, isDownloaded: false }));
+      if (activeManga) chapterStore.set(activeManga.id, { data: updated, fetchedAt: Date.now() });
+      return updated;
+    });
     setDeletingAll(false);
   }
 
   async function refreshChapters() {
     if (!activeManga || refreshing) return;
     setRefreshing(true);
+    // Force-invalidate the chapter cache for this manga so we get a fresh fetch
+    chapterStore.delete(activeManga.id);
     await gql(FETCH_CHAPTERS, { mangaId: activeManga.id })
-      .then(() => loadChapters(activeManga.id))
+      .then(() => reloadChapters(activeManga.id))
       .then(() => addToast({ kind: "success", title: "Chapters refreshed" }))
       .catch((e) => addToast({ kind: "error", title: "Refresh failed", body: e?.message ?? String(e) }))
       .finally(() => setRefreshing(false));
   }
 
-  // ── FIX: restored missing function declaration ─────────────────────────────
   function openContextMenu(e: React.MouseEvent, chapter: Chapter, indexInSorted: number) {
     e.preventDefault();
     setCtx({ x: e.clientX, y: e.clientY, chapter, indexInSorted });
@@ -555,7 +692,7 @@ export default function SeriesDetail() {
       <div className={s.sidebar}>
         <button className={s.back} onClick={() => setActiveManga(null)}>
           <ArrowLeft size={13} weight="light" />
-          <span>Library</span>
+          <span>Back</span>
         </button>
 
         <div className={s.coverWrap}>
@@ -596,11 +733,7 @@ export default function SeriesDetail() {
                     key={g}
                     className={[s.genre, s.genreClickable].join(" ")}
                     title={`Filter library by "${g}"`}
-                    onClick={() => {
+                    onClick={() => setGenreFilter(g)}
-                      setLibraryTagFilter([g]);
-                      setLibraryFilter("library");
-                      setActiveManga(null);
-                    }}
                   >
                     {g}
                   </button>
@@ -682,36 +815,20 @@ export default function SeriesDetail() {
           {readCount > 0 && ` · ${readCount} read`}
         </p>
 
-        {/* Quick mark-all */}
+        {/* Source info — collapsible details */}
-        {totalCount > 0 && (
-          <div className={s.markAllRow}>
-            <button
-              className={s.markAllBtn}
-              onClick={() => markAllAboveRead(sortedChapters.length - 1)}
-              disabled={readCount === totalCount}
-              title="Mark all chapters as read"
-            >
-              <CheckCircle size={12} weight="light" />
-              All read
-            </button>
-            <button
-              className={s.markAllBtn}
-              onClick={() => markAllAboveUnread(sortedChapters.length - 1)}
-              disabled={readCount === 0}
-              title="Mark all chapters as unread"
-            >
-              <Circle size={12} weight="light" />
-              All unread
-            </button>
-          </div>
-        )}
-
-        {/* Details (collapsible) */}
         {!loadingManga && manga?.source && (
           <div className={s.detailsSection}>
             <button className={s.detailsToggle} onClick={() => setDetailsOpen((p) => !p)}>
               <span>Details</span>
-              <CaretDown size={11} weight="light" className={detailsOpen ? s.caretOpen : s.caretClosed} />
+              <CaretDown
+                size={11}
+                weight="light"
+                style={{
+                  transform: detailsOpen ? "rotate(180deg)" : "rotate(0deg)",
+                  transition: "transform 0.15s ease",
+                  flexShrink: 0,
+                }}
+              />
             </button>
             {detailsOpen && (
               <div className={s.detailsBody}>
@@ -719,14 +836,32 @@ export default function SeriesDetail() {
                   <span className={s.detailKey}>Source</span>
                   <span className={s.detailVal}>{manga.source.displayName}</span>
                 </div>
-                <div className={s.detailRow}>
+                {manga.status && (
-                  <span className={s.detailKey}>Language</span>
+                  <div className={s.detailRow}>
-                  <span className={s.detailVal}>{manga.source.name.match(/\(([^)]+)\)$/)?.[1] ?? "—"}</span>
+                    <span className={s.detailKey}>Status</span>
-                </div>
+                    <span className={s.detailVal}>
-                <div className={s.detailRow}>
+                      {manga.status.charAt(0) + manga.status.slice(1).toLowerCase()}
-                  <span className={s.detailKey}>Source ID</span>
+                    </span>
-                  <span className={[s.detailVal, s.detailMono].join(" ")}>{manga.source.id}</span>
+                  </div>
-                </div>
+                )}
+                {manga.author && (
+                  <div className={s.detailRow}>
+                    <span className={s.detailKey}>Author</span>
+                    <span className={s.detailVal}>{manga.author}</span>
+                  </div>
+                )}
+                {manga.artist && manga.artist !== manga.author && (
+                  <div className={s.detailRow}>
+                    <span className={s.detailKey}>Artist</span>
+                    <span className={s.detailVal}>{manga.artist}</span>
+                  </div>
+                )}
+                {totalCount > 0 && (
+                  <div className={s.detailRow}>
+                    <span className={s.detailKey}>Progress</span>
+                    <span className={s.detailVal}>{readCount} / {totalCount} read</span>
+                  </div>
+                )}
                 <button className={s.migrateBtn} onClick={() => setMigrateOpen(true)}>
                   <ArrowsClockwise size={12} weight="light" />
                   Switch source
@@ -738,13 +873,20 @@ export default function SeriesDetail() {
                     disabled={deletingAll}
                   >
                     <Trash size={12} weight="light" />
-                    {deletingAll ? "Deleting…" : `Delete all downloads (${downloadedCount})`}
+                    {deletingAll ? "Deleting…" : `Delete downloads (${downloadedCount})`}
                   </button>
                 )}
               </div>
             )}
           </div>
         )}
+
+        {manga && !manga.source && (
+          <button className={s.migrateBtn} onClick={() => setMigrateOpen(true)}>
+            <ArrowsClockwise size={12} weight="light" />
+            Switch source
+          </button>
+        )}
       </div>
 
       {/* ── Chapter list ── */}
@@ -761,8 +903,7 @@ export default function SeriesDetail() {
             >
               {sortDir === "desc"
                 ? <SortDescending size={14} weight="light" />
-                : <SortAscending size={14} weight="light" />
+                : <SortAscending size={14} weight="light" />}
-              }
               <span>{sortDir === "desc" ? "Newest first" : "Oldest first"}</span>
             </button>
 
@@ -916,7 +1057,6 @@ export default function SeriesDetail() {
             pageChapters.map((ch) => {
               const idxInSorted = sortedChapters.indexOf(ch);
               return (
-                // div instead of button so the nested download/delete buttons are valid HTML
                 <div
                   key={ch.id}
                   role="button"
@@ -941,11 +1081,9 @@ export default function SeriesDetail() {
                     {ch.isBookmarked && (
                       <BookmarkSimple size={12} weight="fill" className={s.bookmarkIcon} />
                     )}
-                    {/* Read indicator — always shown when read */}
                     {ch.isRead && (
                       <CheckCircle size={14} weight="light" className={s.readIcon} />
                     )}
-                    {/* Download / status indicator — independent of read state */}
                     {ch.isDownloaded ? (
                       <button
                         className={s.dlBtn}

src/components/sources/Explore.tsx

@@ -1,678 +0,0 @@
-import { useEffect, useState, useMemo, memo } from "react";
-import { ArrowLeft, ArrowRight, Compass, List, BookOpen, Star, Fire, BookmarkSimple, FolderSimplePlus, Folder } from "@phosphor-icons/react";
-import { gql, thumbUrl } from "../../lib/client";
-import { UPDATE_MANGA } from "../../lib/queries";
-import ContextMenu, { type ContextMenuEntry } from "../context/ContextMenu";
-import { GET_ALL_MANGA, GET_LIBRARY, GET_SOURCES, FETCH_SOURCE_MANGA } from "../../lib/queries";
-import { useStore } from "../../store";
-import type { Manga, Source } from "../../lib/types";
-import SourceList from "./SourceList";
-import SourceBrowse from "./SourceBrowse";
-import s from "./Explore.module.css";
-
-// ── Frecency ──────────────────────────────────────────────────────────────────
-
-function frecencyScore(readAt: number, count: number): number {
-  const hoursSince = (Date.now() - readAt) / 3_600_000;
-  return count / Math.log(hoursSince + 2);
-}
-
-// ── Ghost card ────────────────────────────────────────────────────────────────
-
-function GhostCard() {
-  return <div className={s.ghostCard} aria-hidden />;
-}
-
-const GHOST_COUNT = 3;
-
-// ── Skeleton row ──────────────────────────────────────────────────────────────
-
-function SkeletonRow({ count = 8 }: { count?: number }) {
-  return (
-    <div className={s.skeletonRow}>
-      {Array.from({ length: count }).map((_, i) => (
-        <div key={i} className={s.cardSkeleton}>
-          <div className={["skeleton", s.coverSkeleton].join(" ")} />
-          <div className={["skeleton", s.titleSkeleton].join(" ")} />
-        </div>
-      ))}
-    </div>
-  );
-}
-
-// ── Mini card ─────────────────────────────────────────────────────────────────
-
-const MiniCard = memo(function MiniCard({
-  manga,
-  onClick,
-  onContextMenu,
-  subtitle,
-  progress,
-}: {
-  manga: Manga;
-  onClick: () => void;
-  onContextMenu?: (e: React.MouseEvent) => void;
-  subtitle?: string;
-  progress?: number;
-}) {
-  return (
-    <button className={s.card} onClick={onClick} onContextMenu={onContextMenu}>
-      <div className={s.coverWrap}>
-        <img
-          src={thumbUrl(manga.thumbnailUrl)}
-          alt={manga.title}
-          className={s.cover}
-          loading="lazy"
-          decoding="async"
-        />
-        {manga.inLibrary && <span className={s.inLibraryBadge}>Saved</span>}
-        {progress !== undefined && progress > 0 && (
-          <div className={s.progressBar}>
-            <div className={s.progressFill} style={{ width: `${progress * 100}%` }} />
-          </div>
-        )}
-      </div>
-      <p className={s.title}>{manga.title}</p>
-      {subtitle && <p className={s.subtitle}>{subtitle}</p>}
-    </button>
-  );
-});
-
-// ── Genre drill-down ──────────────────────────────────────────────────────────
-
-function GenreDrill({
-  genre,
-  manga,
-  sourceManga,
-  onBack,
-  onOpen,
-}: {
-  genre: string;
-  manga: Manga[];
-  sourceManga: Manga[];
-  onBack: () => void;
-  onOpen: (m: Manga) => void;
-}) {
-  const [ctx, setCtx]       = useState<{ x: number; y: number; manga: Manga } | null>(null);
-  const folders             = useStore((st) => st.settings.folders);
-  const addFolder           = useStore((st) => st.addFolder);
-  const assignMangaToFolder = useStore((st) => st.assignMangaToFolder);
-
-  function openCtx(e: React.MouseEvent, m: Manga) {
-    e.preventDefault(); e.stopPropagation();
-    setCtx({ x: e.clientX, y: e.clientY, manga: m });
-  }
-
-  function buildCtxItems(m: Manga): ContextMenuEntry[] {
-    return [
-      {
-        label: m.inLibrary ? "In Library" : "Add to library",
-        icon: <BookmarkSimple size={13} weight={m.inLibrary ? "fill" : "light"} />,
-        disabled: m.inLibrary,
-        onClick: () => gql(UPDATE_MANGA, { id: m.id, inLibrary: true }).catch(console.error),
-      },
-      ...(folders.length > 0 ? [
-        { separator: true } as ContextMenuEntry,
-        ...folders.map((f): ContextMenuEntry => ({
-          label: f.mangaIds.includes(m.id) ? `✓ ${f.name}` : f.name,
-          icon: <Folder size={13} weight={f.mangaIds.includes(m.id) ? "fill" : "light"} />,
-          onClick: () => assignMangaToFolder(f.id, m.id),
-        })),
-      ] : []),
-      { separator: true },
-      {
-        label: "New folder & add",
-        icon: <FolderSimplePlus size={13} weight="light" />,
-        onClick: () => {
-          const name = prompt("Folder name:");
-          if (name?.trim()) { const id = addFolder(name.trim()); assignMangaToFolder(id, m.id); }
-        },
-      },
-    ];
-  }
-
-  const filtered = useMemo(() => {
-    const combined = new Map<number, Manga>();
-    [...manga, ...sourceManga]
-      .filter((m) => (m.genre ?? []).includes(genre))
-      .forEach((m) => combined.set(m.id, m));
-    return Array.from(combined.values());
-  }, [manga, sourceManga, genre]);
-
-  return (
-    <div className={s.drillRoot}>
-      <div className={s.drillHeader}>
-        <button className={s.back} onClick={onBack}>
-          <ArrowLeft size={13} weight="light" />
-          <span>Explore</span>
-        </button>
-        <span className={s.drillTitle}>{genre}</span>
-      </div>
-      <div className={s.drillGrid}>
-        {filtered.map((m) => (
-          <button key={m.id} className={s.drillCard} onClick={() => onOpen(m)} onContextMenu={(e) => openCtx(e, m)}>
-            <div className={s.coverWrap}>
-              <img
-                src={thumbUrl(m.thumbnailUrl)}
-                alt={m.title}
-                className={s.cover}
-                loading="lazy"
-                decoding="async"
-              />
-              {m.inLibrary && <span className={s.inLibraryBadge}>Saved</span>}
-            </div>
-            <p className={s.title}>{m.title}</p>
-          </button>
-        ))}
-        {filtered.length === 0 && (
-          <div className={s.empty}>No manga found for {genre}.</div>
-        )}
-      </div>
-      {ctx && (
-        <ContextMenu
-          x={ctx.x}
-          y={ctx.y}
-          items={buildCtxItems(ctx.manga)}
-          onClose={() => setCtx(null)}
-        />
-      )}
-    </div>
-  );
-}
-
-// ── Section ───────────────────────────────────────────────────────────────────
-
-function Section({
-  title,
-  icon,
-  onSeeAll,
-  loading,
-  children,
-}: {
-  title: string;
-  icon?: React.ReactNode;
-  onSeeAll?: () => void;
-  loading?: boolean;
-  children: React.ReactNode;
-}) {
-  return (
-    <div className={s.section}>
-      <div className={s.sectionHeader}>
-        <span className={s.sectionTitle}>
-          <span className={s.sectionTitleIcon}>
-            {icon}
-            {title}
-          </span>
-        </span>
-        {onSeeAll && (
-          <button className={s.seeAll} onClick={onSeeAll}>
-            See all <ArrowRight size={11} weight="light" />
-          </button>
-        )}
-      </div>
-      {loading ? <SkeletonRow /> : children}
-    </div>
-  );
-}
-
-// ── Main ──────────────────────────────────────────────────────────────────────
-
-type ExploreMode = "explore" | "sources";
-type DrillState = { type: "genre"; genre: string } | null;
-
-export default function Explore() {
-  const [mode, setMode] = useState<ExploreMode>("explore");
-  const [drill, setDrill] = useState<DrillState>(null);
-  const activeSource = useStore((s) => s.activeSource);
-
-  if (activeSource) return <SourceBrowse />;
-
-  if (drill?.type === "genre" && mode === "explore") {
-    return <DrillWrapper drill={drill} onBack={() => setDrill(null)} />;
-  }
-
-  return (
-    <div className={s.root}>
-      <div className={s.header}>
-        <div className={s.headerLeft}>
-          <h1 className={s.heading}>Explore</h1>
-          <div className={s.tabs}>
-            <button
-              className={[s.tab, mode === "explore" ? s.tabActive : ""].join(" ").trim()}
-              onClick={() => setMode("explore")}
-            >
-              <Compass size={11} weight="bold" />
-              Explore
-            </button>
-            <button
-              className={[s.tab, mode === "sources" ? s.tabActive : ""].join(" ").trim()}
-              onClick={() => setMode("sources")}
-            >
-              <List size={11} weight="bold" />
-              Sources
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {mode === "explore" ? <ExploreFeed onDrill={setDrill} /> : <SourceList />}
-    </div>
-  );
-}
-
-// ── Drill wrapper ─────────────────────────────────────────────────────────────
-
-function DrillWrapper({ drill, onBack }: { drill: DrillState; onBack: () => void }) {
-  const [allManga, setAllManga] = useState<Manga[]>([]);
-  const [sourceManga, setSourceManga] = useState<Manga[]>([]);
-  const setActiveManga = useStore((s) => s.setActiveManga);
-  const setNavPage = useStore((s) => s.setNavPage);
-  const settings = useStore((s) => s.settings);
-
-  useEffect(() => {
-    Promise.all([
-      gql<{ mangas: { nodes: Manga[] } }>(GET_ALL_MANGA),
-      gql<{ mangas: { nodes: Manga[] } }>(GET_LIBRARY),
-    ]).then(([all, lib]) => {
-      const libMap = new Map(lib.mangas.nodes.map((m) => [m.id, m]));
-      setAllManga(all.mangas.nodes.map((m) => libMap.get(m.id) ?? m));
-    }).catch(console.error);
-
-    const preferredLang = settings.preferredExtensionLang || "en";
-    gql<{ sources: { nodes: Source[] } }>(GET_SOURCES)
-      .then((d) => {
-        const all = d.sources.nodes.filter((src) => src.id !== "0");
-        const byName = new Map<string, Source[]>();
-        for (const src of all) {
-          if (!byName.has(src.name)) byName.set(src.name, []);
-          byName.get(src.name)!.push(src);
-        }
-        const picked: Source[] = [];
-        for (const group of byName.values()) {
-          const preferred = group.find((s) => s.lang === preferredLang);
-          picked.push(preferred ?? group.sort((a, b) => a.lang.localeCompare(b.lang))[0]);
-        }
-        return Promise.allSettled(
-          picked.map((src) =>
-            gql<{ fetchSourceManga: { mangas: Manga[] } }>(FETCH_SOURCE_MANGA, {
-              source: src.id, type: "POPULAR", page: 1, query: null,
-            }).then((d) => d.fetchSourceManga.mangas)
-          )
-        );
-      })
-      .then((results) => {
-        const seen = new Set<number>();
-        const merged: Manga[] = [];
-        for (const r of results) {
-          if (r.status === "fulfilled")
-            for (const m of r.value)
-              if (!seen.has(m.id)) { seen.add(m.id); merged.push(m); }
-        }
-        setSourceManga(merged);
-      })
-      .catch(console.error);
-  }, []);
-
-  if (!drill) return null;
-
-  return (
-    <GenreDrill
-      genre={drill.genre}
-      manga={allManga}
-      sourceManga={sourceManga}
-      onBack={onBack}
-      onOpen={(m) => { setActiveManga(m); setNavPage("library"); }}
-    />
-  );
-}
-
-// ── Explore feed ──────────────────────────────────────────────────────────────
-
-function ExploreFeed({ onDrill }: { onDrill: (d: DrillState) => void }) {
-  const [allManga, setAllManga] = useState<Manga[]>([]);
-  const [loadingLib, setLoadingLib] = useState(true);
-  // Popular row: deduped results from POPULAR fetch across all sources
-  const [popularManga, setPopularManga] = useState<Manga[]>([]);
-  const [loadingPopular, setLoadingPopular] = useState(true);
-  // Genre search results: genre → merged Manga[] from SEARCH per source
-  const [genreResults, setGenreResults] = useState<Map<string, Manga[]>>(new Map());
-  const [loadingGenres, setLoadingGenres] = useState(false);
-  const [sources, setSources] = useState<Source[]>([]);
-
-  const history = useStore((s) => s.history);
-  const settings = useStore((s) => s.settings);
-  const setActiveManga = useStore((s) => s.setActiveManga);
-  const setNavPage = useStore((s) => s.setNavPage);
-  const folders            = useStore((s) => s.settings.folders);
-  const addFolder          = useStore((s) => s.addFolder);
-  const assignMangaToFolder = useStore((s) => s.assignMangaToFolder);
-  const [ctx, setCtx]      = useState<{ x: number; y: number; manga: Manga } | null>(null);
-
-  function openCtx(e: React.MouseEvent, m: Manga) {
-    e.preventDefault();
-    e.stopPropagation();
-    setCtx({ x: e.clientX, y: e.clientY, manga: m });
-  }
-
-  function buildCtxItems(m: Manga): ContextMenuEntry[] {
-    return [
-      {
-        label: m.inLibrary ? "In Library" : "Add to library",
-        icon: <BookmarkSimple size={13} weight={m.inLibrary ? "fill" : "light"} />,
-        disabled: m.inLibrary,
-        onClick: () => gql(UPDATE_MANGA, { id: m.id, inLibrary: true })
-          .then(() => setActiveManga({ ...m, inLibrary: true }))
-          .catch(console.error),
-      },
-      ...(folders.length > 0 ? [
-        { separator: true } as ContextMenuEntry,
-        ...folders.map((f): ContextMenuEntry => ({
-          label: f.mangaIds.includes(m.id) ? `✓ ${f.name}` : f.name,
-          icon: <Folder size={13} weight={f.mangaIds.includes(m.id) ? "fill" : "light"} />,
-          onClick: () => assignMangaToFolder(f.id, m.id),
-        })),
-      ] : []),
-      { separator: true },
-      {
-        label: "New folder & add",
-        icon: <FolderSimplePlus size={13} weight="light" />,
-        onClick: () => {
-          const name = prompt("Folder name:");
-          if (name?.trim()) {
-            const id = addFolder(name.trim());
-            assignMangaToFolder(id, m.id);
-          }
-        },
-      },
-    ];
-  }
-
-  // Load library
-  useEffect(() => {
-    Promise.all([
-      gql<{ mangas: { nodes: Manga[] } }>(GET_ALL_MANGA),
-      gql<{ mangas: { nodes: Manga[] } }>(GET_LIBRARY),
-    ])
-      .then(([all, lib]) => {
-        const libMap = new Map(lib.mangas.nodes.map((m) => [m.id, m]));
-        setAllManga(all.mangas.nodes.map((m) => libMap.get(m.id) ?? m));
-      })
-      .catch(console.error)
-      .finally(() => setLoadingLib(false));
-  }, []);
-
-  // Load sources → fetch POPULAR from all (for popular row),
-  // then once we know frecency genres, fire SEARCH per genre per source
-  useEffect(() => {
-    const preferredLang = settings.preferredExtensionLang || "en";
-
-    gql<{ sources: { nodes: Source[] } }>(GET_SOURCES)
-      .then((d) => {
-        const all = d.sources.nodes.filter((src) => src.id !== "0");
-
-        // Dedupe by name, pick preferred lang
-        const byName = new Map<string, Source[]>();
-        for (const src of all) {
-          if (!byName.has(src.name)) byName.set(src.name, []);
-          byName.get(src.name)!.push(src);
-        }
-        const picked: Source[] = [];
-        for (const group of byName.values()) {
-          const preferred = group.find((s) => s.lang === preferredLang);
-          picked.push(preferred ?? group.sort((a, b) => a.lang.localeCompare(b.lang))[0]);
-        }
-
-        setSources(picked);
-        if (picked.length === 0) { setLoadingPopular(false); return; }
-
-        // Fetch POPULAR from all sources for the popular row
-        return Promise.allSettled(
-          picked.map((src) =>
-            gql<{ fetchSourceManga: { mangas: Manga[] } }>(FETCH_SOURCE_MANGA, {
-              source: src.id, type: "POPULAR", page: 1, query: null,
-            }).then((d) => d.fetchSourceManga.mangas)
-          )
-        ).then((results) => {
-          const seen = new Set<number>();
-          const merged: Manga[] = [];
-          for (const r of results)
-            if (r.status === "fulfilled")
-              for (const m of r.value)
-                if (!seen.has(m.id)) { seen.add(m.id); merged.push(m); }
-          setPopularManga(merged.slice(0, 30));
-          // Return picked sources for genre search phase
-          return picked;
-        });
-      })
-      .catch(console.error)
-      .finally(() => setLoadingPopular(false));
-  }, []);
-
-  const FOUNDATIONAL_GENRES = ["Action", "Romance", "Fantasy", "Adventure", "Comedy", "Drama", "Sci-fi", "Horror"];
-
-  const frecencyGenres = useMemo(() => {
-    const mangaScores = new Map<number, number>();
-    const mangaReadAt = new Map<number, number>();
-    for (const entry of history) {
-      mangaScores.set(entry.mangaId, (mangaScores.get(entry.mangaId) ?? 0) + 1);
-      if (entry.readAt > (mangaReadAt.get(entry.mangaId) ?? 0))
-        mangaReadAt.set(entry.mangaId, entry.readAt);
-    }
-    const genreWeights = new Map<string, number>();
-    const mangaMap = new Map(allManga.map((m) => [m.id, m]));
-    for (const [mangaId, count] of mangaScores.entries()) {
-      const score = frecencyScore(mangaReadAt.get(mangaId) ?? 0, count);
-      for (const genre of mangaMap.get(mangaId)?.genre ?? [])
-        genreWeights.set(genre, (genreWeights.get(genre) ?? 0) + score);
-    }
-    if (genreWeights.size === 0) {
-      allManga.filter((m) => m.inLibrary).forEach((m) =>
-        (m.genre ?? []).forEach((g) =>
-          genreWeights.set(g, (genreWeights.get(g) ?? 0) + 1)));
-    }
-    // If still empty (new user, no library), fall back to foundational genres
-    if (genreWeights.size === 0) {
-      return FOUNDATIONAL_GENRES.slice(0, 5);
-    }
-    return Array.from(genreWeights.entries())
-      .sort((a, b) => b[1] - a[1])
-      .slice(0, 3)          // top 3 genres only
-      .map(([g]) => g);
-  }, [allManga, history]);
-
-  // Fire genre searches once we have both genres and sources
-  useEffect(() => {
-    if (frecencyGenres.length === 0 || sources.length === 0) return;
-    setLoadingGenres(true);
-
-    // For each genre, search all sources concurrently, then merge results
-    // Cap to top 3 sources to limit requests (3 genres × 3 sources = 9 searches max)
-    const searchSources = sources.slice(0, 3);
-
-    Promise.allSettled(
-      frecencyGenres.map((genre) =>
-        Promise.allSettled(
-          searchSources.map((src) =>
-            gql<{ fetchSourceManga: { mangas: Manga[] } }>(FETCH_SOURCE_MANGA, {
-              source: src.id, type: "SEARCH", page: 1, query: genre,
-            }).then((d) => d.fetchSourceManga.mangas)
-          )
-        ).then((results) => {
-          const seen = new Set<number>();
-          const merged: Manga[] = [];
-          for (const r of results)
-            if (r.status === "fulfilled")
-              for (const m of r.value)
-                if (!seen.has(m.id)) { seen.add(m.id); merged.push(m); }
-          return { genre, mangas: merged.slice(0, 24) };
-        })
-      )
-    ).then((results) => {
-      const map = new Map<string, Manga[]>();
-      for (const r of results)
-        if (r.status === "fulfilled")
-          map.set(r.value.genre, r.value.mangas);
-      setGenreResults(map);
-    })
-    .catch(console.error)
-    .finally(() => setLoadingGenres(false));
-  }, [frecencyGenres.join(","), sources.map((s) => s.id).join(",")]);
-
-  function openManga(m: Manga) {
-    setActiveManga(m);
-    setNavPage("library");
-  }
-
-  // ── Continue reading ────────────────────────────────────────────────────
-  const continueReading = useMemo(() => {
-    const mangaMap = new Map(allManga.map((m) => [m.id, m]));
-    const seen = new Set<number>();
-    const result: { manga: Manga; chapterName: string; progress: number }[] = [];
-    for (const entry of history) {
-      if (seen.has(entry.mangaId)) continue;
-      seen.add(entry.mangaId);
-      const manga = mangaMap.get(entry.mangaId);
-      if (!manga) continue;
-      result.push({
-        manga,
-        chapterName: entry.chapterName,
-        progress: entry.pageNumber > 0 ? Math.min(entry.pageNumber / 20, 1) : 0,
-      });
-      if (result.length >= 12) break;
-    }
-    return result;
-  }, [history, allManga]);
-
-  // ── Recommended (frecency) ──────────────────────────────────────────────
-  const recommended = useMemo(() => {
-    if (allManga.length === 0 || frecencyGenres.length === 0) return [];
-    const continueIds = new Set(continueReading.map((r) => r.manga.id));
-    return allManga
-      .filter((m) => m.inLibrary && !continueIds.has(m.id) &&
-        frecencyGenres.some((g) => (m.genre ?? []).includes(g)))
-      .slice(0, 20);
-  }, [allManga, frecencyGenres, continueReading]);
-
-  const genresLoading = loadingLib || loadingGenres;
-
-  return (
-    <div className={s.body}>
-
-      {/* Continue Reading */}
-      {(continueReading.length > 0 || loadingLib) && (
-        <Section
-          title="Continue Reading"
-          icon={<BookOpen size={11} weight="bold" />}
-          loading={loadingLib}
-        >
-          <div className={s.row}>
-            {continueReading.map(({ manga, chapterName, progress }) => (
-              <MiniCard
-                key={manga.id}
-                manga={manga}
-                onClick={() => openManga(manga)}
-                onContextMenu={(e) => openCtx(e, manga)}
-                subtitle={chapterName}
-                progress={progress}
-              />
-            ))}
-            {Array.from({ length: GHOST_COUNT }).map((_, i) => (
-              <GhostCard key={`ghost-cr-${i}`} />
-            ))}
-          </div>
-        </Section>
-      )}
-
-      {/* Recommended */}
-      {(recommended.length > 0 || loadingLib) && (
-        <Section
-          title="Recommended for You"
-          icon={<Star size={11} weight="bold" />}
-          loading={loadingLib}
-        >
-          <div className={s.row}>
-            {recommended.map((m) => (
-              <MiniCard key={m.id} manga={m} onClick={() => openManga(m)} onContextMenu={(e) => openCtx(e, m)} />
-            ))}
-            {Array.from({ length: GHOST_COUNT }).map((_, i) => (
-              <GhostCard key={`ghost-rec-${i}`} />
-            ))}
-          </div>
-        </Section>
-      )}
-
-      {/* Popular across deduplicated sources */}
-      {(popularManga.length > 0 || loadingPopular) && (
-        <Section
-          title={
-            sources.length === 1
-              ? `Popular on ${sources[0].displayName}`
-              : sources.length > 1
-              ? `Popular across ${sources.length} sources`
-              : "Popular"
-          }
-          icon={<Fire size={11} weight="bold" />}
-          loading={loadingPopular}
-        >
-          {sources.length === 0 ? (
-            <div className={s.noSource}>No sources installed. Add extensions first.</div>
-          ) : (
-            <div className={s.row}>
-              {popularManga.map((m) => (
-                <MiniCard key={m.id} manga={m} onClick={() => openManga(m)} onContextMenu={(e) => openCtx(e, m)} />
-              ))}
-              {Array.from({ length: GHOST_COUNT }).map((_, i) => (
-                <GhostCard key={`ghost-pop-${i}`} />
-              ))}
-            </div>
-          )}
-        </Section>
-      )}
-
-      {/* Genre rows — searched from sources by genre name */}
-      {frecencyGenres.map((genre) => {
-        const items = genreResults.get(genre) ?? [];
-        const isLoading = genresLoading && items.length === 0;
-        if (!isLoading && items.length === 0) return null;
-        return (
-          <Section
-            key={genre}
-            title={genre}
-            onSeeAll={() => onDrill({ type: "genre", genre })}
-            loading={isLoading}
-          >
-            <div className={s.row}>
-              {items.map((m) => (
-                <MiniCard key={m.id} manga={m} onClick={() => openManga(m)} onContextMenu={(e) => openCtx(e, m)} />
-              ))}
-              {Array.from({ length: GHOST_COUNT }).map((_, i) => (
-                <GhostCard key={`ghost-${genre}-${i}`} />
-              ))}
-            </div>
-          </Section>
-        );
-      })}
-
-      {/* Empty state */}
-      {!loadingLib && !loadingPopular && !loadingGenres &&
-        continueReading.length === 0 && recommended.length === 0 &&
-        popularManga.length === 0 && frecencyGenres.every((g) => !genreResults.get(g)?.length) && (
-        <div className={s.empty}>
-          <span>Nothing to explore yet</span>
-          <span className={s.emptyHint}>
-            Add manga to your library or install sources to get started.
-          </span>
-        </div>
-      )}
-
-      {ctx && (
-        <ContextMenu
-          x={ctx.x}
-          y={ctx.y}
-          items={buildCtxItems(ctx.manga)}
-          onClose={() => setCtx(null)}
-        />
-      )}
-    </div>
-  );
-}

src/lib/cache.ts

@@ -0,0 +1,106 @@
+/**
+ * Session-level request cache.
+ *
+ * Key design decisions:
+ * - Stores the Promise itself — concurrent callers await the same fetch (no thundering herd).
+ * - On real errors the entry is evicted so the next call retries.
+ * - AbortErrors do NOT evict — the request was cancelled by the user, not failed.
+ *   This is critical: if we evicted on abort, rapid open/close would drain the browser's
+ *   connection pool (Chromium allows only 6 concurrent connections to the same origin).
+ * - Subscribers are notified when a key is explicitly cleared (for reactive invalidation).
+ */
+const store = new Map<string, Promise<unknown>>();
+const subs  = new Map<string, Set<() => void>>();
+
+export const cache = {
+  get<T>(key: string, fetcher: () => Promise<T>): Promise<T> {
+    if (!store.has(key)) {
+      store.set(key, fetcher().catch((err) => {
+        // Only evict on real failures, not user cancellations
+        if (err?.name !== "AbortError") store.delete(key);
+        return Promise.reject(err);
+      }));
+    }
+    return store.get(key) as Promise<T>;
+  },
+  has(key: string): boolean { return store.has(key); },
+  clear(key: string) {
+    store.delete(key);
+    subs.get(key)?.forEach((cb) => cb());
+  },
+  clearAll() {
+    store.clear();
+    subs.forEach((set) => set.forEach((cb) => cb()));
+  },
+  /** Subscribe to cache invalidation for a key. Returns unsubscribe fn. */
+  subscribe(key: string, cb: () => void): () => void {
+    if (!subs.has(key)) subs.set(key, new Set());
+    subs.get(key)!.add(cb);
+    return () => subs.get(key)?.delete(cb);
+  },
+};
+
+// ── Cache key constants — single source of truth, prevents mismatches ─────────
+export const CACHE_KEYS = {
+  LIBRARY:  "library",
+  SOURCES:  "sources",
+  POPULAR:  "popular",
+  GENRE:    (genre: string) => `genre:${genre}`,
+  MANGA:    (id: number)    => `manga:${id}`,
+  CHAPTERS: (id: number)    => `chapters:${id}`,
+} as const;
+
+// ── In-flight request deduplication (for non-cached calls) ────────────────────
+//
+// Some requests (chapter lists, manga detail) are NOT stored in the long-lived
+// cache but still get fired multiple times when a user rapidly opens/closes a
+// manga. This map deduplicates them so only one network round-trip is active at
+// a time per key — regardless of how many components request it simultaneously.
+//
+const inflight = new Map<string, Promise<unknown>>();
+
+export function deduped<T>(key: string, fetcher: () => Promise<T>): Promise<T> {
+  if (inflight.has(key)) return inflight.get(key) as Promise<T>;
+  const p = fetcher().finally(() => inflight.delete(key));
+  inflight.set(key, p);
+  return p;
+}
+
+// ── Source frecency helpers ────────────────────────────────────────────────────
+
+const FRECENCY_KEY = "moku-source-frecency";
+const MAX_FRECENCY_SOURCES = 4;
+
+type FrecencyMap = Record<string, number>;
+
+function loadFrecency(): FrecencyMap {
+  try {
+    const raw = localStorage.getItem(FRECENCY_KEY);
+    return raw ? JSON.parse(raw) : {};
+  } catch { return {}; }
+}
+
+function saveFrecency(map: FrecencyMap) {
+  try { localStorage.setItem(FRECENCY_KEY, JSON.stringify(map)); } catch {}
+}
+
+export function recordSourceAccess(sourceId: string) {
+  if (!sourceId || sourceId === "0") return;
+  const map = loadFrecency();
+  map[sourceId] = (map[sourceId] ?? 0) + 1;
+  saveFrecency(map);
+}
+
+export function getTopSources<T extends { id: string }>(sources: T[]): T[] {
+  const map = loadFrecency();
+  const withScore = sources.map((s) => ({ s, score: map[s.id] ?? 0 }));
+  const hasFrecency = withScore.some((x) => x.score > 0);
+
+  if (hasFrecency) {
+    return withScore
+      .sort((a, b) => b.score - a.score)
+      .slice(0, MAX_FRECENCY_SOURCES)
+      .map((x) => x.s);
+  }
+  return sources.slice(0, MAX_FRECENCY_SOURCES);
+}

src/lib/client.ts

@@ -1,7 +1,6 @@
 const DEFAULT_URL = "http://127.0.0.1:4567";
 
 function getServerUrl(): string {
-  // Read from persisted Zustand store if available, fall back to default
   try {
     const raw = localStorage.getItem("moku-store");
     if (raw) {
@@ -26,15 +25,55 @@ interface GQLResponse<T> {
   errors?: { message: string }[];
 }
 
-// Retry with exponential backoff — Suwayomi may not be ready on first load
+/** Sleep that resolves early if the signal is aborted — never blocks a cancelled request. */
-async function fetchWithRetry(url: string, init: RequestInit, retries = 8, delayMs = 500): Promise<Response> {
+function abortableSleep(ms: number, signal?: AbortSignal): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (signal?.aborted) { reject(new DOMException("Aborted", "AbortError")); return; }
+    const timer = setTimeout(resolve, ms);
+    signal?.addEventListener("abort", () => {
+      clearTimeout(timer);
+      reject(new DOMException("Aborted", "AbortError"));
+    }, { once: true });
+  });
+}
+
+/**
+ * Retry wrapper with these guarantees:
+ * 1. AbortErrors always propagate immediately — no retry, no delay.
+ * 2. Retry delays are abort-aware — closing a manga mid-delay doesn't hang.
+ * 3. If the signal is already aborted before we even start, we bail instantly.
+ */
+async function fetchWithRetry(
+  url: string,
+  init: RequestInit,
+  signal?: AbortSignal,
+  retries = 3,
+  delayMs = 300,
+): Promise<Response> {
+  // Bail immediately if already aborted before we start
+  if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
+
   for (let i = 0; i < retries; i++) {
+    // Check abort at the top of every iteration
+    if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
+
     try {
-      const res = await fetch(url, init);
+      const res = await fetch(url, { ...init, signal });
+
+      // Check abort again — fetch can return a response even after abort in some runtimes
+      if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
+
       return res;
-    } catch (e) {
+    } catch (e: any) {
+      // Never retry aborted requests
+      const isAbort = e?.name === "AbortError" || signal?.aborted;
+      if (isAbort) throw new DOMException("Aborted", "AbortError");
+
+      // Last retry — give up
       if (i === retries - 1) throw e;
-      await new Promise((r) => setTimeout(r, delayMs * Math.pow(1.5, i)));
+
+      // Abort-aware delay between retries
+      await abortableSleep(delayMs * Math.pow(1.5, i), signal);
     }
   }
   throw new Error("unreachable");
@@ -42,23 +81,23 @@ async function fetchWithRetry(url: string, init: RequestInit, retries = 8, delay
 
 export async function gql<T>(
   query: string,
-  variables?: Record<string, unknown>
+  variables?: Record<string, unknown>,
+  signal?: AbortSignal,
 ): Promise<T> {
   const res = await fetchWithRetry(gqlUrl(), {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ query, variables }),
-  });
+  }, signal);
 
-  if (!res.ok) {
+  // Check abort before reading the body — avoids hanging on res.json() after cancel
-    throw new Error(`Suwayomi HTTP ${res.status}`);
+  if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
-  }
+  if (!res.ok) throw new Error(`Suwayomi HTTP ${res.status}`);
 
   const json: GQLResponse<T> = await res.json();
 
-  if (json.errors?.length) {
+  if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
-    throw new Error(json.errors[0].message);
+  if (json.errors?.length) throw new Error(json.errors[0].message);
-  }
 
   return json.data;
 }

src/lib/sourceUtils.ts

@@ -0,0 +1,46 @@
+import type { Source } from "./types";
+
+/**
+ * Deduplicates sources by name, preferring the given language.
+ * This prevents fetching MangaDex EN + MangaDex ES + MangaDex FR separately.
+ */
+export function dedupeSources(sources: Source[], preferredLang: string): Source[] {
+  const byName = new Map<string, Source[]>();
+  for (const src of sources) {
+    if (src.id === "0") continue;
+    if (!byName.has(src.name)) byName.set(src.name, []);
+    byName.get(src.name)!.push(src);
+  }
+  const picked: Source[] = [];
+  for (const group of byName.values()) {
+    const preferred = group.find((s) => s.lang === preferredLang);
+    picked.push(preferred ?? group.sort((a, b) => a.lang.localeCompare(b.lang))[0]);
+  }
+  return picked;
+}
+
+/**
+ * Deduplicates manga by title (case-insensitive), keeping the first occurrence.
+ * This eliminates the same series appearing from multiple sources in grids.
+ */
+export function dedupeMangaByTitle<T extends { id: number; title: string }>(items: T[]): T[] {
+  const seen = new Set<string>();
+  const out: T[] = [];
+  for (const m of items) {
+    const key = m.title.toLowerCase().trim();
+    if (!seen.has(key)) { seen.add(key); out.push(m); }
+  }
+  return out;
+}
+
+/**
+ * Deduplicates manga by id only (lossless — use when sources are already deduped).
+ */
+export function dedupeMangaById<T extends { id: number }>(items: T[]): T[] {
+  const seen = new Set<number>();
+  const out: T[] = [];
+  for (const m of items) {
+    if (!seen.has(m.id)) { seen.add(m.id); out.push(m); }
+  }
+  return out;
+}

src/store/index.ts

@@ -103,8 +103,14 @@ export const DEFAULT_SETTINGS: Settings = {
 interface Store {
   navPage: NavPage;
   setNavPage: (page: NavPage) => void;
+  genreFilter: string;
+  setGenreFilter: (genre: string) => void;
+  searchPrefill: string;
+  setSearchPrefill: (q: string) => void;
   activeManga: Manga | null;
   setActiveManga: (manga: Manga | null) => void;
+  previewManga: Manga | null;
+  setPreviewManga: (manga: Manga | null) => void;
   activeChapter: Chapter | null;
   activeChapterList: Chapter[];
   openReader: (chapter: Chapter, chapterList: Chapter[]) => void;
@@ -152,8 +158,14 @@ export const useStore = create<Store>()(
     (set, get) => ({
       navPage: "library",
       setNavPage: (navPage) => set({ navPage }),
+      genreFilter: "",
+      setGenreFilter: (genreFilter) => set({ genreFilter }),
+      searchPrefill: "",
+      setSearchPrefill: (searchPrefill) => set({ searchPrefill }),
       activeManga: null,
       setActiveManga: (activeManga) => set({ activeManga }),
+      previewManga: null,
+      setPreviewManga: (previewManga) => set({ previewManga }),
       activeChapter: null,
       activeChapterList: [],
       openReader: (chapter, chapterList) =>