Library
- {/* Built-in tabs */}
{(["library", "downloaded", "all"] as const).map((f) => (
))}
- {/* Folder tabs — only shown if the folder has showTab enabled */}
{folders.filter((f) => f.showTab).map((folder) => (
- {/* Tag filter panel */}
{allTags.length > 0 && (
{libraryTagFilter.length > 0 && (
)}
{allTags.map((tag) => {
@@ -264,13 +258,9 @@ export default function Library() {
return (
);
@@ -298,31 +288,47 @@ export default function Library() {
: "No manga found."}
) : (
- <>
-
- {visible.map((m) => (
- openCtx(e, m)}
- cropCovers={settings.libraryCropCovers}
- />
- ))}
-
- {hasMore && (
-
-
)}
+
{ctx && (
;
+}
+
+const GHOST_COUNT = 3;
+
+// ── Skeleton row ──────────────────────────────────────────────────────────────
+
+function SkeletonRow({ count = 8 }: { count?: number }) {
+ return (
+
+ {Array.from({ length: count }).map((_, i) => (
+
+ ))}
+
+ );
+}
+
+// ── Mini card ─────────────────────────────────────────────────────────────────
+
+const MiniCard = memo(function MiniCard({
+ manga,
+ onClick,
+ subtitle,
+ progress,
+}: {
+ manga: Manga;
+ onClick: () => void;
+ subtitle?: string;
+ progress?: number;
+}) {
+ return (
+
+ );
+});
+
+// ── Genre drill-down ──────────────────────────────────────────────────────────
+
+function GenreDrill({
+ genre,
+ manga,
+ sourceManga,
+ onBack,
+ onOpen,
+}: {
+ genre: string;
+ manga: Manga[];
+ sourceManga: Manga[];
+ onBack: () => void;
+ onOpen: (m: Manga) => void;
+}) {
+ const filtered = useMemo(() => {
+ const combined = new Map
();
+ [...manga, ...sourceManga]
+ .filter((m) => (m.genre ?? []).includes(genre))
+ .forEach((m) => combined.set(m.id, m));
+ return Array.from(combined.values());
+ }, [manga, sourceManga, genre]);
+
+ return (
+
+
+
+
{genre}
+
+
+ {filtered.map((m) => (
+
+ ))}
+ {filtered.length === 0 && (
+
No manga found for {genre}.
+ )}
+
+
+
+
+
+ {icon}
+ {title}
+
+
+ {onSeeAll && (
+
+ )}
+
+ {loading ?
: children}
+
+
+
+
Explore
+
+
+
+
+
+
+
+ {mode === "explore" ?
:
}
+
+
+ {/* Continue Reading */}
+ {(continueReading.length > 0 || loadingLib) && (
+
}
+ loading={loadingLib}
+ >
+
+ {continueReading.map(({ manga, chapterName, progress }) => (
+ openManga(manga)}
+ subtitle={chapterName}
+ progress={progress}
+ />
+ ))}
+ {Array.from({ length: GHOST_COUNT }).map((_, i) => (
+
+ ))}
+
+
+ )}
+
+ {/* Recommended */}
+ {(recommended.length > 0 || loadingLib) && (
+
}
+ loading={loadingLib}
+ >
+
+ {recommended.map((m) => (
+ openManga(m)} />
+ ))}
+ {Array.from({ length: GHOST_COUNT }).map((_, i) => (
+
+ ))}
+
+
+ )}
+
+ {/* Popular across deduplicated sources */}
+ {(popularManga.length > 0 || loadingPopular) && (
+
1
+ ? `Popular across ${sources.length} sources`
+ : "Popular"
+ }
+ icon={}
+ loading={loadingPopular}
+ >
+ {sources.length === 0 ? (
+ No sources installed. Add extensions first.
+ ) : (
+
+ {popularManga.map((m) => (
+ openManga(m)} />
+ ))}
+ {Array.from({ length: GHOST_COUNT }).map((_, i) => (
+
+ ))}
+
+ )}
+
+ )}
+
+ {/* 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 (
+
onDrill({ type: "genre", genre })}
+ loading={isLoading}
+ >
+
+ {items.map((m) => (
+ openManga(m)} />
+ ))}
+ {Array.from({ length: GHOST_COUNT }).map((_, i) => (
+
+ ))}
+
+
+ );
+ })}
+
+ {/* Empty state */}
+ {!loadingLib && !loadingPopular && !loadingGenres &&
+ continueReading.length === 0 && recommended.length === 0 &&
+ popularManga.length === 0 && frecencyGenres.every((g) => !genreResults.get(g)?.length) && (
+
+ Nothing to explore yet
+
+ Add manga to your library or install sources to get started.
+
+
+ )}
+