Fix: Forgot Auto-Bookmark Toggle & NSFW On GenreDrill

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')

Todo

@@ -1,21 +1,19 @@
 Major Revisions:
- - Moku + Crossplatform Support (MacOS Remaining)
- - Contemplate Anime Support, Add Novel Support (Consumet API)
- - Enable Cloudflare Bypass (Suwayomi Config)
  - Moku-Share to Easily Migrate/Share Manga (Investigate Usecase/Feasibility)
- - Adjustment in Settings for Theme Editor:
-   - Allow User to Edit/Create Themes
-   - Allow For Command-Line IPC for Temporary (Apply Once) & Permanent Themes OR External Methodology for Matugen Colors
 
 Minor Revisions:
  - Improve Deduplication Algorithm with Advanced Option Settings (Implement Chapter & Author-based Comparisons, Resource Intensive)
  - Integrate Download Directory Changes (Settings)
  - Investigate feasibility of Multi-Page Screenshot (Reader)
  - Add Hover Info on Library (Make sure doesn't conflict with additional clicks)
+ - Revise Migration (https://github.com/Suwayomi/Suwayomi-WebUI/pull/1073)
+ - Look at how Manga are Organized in WebUI and Implement into Series-Detail (Chapter Display is Off)
+ - Adjustment in Settings for Theme Editor:
+    - Patch Color-Picker to Work Properly
 
 Priority Bugs:
  - Cache ALL Cover Pictures & Details for Manga in Library
- - MacOS Full-Screen & UI Compatability (TitleBar)
+ - Investigate Zoom (Reader), Appears to have Cutoff, etc.
 
 General/Misc Bugs:
  - Fix Highlightable Elements
@@ -25,9 +23,20 @@ General/Misc Bugs:
  - Investigate Prod vs. Dev Directory Change/Data Load (Caused by Library Algorithm Revision?)
 
 In-Progress:`
- - Fix Reader Chapter Shifts (Glitched Sentinel)
+ - Enable Cloudflare Bypass (Suwayomi Config) (Requires Patching)
-   - Still Shifts Down after reading ~8+ Chapters?
+ - Fix NSFW Parsing (Appears to not Work???)
-   - Identify When Chapters are Unloaded, How to Preserve Structure
+
+ - Check & Fix Zoom System
+    - Incredibly zoomed in on Windows (Appears to work fine on 1440p)
+    - Zoom Values are Incorrect
+    - Global Zoom should only scale Reader UI, not Manga
+
+ - Fix Resume-from-Read
+    - Start on Chapter 46 -> Go all the way to Chapter 47 (Page 28)
+      - Results in Opening Chapter 46 to take to last page of Chapter (Cache not Cleared).
+      - Add Event that if different chapter is opened, cache is cleared on all previous chapters.
+    - Add into Settings
+
 
 
 Important Commands:

dev.moku.app.yml

@@ -181,7 +181,7 @@ modules:
         path: .
       - type: file
         path: packaging/frontend-dist.tar.gz
-        sha256: cb2f65bad39db8d7411b15383965812fdd02c02697431e4eb3f3f05281eac49d
+        sha256: fb01fc1a98499aeb5cf3e464c430a94c78ab1e68f15220ea8f95091f6ca593f2
       - 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.6.1";
 
           pkgs = import inputs.nixpkgs {
             inherit system;
@@ -71,7 +71,7 @@
               inherit version;
               src            = frontendSrc;
               fetcherVersion = 1;
-              hash           = "sha256-4QUSgWgMu7FGn44+TGmACheokPhaBdHvA/055SqUs0Q=";
+              hash           = "sha256-ezlckHhfSIe/Hs30tbiN0a/EuvGxhO5L020aup23Ozg=";
             };
 
             buildPhase   = "pnpm build";
@@ -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",
@@ -15,7 +15,8 @@
     "@tauri-apps/plugin-shell": "^2.3.5",
     "clsx": "^2.1.1",
     "phosphor-svelte": "^3.1.0",
-    "svelte-spa-router": "^4.0.1"
+    "svelte-spa-router": "^4.0.1",
+    "tauri-plugin-drpc": "^1.0.3"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^4.0.4",

pnpm-lock.yaml

@@ -26,6 +26,9 @@ importers:
       svelte-spa-router:
         specifier: ^4.0.1
         version: 4.0.2
+      tauri-plugin-drpc:
+        specifier: ^1.0.3
+        version: 1.0.3(typescript@5.9.3)
     devDependencies:
       '@sveltejs/vite-plugin-svelte':
         specifier: ^4.0.4
@@ -744,6 +747,11 @@ packages:
     resolution: {integrity: sha512-TTDxwYnHkova6Wsyj1PGt9TByuWqvMoeY1bQiuAf2DM/JeDSMw7FjRKzk8K/5mJ99vGOKhbCqTDpyAKwjp4igg==}
     engines: {node: '>=18'}
 
+  tauri-plugin-drpc@1.0.3:
+    resolution: {integrity: sha512-vl5dXhjKbl7+Nf9veW12usdmIUtZXwEf91SzxQPZlbRRJ/sjizbbQlnkUTtx6baJuGzz0KXXgP9xUhF39BdiXQ==}
+    peerDependencies:
+      typescript: ^5.0.0
+
   to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -1364,6 +1372,10 @@ snapshots:
       magic-string: 0.30.21
       zimmerframe: 1.1.4
 
+  tauri-plugin-drpc@1.0.3(typescript@5.9.3):
+    dependencies:
+      typescript: 5.9.3
+
   to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "moku"
-version = "0.4.1"
+version = "0.6.1"
 edition = "2021"
 
 [lib]
@@ -26,6 +26,7 @@ walkdir = "2"
 sysinfo = "0.32"
 dirs = "5"
 tauri-plugin-os = "2.3.2"
+tauri-plugin-drpc = "0.1.6"
 
 [profile.release]
 codegen-units = 1

src-tauri/capabilities/default.json

@@ -32,6 +32,12 @@
     "process:default",
     "process:allow-restart",
     "http:default",
-    "http:allow-fetch"
+    "http:allow-fetch",
+    "drpc:default",
+    "drpc:allow-is-running",
+    "drpc:allow-spawn-thread",
+    "drpc:allow-destroy-thread",
+    "drpc:allow-set-activity",
+    "drpc:allow-clear-activity"
   ]
 }

src-tauri/src/lib.rs

@@ -61,10 +61,14 @@ fn resolve_downloads_path(downloads_path: &str) -> PathBuf {
     if !downloads_path.trim().is_empty() {
         return PathBuf::from(downloads_path);
     }
+    // Mirror Suwayomi-Server's own default: <data_dir>/Tachidesk/downloads
+    // Windows: %LOCALAPPDATA%\Tachidesk\downloads
+    // macOS:   ~/Library/Application Support/Tachidesk/downloads
+    // Linux:   $XDG_DATA_HOME/Tachidesk/downloads  (~/.local/share/Tachidesk/downloads)
     let base = std::env::var("XDG_DATA_HOME")
         .map(PathBuf::from)
         .unwrap_or_else(|_| dirs::data_dir().unwrap_or_else(|| PathBuf::from("/")));
-    base.join("Tachidesk/downloads")
+    base.join("Tachidesk").join("downloads")
 }
 
 #[tauri::command]
@@ -104,14 +108,90 @@ fn get_storage_info(downloads_path: String) -> Result<StorageInfo, String> {
     })
 }
 
+/// Returns the resolved default downloads path for the current platform.
+/// This mirrors resolve_downloads_path("") so the frontend can display it.
 #[tauri::command]
-fn get_platform_ui_scale() -> f64 {
+fn get_default_downloads_path() -> String {
-    #[cfg(target_os = "windows")]
+    resolve_downloads_path("").to_string_lossy().into_owned()
-    return 1.0;
+}
-    #[cfg(target_os = "macos")]
+
-    return 1.0;
+/// Returns true if the given path exists and is a directory.
-    #[cfg(not(any(target_os = "windows", target_os = "macos")))]
+#[tauri::command]
-    return 1.5;
+fn check_path_exists(path: String) -> bool {
+    std::path::Path::new(path.trim()).is_dir()
+}
+
+/// Creates a directory and all missing parent directories.
+#[tauri::command]
+fn create_directory(path: String) -> Result<(), String> {
+    std::fs::create_dir_all(path.trim()).map_err(|e| e.to_string())
+}
+
+/// Moves all content from `src` into `dst`, then removes `src`.
+/// Emits `migrate_progress` events: `{ done, total, current }`.
+/// Only deletes the source tree after every file is confirmed copied.
+#[tauri::command]
+async fn migrate_downloads(
+    app: tauri::AppHandle,
+    src: String,
+    dst: String,
+) -> Result<(), String> {
+    use tauri::Emitter;
+    use std::fs;
+
+    let src_path = std::path::PathBuf::from(src.trim());
+    let dst_path = std::path::PathBuf::from(dst.trim());
+
+    if !src_path.is_dir() {
+        return Ok(()); // nothing to migrate
+    }
+
+    // Count files first so the frontend can show accurate progress
+    let total: u64 = WalkDir::new(&src_path)
+        .into_iter()
+        .filter_map(|e| e.ok())
+        .filter(|e| e.file_type().is_file())
+        .count() as u64;
+
+    let _ = app.emit("migrate_progress", serde_json::json!({
+        "done": 0u64, "total": total, "current": ""
+    }));
+
+    let mut done: u64 = 0;
+
+    for entry in WalkDir::new(&src_path).into_iter().filter_map(|e| e.ok()) {
+        let rel    = entry.path().strip_prefix(&src_path).map_err(|e| e.to_string())?;
+        let target = dst_path.join(rel);
+
+        if entry.file_type().is_dir() {
+            fs::create_dir_all(&target).map_err(|e| e.to_string())?;
+        } else {
+            if let Some(parent) = target.parent() {
+                fs::create_dir_all(parent).map_err(|e| e.to_string())?;
+            }
+            fs::copy(entry.path(), &target).map_err(|e| e.to_string())?;
+            done += 1;
+            let _ = app.emit("migrate_progress", serde_json::json!({
+                "done": done,
+                "total": total,
+                "current": rel.to_string_lossy()
+            }));
+        }
+    }
+
+    // Only remove source after all files are confirmed copied
+    fs::remove_dir_all(&src_path).map_err(|e| e.to_string())?;
+    Ok(())
+}
+
+/// Returns the OS/monitor DPI scale factor for the window's current monitor.
+/// This is the real hardware scale — 1.0 on standard displays, 2.0 on HiDPI/4K,
+/// 1.25–1.5 on Windows displays with OS-level scaling applied.
+/// The frontend multiplies this by the user's uiZoom preference to get the
+/// final effective zoom applied to document.documentElement.
+#[tauri::command]
+fn get_platform_ui_scale(window: tauri::Window) -> f64 {
+    window.scale_factor().unwrap_or(1.0)
 }
 
 fn kill_tachidesk(app: &tauri::AppHandle) {
@@ -121,9 +201,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 +233,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
@@ -225,10 +328,16 @@ struct ServerInvocation {
     working_dir: Option<PathBuf>,
 }
 
+/// Locate the `java` / `java.exe` binary inside a bundled JRE directory.
+///
+/// Expected layout (Windows and Linux):
+///   <bundle_dir>/jre/bin/java[.exe]
+///
+/// On Windows `strip_unc` is applied so Java doesn't choke on `\\?\` prefixes.
 #[cfg(not(target_os = "macos"))]
 fn find_java_in_bundle(bundle_dir: &PathBuf, log: &mut Option<std::fs::File>) -> Option<PathBuf> {
     #[cfg(target_os = "windows")]
-    let java = bundle_dir.join("jre").join("bin").join("java.exe");
+    let java = strip_unc(bundle_dir.join("jre").join("bin").join("java.exe"));
 
     #[cfg(not(target_os = "windows"))]
     let java = bundle_dir.join("jre").join("bin").join("java");
@@ -253,28 +362,35 @@ fn resolve_server_binary(
 ) -> Result<ServerInvocation, SpawnError> {
     do_log(log, &format!("[resolve] binary arg = {:?}", binary));
 
+    // ── 1. User-specified binary path ─────────────────────────────────────────
+    // Primary: honour the path as-is (doc-2 behaviour — trust the user).
+    // Fallback: if the path doesn't exist after stripping UNC, log a warning
+    // and continue so the bundled detection still has a chance.
     if !binary.trim().is_empty() {
-        do_log(log, "[resolve] using user-supplied binary path");
+        let path = strip_unc(PathBuf::from(binary.trim()));
-        return Ok(ServerInvocation {
+        do_log(log, &format!("[resolve] user path: {:?} exists={}", path, path.exists()));
-            bin:         binary.to_string(),
+        if path.exists() {
-            args:        vec![],
+            return Ok(ServerInvocation {
-            working_dir: None,
+                bin:         path.to_string_lossy().into_owned(),
-        });
+                args:        vec![],
+                working_dir: path.parent().map(|p| p.to_path_buf()),
+            });
+        }
+        // Fallback: path was set but file is missing — warn and keep trying.
+        do_log(log, "[resolve] WARNING: user-supplied path not found, falling through to bundled detection");
     }
 
-    let resource_dir = match app.path().resource_dir() {
+    // Resolve and UNC-strip resource_dir once; used by all non-macOS branches.
-        Ok(p) => {
+    #[cfg(not(target_os = "macos"))]
-            let stripped = strip_unc(p);
+    let resource_dir = {
-            do_log(log, &format!("[resolve] resource_dir (stripped) = {:?}", stripped));
+        let raw = app.path().resource_dir().unwrap_or_default();
-            stripped
+        let stripped = strip_unc(raw);
-        }
+        do_log(log, &format!("[resolve] resource_dir (stripped) = {:?}", stripped));
-        Err(e) => {
+        stripped
-            let msg = format!("resource_dir error: {e}");
-            do_log(log, &format!("[resolve] ERROR: {}", msg));
-            return Err(SpawnError::SpawnFailed(msg));
-        }
     };
 
+    // ── 2. Bundled JRE + JAR (Windows / Linux — specific layout) ─────────────
+    // Primary path from doc-2: binaries/suwayomi-bundle/bin/Suwayomi-Server.jar
     #[cfg(not(target_os = "macos"))]
     {
         let bundle_dir = resource_dir.join("binaries").join("suwayomi-bundle");
@@ -291,46 +407,92 @@ fn resolve_server_binary(
                 if jar.exists() {
                     do_log(log, "[resolve] both java and jar found — using bundled JRE");
                     return Ok(ServerInvocation {
-                        bin: java.to_string_lossy().into_owned(),
+                        bin:  java.to_string_lossy().into_owned(),
-                        args: vec![
+                        args: vec!["-jar".to_string(), jar.to_string_lossy().into_owned()],
-                            "-jar".to_string(),
-                            jar.to_string_lossy().into_owned(),
-                        ],
                         working_dir: Some(bundle_dir),
                     });
-                } else {
-                    do_log(log, "[resolve] java found but jar MISSING — skipping bundled path");
                 }
+                do_log(log, "[resolve] java found but jar MISSING — falling through");
             }
             None => {
-                do_log(log, "[resolve] java NOT found in bundle — skipping bundled path");
+                do_log(log, "[resolve] java NOT found in bundle — falling through");
             }
         }
     }
 
+    // ── 2b. Bundled launcher scripts / native sidecars (Windows / Linux) ──────
+    // Fallback for older bundle layouts that ship a wrapper script instead of a
+    // bare JRE + JAR.  Also scans for any *.jar in resource_dir as a last resort.
+    #[cfg(not(target_os = "macos"))]
+    {
+        // Named launcher scripts.
+        let script_candidates = ["suwayomi-launcher", "suwayomi-launcher.sh", "tachidesk-server"];
+        for name in &script_candidates {
+            let p = resource_dir.join(name);
+            do_log(log, &format!("[resolve] sidecar candidate: {:?} exists={}", p, p.exists()));
+            if p.exists() {
+                do_log(log, &format!("[resolve] using sidecar: {:?}", p));
+                return Ok(ServerInvocation {
+                    bin:         p.to_string_lossy().into_owned(),
+                    args:        vec![],
+                    working_dir: Some(resource_dir.clone()),
+                });
+            }
+        }
+
+        // Generic JRE at resource_dir root + any *.jar alongside it.
+        do_log(log, "[resolve] no named sidecar found, trying generic JRE + any jar in resource_dir");
+        if let Some(java) = find_java_in_bundle(&resource_dir, log) {
+            let jar = std::fs::read_dir(&resource_dir)
+                .ok()
+                .and_then(|mut rd| {
+                    rd.find(|e| {
+                        e.as_ref()
+                            .map(|e| e.file_name().to_string_lossy().ends_with(".jar"))
+                            .unwrap_or(false)
+                    })
+                    .and_then(|e| e.ok())
+                    .map(|e| e.path())
+                });
+
+            do_log(log, &format!("[resolve] generic jar candidate: {:?}", jar));
+
+            if let Some(jar_path) = jar {
+                do_log(log, &format!("[resolve] using generic JRE java={:?} jar={:?}", java, jar_path));
+                return Ok(ServerInvocation {
+                    bin:  java.to_string_lossy().into_owned(),
+                    args: vec!["-jar".to_string(), jar_path.to_string_lossy().into_owned()],
+                    working_dir: Some(resource_dir),
+                });
+            }
+            do_log(log, "[resolve] generic JRE found but no .jar — falling through");
+        }
+    }
+
+    // ── 3. macOS app bundle — MacOS/ then Resources/ ──────────────────────────
     #[cfg(target_os = "macos")]
     {
-        // Tauri places externalBin sidecars next to the main binary in
+        let resource_dir = app.path().resource_dir().unwrap_or_default();
-        // Contents/MacOS/, not in Contents/Resources/.  Derive that path
+        let macos_dir    = resource_dir
-        // from resource_dir (Contents/Resources → Contents/MacOS).
+            .parent()
-        let macos_dir = resource_dir.join("../MacOS")
+            .map(|p| p.join("MacOS"))
-            .canonicalize()
+            .unwrap_or_default();
-            .unwrap_or_else(|_| resource_dir.join("../MacOS"));
 
         do_log(log, &format!("[resolve] macOS macos_dir = {:?}", macos_dir));
 
-        // Tauri strips the target triple when installing externalBin sidecars
+        // Tauri strips the target triple when installing externalBin sidecars into
-        // into Contents/MacOS/, so the binary is always just "suwayomi-server"
+        // Contents/MacOS/, so the binary is "suwayomi-server" at runtime.
-        // at runtime. The triple-suffixed names are only needed on disk at
+        // Triple-suffixed names are kept as a belt-and-suspenders fallback for
-        // build time for Tauri to pick the right arch during bundling.
+        // dev / flat layouts.
         let candidates = [
             "suwayomi-server",
             "suwayomi-server-aarch64-apple-darwin",
             "suwayomi-server-x86_64-apple-darwin",
+            "suwayomi-launcher",
+            "suwayomi-launcher.sh",
+            "tachidesk-server",
         ];
 
-        // Search MacOS/ first (correct location), then Resources/ as fallback
-        // for flat dev layouts where the script sits next to resources.
         for search_dir in &[&macos_dir, &resource_dir] {
             for name in &candidates {
                 let p = search_dir.join(name);
@@ -347,8 +509,18 @@ fn resolve_server_binary(
         }
     }
 
+    // ── 4. PATH fallback ──────────────────────────────────────────────────────
+    // Use `where` on Windows, `which` everywhere else.
     do_log(log, "[resolve] trying PATH fallback");
     for name in &["suwayomi-server", "tachidesk-server"] {
+        #[cfg(target_os = "windows")]
+        let found = std::process::Command::new("where")
+            .arg(name)
+            .output()
+            .map(|o| o.status.success())
+            .unwrap_or(false);
+
+        #[cfg(not(target_os = "windows"))]
         let found = std::process::Command::new("which")
             .arg(name)
             .output()
@@ -550,6 +722,7 @@ fn restart_app(app: tauri::AppHandle) {
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
+        .plugin(tauri_plugin_drpc::init())
         .plugin(tauri_plugin_os::init())
         .plugin(tauri_plugin_shell::init())
         .plugin(tauri_plugin_http::init())
@@ -558,6 +731,10 @@ pub fn run() {
         .manage(ServerState(Mutex::new(None)))
         .invoke_handler(tauri::generate_handler![
             get_storage_info,
+            get_default_downloads_path,
+            check_path_exists,
+            create_directory,
+            migrate_downloads,
             spawn_server,
             kill_server,
             get_platform_ui_scale,

src-tauri/tauri.conf.json

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

src/App.svelte

@@ -7,6 +7,7 @@
   import { gql } from "./lib/client";
   import { GET_DOWNLOAD_STATUS } from "./lib/queries";
   import { store, addToast, setActiveDownloads, setSettingsOpen } from "./store/state.svelte";
+  import { initRpc, setIdle, clearReading, destroyRpc } from "./lib/discord";
   import type { DownloadStatus, DownloadQueueItem } from "./lib/types";
   import Layout       from "./components/layout/Layout.svelte";
   import Reader       from "./components/reader/Reader.svelte";
@@ -74,13 +75,26 @@
   let notConfigured = $state(false);
   let idle          = $state(false);
   let devSplash     = $state(false);
-  let platformScale = $state(1);
+
+  let platformScale = $state(1.0);
+  let _appliedZoom = -1;
+  let _vhRafId: number | null = null;
 
   function applyZoom() {
-    const normalized = store.settings.uiScale * platformScale;
+    const uiZoom = store.settings.uiZoom ?? 1.0;
-    document.documentElement.style.zoom = `${normalized}%`;
+    if (uiZoom === _appliedZoom) return;
-    document.documentElement.style.setProperty("--ui-scale", String(normalized));
+    _appliedZoom = uiZoom;
-    document.documentElement.style.setProperty("--visual-vh", `${window.innerHeight / (normalized / 100)}px`);
+
+    const pct = uiZoom * 100;
+    document.documentElement.style.setProperty("--ui-zoom", String(uiZoom));
+    document.documentElement.style.setProperty("--ui-scale", String(uiZoom));
+    document.documentElement.style.zoom = `${pct}%`;
+
+    if (_vhRafId !== null) cancelAnimationFrame(_vhRafId);
+    _vhRafId = requestAnimationFrame(() => {
+      _vhRafId = null;
+      document.documentElement.style.setProperty("--visual-vh", `${window.innerHeight / uiZoom}px`);
+    });
   }
 
   let prevQueue: DownloadQueueItem[] = [];
@@ -126,7 +140,7 @@
   });
 
   $effect(() => {
-    store.settings.uiScale; platformScale;
+    void store.settings.uiZoom;
     applyZoom();
   });
 
@@ -214,14 +228,20 @@
     document.addEventListener("contextmenu", e => e.preventDefault());
     (window as any).__mokuShowSplash = () => devSplash = true;
 
-    platformScale = await invoke<number>("get_platform_ui_scale").catch(() => 1);
+    platformScale = await invoke<number>("get_platform_ui_scale").catch(() => 1.0);
     applyZoom();
 
     store.isFullscreen = await win.isFullscreen();
+
     const unlistenResize = await win.onResized(async () => {
       store.isFullscreen = await win.isFullscreen();
     });
 
+    const unlistenScale = await win.onScaleChanged(async (event) => {
+      platformScale = event.payload.scaleFactor;
+      applyZoom();
+    });
+
     if (store.settings.autoStartServer) {
       invoke<void>("spawn_server", { binary: store.settings.serverBinary }).catch((err: any) => {
         if (err?.kind === "NotConfigured") {
@@ -240,6 +260,8 @@
     return () => {
       cancelProbe = true;
       unlistenResize();
+      unlistenScale();
+      destroyRpc();
       if (store.settings.autoStartServer) invoke("kill_server").catch(() => {});
       if (idleTimer) clearTimeout(idleTimer);
       if (pollInterval) clearInterval(pollInterval);
@@ -254,6 +276,40 @@
     return () => clearTimeout(timer);
   });
 
+  $effect(() => {
+    if (store.settings.discordRpc) {
+      initRpc();
+    } else {
+      clearReading();
+      destroyRpc();
+    }
+  });
+
+  $effect(() => {
+    if (!store.activeChapter) {
+      if (store.settings.discordRpc) setIdle();
+    }
+  });
+
+  function handleZoomKey(e: KeyboardEvent) {
+    if (!e.ctrlKey) return;
+    if (e.key === "=" || e.key === "+") {
+      e.preventDefault();
+      store.settings.uiZoom = Math.min(2.0, Math.round(((store.settings.uiZoom ?? 1.0) + 0.1) * 10) / 10);
+    } else if (e.key === "-") {
+      e.preventDefault();
+      store.settings.uiZoom = Math.max(0.5, Math.round(((store.settings.uiZoom ?? 1.0) - 0.1) * 10) / 10);
+    } else if (e.key === "0") {
+      e.preventDefault();
+      store.settings.uiZoom = 1.0;
+    }
+  }
+
+  $effect(() => {
+    window.addEventListener("keydown", handleZoomKey);
+    return () => window.removeEventListener("keydown", handleZoomKey);
+  });
+
   function handleRetry() {
     failed        = false;
     notConfigured = false;
@@ -278,7 +334,7 @@
     onRetry={handleRetry}
     onBypass={handleBypass} />
 {:else}
-  <div class="root">
+  <div id="app-shell" class="root">
     {#if idle && !store.activeChapter}
       <SplashScreen mode="idle" showCards={store.settings.splashCards ?? true}
         onDismiss={() => { idle = false; resetIdle(); }} />
@@ -302,4 +358,4 @@
 <style>
   .root { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
   .content { flex: 1; overflow: hidden; }
-</style>
+</style>

src/components/layout/Sidebar.svelte

@@ -50,19 +50,20 @@
 </aside>
 
 <style>
-  .root { width: var(--sidebar-width); flex-shrink: 0; background: var(--bg-void); display: flex; flex-direction: column; align-items: center; padding: var(--sp-4) 0; }
+  .root { width: var(--sidebar-width); flex-shrink: 0; background: var(--bg-void); display: flex; flex-direction: column; align-items: center; padding: var(--sp-4) 0; overflow: hidden; min-height: 0; height: 100%; }
-  .logo { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-3); background: none; border: none; outline: none; cursor: pointer; border-radius: var(--radius-lg); transition: opacity var(--t-base), transform var(--t-base); padding: 0; appearance: none; -webkit-appearance: none; }
+  .logo { width: 80px; height: 80px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-3); background: none; border: none; outline: none; cursor: pointer; border-radius: var(--radius-lg); transition: opacity var(--t-base), transform var(--t-base); padding: 0; appearance: none; -webkit-appearance: none; }
   .logo:hover { opacity: 0.8; transform: scale(0.96); }
   .logo:active { transform: scale(0.92); }
   .logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
   .logo-icon { width: 67px; height: 67px; background-color: var(--accent); mask-image: url("../../assets/moku-icon-wordmark.svg"); mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-image: url("../../assets/moku-icon-wordmark.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; filter: drop-shadow(0 0 8px rgba(107,143,107,0.35)); pointer-events: none; }
-  .nav { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); width: 100%; padding: 0 var(--sp-2); }
+  .nav { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); width: 100%; padding: 0 var(--sp-2); overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
-  .tab { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--text-faint); background: none; border: none; outline: none; cursor: pointer; padding: 0; appearance: none; -webkit-appearance: none; transition: color var(--t-base), background var(--t-base); }
+  .nav::-webkit-scrollbar { display: none; }
+  .tab { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--text-faint); background: none; border: none; outline: none; cursor: pointer; padding: 0; appearance: none; -webkit-appearance: none; transition: color var(--t-base), background var(--t-base); }
   .tab:hover { color: var(--text-muted); background: var(--bg-raised); }
   .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
   .tab.active { color: var(--accent-fg); background: var(--accent-muted); }
   .tab.active:hover { color: var(--accent-fg); background: var(--accent-muted); }
-  .bottom { display: flex; flex-direction: column; align-items: center; width: 100%; padding: var(--sp-3) var(--sp-2) 0; border-top: 1px solid var(--border-dim); margin-top: var(--sp-3); }
+  .bottom { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; width: 100%; padding: var(--sp-3) var(--sp-2) 0; border-top: 1px solid var(--border-dim); margin-top: var(--sp-3); }
   .settings-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--text-faint); background: none; border: none; outline: none; cursor: pointer; padding: 0; appearance: none; -webkit-appearance: none; transition: color var(--t-base), background var(--t-base), transform var(--t-slow); }
   .settings-btn:hover { color: var(--text-muted); background: var(--bg-raised); transform: rotate(30deg); }
   .settings-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

src/components/layout/SplashScreen.svelte

@@ -247,7 +247,7 @@
       const sin = tg.sinA * Math.cos(delta) + tg.cosA * Math.sin(delta);
       ctx.globalAlpha = alpha;
       ctx.setTransform(cos * dpr, sin * dpr, -sin * dpr, cos * dpr, c.cx * dpr, cy * dpr);
-      const sw = stamps[i].width / dpr, sh = stamps[i].height / dpr;
+      const sw = stamps[i].width, sh = stamps[i].height;
       ctx.drawImage(stamps[i], -sw / 2, -sh / 2, sw, sh);
     }
     ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.globalAlpha = 1;

src/components/layout/Toaster.svelte

@@ -17,8 +17,8 @@
   });
 
   const icons: Record<Toast["kind"], string> = {
-    success:  "M9 12l2 2 4-4M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2z",
+    success:  "M20 6L9 17l-5-5",
-    error:    "M12 9v4M12 17h.01M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2z",
+    error:    "M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z",
     info:     "M12 16v-4M12 8h.01M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2z",
     download: "M12 3v13M7 11l5 5 5-5M5 21h14",
   };
@@ -27,10 +27,15 @@
 {#if store.toasts.length}
   <div class="toaster" aria-live="polite">
     {#each store.toasts as t (t.id)}
-      <div class="toast toast-{t.kind}" role="alert">
+      <div
+        class="toast toast-{t.kind}"
+        role="alert"
+        onclick={() => dismissToast(t.id)}
+      >
+        <div class="accent-bar"></div>
         <span class="icon">
-          <svg width="15" height="15" viewBox="0 0 24 24" fill="none"
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none"
-            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <path d={icons[t.kind]} />
           </svg>
         </span>
@@ -38,12 +43,6 @@
           <p class="title">{t.title}</p>
           {#if t.body}<p class="sub">{t.body}</p>{/if}
         </div>
-        <button class="close" onclick={() => dismissToast(t.id)} title="Dismiss">
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
-            stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
-            <path d="M18 6L6 18M6 6l12 12" />
-          </svg>
-        </button>
       </div>
     {/each}
   </div>
@@ -51,41 +50,91 @@
 
 <style>
   .toaster {
-    position: fixed; bottom: var(--sp-5); right: var(--sp-5);
+    position: fixed;
-    z-index: 9999; display: flex; flex-direction: column;
+    bottom: var(--sp-5);
-    gap: var(--sp-2); pointer-events: none; max-width: 320px;
+    right: var(--sp-5);
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    pointer-events: none;
+    max-width: 300px;
   }
+
   .toast {
-    display: flex; align-items: flex-start; gap: var(--sp-2);
+    display: flex;
-    padding: var(--sp-2) var(--sp-3);
+    align-items: center;
-    border-radius: var(--radius-lg);
+    gap: var(--sp-2);
-    border: 1px solid var(--border-base);
+    padding: 10px var(--sp-3) 10px 0;
+    border-radius: var(--radius-md);
     background: var(--bg-raised);
-    box-shadow: 0 4px 24px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.08);
+    border: 1px solid var(--border-dim);
-    pointer-events: all; min-width: 220px;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.04) inset;
-    animation: toastIn 0.18s cubic-bezier(0.16,1,0.3,1) both;
+    pointer-events: all;
+    min-width: 200px;
+    overflow: hidden;
+    cursor: pointer;
+    animation: slideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
+    transition: opacity 0.15s ease, transform 0.15s ease;
   }
-  @keyframes toastIn {
+
-    from { opacity: 0; transform: translateX(24px) scale(0.96); }
+  .toast:hover  { opacity: 0.85; transform: translateX(-2px); }
-    to   { opacity: 1; transform: translateX(0) scale(1); }
+  .toast:active { transform: translateX(0) scale(0.98); }
+
+  @keyframes slideIn {
+    from { opacity: 0; transform: translateX(16px) scale(0.98); }
+    to   { opacity: 1; transform: translateX(0)    scale(1); }
   }
-  .toast-success { border-color: var(--accent-dim); }
+
-  .toast-success .icon { color: var(--accent-fg); }
+  .accent-bar {
-  .toast-error { border-color: var(--color-error); }
+    width: 3px;
-  .toast-error .icon { color: var(--color-error); }
+    align-self: stretch;
-  .toast-download .icon, .toast-info .icon { color: var(--accent-fg); }
+    flex-shrink: 0;
-  .icon { flex-shrink: 0; margin-top: 2px; color: var(--text-faint); }
+    border-radius: 0 2px 2px 0;
-  .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+    margin-right: 2px;
-  .title { font-size: var(--text-sm); color: var(--text-secondary); font-weight: var(--weight-medium); line-height: 1.3; }
+  }
+
+  .toast-success  .accent-bar { background: var(--accent-fg); }
+  .toast-error    .accent-bar { background: var(--color-error); }
+  .toast-info     .accent-bar { background: var(--text-faint); }
+  .toast-download .accent-bar { background: var(--accent-fg); }
+
+  .icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .toast-success  .icon { color: var(--accent-fg); }
+  .toast-error    .icon { color: var(--color-error); }
+  .toast-info     .icon { color: var(--text-muted); }
+  .toast-download .icon { color: var(--accent-fg); }
+
+  .body {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+  }
+
+  .title {
+    font-size: var(--text-xs);
+    font-family: var(--font-ui);
+    color: var(--text-secondary);
+    font-weight: var(--weight-medium);
+    letter-spacing: var(--tracking-wide);
+    line-height: 1.3;
+  }
+
   .sub {
-    font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint);
+    font-family: var(--font-ui);
-    letter-spacing: var(--tracking-wide); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    font-size: var(--text-2xs);
+    color: var(--text-faint);
+    letter-spacing: var(--tracking-wide);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
-  .close {
-    display: flex; align-items: center; justify-content: center;
-    width: 18px; height: 18px; border-radius: var(--radius-sm);
-    color: var(--text-faint); flex-shrink: 0; margin-top: 1px;
-    transition: color var(--t-base), background var(--t-base);
-  }
-  .close:hover { color: var(--text-muted); background: var(--bg-overlay); }
 </style>

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 { dedupeSources, dedupeMangaByTitle, dedupeMangaById, shouldHideNsfw } 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) ?? []);
@@ -58,7 +60,11 @@
   }
 
   function filterOut(mangas: Manga[]): Manga[] {
-    return dedup(mangas.filter(m => !m.inLibrary && !store.discoverLibraryIds.has(m.id)));
+    return dedup(mangas.filter(m => {
+      if (m.inLibrary || store.discoverLibraryIds.has(m.id)) return false;
+      if (shouldHideNsfw(m, store.settings)) return false;
+      return true;
+    }));
   }
 
   function rotatedSources(): Source[] {
@@ -181,7 +187,9 @@
       );
       if (ctrl.signal.aborted) return;
 
-      const local = dedup(d.mangas.nodes);
+      const local = dedup(
+        d.mangas.nodes.filter(m => !shouldHideNsfw(m, store.settings))
+      );
       store.discoverCache.set(localKey, local);
       genreResults.set(genre, local.slice(0, GRID_LIMIT));
       genreResults = new Map(genreResults);
@@ -253,6 +261,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 +280,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 { dedupeSources, dedupeMangaById, shouldHideNsfw } 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,15 +39,17 @@
   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([]);
   let abortCtrl: AbortController | null = null;
 
   const filtered = $derived.by(() => {
-    const libMatches = libraryManga.filter((m) => matchesAllTags(m, tags));
+    const libMatches = libraryManga.filter((m) => matchesAllTags(m, tags) && !shouldHideNsfw(m, store.settings));
     const libIds     = new Set(libMatches.map((m) => m.id));
-    return dedupeMangaById([...libMatches, ...sourceManga.filter((m) => !libIds.has(m.id))]);
+    return dedupeMangaById([...libMatches, ...sourceManga.filter((m) => !libIds.has(m.id) && !shouldHideNsfw(m, store.settings))]);
   });
   const visibleItems    = $derived(filtered.slice(0, visibleCount));
   const hasMoreVisible  = $derived(visibleCount < filtered.length);
@@ -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, setLibraryFilter } 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)));
@@ -162,7 +173,11 @@
         const d = await gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: heroMangaId });
         all = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
       }
-      openReader(chapter, all);
+      if (all.length) {
+        const manga = heroManga ?? { id: heroMangaId, title: heroTitle, thumbnailUrl: heroManga?.thumbnailUrl ?? "" } as any;
+        store.activeManga = manga;
+        openReader(chapter, all);
+      }
     } catch { store.activeManga = { id: heroMangaId, title: heroTitle, thumbnailUrl: heroManga?.thumbnailUrl ?? "" } as any; }
     finally { resuming = false; }
   }
@@ -177,8 +192,10 @@
       const d = await gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: heroEntry.mangaId });
       const chapters = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
       const ch = chapters.find(c => c.id === heroEntry!.chapterId) ?? chapters[0];
-      if (ch) openReader(ch, chapters);
+      if (ch) {
-      else store.activeManga = { id: heroEntry.mangaId, title: heroEntry.mangaTitle, thumbnailUrl: heroEntry.thumbnailUrl } as any;
+        store.activeManga = heroManga ?? { id: heroEntry.mangaId, title: heroEntry.mangaTitle, thumbnailUrl: heroEntry.thumbnailUrl } as any;
+        openReader(ch, chapters);
+      }
     } catch { store.activeManga = { id: heroEntry.mangaId, title: heroEntry.mangaTitle, thumbnailUrl: heroEntry.thumbnailUrl } as any; }
     finally { resuming = false; }
   }
@@ -188,8 +205,10 @@
       const d = await gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: entry.mangaId });
       const chapters = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
       const ch = chapters.find(c => c.id === entry.chapterId) ?? chapters[0];
-      if (ch) openReader(ch, chapters);
+      if (ch) {
-      else store.activeManga = { id: entry.mangaId, title: entry.mangaTitle, thumbnailUrl: entry.thumbnailUrl } as any;
+        store.activeManga = { id: entry.mangaId, title: entry.mangaTitle, thumbnailUrl: entry.thumbnailUrl } as any;
+        openReader(ch, chapters);
+      } else store.activeManga = { id: entry.mangaId, title: entry.mangaTitle, thumbnailUrl: entry.thumbnailUrl } as any;
     } catch { store.activeManga = { id: entry.mangaId, title: entry.mangaTitle, thumbnailUrl: entry.thumbnailUrl } as any; }
   }
 
@@ -206,9 +225,9 @@
   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 completedManga = $derived(completedIds.length > 0 ? completedPool.filter(m => completedIds.includes(m.id)).slice(0, 7) : []);
   const recentHistory  = $derived(store.history.slice(0, 6));
   const stats          = $derived(store.readingStats);
 
@@ -404,7 +423,7 @@
         <div class="bottom-section-hd">
           <span class="section-title"><CheckCircle size={10} weight="bold" /> Completed</span>
           {#if completedManga.length > 0}
-            <button class="see-all" onclick={() => store.navPage = "library"}>View all <ArrowRight size={9} weight="bold" /></button>
+            <button class="see-all" onclick={() => { if (completedCategory) setLibraryFilter(String(completedCategory.id)); store.navPage = "library"; }}>View all <ArrowRight size={9} weight="bold" /></button>
           {/if}
         </div>
         {#if completedManga.length > 0}
@@ -571,9 +590,10 @@
   .bottom-col:last-child  { padding-left:  var(--sp-4); }
   .bottom-section-hd { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--sp-2); }
   .bottom-empty { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-faint); letter-spacing: var(--tracking-wide); padding: var(--sp-1) 0; }
-  .mini-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-3); }
+  .mini-row { display: flex; flex-direction: row; gap: var(--sp-3); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding-bottom: var(--sp-1); }
+  .mini-row::-webkit-scrollbar { display: none; }
   
-  .mini-card { width: 100%; background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
+  .mini-card { flex: 0 0 120px; width: 120px; background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
   .mini-card:hover .mini-cover { filter: brightness(1.08) saturate(1.05); transform: scale(1.02); }
   .mini-card:hover { will-change: transform; }
   .mini-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); box-shadow: 0 2px 12px rgba(0,0,0,0.35); }

src/components/pages/Library.svelte

@@ -1,40 +1,231 @@
 <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, SortAscending, Funnel, CaretUp, CaretDown } 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 { dedupeMangaById, dedupeMangaByTitle, shouldHideNsfw } 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 { LibrarySortMode, LibrarySortDir, LibraryStatusFilter } from "../../store/state.svelte";
-  import { COMPLETED_FOLDER_ID } from "../../store/state.svelte";
+  import type { Manga, Category, Chapter } from "../../lib/types";
-  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(() => {
+  // ── Sort / filter panel ───────────────────────────────────────────────────
-    const wasOpen = prevChapterId !== null;
-    prevChapterId = store.activeChapter?.id ?? null;
-    if (wasOpen && !store.activeChapter) cache.clear(CACHE_KEYS.LIBRARY);
-  });
 
-  function fetchLibrary() {
+  let sortPanelOpen:   boolean = $state(false);
+  let filterPanelOpen: boolean = $state(false);
+
+  function openSortPanel() {
+    sortPanelOpen = !sortPanelOpen;
+    filterPanelOpen = false;
+  }
+
+  function openFilterPanel() {
+    filterPanelOpen = !filterPanelOpen;
+    sortPanelOpen = false;
+  }
+
+  const SORT_LABELS: Record<LibrarySortMode, string> = {
+    az:             "A–Z",
+    unreadCount:    "Unread chapters",
+    totalChapters:  "Total chapters",
+    recentlyAdded:  "Recently added",
+    recentlyRead:   "Recently read",
+    latestFetched:  "Latest fetched chapter",
+    latestUploaded: "Latest uploaded chapter",
+  };
+
+  const STATUS_LABELS: Record<LibraryStatusFilter, string> = {
+    ALL:       "All statuses",
+    ONGOING:   "Ongoing",
+    COMPLETED: "Completed",
+    CANCELLED: "Cancelled",
+    HIATUS:    "Hiatus",
+    UNKNOWN:   "Unknown",
+  };
+
+  const ALL_SORT_MODES: LibrarySortMode[] = [
+    "az", "unreadCount", "totalChapters", "recentlyAdded",
+    "recentlyRead", "latestFetched", "latestUploaded",
+  ];
+
+  const ALL_STATUS_FILTERS: LibraryStatusFilter[] = [
+    "ALL", "ONGOING", "COMPLETED", "CANCELLED", "HIATUS", "UNKNOWN",
+  ];
+
+  // Per-tab reactive state — $derived so Svelte tracks changes to libraryFilter and settings
+  const tabSortMode = $derived(
+    store.settings.libraryTabSort[store.libraryFilter]?.mode ?? "az" as LibrarySortMode
+  );
+  const tabSortDir = $derived(
+    store.settings.libraryTabSort[store.libraryFilter]?.dir ?? "asc" as LibrarySortDir
+  );
+  const tabStatus = $derived(
+    store.settings.libraryTabStatus[store.libraryFilter] ?? "ALL" as LibraryStatusFilter
+  );
+
+  function setTabSort(mode: LibrarySortMode, dir?: LibrarySortDir) {
+    const prev   = store.settings.libraryTabSort[store.libraryFilter];
+    const newDir = dir ?? prev?.dir ?? "asc";
+    updateSettings({
+      libraryTabSort: {
+        ...store.settings.libraryTabSort,
+        [store.libraryFilter]: { mode, dir: newDir },
+      },
+    });
+  }
+
+  function toggleTabSortDir() {
+    setTabSort(tabSortMode, tabSortDir === "asc" ? "desc" : "asc");
+  }
+
+  function setTabStatus(status: LibraryStatusFilter) {
+    updateSettings({
+      libraryTabStatus: {
+        ...store.settings.libraryTabStatus,
+        [store.libraryFilter]: status,
+      },
+    });
+    filterPanelOpen = false;
+  }
+
+  let allManga:       Manga[]      = $state([]);
+  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);
+
+  // ── 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 +234,20 @@
     );
   }
 
-  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)
+      const mapped = nodes.map((m: any) => ({
-      .finally(() => loading = false);
+        ...m,
+        chapterCount: m.chapters?.totalCount ?? m.chapterCount ?? 0,
+      }));
+      allManga = dedupeMangaByTitle(dedupeMangaById(mapped), store.settings.mangaLinks);
+      error    = null;
+    } catch (e: any) {
+      error = e.message;
+    } finally {
+      loading = false;
+    }
   }
 
   $effect(() => {
@@ -57,59 +257,123 @@
     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((() => {
-    const q = search.trim().toLowerCase();
+    const q      = search.trim().toLowerCase();
+    const mode   = tabSortMode;
+    const dir    = tabSortDir;
+    const status = tabStatus;
+
+    // 1. Pick the right base list for this tab
+    let items: Manga[];
     if (store.libraryFilter === "library") {
-      return q ? allManga.filter(m => m.title.toLowerCase().includes(q)) : allManga;
+      items = allManga;
+    } else if (store.libraryFilter === "downloaded") {
+      items = allManga.filter(m => (m.downloadCount ?? 0) > 0);
+    } else {
+      items = categoryMangaMap.get(Number(store.libraryFilter)) ?? [];
     }
-    if (store.libraryFilter === "downloaded") {
+
-      const items = allManga.filter(m => (m.downloadCount ?? 0) > 0);
+    // 2. NSFW filter — always applied before text search or sort
-      return q ? items.filter(m => m.title.toLowerCase().includes(q)) : items;
+    items = items.filter(m => !shouldHideNsfw(m, store.settings));
+
+    // 3. Text search
+    if (q) items = items.filter(m => m.title.toLowerCase().includes(q));
+
+    // 4. Status filter
+    if (status !== "ALL") {
+      items = items.filter(m => {
+        const s = m.status?.toUpperCase().replace(/\s+/g, "_") ?? "UNKNOWN";
+        return s === status;
+      });
     }
-    const folder = store.settings.folders.find(f => f.id === store.libraryFilter);
+
-    if (folder) {
+    // 5. Sort
-      const items = folderPool.filter(m => folder.mangaIds.includes(m.id));
+    const recentlyReadMap = new Map<number, number>();
-      return q ? items.filter(m => m.title.toLowerCase().includes(q)) : items;
+    if (mode === "recentlyRead") {
+      for (const h of store.history) {
+        if (!recentlyReadMap.has(h.mangaId)) recentlyReadMap.set(h.mangaId, h.readAt);
+      }
     }
-    return [];
+
+    const sorted = [...items].sort((a, b) => {
+      let cmp = 0;
+      switch (mode) {
+        case "az":
+          cmp = a.title.localeCompare(b.title, undefined, { sensitivity: "base" });
+          break;
+        case "unreadCount":
+          cmp = (a.unreadCount ?? 0) - (b.unreadCount ?? 0);
+          break;
+        case "totalChapters":
+          cmp = (a.chapterCount ?? 0) - (b.chapterCount ?? 0);
+          break;
+        case "recentlyAdded":
+          // id is monotonically increasing on Suwayomi — higher = newer
+          cmp = a.id - b.id;
+          break;
+        case "recentlyRead": {
+          const ra = recentlyReadMap.get(a.id) ?? 0;
+          const rb = recentlyReadMap.get(b.id) ?? 0;
+          cmp = ra - rb;
+          break;
+        }
+        // latestFetched / latestUploaded: no per-manga date available at list level;
+        // fall back to id ordering so the option still does something sensible.
+        case "latestFetched":
+        case "latestUploaded":
+          cmp = a.id - b.id;
+          break;
+      }
+      return dir === "asc" ? cmp : -cmp;
+    });
+
+    return sorted;
   })());
 
   const cols           = $derived(Math.max(1, Math.floor((containerWidth + CARD_GAP) / (CARD_MIN_W + CARD_GAP))));
@@ -119,18 +383,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 +488,126 @@
     } 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" && (sortPanelOpen || filterPanelOpen)) {
+        sortPanelOpen = false; filterPanelOpen = false; return;
+      }
+      if (e.key === "Escape" && selectMode) exitSelectMode();
+      if ((e.key === "a" && (e.metaKey || e.ctrlKey)) && selectMode) {
+        e.preventDefault();
+        selectAll();
+      }
+    }
+
+    function onDocMouseDown(e: MouseEvent) {
+      const target = e.target as HTMLElement;
+      if (sortPanelOpen   && !target.closest(".sort-panel-wrap, .sort-panel"))   sortPanelOpen   = false;
+      if (filterPanelOpen && !target.closest(".filter-panel-wrap, .filter-panel")) filterPanelOpen = false;
+    }
+
+    window.addEventListener("keydown", onKeyDown);
+    document.addEventListener("mousedown", onDocMouseDown, true);
+
+    return () => {
+      ro.disconnect();
+      unsub();
+      window.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("mousedown", onDocMouseDown, true);
+    };
   });
 </script>
 
@@ -223,21 +661,167 @@
               <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>
-      <div class="search-wrap">
+      <div class="header-right">
-        <MagnifyingGlass size={13} class="search-icon" weight="light" />
+        <div class="search-wrap">
-        <input class="search" placeholder="Search" bind:value={search} />
+          <MagnifyingGlass size={13} class="search-icon" weight="light" />
+          <input class="search" placeholder="Search" bind:value={search} />
+        </div>
+
+        <!-- Sort panel -->
+        <div class="sort-panel-wrap">
+          <button
+            class="icon-btn"
+            class:icon-btn-active={tabSortMode !== "az" || tabSortDir !== "asc"}
+            title="Sort"
+            onclick={openSortPanel}
+          >
+            <SortAscending size={15} weight="bold" />
+          </button>
+          {#if sortPanelOpen}
+            <div class="dropdown-panel sort-panel" role="menu">
+              <p class="panel-label">Sort by</p>
+              {#each ALL_SORT_MODES as m}
+                <button
+                  class="panel-item"
+                  class:panel-item-active={tabSortMode === m}
+                  role="menuitem"
+                  onclick={() => { setTabSort(m); sortPanelOpen = false; }}
+                >
+                  {SORT_LABELS[m]}
+                  {#if tabSortMode === m}
+                    {#if tabSortDir === "asc"}
+                      <CaretUp size={11} weight="bold" class="sort-caret" />
+                    {:else}
+                      <CaretDown size={11} weight="bold" class="sort-caret" />
+                    {/if}
+                  {/if}
+                </button>
+              {/each}
+              <button
+                class="panel-item dir-toggle"
+                role="menuitem"
+                onclick={toggleTabSortDir}
+              >
+                {tabSortDir === "asc" ? "Ascending" : "Descending"}
+                {#if tabSortDir === "asc"}
+                  <CaretUp size={11} weight="bold" />
+                {:else}
+                  <CaretDown size={11} weight="bold" />
+                {/if}
+              </button>
+            </div>
+          {/if}
+        </div>
+
+        <!-- Filter panel -->
+        <div class="filter-panel-wrap">
+          <button
+            class="icon-btn"
+            class:icon-btn-active={tabStatus !== "ALL"}
+            title="Filter by status"
+            onclick={openFilterPanel}
+          >
+            <Funnel size={15} weight={tabStatus !== "ALL" ? "fill" : "bold"} />
+          </button>
+          {#if filterPanelOpen}
+            <div class="dropdown-panel filter-panel" role="menu">
+              <p class="panel-label">Filter by status</p>
+              {#each ALL_STATUS_FILTERS as s}
+                <button
+                  class="panel-item"
+                  class:panel-item-active={tabStatus === s}
+                  role="menuitem"
+                  onclick={() => setTabStatus(s)}
+                >
+                  {STATUS_LABELS[s]}
+                </button>
+              {/each}
+            </div>
+          {/if}
+        </div>
       </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 +841,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>
@@ -288,32 +893,91 @@
 {/if}
 
 <style>
-  .root { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; }
+  .root { position: relative; display: flex; flex-direction: column; height: 100%; overflow: visible; animation: fadeIn 0.14s ease both; }
   .content { flex: 1; overflow-y: auto; padding: var(--sp-5) var(--sp-6) var(--sp-6); will-change: scroll-position; -webkit-overflow-scrolling: touch; }
   .branches { position: absolute; top: 0; right: 0; width: 400px; height: 600px; pointer-events: none; z-index: 0; }
   .branches :global(.anim-branch) { stroke-dasharray: 60; stroke-dashoffset: 60; animation: branchGrow 2.4s ease forwards; }
   @keyframes branchGrow { to { stroke-dashoffset: 0; } }
-  .header { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border-dim); gap: var(--sp-4); flex-wrap: wrap; flex-shrink: 0; }
+  .header { position: relative; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border-dim); gap: var(--sp-4); flex-wrap: wrap; flex-shrink: 0; }
   .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); }
-  .grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--cols, auto-fill), minmax(130px, 1fr)); gap: var(--sp-4); }
+
+  /* ── Header right cluster ───────────────────────────────────────────────── */
+  .header-right { display: flex; align-items: center; gap: var(--sp-2); }
+
+  /* ── Icon buttons (sort / filter triggers) ──────────────────────────────── */
+  .icon-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-md); border: 1px solid var(--border-dim); background: var(--bg-raised); color: var(--text-faint); cursor: pointer; flex-shrink: 0; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); }
+  .icon-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }
+  .icon-btn-active { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
+
+  /* ── Dropdown panels (shared) ───────────────────────────────────────────── */
+  .sort-panel-wrap,
+  .filter-panel-wrap { position: relative; }
+  .dropdown-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 9999; min-width: 220px; background: var(--bg-overlay, #1a1a1a); border: 1px solid var(--border-base); border-radius: var(--radius-md); padding: 6px; box-shadow: 0 12px 36px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.3); animation: fadeIn 0.1s ease both; }
+  .panel-label { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-faint); padding: 4px 8px 8px; }
+  .panel-item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 7px 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); gap: var(--sp-2); }
+  .panel-item:hover { background: var(--bg-subtle, #202020); color: var(--text-primary); }
+  .panel-item-active { color: var(--accent-fg); background: var(--accent-muted); font-weight: var(--weight-medium, 500); }
+  .panel-item-active:hover { background: var(--accent-dim); }
+  .panel-divider { height: 1px; background: var(--border-dim); margin: 4px 2px; }
+  .dir-toggle { color: var(--text-secondary); justify-content: flex-start; gap: var(--sp-2); border-top: 1px solid var(--border-dim); border-radius: 0 0 var(--radius-sm) var(--radius-sm); margin-top: 2px; padding-top: 9px; }
+  .sort-caret { flex-shrink: 0; }
+
+  /* ── 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; isolation: isolate; 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); }
-  .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); }
+  .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); }
   .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/Search.svelte

@@ -3,7 +3,7 @@
   import { gql, thumbUrl } from "../../lib/client";
   import { GET_SOURCES, FETCH_SOURCE_MANGA } from "../../lib/queries";
   import { cache, CACHE_KEYS, getPageSet } from "../../lib/cache";
-  import { dedupeSources, dedupeMangaById, dedupeMangaByTitle } from "../../lib/util";
+  import { dedupeSources, dedupeMangaById, dedupeMangaByTitle, shouldHideNsfw } from "../../lib/util";
   import { store, setSearchPrefill, setPreviewManga } from "../../store/state.svelte";
   import type { Manga, Source } from "../../lib/types";
 
@@ -91,14 +91,11 @@
   const availableLangs   = $derived(Array.from(new Set<string>(allSources.map((s) => s.lang))).sort());
   const hasMultipleLangs = $derived(availableLangs.length > 1);
 
-  // ── Keyword search ────────────────────────────────────────────────────────
-
   let kw_query        = $state("");
   let kw_submitted    = $state("");
   let kw_results:     SourceResult[] = $state([]);
   let kw_showAdvanced = $state(false);
   let kw_selectedLangs: Set<string>  = $state(new Set());
-  let kw_includeNsfw  = $state(false);
   let kw_inputEl:     HTMLInputElement | null = $state(null);
   let kw_abortCtrl:   AbortController | null  = null;
 
@@ -124,7 +121,7 @@
     let filtered = allSources;
     if (kw_selectedLangs.size > 0)
       filtered = filtered.filter((s) => kw_selectedLangs.has(s.lang));
-    if (!kw_includeNsfw)
+    if (!store.settings.showNsfw)
       filtered = filtered.filter((s) => !s.isNsfw);
     return filtered;
   }
@@ -146,8 +143,9 @@
           FETCH_SOURCE_MANGA, { source: src.id, type: "SEARCH", page: 1, query: trimmed }, ctrl.signal,
         );
         if (ctrl.signal.aborted) return;
+        const mangas = d.fetchSourceManga.mangas.filter((m) => !shouldHideNsfw(m, store.settings));
         kw_results = kw_results.map((r) =>
-          r.source.id === src.id ? { ...r, mangas: d.fetchSourceManga.mangas, loading: false } : r,
+          r.source.id === src.id ? { ...r, mangas, loading: false } : r,
         );
       } catch (e: any) {
         if (ctrl.signal.aborted || e?.name === "AbortError") return;
@@ -169,8 +167,6 @@
   const kw_hasResults   = $derived(kw_results.some((r) => r.mangas.length > 0));
   const kw_allDone      = $derived(kw_results.length > 0 && kw_results.every((r) => !r.loading));
 
-  // ── Tag search ────────────────────────────────────────────────────────────
-
   let tag_activeTags:       string[] = $state([]);
   let tag_tagMode:          TagMode  = $state("AND");
   let tag_tagFilter                  = $state("");
@@ -243,7 +239,8 @@
       ctrl.signal,
     ).then((d) => {
       if (ctrl.signal.aborted) return;
-      tag_localResults  = d.mangas.nodes;
+      const nsfwFilter = (m: Manga) => !shouldHideNsfw(m, store.settings);
+      tag_localResults  = d.mangas.nodes.filter(nsfwFilter);
       tag_totalCount    = d.mangas.totalCount;
       tag_localHasNext  = d.mangas.pageInfo.hasNextPage;
       tag_localOffset   = (store.settings.renderLimit ?? 48);
@@ -279,9 +276,10 @@
       ps.add(1);
       tag_srcNextPage.set(src.id, result.hasNextPage ? 2 : -1);
       tag_srcNextPage = new Map(tag_srcNextPage);
-      const matching = activeTags.length > 1
+      const matching = (activeTags.length > 1
         ? result.mangas.filter((m) => matchesAllTags(m, activeTags))
-        : result.mangas;
+        : result.mangas
+      ).filter((m) => !shouldHideNsfw(m, store.settings));
       if (matching.length > 0) {
         tag_sourceResults = dedupeMangaByTitle(dedupeMangaById([...tag_sourceResults, ...matching]), store.settings.mangaLinks);
         tag_loadingSourceSearch = false;
@@ -304,7 +302,7 @@
         ctrl.signal,
       );
       if (ctrl.signal.aborted) return;
-      tag_localResults  = [...tag_localResults, ...d.mangas.nodes];
+      const nsfwFilter = (m: Manga) => !shouldHideNsfw(m, store.settings);
       tag_localHasNext  = d.mangas.pageInfo.hasNextPage;
       tag_localOffset  += (store.settings.renderLimit ?? 48);
     } catch (e: any) {
@@ -340,9 +338,10 @@
         ps.add(page);
         tag_srcNextPage.set(src.id, result.hasNextPage ? page + 1 : -1);
         tag_srcNextPage = new Map(tag_srcNextPage);
-        const matching = tag_activeTags.length > 1
+        const matching = (tag_activeTags.length > 1
           ? result.mangas.filter((m) => matchesAllTags(m, tag_activeTags))
-          : result.mangas;
+          : result.mangas
+        ).filter((m) => !shouldHideNsfw(m, store.settings));
         if (matching.length > 0) {
           tag_sourceResults = dedupeMangaByTitle(dedupeMangaById([...tag_sourceResults, ...matching]), store.settings.mangaLinks);
         }
@@ -367,9 +366,7 @@
     }
   }
 
-  // ── Source browse ─────────────────────────────────────────────────────────
+  let src_selectedLang  = $state(preferredLang || "all");
-
-  let src_selectedLang  = $state("all");
   let src_activeSource: Source | null = $state(null);
   let src_browseResults: Manga[]       = $state([]);
   let src_loadingBrowse                = $state(false);
@@ -378,40 +375,33 @@
   let src_hasNextPage                  = $state(false);
   let src_currentPage                  = $state(1);
   let src_abortCtrl: AbortController | null = null;
-  let src_langPocketOpen = $state(true);
-  let src_expandedGroups: Set<string> = $state(new Set());
 
-  // Group sources by displayName — sources with same name but different langs get grouped
+  $effect(() => {
-  interface SourceGroup {
+    if (!allSources.length) return;
-    name:     string;
+    const langs = new Set(allSources.map((s) => s.lang));
-    iconUrl:  string;
+    if (src_selectedLang !== "all" && !langs.has(src_selectedLang)) {
-    sources:  Source[];
+      src_selectedLang = langs.has(preferredLang) ? preferredLang : "all";
-    isNsfw:   boolean;
+    }
-  }
+  });
 
-  const src_visibleSources = $derived(src_selectedLang === "all"
+  const src_visibleSources = $derived.by(() => {
-    ? allSources
+    const nsfw = (s: Source) => !store.settings.showNsfw && s.isNsfw;
-    : allSources.filter((s) => s.lang === src_selectedLang));
+    if (src_selectedLang !== "all") {
-
+      return allSources.filter((s) => s.lang === src_selectedLang && !nsfw(s));
-  const src_groupedSources = $derived.by(() => {
+    }
-    const filtered = src_visibleSources;
+    const map = new Map<string, Source>();
-    const map = new Map<string, SourceGroup>();
+    for (const s of allSources) {
-    for (const src of filtered) {
+      if (nsfw(s)) continue;
-      const key = src.displayName;
+      const key = s.name;
-      if (!map.has(key)) {
+      const existing = map.get(key);
-        map.set(key, { name: src.displayName, iconUrl: src.iconUrl, sources: [], isNsfw: src.isNsfw });
+      if (!existing) { map.set(key, s); continue; }
+      if (s.lang === preferredLang || (!existing || (existing.lang !== preferredLang && s.lang < existing.lang))) {
+        map.set(key, s);
       }
-      map.get(key)!.sources.push(src);
     }
     return Array.from(map.values());
   });
 
-  function srcToggleGroup(name: string) {
-    const next = new Set(src_expandedGroups);
-    if (next.has(name)) next.delete(name); else next.add(name);
-    src_expandedGroups = next;
-  }
-
   async function srcFetchBrowse(src: Source, type: "POPULAR" | "SEARCH", q?: string, page = 1) {
     src_abortCtrl?.abort();
     const ctrl = new AbortController();
@@ -422,7 +412,8 @@
         FETCH_SOURCE_MANGA, { source: src.id, type, page, query: q ?? null }, ctrl.signal,
       );
       if (ctrl.signal.aborted) return;
-      src_browseResults = page === 1 ? d.fetchSourceManga.mangas : [...src_browseResults, ...d.fetchSourceManga.mangas];
+      const incoming = d.fetchSourceManga.mangas.filter((m) => !shouldHideNsfw(m, store.settings));
+      src_browseResults = page === 1 ? incoming : [...src_browseResults, ...incoming];
       src_hasNextPage = d.fetchSourceManga.hasNextPage;
       src_currentPage = page;
     } catch (e: any) {
@@ -570,10 +561,6 @@
             {/each}
           </div>
           <div class="advancedDivider"></div>
-          <label class="advancedCheck">
-            <input type="checkbox" bind:checked={kw_includeNsfw} class="checkbox" />
-            Include NSFW sources
-          </label>
           <div class="advancedFooter">
             Searching <strong>{kw_visibleCount}</strong> source{kw_visibleCount !== 1 ? "s" : ""}
           </div>
@@ -867,27 +854,18 @@
     <div class="splitRoot">
       
       <div class="splitSidebar">
-        <button class="langPocketToggle" onclick={() => (src_langPocketOpen = !src_langPocketOpen)}>
+        <div class="srcLangRow">
-            <span class="langPocketLabel">Languages</span>
+          <span class="langPocketLabel">Language</span>
-            <svg width="9" height="9" viewBox="0 0 256 256" fill="currentColor"
+          <select
-              style="transition: transform 0.2s ease; transform: rotate({src_langPocketOpen ? 180 : 0}deg)"
+            class="langSelect"
-              aria-hidden="true">
+            bind:value={src_selectedLang}
-              <path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/>
+          >
-            </svg>
+            <option value="all">All</option>
-          </button>
+            {#each availableLangs as lang (lang)}
-          {#if src_langPocketOpen}
+              <option value={lang}>{lang.toUpperCase()}{lang === preferredLang ? " ★" : ""}</option>
-            <div class="langPocket">
+            {/each}
-              {#each ["all", ...availableLangs] as lang (lang)}
+          </select>
-                <button
+        </div>
-                  class="langChip"
-                  class:langChipActive={src_selectedLang === lang}
-                  onclick={() => (src_selectedLang = lang)}
-                >
-                  {lang === "all" ? "All" : lang.toUpperCase()}
-                </button>
-              {/each}
-            </div>
-          {/if}
 
         {#if loadingSources}
           <div class="splitLoading">
@@ -897,52 +875,22 @@
           </div>
         {:else}
           <div class="splitList">
-            {#each src_groupedSources as group (group.name)}
+            {#each src_visibleSources as src (src.id)}
-              {#if group.sources.length === 1}
+              <button
-                <button
+                class="splitItem splitItemSource"
-                  class="splitItem splitItemSource"
+                class:splitItemActive={src_activeSource?.id === src.id}
-                  class:splitItemActive={src_activeSource?.id === group.sources[0].id}
+                onclick={() => srcSelectSource(src)}
-                  onclick={() => srcSelectSource(group.sources[0])}
+              >
-                >
+                <img src={thumbUrl(src.iconUrl)} alt="" class="splitSourceIcon"
-                  <img src={thumbUrl(group.iconUrl)} alt="" class="splitSourceIcon"
+                  onerror={(e) => { (e.target as HTMLImageElement).style.display = "none"; }} />
-                    onerror={(e) => { (e.target as HTMLImageElement).style.display = "none"; }} />
+                <span class="splitItemLabel">{src.name}</span>
-                  <span class="splitItemLabel">{group.name}</span>
+                {#if src_selectedLang === "all"}
-                  <span class="sourceLang" style="margin-left:auto;margin-right:4px">{group.sources[0].lang.toUpperCase()}</span>
+                  <span class="sourceLang" style="margin-left:auto;margin-right:4px">{src.lang.toUpperCase()}</span>
-                  {#if group.isNsfw}<span class="nsfwBadge">18+</span>{/if}
-                </button>
-              {:else}
-                <button
-                  class="splitItem splitItemSource splitItemGroup"
-                  class:splitItemGroupOpen={src_expandedGroups.has(group.name)}
-                  onclick={() => srcToggleGroup(group.name)}
-                >
-                  <img src={thumbUrl(group.iconUrl)} alt="" class="splitSourceIcon"
-                    onerror={(e) => { (e.target as HTMLImageElement).style.display = "none"; }} />
-                  <span class="splitItemLabel">{group.name}</span>
-                  <span class="groupLangCount">{group.sources.length}</span>
-                  <svg width="8" height="8" viewBox="0 0 256 256" fill="currentColor"
-                    class="groupChevron"
-                    style="transform: rotate({src_expandedGroups.has(group.name) ? 180 : 0}deg)"
-                    aria-hidden="true">
-                    <path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/>
-                  </svg>
-                </button>
-                {#if src_expandedGroups.has(group.name)}
-                  {#each group.sources as src (src.id)}
-                    <button
-                      class="splitItem splitItemSource splitItemLangOption"
-                      class:splitItemActive={src_activeSource?.id === src.id}
-                      onclick={() => srcSelectSource(src)}
-                    >
-                      <span class="langOptionDot"></span>
-                      <span class="splitItemLabel">{src.lang.toUpperCase()}</span>
-                      {#if src.isNsfw}<span class="nsfwBadge">18+</span>{/if}
-                    </button>
-                  {/each}
                 {/if}
-              {/if}
+                {#if src.isNsfw}<span class="nsfwBadge">18+</span>{/if}
+              </button>
             {/each}
-            {#if src_groupedSources.length === 0}
+            {#if src_visibleSources.length === 0}
               <p class="splitEmpty">No sources for this language</p>
             {/if}
           </div>
@@ -1061,8 +1009,6 @@
 </div>
 
 <style>
-  /* ── Root ──────────────────────────────────────────────────────────────── */
-
   .root {
     display: flex;
     flex-direction: column;
@@ -1070,9 +1016,6 @@
     overflow: hidden;
     animation: fadeIn 0.14s ease both;
   }
-
-  /* ── Header ────────────────────────────────────────────────────────────── */
-
   .header {
     display: flex;
     align-items: center;
@@ -1081,7 +1024,6 @@
     flex-shrink: 0;
     border-bottom: 1px solid var(--border-dim);
   }
-
   .heading {
     font-family: var(--font-ui);
     font-size: var(--text-xs);
@@ -1090,9 +1032,6 @@
     letter-spacing: var(--tracking-wider);
     text-transform: uppercase;
   }
-
-  /* ── Tabs ──────────────────────────────────────────────────────────────── */
-
   .tabs {
     display: flex;
     gap: 2px;
@@ -1101,7 +1040,6 @@
     border-radius: var(--radius-md);
     padding: 2px;
   }
-
   .tab {
     display: flex;
     align-items: center;
@@ -1113,23 +1051,19 @@
     padding: 4px 10px;
     border-radius: var(--radius-sm);
     background: none;
-    border: none;
+    border: 1px solid transparent;
     color: var(--text-faint);
     cursor: pointer;
     transition: background var(--t-base), color var(--t-base);
     white-space: nowrap;
   }
   .tab:hover { color: var(--text-muted); }
-
   .tabActive {
     background: var(--accent-muted);
     color: var(--accent-fg);
     border: 1px solid var(--accent-dim);
   }
   .tabActive:hover { color: var(--accent-fg); }
-
-  /* ── Keyword bar ───────────────────────────────────────────────────────── */
-
   .keywordBar {
     padding: var(--sp-3) var(--sp-4);
     flex-shrink: 0;
@@ -1137,7 +1071,6 @@
     flex-direction: column;
     gap: var(--sp-2);
   }
-
   .searchBar {
     display: flex;
     align-items: center;
@@ -1149,9 +1082,7 @@
     transition: border-color var(--t-base);
   }
   .searchBar:focus-within { border-color: var(--border-strong); }
-
   .searchIcon { color: var(--text-faint); flex-shrink: 0; }
-
   .searchInput {
     flex: 1;
     background: none;
@@ -1162,7 +1093,6 @@
     padding: 7px 0;
   }
   .searchInput::placeholder { color: var(--text-faint); }
-
   .clearBtn {
     color: var(--text-faint);
     font-size: 14px;
@@ -1174,7 +1104,6 @@
     transition: color var(--t-base);
   }
   .clearBtn:hover { color: var(--text-muted); }
-
   .advancedBtn {
     display: flex;
     align-items: center;
@@ -1192,7 +1121,6 @@
   .advancedBtn:hover { color: var(--text-muted); background: var(--bg-overlay); }
   .advancedBtnActive { color: var(--accent-fg); background: var(--accent-muted); }
   .advancedBtnActive:hover { color: var(--accent-fg); background: var(--accent-muted); }
-
   .searchBtn {
     font-family: var(--font-ui);
     font-size: var(--text-xs);
@@ -1211,9 +1139,6 @@
   }
   .searchBtn:hover:not(:disabled) { filter: brightness(1.1); }
   .searchBtn:disabled { opacity: 0.4; cursor: default; }
-
-  /* ── Advanced filter panel ─────────────────────────────────────────────── */
-
   .advancedPanel {
     background: var(--bg-raised);
     border: 1px solid var(--border-dim);
@@ -1224,13 +1149,11 @@
     gap: var(--sp-2);
     animation: fadeIn 0.1s ease both;
   }
-
   .advancedHeader {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
-
   .advancedTitle {
     font-family: var(--font-ui);
     font-size: var(--text-2xs);
@@ -1238,9 +1161,7 @@
     letter-spacing: var(--tracking-wider);
     text-transform: uppercase;
   }
-
   .advancedActions { display: flex; gap: var(--sp-1); }
-
   .advancedLink {
     font-family: var(--font-ui);
     font-size: var(--text-2xs);
@@ -1254,13 +1175,11 @@
     transition: opacity var(--t-base);
   }
   .advancedLink:hover { opacity: 1; }
-
   .langGrid {
     display: flex;
     flex-wrap: wrap;
     gap: var(--sp-1);
   }
-
   .langChip {
     font-family: var(--font-ui);
     font-size: var(--text-2xs);
@@ -1274,20 +1193,17 @@
     transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
   }
   .langChip:hover { color: var(--text-muted); border-color: var(--border-strong); }
-
   .langChipActive {
     background: var(--accent-muted);
     border-color: var(--accent-dim);
     color: var(--accent-fg);
   }
   .langChipActive:hover { background: var(--accent-muted); color: var(--accent-fg); }
-
   .advancedDivider {
     height: 1px;
     background: var(--border-dim);
     margin: 2px 0;
   }
-
   .advancedCheck {
     display: flex;
     align-items: center;
@@ -1297,16 +1213,13 @@
     color: var(--text-muted);
     cursor: pointer;
   }
-
   .checkbox { accent-color: var(--accent-fg); cursor: pointer; }
-
   .advancedFooter {
     font-family: var(--font-ui);
     font-size: var(--text-2xs);
     color: var(--text-faint);
     letter-spacing: var(--tracking-wide);
   }
-
   .advancedLinkStandalone {
     display: inline-flex;
     align-items: center;
@@ -1323,9 +1236,6 @@
     transition: opacity var(--t-base);
   }
   .advancedLinkStandalone:hover { opacity: 1; }
-
-  /* ── Empty states ──────────────────────────────────────────────────────── */
-
   .empty {
     flex: 1;
     display: flex;
@@ -1334,33 +1244,26 @@
     justify-content: center;
     gap: var(--sp-2);
   }
-
   .emptyIcon { color: var(--text-faint); }
   .emptyText { font-size: var(--text-base); color: var(--text-muted); }
   .emptyHint { font-size: var(--text-sm); color: var(--text-faint); }
-
-  /* ── Keyword results ───────────────────────────────────────────────────── */
-
   .results {
     flex: 1;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
   }
-
   .sourceSection {
     padding: var(--sp-1) var(--sp-4) var(--sp-3);
     border-bottom: 1px solid var(--border-dim);
   }
   .sourceSection:last-child { border-bottom: none; }
-
   .sourceHeader {
     display: flex;
     align-items: center;
     gap: var(--sp-2);
     padding: var(--sp-2) 0;
   }
-
   .sourceIcon {
     width: 18px;
     height: 18px;
@@ -1369,13 +1272,11 @@
     flex-shrink: 0;
     background: var(--bg-raised);
   }
-
   .sourceName {
     font-size: var(--text-base);
     font-weight: var(--weight-medium);
     color: var(--text-secondary);
   }
-
   .sourceLang {
     font-family: var(--font-ui);
     font-size: var(--text-2xs);
@@ -1386,7 +1287,6 @@
     border-radius: var(--radius-sm);
     padding: 1px 5px;
   }
-
   .resultCount {
     margin-left: auto;
     font-family: var(--font-ui);
@@ -1394,15 +1294,12 @@
     color: var(--text-faint);
     letter-spacing: var(--tracking-wide);
   }
-
   .sourceError {
     font-size: var(--text-xs);
     color: var(--color-error);
     padding: var(--sp-1) 0;
     margin: 0;
   }
-
-  /* Horizontal scroll row */
   .sourceRow {
     display: flex;
     gap: var(--sp-3);
@@ -1411,9 +1308,6 @@
     scrollbar-width: none;
   }
   .sourceRow::-webkit-scrollbar { display: none; }
-
-  /* ── Manga card ────────────────────────────────────────────────────────── */
-
   .card {
     display: flex;
     flex-direction: column;
@@ -1428,7 +1322,6 @@
   }
   .card:hover .cover { filter: brightness(1.06); }
   .card:hover .cardTitle { color: var(--text-primary); }
-
   .coverWrap {
     position: relative;
     width: 100%;
@@ -1439,14 +1332,12 @@
     border: 1px solid var(--border-dim);
     transform: translateZ(0);
   }
-
   .cover {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: filter var(--t-base);
   }
-
   .inLibBadge {
     position: absolute;
     bottom: var(--sp-1);
@@ -1461,7 +1352,6 @@
     border-radius: var(--radius-sm);
     border: 1px solid var(--accent-muted);
   }
-
   .cardTitle {
     font-size: var(--text-sm);
     color: var(--text-secondary);
@@ -1472,9 +1362,6 @@
     overflow: hidden;
     transition: color var(--t-base);
   }
-
-  /* ── Skeleton ──────────────────────────────────────────────────────────── */
-
   .skCard {
     display: flex;
     flex-direction: column;
@@ -1482,30 +1369,20 @@
     flex-shrink: 0;
     width: 110px;
   }
-
   .tagGrid .card  { width: 100%; }
   .tagGrid .skCard { width: 100%; }
-
   .skeleton { border-radius: var(--radius-sm); }
-
   .skCover {
     aspect-ratio: 2 / 3;
     width: 100%;
     border-radius: var(--radius-md);
   }
-
   .skTitle { height: 10px; width: 80%; }
-
-  /* ── Split root (Tag + Source tabs) ────────────────────────────────────── */
-
   .splitRoot {
     flex: 1;
     display: flex;
     overflow: hidden;
   }
-
-  /* ── Split sidebar ─────────────────────────────────────────────────────── */
-
   .splitSidebar {
     width: 180px;
     flex-shrink: 0;
@@ -1514,7 +1391,6 @@
     display: flex;
     flex-direction: column;
   }
-
   .splitSearchWrap {
     display: flex;
     align-items: center;
@@ -1523,9 +1399,7 @@
     border-bottom: 1px solid var(--border-dim);
     flex-shrink: 0;
   }
-
   .splitSearchIcon { color: var(--text-faint); flex-shrink: 0; }
-
   .splitSearchInput {
     flex: 1;
     background: none;
@@ -1537,7 +1411,6 @@
     min-width: 0;
   }
   .splitSearchInput::placeholder { color: var(--text-faint); }
-
   .splitSearchClear {
     color: var(--text-faint);
     font-size: 13px;
@@ -1549,7 +1422,6 @@
     transition: color var(--t-base);
   }
   .splitSearchClear:hover { color: var(--text-muted); }
-
   .splitList {
     flex: 1;
     overflow-y: auto;
@@ -1557,7 +1429,6 @@
     scrollbar-width: thin;
     scrollbar-color: var(--border-dim) transparent;
   }
-
   .splitItem {
     display: flex;
     align-items: center;
@@ -1572,13 +1443,11 @@
     transition: background var(--t-fast), border-color var(--t-fast);
   }
   .splitItem:hover { background: var(--bg-raised); border-color: var(--border-dim); }
-
   .splitItemActive {
     background: var(--accent-muted);
     border-color: var(--accent-dim);
   }
   .splitItemActive:hover { background: var(--accent-muted); }
-
   .splitItemLabel {
     font-size: var(--text-xs);
     color: var(--text-muted);
@@ -1588,9 +1457,7 @@
     white-space: nowrap;
   }
   .splitItemActive .splitItemLabel { color: var(--accent-fg); font-weight: var(--weight-medium); }
-
   .splitItemSource { gap: var(--sp-2); }
-
   .splitEmpty {
     font-family: var(--font-ui);
     font-size: var(--text-xs);
@@ -1598,7 +1465,6 @@
     padding: var(--sp-3);
     margin: 0;
   }
-
   .splitLoading {
     flex: 1;
     display: flex;
@@ -1606,16 +1472,12 @@
     justify-content: center;
     padding: var(--sp-6);
   }
-
-  /* ── Split content ─────────────────────────────────────────────────────── */
-
   .splitContent {
     flex: 1;
     display: flex;
     flex-direction: column;
     overflow: hidden;
   }
-
   .splitContentHeader {
     display: flex;
     align-items: center;
@@ -1625,7 +1487,6 @@
     flex-shrink: 0;
     gap: var(--sp-2);
   }
-
   .splitSourceTitle {
     display: flex;
     align-items: center;
@@ -1633,7 +1494,6 @@
     flex: 1;
     min-width: 0;
   }
-
   .splitContentTitle {
     font-size: var(--text-base);
     font-weight: var(--weight-medium);
@@ -1643,7 +1503,6 @@
     white-space: nowrap;
     letter-spacing: var(--tracking-tight);
   }
-
   .splitResultCount {
     font-family: var(--font-ui);
     font-size: var(--text-2xs);
@@ -1651,7 +1510,6 @@
     letter-spacing: var(--tracking-wide);
     flex-shrink: 0;
   }
-
   .splitSourceIcon {
     width: 18px;
     height: 18px;
@@ -1660,9 +1518,6 @@
     flex-shrink: 0;
     background: var(--bg-raised);
   }
-
-  /* ── Tag active bar ────────────────────────────────────────────────────── */
-
   .tagActiveBar {
     display: flex;
     align-items: flex-start;
@@ -1672,7 +1527,6 @@
     flex-shrink: 0;
     flex-wrap: wrap;
   }
-
   .tagPillRow {
     display: flex;
     flex-wrap: wrap;
@@ -1680,7 +1534,6 @@
     flex: 1;
     min-width: 0;
   }
-
   .tagPill {
     display: inline-flex;
     align-items: center;
@@ -1694,7 +1547,6 @@
     letter-spacing: var(--tracking-wide);
     color: var(--accent-fg);
   }
-
   .tagPillRemove {
     color: var(--accent-fg);
     opacity: 0.6;
@@ -1707,21 +1559,18 @@
     transition: opacity var(--t-base);
   }
   .tagPillRemove:hover { opacity: 1; }
-
   .tagBarRight {
     display: flex;
     align-items: center;
     gap: 4px;
     flex-shrink: 0;
   }
-
   .tagModeToggle {
     display: flex;
     border: 1px solid var(--border-dim);
     border-radius: var(--radius-md);
     overflow: hidden;
   }
-
   .tagModeBtn {
     display: flex;
     align-items: center;
@@ -1741,7 +1590,6 @@
   .tagModeBtn:hover { color: var(--text-muted); background: var(--bg-raised); }
   .tagModeBtnActive { color: var(--accent-fg); background: var(--accent-muted); }
   .tagModeBtnActive:hover { color: var(--accent-fg); background: var(--accent-muted); }
-
   .tagClearAll {
     display: flex;
     align-items: center;
@@ -1761,15 +1609,11 @@
     border-color: color-mix(in srgb, var(--color-error) 40%, transparent);
     background: var(--color-error-bg, color-mix(in srgb, var(--color-error) 8%, transparent));
   }
-
   .tagCheckMark {
     font-size: var(--text-xs);
     color: var(--accent-fg);
     margin-left: auto;
   }
-
-  /* ── Grid results ──────────────────────────────────────────────────────── */
-
   .tagGrid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
@@ -1779,9 +1623,6 @@
     flex: 1;
     align-content: start;
   }
-
-  /* ── Show more / load more ─────────────────────────────────────────────── */
-
   .showMoreCell {
     grid-column: 1 / -1;
     display: flex;
@@ -1789,7 +1630,6 @@
     gap: var(--sp-2);
     padding: var(--sp-2) 0;
   }
-
   .showMoreBtn {
     display: inline-flex;
     align-items: center;
@@ -1811,7 +1651,6 @@
     border-color: var(--border-strong);
   }
   .showMoreBtn:disabled { opacity: 0.4; cursor: default; }
-
   .loadMoreRow {
     display: flex;
     justify-content: center;
@@ -1819,9 +1658,6 @@
     flex-shrink: 0;
     border-top: 1px solid var(--border-dim);
   }
-
-  /* ── Source tab: lang filter + browse bar ──────────────────────────────── */
-
   .sourceBrowseBar {
     display: flex;
     align-items: center;
@@ -1830,9 +1666,54 @@
     border-bottom: 1px solid var(--border-dim);
     flex-shrink: 0;
   }
-
+  .srcLangRow {
-  /* ── NSFW badge ────────────────────────────────────────────────────────── */
+    display: flex;
-
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--sp-2) var(--sp-3);
+    border-bottom: 1px solid var(--border-dim);
+    flex-shrink: 0;
+    gap: var(--sp-2);
+  }
+  .langPocketLabel {
+    font-family: var(--font-ui);
+    font-size: var(--text-2xs);
+    color: var(--text-faint);
+    letter-spacing: var(--tracking-wider);
+    text-transform: uppercase;
+  }
+  .langSelect {
+    appearance: none;
+    -webkit-appearance: none;
+    background: var(--bg-overlay);
+    border: 1px solid var(--border-dim);
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    font-family: var(--font-ui);
+    font-size: var(--text-2xs);
+    letter-spacing: var(--tracking-wide);
+    padding: 4px 24px 4px 8px;
+    cursor: pointer;
+    max-width: 110px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 256 256'%3E%3Cpath fill='%23888' d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 7px center;
+    transition: border-color var(--t-base), background var(--t-base), color var(--t-base);
+  }
+  .langSelect:hover {
+    border-color: var(--border-strong);
+    background-color: var(--bg-raised);
+    color: var(--text-primary);
+  }
+  .langSelect:focus {
+    outline: none;
+    border-color: var(--accent-dim);
+    color: var(--text-primary);
+  }
+  .langSelect option {
+    background: var(--bg-surface);
+    color: var(--text-secondary);
+  }
   .nsfwBadge {
     font-family: var(--font-ui);
     font-size: var(--text-2xs);
@@ -1845,81 +1726,8 @@
     margin-left: auto;
     flex-shrink: 0;
   }
-
-  /* ── Language pocket ───────────────────────────────────────────────────── */
-
-  .langPocketToggle {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    padding: var(--sp-2) var(--sp-3);
-    border-bottom: 1px solid var(--border-dim);
-    border-top: none;
-    border-left: none;
-    border-right: none;
-    background: none;
-    cursor: pointer;
-    flex-shrink: 0;
-    transition: background var(--t-fast);
-  }
-  .langPocketToggle:hover { background: var(--bg-raised); }
-
-  .langPocketLabel {
-    font-family: var(--font-ui);
-    font-size: var(--text-2xs);
-    color: var(--text-faint);
-    letter-spacing: var(--tracking-wider);
-    text-transform: uppercase;
-  }
-
-  .langPocket {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--sp-1);
-    padding: var(--sp-2) var(--sp-3);
-    border-bottom: 1px solid var(--border-dim);
-    flex-shrink: 0;
-    animation: fadeIn 0.1s ease both;
-  }
-
-  /* ── Source group (multi-lang) ─────────────────────────────────────────── */
-
   .splitItemGroup { }
   .splitItemGroupOpen { background: var(--bg-raised); }
-
-  .groupLangCount {
-    font-family: var(--font-ui);
-    font-size: var(--text-2xs);
-    color: var(--text-faint);
-    background: var(--bg-overlay);
-    border: 1px solid var(--border-dim);
-    border-radius: var(--radius-sm);
-    padding: 0px 5px;
-    flex-shrink: 0;
-    letter-spacing: var(--tracking-wide);
-  }
-
-  .groupChevron {
-    color: var(--text-faint);
-    flex-shrink: 0;
-    transition: transform 0.2s ease;
-  }
-
-  .splitItemLangOption {
-    padding-left: var(--sp-5);
-    background: var(--bg-overlay);
-  }
-  .splitItemLangOption:hover { background: var(--bg-raised); }
-
-  .langOptionDot {
-    width: 5px;
-    height: 5px;
-    border-radius: 50%;
-    background: var(--border-strong);
-    flex-shrink: 0;
-  }
-  .splitItemActive .langOptionDot { background: var(--accent-fg); }
 </style>
 
 <script module>

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);
@@ -83,6 +87,15 @@
     }
     return sortDir === "desc" ? base.reverse() : base;
   });
+
+  /**
+   * Chapter list in canonical reading order (ch1 -> ch2 -> ch3).
+   * Always passed to openReader so the Reader's idx-based prev/next
+   * navigation is direction-independent of the user's display sort.
+   */
+  const chaptersAsc = $derived(
+    [...chapters].sort((a, b) => a.sourceOrder - b.sourceOrder)
+  );
   const totalPages     = $derived(Math.ceil(sortedChapters.length / CHAPTERS_PER_PAGE));
   const pageChapters   = $derived(sortedChapters.slice((chapterPage - 1) * CHAPTERS_PER_PAGE, chapterPage * CHAPTERS_PER_PAGE));
   const readCount      = $derived(chapters.filter(c => c.isRead).length);
@@ -102,9 +115,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 +202,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 +338,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 ────────────────────────────────────────────────────────────
@@ -395,7 +453,7 @@
     <!-- Zone 3: Primary CTA + library action -->
     <div class="cta-section">
       {#if continueChapter}
-        <button class="read-btn" onclick={() => openReader(continueChapter!.chapter, sortedChapters)}>
+        <button class="read-btn" onclick={() => openReader(continueChapter!.chapter, chaptersAsc)}>
           <Play size={12} weight="fill" />
           {continueChapter.type === "continue"
             ? `Continue · Ch.${continueChapter.chapter.chapterNumber}${(continueChapter.chapter.lastPageRead ?? 0) > 0 ? ` p.${continueChapter.chapter.lastPageRead}` : ""}`
@@ -505,29 +563,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>
@@ -615,7 +674,7 @@
         {#each sortedChapters as ch, i}
           {@const inProgress = !ch.isRead && (ch.lastPageRead ?? 0) > 0}
           <button class="grid-cell" class:read={ch.isRead} class:in-progress={inProgress}
-            onclick={() => openReader(ch, sortedChapters)}
+            onclick={() => openReader(ch, chaptersAsc)}
             oncontextmenu={(e) => { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, chapter: ch, idx: i }; }}
             title={ch.name}>
             <span class="grid-cell-num">{ch.chapterNumber % 1 === 0 ? ch.chapterNumber.toFixed(0) : ch.chapterNumber}</span>
@@ -627,8 +686,8 @@
         {#each pageChapters as ch}
           {@const idxInSorted = sortedChapters.indexOf(ch)}
           <div role="button" tabindex="0" class="ch-row" class:read={ch.isRead}
-            onclick={() => openReader(ch, sortedChapters)}
+            onclick={() => openReader(ch, chaptersAsc)}
-            onkeydown={(e) => e.key === "Enter" && openReader(ch, sortedChapters)}
+            onkeydown={(e) => e.key === "Enter" && openReader(ch, chaptersAsc)}
             oncontextmenu={(e) => { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, chapter: ch, idx: idxInSorted }; }}>
             <div class="ch-left">
               <span class="ch-name">{ch.name}</span>

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>
@@ -306,7 +356,7 @@
               <div class="progress-track"><div class="progress-fill" style="width:{(readCount / totalCount) * 100}%"></div></div>
             {/if}
             {#if continueChapter}
-              <button class="read-btn" onclick={() => { openReader(continueChapter!.ch, chapters); close(); }}>
+              <button class="read-btn" onclick={() => { openReader(continueChapter!.ch, chapters, displayManga); close(); }}>
                 <Play size={12} weight="fill" />{continueChapter.label}
               </button>
             {/if}

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/components/shared/SourceList.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { onMount } from "svelte";
   import { MagnifyingGlass, CircleNotch, CaretDown, CaretRight } from "phosphor-svelte";
   import { gql, thumbUrl } from "../../lib/client";
   import { GET_SOURCES } from "../../lib/queries";
@@ -11,7 +12,7 @@
   let search               = $state("");
   let expanded             = $state(new Set<string>());
 
-  $effect(() => {
+  onMount(() => {
     gql<{ sources: { nodes: Source[] } }>(GET_SOURCES)
       .then((d) => { sources = d.sources.nodes; })
       .catch(console.error)

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/discord.ts

@@ -0,0 +1,79 @@
+import { start, stop, setActivity, clearActivity } from "tauri-plugin-drpc";
+import { Activity, Assets, Button, Timestamps }     from "tauri-plugin-drpc/activity";
+import type { Manga, Chapter }                       from "./types";
+
+const APP_ID         = "1487894643613106298";
+const FALLBACK_IMAGE = "moku_logo";
+
+let sessionStart: number | null = null;
+
+function isPublicUrl(url: string | null | undefined): boolean {
+  return typeof url === "string" && url.startsWith("https://");
+}
+
+function resolveCoverImage(manga: Manga): string {
+  return isPublicUrl(manga.thumbnailUrl) ? manga.thumbnailUrl : FALLBACK_IMAGE;
+}
+
+function trunc(s: string, max = 128): string {
+  return s.length <= max ? s : `${s.slice(0, max - 1)}…`;
+}
+
+function formatChapter(chapter: Chapter): string {
+  const n = chapter.chapterNumber;
+  return `Chapter ${Number.isInteger(n) ? n : n.toFixed(1)}`;
+}
+
+function getTimestamps(): Timestamps {
+  return new Timestamps(sessionStart ?? Date.now());
+}
+
+const BUTTONS = [
+  new Button("GitHub", "https://github.com/Youwes09/Moku"),
+  new Button("Discord", "https://discord.gg/Jq3pwuNqPp"),
+];
+
+export async function initRpc(): Promise<void> {
+  sessionStart = Date.now();
+  await start(APP_ID).catch(() => {});
+}
+
+export async function setReading(manga: Manga, chapter: Chapter): Promise<void> {
+  const assets = new Assets()
+    .setLargeImage(resolveCoverImage(manga))
+    .setLargeText(trunc(manga.title))
+    .setSmallImage(FALLBACK_IMAGE)
+    .setSmallText("Moku");
+
+  const activity = new Activity()
+    .setDetails(trunc(manga.title))
+    .setState(`${formatChapter(chapter)}  ·  Reading`)
+    .setAssets(assets)
+    .setTimestamps(getTimestamps());
+  activity.setButton(BUTTONS);
+
+  await setActivity(activity).catch(() => {});
+}
+
+export async function setIdle(): Promise<void> {
+  const assets = new Assets()
+    .setLargeImage(FALLBACK_IMAGE)
+    .setLargeText("Moku");
+
+  const activity = new Activity()
+    .setDetails("Browsing")
+    .setAssets(assets)
+    .setTimestamps(getTimestamps());
+  activity.setButton(BUTTONS);
+
+  await setActivity(activity).catch(() => {});
+}
+
+export async function clearReading(): Promise<void> {
+  await clearActivity().catch(() => {});
+}
+
+export async function destroyRpc(): Promise<void> {
+  sessionStart = null;
+  await stop().catch(() => {});
+}

src/lib/keybinds.ts

@@ -12,6 +12,7 @@ export interface Keybinds {
   togglePageStyle:        string;
   toggleFullscreen:       string;
   openSettings:           string;
+  toggleBookmark:         string;
 }
 
 export const DEFAULT_KEYBINDS: Keybinds = {
@@ -26,6 +27,7 @@ export const DEFAULT_KEYBINDS: Keybinds = {
   togglePageStyle:        "q",
   toggleFullscreen:       "f",
   openSettings:           "o",
+  toggleBookmark:         "m",
 };
 
 export const KEYBIND_LABELS: Record<keyof Keybinds, string> = {
@@ -40,6 +42,7 @@ export const KEYBIND_LABELS: Record<keyof Keybinds, string> = {
   togglePageStyle:        "Toggle page style",
   toggleFullscreen:       "Toggle fullscreen",
   openSettings:           "Open settings",
+  toggleBookmark:         "Toggle bookmark",
 };
 
 export function eventToKeybind(e: KeyboardEvent): string {

src/lib/queries.ts

@@ -187,6 +187,112 @@ export const GET_DOWNLOADS_PATH = `
   query GetDownloadsPath {
     settings {
       downloadsPath
+      localSourcePath
+    }
+  }
+`;
+
+export const SET_DOWNLOADS_PATH = `
+  mutation SetDownloadsPath($path: String!) {
+    setSettings(input: { settings: { downloadsPath: $path } }) {
+      settings { downloadsPath }
+    }
+  }
+`;
+
+export const SET_LOCAL_SOURCE_PATH = `
+  mutation SetLocalSourcePath($path: String!) {
+    setSettings(input: { settings: { localSourcePath: $path } }) {
+      settings { localSourcePath }
+    }
+  }
+`;
+
+// ── 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
+      }
     }
   }
 `;

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;
@@ -5,6 +17,7 @@ export interface Manga {
   inLibrary: boolean;
   downloadCount?: number;
   unreadCount?: number;
+  chapterCount?: number;
   description?: string | null;
   status?: string | null;
   author?: string | null;

src/lib/util.ts

@@ -5,6 +5,82 @@ export function cn(...inputs: ClassValue[]) {
   return clsx(inputs);
 }
 
+// ── NSFW genre filtering ──────────────────────────────────────────────────────
+
+/**
+ * Default substrings used when no user-configured list is available.
+ * The Settings > Content tab lets users add/remove entries from this list,
+ * which is stored as settings.nsfwFilteredTags.
+ */
+export const DEFAULT_NSFW_TAGS = [
+  "adult",
+  "mature",
+  "hentai",
+  "ecchi",
+  "erotic",       // catches "erotica", "erotic content", "erotic manga"
+  "pornograph",   // catches "pornographic", "pornography"
+  "18+",
+  "smut",
+  "lemon",
+  "explicit",
+  "sexual violence",
+];
+
+/**
+ * Returns true if the manga carries at least one genre tag matching any of
+ * the provided substrings (case-insensitive). Pass settings.nsfwFilteredTags
+ * as the tag list; falls back to DEFAULT_NSFW_TAGS if omitted.
+ */
+export function isNsfwManga(
+  manga: { genre?: string[] | null },
+  tags: string[] = DEFAULT_NSFW_TAGS,
+): boolean {
+  return (manga.genre ?? []).some((g) => {
+    const normalized = g.toLowerCase().trim();
+    return tags.some((sub) => normalized.includes(sub));
+  });
+}
+
+/**
+ * Single authoritative NSFW gate used by all views.
+ *
+ * Returns true when the manga should be HIDDEN. Checks in order:
+ *   1. showNsfw disabled globally → skip everything, hide by source flag or genre match.
+ *   2. Source is in blockedSourceIds → always hide regardless of showNsfw.
+ *   3. Source is in allowedSourceIds → always show (bypasses isNsfw flag only, genre tags still apply).
+ *   4. Source isNsfw flag → hide unless source is allowed.
+ *   5. Genre tag match → hide.
+ *
+ * Usage:  items.filter(m => !shouldHideNsfw(m, settings))
+ */
+export function shouldHideNsfw(
+  manga: {
+    genre?: string[] | null;
+    source?: { id?: string; isNsfw?: boolean } | null;
+  },
+  settings: {
+    showNsfw:            boolean;
+    nsfwFilteredTags:    string[];
+    nsfwAllowedSourceIds: string[];
+    nsfwBlockedSourceIds: string[];
+  },
+): boolean {
+  const srcId = manga.source?.id;
+
+  // Explicit block always wins, even when showNsfw is on
+  if (srcId && settings.nsfwBlockedSourceIds.includes(srcId)) return true;
+
+  // If NSFW is globally allowed, only explicit blocks apply
+  if (settings.showNsfw) return false;
+
+  // Source is explicitly allowed — skip the isNsfw flag check, but still filter genres
+  const sourceAllowed = !!(srcId && settings.nsfwAllowedSourceIds.includes(srcId));
+
+  if (!sourceAllowed && manga.source?.isNsfw) return true;
+
+  return isNsfwManga(manga, settings.nsfwFilteredTags);
+}
+
 // ── Source deduplication ──────────────────────────────────────────────────────
 
 export function dedupeSources(sources: Source[], preferredLang: string): Source[] {

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";
@@ -8,6 +8,25 @@ export type NavPage          = "home" | "library" | "sources" | "explore" | "dow
 export type ReadingDirection = "ltr" | "rtl";
 export type ChapterSortDir   = "desc" | "asc";
 export type ChapterSortMode  = "source" | "chapterNumber" | "uploadDate";
+
+export type LibrarySortMode =
+  | "az"
+  | "unreadCount"
+  | "totalChapters"
+  | "recentlyAdded"
+  | "recentlyRead"
+  | "latestFetched"
+  | "latestUploaded";
+
+export type LibrarySortDir = "asc" | "desc";
+
+export type LibraryStatusFilter =
+  | "ALL"
+  | "ONGOING"
+  | "COMPLETED"
+  | "CANCELLED"
+  | "HIATUS"
+  | "UNKNOWN";
 export type BuiltinTheme     = "dark" | "high-contrast" | "light" | "light-contrast" | "midnight" | "warm";
 export type Theme            = BuiltinTheme | string; // custom themes have string IDs like "custom:abc123"
 
@@ -78,7 +97,6 @@ export const DEFAULT_THEME_TOKENS: ThemeTokens = {
   "color-info-bg":  "#121a1f",
 };
 
-export const COMPLETED_FOLDER_ID = "completed";
 
 export interface HistoryEntry {
   mangaId:      number;
@@ -86,10 +104,21 @@ export interface HistoryEntry {
   thumbnailUrl: string;
   chapterId:    number;
   chapterName:  string;
-  pageNumber:   number;
   readAt:       number;
 }
 
+export interface BookmarkEntry {
+  mangaId:      number;
+  mangaTitle:   string;
+  thumbnailUrl: string;
+  chapterId:    number;
+  chapterName:  string;
+  pageNumber:   number;
+  savedAt:      number;
+  /** Optional user label, e.g. "before the fight scene" */
+  label?:       string;
+}
+
 /**
  * ReadLogEntry — append-only record of every chapter-completion event.
  * Unlike HistoryEntry (which dedupes per chapter for the "continue" UI),
@@ -142,19 +171,17 @@ export interface ActiveDownload {
   progress:  number;
 }
 
-export interface Folder {
-  id:       string;
-  name:     string;
-  mangaIds: number[];
-  showTab:  boolean;
-  system?:  boolean;
-}
 
 export interface Settings {
   pageStyle:               PageStyle;
   readingDirection:        ReadingDirection;
   fitMode:                 FitMode;
-  maxPageWidth:            number;
+  /**
+   * Reader zoom level — unitless float multiplier relative to the viewer
+   * container width. 1.0 = image fills the viewer, 1.5 = 150%, 0.8 = 80%.
+   * Replaces the old `maxPageWidth` pixel value.
+   */
+  readerZoom:              number;
   pageGap:                 boolean;
   optimizeContrast:        boolean;
   offsetDoubleSpreads:     boolean;
@@ -164,10 +191,16 @@ export interface Settings {
   libraryCropCovers:       boolean;
   libraryPageSize:         number;
   showNsfw:                boolean;
+  discordRpc:              boolean;
   chapterSortDir:          ChapterSortDir;
   chapterSortMode:         ChapterSortMode;
   chapterPageSize:         number;
-  uiScale:                 number;
+  /**
+   * UI zoom level — unitless float multiplier applied on top of the
+   * platform scale factor from the OS/monitor. 1.0 = no user adjustment.
+   * Replaces the old `uiScale` percentage integer.
+   */
+  uiZoom:                  number;
   compactSidebar:          boolean;
   gpuAcceleration:         boolean;
   serverUrl:               string;
@@ -178,9 +211,9 @@ export interface Settings {
   idleTimeoutMin?:         number;
   splashCards?:            boolean;
   storageLimitGb:          number | null;
-  folders:                 Folder[];
   markReadOnNext:          boolean;
   readerDebounceMs:        number;
+  autoBookmark:            boolean;
   theme:                   Theme;
   libraryBranches:         boolean;
   renderLimit:             number;
@@ -204,21 +237,40 @@ 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;
+  /**
+   * Content filtering — managed via the Content tab in Settings.
+   * nsfwFilteredTags:      substrings matched against genre tags (case-insensitive).
+   * nsfwAllowedSourceIds:  sources explicitly permitted even though isNsfw = true.
+   * nsfwBlockedSourceIds:  sources always blocked regardless of tag content.
+   */
+  nsfwFilteredTags:      string[];
+  nsfwAllowedSourceIds:  string[];
+  nsfwBlockedSourceIds:  string[];
+  /** Per-tab sort/filter state — keyed by libraryFilter value (e.g. "library", "downloaded", "42"). */
+  libraryTabSort:   Record<string, { mode: LibrarySortMode; dir: LibrarySortDir }>;
+  libraryTabStatus: Record<string, LibraryStatusFilter>;
+  // Legacy fields kept for migration reads only — never written after v3.
+  /** @deprecated use readerZoom */
+  maxPageWidth?:           number;
+  /** @deprecated use uiZoom */
+  uiScale?:                number;
+  /** User-added extra directories to include when scanning storage usage. */
+  extraScanDirs:           string[];
+  /** Cached downloads path from Suwayomi, kept in sync on storage tab load. */
+  serverDownloadsPath:     string;
+  /** Cached local source path from Suwayomi, kept in sync on storage tab load. */
+  serverLocalSourcePath:   string;
 }
 
-const COMPLETED_FOLDER_DEFAULT: Folder = {
-  id:       COMPLETED_FOLDER_ID,
-  name:     "Completed",
-  mangaIds: [],
-  showTab:  true,
-  system:   true,
-};
 
 export const DEFAULT_SETTINGS: Settings = {
   pageStyle:              "longstrip",
   readingDirection:       "ltr",
   fitMode:                "width",
-  maxPageWidth:           900,
+  readerZoom:             1.0,
   pageGap:                true,
   optimizeContrast:       false,
   offsetDoubleSpreads:    false,
@@ -228,10 +280,11 @@ export const DEFAULT_SETTINGS: Settings = {
   libraryCropCovers:      true,
   libraryPageSize:        48,
   showNsfw:               false,
+  discordRpc:             false,
   chapterSortDir:         "desc",
   chapterSortMode:        "source",
   chapterPageSize:        25,
-  uiScale:                100,
+  uiZoom:                 1.0,
   compactSidebar:         false,
   gpuAcceleration:        true,
   serverUrl:              "http://localhost:4567",
@@ -242,9 +295,9 @@ export const DEFAULT_SETTINGS: Settings = {
   idleTimeoutMin:         5,
   splashCards:            true,
   storageLimitGb:         null,
-  folders:                [COMPLETED_FOLDER_DEFAULT],
   markReadOnNext:         true,
   readerDebounceMs:       120,
+  autoBookmark:           true,
   theme:                  "dark",
   libraryBranches:        true,
   renderLimit:            48,
@@ -268,16 +321,28 @@ export const DEFAULT_SETTINGS: Settings = {
   appLockEnabled:         false,
   appLockPin:             "",
   customThemes:           [],
+  hiddenCategoryIds:      [],
+  defaultLibraryCategoryId: null,
+  nsfwFilteredTags:      ["adult", "mature", "hentai", "ecchi", "erotic", "pornograph", "18+", "smut", "lemon", "explicit", "sexual violence"],
+  nsfwAllowedSourceIds:  [],
+  nsfwBlockedSourceIds:  [],
+  libraryTabSort:         {},
+  libraryTabStatus:       {},
+  extraScanDirs:          [],
+  serverDownloadsPath:    "",
+  serverLocalSourcePath:  "",
 };
 
 // ── Persistence ───────────────────────────────────────────────────────────────
 
-const STORE_VERSION = 2;
+const STORE_VERSION = 3;
 
 // Fields reset to their DEFAULT_SETTINGS value on each version bump.
 // Add a key here whenever its default changes meaning between releases.
 const RESET_ON_UPGRADE: (keyof Settings)[] = [
   "serverBinary",
+  "readerZoom",
+  "uiZoom",
 ];
 
 function loadPersisted(): any {
@@ -318,20 +383,19 @@ 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 ?? [],
+    libraryTabSort:    saved?.settings?.libraryTabSort    ?? {},
+    libraryTabStatus:  saved?.settings?.libraryTabStatus  ?? {},
+    nsfwFilteredTags:     saved?.settings?.nsfwFilteredTags     ?? ["adult", "mature", "hentai", "ecchi", "erotic", "pornograph", "18+", "smut", "lemon", "explicit", "sexual violence"],
+    nsfwAllowedSourceIds: saved?.settings?.nsfwAllowedSourceIds ?? [],
+    nsfwBlockedSourceIds: saved?.settings?.nsfwBlockedSourceIds ?? [],
   };
 }
 
@@ -350,7 +414,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
@@ -358,6 +422,11 @@ class Store {
    * Capped at 5 000 entries; oldest are trimmed first.
    */
   readLog:           ReadLogEntry[]   = $state(saved?.readLog       ?? []);
+  /**
+   * bookmarks — user-placed markers at a specific page in a chapter.
+   * Capped at 200 entries; oldest are trimmed first when the cap is hit.
+   */
+  bookmarks:         BookmarkEntry[]  = $state(saved?.bookmarks     ?? []);
   readingStats:      ReadingStats     = $state(mergeStats(saved));
   settings:          Settings         = $state(mergeSettings(saved));
 
@@ -383,6 +452,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>"
@@ -397,12 +472,17 @@ class Store {
       $effect(() => { persist({ libraryFilter: this.libraryFilter }); });
       $effect(() => { persist({ history:       this.history       }); });
       $effect(() => { persist({ readLog:       this.readLog       }); });
+      $effect(() => { persist({ bookmarks:     this.bookmarks     }); });
       $effect(() => { persist({ readingStats:  this.readingStats  }); });
       $effect(() => { persist({ settings:      this.settings      }); });
     });
   }
 
-  openReader(chapter: Chapter, chapterList: Chapter[]) {
+  openReader(chapter: Chapter, chapterList: Chapter[], manga?: Manga | null) {
+    // Always set activeManga when provided so the Reader has full manga
+    // context for Discord RPC (setReading) and any other manga-aware logic.
+    // Callers that already set store.activeManga directly may omit this arg.
+    if (manga) this.activeManga = manga;
     this.activeChapter     = chapter;
     this.activeChapterList = chapterList;
     this.pageUrls          = [];
@@ -432,7 +512,7 @@ class Store {
     // ── 1. Update the deduped "continue reading" history ──────────────────
     // Always keep the latest position for each chapter at the top.
     if (this.history[0]?.chapterId === entry.chapterId) {
-      this.history[0] = { ...this.history[0], pageNumber: entry.pageNumber, readAt: entry.readAt };
+      this.history[0] = { ...this.history[0], readAt: entry.readAt };
     } else {
       this.history = [entry, ...this.history.filter(x => x.chapterId !== entry.chapterId)].slice(0, 300);
     }
@@ -484,6 +564,31 @@ class Store {
     };
   }
 
+  /**
+   * Add or update a bookmark for the given chapter/page. Only one bookmark
+   * per chapter is kept — adding a second one replaces the first.
+   */
+  addBookmark(entry: Omit<BookmarkEntry, "savedAt">, label?: string) {
+    const bookmark: BookmarkEntry = { ...entry, savedAt: Date.now(), label };
+    this.bookmarks = [
+      bookmark,
+      // Keep bookmarks from other manga only — one bookmark per manga at a time
+      ...this.bookmarks.filter(b => b.mangaId !== entry.mangaId),
+    ].slice(0, 200);
+  }
+
+  removeBookmark(chapterId: number) {
+    this.bookmarks = this.bookmarks.filter(b => b.chapterId !== chapterId);
+  }
+
+  clearBookmarks() {
+    this.bookmarks = [];
+  }
+
+  getBookmark(chapterId: number): BookmarkEntry | undefined {
+    return this.bookmarks.find(b => b.chapterId === chapterId);
+  }
+
   clearHistory()                        { this.history = []; this.readLog = []; }
   clearHistoryForManga(mangaId: number) {
     this.history = this.history.filter(x => x.mangaId !== mangaId);
@@ -504,31 +609,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 +643,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 +659,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 +674,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();
@@ -648,22 +721,19 @@ export const store = new Store();
 
 // ── Function re-exports — zero call-site changes for actions ──────────────────
 
-export function openReader(chapter: Chapter, chapterList: Chapter[])    { store.openReader(chapter, chapterList); }
+export function openReader(chapter: Chapter, chapterList: Chapter[], manga?: Manga | null) { store.openReader(chapter, chapterList, manga); }
 export function closeReader()                                            { store.closeReader(); }
 export function addHistory(entry: HistoryEntry, completed?: boolean, minutes?: number) { store.addHistory(entry, completed, minutes); }
 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 +748,21 @@ 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 addBookmark(entry: Omit<BookmarkEntry, "savedAt">, label?: string) { store.addBookmark(entry, label); }
+export function removeBookmark(chapterId: number)                            { store.removeBookmark(chapterId); }
+export function clearBookmarks()                                             { store.clearBookmarks(); }
+export function getBookmark(chapterId: number)                               { return store.getBookmark(chapterId); }
+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);
+}