Fix: Bump Update for 0.5.1

PKGBUILD

@@ -1,5 +1,5 @@
 pkgname=moku
-pkgver=0.4.0
+pkgver=0.5.0
 pkgrel=1
 pkgdesc="Native Linux manga reader frontend for Suwayomi-Server"
 arch=('x86_64')

dev.moku.app.yml

@@ -181,7 +181,7 @@ modules:
         path: .
       - type: file
         path: packaging/frontend-dist.tar.gz
-        sha256: cb2f65bad39db8d7411b15383965812fdd02c02697431e4eb3f3f05281eac49d
+        sha256: a6b7b0f57210ea15b1a7ef580be9f89a667d647373abca4f34fe017a5ac8c850
       - packaging/cargo-sources.json
       - type: inline
         dest: src-tauri/.cargo

flake.nix

@@ -18,7 +18,7 @@
 
       perSystem = { system, lib, ... }:
         let
-          version = "0.4.1";
+          version = "0.5.1";
 
           pkgs = import inputs.nixpkgs {
             inherit system;
@@ -149,7 +149,7 @@ EOF
 
           bumpScript = pkgs.writeShellApplication {
             name = "moku-bump";
-            runtimeInputs = with pkgs; [ gnused coreutils git ];
+            runtimeInputs = with pkgs; [ gnused coreutils git rustToolchain ];
             text = ''
               [[ $# -lt 1 ]] && { echo "Usage: nix run .#bump -- <version>"; exit 1; }
               VERSION="$1"
@@ -160,6 +160,7 @@ EOF
                 "$REPO/src-tauri/Cargo.toml"
               sed -i "s/version = \"[^\"]*\";/version = \"$VERSION\";/g" \
                 "$REPO/flake.nix"
+              (cd "$REPO/src-tauri" && cargo generate-lockfile)
               echo "Bumped to $VERSION"
             '';
           };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "moku",
-  "version": "0.1.0",
+  "version": "0.5.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "moku"
-version = "0.4.1"
+version = "0.5.1"
 edition = "2021"
 
 [lib]

src-tauri/src/lib.rs

@@ -121,9 +121,31 @@ fn kill_tachidesk(app: &tauri::AppHandle) {
     }
 
     #[cfg(target_os = "windows")]
-    let _ = std::process::Command::new("taskkill")
+    {
-        .args(["/F", "/FI", "IMAGENAME eq java*"])
+        use std::os::windows::process::CommandExt;
-        .status();
+        const CREATE_NO_WINDOW: u32 = 0x08000000;
+
+        let _ = std::process::Command::new("taskkill")
+            .args(["/F", "/FI", "IMAGENAME eq java.exe"])
+            .creation_flags(CREATE_NO_WINDOW)
+            .status();
+
+        // Poll until no java.exe remains (up to ~3 s) so the installer can
+        // overwrite the JRE DLLs without hitting a sharing-violation error.
+        for _ in 0..30 {
+            let still_running = std::process::Command::new("tasklist")
+                .args(["/FI", "IMAGENAME eq java.exe", "/NH"])
+                .creation_flags(CREATE_NO_WINDOW)
+                .output()
+                .map(|o| String::from_utf8_lossy(&o.stdout).contains("java.exe"))
+                .unwrap_or(false);
+
+            if !still_running {
+                break;
+            }
+            std::thread::sleep(std::time::Duration::from_millis(100));
+        }
+    }
 
     #[cfg(not(target_os = "windows"))]
     let _ = std::process::Command::new("pkill")
@@ -131,6 +153,7 @@ fn kill_tachidesk(app: &tauri::AppHandle) {
         .status();
 }
 
+
 const DEFAULT_SERVER_CONF: &str = r#"server.ip = "127.0.0.1"
 server.port = 4567
 server.webUIEnabled = false

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Moku",
-  "version": "0.4.1",
+  "version": "0.5.1",
   "identifier": "dev.moku.app",
   "build": {
     "frontendDist": "../dist",

src/components/pages/Discover.svelte

@@ -2,11 +2,11 @@
   import { onDestroy } from "svelte";
   import { BookmarkSimple, FolderSimplePlus, Folder, Sparkle, ArrowsClockwise } from "phosphor-svelte";
   import { gql, thumbUrl } from "../../lib/client";
-  import { GET_SOURCES, FETCH_SOURCE_MANGA, UPDATE_MANGA } from "../../lib/queries";
+  import { GET_SOURCES, FETCH_SOURCE_MANGA, UPDATE_MANGA, GET_CATEGORIES, CREATE_CATEGORY, UPDATE_MANGA_CATEGORIES } from "../../lib/queries";
   import { cache, CACHE_KEYS } from "../../lib/cache";
   import { dedupeSources, dedupeMangaByTitle, dedupeMangaById } from "../../lib/util";
-  import { store, addFolder, assignMangaToFolder, setPreviewManga, clearDiscoverCache } from "../../store/state.svelte";
+  import { store, setPreviewManga, clearDiscoverCache } from "../../store/state.svelte";
-  import type { Manga, Source } from "../../lib/types";
+  import type { Manga, Source, Category } from "../../lib/types";
   import ContextMenu from "../shared/ContextMenu.svelte";
   import type { MenuEntry } from "../shared/ContextMenu.svelte";
   import SourceBrowse from "../shared/SourceBrowse.svelte";
@@ -48,6 +48,8 @@
 
   let activeCtrl: AbortController | null = null;
   let ctx: { x: number; y: number; manga: Manga } | null = $state(null);
+  let categories: Category[] = $state([]);
+  let catsLoaded             = false;
 
   const isLoading   = $derived(genreLoading || refreshing || (currentGenre === "All" && loadingLib));
   const visibleGrid = $derived(genreResults.get(currentGenre) ?? []);
@@ -253,6 +255,12 @@
   function openCtx(e: MouseEvent, m: Manga) {
     e.preventDefault(); e.stopPropagation();
     ctx = { x: e.clientX, y: e.clientY, manga: m };
+    if (!catsLoaded) {
+      catsLoaded = true;
+      gql<{ categories: { nodes: Category[] } }>(GET_CATEGORIES)
+        .then(d => { categories = d.categories.nodes.filter(c => c.id !== 0); })
+        .catch(console.error);
+    }
   }
 
   function buildCtxItems(m: Manga): MenuEntry[] {
@@ -266,20 +274,26 @@
             store.discoverLibraryIds = new Set([...store.discoverLibraryIds, m.id]);
           }).catch(console.error),
       },
-      ...(store.settings.folders.length > 0 ? [
+      ...(categories.length > 0 ? [
         { separator: true } as MenuEntry,
-        ...store.settings.folders.map(f => ({
+        ...categories.map(cat => ({
-          label: f.mangaIds.includes(m.id) ? `✓ ${f.name}` : f.name,
+          label: (cat.mangas?.nodes ?? []).some(x => x.id === m.id) ? `✓ ${cat.name}` : cat.name,
           icon: Folder,
-          onClick: () => assignMangaToFolder(f.id, m.id),
+          onClick: () => gql(UPDATE_MANGA_CATEGORIES, { mangaId: m.id, addTo: [cat.id], removeFrom: [] }).catch(console.error),
         })),
       ] : []),
       { separator: true },
       {
         label: "New folder & add", icon: FolderSimplePlus,
-        onClick: () => {
+        onClick: async () => {
           const n = prompt("Folder name:");
-          if (n?.trim()) { const id = addFolder(n.trim()); assignMangaToFolder(id, m.id); }
+          if (!n?.trim()) return;
+          const res = await gql<{ createCategory: { category: Category } }>(CREATE_CATEGORY, { name: n.trim() }).catch(console.error);
+          if (res) {
+            const cat = res.createCategory.category;
+            categories = [...categories, cat];
+            await gql(UPDATE_MANGA_CATEGORIES, { mangaId: m.id, addTo: [cat.id], removeFrom: [] }).catch(console.error);
+          }
         },
       },
     ];

src/components/pages/GenreDrillPage.svelte

@@ -2,11 +2,11 @@
   import { ArrowLeft, BookmarkSimple, FolderSimplePlus, Folder, CircleNotch } from "phosphor-svelte";
   import { untrack } from "svelte";
   import { gql, thumbUrl } from "../../lib/client";
-  import { GET_ALL_MANGA, GET_LIBRARY, GET_SOURCES, FETCH_SOURCE_MANGA, UPDATE_MANGA } from "../../lib/queries";
+  import { GET_ALL_MANGA, GET_LIBRARY, GET_SOURCES, FETCH_SOURCE_MANGA, UPDATE_MANGA, GET_CATEGORIES, CREATE_CATEGORY, UPDATE_MANGA_CATEGORIES } from "../../lib/queries";
   import { cache, CACHE_KEYS, getPageSet } from "../../lib/cache";
   import { dedupeSources, dedupeMangaById } from "../../lib/util";
-  import { store, addFolder, assignMangaToFolder, setGenreFilter, setPreviewManga, setNavPage } from "../../store/state.svelte";
+  import { store, setGenreFilter, setPreviewManga, setNavPage } from "../../store/state.svelte";
-  import type { Manga, Source } from "../../lib/types";
+  import type { Manga, Source, Category } from "../../lib/types";
   import ContextMenu, { type MenuEntry } from "../shared/ContextMenu.svelte";
 
   const PAGE_SIZE     = 50;
@@ -39,6 +39,8 @@
   let loadingMore            = $state(false);
   let visibleCount           = $state(PAGE_SIZE);
   let ctx: { x: number; y: number; manga: Manga } | null = $state(null);
+  let categories: Category[] = $state([]);
+  let catsLoaded             = false;
 
   const nextPageMap = new Map<string, number>();
   let sources: Source[] = $state([]);
@@ -143,19 +145,42 @@
     }
   }
 
+  function openCtx(e: MouseEvent, m: Manga) {
+    e.preventDefault();
+    ctx = { x: e.clientX, y: e.clientY, manga: m };
+    if (!catsLoaded) {
+      catsLoaded = true;
+      gql<{ categories: { nodes: Category[] } }>(GET_CATEGORIES)
+        .then(d => { categories = d.categories.nodes.filter(c => c.id !== 0); })
+        .catch(console.error);
+    }
+  }
+
   function buildCtxItems(m: Manga): MenuEntry[] {
     return [
       { label: m.inLibrary ? "In Library" : "Add to library", icon: BookmarkSimple, disabled: m.inLibrary,
         onClick: () => gql(UPDATE_MANGA, { id: m.id, inLibrary: true }).then(() => { sourceManga = sourceManga.map((x) => x.id === m.id ? { ...x, inLibrary: true } : x); cache.clear(CACHE_KEYS.LIBRARY); }).catch(console.error) },
-      ...(store.settings.folders.length > 0 ? [
+      ...(categories.length > 0 ? [
         { separator: true } as MenuEntry,
-        ...store.settings.folders.map((f): MenuEntry => ({
+        ...categories.map((cat): MenuEntry => ({
-          label: f.mangaIds.includes(m.id) ? `✓ ${f.name}` : f.name, icon: Folder,
+          label: (cat.mangas?.nodes ?? []).some(x => x.id === m.id) ? `✓ ${cat.name}` : cat.name, icon: Folder,
-          onClick: () => assignMangaToFolder(f.id, m.id),
+          onClick: () => gql(UPDATE_MANGA_CATEGORIES, { mangaId: m.id, addTo: [cat.id], removeFrom: [] }).catch(console.error),
         })),
       ] : []),
       { separator: true },
-      { label: "New folder & add", icon: FolderSimplePlus, onClick: () => { const name = prompt("Folder name:"); if (name?.trim()) { const id = addFolder(name.trim()); assignMangaToFolder(id, m.id); } } },
+      { label: "New folder & add", icon: FolderSimplePlus, onClick: async () => {
+        const name = prompt("Folder name:");
+        if (!name?.trim()) return;
+        const res = await gql<{ createCategory: { category: Category } }>(
+          CREATE_CATEGORY,
+          { name: name.trim() }
+        ).catch(console.error);
+        if (res) {
+          const cat = (res as any).createCategory.category;
+          categories = [...categories, cat];
+          await gql(UPDATE_MANGA_CATEGORIES, { mangaId: m.id, addTo: [cat.id], removeFrom: [] }).catch(console.error);
+        }
+      }},
     ];
   }
 
@@ -190,7 +215,7 @@
   {:else}
     <div class="grid">
       {#each visibleItems as m (m.id)}
-        <button class="card" onclick={() => setPreviewManga(m)} oncontextmenu={(e) => { e.preventDefault(); e.stopPropagation(); ctx = { x: e.clientX, y: e.clientY, manga: m }; }}>
+        <button class="card" onclick={() => setPreviewManga(m)} oncontextmenu={(e) => { e.stopPropagation(); openCtx(e, m); }}>
           <div class="cover-wrap">
             <img src={thumbUrl(m.thumbnailUrl)} alt={m.title} class="cover" loading="lazy" decoding="async" />
             {#if m.inLibrary}<span class="in-library-badge">Saved</span>{/if}

src/components/pages/Home.svelte

@@ -2,11 +2,11 @@
   import { onMount, untrack } from "svelte";
   import { Play, ArrowRight, ArrowLeft, BookOpen, Clock, Fire, TrendUp, CalendarBlank, CheckCircle, PushPin, X as XIcon, MagnifyingGlass, ListBullets } from "phosphor-svelte";
   import { gql, thumbUrl } from "../../lib/client";
-  import { GET_LIBRARY, GET_CHAPTERS, GET_MANGA } from "../../lib/queries";
+  import { GET_LIBRARY, GET_CHAPTERS, GET_MANGA, GET_CATEGORIES } from "../../lib/queries";
   import { cache, CACHE_KEYS } from "../../lib/cache";
-  import { store, openReader, COMPLETED_FOLDER_ID, setHeroSlot, setActiveManga, setPreviewManga, setNavPage, setGenreFilter } from "../../store/state.svelte";
+  import { store, openReader, setHeroSlot, setActiveManga, setPreviewManga, setNavPage, setGenreFilter } from "../../store/state.svelte";
   import type { HistoryEntry } from "../../store/state.svelte";
-  import type { Manga, Chapter } from "../../lib/types";
+  import type { Manga, Chapter, Category } from "../../lib/types";
 
   function timeAgo(ts: number): string {
     const diff = Date.now() - ts, m = Math.floor(diff / 60000);
@@ -30,20 +30,31 @@
 
   function focusEl(node: HTMLElement) { node.focus(); }
 
-  let libraryManga:   Manga[]  = $state([]);
+  let libraryManga:       Manga[]            = $state([]);
-  let extraManga:     Manga[]  = $state([]);
+  let extraManga:         Manga[]            = $state([]);
-  let loadingLibrary: boolean  = $state(true);
+  let loadingLibrary:     boolean            = $state(true);
+  let completedCategory:  Category | null    = $state(null);
 
   onMount(() => {
     loadLibrary();
   });
 
   function loadLibrary() {
-    cache.get(CACHE_KEYS.LIBRARY, () =>
+    const libraryP  = cache.get(CACHE_KEYS.LIBRARY, () =>
       gql<{ mangas: { nodes: Manga[] } }>(GET_LIBRARY).then(d => d.mangas.nodes)
-    ).then(m => { libraryManga = m; fetchExtraCompleted(m); })
+    );
-     .catch(console.error)
+    const categoriesP = gql<{ categories: { nodes: Category[] } }>(GET_CATEGORIES)
-     .finally(() => loadingLibrary = false);
+      .then(d => d.categories.nodes.find(c => c.name === "Completed") ?? null)
+      .catch(() => null);
+
+    Promise.all([libraryP, categoriesP])
+      .then(([m, completed]) => {
+        libraryManga      = m;
+        completedCategory = completed;
+        fetchExtraCompleted(m, completed);
+      })
+      .catch(console.error)
+      .finally(() => loadingLibrary = false);
   }
 
   // Re-fetch library and reset hero chapters whenever the reader closes,
@@ -59,8 +70,8 @@
     loadLibrary();
   });
 
-  async function fetchExtraCompleted(library: Manga[]) {
+  async function fetchExtraCompleted(library: Manga[], completed: Category | null) {
-    const completedIds = store.settings.folders.find(f => f.id === COMPLETED_FOLDER_ID)?.mangaIds ?? [];
+    const completedIds = completed?.mangas?.nodes.map(m => m.id) ?? [];
     const missingIds = completedIds.filter(id => !library.some(m => m.id === id));
     if (!missingIds.length) return;
     const results = await Promise.allSettled(missingIds.map(id => gql<{ manga: Manga }>(GET_MANGA, { id }).then(d => d.manga)));
@@ -206,7 +217,7 @@
   function pinManga(m: Manga) { if (pickerSlotIndex !== null) { setHeroSlot(pickerSlotIndex, m.id); closePicker(); } }
   function unpinSlot(i: 1|2|3) { setHeroSlot(i, null); }
 
-  const completedIds   = $derived(store.settings.folders.find(f => f.id === COMPLETED_FOLDER_ID)?.mangaIds ?? []);
+  const completedIds   = $derived(completedCategory?.mangas?.nodes.map(m => m.id) ?? []);
   const completedPool  = $derived([...libraryManga, ...extraManga.filter(m => !libraryManga.some(l => l.id === m.id))]);
   const completedManga = $derived(completedIds.length > 0 ? completedPool.filter(m => completedIds.includes(m.id)).slice(0, 20) : []);
   const recentHistory  = $derived(store.history.slice(0, 6));

src/components/pages/Library.svelte

@@ -1,40 +1,151 @@
 <script lang="ts">
   import { onMount, untrack } from "svelte";
-  import { MagnifyingGlass, Books, DownloadSimple, Folder, FolderSimplePlus, Trash } from "phosphor-svelte";
+  import { MagnifyingGlass, Books, DownloadSimple, Folder, FolderSimplePlus, Trash, Star, CheckSquare, X, ArrowSquareOut } from "phosphor-svelte";
   import { gql, thumbUrl } from "../../lib/client";
-  import { GET_LIBRARY, GET_MANGA, UPDATE_MANGA, GET_CHAPTERS, DELETE_DOWNLOADED_CHAPTERS, DEQUEUE_DOWNLOAD } from "../../lib/queries";
+  import { GET_CATEGORIES, GET_LIBRARY, UPDATE_MANGA, GET_CHAPTERS, DELETE_DOWNLOADED_CHAPTERS, DEQUEUE_DOWNLOAD, CREATE_CATEGORY, UPDATE_MANGA_CATEGORIES, UPDATE_CATEGORY_ORDER } from "../../lib/queries";
   import { cache, CACHE_KEYS, CACHE_GROUPS, DEFAULT_TTL_MS } from "../../lib/cache";
   import { dedupeMangaById, dedupeMangaByTitle } from "../../lib/util";
-  import { store, setActiveManga, setLibraryFilter } from "../../store/state.svelte";
+  import { store, setLibraryFilter, checkAndMarkCompleted as storeCheckAndMarkCompleted, updateSettings, setCategories } from "../../store/state.svelte";
-  import { addFolder, assignMangaToFolder, removeMangaFromFolder, getMangaFolders } from "../../store/state.svelte";
+  import type { Manga, Category, Chapter } from "../../lib/types";
-  import { COMPLETED_FOLDER_ID } from "../../store/state.svelte";
-  import type { Manga, Chapter } from "../../lib/types";
   import ContextMenu, { type MenuEntry } from "../shared/ContextMenu.svelte";
 
-  const CARD_MIN_W = 130;
+  const CARD_MIN_W     = 130;
-  const CARD_GAP   = 16;
+  const CARD_GAP       = 16;
+  const COMPLETED_NAME = "Completed";
 
-  let allManga:        Manga[]     = $state([]);
+  // Drag type discriminators (tab reorder only — manga cards no longer use drag).
-  let extraManga:      Manga[]     = $state([]); // non-library manga needed for folders (e.g. completed)
+  const DT_TAB = "application/x-moku-tab";
-  let loading:         boolean     = $state(true);
-  let error:           string|null = $state(null);
-  let retryCount:      number      = $state(0);
-  let search:          string      = $state("");
-  let renderVisible:   number      = $state(0);
-  let scrollEl:        HTMLDivElement;
-  let containerWidth:  number      = $state(800);
-  let ctx:  { x: number; y: number; manga: Manga } | null = $state(null);
-  let emptyCtx: { x: number; y: number } | null           = $state(null);
 
-  let prevChapterId: number | null = null;
+  let activeDragKind: "tab" | null = $state(null);
+  let dragInsertIdx:  number       = $state(-1);
 
-  $effect(() => {
+  let allManga:       Manga[]      = $state([]);
-    const wasOpen = prevChapterId !== null;
+  let loading:        boolean      = $state(true);
-    prevChapterId = store.activeChapter?.id ?? null;
+  let error:          string|null  = $state(null);
-    if (wasOpen && !store.activeChapter) cache.clear(CACHE_KEYS.LIBRARY);
+  let retryCount:     number       = $state(0);
-  });
+  let search:         string       = $state("");
+  let renderVisible:  number       = $state(0);
+  let scrollEl:       HTMLDivElement;
+  let containerWidth: number       = $state(800);
+  let ctx:     { x: number; y: number; manga: Manga } | null = $state(null);
+  let emptyCtx:{ x: number; y: number } | null               = $state(null);
 
-  function fetchLibrary() {
+  // ── Multi-select ──────────────────────────────────────────────────────────
+
+  let selectedIds:   Set<number> = $state(new Set());
+  let selectMode:    boolean     = $state(false);
+  let bulkWorking:   boolean     = $state(false);
+  // Which folder-move popup is open (shows inline folder list)
+  let bulkMoveOpen:  boolean     = $state(false);
+
+  function enterSelectMode(id?: number) {
+    selectMode = true;
+    if (id !== undefined) selectedIds = new Set([id]);
+  }
+
+  function exitSelectMode() {
+    selectMode  = false;
+    selectedIds = new Set();
+    bulkMoveOpen = false;
+  }
+
+  function toggleSelect(id: number) {
+    const next = new Set(selectedIds);
+    if (next.has(id)) next.delete(id); else next.add(id);
+    selectedIds = next;
+    if (next.size === 0) exitSelectMode();
+  }
+
+  function selectAll() {
+    selectedIds = new Set(visibleManga.map(m => m.id));
+  }
+
+  // Long-press to enter select mode on touch devices
+  let longPressTimer: ReturnType<typeof setTimeout> | null = null;
+  function onCardPointerDown(e: PointerEvent, m: Manga) {
+    if (e.button !== 0) return; // only primary
+    longPressTimer = setTimeout(() => {
+      longPressTimer = null;
+      enterSelectMode(m.id);
+    }, 500);
+  }
+  function onCardPointerUp() {
+    if (longPressTimer) { clearTimeout(longPressTimer); longPressTimer = null; }
+  }
+  function onCardPointerLeave() {
+    if (longPressTimer) { clearTimeout(longPressTimer); longPressTimer = null; }
+  }
+
+  function onCardClick(e: MouseEvent, m: Manga) {
+    if (selectMode) {
+      toggleSelect(m.id);
+      return;
+    }
+    // Cmd/Ctrl+click or Shift+click enters select mode
+    if (e.metaKey || e.ctrlKey || e.shiftKey) {
+      e.preventDefault();
+      enterSelectMode(m.id);
+      return;
+    }
+    store.activeManga = m;
+  }
+
+  // ── Bulk mutations ────────────────────────────────────────────────────────
+
+  async function bulkMoveToCategory(cat: Category) {
+    bulkWorking  = true;
+    bulkMoveOpen = false;
+    try {
+      await Promise.all(
+        [...selectedIds].map(id => {
+          const manga = allManga.find(m => m.id === id);
+          if (!manga) return Promise.resolve();
+          return toggleMangaCategory(manga, cat);
+        })
+      );
+    } finally {
+      bulkWorking = false;
+      exitSelectMode();
+    }
+  }
+
+  async function bulkRemoveFromLibrary() {
+    bulkWorking = true;
+    try {
+      await Promise.all(
+        [...selectedIds].map(id => {
+          const manga = allManga.find(m => m.id === id);
+          if (!manga) return Promise.resolve();
+          return removeFromLibrary(manga);
+        })
+      );
+    } finally {
+      bulkWorking = false;
+      exitSelectMode();
+    }
+  }
+
+  // ── Completed category auto-create ────────────────────────────────────────
+
+  async function ensureCompletedCategory(cats: Category[]): Promise<Category[]> {
+    if (cats.some(c => c.name === COMPLETED_NAME)) return cats;
+    try {
+      const res = await gql<{ createCategory: { category: Category } }>(CREATE_CATEGORY, { name: COMPLETED_NAME });
+      return [...cats, res.createCategory.category];
+    } catch { return cats; }
+  }
+
+  // ── Data loading ──────────────────────────────────────────────────────────
+
+  async function reloadCategories() {
+    try {
+      const d = await gql<{ categories: { nodes: Category[] } }>(GET_CATEGORIES);
+      const cats = await ensureCompletedCategory(d.categories.nodes);
+      setCategories(cats);
+    } catch (e) { console.error(e); }
+  }
+
+  function loadLibrary() {
     return cache.get(
       CACHE_KEYS.LIBRARY,
       () => gql<{ mangas: { nodes: Manga[] } }>(GET_LIBRARY).then(d => d.mangas.nodes),
@@ -43,11 +154,16 @@
     );
   }
 
-  function loadData() {
+  async function loadData() {
-    fetchLibrary()
+    try {
-      .then(nodes => { allManga = dedupeMangaByTitle(dedupeMangaById(nodes), store.settings.mangaLinks); error = null; })
+      const [nodes] = await Promise.all([loadLibrary(), reloadCategories()]);
-      .catch(e => error = e.message)
+      allManga = dedupeMangaByTitle(dedupeMangaById(nodes), store.settings.mangaLinks);
-      .finally(() => loading = false);
+      error    = null;
+    } catch (e: any) {
+      error = e.message;
+    } finally {
+      loading = false;
+    }
   }
 
   $effect(() => {
@@ -57,42 +173,50 @@
     untrack(() => loadData());
   });
 
-  // Lazily fetch manga that are in a folder but not in the library (e.g. completed but removed from library)
-  $effect(() => {
-    const allIds   = new Set(allManga.map(m => m.id));
-    const missingIds = store.settings.folders
-      .flatMap(f => f.mangaIds)
-      .filter(id => !allIds.has(id));
-    if (!missingIds.length) return;
-    const toFetch = [...new Set(missingIds)].filter(id => !extraManga.some(m => m.id === id));
-    if (!toFetch.length) return;
-    untrack(() => {
-      Promise.all(
-        toFetch.map(id =>
-          cache.get(CACHE_KEYS.MANGA(id), () =>
-            gql<{ manga: Manga }>(GET_MANGA, { id }).then(d => d.manga)
-          ).catch(() => null)
-        )
-      ).then(results => {
-        const valid = results.filter(Boolean) as Manga[];
-        if (valid.length) extraManga = dedupeMangaById([...extraManga, ...valid]);
-      });
-    });
-  });
-
   $effect(() => { if (scrollEl) scrollEl.scrollTo({ top: 0 }); });
 
   $effect(() => {
-    const f = store.settings.folders.find(f => f.id === store.libraryFilter);
+    const f = store.libraryFilter;
-    if (f && !f.showTab) untrack(() => { store.libraryFilter = "library"; });
+    if (f === "library" || f === "downloaded") return;
+    const id = Number(f);
+    if (!store.categories.some(c => c.id === id)) {
+      untrack(() => { store.libraryFilter = "library"; });
+    }
   });
 
-  const isBuiltin = (f: string) => f === "library" || f === "downloaded";
+  // Exit select mode when the filter changes
+  $effect(() => { store.libraryFilter; untrack(() => exitSelectMode()); });
 
-  // All manga available for folder filtering — library + any extras fetched above
+  let prevChapterId: number | null = null;
-  const folderPool = $derived((() => {
+  $effect(() => {
-    const seen = new Set(allManga.map(m => m.id));
+    const wasOpen = prevChapterId !== null;
-    return [...allManga, ...extraManga.filter(m => !seen.has(m.id))];
+    prevChapterId = store.activeChapter?.id ?? null;
+    if (wasOpen && !store.activeChapter) {
+      cache.clear(CACHE_KEYS.LIBRARY);
+      untrack(() => loadData());
+    }
+  });
+
+  // ── Derived ───────────────────────────────────────────────────────────────
+
+  const visibleCategories = $derived((() => {
+    const defaultId = store.settings.defaultLibraryCategoryId ?? null;
+    return store.categories
+      .filter(c => c.id !== 0 && !(store.settings.hiddenCategoryIds ?? []).includes(c.id))
+      .sort((a, b) => {
+        if (a.id === defaultId) return -1;
+        if (b.id === defaultId) return  1;
+        return a.order - b.order;
+      });
+  })());
+
+  const categoryMangaMap = $derived((() => {
+    const map = new Map<number, Manga[]>();
+    for (const cat of store.categories) {
+      const nodes = cat.mangas?.nodes ?? [];
+      map.set(cat.id, nodes);
+    }
+    return map;
   })());
 
   const filtered = $derived((() => {
@@ -104,12 +228,9 @@
       const items = allManga.filter(m => (m.downloadCount ?? 0) > 0);
       return q ? items.filter(m => m.title.toLowerCase().includes(q)) : items;
     }
-    const folder = store.settings.folders.find(f => f.id === store.libraryFilter);
+    const id    = Number(store.libraryFilter);
-    if (folder) {
+    const items = categoryMangaMap.get(id) ?? [];
-      const items = folderPool.filter(m => folder.mangaIds.includes(m.id));
+    return q ? items.filter(m => m.title.toLowerCase().includes(q)) : items;
-      return q ? items.filter(m => m.title.toLowerCase().includes(q)) : items;
-    }
-    return [];
   })());
 
   const cols           = $derived(Math.max(1, Math.floor((containerWidth + CARD_GAP) / (CARD_MIN_W + CARD_GAP))));
@@ -119,18 +240,98 @@
 
   $effect(() => { filtered; untrack(() => { renderVisible = store.settings.renderLimit ?? 48; }); });
 
-  const counts = $derived({
+  const counts = $derived((() => {
-    library:    allManga.length,
+    const m: Record<string, number> = {
-    downloaded: allManga.filter(m => (m.downloadCount ?? 0) > 0).length,
+      library:    allManga.length,
-    ...store.settings.folders.reduce((a, f) => ({ ...a, [f.id]: folderPool.filter(m => f.mangaIds.includes(m.id)).length }), {} as Record<string, number>),
+      downloaded: allManga.filter(m => (m.downloadCount ?? 0) > 0).length,
-  });
+    };
+    for (const cat of visibleCategories) {
+      m[String(cat.id)] = (categoryMangaMap.get(cat.id) ?? []).length;
+    }
+    return m;
+  })());
 
   function loadMore() { renderVisible += store.settings.renderLimit ?? 48; }
 
+  // ── Drag: tab reorder ─────────────────────────────────────────────────────
+
+  let dragTabId:     number | null = $state(null);
+  let dragOverTabId: number | null = $state(null);
+  let dropTargetTabId: number | null = $state(null);
+
+  function onTabDragStart(e: DragEvent, cat: Category) {
+    activeDragKind = "tab";
+    dragTabId = cat.id;
+    e.dataTransfer!.effectAllowed = "move";
+    e.dataTransfer!.setData(DT_TAB, String(cat.id));
+    e.dataTransfer!.setData("text/plain", `tab:${cat.id}`);
+  }
+
+  function onTabDragOver(e: DragEvent, cat: Category, idx: number) {
+    if (activeDragKind !== "tab") return;
+    if (dragTabId === null || dragTabId === cat.id) return;
+    e.preventDefault();
+    e.dataTransfer!.dropEffect = "move";
+    dragOverTabId = cat.id;
+    dragInsertIdx = idx;
+  }
+
+  function onTabDragLeave() {
+    dragOverTabId = null;
+  }
+
+  async function onTabDrop(e: DragEvent, dropCat: Category) {
+    e.preventDefault();
+    dragOverTabId = null;
+    dragInsertIdx = -1;
+
+    if (activeDragKind !== "tab") return;
+    if (dragTabId === null || dragTabId === dropCat.id) { dragTabId = null; return; }
+
+    const dragId = dragTabId;
+    dragTabId = null;
+    activeDragKind = null;
+
+    const sorted = [...store.categories]
+      .filter(c => c.id !== 0)
+      .sort((a, b) => a.order - b.order);
+
+    const fromIdx = sorted.findIndex(c => c.id === dragId);
+    const toIdx   = sorted.findIndex(c => c.id === dropCat.id);
+    if (fromIdx < 0 || toIdx < 0) return;
+
+    const reordered = [...sorted];
+    const [moved]   = reordered.splice(fromIdx, 1);
+    reordered.splice(toIdx, 0, moved);
+    const withNewOrder = reordered.map((c, i) => ({ ...c, order: i + 1 }));
+    setCategories(store.categories.map(c => withNewOrder.find(u => u.id === c.id) ?? c));
+
+    const newPos = toIdx + 1;
+    try {
+      await gql<{ updateCategoryOrder: { categories: Category[] } }>(
+        UPDATE_CATEGORY_ORDER,
+        { id: dragId, position: newPos },
+      );
+    } catch (err) {
+      console.error("Tab reorder failed:", err);
+      await reloadCategories();
+    }
+  }
+
+  function onTabDragEnd() {
+    activeDragKind = null;
+    dragTabId = null;
+    dragOverTabId = null;
+    dragInsertIdx = -1;
+  }
+
+  // ── Mutations ─────────────────────────────────────────────────────────────
+
   async function removeFromLibrary(manga: Manga) {
     await gql(UPDATE_MANGA, { id: manga.id, inLibrary: false }).catch(console.error);
     allManga = allManga.filter(m => m.id !== manga.id);
     cache.clearGroup(CACHE_GROUPS.LIBRARY);
+    await reloadCategories();
   }
 
   async function deleteAllDownloads(manga: Manga) {
@@ -144,32 +345,110 @@
     } catch (e) { console.error(e); }
   }
 
-  function openCtx(e: MouseEvent, m: Manga) { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, manga: m }; }
+  async function toggleMangaCategory(manga: Manga, cat: Category) {
+    const inCat = (categoryMangaMap.get(cat.id) ?? []).some(m => m.id === manga.id);
+    setCategories(store.categories.map(c => {
+      if (c.id !== cat.id || !c.mangas) return c;
+      const nodes = inCat
+        ? c.mangas.nodes.filter(m => m.id !== manga.id)
+        : [...c.mangas.nodes, manga];
+      return { ...c, mangas: { nodes } };
+    }));
+    try {
+      await gql(UPDATE_MANGA_CATEGORIES, {
+        mangaId:    manga.id,
+        addTo:      inCat ? [] : [cat.id],
+        removeFrom: inCat ? [cat.id] : [],
+      });
+      await reloadCategories();
+    } catch (e) {
+      console.error(e);
+      await reloadCategories();
+    }
+  }
+
+  async function createAndAssign(manga: Manga) {
+    const name = prompt("Folder name:");
+    if (!name?.trim()) return;
+    try {
+      const res = await gql<{ createCategory: { category: Category } }>(CREATE_CATEGORY, { name: name.trim() });
+      const cat = res.createCategory.category;
+      await gql(UPDATE_MANGA_CATEGORIES, { mangaId: manga.id, addTo: [cat.id], removeFrom: [] });
+      await reloadCategories();
+    } catch (e) { console.error(e); }
+  }
+
+  // ── Context menu ──────────────────────────────────────────────────────────
+
+  function openCtx(e: MouseEvent, m: Manga) {
+    if (selectMode) { toggleSelect(m.id); return; }
+    e.preventDefault();
+    ctx = { x: e.clientX, y: e.clientY, manga: m };
+  }
 
   function buildCtxItems(m: Manga): MenuEntry[] {
-    const mangaFolders = getMangaFolders(m.id);
+    const catEntries: MenuEntry[] = visibleCategories.map(cat => {
-    const folderEntries: MenuEntry[] = store.settings.folders.map(f => {
+      const inCat = (categoryMangaMap.get(cat.id) ?? []).some(x => x.id === m.id);
-      const inFolder = mangaFolders.some(mf => mf.id === f.id);
+      return {
-      return { label: inFolder ? `Remove from ${f.name}` : `Add to ${f.name}`, icon: Folder, onClick: () => inFolder ? removeMangaFromFolder(f.id, m.id) : assignMangaToFolder(f.id, m.id) };
+        label: inCat ? `Remove from ${cat.name}` : `Add to ${cat.name}`,
+        icon:  Folder,
+        onClick: () => toggleMangaCategory(m, cat),
+      };
     });
     return [
       { label: m.inLibrary ? "Remove from library" : "Add to library", icon: Books, onClick: () => m.inLibrary ? removeFromLibrary(m) : gql(UPDATE_MANGA, { id: m.id, inLibrary: true }).then(() => { allManga = allManga.map(x => x.id === m.id ? { ...x, inLibrary: true } : x); cache.clear(CACHE_KEYS.LIBRARY); }).catch(console.error) },
       { label: "Delete all downloads", icon: Trash, danger: true, disabled: !(m.downloadCount && m.downloadCount > 0), onClick: () => deleteAllDownloads(m) },
-      ...(folderEntries.length ? [{ separator: true } as MenuEntry, ...folderEntries] : []),
       { separator: true },
-      { label: "New folder", icon: FolderSimplePlus, onClick: () => { const name = prompt("Folder name:"); if (name?.trim()) { const id = addFolder(name.trim()); assignMangaToFolder(id, m.id); } } },
+      { label: "Select this manga", icon: CheckSquare, onClick: () => enterSelectMode(m.id) },
+      ...(catEntries.length ? [{ separator: true } as MenuEntry, ...catEntries] : []),
+      { separator: true },
+      { label: "New folder", icon: FolderSimplePlus, onClick: () => createAndAssign(m) },
     ];
   }
 
   function buildEmptyCtx(): MenuEntry[] {
-    return [{ label: "New folder", icon: FolderSimplePlus, onClick: () => { const name = prompt("Folder name:"); if (name?.trim()) addFolder(name.trim()); } }];
+    return [{
+      label: "New folder",
+      icon:  FolderSimplePlus,
+      onClick: async () => {
+        const name = prompt("Folder name:");
+        if (!name?.trim()) return;
+        try {
+          await gql(CREATE_CATEGORY, { name: name.trim() });
+          await reloadCategories();
+        } catch (e) { console.error(e); }
+      },
+    }];
+  }
+
+  // ── Completed auto-assign ─────────────────────────────────────────────────
+
+  export async function checkAndMarkCompleted(mangaId: number, chaps: Chapter[]) {
+    await storeCheckAndMarkCompleted(mangaId, chaps, store.categories, gql, UPDATE_MANGA_CATEGORIES, UPDATE_MANGA);
+    await reloadCategories();
   }
 
   onMount(() => {
     const ro = new ResizeObserver(([e]) => containerWidth = e.contentRect.width);
     ro.observe(scrollEl);
-    const unsub = cache.subscribe(CACHE_KEYS.LIBRARY, loadData);
+    const unsub = cache.subscribe(CACHE_KEYS.LIBRARY, () => loadData());
-    return () => { ro.disconnect(); unsub(); };
+
+    const defaultId = store.settings.defaultLibraryCategoryId;
+    if (defaultId && store.libraryFilter === "library") {
+      store.libraryFilter = String(defaultId);
+    }
+
+    // Escape key exits select mode
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape" && selectMode) exitSelectMode();
+      if ((e.key === "a" && (e.metaKey || e.ctrlKey)) && selectMode) {
+        e.preventDefault();
+        selectAll();
+      }
+    }
+    window.addEventListener("keydown", onKeyDown);
+
+    return () => { ro.disconnect(); unsub(); window.removeEventListener("keydown", onKeyDown); };
   });
 </script>
 
@@ -223,12 +502,36 @@
               <span class="tab-count">{counts[f] ?? 0}</span>
             </button>
           {/each}
-          {#each store.settings.folders.filter(f => f.showTab) as folder}
+          {#each visibleCategories as cat, idx}
-            <button class="tab" class:active={store.libraryFilter === folder.id} onclick={() => store.libraryFilter = folder.id}>
+            {@const isDefault = (store.settings.defaultLibraryCategoryId ?? null) === cat.id}
-              <Folder size={11} weight="bold" />
+            {#if dragInsertIdx === idx && activeDragKind === "tab"}
-              {folder.name}
+              <div class="tab-insert-bar" aria-hidden="true"></div>
-              <span class="tab-count">{counts[folder.id] ?? 0}</span>
+            {/if}
+            <button
+              class="tab"
+              class:active={store.libraryFilter === String(cat.id)}
+              class:tab-dragging={dragTabId === cat.id}
+              class:tab-drop-target={dropTargetTabId === cat.id}
+              class:tab-default={isDefault}
+              draggable="true"
+              onclick={() => store.libraryFilter = String(cat.id)}
+              ondragstart={(e) => onTabDragStart(e, cat)}
+              ondragover={(e) => onTabDragOver(e, cat, idx)}
+              ondragleave={onTabDragLeave}
+              ondrop={(e) => onTabDrop(e, cat)}
+              ondragend={onTabDragEnd}
+            >
+              {#if isDefault}
+                <Star size={11} weight="fill" style="color:var(--accent-fg)" />
+              {:else}
+                <Folder size={11} weight="bold" />
+              {/if}
+              {cat.name}
+              <span class="tab-count">{counts[String(cat.id)] ?? 0}</span>
             </button>
+            {#if dragInsertIdx === idx + 1 && activeDragKind === "tab" && idx === visibleCategories.length - 1}
+              <div class="tab-insert-bar" aria-hidden="true"></div>
+            {/if}
           {/each}
         </div>
       </div>
@@ -238,6 +541,53 @@
       </div>
     </div>
 
+    <!-- ── Selection toolbar ───────────────────────────────────────────────── -->
+    {#if selectMode}
+      <div class="select-bar">
+        <div class="select-bar-left">
+          <button class="sel-btn sel-cancel" onclick={exitSelectMode} title="Cancel (Esc)">
+            <X size={13} weight="bold" />
+          </button>
+          <span class="sel-count">{selectedIds.size} selected</span>
+          <button class="sel-btn sel-all" onclick={selectAll} title="Select all (⌘A)">
+            Select all
+          </button>
+        </div>
+        <div class="select-bar-right">
+          {#if visibleCategories.length}
+            <div class="bulk-move-wrap">
+              <button
+                class="sel-btn sel-move"
+                disabled={selectedIds.size === 0 || bulkWorking}
+                onclick={() => bulkMoveOpen = !bulkMoveOpen}
+              >
+                <Folder size={13} weight="bold" />
+                Move to folder
+              </button>
+              {#if bulkMoveOpen}
+                <div class="bulk-folder-list">
+                  {#each visibleCategories as cat}
+                    <button class="bulk-folder-item" onclick={() => bulkMoveToCategory(cat)}>
+                      <Folder size={11} weight="bold" />
+                      {cat.name}
+                    </button>
+                  {/each}
+                </div>
+              {/if}
+            </div>
+          {/if}
+          <button
+            class="sel-btn sel-remove"
+            disabled={selectedIds.size === 0 || bulkWorking}
+            onclick={bulkRemoveFromLibrary}
+          >
+            <Trash size={13} weight="bold" />
+            Remove
+          </button>
+        </div>
+      </div>
+    {/if}
+
     <div class="content">
     {#if loading}
       <div class="grid">
@@ -257,11 +607,32 @@
     {:else}
       <div class="grid" style="--cols:{cols}">
         {#each visibleManga as m (m.id)}
-          <button class="card" onclick={() => store.activeManga = m} oncontextmenu={(e) => openCtx(e, m)}>
+          {@const isSelected = selectedIds.has(m.id)}
+          <button
+            class="card"
+            class:card-selected={isSelected}
+            class:select-mode={selectMode}
+            onclick={(e) => onCardClick(e, m)}
+            oncontextmenu={(e) => openCtx(e, m)}
+            onpointerdown={(e) => onCardPointerDown(e, m)}
+            onpointerup={onCardPointerUp}
+            onpointerleave={onCardPointerLeave}
+          >
             <div class="cover-wrap">
-              <img src={thumbUrl(m.thumbnailUrl)} alt={m.title} class="cover" style="object-fit:{store.settings.libraryCropCovers ? 'cover' : 'contain'}" loading="lazy" decoding="async" />
+              <img src={thumbUrl(m.thumbnailUrl)} alt={m.title} class="cover" style="object-fit:{store.settings.libraryCropCovers ? 'cover' : 'contain'}" loading="lazy" decoding="async" draggable="false" />
               {#if m.downloadCount}<span class="badge-dl">{m.downloadCount}</span>{/if}
               {#if m.unreadCount}<span class="badge-unread">{m.unreadCount}</span>{/if}
+              {#if selectMode}
+                <div class="select-overlay" aria-hidden="true">
+                  <div class="select-check" class:checked={isSelected}>
+                    {#if isSelected}
+                      <CheckSquare size={20} weight="fill" />
+                    {:else}
+                      <div class="select-check-empty"></div>
+                    {/if}
+                  </div>
+                </div>
+              {/if}
             </div>
             <p class="title">{m.title}</p>
           </button>
@@ -297,23 +668,62 @@
   .header-left { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
   .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; }
   .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); color: var(--text-faint); white-space: nowrap; transition: background var(--t-base), color var(--t-base); }
+  .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); color: var(--text-faint); white-space: nowrap; transition: background var(--t-base), color var(--t-base); cursor: grab; }
   .tab:hover { color: var(--text-muted); }
   .tab.active { background: var(--accent-muted); color: var(--accent-fg); border: 1px solid var(--accent-dim); }
+  .tab-default { color: var(--text-muted); }
+  .tab-dragging { opacity: 0.4; cursor: grabbing; }
+  .tab-drop-target { background: var(--accent-muted) !important; color: var(--accent-fg) !important; outline: 1px dashed var(--accent); }
+  .tab-insert-bar { width: 2px; height: 22px; background: var(--accent); border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 6px var(--accent); pointer-events: none; }
   .tab-count { font-size: var(--text-2xs); opacity: 0.6; }
   .search-wrap { position: relative; display: flex; align-items: center; }
   .search-wrap :global(.search-icon) { position: absolute; left: 10px; color: var(--text-faint); pointer-events: none; }
   .search { background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: 5px 10px 5px 28px; color: var(--text-primary); font-size: var(--text-sm); width: 180px; outline: none; transition: border-color var(--t-base); }
   .search::placeholder { color: var(--text-faint); }
   .search:focus { border-color: var(--border-strong); }
+
+  /* ── Selection toolbar ──────────────────────────────────────────────────── */
+  .select-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-6); background: var(--bg-raised); border-bottom: 1px solid var(--accent-dim); flex-shrink: 0; animation: fadeIn 0.1s ease both; }
+  .select-bar-left { display: flex; align-items: center; gap: var(--sp-3); }
+  .select-bar-right { display: flex; align-items: center; gap: var(--sp-2); position: relative; }
+  .sel-count { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--accent-fg); letter-spacing: var(--tracking-wide); }
+  .sel-btn { 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: 1px solid var(--border-dim); background: var(--bg-base); color: var(--text-muted); cursor: pointer; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); white-space: nowrap; }
+  .sel-btn:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border-strong); }
+  .sel-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+  .sel-cancel { border-color: transparent; background: transparent; }
+  .sel-cancel:hover { background: var(--bg-raised); border-color: var(--border-dim); }
+  .sel-move { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
+  .sel-move:hover:not(:disabled) { background: var(--accent-dim); }
+  .sel-remove { color: var(--color-error, #e05c5c); border-color: color-mix(in srgb, var(--color-error, #e05c5c) 30%, transparent); }
+  .sel-remove:hover:not(:disabled) { background: color-mix(in srgb, var(--color-error, #e05c5c) 12%, transparent); }
+  .sel-all { border-color: transparent; background: transparent; }
+
+  /* Bulk folder dropdown */
+  .bulk-move-wrap { position: relative; }
+  .bulk-folder-list { position: absolute; top: calc(100% + 4px); right: 0; z-index: 200; background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: 4px; min-width: 160px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); animation: fadeIn 0.1s ease both; }
+  .bulk-folder-item { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 10px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--text-muted); font-family: var(--font-ui); font-size: var(--text-xs); cursor: pointer; text-align: left; transition: background var(--t-base), color var(--t-base); }
+  .bulk-folder-item:hover { background: var(--bg-hover, var(--bg-base)); color: var(--text-primary); }
+
+  /* ── Grid & cards ───────────────────────────────────────────────────────── */
   .grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--cols, auto-fill), minmax(130px, 1fr)); gap: var(--sp-4); }
   .card { background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
   .card:hover .cover { filter: brightness(1.07); }
   .card:hover .title { color: var(--text-primary); }
+  /* In select mode, clicking always means "select", so use a checkbox cursor */
+  .card.select-mode { cursor: default; }
+  .card.card-selected .cover-wrap { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-md); }
+  .card.card-selected .title { color: var(--accent-fg); }
   .cover-wrap { position: relative; aspect-ratio: 2/3; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-raised); border: 1px solid var(--border-dim); transform: translateZ(0); }
   .cover { width: 100%; height: 100%; transition: filter var(--t-base); will-change: filter; }
   .badge-dl { position: absolute; bottom: var(--sp-1); right: var(--sp-1); min-width: 18px; height: 18px; padding: 0 3px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; background: var(--accent-dim); color: var(--accent-fg); border-radius: var(--radius-sm); border: 1px solid var(--accent-muted); }
   .badge-unread { position: absolute; top: var(--sp-1); left: var(--sp-1); min-width: 18px; height: 18px; padding: 0 4px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; background: var(--bg-void); color: var(--text-primary); border-radius: var(--radius-sm); border: 1px solid var(--border-strong); }
+
+  /* Select overlay (checkbox) */
+  .select-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.18); display: flex; align-items: flex-start; justify-content: flex-end; padding: 6px; pointer-events: none; }
+  .select-check { color: var(--text-faint); opacity: 0.7; transition: color var(--t-base), opacity var(--t-base); }
+  .select-check.checked { color: var(--accent-fg); opacity: 1; }
+  .select-check-empty { width: 20px; height: 20px; border-radius: 4px; border: 2px solid var(--text-faint); background: rgba(0,0,0,0.3); }
+
   .title { 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); }
   .card-skeleton { padding: 0; }
   .cover-skeleton { aspect-ratio: 2/3; border-radius: var(--radius-md); }

src/components/pages/SeriesDetail.svelte

@@ -2,10 +2,11 @@
   import { onMount, untrack } from "svelte";
   import { ArrowLeft, BookmarkSimple, Download, CheckCircle, Circle, ArrowSquareOut, CircleNotch, Play, SortAscending, SortDescending, CaretDown, ArrowsClockwise, List, SquaresFour, FolderSimplePlus, Trash, DownloadSimple, X, LinkSimpleHorizontalBreak, ChartLineUp } from "phosphor-svelte";
   import { gql, thumbUrl } from "../../lib/client";
-  import { GET_MANGA, GET_CHAPTERS, FETCH_CHAPTERS, ENQUEUE_DOWNLOAD, UPDATE_MANGA, MARK_CHAPTER_READ, MARK_CHAPTERS_READ, DELETE_DOWNLOADED_CHAPTERS, ENQUEUE_CHAPTERS_DOWNLOAD, GET_ALL_MANGA } from "../../lib/queries";
+  import { GET_MANGA, GET_CHAPTERS, FETCH_CHAPTERS, ENQUEUE_DOWNLOAD, UPDATE_MANGA, MARK_CHAPTER_READ, MARK_CHAPTERS_READ, DELETE_DOWNLOADED_CHAPTERS, ENQUEUE_CHAPTERS_DOWNLOAD, GET_ALL_MANGA, GET_CATEGORIES, CREATE_CATEGORY, UPDATE_MANGA_CATEGORIES } from "../../lib/queries";
   import { cache, CACHE_KEYS, recordSourceAccess } from "../../lib/cache";
-  import { store, addToast, updateSettings, addFolder, assignMangaToFolder, removeMangaFromFolder, getMangaFolders, openReader, checkAndMarkCompleted, setActiveManga, setGenreFilter, setNavPage, linkManga, unlinkManga } from "../../store/state.svelte";
+  import { dedupeMangaById, dedupeMangaByTitle } from "../../lib/util";
-  import type { Manga, Chapter } from "../../lib/types";
+  import { store, addToast, updateSettings, openReader, setActiveManga, setGenreFilter, setNavPage, linkManga, unlinkManga, checkAndMarkCompleted as storeCheckAndMarkCompleted } from "../../store/state.svelte";
+  import type { Manga, Chapter, Category } from "../../lib/types";
   import ContextMenu, { type MenuEntry } from "../shared/ContextMenu.svelte";
   import MigrateModal from "./MigrateModal.svelte";
   import TrackingPanel from "../shared/TrackingPanel.svelte";
@@ -36,6 +37,9 @@
   let folderPickerOpen: boolean         = $state(false);
   let folderCreating:  boolean          = $state(false);
   let folderNewName:   string           = $state("");
+  let mangaCategories: Category[]       = $state([]);
+  let allCategories:   Category[]       = $state([]);
+  let catsLoading:     boolean          = $state(false);
   let rangeFrom:       string           = $state("");
   let rangeTo:         string           = $state("");
   let showRange:       boolean          = $state(false);
@@ -102,9 +106,34 @@
   })());
 
   const statusLabel     = $derived(manga?.status ? manga.status.charAt(0) + manga.status.slice(1).toLowerCase() : null);
-  const assignedFolders = $derived(store.activeManga ? getMangaFolders(store.activeManga.id) : []);
+  const assignedFolders = $derived(mangaCategories.filter(c => c.id !== 0));
   const hasFolders      = $derived(assignedFolders.length > 0);
 
+  function loadCategories(mangaId: number) {
+    catsLoading = true;
+    gql<{ categories: { nodes: Category[] } }>(GET_CATEGORIES)
+      .then(d => {
+        allCategories   = d.categories.nodes.filter(c => c.id !== 0);
+        mangaCategories = allCategories.filter(c => c.mangas?.nodes.some(m => m.id === mangaId));
+      })
+      .catch(console.error)
+      .finally(() => { catsLoading = false; });
+  }
+
+  async function checkAndMarkCompleted(mangaId: number, chaps: Chapter[]) {
+    await storeCheckAndMarkCompleted(mangaId, chaps, allCategories, gql, UPDATE_MANGA_CATEGORIES, UPDATE_MANGA);
+    // Sync local mangaCategories state after the mutation
+    if (chaps.length) {
+      const allRead   = chaps.every(c => c.isRead);
+      const completed = allCategories.find(c => c.name === "Completed");
+      if (completed) {
+        const inCompleted = mangaCategories.some(c => c.id === completed.id);
+        if (allRead && !inCompleted)  mangaCategories = [...mangaCategories, completed];
+        else if (!allRead && inCompleted) mangaCategories = mangaCategories.filter(c => c.id !== completed.id);
+      }
+    }
+  }
+
   function loadManga(id: number) {
     mangaAbort?.abort();
     const ctrl = new AbortController();
@@ -164,7 +193,7 @@
 
   $effect(() => {
     const m = store.activeManga;
-    if (m) untrack(() => { loadManga(m.id); loadChapters(m.id); });
+    if (m) untrack(() => { loadManga(m.id); loadChapters(m.id); loadCategories(m.id); });
   });
 
   let prevChapterId: number | null = null;
@@ -300,14 +329,34 @@
     enqueueMultiple(sortedChapters.filter(c => c.chapterNumber >= lo && c.chapterNumber <= hi && !c.isDownloaded).map(c => c.id));
   }
 
-  function createFolder() {
+  async function createCategory() {
     const name = folderNewName.trim();
     if (!name || !store.activeManga) return;
-    const id = addFolder(name);
+    try {
-    assignMangaToFolder(id, store.activeManga.id);
+      const res = await gql<{ createCategory: { category: Category } }>(CREATE_CATEGORY, { name });
+      const cat = res.createCategory.category;
+      await gql(UPDATE_MANGA_CATEGORIES, { mangaId: store.activeManga.id, addTo: [cat.id], removeFrom: [] });
+      allCategories   = [...allCategories, cat];
+      mangaCategories = [...mangaCategories, cat];
+    } catch (e) { console.error(e); }
     folderNewName = ""; folderCreating = false;
   }
 
+  async function toggleCategory(cat: Category) {
+    if (!store.activeManga) return;
+    const inCat = mangaCategories.some(c => c.id === cat.id);
+    try {
+      await gql(UPDATE_MANGA_CATEGORIES, {
+        mangaId:    store.activeManga.id,
+        addTo:      inCat ? [] : [cat.id],
+        removeFrom: inCat ? [cat.id] : [],
+      });
+      mangaCategories = inCat
+        ? mangaCategories.filter(c => c.id !== cat.id)
+        : [...mangaCategories, cat];
+    } catch (e) { console.error(e); }
+  }
+
   onMount(() => () => { mangaAbort?.abort(); chapterAbort?.abort(); });
 
   // ── Series link ────────────────────────────────────────────────────────────
@@ -505,29 +554,30 @@
           <ArrowsClockwise size={14} weight="light" class={refreshing ? "anim-spin" : ""} />
         </button>
 
-        <!-- Folder picker -->
+        <!-- Category picker -->
         <div class="fp-wrap" bind:this={folderPickerRef}>
           <button class="icon-btn" class:active={hasFolders} onclick={() => folderPickerOpen = !folderPickerOpen}>
             <FolderSimplePlus size={14} weight={hasFolders ? "fill" : "light"} />
           </button>
           {#if folderPickerOpen}
             <div class="fp-menu">
-              {#if store.settings.folders.length === 0 && !folderCreating}
+              {#if catsLoading}
+                <p class="fp-empty">Loading…</p>
+              {:else if allCategories.length === 0 && !folderCreating}
                 <p class="fp-empty">No folders yet</p>
               {/if}
-              {#each store.settings.folders as folder}
+              {#each allCategories as cat}
-                {@const isIn = store.activeManga ? folder.mangaIds.includes(store.activeManga.id) : false}
+                {@const isIn = mangaCategories.some(c => c.id === cat.id)}
-                <button class="fp-item" class:fp-item-active={isIn}
+                <button class="fp-item" class:fp-item-active={isIn} onclick={() => toggleCategory(cat)}>
-                  onclick={() => store.activeManga && (isIn ? removeMangaFromFolder(folder.id, store.activeManga.id) : assignMangaToFolder(folder.id, store.activeManga.id))}>
+                  <span class="fp-check">{isIn ? "✓" : ""}</span>{cat.name}
-                  <span class="fp-check">{isIn ? "✓" : ""}</span>{folder.name}
                 </button>
               {/each}
               <div class="fp-div"></div>
               {#if folderCreating}
                 <div class="fp-create">
                   <input class="fp-input" placeholder="Folder name…" bind:value={folderNewName}
-                    onkeydown={(e) => { if (e.key === "Enter") createFolder(); if (e.key === "Escape") { folderCreating = false; folderNewName = ""; } }} use:focusOnMount />
+                    onkeydown={(e) => { if (e.key === "Enter") createCategory(); if (e.key === "Escape") { folderCreating = false; folderNewName = ""; } }} use:focusOnMount />
-                  <button class="fp-confirm" onclick={createFolder} disabled={!folderNewName.trim()}>Add</button>
+                  <button class="fp-confirm" onclick={createCategory} disabled={!folderNewName.trim()}>Add</button>
                   <button class="fp-cancel" onclick={() => { folderCreating = false; folderNewName = ""; }}>
                     <X size={12} weight="light" />
                   </button>

src/components/reader/Reader.svelte

@@ -199,8 +199,7 @@
     error      = null;
     pageGroups = [];
     pageReady  = false;
-    stripChapters    = [];
+    stripChapters = [];
-    visibleChapterId = null;
     store.pageUrls   = [];
     store.pageNumber = 1;
     try {
@@ -457,7 +456,7 @@
   }
 
   function maybeMarkCurrentRead() {
-    const ch = store.activeChapter;
+    const ch = displayChapter ?? store.activeChapter;
     if (ch && markOnNext) markChapterRead(ch.id);
   }
 
@@ -711,11 +710,11 @@
   </div>
 
   <div class="bottombar" class:hidden={!uiVisible}>
-    <button class="nav-btn" onclick={goPrev} disabled={loading || (style === "longstrip" ? !adjacent.prev : (store.pageNumber === 1 && !adjacent.prev))}>
+    <button class="nav-btn" onclick={goBack} disabled={loading || (style === "longstrip" ? !adjacent.prev : (store.pageNumber === 1 && !adjacent.prev))}>
-      <ArrowLeft size={13} weight="light" />
+      {#if rtl}<ArrowRight size={13} weight="light" />{:else}<ArrowLeft size={13} weight="light" />{/if}
     </button>
-    <button class="nav-btn" onclick={goNext} disabled={loading || (style === "longstrip" ? !adjacent.next : (store.pageNumber === lastPage && !adjacent.next))}>
+    <button class="nav-btn" onclick={goForward} disabled={loading || (style === "longstrip" ? !adjacent.next : (store.pageNumber === lastPage && !adjacent.next))}>
-      <ArrowRight size={13} weight="light" />
+      {#if rtl}<ArrowLeft size={13} weight="light" />{:else}<ArrowRight size={13} weight="light" />{/if}
     </button>
   </div>
 

src/components/settings/Settings.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
   import { tick } from "svelte";
-  import { X, Book, Image, Sliders, Info, Keyboard, Gear, HardDrives, FolderSimple, Plus, Pencil, Trash, Wrench, PaintBrush, ListChecks, Lock } from "phosphor-svelte";
+  import { X, Book, Image, Sliders, Info, Keyboard, Gear, HardDrives, FolderSimple, Plus, Pencil, Trash, Wrench, PaintBrush, ListChecks, Lock, Eye, EyeSlash, Star } from "phosphor-svelte";
   import { invoke } from "@tauri-apps/api/core";
   import { listen } from "@tauri-apps/api/event";
   import { getVersion } from "@tauri-apps/api/app";
   import { open as openUrl } from "@tauri-apps/plugin-shell";
   import { gql, thumbUrl } from "../../lib/client";
+  import { GET_CATEGORIES, CREATE_CATEGORY, UPDATE_CATEGORY, DELETE_CATEGORY, UPDATE_CATEGORY_ORDER } from "../../lib/queries";
   import { GET_DOWNLOADS_PATH, GET_TRACKERS, LOGIN_TRACKER_OAUTH, LOGIN_TRACKER_CREDENTIALS, LOGOUT_TRACKER, GET_TRACKER_RECORDS, GET_SERVER_SECURITY, SET_SERVER_AUTH, SET_SOCKS_PROXY, SET_FLARESOLVERR } from "../../lib/queries";
-  import { store, updateSettings, resetKeybinds, addFolder, removeFolder, renameFolder, toggleFolderTab, clearHistory, wipeAllData, setSettingsOpen, deleteCustomTheme } from "../../store/state.svelte";
+  import type { Category } from "../../lib/types";
+  import { store, updateSettings, resetKeybinds, clearHistory, wipeAllData, setSettingsOpen, deleteCustomTheme, toggleHiddenCategory, setCategories } from "../../store/state.svelte";
   import { cache } from "../../lib/cache";
   import { KEYBIND_LABELS, DEFAULT_KEYBINDS, eventToKeybind } from "../../lib/keybinds";
   import type { Settings, FitMode, Theme } from "../../store/state.svelte";
@@ -168,23 +170,104 @@
   }
 
   
-  let newFolderName  = $state("");
+  // catsLoading / catsError are local UI state only.
-  let editingId: string | null = $state(null);
+  // The category list itself lives in store.categories (shared with Library).
-  let editingName    = $state("");
+  let catsLoading:    boolean      = $state(false);
+  let catsError:      string|null  = $state(null);
+  let newFolderName   = $state("");
+  let editingId: number | null     = $state(null);
+  let editingName     = $state("");
 
-  function createFolder() {
+  async function loadCategories() {
+    catsLoading = true; catsError = null;
+    try {
+      const res = await gql<{ categories: { nodes: Category[] } }>(GET_CATEGORIES);
+      // Merge server data onto existing store.categories to preserve mangas.nodes
+      // that Library loaded — Settings' GET_CATEGORIES query may not include them.
+      // Also preserve any id=0 (Default) entry that Library manages.
+      const zeroCat = store.categories.filter(c => c.id === 0);
+      const fresh = res.categories.nodes.filter(c => c.id !== 0);
+      const merged = fresh.map(f => {
+        const existing = store.categories.find(c => c.id === f.id);
+        return existing ? { ...existing, ...f } : f;
+      });
+      setCategories([...zeroCat, ...merged]);
+    } catch (e: any) {
+      catsError = e?.message ?? "Failed to load folders";
+    } finally { catsLoading = false; }
+  }
+
+  async function createFolder() {
     const name = newFolderName.trim();
     if (!name) return;
-    addFolder(name); newFolderName = "";
+    try {
+      const res = await gql<{ createCategory: { category: Category } }>(CREATE_CATEGORY, { name });
+      setCategories([...store.categories, res.createCategory.category]);
+      newFolderName = "";
+    } catch (e: any) { catsError = e?.message ?? "Failed to create folder"; }
   }
 
-  function startEdit(id: string, name: string) { editingId = id; editingName = name; }
+  function startEdit(id: number, name: string) { editingId = id; editingName = name; }
 
-  function commitEdit() {
+  async function commitEdit() {
-    if (editingId && editingName.trim()) renameFolder(editingId, editingName.trim());
+    if (editingId !== null && editingName.trim()) {
+      try {
+        await gql(UPDATE_CATEGORY, { id: editingId, name: editingName.trim() });
+        setCategories(store.categories.map(c => c.id === editingId ? { ...c, name: editingName.trim() } : c));
+      } catch (e: any) { catsError = e?.message ?? "Failed to rename"; }
+    }
     editingId = null; editingName = "";
   }
 
+  async function deleteFolder(id: number) {
+    try {
+      await gql(DELETE_CATEGORY, { id });
+      setCategories(store.categories.filter(c => c.id !== id));
+    } catch (e: any) { catsError = e?.message ?? "Failed to delete folder"; }
+  }
+
+  async function moveCategory(id: number, direction: -1 | 1) {
+    // Work only on the non-default (id !== 0) categories, sorted by order,
+    // which is what the Settings list renders and what the server expects.
+    const zeroCat  = store.categories.filter(c => c.id === 0);
+    const sortable = store.categories
+      .filter(c => c.id !== 0)
+      .sort((a, b) => a.order - b.order);
+
+    const idx = sortable.findIndex(c => c.id === id);
+    if (idx < 0) return;
+    const newPos = idx + 1 + direction; // 1-based server position
+    if (newPos < 1 || newPos > sortable.length) return;
+
+    // Optimistic reorder — splice within sortable slice, keep mangas.nodes intact
+    const reordered = [...sortable];
+    const [moved] = reordered.splice(idx, 1);
+    reordered.splice(idx + direction, 0, moved);
+    setCategories([...zeroCat, ...reordered.map((c, i) => ({ ...c, order: i + 1 }))]);
+
+    try {
+      const res = await gql<{ updateCategoryOrder: { categories: Category[] } }>(UPDATE_CATEGORY_ORDER, { id, position: newPos });
+      // Server returns bare order data — merge to preserve mangas.nodes, keep id=0 entry
+      const updated = res.updateCategoryOrder.categories.filter(c => c.id !== 0);
+      setCategories([
+        ...zeroCat,
+        ...updated
+          .sort((a, b) => a.order - b.order)
+          .map(fresh => {
+            const existing = store.categories.find(c => c.id === fresh.id);
+            return existing ? { ...existing, ...fresh } : fresh;
+          }),
+      ]);
+    } catch (e: any) {
+      catsError = e?.message ?? "Failed to reorder";
+      await loadCategories();
+    }
+  }
+
+  // Load categories when the folders tab is first opened and the shared store
+  // is empty (e.g. user opened Settings before Library was mounted).
+  $effect(() => { if (tab === "folders" && !store.categories.length && !catsLoading) loadCategories(); });
+
   
   let selectOpen: string | null = $state(null);
 
@@ -562,6 +645,9 @@
 
     try {
       if (IS_WINDOWS) {
+        // Kill Suwayomi before installing — its JRE DLLs will be locked otherwise.
+        // kill_server blocks on the Rust side until java.exe is fully gone.
+        try { await invoke("kill_server"); } catch {}
         // Windows: Tauri updater downloads + runs passive NSIS installer
         await invoke("download_and_install_update");
         updatePhase = "ready";
@@ -1129,7 +1215,10 @@
           <div class="panel">
             <div class="section">
               <p class="section-title">Manage Folders</p>
-              <p class="toggle-desc" style="padding:0 var(--sp-3) var(--sp-3);display:block">Assign manga to folders from the series detail page.</p>
+              <p class="toggle-desc" style="padding:0 var(--sp-3) var(--sp-3);display:block">Folders are stored as Suwayomi categories. Changes sync across all clients.</p>
+              {#if catsError}
+                <p class="toggle-desc" style="padding:0 var(--sp-3) var(--sp-2);color:var(--color-error);display:block">{catsError}</p>
+              {/if}
               <div class="folder-create-row">
                 <input class="text-input" placeholder="New folder name…" bind:value={newFolderName}
                   onkeydown={(e) => e.key === "Enter" && createFolder()} style="flex:1;width:auto" />
@@ -1137,26 +1226,47 @@
                   <Plus size={13} weight="bold" /> Create
                 </button>
               </div>
-              {#if store.settings.folders.length === 0}
+              {#if catsLoading}
+                <p class="storage-loading">Loading folders…</p>
+              {:else if store.categories.filter(c => c.id !== 0).length === 0}
                 <p class="storage-loading">No folders yet. Create one above.</p>
               {:else}
+                {@const displayCats = store.categories
+                    .filter(c => c.id !== 0)
+                    .sort((a, b) => {
+                      const defaultId = store.settings.defaultLibraryCategoryId ?? null;
+                      if (a.id === defaultId) return -1;
+                      if (b.id === defaultId) return  1;
+                      return a.order - b.order;
+                    })}
                 <div class="folder-list">
-                  {#each store.settings.folders as folder}
+                  {#each displayCats as cat, i}
                     <div class="folder-row">
-                      {#if editingId === folder.id}
+                      {#if editingId === cat.id}
                         <input class="text-input" bind:value={editingName}
                           onkeydown={(e) => { if (e.key === "Enter") commitEdit(); if (e.key === "Escape") editingId = null; }}
                           onblur={commitEdit} style="flex:1;width:auto" use:focusInput />
                         <button class="kb-reset" onclick={commitEdit} title="Save">✓</button>
                       {:else}
                         <FolderSimple size={14} weight="light" style="color:var(--text-faint);flex-shrink:0" />
-                        <span class="folder-row-name">{folder.name}</span>
+                        <span class="folder-row-name">{cat.name}</span>
-                        <span class="folder-row-count">{folder.mangaIds.length} manga</span>
+                        <span class="folder-row-count">{cat.mangas?.nodes.length ?? 0} manga</span>
-                        <button class="folder-tab-toggle" class:on={folder.showTab} onclick={() => toggleFolderTab(folder.id)}>
+                        <button
-                          {folder.showTab ? "Tab on" : "Tab off"}
+                          class="kb-reset"
-                        </button>
+                          class:folder-default-active={(store.settings.defaultLibraryCategoryId ?? null) === cat.id}
-                        <button class="kb-reset" onclick={() => startEdit(folder.id, folder.name)} title="Rename"><Pencil size={12} weight="light" /></button>
+                          onclick={() => updateSettings({ defaultLibraryCategoryId: (store.settings.defaultLibraryCategoryId ?? null) === cat.id ? null : cat.id })}
-                        <button class="kb-reset folder-delete" onclick={() => removeFolder(folder.id)} title="Delete"><Trash size={12} weight="light" /></button>
+                          title={(store.settings.defaultLibraryCategoryId ?? null) === cat.id ? "Remove as default folder" : "Set as default folder — opens first when you visit Library"}
+                        ><Star size={13} weight={(store.settings.defaultLibraryCategoryId ?? null) === cat.id ? "fill" : "light"} /></button>
+                        <button
+                          class="kb-reset"
+                          class:folder-hidden={(store.settings.hiddenCategoryIds ?? []).includes(cat.id)}
+                          onclick={() => toggleHiddenCategory(cat.id)}
+                          title={(store.settings.hiddenCategoryIds ?? []).includes(cat.id) ? "Show in Saved tab" : "Hide from Saved tab"}
+                        >{#if (store.settings.hiddenCategoryIds ?? []).includes(cat.id)}<EyeSlash size={13} weight="light" />{:else}<Eye size={13} weight="light" />{/if}</button>
+                        <button class="kb-reset" onclick={() => moveCategory(cat.id, -1)} disabled={i === 0} title="Move up">↑</button>
+                        <button class="kb-reset" onclick={() => moveCategory(cat.id, 1)} disabled={i === displayCats.length - 1} title="Move down">↓</button>
+                        <button class="kb-reset" onclick={() => startEdit(cat.id, cat.name)} title="Rename"><Pencil size={12} weight="light" /></button>
+                        <button class="kb-reset folder-delete" onclick={() => deleteFolder(cat.id)} title="Delete"><Trash size={12} weight="light" /></button>
                       {/if}
                     </div>
                   {/each}
@@ -1816,6 +1926,8 @@
   .folder-tab-toggle.on { background: var(--accent-muted); border-color: var(--accent-dim); color: var(--accent-fg); }
   .folder-tab-toggle:hover { color: var(--text-muted); border-color: var(--border-strong); }
   .folder-delete:hover:not(:disabled) { color: var(--color-error) !important; }
+  .folder-hidden { opacity: 0.35; }
+  .folder-default-active { color: var(--accent-fg) !important; }
 
   /* About */
   .about-block { padding: 0 var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); }

src/components/shared/MangaPreview.svelte

@@ -2,11 +2,11 @@
   import { onMount, onDestroy } from "svelte";
   import { X, BookmarkSimple, ArrowSquareOut, Play, CircleNotch, Books, CaretDown, FolderSimplePlus, Folder, LinkSimpleHorizontalBreak } from "phosphor-svelte";
   import { gql, thumbUrl } from "../../lib/client";
-  import { GET_MANGA, GET_CHAPTERS, FETCH_MANGA, FETCH_CHAPTERS, UPDATE_MANGA, ENQUEUE_CHAPTERS_DOWNLOAD } from "../../lib/queries";
+  import { GET_MANGA, GET_CHAPTERS, FETCH_MANGA, FETCH_CHAPTERS, UPDATE_MANGA, ENQUEUE_CHAPTERS_DOWNLOAD, GET_CATEGORIES, CREATE_CATEGORY, UPDATE_MANGA_CATEGORIES } from "../../lib/queries";
   import { GET_ALL_MANGA } from "../../lib/queries";
   import { cache, CACHE_KEYS } from "../../lib/cache";
-  import { store, openReader, addToast, addFolder, assignMangaToFolder, removeMangaFromFolder, checkAndMarkCompleted, linkManga, unlinkManga, setPreviewManga, setActiveManga, setNavPage, setGenreFilter } from "../../store/state.svelte";
+  import { store, openReader, addToast, linkManga, unlinkManga, setPreviewManga, setActiveManga, setNavPage, setGenreFilter, checkAndMarkCompleted as storeCheckAndMarkCompleted } from "../../store/state.svelte";
-  import type { Manga, Chapter } from "../../lib/types";
+  import type { Manga, Chapter, Category } from "../../lib/types";
 
   let manga: Manga | null      = $state(null);
   let chapters: Chapter[]      = $state([]);
@@ -17,6 +17,9 @@
   let folderOpen               = $state(false);
   let newFolderName            = $state("");
   let creatingFolder           = $state(false);
+  let allCategories:  Category[] = $state([]);
+  let mangaCategories: Category[] = $state([]);
+  let catsLoading:    boolean    = $state(false);
   let queueingAll              = $state(false);
   let fetchError: string|null  = $state(null);
   let folderRef: HTMLDivElement = $state() as HTMLDivElement;
@@ -79,7 +82,7 @@
   const firstUpload     = $derived(uploadDates.length ? new Date(Math.min(...uploadDates)) : null);
   const lastUpload      = $derived(uploadDates.length ? new Date(Math.max(...uploadDates)) : null);
   const statusLabel     = $derived(displayManga?.status ? displayManga.status.charAt(0) + displayManga.status.slice(1).toLowerCase() : null);
-  const assignedFolders = $derived(store.previewManga ? store.settings.folders.filter((f) => f.mangaIds.includes(store.previewManga!.id)) : []);
+  const assignedFolders = $derived(mangaCategories.filter(c => c.id !== 0));
 
   const continueChapter = $derived.by(() => {
     if (!chapters.length) return null;
@@ -90,7 +93,7 @@
     return { ch: chapters[0], label: "Read again" };
   });
 
-  $effect(() => { if (store.previewManga) load(store.previewManga.id); });
+  $effect(() => { if (store.previewManga) { load(store.previewManga.id); loadCategories(store.previewManga.id); } });
 
   async function load(id: number) {
     detailAbort?.abort(); chapterAbort?.abort();
@@ -171,11 +174,55 @@
     close();
   }
 
-  function handleFolderCreate() {
+  function loadCategories(mangaId: number) {
+    catsLoading = true;
+    gql<{ categories: { nodes: Category[] } }>(GET_CATEGORIES)
+      .then(d => {
+        allCategories   = d.categories.nodes.filter(c => c.id !== 0);
+        mangaCategories = allCategories.filter(c => c.mangas?.nodes.some(m => m.id === mangaId));
+      })
+      .catch(console.error)
+      .finally(() => { catsLoading = false; });
+  }
+
+  async function checkAndMarkCompleted(mangaId: number, chaps: Chapter[]) {
+    await storeCheckAndMarkCompleted(mangaId, chaps, allCategories, gql, UPDATE_MANGA_CATEGORIES, UPDATE_MANGA);
+    // Sync local mangaCategories state after the mutation
+    if (chaps.length) {
+      const allRead   = chaps.every(c => c.isRead);
+      const completed = allCategories.find(c => c.name === "Completed");
+      if (completed) {
+        const inCompleted = mangaCategories.some(c => c.id === completed.id);
+        if (allRead && !inCompleted)  mangaCategories = [...mangaCategories, completed];
+        else if (!allRead && inCompleted) mangaCategories = mangaCategories.filter(c => c.id !== completed.id);
+      }
+    }
+  }
+
+  async function toggleCategory(cat: Category) {
+    if (!store.previewManga) return;
+    const mangaId = store.previewManga.id;
+    const inCat   = mangaCategories.some(c => c.id === cat.id);
+    await gql(UPDATE_MANGA_CATEGORIES, {
+      mangaId,
+      addTo:      inCat ? [] : [cat.id],
+      removeFrom: inCat ? [cat.id] : [],
+    }).catch(console.error);
+    mangaCategories = inCat
+      ? mangaCategories.filter(c => c.id !== cat.id)
+      : [...mangaCategories, cat];
+  }
+
+  async function handleFolderCreate() {
     const name = newFolderName.trim();
     if (!name || !store.previewManga) return;
-    const id = addFolder(name);
+    try {
-    assignMangaToFolder(id, store.previewManga.id);
+      const res = await gql<{ createCategory: { category: Category } }>(CREATE_CATEGORY, { name });
+      const cat = res.createCategory.category;
+      allCategories = [...allCategories, cat];
+      await gql(UPDATE_MANGA_CATEGORIES, { mangaId: store.previewManga.id, addTo: [cat.id], removeFrom: [] });
+      mangaCategories = [...mangaCategories, cat];
+    } catch (e) { console.error(e); }
     newFolderName = ""; creatingFolder = false;
   }
 
@@ -225,12 +272,15 @@
           </button>
           {#if folderOpen}
             <div class="folder-menu">
-              {#if store.settings.folders.length === 0 && !creatingFolder}<p class="folder-empty">No folders yet</p>{/if}
+              {#if catsLoading}
-              {#each store.settings.folders as f}
+                <p class="folder-empty">Loading…</p>
-                {@const isIn = store.previewManga ? f.mangaIds.includes(store.previewManga.id) : false}
+              {:else if allCategories.length === 0 && !creatingFolder}
-                <button class="folder-item" class:folder-item-on={isIn}
+                <p class="folder-empty">No folders yet</p>
-                  onclick={() => store.previewManga && (isIn ? removeMangaFromFolder(f.id, store.previewManga.id) : assignMangaToFolder(f.id, store.previewManga.id))}>
+              {/if}
-                  <Folder size={12} weight={isIn ? "fill" : "light"} />{isIn ? "✓ " : ""}{f.name}
+              {#each allCategories as cat}
+                {@const isIn = mangaCategories.some(c => c.id === cat.id)}
+                <button class="folder-item" class:folder-item-on={isIn} onclick={() => toggleCategory(cat)}>
+                  <Folder size={12} weight={isIn ? "fill" : "light"} />{isIn ? "✓ " : ""}{cat.name}
                 </button>
               {/each}
               <div class="folder-divider"></div>

src/components/shared/SourceBrowse.svelte

@@ -1,33 +1,35 @@
 <script lang="ts">
   import { ArrowLeft, MagnifyingGlass, ArrowLeft as Prev, ArrowRight as Next, BookmarkSimple, FolderSimplePlus, Folder } from "phosphor-svelte";
   import { gql, thumbUrl } from "../../lib/client";
-  import { FETCH_SOURCE_MANGA, UPDATE_MANGA } from "../../lib/queries";
+  import { FETCH_SOURCE_MANGA, UPDATE_MANGA, GET_CATEGORIES, CREATE_CATEGORY, UPDATE_MANGA_CATEGORIES } from "../../lib/queries";
-  import { store, addFolder, assignMangaToFolder, setActiveSource, setActiveManga, setNavPage } from "../../store/state.svelte";
+  import { store, setActiveSource, setActiveManga, setNavPage } from "../../store/state.svelte";
-  import type { Manga } from "../../lib/types";
+  import type { Manga, Category } from "../../lib/types";
   import ContextMenu, { type MenuEntry } from "../shared/ContextMenu.svelte";
 
   type BrowseType = "POPULAR" | "LATEST" | "SEARCH";
 
-  let mangas: Manga[]       = [];
+  let mangas: Manga[]        = $state([]);
-  let loading               = true;
+  let loading                = $state(true);
-  let page                  = 1;
+  let page                   = $state(1);
-  let hasNextPage           = false;
+  let hasNextPage            = $state(false);
-  let browseType: BrowseType = "POPULAR";
+  let browseType: BrowseType = $state("POPULAR");
-  let search                = "";
+  let search                 = $state("");
-  let searchInput           = "";
+  let searchInput            = $state("");
-  let ctx: { x: number; y: number; manga: Manga } | null = null;
+  let ctx: { x: number; y: number; manga: Manga } | null = $state(null);
+  let categories: Category[] = $state([]);
+  let catsLoaded             = false;
 
   async function fetchMangas(type: BrowseType, p: number, q: string) {
-    if (!$store.activeSource) return;
+    if (!store.activeSource) return;
     loading = true; mangas = [];
     gql<{ fetchSourceManga: { mangas: Manga[]; hasNextPage: boolean } }>(
-      FETCH_SOURCE_MANGA, { source: $store.activeSource.id, type, page: p, query: q || null }
+      FETCH_SOURCE_MANGA, { source: store.activeSource.id, type, page: p, query: q || null }
     ).then((d) => { mangas = d.fetchSourceManga.mangas; hasNextPage = d.fetchSourceManga.hasNextPage; })
      .catch(console.error)
      .finally(() => loading = false);
   }
 
-  $: if ($store.activeSource) fetchMangas(browseType, page, search);
+  $effect(() => { if (store.activeSource) fetchMangas(browseType, page, search); });
 
   function submitSearch() {
     search = searchInput.trim();
@@ -40,38 +42,58 @@
     browseType = mode; search = ""; searchInput = ""; page = 1;
   }
 
+  function openCtx(e: MouseEvent, m: Manga) {
+    e.preventDefault(); e.stopPropagation();
+    ctx = { x: e.clientX, y: e.clientY, manga: m };
+    if (!catsLoaded) {
+      catsLoaded = true;
+      gql<{ categories: { nodes: Category[] } }>(GET_CATEGORIES)
+        .then(d => { categories = d.categories.nodes.filter(c => c.id !== 0); })
+        .catch(console.error);
+    }
+  }
+
   function buildCtxItems(m: Manga): MenuEntry[] {
     return [
       { label: m.inLibrary ? "In Library" : "Add to library", icon: BookmarkSimple, disabled: m.inLibrary,
         onClick: () => gql(UPDATE_MANGA, { id: m.id, inLibrary: true })
           .then(() => mangas = mangas.map((x) => x.id === m.id ? { ...x, inLibrary: true } : x))
           .catch(console.error) },
-      ...($store.settings.folders.length > 0 ? [
+      ...(categories.length > 0 ? [
         { separator: true } as MenuEntry,
-        ...$store.settings.folders.map((f): MenuEntry => ({
+        ...categories.map((cat): MenuEntry => ({
-          label: f.mangaIds.includes(m.id) ? `✓ ${f.name}` : f.name, icon: Folder,
+          label: (cat.mangas?.nodes ?? []).some(x => x.id === m.id) ? `✓ ${cat.name}` : cat.name, icon: Folder,
-          onClick: () => assignMangaToFolder(f.id, m.id),
+          onClick: () => gql(UPDATE_MANGA_CATEGORIES, { mangaId: m.id, addTo: [cat.id], removeFrom: [] }).catch(console.error),
         })),
       ] : []),
       { separator: true },
-      { label: "New folder & add", icon: FolderSimplePlus, onClick: () => { const name = prompt("Folder name:"); if (name?.trim()) { const id = addFolder(name.trim()); assignMangaToFolder(id, m.id); } } },
+      { label: "New folder & add", icon: FolderSimplePlus, onClick: async () => {
+        const name = prompt("Folder name:");
+        if (!name?.trim()) return;
+        const res = await gql<{ createCategory: { category: Category } }>(CREATE_CATEGORY, { name: name.trim() }).catch(console.error);
+        if (res) {
+          const cat = res.createCategory.category;
+          categories = [...categories, cat];
+          await gql(UPDATE_MANGA_CATEGORIES, { mangaId: m.id, addTo: [cat.id], removeFrom: [] }).catch(console.error);
+        }
+      }},
     ];
   }
 </script>
 
-{#if $store.activeSource}
+{#if store.activeSource}
 <div class="root">
   <div class="header">
-    <button class="back" on:click={() => store.activeSource.set(null)}>
+    <button class="back" onclick={() => setActiveSource(null)}>
       <ArrowLeft size={13} weight="light" /><span>Sources</span>
     </button>
-    <span class="source-name">{$store.activeSource.displayName}</span>
+    <span class="source-name">{store.activeSource.displayName}</span>
   </div>
 
   <div class="toolbar">
     <div class="tabs">
       {#each (["POPULAR", "LATEST"] as BrowseType[]) as mode}
-        <button class="tab" class:active={browseType === mode && !search} on:click={() => setMode(mode)}>
+        <button class="tab" class:active={browseType === mode && !search} onclick={() => setMode(mode)}>
           {mode.charAt(0) + mode.slice(1).toLowerCase()}
         </button>
       {/each}
@@ -80,7 +102,7 @@
     <div class="search-wrap">
       <MagnifyingGlass size={12} class="search-icon" weight="light" />
       <input class="search" placeholder="Search source…" bind:value={searchInput}
-        on:keydown={(e) => e.key === "Enter" && submitSearch()} />
+        onkeydown={(e) => e.key === "Enter" && submitSearch()} />
     </div>
   </div>
 
@@ -95,8 +117,8 @@
   {:else}
     <div class="grid">
       {#each mangas as m (m.id)}
-        <button class="card" on:click={() => { store.activeManga.set(m); store.navPage.set("library"); }}
+        <button class="card" onclick={() => { setActiveManga(m); setNavPage("library"); }}
-          on:contextmenu={(e) => { e.preventDefault(); e.stopPropagation(); ctx = { x: e.clientX, y: e.clientY, manga: m }; }}>
+          oncontextmenu={(e) => openCtx(e, m)}>
           <div class="cover-wrap">
             <img src={thumbUrl(m.thumbnailUrl)} alt={m.title} class="cover" />
             {#if m.inLibrary}<span class="in-library-badge">In Library</span>{/if}
@@ -109,11 +131,11 @@
 
   {#if !loading && (page > 1 || hasNextPage)}
     <div class="pagination">
-      <button class="page-btn" on:click={() => page = Math.max(1, page - 1)} disabled={page === 1}>
+      <button class="page-btn" onclick={() => page = Math.max(1, page - 1)} disabled={page === 1}>
         <Prev size={13} weight="light" /> Prev
       </button>
       <span class="page-num">{page}</span>
-      <button class="page-btn" on:click={() => page++} disabled={!hasNextPage}>
+      <button class="page-btn" onclick={() => page++} disabled={!hasNextPage}>
         Next <Next size={13} weight="light" />
       </button>
     </div>
@@ -158,4 +180,5 @@
   .page-btn:disabled { opacity: 0.3; cursor: default; }
   .page-num { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: var(--tracking-wider); min-width: 24px; text-align: center; }
   .empty { display: flex; align-items: center; justify-content: center; flex: 1; color: var(--text-muted); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); }
+  @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
 </style>

src/lib/cache.ts

@@ -154,6 +154,7 @@ export const CACHE_GROUPS = {
 export const CACHE_KEYS = {
   LIBRARY:             "library",
   ALL_MANGA:           "all_manga_unfiltered",
+  CATEGORIES:          "categories",
   DISCOVER:            "discover_all_manga",  // Discover's unfiltered fetch — separate from library
   SOURCES:             "sources",
   POPULAR:             "popular",

src/lib/queries.ts

@@ -191,6 +191,95 @@ export const GET_DOWNLOADS_PATH = `
   }
 `;
 
+// ── Categories ────────────────────────────────────────────────────────────────
+
+export const GET_CATEGORIES = `
+  query GetCategories {
+    categories {
+      nodes {
+        id
+        name
+        order
+        default
+        includeInUpdate
+        includeInDownload
+        mangas {
+          nodes {
+            id
+            title
+            thumbnailUrl
+            inLibrary
+            downloadCount
+            unreadCount
+          }
+        }
+      }
+    }
+  }
+`;
+
+export const CREATE_CATEGORY = `
+  mutation CreateCategory($name: String!) {
+    createCategory(input: { name: $name }) {
+      category {
+        id
+        name
+        order
+        default
+        includeInUpdate
+        includeInDownload
+      }
+    }
+  }
+`;
+
+export const UPDATE_CATEGORY = `
+  mutation UpdateCategory($id: Int!, $name: String) {
+    updateCategory(input: { id: $id, patch: { name: $name } }) {
+      category {
+        id
+        name
+        order
+      }
+    }
+  }
+`;
+
+export const DELETE_CATEGORY = `
+  mutation DeleteCategory($id: Int!) {
+    deleteCategory(input: { categoryId: $id }) {
+      category {
+        id
+      }
+    }
+  }
+`;
+
+export const UPDATE_CATEGORY_ORDER = `
+  mutation UpdateCategoryOrder($id: Int!, $position: Int!) {
+    updateCategoryOrder(input: { id: $id, position: $position }) {
+      categories {
+        id
+        name
+        order
+        default
+        includeInUpdate
+        includeInDownload
+      }
+    }
+  }
+`;
+
+export const UPDATE_MANGA_CATEGORIES = `
+  mutation UpdateMangaCategories($mangaId: Int!, $addTo: [Int!]!, $removeFrom: [Int!]!) {
+    updateMangaCategories(input: { id: $mangaId, patch: { addToCategories: $addTo, removeFromCategories: $removeFrom } }) {
+      manga {
+        id
+      }
+    }
+  }
+`;
+
 // ── Downloads ─────────────────────────────────────────────────────────────────
 
 export const GET_DOWNLOAD_STATUS = `

src/lib/types.ts

@@ -1,3 +1,15 @@
+export interface Category {
+  id: number;
+  name: string;
+  order: number;
+  default: boolean;
+  includeInUpdate: string;
+  includeInDownload: string;
+  mangas?: {
+    nodes: Manga[];
+  };
+}
+
 export interface Manga {
   id: number;
   title: string;

src/store/state.svelte.ts

@@ -1,4 +1,4 @@
-import type { Manga, Chapter, Source } from "../lib/types";
+import type { Manga, Chapter, Category, Source } from "../lib/types";
 import { DEFAULT_KEYBINDS, type Keybinds } from "../lib/keybinds";
 
 export type PageStyle        = "single" | "double" | "longstrip";
@@ -78,7 +78,6 @@ export const DEFAULT_THEME_TOKENS: ThemeTokens = {
   "color-info-bg":  "#121a1f",
 };
 
-export const COMPLETED_FOLDER_ID = "completed";
 
 export interface HistoryEntry {
   mangaId:      number;
@@ -142,13 +141,6 @@ export interface ActiveDownload {
   progress:  number;
 }
 
-export interface Folder {
-  id:       string;
-  name:     string;
-  mangaIds: number[];
-  showTab:  boolean;
-  system?:  boolean;
-}
 
 export interface Settings {
   pageStyle:               PageStyle;
@@ -178,7 +170,6 @@ export interface Settings {
   idleTimeoutMin?:         number;
   splashCards?:            boolean;
   storageLimitGb:          number | null;
-  folders:                 Folder[];
   markReadOnNext:          boolean;
   readerDebounceMs:        number;
   theme:                   Theme;
@@ -204,15 +195,11 @@ export interface Settings {
   appLockEnabled:          boolean;
   appLockPin:              string;
   customThemes:            CustomTheme[];
+  hiddenCategoryIds:       number[];
+  /** Category ID that opens by default when the Library tab is first visited. null = no default (shows Saved). */
+  defaultLibraryCategoryId: number | null;
 }
 
-const COMPLETED_FOLDER_DEFAULT: Folder = {
-  id:       COMPLETED_FOLDER_ID,
-  name:     "Completed",
-  mangaIds: [],
-  showTab:  true,
-  system:   true,
-};
 
 export const DEFAULT_SETTINGS: Settings = {
   pageStyle:              "longstrip",
@@ -242,7 +229,6 @@ export const DEFAULT_SETTINGS: Settings = {
   idleTimeoutMin:         5,
   splashCards:            true,
   storageLimitGb:         null,
-  folders:                [COMPLETED_FOLDER_DEFAULT],
   markReadOnNext:         true,
   readerDebounceMs:       120,
   theme:                  "dark",
@@ -268,6 +254,8 @@ export const DEFAULT_SETTINGS: Settings = {
   appLockEnabled:         false,
   appLockPin:             "",
   customThemes:           [],
+  hiddenCategoryIds:      [],
+  defaultLibraryCategoryId: null,
 };
 
 // ── Persistence ───────────────────────────────────────────────────────────────
@@ -318,20 +306,14 @@ const saved = (() => {
 })();
 
 function mergeSettings(saved: any): Settings {
-  const userFolders: Folder[]   = saved?.settings?.folders ?? [];
-  const existingCompleted       = userFolders.find(f => f.id === COMPLETED_FOLDER_ID);
-  const completedFolder: Folder = existingCompleted
-    ? { ...COMPLETED_FOLDER_DEFAULT, mangaIds: existingCompleted.mangaIds }
-    : COMPLETED_FOLDER_DEFAULT;
-  const otherFolders = userFolders.filter(f => f.id !== COMPLETED_FOLDER_ID);
   return {
     ...DEFAULT_SETTINGS,
     ...saved?.settings,
-    folders:    [completedFolder, ...otherFolders],
+    keybinds:     { ...DEFAULT_KEYBINDS, ...saved?.settings?.keybinds },
-    keybinds:   { ...DEFAULT_KEYBINDS, ...saved?.settings?.keybinds },
+    heroSlots:    saved?.settings?.heroSlots ?? [null, null, null, null],
-    heroSlots:  saved?.settings?.heroSlots ?? [null, null, null, null],
+    mangaLinks:   saved?.settings?.mangaLinks ?? {},
-    mangaLinks: saved?.settings?.mangaLinks ?? {},
     customThemes: saved?.settings?.customThemes ?? [],
+    hiddenCategoryIds: saved?.settings?.hiddenCategoryIds ?? [],
   };
 }
 
@@ -350,7 +332,7 @@ const genId = () => Math.random().toString(36).slice(2, 10);
 
 class Store {
   navPage:           NavPage          = $state(saved?.navPage       ?? "home");
-  libraryFilter:     LibraryFilter    = $state(saved?.libraryFilter ?? "library");
+  libraryFilter:     LibraryFilter    = $state("library");
   history:           HistoryEntry[]   = $state(saved?.history       ?? []);
   /**
    * readLog — append-only, never deduped. Every chapter completion/progress
@@ -383,6 +365,12 @@ class Store {
   // UI-only: synced from Tauri window events in App.svelte. Not persisted.
   isFullscreen:      boolean          = $state(false);
 
+  // ── Shared category list ──────────────────────────────────────────────────
+  // Single source of truth for the category list, shared between Library and
+  // Settings. Library owns fetching; Settings reads and mutates in-place.
+  // No pub/sub or guard flags needed — both components share this $state ref.
+  categories: Category[] = $state([]);
+
   // ── Discover session cache ────────────────────────────────────────────────
   // Survives navigation within a session but is never persisted to localStorage.
   // Key format: "<sourceId>|<type>|<genre>" or "local|<genre>"
@@ -504,31 +492,9 @@ class Store {
     this.history      = [];
     this.readLog      = [];
     this.readingStats = { ...DEFAULT_READING_STATS };
-    this.settings     = { ...this.settings, folders: [COMPLETED_FOLDER_DEFAULT], heroSlots: [null, null, null, null], mangaLinks: {} };
+    this.settings     = { ...this.settings, heroSlots: [null, null, null, null], mangaLinks: {} };
   }
 
-  markMangaCompleted(mangaId: number) {
-    const folder = this.settings.folders.find(f => f.id === COMPLETED_FOLDER_ID);
-    if (!folder) return;
-    if (!folder.mangaIds.includes(mangaId))
-      folder.mangaIds = [...folder.mangaIds, mangaId];
-  }
-
-  unmarkMangaCompleted(mangaId: number) {
-    const folder = this.settings.folders.find(f => f.id === COMPLETED_FOLDER_ID);
-    if (!folder) return;
-    folder.mangaIds = folder.mangaIds.filter(id => id !== mangaId);
-  }
-
-  isCompleted(mangaId: number): boolean {
-    return this.settings.folders.find(f => f.id === COMPLETED_FOLDER_ID)?.mangaIds.includes(mangaId) ?? false;
-  }
-
-  checkAndMarkCompleted(mangaId: number, chapters: Chapter[]) {
-    if (!chapters.length) return;
-    if (chapters.every(c => c.isRead)) this.markMangaCompleted(mangaId);
-    else this.unmarkMangaCompleted(mangaId);
-  }
 
   linkManga(idA: number, idB: number) {
     if (idA === idB) return;
@@ -560,6 +526,7 @@ class Store {
   }
 
   dismissToast(id: string)                      { this.toasts = this.toasts.filter(x => x.id !== id); }
+  setCategories(cats: Category[])              { this.categories       = cats; }
   setActiveDownloads(next: ActiveDownload[])     { this.activeDownloads  = next; }
   setNavPage(next: NavPage)                      { this.navPage          = next; }
   setLibraryFilter(next: LibraryFilter)          { this.libraryFilter    = next; }
@@ -575,53 +542,6 @@ class Store {
   updateSettings(patch: Partial<Settings>)       { this.settings = { ...this.settings, ...patch }; }
   resetKeybinds()                                { this.settings = { ...this.settings, keybinds: DEFAULT_KEYBINDS }; }
 
-  addFolder(name: string): string {
-    const id = genId();
-    this.settings = { ...this.settings, folders: [...this.settings.folders, { id, name: name.trim(), mangaIds: [], showTab: false }] };
-    return id;
-  }
-
-  removeFolder(id: string) {
-    this.settings = { ...this.settings, folders: this.settings.folders.filter(f => f.id !== id || f.system) };
-  }
-
-  renameFolder(id: string, name: string) {
-    this.settings = {
-      ...this.settings,
-      folders: this.settings.folders.map(f => f.id === id && !f.system ? { ...f, name: name.trim() } : f),
-    };
-  }
-
-  toggleFolderTab(id: string) {
-    this.settings = {
-      ...this.settings,
-      folders: this.settings.folders.map(f => f.id === id ? { ...f, showTab: !f.showTab } : f),
-    };
-  }
-
-  assignMangaToFolder(folderId: string, mangaId: number) {
-    this.settings = {
-      ...this.settings,
-      folders: this.settings.folders.map(f =>
-        f.id === folderId && !f.mangaIds.includes(mangaId)
-          ? { ...f, mangaIds: [...f.mangaIds, mangaId] }
-          : f
-      ),
-    };
-  }
-
-  removeMangaFromFolder(folderId: string, mangaId: number) {
-    this.settings = {
-      ...this.settings,
-      folders: this.settings.folders.map(f =>
-        f.id === folderId ? { ...f, mangaIds: f.mangaIds.filter(id => id !== mangaId) } : f
-      ),
-    };
-  }
-
-  getMangaFolders(mangaId: number): Folder[] {
-    return this.settings.folders.filter(f => f.mangaIds.includes(mangaId));
-  }
 
   saveCustomTheme(theme: CustomTheme) {
     const existing = this.settings.customThemes.findIndex(t => t.id === theme.id);
@@ -637,6 +557,42 @@ class Store {
     this.settings = { ...this.settings, customThemes: next, theme: wasActive ? "dark" : this.settings.theme };
   }
 
+  /**
+   * Auto-assign or remove the "Completed" category for a manga based on
+   * whether all chapters are read. Pass the `gql` executor to avoid a
+   * circular import between state.svelte.ts and client.ts.
+   *
+   * Call after any batch mark-read/unread operation.
+   */
+  async checkAndMarkCompleted(
+    mangaId:    number,
+    chaps:      Chapter[],
+    categories: Category[],
+    gqlFn:      (query: string, vars: Record<string, unknown>) => Promise<unknown>,
+    UPDATE_MANGA_CATEGORIES: string,
+    UPDATE_MANGA?: string,
+  ): Promise<void> {
+    if (!chaps.length) return;
+    const allRead   = chaps.every(c => c.isRead);
+    const completed = categories.find(c => c.name === "Completed");
+    if (!completed) return;
+    if (allRead) {
+      await gqlFn(UPDATE_MANGA_CATEGORIES, { mangaId, addTo: [completed.id], removeFrom: [] }).catch(console.error);
+      // Ensure the manga is in the library so it shows up in the Saved tab
+      if (UPDATE_MANGA) {
+        await gqlFn(UPDATE_MANGA, { id: mangaId, inLibrary: true }).catch(console.error);
+      }
+    } else {
+      await gqlFn(UPDATE_MANGA_CATEGORIES, { mangaId, addTo: [], removeFrom: [completed.id] }).catch(console.error);
+    }
+  }
+
+  toggleHiddenCategory(id: number) {
+    const ids = this.settings.hiddenCategoryIds ?? [];
+    const next = ids.includes(id) ? ids.filter(x => x !== id) : [...ids, id];
+    this.settings = { ...this.settings, hiddenCategoryIds: next };
+  }
+
   clearDiscoverCache() {
     this.discoverCache      = new Map();
     this.discoverLibraryIds = new Set();
@@ -654,16 +610,13 @@ export function addHistory(entry: HistoryEntry, completed?: boolean, minutes?: n
 export function clearHistory()                                           { store.clearHistory(); }
 export function clearHistoryForManga(mangaId: number)                    { store.clearHistoryForManga(mangaId); }
 export function wipeAllData()                                            { store.wipeAllData(); }
-export function markMangaCompleted(mangaId: number)                      { store.markMangaCompleted(mangaId); }
-export function unmarkMangaCompleted(mangaId: number)                    { store.unmarkMangaCompleted(mangaId); }
-export function isCompleted(mangaId: number)                             { return store.isCompleted(mangaId); }
-export function checkAndMarkCompleted(mangaId: number, c: Chapter[])     { store.checkAndMarkCompleted(mangaId, c); }
 export function linkManga(idA: number, idB: number)                      { store.linkManga(idA, idB); }
 export function unlinkManga(idA: number, idB: number)                    { store.unlinkManga(idA, idB); }
 export function getLinkedMangaIds(mangaId: number)                       { return store.getLinkedMangaIds(mangaId); }
 export function setHeroSlot(i: 1|2|3, mangaId: number | null)            { store.setHeroSlot(i, mangaId); }
 export function addToast(toast: Omit<Toast, "id">)                       { store.addToast(toast); }
 export function dismissToast(id: string)                                 { store.dismissToast(id); }
+export function setCategories(cats: Category[])                           { store.setCategories(cats); }
 export function setActiveDownloads(next: ActiveDownload[])               { store.setActiveDownloads(next); }
 export function setNavPage(next: NavPage)                                { store.setNavPage(next); }
 export function setLibraryFilter(next: LibraryFilter)                    { store.setLibraryFilter(next); }
@@ -678,13 +631,17 @@ export function setLibraryTagFilter(next: string[])                      { store
 export function setSettingsOpen(next: boolean)                           { store.setSettingsOpen(next); }
 export function updateSettings(patch: Partial<Settings>)                 { store.updateSettings(patch); }
 export function resetKeybinds()                                          { store.resetKeybinds(); }
-export function addFolder(name: string)                                  { return store.addFolder(name); }
-export function removeFolder(id: string)                                 { store.removeFolder(id); }
-export function renameFolder(id: string, name: string)                   { store.renameFolder(id, name); }
-export function toggleFolderTab(id: string)                              { store.toggleFolderTab(id); }
-export function assignMangaToFolder(folderId: string, mangaId: number)   { store.assignMangaToFolder(folderId, mangaId); }
-export function removeMangaFromFolder(folderId: string, mangaId: number) { store.removeMangaFromFolder(folderId, mangaId); }
-export function getMangaFolders(mangaId: number)                         { return store.getMangaFolders(mangaId); }
 export function clearDiscoverCache()                                       { store.clearDiscoverCache(); }
+export function toggleHiddenCategory(id: number)                           { store.toggleHiddenCategory(id); }
 export function saveCustomTheme(theme: CustomTheme)                        { store.saveCustomTheme(theme); }
 export function deleteCustomTheme(id: string)                              { store.deleteCustomTheme(id); }
+export async function checkAndMarkCompleted(
+  mangaId:    number,
+  chaps:      Chapter[],
+  categories: Category[],
+  gqlFn:      (query: string, vars: Record<string, unknown>) => Promise<unknown>,
+  UPDATE_MANGA_CATEGORIES: string,
+  UPDATE_MANGA?: string,
+): Promise<void> {
+  return store.checkAndMarkCompleted(mangaId, chaps, categories, gqlFn, UPDATE_MANGA_CATEGORIES, UPDATE_MANGA);
+}