Feat: Backtracing + NavPage Store

Fix: Biometric Revision V1
Fix: PerformanceSettings RenderLimit CSS Revision (#63 )
2026-06-13 09:19:56 -05:00 · 2026-05-10 04:31:27 -05:00 · 2026-05-10 03:00:08 -05:00 · 2026-05-10 02:50:48 -05:00 · 2026-05-10 02:17:25 -05:00 · 2026-05-03 13:06:02 -05:00
51 changed files with 1469 additions and 1316 deletions
@@ -22,7 +22,7 @@ source=(
    "Suwayomi-Server-v2.1.2087.jar::https://github.com/Suwayomi/Suwayomi-Server-preview/releases/download/v2.1.2087/Suwayomi-Server-v2.1.2087.jar"
 )
 sha256sums=(
-    '4d0fbed929d5660ddcb591ff33f808910e13df1e8e7bfc8df83f367fd7bcd881'
+    'e7f3d70c81af2afd9933aab55372a8b0122bfd201dcf6077a61f2c69990aecf9'
    'f589a422674252394c13b289a9c8be691905bf583efb7f4d5f1501ae5e91e6b3'
 )

@@ -52,7 +52,7 @@ package() {
    cat > "$pkgdir/usr/lib/moku/tachidesk/default-conf/server.conf" << 'CONF'
 server.ip = "127.0.0.1"
 server.port = 4567
-server.webUIEnabled = false
+server.webUIEnabled = true
 server.initialOpenInBrowserEnabled = false
 server.systemTrayEnabled = false
 server.downloadAsCbz = true
@@ -35,8 +35,5 @@ In-Progress:

 - Wire Series-Detail Refresh to Fix Manga-Metadata (MAJOR)

- - Add Disable Auto-Completed Feature to Library
- - Cap ReaderSettings Zoom (100)
- - Fix SeriesDetail Chapter Amount (Link to Scanlator Filtering)
-
+ - UI LOGIN DOES NOT WORK OFFLINE
 Notes from last time:
@@ -53,8 +53,6 @@
            gsettings-desktop-schemas
          ];

-          # ── source filters ──────────────────────────────────────────────
-
          frontendSrc = lib.cleanSourceWith {
            src = ./.;
            filter =
@@ -80,8 +78,6 @@
              || (builtins.baseNameOf path == "tauri.conf.json");
          };

-          # ── packages ────────────────────────────────────────────────────
-
          suwayomiServer = pkgs.callPackage ./nix/server.nix { };

          frontend = pkgs.callPackage ./nix/frontend.nix {
@@ -94,8 +90,6 @@
            appIcon = ./src/assets/moku-icon.svg;
          };

-          # ── dev/release scripts ─────────────────────────────────────────
-
          scripts = import ./nix/scripts.nix { inherit pkgs rustToolchain version; };

        in
@@ -95,12 +95,12 @@ modules:
        cat > /app/tachidesk/default-conf/server.conf << 'EOF'
        server.ip = "127.0.0.1"
        server.port = 4567
-        server.webUIEnabled = false
+        server.webUIEnabled = true
        server.initialOpenInBrowserEnabled = false
        server.systemTrayEnabled = false
        server.webUIInterface = "browser"
        server.webUIFlavor = "WebUI"
-        server.webUIChannel = "stable"
+        server.webUIChannel = "PREVIEW"
        server.electronPath = ""
        server.debugLogsEnabled = false
        server.downloadAsCbz = true
@@ -130,7 +130,7 @@ modules:
          "$DATA_DIR/server.conf"

        # Append keys if absent
-        grep -q 'server\.webUIEnabled'                "$DATA_DIR/server.conf" || echo 'server.webUIEnabled = false'                >> "$DATA_DIR/server.conf"
+        grep -q 'server\.webUIEnabled'                "$DATA_DIR/server.conf" || echo 'server.webUIEnabled = true'                >> "$DATA_DIR/server.conf"
        grep -q 'server\.initialOpenInBrowserEnabled' "$DATA_DIR/server.conf" || echo 'server.initialOpenInBrowserEnabled = false' >> "$DATA_DIR/server.conf"
        grep -q 'server\.systemTrayEnabled'           "$DATA_DIR/server.conf" || echo 'server.systemTrayEnabled = false'           >> "$DATA_DIR/server.conf"

@@ -180,7 +180,7 @@ modules:
      - type: git
        url: https://github.com/moku-project/Moku.git
        tag: v0.9.2
-        commit: e33464b05baddc7c4ad3815f3f126f791e8c58cc
+        commit: 83711c155d3e60ab4e2411ea6e0098231d76f8b9
      - type: file
        path: packaging/frontend-dist.tar.gz
        sha256: 22128c591ddacac218b7223106ed3c3f052799db2a647247789492b925370086
@@ -10,7 +10,7 @@ stdenv.mkDerivation {
    pname = "moku-frontend";
    inherit version src;
    fetcherVersion = 1;
-    hash = "sha256-t6Gj84hCE3CuDAJfbdXi0FuqgPCqlkMmAzETcKL4e3U=";
+    hash = "sha256-eRuSSRhNmJ09mp/uhbG+NFeiOZ5dTOdJ94OwdP6IkN0=";
  };

  buildPhase = "pnpm build";
@@ -10,23 +10,23 @@
    "tauri:dev": "tauri dev --config src-tauri/tauri.dev.conf.json"
  },
  "dependencies": {
-    "@tauri-apps/api": "^2.0.0",
+    "@tauri-apps/api": "^2.11.0",
    "@tauri-apps/plugin-http": "^2.5.8",
    "@tauri-apps/plugin-os": "^2.3.2",
    "@tauri-apps/plugin-shell": "^2.3.5",
    "@tauri-apps/plugin-store": "~2.4.2",
    "clsx": "^2.1.1",
    "phosphor-svelte": "^3.1.0",
-    "svelte-spa-router": "^4.0.1",
+    "svelte-spa-router": "^5.1.0",
    "tauri-plugin-discord-rpc-api": "github:Youwes09/tauri-plugin-discord-rpc",
    "tauri-plugin-drpc": "^1.0.3"
  },
  "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^4.0.4",
-    "@tauri-apps/cli": "^2.0.0",
-    "svelte": "^5.0.0",
-    "svelte-check": "^3.0.0",
-    "typescript": "^5.0.0",
-    "vite": "^5.0.0"
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@tauri-apps/cli": "^2.11.0",
+    "svelte": "^5.55.5",
+    "svelte-check": "^4.4.7",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.10"
  }
 }
@@ -61,12 +61,12 @@ if [ ! -f "$DATA_DIR/server.conf" ]; then
  cat > "$DATA_DIR/server.conf" << 'EOF'
 server.ip = "127.0.0.1"
 server.port = 4567
-server.webUIEnabled = false
+server.webUIEnabled = true
 server.initialOpenInBrowserEnabled = false
 server.systemTrayEnabled = false
 server.webUIInterface = "browser"
 server.webUIFlavor = "WebUI"
-server.webUIChannel = "stable"
+server.webUIChannel = "PREVIEW"
 server.electronPath = ""
 server.debugLogsEnabled = false
 server.downloadAsCbz = true
@@ -79,13 +79,13 @@ fi

 # ── Force-patch the three keys that cause JCEF/GUI crashes ────────────────────
 sed -i \
-  -e 's|server\.webUIEnabled.*|server.webUIEnabled = false|' \
+  -e 's|server\.webUIEnabled.*|server.webUIEnabled = true|' \
  -e 's|server\.initialOpenInBrowserEnabled.*|server.initialOpenInBrowserEnabled = false|' \
  -e 's|server\.systemTrayEnabled.*|server.systemTrayEnabled = false|' \
  "$DATA_DIR/server.conf"

 # Append keys if absent (e.g. user-managed conf missing them)
-grep -q 'server\.webUIEnabled'                "$DATA_DIR/server.conf" || echo 'server.webUIEnabled = false'                >> "$DATA_DIR/server.conf"
+grep -q 'server\.webUIEnabled'                "$DATA_DIR/server.conf" || echo 'server.webUIEnabled = true'                >> "$DATA_DIR/server.conf"
 grep -q 'server\.initialOpenInBrowserEnabled' "$DATA_DIR/server.conf" || echo 'server.initialOpenInBrowserEnabled = false' >> "$DATA_DIR/server.conf"
 grep -q 'server\.systemTrayEnabled'           "$DATA_DIR/server.conf" || echo 'server.systemTrayEnabled = false'           >> "$DATA_DIR/server.conf"

@@ -77,7 +77,9 @@ pub fn auto_backup_app_data(app: tauri::AppHandle, bytes: Vec<u8>) -> Result<(),

 #[tauri::command]
 pub fn get_auto_backup_dir(app: tauri::AppHandle) -> String {
-    backup_dir(&app).to_string_lossy().into_owned()
+    let dir = backup_dir(&app);
+    let _ = std::fs::create_dir_all(&dir);
+    dir.to_string_lossy().into_owned()
 }

 #[tauri::command]
@@ -47,12 +47,22 @@ mod windows_hello {
    }

    pub fn authenticate(reason: &str) -> Result<(), String> {
-        nudge_focus(5, 250);
-        let result = UserConsentVerifier::RequestVerificationAsync(&HSTRING::from(reason))
-            .and_then(|op| {
-                nudge_focus(5, 250);
-                op.get()
-            })
+        let reason = reason.to_owned();
+        let (tx, rx) = std::sync::mpsc::channel();
+
+        std::thread::spawn(move || {
+            nudge_focus(5, 250);
+            let outcome = UserConsentVerifier::RequestVerificationAsync(&HSTRING::from(reason.as_str()))
+                .and_then(|op| {
+                    nudge_focus(5, 250);
+                    op.get()
+                });
+            let _ = tx.send(outcome);
+        });
+
+        let result = rx
+            .recv()
+            .map_err(|e| format!("internalError:{e:?}"))?
            .map_err(|e| format!("internalError:{e:?}"))?;

        match result {
@@ -77,9 +87,9 @@ mod windows_hello {
 }

 #[tauri::command]
-pub fn windows_hello_authenticate(reason: String) -> Result<(), String> {
+pub fn windows_hello_authenticate(_reason: String) -> Result<(), String> {
    #[cfg(target_os = "windows")]
-    return windows_hello::authenticate(&reason);
+    return windows_hello::authenticate(&_reason);
    #[cfg(not(target_os = "windows"))]
    Err("notSupported".into())
 }
@@ -1,7 +1,6 @@
 #[cfg(target_os = "windows")]
 use crate::server::resolve::strip_unc;
 use tauri::Manager;
-use std::path::PathBuf;

 #[tauri::command]
 pub fn get_platform_ui_scale(window: tauri::Window) -> f64 {
@@ -11,7 +11,6 @@ pub struct ServerState(pub Mutex<Option<CommandChild>>);
 pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_store::Builder::new().build())
-        .plugin(tauri_plugin_store::Builder::default().build())
        .plugin(tauri_plugin_discord_rpc::init())
        .plugin(tauri_plugin_dialog::init())
        .plugin(tauri_plugin_os::init())
@@ -39,6 +38,7 @@ pub fn run() {
            commands::backup::import_app_data,
            commands::backup::auto_backup_app_data,
            commands::backup::get_auto_backup_dir,
+            commands::backup::read_store_files,
            commands::updater::list_releases,
            commands::updater::download_and_install_update,
            commands::biometric::windows_hello_authenticate,
@@ -1,6 +1,7 @@
 use crate::server::do_log;
 use serde::Serialize;
 use std::path::PathBuf;
+use walkdir::WalkDir;
 use tauri::Manager;

 #[derive(Serialize, Debug)]
@@ -1,10 +1,24 @@
 import { store } from "@store/state.svelte";
-import { fetchAuthenticated, AuthRequiredError } from "../core/auth";
+import { fetchAuthenticated, AuthRequiredError, uiAuth } from "../core/auth";
 import { boot } from "@store/boot.svelte";
+import { getBlobUrl } from "@core/cache/imageCache";

 const DEFAULT_URL = "http://127.0.0.1:4567";

-function getServerUrl(): string {
+type ReauthResolver = () => void;
+let _reauthQueue: ReauthResolver[] = [];
+
+export function notifyReauthSuccess() {
+  const queue = _reauthQueue;
+  _reauthQueue = [];
+  queue.forEach(resolve => resolve());
+}
+
+function waitForReauth(): Promise<void> {
+  return new Promise(resolve => { _reauthQueue.push(resolve); });
+}
+
+export function getServerUrl(): string {
  const url = store.settings.serverUrl;
  return typeof url === "string" && url.trim() ? url.replace(/\/$/, "") : DEFAULT_URL;
 }
@@ -15,6 +29,14 @@ export function plainThumbUrl(path: string): string {
  return `${getServerUrl()}${path}`;
 }

+export async function resolveImageUrl(path: string): Promise<string> {
+  if (!path) return "";
+  const url = path.startsWith("http") ? path : `${getServerUrl()}${path}`;
+  const mode = store.settings.serverAuthMode ?? "NONE";
+  if (mode === "NONE") return url;
+  return getBlobUrl(url);
+}
+
 export const thumbUrl = plainThumbUrl;

 interface GQLResponse<T> {
@@ -58,29 +80,54 @@ async function fetchWithRetry(
  throw new Error("unreachable");
 }

+export async function fetchImage(
+  path: string,
+  signal?: AbortSignal,
+): Promise<{ src: string; revoke: () => void }> {
+  if (!path) return { src: "", revoke: () => {} };
+
+  const url  = path.startsWith("http") ? path : `${getServerUrl()}${path}`;
+  const mode = store.settings.serverAuthMode ?? "NONE";
+
+  if (mode === "NONE") return { src: url, revoke: () => {} };
+
+  const res = await fetchWithRetry(url, { method: "GET" }, signal);
+  if (!res.ok) throw new Error(`Image fetch failed: ${res.status}`);
+
+  const blob = await res.blob();
+  const src  = URL.createObjectURL(blob);
+  return { src, revoke: () => URL.revokeObjectURL(src) };
+}
+
 export async function gql<T>(
  query: string,
  variables?: Record<string, unknown>,
  signal?: AbortSignal,
 ): Promise<T> {
-  const res = await fetchWithRetry(
-    `${getServerUrl()}/api/graphql`,
-    { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query, variables }) },
-    signal,
-  );
-  if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
-  if (!res.ok) throw new Error(`Suwayomi HTTP ${res.status}`);
-  const json: GQLResponse<T> = await res.json();
-  if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
-  if (json.errors?.length) {
-    const isAuthError = json.errors.some(e => /unauthorized|unauthenticated/i.test(e.message));
-    if (isAuthError && !boot.skipped) {
-      boot.sessionExpired = true;
-      boot.loginRequired  = true;
-      boot.loginUser      = store.settings.serverAuthUser ?? "";
-      throw new AuthRequiredError(json.errors[0].message);
+  const attempt = async (): Promise<T> => {
+    const res = await fetchWithRetry(
+      `${getServerUrl()}/api/graphql`,
+      { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query, variables }) },
+      signal,
+    );
+    if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
+    if (!res.ok) throw new Error(`Suwayomi HTTP ${res.status}`);
+    const json: GQLResponse<T> = await res.json();
+    if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
+    if (json.errors?.length) {
+      const isAuthError = json.errors.some(e => /unauthorized|unauthenticated/i.test(e.message));
+      if (isAuthError && !boot.skipped) {
+        boot.sessionExpired = true;
+        boot.loginRequired  = true;
+        boot.loginUser      = store.settings.serverAuthUser ?? "";
+        await waitForReauth();
+        if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
+        return attempt();
+      }
+      throw new Error(json.errors[0].message);
    }
-    throw new Error(json.errors[0].message);
-  }
-  return json.data;
+    return json.data;
+  };
+
+  return attempt();
 }
@@ -9,12 +9,13 @@ export class AuthRequiredError extends Error {
  }
 }

-let _accessToken: string | null = null;
+const TOKEN_KEY = "moku_access_token";
+let _accessToken: string | null = sessionStorage.getItem(TOKEN_KEY);

 export const uiAuth = {
  getToken:   () => _accessToken,
-  setToken:   (t: string) => { _accessToken = t; },
-  clearToken: () => { _accessToken = null; },
+  setToken:   (t: string) => { _accessToken = t; sessionStorage.setItem(TOKEN_KEY, t); },
+  clearToken: () => { _accessToken = null; sessionStorage.removeItem(TOKEN_KEY); },
 };

 export const authSession = {
@@ -1,5 +1,6 @@
 import { fetch as tauriFetch } from "@tauri-apps/plugin-http";
 import { store } from "@store/state.svelte";
+import { uiAuth } from "@core/auth";

 const cache    = new Map<string, string>();
 const inflight = new Map<string, Promise<string>>();
@@ -17,9 +18,17 @@ interface QueueEntry {
 const queue: QueueEntry[] = [];

 function getAuthHeaders(): Record<string, string> {
-  const user = store.settings.serverAuthUser?.trim() ?? "";
-  const pass = store.settings.serverAuthPass?.trim() ?? "";
-  return user && pass ? { Authorization: `Basic ${btoa(`${user}:${pass}`)}` } : {};
+  const mode = store.settings.serverAuthMode ?? "NONE";
+  if (mode === "UI_LOGIN") {
+    const token = uiAuth.getToken();
+    return token ? { Authorization: `Bearer ${token}` } : {};
+  }
+  if (mode === "BASIC_AUTH") {
+    const user = store.settings.serverAuthUser?.trim() ?? "";
+    const pass = store.settings.serverAuthPass?.trim() ?? "";
+    return user && pass ? { Authorization: `Basic ${btoa(`${user}:${pass}`)}` } : {};
+  }
+  return {};
 }

 async function doFetch(url: string): Promise<string> {
@@ -47,7 +56,7 @@ function drain() {
    active++;
    doFetch(entry.url)
      .then(entry.resolve, entry.reject)
-      .finally(() => { inflight.delete(entry.url); active--; drain(); });
+      .finally(() => { active--; drain(); });
  }
 }

@@ -58,7 +67,12 @@ function scheduleDrain() {
 }

 function enqueue(url: string, priority: number): Promise<string> {
-  const promise = new Promise<string>((resolve, reject) => { insertSorted({ url, priority, resolve, reject }); });
+  const promise = new Promise<string>((resolve, reject) => {
+    insertSorted({ url, priority, resolve, reject });
+  }).catch(err => {
+    inflight.delete(url);
+    return Promise.reject(err);
+  });
  inflight.set(url, promise);
  scheduleDrain();
  return promise;
@@ -98,7 +112,17 @@ export function deprioritizeQueue(): void {
  queue.sort((a, b) => b.priority - a.priority);
 }

+export function cancelQueuedFetches(): void {
+  const dropped = queue.splice(0);
+  for (const entry of dropped) {
+    inflight.delete(entry.url);
+    entry.reject(new DOMException("Cancelled", "AbortError"));
+  }
+}
+
 export function clearBlobCache(): void {
+  cancelQueuedFetches();
  cache.forEach(blob => URL.revokeObjectURL(blob));
  cache.clear();
+  inflight.clear();
 }
@@ -1,18 +1,23 @@
-import { gql, plainThumbUrl }         from "@api/client";
-import { getBlobUrl, preloadBlobUrls } from "@core/cache/imageCache";
-import { dedupeRequest }               from "@core/async/batchRequests";
-import { FETCH_CHAPTER_PAGES }         from "@api/mutations/chapters";
+import { gql, getServerUrl }           from "@api/client";
+import { getBlobUrl, preloadBlobUrls }  from "@core/cache/imageCache";
+import { dedupeRequest }                from "@core/async/batchRequests";
+import { FETCH_CHAPTER_PAGES }          from "@api/mutations/chapters";

 const pageCache        = new Map<number, string[]>();
 const inflight         = new Map<number, Promise<string[]>>();
 const resolvedUrlCache = new Map<string, Promise<string>>();
-const preloadedUrls    = new Set<string>();
 const aspectCache      = new Map<string, number>();

 export function resolveUrl(url: string, useBlob: boolean, priority = 0): Promise<string> {
  if (!useBlob) return Promise.resolve(url);
-  if (!resolvedUrlCache.has(url)) resolvedUrlCache.set(url, getBlobUrl(url, priority));
-  return resolvedUrlCache.get(url)!;
+  const cached = resolvedUrlCache.get(url);
+  if (cached) return cached;
+  const p = getBlobUrl(url, priority).catch(err => {
+    resolvedUrlCache.delete(url);
+    return Promise.reject(err);
+  });
+  resolvedUrlCache.set(url, p);
+  return p;
 }

 export function fetchPages(
@@ -29,11 +34,8 @@ export function fetchPages(
    const p = dedupeRequest(`chapter-pages:${chapterId}`, () =>
      gql<{ fetchChapterPages: { pages: string[] } }>(FETCH_CHAPTER_PAGES, { chapterId })
        .then(d => {
-          const urls = d.fetchChapterPages.pages.map(p => plainThumbUrl(p));
-          if (useBlob) {
-            if (urls[priorityPage]) getBlobUrl(urls[priorityPage], urls.length + 999);
-            preloadBlobUrls(urls.filter((_, i) => i !== priorityPage), urls.length);
-          }
+          const urls = d.fetchChapterPages.pages.map(p => p.startsWith("http") ? p : `${getServerUrl()}${p}`);
+          if (useBlob && urls[priorityPage]) getBlobUrl(urls[priorityPage], 999);
          pageCache.set(chapterId, urls);
          return urls;
        })
@@ -60,11 +62,18 @@ export function measureAspect(url: string, useBlob: boolean): Promise<number> {
 }

 export function preloadImage(url: string, useBlob: boolean): void {
-  if (preloadedUrls.has(url)) return;
-  preloadedUrls.add(url);
+  if (useBlob) {
+    preloadBlobUrls([url], 0);
+    return;
+  }
  resolveUrl(url, useBlob).then(src => { new Image().src = src; }).catch(() => {});
 }

+export function clearResolvedUrlCache(): void {
+  resolvedUrlCache.clear();
+  aspectCache.clear();
+}
+
 export function clearPageCache(chapterId?: number): void {
  if (chapterId !== undefined) {
    pageCache.delete(chapterId);
@@ -73,7 +82,6 @@ export function clearPageCache(chapterId?: number): void {
    pageCache.clear();
    inflight.clear();
    resolvedUrlCache.clear();
-    preloadedUrls.clear();
    aspectCache.clear();
  }
 }
@@ -159,3 +159,16 @@ export function getTopSources<T extends { id: string }>(sources: T[]): T[] {
  }
  return sources.slice(0, MAX_FRECENCY_SOURCES);
 }
+
+export async function refreshMangaCache(mangaId: number, thumbnailUrl?: string): Promise<void> {
+  cache.clear(CACHE_KEYS.MANGA(mangaId));
+  cache.clear(CACHE_KEYS.CHAPTERS(mangaId));
+  cache.clear(CACHE_KEYS.LIBRARY);
+  cache.clear(CACHE_KEYS.ALL_MANGA);
+
+  if (thumbnailUrl) {
+    const { revokeBlobUrl, getBlobUrl } = await import("@core/cache/imageCache");
+    revokeBlobUrl(thumbnailUrl);
+    getBlobUrl(thumbnailUrl, 999).catch(() => {});
+  }
+}
@@ -31,13 +31,13 @@ export function formatReadTime(m: number): string {

 const STRICT_TAGS: string[] = [
  "adult", "mature", "hentai", "ecchi", "erotic", "pornograph",
-  "18+", "smut", "lemon", "explicit", "sexual violence",
+  "18+", "smut", "explicit", "sexual violence",
  "gore", "guro", "graphic violence", "torture", "body horror",
 ];

 const MODERATE_TAGS: string[] = [
  "adult", "mature", "hentai", "ecchi", "erotic", "pornograph",
-  "18+", "smut", "lemon", "explicit", "sexual violence",
+  "18+", "smut", "explicit", "sexual violence",
 ];

 type ContentFilterSettings = Pick<
@@ -53,7 +53,16 @@ function blockedTagsForSettings(settings: ContentFilterSettings): string[] {

 function genreMatchesBlocklist(genre: string[], blockedTags: string[]): boolean {
  if (!blockedTags.length) return false;
-  return genre.some(g => blockedTags.some(tag => g.toLowerCase().trim().includes(tag)));
+  return genre.some(g => {
+    const norm = g.toLowerCase().trim();
+    return blockedTags.some(tag => {
+      const idx = norm.indexOf(tag);
+      if (idx === -1) return false;
+      const before = idx === 0 || /\W/.test(norm[idx - 1]);
+      const after  = idx + tag.length === norm.length || /\W/.test(norm[idx + tag.length]);
+      return before && after;
+    });
+  });
 }

 export function shouldHideNsfw(
@@ -69,10 +78,10 @@ export function shouldHideNsfw(
  if (srcId && blocked.includes(srcId)) return true;

  const sourceAllowed = !!(srcId && allowed.includes(srcId));
-  const blockedTags   = blockedTagsForSettings(settings);

-  if (!sourceAllowed && manga.source?.isNsfw && settings.contentLevel === "strict") return true;
-  return genreMatchesBlocklist(manga.genre ?? [], blockedTags);
+  if (!sourceAllowed && manga.source?.isNsfw) return true;
+
+  return genreMatchesBlocklist(manga.genre ?? [], blockedTagsForSettings(settings));
 }

 export function shouldHideSource(
@@ -83,10 +92,10 @@ export function shouldHideSource(

  if (settings.sourceOverridesEnabled) {
    if ((settings.nsfwBlockedSourceIds ?? []).includes(source.id)) return true;
-    if ((settings.nsfwAllowedSourceIds ?? []).includes(source.id)) return settings.contentLevel === "strict";
+    if ((settings.nsfwAllowedSourceIds ?? []).includes(source.id)) return false;
  }

-  return source.isNsfw && settings.contentLevel === "strict";
+  return source.isNsfw;
 }

 export function dedupeSourcesByLang(
@@ -76,7 +76,7 @@
    let filtered = allSources;
    if (kw_selectedLangs.size > 0)
      filtered = filtered.filter((s) => kw_selectedLangs.has(s.lang));
-    if (!store.settings.showNsfw)
+    if (store.settings.contentLevel !== "unrestricted")
      filtered = filtered.filter((s) => !shouldHideSource(s, store.settings));
    return filtered;
  }
@@ -8,7 +8,7 @@
  import { deprioritizeQueue }  from "@core/cache/imageCache";
  import { dedupeSourcesByLang }from "@core/algorithms/filter";
  import { shouldHideNsfw }     from "@core/util";
-  import { store, setSearchPrefill, setPreviewManga } from "@store/state.svelte";
+  import { store, setSearchPrefill, setPreviewManga, setSearchQuery } from "@store/state.svelte";
  import {
    toCachedManga,
    type CachedManga,
@@ -288,6 +288,8 @@
      popularResults={popular_results}
      popularLoading={popular_loading}
      {sourceCache}
+      query={store.searchQuery}
+      onQueryChange={setSearchQuery}
      onPrefillConsumed={() => (pendingPrefill = "")}
      onPreview={setPreviewManga}
    />
@@ -5,7 +5,7 @@ import {
  DEQUEUE_DOWNLOAD, DEQUEUE_CHAPTERS_DOWNLOAD,
  ENQUEUE_DOWNLOAD, REORDER_DOWNLOAD,
 } from "@api/mutations";
-import { addToast, setActiveDownloads } from "@store/state.svelte";
+import { addToast, setActiveDownloads, store, updateSettings } from "@store/state.svelte";
 import { boot } from "@store/boot.svelte";
 import type { DownloadStatus, DownloadQueueItem } from "@types/index";
 import {
@@ -26,8 +26,8 @@ class DownloadStore {
  pagesPerSec:  number | null         = $state(null);
  eta:          number | null         = $state(null);

-  toastsEnabled    = $state(true);
-  autoRetryEnabled = $state(false);
+  get toastsEnabled()    { return store.settings.downloadToastsEnabled ?? true; }
+  get autoRetryEnabled() { return store.settings.downloadAutoRetry ?? false; }

  private lastSample:   SpeedSample | null   = null;
  private prevQueue:    DownloadQueueItem[]   = [];
@@ -39,18 +39,19 @@ class DownloadStore {
  get hasErrored() { return this.erroredIds.size > 0; }

  toggleToasts() {
-    this.toastsEnabled = !this.toastsEnabled;
-    addToast({ kind: "info", title: this.toastsEnabled ? "Notifications enabled" : "Notifications muted", body: this.toastsEnabled ? "You'll be notified when chapters finish downloading" : "Download notifications are silenced", duration: 2500 });
+    const next = !this.toastsEnabled;
+    updateSettings({ downloadToastsEnabled: next });
+    addToast({ kind: "info", title: next ? "Notifications enabled" : "Notifications muted", body: next ? "You'll be notified when chapters finish downloading" : "Download notifications are silenced", duration: 2500 });
  }

  toggleAutoRetry() {
    if (this.autoRetryEnabled) {
      this.autoRetryHnd?.stop();
-      this.autoRetryHnd    = null;
-      this.autoRetryEnabled = false;
+      this.autoRetryHnd = null;
+      updateSettings({ downloadAutoRetry: false });
      addToast({ kind: "info", title: "Auto-retry disabled", body: "Failed downloads will no longer retry automatically", duration: 2500 });
    } else {
-      this.autoRetryEnabled = true;
+      updateSettings({ downloadAutoRetry: true });
      this.autoRetryHnd = startAutoRetry(
        () => this.queue,
        () => this.isRunning,
@@ -2,19 +2,26 @@
  import { Play, ArrowRight, BookOpen, Clock } from "phosphor-svelte";
  import Thumbnail from "@shared/manga/Thumbnail.svelte";
  import type { HistoryEntry } from "@store/state.svelte";
+  import type { Manga } from "@types";
  import { timeAgo } from "../lib/homeHelpers";

  let {
    entries,
+    libraryManga,
    onresume,
    onviewhistory,
    onopenlibrary,
  }: {
    entries: HistoryEntry[];
+    libraryManga: Manga[];
    onresume: (entry: HistoryEntry) => void;
    onviewhistory: () => void;
    onopenlibrary: () => void;
  } = $props();
+
+  function thumbFor(entry: HistoryEntry): string {
+    return libraryManga.find(m => m.id === entry.mangaId)?.thumbnailUrl ?? entry.thumbnailUrl ?? "";
+  }
 </script>

 <div class="section">
@@ -31,7 +38,7 @@
    {#if entries.length > 0}
      {#each entries as entry (entry.chapterId)}
        <button class="row" onclick={() => onresume(entry)}>
-          <Thumbnail src={entry.thumbnailUrl} alt={entry.mangaTitle} class="row-thumb" />
+          <Thumbnail src={thumbFor(entry)} alt={entry.mangaTitle} class="row-thumb" />
          <div class="row-info">
            <span class="row-title">{entry.mangaTitle}</span>
            <span class="row-sub">
@@ -191,4 +198,4 @@
  .placeholder-cta:hover { background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.9); }

  @keyframes pulse { 0%, 100% { opacity: 0.4 } 50% { opacity: 0.7 } }
-</style>
+</style>
@@ -1,7 +1,6 @@
 <script lang="ts">
  import { onMount, untrack } from "svelte";
-  import { gql, thumbUrl } from "@api/client";
-  import { getBlobUrl } from "@core/cache/imageCache";
+  import { gql, resolveImageUrl } from "@api/client";
  import { GET_CHAPTERS } from "@api/queries/chapters";
  import { GET_LIBRARY } from "@api/queries/manga";
  import { cache, CACHE_KEYS } from "@core/cache";
@@ -87,37 +86,33 @@

  let activeIdx = $state(0);

-  const activeSlot  = $derived(resolvedSlots[activeIdx]);
-  const heroThumbSrc = $derived(
-    activeSlot?.kind === "pinned"   ? (activeSlot.manga?.thumbnailUrl ?? "") :
-    activeSlot?.kind === "continue" ? (activeSlot.entry?.thumbnailUrl ?? "") : ""
-  );
-  let heroThumb = $state("");
-  $effect(() => {
-    const path = heroThumbSrc;
-    const mode = store.settings.serverAuthMode ?? "NONE";
-    if (!path) { heroThumb = ""; return; }
-    if (mode !== "BASIC_AUTH") { heroThumb = thumbUrl(path); return; }
-    getBlobUrl(thumbUrl(path))
-      .then(url => { heroThumb = url; })
-      .catch(() => { heroThumb = ""; });
-  });
+  const activeSlot = $derived(resolvedSlots[activeIdx]);

-  const heroTitle   = $derived(
-    activeSlot?.kind === "pinned"   ? (activeSlot.manga?.title ?? "") :
-    activeSlot?.kind === "continue" ? (activeSlot.entry?.mangaTitle ?? "") : ""
-  );
-  const heroManga   = $derived(
+  const heroManga = $derived(
    activeSlot?.kind === "pinned"   ? activeSlot.manga :
    activeSlot?.kind === "continue" ? libraryManga.find(m => m.id === activeSlot.entry?.mangaId) : null
  );
  const heroEntry   = $derived(activeSlot?.kind === "continue" ? activeSlot.entry : null);
-  const heroMangaId = $derived(heroEntry?.mangaId ?? heroManga?.id ?? null);
+  const heroMangaId = $derived(heroManga?.id ?? heroEntry?.mangaId ?? null);
+  const heroTitle   = $derived(heroManga?.title ?? heroEntry?.mangaTitle ?? "");
+
+  const heroThumbSrc = $derived(
+    heroManga?.thumbnailUrl
+      ?? (activeSlot?.kind === "continue" ? activeSlot.entry?.thumbnailUrl : undefined)
+      ?? ""
+  );
+
+  let heroThumb = $state("");
+  $effect(() => {
+    const path = heroThumbSrc;
+    if (!path) { heroThumb = ""; return; }
+    resolveImageUrl(path)
+      .then(url => { heroThumb = url; })
+      .catch(() => { heroThumb = ""; });
+  });

  const heroNewChapter = $derived(
-    heroManga
-      ? (libraryManga.find(m => m.id === heroManga!.id) as any)?.latestUploadedChapter ?? null
-      : null
+    heroManga ? (libraryManga.find(m => m.id === heroManga!.id) as any)?.latestUploadedChapter ?? null : null
  );

  function cycleNext() { activeIdx = (activeIdx + 1) % TOTAL_SLOTS; heroChapters = []; heroAllChapters = []; }
@@ -161,6 +156,10 @@

  let resuming = $state(false);

+  function liveMangaStub(): Manga {
+    return heroManga ?? { id: heroMangaId!, title: heroTitle, thumbnailUrl: heroThumbSrc } as any;
+  }
+
  async function openChapter(chapter: Chapter) {
    if (!heroMangaId) return;
    resuming = true;
@@ -171,13 +170,12 @@
        all = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
      }
      if (all.length) {
-        const manga = heroManga ?? { id: heroMangaId, title: heroTitle, thumbnailUrl: heroManga?.thumbnailUrl ?? "" } as any;
-        store.activeManga = manga;
+        store.activeManga = liveMangaStub();
        const list = buildReaderChapterList(all, store.settings.mangaPrefs?.[heroMangaId]);
        const target = list.find(c => c.id === chapter.id) ?? list[0];
        if (target) openReader(target, list);
      }
-    } catch { store.activeManga = { id: heroMangaId, title: heroTitle, thumbnailUrl: heroManga?.thumbnailUrl ?? "" } as any; }
+    } catch { store.activeManga = liveMangaStub(); }
    finally { resuming = false; }
  }

@@ -193,24 +191,24 @@
      const list = buildReaderChapterList(raw, store.settings.mangaPrefs?.[heroEntry.mangaId]);
      const ch = list.find(c => c.id === heroEntry!.chapterId) ?? list[0];
      if (ch) {
-        store.activeManga = heroManga ?? { id: heroEntry.mangaId, title: heroEntry.mangaTitle, thumbnailUrl: heroEntry.thumbnailUrl } as any;
+        store.activeManga = liveMangaStub();
        openReader(ch, list);
      }
-    } catch { store.activeManga = { id: heroEntry.mangaId, title: heroEntry.mangaTitle, thumbnailUrl: heroEntry.thumbnailUrl } as any; }
+    } catch { store.activeManga = liveMangaStub(); }
    finally { resuming = false; }
  }

  async function resumeEntry(entry: HistoryEntry) {
+    const liveManga = libraryManga.find(m => m.id === entry.mangaId);
+    const stub = liveManga ?? { id: entry.mangaId, title: entry.mangaTitle, thumbnailUrl: liveManga?.thumbnailUrl ?? entry.thumbnailUrl } as any;
    try {
      const d = await gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: entry.mangaId });
      const raw = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
      const list = buildReaderChapterList(raw, store.settings.mangaPrefs?.[entry.mangaId]);
      const ch = list.find(c => c.id === entry.chapterId) ?? list[0];
-      if (ch) {
-        store.activeManga = { id: entry.mangaId, title: entry.mangaTitle, thumbnailUrl: entry.thumbnailUrl } as any;
-        openReader(ch, list);
-      } 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; }
+      store.activeManga = stub;
+      if (ch) openReader(ch, list);
+    } catch { store.activeManga = stub; }
  }

  let pickerOpen      = $state(false);
@@ -259,6 +257,7 @@
      <div class="mid-left">
        <ActivityFeed
          entries={recentHistory}
+          {libraryManga}
          onresume={resumeEntry}
          onviewhistory={() => setNavPage("history")}
          onopenlibrary={() => setNavPage("library")}
@@ -18,6 +18,7 @@
    store, setCategories, setLibraryUpdates, addToast,
    setTabSort, toggleTabSortDir, setTabStatus, toggleTabFilter, clearTabFilters,
  } from "../store/libraryState.svelte";
+  import { saveScroll, getScroll } from "@store/state.svelte";
  import type { LibrarySortMode, LibrarySortDir, LibraryStatusFilter, LibraryContentFilter, LibraryUpdateEntry } from "@store/state.svelte";
  import type { Manga, Category, Chapter } from "@types";
  import { checkAndMarkCompleted as storeCheckAndMarkCompleted, updateSettings } from "@store/state.svelte";
@@ -171,7 +172,18 @@

  $effect(() => { filtered; untrack(() => { renderVisible = paginator.reset(); }); });
  $effect(() => { retryCount; loading = true; error = null; if (retryCount > 0) cache.clear(CACHE_KEYS.LIBRARY); untrack(() => loadData()); });
-  $effect(() => { if (scrollEl) scrollEl.scrollTo({ top: 0 }); });
+  let prevTab = tab;
+  $effect(() => {
+    const nextTab = tab;
+    if (scrollEl && nextTab !== prevTab) {
+      saveScroll(`library:${prevTab}`, scrollEl.scrollTop);
+      const saved = getScroll(`library:${nextTab}`);
+      untrack(() => { scrollEl.scrollTo({ top: saved }); });
+      prevTab = nextTab;
+    } else if (scrollEl && nextTab === prevTab) {
+      scrollEl.scrollTo({ top: 0 });
+    }
+  });
  $effect(() => {
    const f = tab;
    if (f === "library" || f === "downloaded") return;
@@ -179,7 +191,7 @@
    if (!store.categories.some(c => c.id === id)) untrack(() => { store.libraryFilter = "library"; });
  });
  $effect(() => { tab; untrack(() => exitSelectMode()); });
-  $effect(() => { tab; counts; requestAnimationFrame(updateTabIndicator); });
+  $effect(() => { tab; counts; });

  let prevChapterId: number | null = null;
  $effect(() => {
@@ -188,13 +200,6 @@
    if (wasOpen && !store.activeChapter) { cache.clear(CACHE_KEYS.LIBRARY); untrack(() => loadData()); }
  });

-  function updateTabIndicator() {
-    if (!tabsEl) return;
-    const active = tabsEl.querySelector<HTMLElement>(".tab.active");
-    if (!active) return;
-    tabIndicator = { left: active.offsetLeft, width: active.offsetWidth };
-  }
-
  function enterSelectMode(id?: number) { selectMode = true; if (id !== undefined) selectedIds = new Set([id]); }
  function exitSelectMode()              { selectMode = false; selectedIds = new Set(); }
  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(); }
@@ -541,7 +546,6 @@

    window.addEventListener("keydown", onKeyDown);
    document.addEventListener("mousedown", onDocMouseDown, true);
-    requestAnimationFrame(updateTabIndicator);

    return () => {
      ro.disconnect(); unsub();
@@ -600,7 +604,6 @@
      {tabFilters}
      {hasActiveFilters}
      {anims}
-      {tabIndicator}
      {visibleCategories}
      {counts}
      {search}
@@ -15,14 +15,9 @@
    tabFilters:       Partial<Record<LibraryContentFilter, boolean>>;
    hasActiveFilters: boolean;
    anims:            boolean;
-    tabIndicator:     { left: number; width: number };
    visibleCategories: Category[];
    counts:           Record<string, number>;
    search:           string;
-    refreshing:       boolean;
-    refreshProgress:  { finished: number; total: number };
-    refreshDone:      boolean;
-    refreshingCatId:  number | null;
    activeDragKind:   "tab" | null;
    dragInsertIdx:    number;
    dragTabId:        number | null;
@@ -39,9 +34,6 @@
    onFiltersClear:      () => void;
    onSortPanelToggle:   () => void;
    onFilterPanelToggle: () => void;
-    onRefresh:           () => void;
-    onCancelRefresh:     () => void;
-    onRefreshCategory:   (catId: number) => void;
    onOpenDownloadsFolder: () => void;
    onTabDragStart:      (e: DragEvent, cat: Category) => void;
    onTabDragOver:       (e: DragEvent, cat: Category, idx: number) => void;
@@ -52,13 +44,13 @@

  let {
    tab, tabSortMode, tabSortDir, tabStatus, tabFilters, hasActiveFilters,
-    anims, tabIndicator, visibleCategories, counts, search, refreshing,
-    refreshProgress, refreshDone, refreshingCatId, activeDragKind, dragInsertIdx,
+    anims, visibleCategories, counts, search, refreshing,
+    refreshProgress, refreshDone, activeDragKind, dragInsertIdx,
    dragTabId, dragOverTabId, sortPanelOpen, filterPanelOpen,
    tabsEl = $bindable(),
    onSearchChange, onTabChange, onSortChange, onSortDirToggle, onStatusChange,
    onFilterToggle, onFiltersClear, onSortPanelToggle, onFilterPanelToggle,
-    onRefresh, onCancelRefresh, onRefreshCategory, onOpenDownloadsFolder,
+    onRefresh, onOpenDownloadsFolder,
    onTabDragStart, onTabDragOver, onTabDragLeave, onTabDrop, onTabDragEnd,
  }: Props = $props();

@@ -85,9 +77,6 @@
  <span class="heading">Library</span>

  <div class="tabs" class:tabs-anims={anims} bind:this={tabsEl}>
-    {#if anims && tabIndicator.width > 0}
-      <div class="tab-slide-indicator" style="left:{tabIndicator.left}px;width:{tabIndicator.width}px" aria-hidden="true"></div>
-    {/if}
    {#each [["library", "Saved"], ["downloaded", "Downloaded"]] as [f, label]}
      <button class="tab" class:active={tab === f} onclick={() => onTabChange(f)}>
        {#if f === "library"}<Books size={11} weight="bold" />
@@ -118,20 +107,6 @@
            <Folder size={11} weight="bold" />
            {cat.name}
            <span class="tab-count">{counts[String(cat.id)] ?? 0}</span>
-            {#if tab === String(cat.id) && !refreshing}
-              <span
-                class="tab-refresh"
-                role="button"
-                tabindex="-1"
-                title="Refresh {cat.name}"
-                aria-label="Refresh {cat.name}"
-                class:tab-refresh-spinning={refreshingCatId === cat.id}
-                onclick={(e) => { e.stopPropagation(); onRefreshCategory(cat.id); }}
-                onkeydown={(e) => { if (e.key === "Enter") { e.stopPropagation(); onRefreshCategory(cat.id); } }}
-              >
-                <ArrowsClockwise size={10} weight="bold" class={refreshingCatId === cat.id ? "anim-spin" : ""} />
-              </span>
-            {/if}
          </button>
          {#if dragInsertIdx === idx + 1 && activeDragKind === "tab" && idx === visibleCategories.length - 1}
            <div class="tab-insert-bar" aria-hidden="true"></div>
@@ -150,10 +125,10 @@
    {#if refreshing}
      <button
        class="icon-btn refresh-btn icon-btn-active"
-        title="Cancel update"
-        onclick={onCancelRefresh}
+        title={`Checking… ${refreshProgress.finished}/${refreshProgress.total}`}
+        onclick={onRefresh}
      >
-        <X size={15} weight="bold" />
+        <ArrowsClockwise size={15} weight="bold" class="anim-spin" />
        {#if refreshProgress.total > 0}
          <span class="refresh-progress">{refreshProgress.finished}/{refreshProgress.total}</span>
        {/if}
@@ -229,22 +204,16 @@
  .header { position: relative; z-index: 100; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; min-width: 0; }
  .header-right { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; flex-shrink: 0; }
  .heading { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; flex-shrink: 0; }
-  .tabs { display: flex; align-items: center; gap: 2px; background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: 2px; position: relative; flex-shrink: 1; min-width: 0; }
+  .tabs { display: flex; align-items: center; gap: 2px; background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: 2px; position: relative; flex-shrink: 1; min-width: 0; overflow: hidden; }
  .tabs-scroll { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex-shrink: 1; }
  .tabs-scroll::-webkit-scrollbar { display: none; }
  .tab-separator { width: 1px; height: 16px; background: var(--border-dim); flex-shrink: 0; margin: 0 2px; }
-  .tab-slide-indicator { position: absolute; top: 2px; bottom: 2px; border-radius: var(--radius-sm); background: var(--accent-muted); border: 1px solid var(--accent-dim); pointer-events: none; z-index: 0; transition: left 0.22s cubic-bezier(0.16,1,0.3,1), width 0.22s cubic-bezier(0.16,1,0.3,1); }
-  .tab { position: relative; z-index: 1; 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; flex-shrink: 0; }
+  .tab { position: relative; z-index: 1; 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 transparent; color: var(--text-faint); white-space: nowrap; transition: background var(--t-base), color var(--t-base), border-color var(--t-base); cursor: grab; flex-shrink: 0; }
  .tab:hover { color: var(--text-muted); }
-  .tab.active { background: var(--accent-muted); color: var(--accent-fg); border: 1px solid transparent; }
-  .tabs-anims .tab.active { background: transparent; }
+  .tab.active { background: var(--accent-muted); color: var(--accent-fg); border-color: var(--accent-dim); }
  .tab-dragging { opacity: 0.4; cursor: grabbing; }
  .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; }
-  .tab-refresh { display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 2px; opacity: 0; color: var(--accent-fg); cursor: pointer; transition: opacity var(--t-base), background var(--t-base); flex-shrink: 0; }
-  .tab.active:hover .tab-refresh { opacity: 0.6; }
-  .tab.active:hover .tab-refresh:hover { opacity: 1; background: var(--accent-dim); }
-  .tab-refresh-spinning { opacity: 1 !important; }
  .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); }
@@ -253,7 +222,9 @@
  .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); }
+
  .refresh-btn { gap: var(--sp-1); width: auto; padding: 0 8px; }
+  .refresh-btn:disabled { cursor: default; }
  .refresh-progress { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); color: var(--accent-fg); }
  .refresh-btn-done { color: var(--color-success, #5cae6e) !important; border-color: color-mix(in srgb, var(--color-success, #5cae6e) 40%, transparent) !important; background: color-mix(in srgb, var(--color-success, #5cae6e) 10%, transparent) !important; }
  .sort-panel-wrap { position: relative; }
@@ -19,6 +19,7 @@
    fadingOut:       boolean;
    tapToToggleBar:  boolean;
    pinchZoomEnabled: boolean;
+    chapterEpoch:    number;
    onGetZoom:       () => number;
    onSetZoom:       (z: number) => void;
    resolveUrl:      (url: string, priority?: number) => Promise<string>;
@@ -31,10 +32,152 @@
  const {
    style, imgCls, effectiveWidth, loading, error, pageReady,
    pageGroups, currentGroup, stripToRender, fadingOut,
-    tapToToggleBar, pinchZoomEnabled, onGetZoom, onSetZoom,
+    tapToToggleBar, pinchZoomEnabled, chapterEpoch, onGetZoom, onSetZoom,
    resolveUrl, onTap, onWheel, onToggleUi, bindContainer,
  }: Props = $props();

+  const LOAD_RADIUS   = 5;
+  const UNLOAD_RADIUS = 10;
+
+  type FlatPage = { chapterId: number; chapterName: string; localIndex: number; url: string; total: number };
+
+  const flatPages = $derived.by<FlatPage[]>(() => {
+    const out: FlatPage[] = [];
+    for (const chunk of stripToRender) {
+      for (let i = 0; i < chunk.urls.length; i++) {
+        out.push({ chapterId: chunk.chapterId, chapterName: chunk.chapterName, localIndex: i, url: chunk.urls[i], total: chunk.urls.length });
+      }
+    }
+    return out;
+  });
+
+  let loadedSet   = $state(new Set<number>());
+  let resolvedSrc = $state<Record<number, string>>({});
+  let revokeQueue: string[] = [];
+
+  let observer: IntersectionObserver | null = null;
+  const elementIndex = new Map<Element, number>();
+
+  let viewportCenter = $state(0);
+
+  function scheduleRevoke(src: string) {
+    if (!src || !src.startsWith("blob:")) return;
+    revokeQueue.push(src);
+    requestAnimationFrame(() => {
+      const url = revokeQueue.shift();
+      if (url) {
+        try { URL.revokeObjectURL(url); } catch { }
+      }
+    });
+  }
+
+  function loadPage(idx: number) {
+    if (loadedSet.has(idx)) return;
+    const page = flatPages[idx];
+    if (!page) return;
+    const newSet = new Set(loadedSet);
+    newSet.add(idx);
+    loadedSet = newSet;
+    const priority = (page.localIndex < 8 && page.chapterId === flatPages[0]?.chapterId) ? 8 - page.localIndex : 0;
+    resolveUrl(page.url, priority).then(src => {
+      if (loadedSet.has(idx)) {
+        resolvedSrc = { ...resolvedSrc, [idx]: src };
+      } else {
+        scheduleRevoke(src);
+      }
+    });
+  }
+
+  function unloadPage(idx: number) {
+    if (!loadedSet.has(idx)) return;
+    const newSet = new Set(loadedSet);
+    newSet.delete(idx);
+    loadedSet = newSet;
+    const oldSrc = resolvedSrc[idx];
+    if (oldSrc) {
+      const next = { ...resolvedSrc };
+      delete next[idx];
+      resolvedSrc = next;
+      scheduleRevoke(oldSrc);
+    }
+  }
+
+  function recalcWindow() {
+    const center = viewportCenter;
+    const lo = center - LOAD_RADIUS;
+    const hi = center + LOAD_RADIUS;
+    const evictLo = center - UNLOAD_RADIUS;
+    const evictHi = center + UNLOAD_RADIUS;
+
+    for (let i = 0; i < flatPages.length; i++) {
+      if (i >= lo && i <= hi) {
+        loadPage(i);
+      } else if (i < evictLo || i > evictHi) {
+        unloadPage(i);
+      }
+    }
+  }
+
+  $effect(() => {
+    void viewportCenter;
+    recalcWindow();
+  });
+
+  $effect(() => {
+    void flatPages.length;
+    recalcWindow();
+  });
+
+  function setupObserver(containerEl: HTMLElement) {
+    observer?.disconnect();
+    elementIndex.clear();
+
+    observer = new IntersectionObserver(
+      (entries) => {
+        let best = -1;
+        let bestRatio = -1;
+        for (const entry of entries) {
+          const idx = elementIndex.get(entry.target);
+          if (idx === undefined) continue;
+          if (entry.isIntersecting && entry.intersectionRatio > bestRatio) {
+            bestRatio = entry.intersectionRatio;
+            best = idx;
+          }
+        }
+        if (best >= 0 && best !== viewportCenter) {
+          viewportCenter = best;
+        }
+      },
+      {
+        root: containerEl,
+        rootMargin: "0px",
+        threshold: [0, 0.1, 0.5, 1.0],
+      }
+    );
+  }
+
+  function observePage(el: HTMLDivElement, idx: number) {
+    elementIndex.set(el, idx);
+    observer?.observe(el);
+    return {
+      update(newIdx: number) {
+        elementIndex.set(el, newIdx);
+      },
+      destroy() {
+        observer?.unobserve(el);
+        elementIndex.delete(el);
+      }
+    };
+  }
+
+  $effect(() => {
+    void chapterEpoch;
+    loadedSet   = new Set<number>();
+    resolvedSrc = {};
+    const resume = readerState.resumePage;
+    viewportCenter = resume > 1 ? resume - 1 : 0;
+  });
+
  const INSPECT_ZOOM_STEP = 0.15;
  const INSPECT_ZOOM_MAX  = 8;

@@ -86,6 +229,7 @@
  });

  export function onInspectMouseDown(e: MouseEvent) {
+    if ((e.target as Element).closest(".bar")) return;
    if (style === "longstrip") {
      stripDragging    = true;
      stripDragMoved   = false;
@@ -126,6 +270,7 @@
  }

  export function onPointerDown(e: PointerEvent) {
+    if ((e.target as Element).closest(".bar")) return;
    pinch?.onPointerDown(e);
  }

@@ -192,7 +337,17 @@
  function setContainer(el: HTMLDivElement) {
    containerEl = el;
    bindContainer(el);
+    if (style === "longstrip") setupObserver(el);
  }
+
+  $effect(() => {
+    if (style === "longstrip" && containerEl) {
+      setupObserver(containerEl);
+    } else if (style !== "longstrip") {
+      observer?.disconnect();
+      observer = null;
+    }
+  });
 </script>

 <div
@@ -219,53 +374,77 @@
    <div class="center-overlay"><p class="error-msg">{error}</p></div>
  {/if}

-  {#if style === "longstrip"}
-    {#each stripToRender as chunk}
-      {#each chunk.urls as url, i}
-        {#await resolveUrl(url, chunk.urls.length - i)}
-          <img src="" alt="{chunk.chapterName} – Page {i + 1}" data-local-page={i + 1} data-chapter={chunk.chapterId} data-total={chunk.urls.length} class="{imgCls}{store.settings.pageGap ? ' strip-gap' : ''}" loading={i < 5 ? "eager" : "lazy"} decoding="async" />
-        {:then src}
-          <img {src} alt="{chunk.chapterName} – Page {i + 1}" data-local-page={i + 1} data-chapter={chunk.chapterId} data-total={chunk.urls.length} class="{imgCls}{store.settings.pageGap ? ' strip-gap' : ''}" loading={i < 5 ? "eager" : "lazy"} decoding="async" />
-        {/await}
-      {/each}
-    {/each}
-    <div style="height:1px;flex-shrink:0"></div>
-
-  {:else if style === "fade" && pageReady}
-    <div class="inspect-wrap" style="transform:scale({readerState.inspectScale}) translate({readerState.inspectPanX / readerState.inspectScale}px,{readerState.inspectPanY / readerState.inspectScale}px)">
-      {#await resolveUrl(store.pageUrls[store.pageNumber - 1], 999)}
-        <img src="" alt="Page {store.pageNumber}" class={imgCls} decoding="async" style="opacity:0" />
-      {:then src}
-        <img {src} alt="Page {store.pageNumber}" class={imgCls} decoding="async" style="opacity: {fadingOut ? 0 : 1}; transition: opacity 0.1s ease;" />
-      {/await}
-    </div>
-
-  {:else if style === "double" && pageReady}
-    <div class="inspect-wrap" style="transform:scale({readerState.inspectScale}) translate({readerState.inspectPanX / readerState.inspectScale}px,{readerState.inspectPanY / readerState.inspectScale}px)">
-      {#if pageGroups.length}
-        <div class="double-wrap">
-          {#each currentGroup as pg, i}
-            {#await resolveUrl(store.pageUrls[pg - 1], 999)}
-              <img src="" alt="Page {pg}" class="{imgCls} page-half {i === 0 ? 'gap-left' : 'gap-right'}" decoding="async" />
-            {:then src}
-              <img {src} alt="Page {pg}" class="{imgCls} page-half {i === 0 ? 'gap-left' : 'gap-right'}" decoding="async" />
-            {/await}
-          {/each}
+  {#key chapterEpoch}
+    {#if style === "longstrip"}
+      {#each flatPages as page, gi}
+        {@const src = resolvedSrc[gi]}
+        {@const isLoaded = loadedSet.has(gi)}
+        <div
+          class="strip-slot"
+          use:observePage={gi}
+          data-gi={gi}
+        >
+          {#if isLoaded}
+            <img
+              src={src ?? ""}
+              alt="{page.chapterName} – Page {page.localIndex + 1}"
+              data-local-page={page.localIndex + 1}
+              data-chapter={page.chapterId}
+              data-total={page.total}
+              class="{imgCls}{store.settings.pageGap ? ' strip-gap' : ''}"
+              loading="eager"
+              decoding="async"
+              onload={(e) => {
+                const img = e.currentTarget as HTMLImageElement;
+                const slot = img.closest<HTMLElement>(".strip-slot");
+                if (slot && img.naturalWidth > 0) {
+                  slot.style.setProperty("--aspect", String(img.naturalWidth / img.naturalHeight));
+                }
+              }}
+            />
+          {:else}
+            <div class="strip-placeholder"></div>
+          {/if}
        </div>
-      {:else}
-        <div class="center-overlay"><CircleNotch size={20} weight="light" class="anim-spin" style="color:var(--text-faint)" /></div>
-      {/if}
-    </div>
+      {/each}
+      <div style="height:1px;flex-shrink:0"></div>

-  {:else if pageReady}
-    <div class="inspect-wrap" style="transform:scale({readerState.inspectScale}) translate({readerState.inspectPanX / readerState.inspectScale}px,{readerState.inspectPanY / readerState.inspectScale}px)">
-      {#await resolveUrl(store.pageUrls[store.pageNumber - 1], 999)}
-        <img src="" alt="Page {store.pageNumber}" class={imgCls} decoding="async" />
-      {:then src}
-        <img {src} alt="Page {store.pageNumber}" class={imgCls} decoding="async" />
-      {/await}
-    </div>
-  {/if}
+    {:else if style === "fade" && pageReady}
+      <div class="inspect-wrap" style="transform:scale({readerState.inspectScale}) translate({readerState.inspectPanX / readerState.inspectScale}px,{readerState.inspectPanY / readerState.inspectScale}px)">
+        {#await resolveUrl(store.pageUrls[store.pageNumber - 1], 999)}
+          <img src="" alt="Page {store.pageNumber}" class={imgCls} decoding="async" style="opacity:0" />
+        {:then src}
+          <img {src} alt="Page {store.pageNumber}" class={imgCls} decoding="async" style="opacity: {fadingOut ? 0 : 1}; transition: opacity 0.1s ease;" />
+        {/await}
+      </div>
+
+    {:else if style === "double" && pageReady}
+      <div class="inspect-wrap" style="transform:scale({readerState.inspectScale}) translate({readerState.inspectPanX / readerState.inspectScale}px,{readerState.inspectPanY / readerState.inspectScale}px)">
+        {#if pageGroups.length}
+          <div class="double-wrap">
+            {#each currentGroup as pg, i}
+              {#await resolveUrl(store.pageUrls[pg - 1], 999)}
+                <img src="" alt="Page {pg}" class="{imgCls} page-half {i === 0 ? 'gap-left' : 'gap-right'}" decoding="async" />
+              {:then src}
+                <img {src} alt="Page {pg}" class="{imgCls} page-half {i === 0 ? 'gap-left' : 'gap-right'}" decoding="async" />
+              {/await}
+            {/each}
+          </div>
+        {:else}
+          <div class="center-overlay"><CircleNotch size={20} weight="light" class="anim-spin" style="color:var(--text-faint)" /></div>
+        {/if}
+      </div>
+
+    {:else if pageReady}
+      <div class="inspect-wrap" style="transform:scale({readerState.inspectScale}) translate({readerState.inspectPanX / readerState.inspectScale}px,{readerState.inspectPanY / readerState.inspectScale}px)">
+        {#await resolveUrl(store.pageUrls[store.pageNumber - 1], 999)}
+          <img src="" alt="Page {store.pageNumber}" class={imgCls} decoding="async" />
+        {:then src}
+          <img {src} alt="Page {store.pageNumber}" class={imgCls} decoding="async" />
+        {/await}
+      </div>
+    {/if}
+  {/key}

 </div>

@@ -280,6 +459,20 @@

  .inspect-wrap { display: flex; align-items: center; justify-content: center; transform-origin: center center; will-change: transform; }

+  .strip-slot {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .strip-placeholder {
+    width: var(--effective-width, 100%);
+    max-width: var(--effective-width, 100%);
+    aspect-ratio: var(--aspect, 0.667);
+    background: transparent;
+  }
+
  .img { display: block; user-select: none; image-rendering: auto; }
  .img:global(.optimize-contrast) { image-rendering: -webkit-optimize-contrast; }
  :global(.fit-width)    { max-width: var(--effective-width, 100%); width: 100%; height: auto; }
@@ -25,7 +25,7 @@
  import ReaderPresetPanel            from "./ReaderPresetPanel.svelte";

  const win       = getCurrentWindow();
-  const useBlob   = $derived((store.settings.serverAuthMode ?? "NONE") === "BASIC_AUTH");
+  const useBlob   = $derived((store.settings.serverAuthMode ?? "NONE") !== "NONE");

  const effectiveReaderSettings = $derived.by(() => {
    const mangaId  = store.activeManga?.id;
@@ -420,23 +420,28 @@
  $effect(() => {
    const ahead   = store.settings.preloadPages ?? 3;
    const current = store.pageUrls[store.pageNumber - 1];
+    const pageNum = store.pageNumber;
+    const urls    = store.pageUrls;
    if (!current) return;
-    if (useBlob) {
-      import("@core/cache/imageCache").then(({ getBlobUrl, preloadBlobUrls }) => {
-        getBlobUrl(current, 999);
-        const upcoming = Array.from({ length: ahead }, (_, i) => store.pageUrls[store.pageNumber + i]).filter(Boolean) as string[];
-        const behind   = store.pageUrls[store.pageNumber - 2];
-        preloadBlobUrls(upcoming, ahead);
-        if (behind) preloadBlobUrls([behind], 0);
-      });
-    } else {
-      for (let i = 1; i <= ahead; i++) {
-        const url = store.pageUrls[store.pageNumber - 1 + i];
-        if (url) preloadImage(url, useBlob);
+    const t = setTimeout(() => {
+      if (useBlob) {
+        import("@core/cache/imageCache").then(({ getBlobUrl, preloadBlobUrls }) => {
+          getBlobUrl(current, 999);
+          const upcoming = Array.from({ length: ahead }, (_, i) => urls[pageNum + i]).filter(Boolean) as string[];
+          const behind   = urls[pageNum - 2];
+          preloadBlobUrls(upcoming, ahead);
+          if (behind) preloadBlobUrls([behind], 0);
+        });
+      } else {
+        for (let i = 1; i <= ahead; i++) {
+          const url = urls[pageNum - 1 + i];
+          if (url) preloadImage(url, useBlob);
+        }
+        const behind = urls[pageNum - 2];
+        if (behind) preloadImage(behind, useBlob);
      }
-      const behind = store.pageUrls[store.pageNumber - 2];
-      if (behind) preloadImage(behind, useBlob);
-    }
+    }, 150);
+    return () => clearTimeout(t);
  });

  $effect(() => {
@@ -142,12 +142,18 @@
        {#if isVertical}
          <span class="ch-info">&#xE2CE;</span>
        {:else}
-          <span class="ch-title">{store.activeManga?.title}</span>
-          <span class="ch-sep">/</span>
-          <span class="ch-name">{displayChapter?.name}</span>
-          <span class="ch-page">{store.pageNumber} / {visibleChunkLastPage || "…"}</span>
+          <span class="ch-marquee-track" onwheel={(e) => { e.stopPropagation(); (e.currentTarget as HTMLElement).scrollLeft += e.deltaY; }}>
+            <span class="ch-marquee-content">
+              <span class="ch-title">{store.activeManga?.title}</span>
+              <span class="ch-sep">/</span>
+              <span class="ch-name">{displayChapter?.name}</span>
+            </span>
+          </span>
        {/if}
      </button>
+      {#if !isVertical}
+        <span class="ch-page">{store.pageNumber} / {visibleChunkLastPage || "…"}</span>
+      {/if}

      {#if chapterHover && isVertical}
        <div class="ch-popover ch-popover-{popoverSide}">
@@ -404,16 +410,14 @@
  .icon-btn.active { color: var(--accent-fg); }
  .marker-btn-has { color: var(--marker-color, var(--accent-fg)) !important; }

-  .ch-hover-wrap { position: relative; min-width: 0; }
+  .ch-hover-wrap { position: relative; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); }

  .ch-pill {
    display: flex;
    align-items: center;
-    gap: var(--sp-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
    overflow: hidden;
-    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    padding: 2px 4px;
@@ -429,9 +433,24 @@
    padding: 0;
  }
  .ch-info { font-size: 15px; line-height: 1; color: var(--text-faint); flex-shrink: 0; }
-  .ch-title { color: var(--text-secondary); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+  .ch-marquee-track {
+    overflow-x: auto;
+    min-width: 0;
+    flex: 1;
+    scrollbar-width: none;
+  }
+  .ch-marquee-track::-webkit-scrollbar { display: none; }
+  .ch-marquee-content {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sp-2);
+    white-space: nowrap;
+  }
+
+  .ch-title { color: var(--text-secondary); font-weight: var(--weight-medium); }
  .ch-sep   { color: var(--text-faint); flex-shrink: 0; }
-  .ch-name  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .ch-name  { color: var(--text-muted); }
  .ch-page  { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); flex-shrink: 0; }

  .ch-popover {
@@ -1,7 +1,9 @@
-import { store, openReader } from "@store/state.svelte";
-import { readerState }       from "../store/readerState.svelte";
-import { fetchPages }        from "./pageLoader";
-import { trackingState }     from "@features/tracking/store/trackingState.svelte";
+import { store }           from "@store/state.svelte";
+import { readerState }     from "../store/readerState.svelte";
+import { fetchPages }      from "./pageLoader";
+import { trackingState }   from "@features/tracking/store/trackingState.svelte";
+import { cancelQueuedFetches } from "@core/cache/imageCache";
+import { clearResolvedUrlCache } from "@core/cache/pageCache";

 export function scheduleResumeDismiss() {
  setTimeout(() => { readerState.resumeFading = true; }, 1500);
@@ -19,6 +21,10 @@ export async function loadChapter(
  abortCtrl.current?.abort();
  const ctrl = new AbortController();
  abortCtrl.current = ctrl;
+
+  cancelQueuedFetches();
+  if (useBlob) clearResolvedUrlCache();
+
  startAtLastPage.current = false;
  markedRead.clear();
  readerState.resetForChapter();
@@ -43,7 +49,7 @@ export async function loadChapter(
    else if (resumeTo > 1)        store.pageNumber = Math.min(resumeTo, urls.length || resumeTo);
    readerState.pageReady = true;
    readerState.loading   = false;
-    if (adjacent.next) fetchPages(adjacent.next.id, useBlob).catch(() => {});
+    if (adjacent.next) fetchPages(adjacent.next.id, useBlob, ctrl.signal).catch(() => {});
  } catch (e: any) {
    if (ctrl.signal.aborted) return;
    readerState.error   = e instanceof Error ? e.message : String(e);
@@ -25,57 +25,58 @@ export function setupScrollTracking(
    onAppend, getStripChapters, getPageUrls, shouldAutoMark,
  } = callbacks;

-  function onScroll() {
+  let rafId: number | null = null;
+
+  function tick() {
+    rafId = null;
+
    const imgs = containerEl.querySelectorAll<HTMLElement>("img[data-local-page]");
    if (!imgs.length) return;

    const containerTop = containerEl.getBoundingClientRect().top;
    const readLineY    = containerTop + containerEl.clientHeight * READ_LINE_PCT;

-    let activePage: number | null = null;
-    let activeChId: number | null = null;
-
-    for (const img of imgs) {
-      if (img.getBoundingClientRect().top <= readLineY) {
-        activePage = Number(img.dataset.localPage);
-        activeChId = Number(img.dataset.chapter);
-      } else break;
+    let lo = 0, hi = imgs.length - 1, best = 0;
+    while (lo <= hi) {
+      const mid = (lo + hi) >>> 1;
+      if (imgs[mid].getBoundingClientRect().top <= readLineY) { best = mid; lo = mid + 1; }
+      else hi = mid - 1;
    }

-    if (activePage === null) {
-      activePage = Number(imgs[0].dataset.localPage);
-      activeChId = Number(imgs[0].dataset.chapter);
-    }
+    const active   = imgs[best];
+    const activePage = Number(active.dataset.localPage);
+    const activeChId = Number(active.dataset.chapter);

-    if (activePage !== null) onPageChange(activePage);
-    if (activeChId)          onChapterChange(activeChId);
+    onPageChange(activePage);
+    if (activeChId) onChapterChange(activeChId);

-    if (shouldAutoMark() && activePage !== null && activeChId) {
+    if (shouldAutoMark() && activeChId) {
      const chunks = getStripChapters();
      const chunk  = chunks.find(c => c.chapterId === activeChId);
      const total  = chunk ? chunk.urls.length : getPageUrls().length;
      if (total > 0 && activePage >= total) onMarkRead(activeChId);
+
+      const atBottom = containerEl.scrollTop + containerEl.clientHeight >= containerEl.scrollHeight - 40;
+      if (atBottom) {
+        const last = chunks[chunks.length - 1];
+        if (last) onMarkRead(last.chapterId);
+      }
    }

-    const atBottom = containerEl.scrollTop + containerEl.clientHeight >= containerEl.scrollHeight - 40;
-    if (atBottom && shouldAutoMark()) {
-      const chunks = getStripChapters();
-      const last   = chunks[chunks.length - 1];
-      if (last) onMarkRead(last.chapterId);
-    }
-  }
-
-  function onScrollAppend() {
    const pct = (containerEl.scrollTop + containerEl.clientHeight) / containerEl.scrollHeight;
    if (pct >= 0.80) onAppend();
  }

-  containerEl.addEventListener("scroll", onScroll,       { passive: true });
-  containerEl.addEventListener("scroll", onScrollAppend, { passive: true });
+  function onScroll() {
+    if (rafId !== null) return;
+    rafId = requestAnimationFrame(tick);
+  }
+
+  containerEl.addEventListener("scroll", onScroll, { passive: true });

  return () => {
    containerEl.removeEventListener("scroll", onScroll);
-    containerEl.removeEventListener("scroll", onScrollAppend);
+    if (rafId !== null) cancelAnimationFrame(rafId);
  };
 }

@@ -107,4 +108,4 @@ export function appendNextChapter(
      onDone();
    })
    .catch(() => onDone());
-}
+}
@@ -14,6 +14,7 @@
    enqueueing:      Set<number>;
    chapterPage:     number;
    totalPages:      number;
+    scrollEl?:       HTMLDivElement | null;
    onOpen:          (ch: Chapter, inProgress: boolean) => void;
    onToggleSelect:  (id: number, e: MouseEvent | KeyboardEvent) => void;
    onEnqueue:       (ch: Chapter, e: MouseEvent) => void;
@@ -25,6 +26,7 @@
  let {
    pageChapters, sortedChapters, viewMode, loadingChapters,
    selectedIds, enqueueing, chapterPage, totalPages,
+    scrollEl = $bindable(null),
    onOpen, onToggleSelect, onEnqueue, onDeleteDownload,
    onPageChange, buildCtxItems,
  }: Props = $props();
@@ -48,7 +50,7 @@
  }
 </script>

-<div class={viewMode === "grid" ? "ch-grid" : "ch-list"}>
+<div class={viewMode === "grid" ? "ch-grid" : "ch-list"} bind:this={scrollEl}>
  {#if loadingChapters && sortedChapters.length === 0}
    {#if viewMode === "grid"}
      {#each Array(24) as _}<div class="grid-cell-skeleton skeleton"></div>{/each}
@@ -17,6 +17,7 @@
    addBookmark, acknowledgeUpdate,
    checkAndMarkCompleted as storeCheckAndMarkCompleted,
    clearMarkersForManga,
+    saveScroll, getScroll,
  } from "@store/state.svelte";
  import { trackingState } from "@features/tracking/store/trackingState.svelte";
  import type { MangaPrefs } from "@store/state.svelte";
@@ -583,6 +584,20 @@
    } catch (e) { console.error(e); }
  }

+  let chapterListEl: HTMLDivElement | null = $state(null);
+  let prevMangaId: number | null = null;
+
+  $effect(() => {
+    const mangaId = store.activeManga?.id ?? null;
+    if (mangaId === prevMangaId) return;
+    if (chapterListEl && prevMangaId !== null) saveScroll(`series:${prevMangaId}`, chapterListEl.scrollTop);
+    prevMangaId = mangaId;
+    if (chapterListEl && mangaId !== null) {
+      const saved = getScroll(`series:${mangaId}`);
+      chapterListEl.scrollTo({ top: saved });
+    }
+  });
+
  onMount(() => () => { mangaAbort?.abort(); chapterAbort?.abort(); });
 </script>

@@ -665,6 +680,7 @@
      {enqueueing}
      {chapterPage}
      {totalPages}
+      bind:scrollEl={chapterListEl}
      onOpen={openReaderWithAhead}
      onToggleSelect={toggleSelect}
      onEnqueue={enqueue}
@@ -318,6 +318,12 @@
  text-align: center;
 }

+.s-presets {
+  display: flex;
+  gap: var(--sp-2);
+  padding: var(--sp-3) var(--sp-4);
+}
+

 /* ── Select Dropdown ──────────────────────────────────────────────── */
 .s-select { position: relative; flex-shrink: 0; }
@@ -682,6 +688,16 @@
  border-top: 1px solid var(--border-dim);
 }

+.s-subsection-title {
+  font-family: var(--font-ui);
+  font-size: var(--text-2xs);
+  color: var(--text-faint);
+  letter-spacing: var(--tracking-wider);
+  text-transform: uppercase;
+  padding: var(--sp-3) var(--sp-4) var(--sp-1);
+  border-bottom: 1px solid var(--border-dim);
+}
+

 /* ── Storage bar ──────────────────────────────────────────────────── */
 .s-storage-wrap {
@@ -60,8 +60,7 @@
  }

  function close() { setSettingsOpen(false); }
-
-  // Keybind capture
+1
  let listeningKey: keyof Keybinds | null = $state(null);

  $effect(() => {
@@ -83,7 +82,6 @@
    return () => window.removeEventListener("keydown", capture, true);
  });

-  // Shared select dropdown state (passed to sections that need it)
  let selectOpen: string | null = $state(null);
  let closingSelect: string | null = $state(null);

@@ -105,9 +103,7 @@
    const handler = (e: MouseEvent) => {
      if (!selectOpen) return;
      const t = e.target as HTMLElement;
-      // Keep open if click is inside the trigger wrapper (.s-select)
      if (t.closest(".s-select")) return;
-      // Keep open if click landed inside the portalled menu (appended to <body>)
      if (t.closest(".s-select-menu")) return;
      closeSelect();
    };
@@ -32,6 +32,9 @@
  $effect(() => {
    getVersion().then(v => appVersion = v).catch(() => appVersion = "unknown");
    if (!releasesLoaded) { releasesLoaded = true; loadReleases(); }
+  });
+
+  $effect(() => {
    loadServerInfo();
  });

@@ -92,9 +95,9 @@
    return new Date(iso).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });
  }

-  function fmtBuildTime(unix: number) {
+  function fmtBuildTime(unix: number | string) {
    if (!unix) return "";
-    return new Date(unix).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });
+    return new Date(Number(unix) * 1000).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });
  }

  function fmtBytes(bytes: number) {
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { FolderSimple, Plus, Pencil, Trash, Star, Eye, EyeSlash, ArrowsClockwise, DownloadSimple } from "phosphor-svelte";
+  import { FolderSimple, Plus, Trash, Star, Eye, EyeSlash, ArrowsClockwise, ArrowsCounterClockwise, DownloadSimple, DotsSixVertical } from "phosphor-svelte";
  import { gql } from "@api/client";
  import { GET_CATEGORIES } from "@api/queries/manga";
  import { CREATE_CATEGORY, UPDATE_CATEGORY, UPDATE_CATEGORIES, DELETE_CATEGORY, UPDATE_CATEGORY_ORDER } from "@api/mutations/manga";
@@ -12,13 +12,17 @@
  let editingId     = $state<number | null>(null);
  let editingName   = $state("");

+  let dragId       = $state<number | null>(null);
+  let dragOverId   = $state<number | null>(null);
+  let dropPosition = $state<"above" | "below" | null>(null);
+
  async function loadCategories() {
    catsLoading = true; catsError = null;
    try {
      const res = await gql<{ categories: { nodes: Category[] } }>(GET_CATEGORIES);
      const zeroCat = store.categories.filter(c => c.id === 0);
-      const fresh = res.categories.nodes.filter(c => c.id !== 0);
-      const merged = fresh.map(f => {
+      const fresh   = res.categories.nodes.filter(c => c.id !== 0);
+      const merged  = fresh.map(f => {
        const existing = store.categories.find(c => c.id === f.id);
        return existing ? { ...existing, ...f } : f;
      });
@@ -63,26 +67,25 @@
    const next = !cat[flag];
    setCategories(store.categories.map(c => c.id === id ? { ...c, [flag]: next } : c));
    try {
-      await gql(UPDATE_CATEGORIES, { ids: [id], patch: { [flag]: next } });
+      await gql(UPDATE_CATEGORIES, { ids: [id], patch: { [flag]: next ? "INCLUDE" : "EXCLUDE" } });
    } catch (e: any) {
      setCategories(store.categories.map(c => c.id === id ? { ...c, [flag]: !next } : c));
      catsError = e?.message ?? "Failed to update folder";
    }
  }

-  async function moveCategory(id: number, direction: -1 | 1) {
+  async function applyReorder(fromId: number, toId: number) {
    const zeroCat  = store.categories.filter(c => c.id === 0);
    const sortable = store.categories.filter(c => c.id !== 0).sort((a, b) => a.order - b.order);
-    const idx = sortable.findIndex(c => c.id === id);
-    if (idx < 0) return;
-    const newPos = idx + 1 + direction;
-    if (newPos < 1 || newPos > sortable.length) return;
+    const fromIdx  = sortable.findIndex(c => c.id === fromId);
+    const toIdx    = sortable.findIndex(c => c.id === toId);
+    if (fromIdx < 0 || toIdx < 0 || fromIdx === toIdx) return;
    const reordered = [...sortable];
-    const [moved] = reordered.splice(idx, 1);
-    reordered.splice(idx + direction, 0, moved);
+    const [moved]   = reordered.splice(fromIdx, 1);
+    reordered.splice(toIdx, 0, moved);
    setCategories([...zeroCat, ...reordered.map((c, i) => ({ ...c, order: i + 1 }))]);
    try {
-      const res = await gql<{ updateCategoryOrder: { categories: Category[] } }>(UPDATE_CATEGORY_ORDER, { id, position: newPos });
+      const res = await gql<{ updateCategoryOrder: { categories: Category[] } }>(UPDATE_CATEGORY_ORDER, { id: fromId, position: toIdx + 1 });
      const updated = res.updateCategoryOrder.categories.filter(c => c.id !== 0);
      setCategories([
        ...zeroCat,
@@ -97,6 +100,28 @@
    }
  }

+  function onDragStart(e: DragEvent, id: number) {
+    dragId = id;
+    if (e.dataTransfer) { e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/plain", String(id)); }
+  }
+
+  function onDragOver(e: DragEvent, id: number) {
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+    if (dragId === id) return;
+    dragOverId = id;
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    dropPosition = e.clientY < rect.top + rect.height / 2 ? "above" : "below";
+  }
+
+  function onDrop(e: DragEvent, id: number) {
+    e.preventDefault();
+    if (dragId !== null && dragId !== id) applyReorder(dragId, id);
+    dragId = null; dragOverId = null; dropPosition = null;
+  }
+
+  function onDragEnd() { dragId = null; dragOverId = null; dropPosition = null; }
+
  function focusInput(node: HTMLElement) { node.focus(); }

  $effect(() => {
@@ -105,7 +130,6 @@
 </script>

 <div class="s-panel">
-
  <div class="s-section">
    <p class="s-section-title">Manage Folders</p>
    <div class="s-section-body">
@@ -135,51 +159,196 @@
              if (b.id === defaultId) return  1;
              return a.order - b.order;
            })}
-        {#each displayCats as cat, i}
-          <div class="s-folder-row">
-            {#if editingId === cat.id}
-              <input class="s-input full" bind:value={editingName}
-                onkeydown={(e) => { if (e.key === "Enter") commitEdit(); if (e.key === "Escape") editingId = null; }}
-                onblur={commitEdit} use:focusInput />
-              <button class="s-btn-icon" onclick={commitEdit} title="Save">✓</button>
-            {:else}
-              <FolderSimple size={14} weight="light" style="color:var(--text-faint);flex-shrink:0" />
-              <span class="s-folder-name">{cat.name}</span>
-              <span class="s-folder-count">{cat.mangas?.nodes.length ?? 0} manga</span>
-              <button class="s-btn-icon"
-                class:accent={(store.settings.defaultLibraryCategoryId ?? null) === cat.id}
-                onclick={() => updateSettings({ defaultLibraryCategoryId: (store.settings.defaultLibraryCategoryId ?? null) === cat.id ? null : cat.id })}
-                title={(store.settings.defaultLibraryCategoryId ?? null) === cat.id ? "Remove as default folder" : "Set as default folder"}>
-                <Star size={13} weight={(store.settings.defaultLibraryCategoryId ?? null) === cat.id ? "fill" : "light"} />
-              </button>
-              <button class="s-btn-icon"
-                onclick={() => toggleHiddenCategory(cat.id)}
-                title={(store.settings.hiddenCategoryIds ?? []).includes(cat.id) ? "Show in Saved tab" : "Hide from Saved tab"}>
-                {#if (store.settings.hiddenCategoryIds ?? []).includes(cat.id)}<EyeSlash size={13} weight="light" />{:else}<Eye size={13} weight="light" />{/if}
-              </button>
-              <button
-                class="s-btn-icon"
-                class:accent={cat.includeInUpdate !== false}
-                onclick={() => toggleCategoryFlag(cat.id, "includeInUpdate")}
-                title={cat.includeInUpdate !== false ? "Exclude from library updates" : "Include in library updates"}>
-                <ArrowsClockwise size={13} weight={cat.includeInUpdate !== false ? "bold" : "light"} />
-              </button>
-              <button
-                class="s-btn-icon"
-                class:accent={cat.includeInDownload !== false}
-                onclick={() => toggleCategoryFlag(cat.id, "includeInDownload")}
-                title={cat.includeInDownload !== false ? "Exclude from auto-downloads" : "Include in auto-downloads"}>
-                <DownloadSimple size={13} weight={cat.includeInDownload !== false ? "bold" : "light"} />
-              </button>
-              <button class="s-btn-icon" onclick={() => moveCategory(cat.id, -1)} disabled={i === 0} title="Move up">↑</button>
-              <button class="s-btn-icon" onclick={() => moveCategory(cat.id, 1)} disabled={i === displayCats.length - 1} title="Move down">↓</button>
-              <button class="s-btn-icon" onclick={() => startEdit(cat.id, cat.name)} title="Rename"><Pencil size={12} weight="light" /></button>
-              <button class="s-btn-icon danger" onclick={() => deleteFolder(cat.id)} title="Delete"><Trash size={12} weight="light" /></button>
-            {/if}
-          </div>
-        {/each}
+        <div class="s-folder-list" class:is-dragging={dragId !== null}>
+          {#each displayCats as cat}
+            <div
+              class="s-folder-row"
+              class:dragging={dragId === cat.id}
+              class:drop-above={dragOverId === cat.id && dragId !== cat.id && dropPosition === "above"}
+              class:drop-below={dragOverId === cat.id && dragId !== cat.id && dropPosition === "below"}
+              ondragover={(e) => onDragOver(e, cat.id)}
+              ondrop={(e) => onDrop(e, cat.id)}
+              ondragleave={() => { if (dragOverId === cat.id) { dragOverId = null; dropPosition = null; } }}
+            >
+              {#if editingId === cat.id}
+                <input class="s-input full" bind:value={editingName}
+                  onkeydown={(e) => { if (e.key === "Enter") commitEdit(); if (e.key === "Escape") { editingId = null; } }}
+                  onblur={commitEdit} use:focusInput />
+                <button class="s-btn-icon" onclick={commitEdit} title="Save">✓</button>
+              {:else}
+                {@const isDefault = (store.settings.defaultLibraryCategoryId ?? null) === cat.id}
+                {@const isHidden  = (store.settings.hiddenCategoryIds ?? []).includes(cat.id)}
+                {@const inUpdate  = cat.includeInUpdate !== false}
+                {@const inDl      = cat.includeInDownload !== false}
+
+                <div class="s-folder-identity" draggable="true"
+                  ondragstart={(e) => onDragStart(e, cat.id)}
+                  ondragend={onDragEnd}>
+                  <span class="s-folder-icon">
+                    <FolderSimple size={14} weight="light" />
+                    <DotsSixVertical size={14} weight="bold" />
+                  </span>
+                  <span class="s-folder-name" onclick={(e) => { e.stopPropagation(); startEdit(cat.id, cat.name); }} title="Click to rename">
+                    {cat.name}
+                  </span>
+                </div>
+
+                <span class="s-folder-count">{cat.mangas?.nodes.length ?? 0} manga</span>
+
+                <div class="s-folder-actions">
+                  <button class="s-btn-icon" class:active={isDefault}
+                    onclick={() => updateSettings({ defaultLibraryCategoryId: isDefault ? null : cat.id })}
+                    title={isDefault ? "Remove as default folder" : "Set as default folder"}>
+                    <Star size={13} weight={isDefault ? "fill" : "light"} />
+                  </button>
+
+                  <button class="s-btn-icon" class:muted={isHidden}
+                    onclick={() => toggleHiddenCategory(cat.id)}
+                    title={isHidden ? "Show in library" : "Hide from library"}>
+                    {#if isHidden}
+                      <EyeSlash size={13} weight="light" />
+                    {:else}
+                      <Eye size={13} weight="light" />
+                    {/if}
+                  </button>
+
+                  <button class="s-btn-icon" class:active={inUpdate} class:inactive={!inUpdate}
+                    onclick={() => toggleCategoryFlag(cat.id, "includeInUpdate")}
+                    title={inUpdate ? "Included in updates — click to exclude" : "Excluded from updates — click to include"}>
+                    {#if inUpdate}
+                      <ArrowsClockwise size={13} weight="bold" />
+                    {:else}
+                      <ArrowsCounterClockwise size={13} weight="light" />
+                    {/if}
+                  </button>
+
+                  <button class="s-btn-icon" class:active={inDl} class:inactive={!inDl}
+                    onclick={() => toggleCategoryFlag(cat.id, "includeInDownload")}
+                    title={inDl ? "Included in auto-downloads — click to exclude" : "Excluded from auto-downloads — click to include"}>
+                    <DownloadSimple size={13} weight={inDl ? "bold" : "light"} />
+                  </button>
+
+                  <button class="s-btn-icon danger" onclick={() => deleteFolder(cat.id)} title="Delete folder">
+                    <Trash size={12} weight="light" />
+                  </button>
+                </div>
+              {/if}
+            </div>
+          {/each}
+        </div>
      {/if}
    </div>
  </div>
+</div>

-</div>
+<style>
+  .s-folder-list {
+    display: contents;
+  }
+
+  .s-folder-list.is-dragging,
+  .s-folder-list.is-dragging * {
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .s-folder-row {
+    transition: opacity 0.15s, background 0.1s;
+    position: relative;
+  }
+
+  .s-folder-row.dragging {
+    opacity: 0.35;
+  }
+
+  .s-folder-row.drop-above::before,
+  .s-folder-row.drop-below::after {
+    content: "";
+    position: absolute;
+    left: 8px;
+    right: 8px;
+    height: 2px;
+    background: var(--color-success, #4ade80);
+    border-radius: 2px;
+    pointer-events: none;
+    z-index: 10;
+  }
+
+  .s-folder-row.drop-above::before { top: -1px; }
+  .s-folder-row.drop-below::after  { bottom: -1px; }
+
+  .s-folder-identity {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--text-faint);
+    flex-shrink: 0;
+    overflow: hidden;
+    cursor: grab;
+  }
+
+  .s-folder-identity:active {
+    cursor: grabbing;
+  }
+
+  .s-folder-icon {
+    display: grid;
+    flex-shrink: 0;
+  }
+
+  .s-folder-icon > :global(*) {
+    grid-area: 1 / 1;
+    transition: opacity 0.12s;
+  }
+
+  .s-folder-icon > :global(*:last-child) {
+    opacity: 0;
+  }
+
+  .s-folder-row:hover .s-folder-icon > :global(*:first-child) {
+    opacity: 0;
+  }
+
+  .s-folder-row:hover .s-folder-icon > :global(*:last-child) {
+    opacity: 1;
+  }
+
+  .s-folder-name {
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--text-primary);
+  }
+
+  .s-folder-name:hover {
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+
+  .s-folder-actions {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    margin-left: auto;
+    flex-shrink: 0;
+  }
+
+  .s-btn-icon.active {
+    color: var(--accent, #6c8ef5);
+  }
+
+  .s-btn-icon.inactive {
+    color: var(--color-error, #f87171);
+    opacity: 0.75;
+  }
+
+  .s-btn-icon.inactive:hover {
+    opacity: 1;
+  }
+
+  .s-btn-icon.muted {
+    color: var(--text-faint);
+    opacity: 0.5;
+  }
+</style>
@@ -56,7 +56,7 @@
  <div class="s-section">
    <p class="s-section-title">Render Limit</p>
    <div class="s-section-body">
-      <div class="s-row">
+      <div class="s-slider-row">
        <div class="s-row-info">
          <span class="s-label">Items per page</span>
          <span class="s-desc">Lower = faster on large libraries</span>
@@ -95,16 +95,6 @@
    </div>
  </div>

-  <div class="s-section">
-    <p class="s-section-title">Interface</p>
-    <div class="s-section-body">
-      <label class="s-row">
-        <div class="s-row-info"><span class="s-label">Compact sidebar</span><span class="s-desc">Collapses the sidebar to icons only</span></div>
-        <button role="switch" aria-checked={store.settings.compactSidebar} aria-label="Compact sidebar" class="s-toggle" class:on={store.settings.compactSidebar} onclick={() => updateSettings({ compactSidebar: !store.settings.compactSidebar })}><span class="s-toggle-thumb"></span></button>
-      </label>
-    </div>
-  </div>
-
  <div class="s-section">
    <p class="s-section-title">Session Cache</p>
    <div class="s-section-body">
@@ -159,7 +159,6 @@
  let multiStorageInfos = $state<(StorageInfo & { label: string })[]>([]);
  let advStorageOpen    = $state(false);
  let backupSectionOpen = $state(false);
-  let appDataSectionOpen = $state(false);
  let resetSectionOpen  = $state(false);

  async function fetchStorage() {
@@ -661,6 +660,9 @@
    </button>
    {#if backupSectionOpen}
      <div class="s-collapsible-body">
+
+        <p class="s-subsection-title">Library backup</p>
+
        <div class="s-row">
          <div class="s-row-info">
            <span class="s-label">Create backup</span>
@@ -768,17 +770,8 @@
            {/if}
          </div>
        {/if}
-      </div>
-    {/if}
-  </div>

-  <div class="s-section">
-    <button class="s-collapsible-trigger" onclick={() => appDataSectionOpen = !appDataSectionOpen}>
-      <span class="s-label">App-Data Backup</span>
-      <svg class="s-collapsible-caret" class:open={appDataSectionOpen} width="10" height="6" viewBox="0 0 10 6"><path d="M0 0l5 6 5-6" fill="currentColor"/></svg>
-    </button>
-    {#if appDataSectionOpen}
-      <div class="s-collapsible-body">
+        <p class="s-subsection-title">App data backup</p>

        <div class="s-row">
          <div class="s-row-info">
@@ -16,10 +16,12 @@
  let oauthTrackerId  = $state<number | null>(null);
  let oauthCallbackInput = $state("");
  let oauthSubmitting = $state(false);
+  let oauthError      = $state<string | null>(null);
  let credsTrackerId  = $state<number | null>(null);
  let credsUsername   = $state("");
  let credsPassword   = $state("");
  let credsSubmitting = $state(false);
+  let credsError      = $state<string | null>(null);
  let loggingOut      = $state<number | null>(null);

  $effect(() => {
@@ -50,11 +52,11 @@
      await loadTrackers();
      oauthTrackerId = null; oauthCallbackInput = "";
    } catch (e: any) {
-      trackersError = e?.message ?? "Login failed";
+      oauthError = e?.message ?? "Login failed";
    } finally { oauthSubmitting = false; }
  }

-  function cancelOAuth() { oauthTrackerId = null; oauthCallbackInput = ""; }
+  function cancelOAuth() { oauthTrackerId = null; oauthCallbackInput = ""; oauthError = null; }

  function startCredentials(tracker: Tracker) { credsTrackerId = tracker.id; credsUsername = ""; credsPassword = ""; }

@@ -66,11 +68,11 @@
      await loadTrackers();
      credsTrackerId = null; credsUsername = ""; credsPassword = "";
    } catch (e: any) {
-      trackersError = e?.message ?? "Login failed";
+      credsError = e?.message ?? "Login failed";
    } finally { credsSubmitting = false; }
  }

-  function cancelCredentials() { credsTrackerId = null; credsUsername = ""; credsPassword = ""; }
+  function cancelCredentials() { credsTrackerId = null; credsUsername = ""; credsPassword = ""; credsError = null; }

  async function logoutTracker(trackerId: number) {
    loggingOut = trackerId;
@@ -127,7 +129,7 @@
    <p class="s-section-title">Connected Trackers</p>
    <div class="s-section-body">
      {#if trackersError}
-        <div class="s-banner s-banner-error">{trackersError}</div>
+        <div class="s-banner s-banner-error" onclick={() => trackersError = null} role="button" tabindex="0" onkeydown={(e) => e.key === "Enter" && (trackersError = null)}>{trackersError}</div>
      {/if}
      {#if trackersLoading}
        <p class="s-empty">Loading trackers…</p>
@@ -168,6 +170,9 @@
            </div>
            {#if oauthTrackerId === tracker.id}
              <div class="s-tracker-expand">
+                {#if oauthError}
+                  <div class="s-banner s-banner-error s-banner-dismissible" onclick={() => oauthError = null} role="button" tabindex="0" onkeydown={(e) => e.key === "Enter" && (oauthError = null)}>{oauthError}</div>
+                {/if}
                <p class="s-oauth-hint">Browser opened {tracker.name} login — authorise then paste the callback URL below.</p>
                <input class="s-input full" placeholder="https://suwayomi.org/tracker-oauth#access_token=…"
                  bind:value={oauthCallbackInput}
@@ -183,6 +188,9 @@
            {/if}
            {#if credsTrackerId === tracker.id}
              <div class="s-tracker-expand">
+                {#if credsError}
+                  <div class="s-banner s-banner-error s-banner-dismissible" onclick={() => credsError = null} role="button" tabindex="0" onkeydown={(e) => e.key === "Enter" && (credsError = null)}>{credsError}</div>
+                {/if}
                <input class="s-input full" placeholder="Username / Email" bind:value={credsUsername}
                  onkeydown={(e) => e.key === "Escape" && cancelCredentials()} use:focusEl />
                <input class="s-input full" type="password" placeholder="Password" bind:value={credsPassword}
@@ -266,4 +274,6 @@
 <style>
  .s-tracker-status-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
  .s-pill-warn { background: color-mix(in srgb, var(--color-warn, #c97c2b) 15%, transparent); color: var(--color-warn, #c97c2b); border-color: color-mix(in srgb, var(--color-warn, #c97c2b) 35%, transparent); }
+  .s-banner-dismissible { cursor: pointer; max-height: 8rem; overflow-y: auto; }
+  .s-banner-dismissible:hover { opacity: 0.85; }
 </style>
@@ -115,7 +115,7 @@
  function openManga() {
    if (!record.manga) return;
    setActiveManga(record.manga as any);
-    setNavPage("library");
+    setNavPage(store.navPage);
    onClose();
  }

@@ -134,6 +134,21 @@ export async function syncBackFromTracker(
      scanlatorForce:    false,
    }),
  });
+  const seenInt = new Map<number, Chapter>();
+  for (const ch of eligible) {
+    const key = Math.floor(ch.chapterNumber);
+    if (!Number.isInteger(ch.chapterNumber)) continue;
+    if (!seenInt.has(key)) seenInt.set(key, ch);
+  }
+  const dedupedEligible = [...seenInt.values()];
+  const decimalsByFloor = new Map<number, Chapter[]>();
+  for (const ch of eligible) {
+    if (Number.isInteger(ch.chapterNumber)) continue;
+    const key = Math.floor(ch.chapterNumber);
+    const arr = decimalsByFloor.get(key) ?? [];
+    arr.push(ch);
+    decimalsByFloor.set(key, arr);
+  }

  const toMarkRead: number[] = [];

@@ -141,11 +156,14 @@ export async function syncBackFromTracker(
    const remote = record.lastChapterRead;
    if (!remote || remote <= 0) continue;

-    for (const chapter of eligible) {
+    for (const chapter of dedupedEligible) {
      if (chapter.isRead) continue;
-      const diff = Math.abs(chapter.chapterNumber - remote);
-      if (opts.threshold !== null && diff > opts.threshold) continue;
-      if (chapter.chapterNumber <= remote) toMarkRead.push(chapter.id);
+      if (chapter.chapterNumber > remote) continue;
+      if (opts.threshold !== null && remote - chapter.chapterNumber > opts.threshold) continue;
+      toMarkRead.push(chapter.id);
+      for (const dec of decimalsByFloor.get(chapter.chapterNumber) ?? []) {
+        if (!dec.isRead) toMarkRead.push(dec.id);
+      }
    }
  }

@@ -1,10 +1,29 @@
 <script lang="ts">
+  import { onMount } from "svelte";
  import { ClockCounterClockwise, Trash, MagnifyingGlass, Books, Fire, BookOpen, Clock, TrendUp } from "phosphor-svelte";
  import Thumbnail from "@shared/manga/Thumbnail.svelte";
  import { store, clearHistory, setPreviewManga } from "@store/state.svelte";
+  import { gql } from "@api/client";
+  import { GET_LIBRARY } from "@api/queries/manga";
+  import { cache, CACHE_KEYS } from "@core/cache";
  import type { HistoryEntry } from "@store/state.svelte";
+  import type { Manga } from "@types";
  import { timeAgo, dayLabel, formatReadTime } from "@core/util";

+  let libraryManga = $state<Manga[]>([]);
+
+  onMount(() => {
+    cache.get(CACHE_KEYS.LIBRARY, () =>
+      gql<{ mangas: { nodes: Manga[] } }>(GET_LIBRARY).then(d => d.mangas.nodes)
+    )
+      .then(m => { libraryManga = m; })
+      .catch(() => {});
+  });
+
+  function thumbFor(mangaId: number, fallback: string): string {
+    return libraryManga.find(m => m.id === mangaId)?.thumbnailUrl ?? fallback ?? "";
+  }
+
  let search       = $state("");
  let confirmClear = $state(false);

@@ -173,9 +192,9 @@
          </div>
          <div class="session-list">
            {#each items as session (session.latestChapterId)}
-              <button class="session-row" onclick={() => setPreviewManga({ id: session.mangaId, title: session.mangaTitle, thumbnailUrl: session.thumbnailUrl } as any)}>
+              <button class="session-row" onclick={() => setPreviewManga({ id: session.mangaId, title: session.mangaTitle, thumbnailUrl: thumbFor(session.mangaId, session.thumbnailUrl) } as any)}>
                <div class="thumb-wrap">
-                  <Thumbnail src={session.thumbnailUrl} alt={session.mangaTitle} class="thumb" />
+                  <Thumbnail src={thumbFor(session.mangaId, session.thumbnailUrl)} alt={session.mangaTitle} class="thumb" />
                  {#if session.chapterCount > 1}
                    <span class="session-count">{session.chapterCount}</span>
                  {/if}
@@ -25,6 +25,7 @@
    store.activeManga  = null;
    store.activeSource = null;
    store.genreFilter  = "";
+    store.searchQuery  = "";
  }

  function goHome() {
@@ -33,6 +34,7 @@
    store.activeManga   = null;
    store.libraryFilter = "library";
    store.genreFilter   = "";
+    store.searchQuery  = "";
  }
 </script>

@@ -91,4 +93,4 @@
  .settings-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .settings-btn.anims { transition: color var(--t-base), background var(--t-base), transform var(--t-slow); }
  .settings-btn.anims:hover { transform: rotate(30deg); }
-</style>
+</style>
@@ -42,6 +42,8 @@
  let loadingLinkList          = $state(false);
  let coverPickerOpen          = $state(false);

+  let originNavPage = store.navPage;
+
  const linkedIds = $derived(
    store.previewManga ? (store.settings.mangaLinks?.[store.previewManga.id] ?? []) : [],
  );
@@ -152,6 +154,7 @@
    const shouldAutoLink = store.settings.autoLinkOnOpen;
    const focal = store.previewManga;
    if (focal) {
+      originNavPage = store.navPage;
      load(focal.id);
      loadCategories(focal.id);
      if (shouldAutoLink) {
@@ -256,7 +259,7 @@
  function openSeriesDetail() {
    if (!displayManga) return;
    setActiveManga(displayManga);
-    setNavPage("library");
+    setNavPage(originNavPage);
    close();
  }

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { thumbUrl, plainThumbUrl } from "@api/client";
+  import { plainThumbUrl, getServerUrl } from "@api/client";
  import { store } from "@store/state.svelte";
  import { getBlobUrl } from "@core/cache/imageCache";

@@ -23,7 +23,7 @@
    [key: string]: any;
  } = $props();

-  const isAuth = $derived(store.settings.serverAuthMode === "BASIC_AUTH");
+  const isAuth = $derived((store.settings.serverAuthMode ?? "NONE") !== "NONE");

  let blobUrl = $state("");
  let reqId   = 0;
@@ -36,7 +36,8 @@
    if (!_isAuth || !_src) { blobUrl = ""; return; }

    const id = ++reqId;
-    getBlobUrl(plainThumbUrl(_src), _priority)
+    const bareUrl = _src.startsWith("http") ? _src : `${getServerUrl()}${_src}`;
+    getBlobUrl(bareUrl, _priority)
      .then(u  => { if (id === reqId) blobUrl = u; })
      .catch(() => { if (id === reqId) blobUrl = ""; });
  });
@@ -44,7 +45,7 @@
  const resolved = $derived(
    isAuth
      ? (blobUrl || undefined)
-      : (src ? thumbUrl(src) : undefined)
+      : (src ? plainThumbUrl(src) : undefined)
  );
 </script>

@@ -3,20 +3,32 @@ export type NavPage =
  | "downloads" | "extensions" | "history" | "search" | "tracking";

 class AppStore {
-  navPage:      NavPage = $state("home");
-  settingsOpen: boolean = $state(false);
-  searchPrefill: string = $state("");
-  genreFilter:   string = $state("");
+  navPage:       NavPage = $state("home");
+  settingsOpen:  boolean = $state(false);
+  searchPrefill: string  = $state("");
+  searchQuery:   string  = $state("");
+  genreFilter:   string  = $state("");
+  scrollPositions: Map<string, number> = $state(new Map());

-  setNavPage(next: NavPage)       { this.navPage       = next; }
-  setSettingsOpen(next: boolean)  { this.settingsOpen  = next; }
-  setSearchPrefill(next: string)  { this.searchPrefill = next; }
-  setGenreFilter(next: string)    { this.genreFilter   = next; }
+  setNavPage(next: NavPage)        { this.navPage       = next; }
+  setSettingsOpen(next: boolean)   { this.settingsOpen  = next; }
+  setSearchPrefill(next: string)   { this.searchPrefill = next; }
+  setSearchQuery(next: string)     { this.searchQuery   = next; }
+  setGenreFilter(next: string)     { this.genreFilter   = next; }
+  saveScroll(key: string, top: number) {
+    const m = new Map(this.scrollPositions);
+    m.set(key, top);
+    this.scrollPositions = m;
+  }
+  getScroll(key: string): number { return this.scrollPositions.get(key) ?? 0; }
 }

 export const app = new AppStore();

-export function setNavPage(next: NavPage)      { app.setNavPage(next); }
-export function setSettingsOpen(next: boolean) { app.setSettingsOpen(next); }
-export function setSearchPrefill(next: string) { app.setSearchPrefill(next); }
-export function setGenreFilter(next: string)   { app.setGenreFilter(next); }
+export function setNavPage(next: NavPage)          { app.setNavPage(next); }
+export function setSettingsOpen(next: boolean)     { app.setSettingsOpen(next); }
+export function setSearchPrefill(next: string)     { app.setSearchPrefill(next); }
+export function setSearchQuery(next: string)       { app.setSearchQuery(next); }
+export function setGenreFilter(next: string)       { app.setGenreFilter(next); }
+export function saveScroll(key: string, top: number) { app.saveScroll(key, top); }
+export function getScroll(key: string): number     { return app.getScroll(key); }
@@ -2,6 +2,7 @@ import { store }                           from "@store/state.svelte";
 import { probeServer, loginBasic, loginUI } from "@core/auth";
 import { trackingState }                   from "@features/tracking/store/trackingState.svelte";
 import { loadAllStores }                   from "@core/persistence/persist";
+import { notifyReauthSuccess }             from "@api/client";

 const MAX_ATTEMPTS = 40;

@@ -107,6 +108,7 @@ export async function submitLogin(onSuccess: () => void): Promise<void> {
    boot.skipped        = false;
    boot.loginPass      = "";
    boot.loginError     = null;
+    notifyReauthSuccess();
    trackingState.bootSync().catch(() => {});
    onSuccess();
  } catch (e: any) {
@@ -10,6 +10,7 @@ import { notifications }                                              from "./no
 import { app }                                                        from "./app.svelte";
 import { persistSettings, persistLibrary, persistUpdates }           from "../core/persistence/persist";
 import type { PersistedData }                                         from "../core/persistence/persist";
+import { untrack }                                                    from "svelte";

 function localDateStr(d: Date): string {
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
@@ -42,7 +43,6 @@ function mergeSettings(saved: any): Settings {
    mangaPrefs:           saved?.settings?.mangaPrefs           ?? {},
    customThemes:         saved?.settings?.customThemes         ?? [],
    hiddenCategoryIds:    saved?.settings?.hiddenCategoryIds    ?? [],
-    nsfwFilteredTags:     saved?.settings?.nsfwFilteredTags     ?? DEFAULT_SETTINGS.nsfwFilteredTags,
    nsfwAllowedSourceIds: saved?.settings?.nsfwAllowedSourceIds ?? [],
    nsfwBlockedSourceIds: saved?.settings?.nsfwBlockedSourceIds ?? [],
    libraryTabSort:       saved?.settings?.libraryTabSort       ?? {},
@@ -93,6 +93,8 @@ class Store {
  set settingsOpen(v)   { app.setSettingsOpen(v); }
  get searchPrefill()   { return app.searchPrefill; }
  set searchPrefill(v)  { app.setSearchPrefill(v); }
+  get searchQuery()     { return app.searchQuery; }
+  set searchQuery(v)    { app.setSearchQuery(v); }
  get genreFilter()     { return app.genreFilter; }
  set genreFilter(v)    { app.setGenreFilter(v); }

@@ -104,17 +106,23 @@ class Store {
        (saved.settings as any)[key] = (DEFAULT_SETTINGS as any)[key];
    }

-    this.settings            = mergeSettings(saved);
-    this.history             = saved.history             ?? [];
-    this.bookmarks           = saved.bookmarks           ?? [];
-    this.markers             = saved.markers             ?? [];
-    this.readLog             = saved.readLog             ?? [];
-    this.readingStats        = saved.readingStats        ?? { ...DEFAULT_READING_STATS };
-    this.dailyReadCounts     = saved.dailyReadCounts     ?? {};
-    this.libraryUpdates      = saved.libraryUpdates      ?? [];
-    this.lastLibraryRefresh  = saved.lastLibraryRefresh  ?? 0;
-    this.acknowledgedUpdates = new Set(saved.acknowledgedUpdateIds ?? []);
+    // Assign all persisted values outside of reactive tracking so the
+    // $effects registered below don't fire on this initial write.
+    untrack(() => {
+      this.settings            = mergeSettings(saved);
+      this.history             = saved.history             ?? [];
+      this.bookmarks           = saved.bookmarks           ?? [];
+      this.markers             = saved.markers             ?? [];
+      this.readLog             = saved.readLog             ?? [];
+      this.readingStats        = saved.readingStats        ?? { ...DEFAULT_READING_STATS };
+      this.dailyReadCounts     = saved.dailyReadCounts     ?? {};
+      this.libraryUpdates      = saved.libraryUpdates      ?? [];
+      this.lastLibraryRefresh  = saved.lastLibraryRefresh  ?? 0;
+      this.acknowledgedUpdates = new Set(saved.acknowledgedUpdateIds ?? []);
+    });

+    // Mark ready before registering effects so the first reactive run
+    // (which Svelte schedules after the current microtask) is allowed through.
    this.#ready = true;

    $effect.root(() => {
@@ -394,4 +402,4 @@ export async function checkAndMarkCompleted(
 ): Promise<void> { return store.checkAndMarkCompleted(mangaId, chaps, categories, gqlFn, UPDATE_MANGA_CATEGORIES, UPDATE_MANGA, mangaStatus); }

 export { addToast, dismissToast, setActiveDownloads } from "./notifications.svelte";
-export { setNavPage, setSettingsOpen, setSearchPrefill, setGenreFilter } from "./app.svelte";
+export { setNavPage, setSettingsOpen, setSearchPrefill, setSearchQuery, setGenreFilter, saveScroll, getScroll } from "./app.svelte";
@@ -124,6 +124,8 @@ export interface Settings {
  trackerRespectScanlatorFilter: boolean;
  pinchZoom?: boolean;
  autoLinkOnOpen: boolean;
+  downloadToastsEnabled: boolean;
+  downloadAutoRetry: boolean;
 }

 export const DEFAULT_SETTINGS: Settings = {
@@ -163,4 +165,6 @@ export const DEFAULT_SETTINGS: Settings = {
  trackerRespectScanlatorFilter: true,
  pinchZoom: false,
  autoLinkOnOpen: false,
+  downloadToastsEnabled: true,
+  downloadAutoRetry: false,
 };
@@ -27,7 +27,7 @@ export default defineConfig({
  envPrefix: ["VITE_", "TAURI_"],
  build: {
    target: ["es2021", "chrome100", "safari13"],
-    minify: !process.env.TAURI_DEBUG ? "esbuild" : false,
+    minify: !process.env.TAURI_DEBUG ? "oxc" : false,
    sourcemap: !!process.env.TAURI_DEBUG,
  },
 });
Author	SHA1	Message	Date
Youwes09	244447da9b	Feat: Backtracing + NavPage Store	2026-05-10 04:31:27 -05:00
Youwes09	f05f781b5b	Fix: Biometric Revision V1	2026-05-10 03:00:08 -05:00
Youwes09	f7c5aebf29	Fix: PerformanceSettings RenderLimit CSS Revision (#63 )	2026-05-10 02:50:48 -05:00
Youwes09	e09ae9d2e7	Fix: Respect Page-Order in Loading & Memory Eviction (#61 , #63 , #68 )	2026-05-10 02:17:25 -05:00
Youwes09	7b2ae74c02	Fix: Trigger Recently-Fetched Data for RecentActivity (#63 )	2026-05-03 13:06:02 -05:00
Youwes09	0d53e3f102	Fix: Attempt to Improve UI-Login Cache (#63 )	2026-05-03 12:29:20 -05:00
Youwes09	093b395cc1	Fix: Re-Try UI Login Token + GQL Wait	2026-05-03 11:47:18 -05:00
Youwes09	efdd8ff95d	Fix: Re-Register Settings Export Function (#63 )	2026-05-03 11:35:09 -05:00
Youwes09	c0f0ff9bd3	Fix: TrackingSync Excludes Decimals & Respects Chapter Numbers (#63 )	2026-05-02 18:14:34 -05:00
Youwes09	3f6049c12d	Fix: Remove Scroll Propagation in Reader (#63 )	2026-05-02 18:06:37 -05:00
Youwes09	5451a2654b	Fix: Wrap ReaderControls in Scrollable (#63 )	2026-05-02 17:58:16 -05:00
Youwes09	e625755c5e	Fix: Library Folders Clipping (Anim Removed) (#63 )	2026-05-02 17:51:54 -05:00
Youwes09	bd95bf4eb1	Fix: Added Download Toggles to Global-Store (#63 )	2026-05-02 17:40:07 -05:00
Youwes09	b4d680ddd1	Fix: Error-Handling & ScrollBox on TrackingSettings (#63 )	2026-05-02 17:34:54 -05:00
Youwes09	d1b7429b5d	Fix: FolderSettings Revamp & Folders (#63 )	2026-05-02 17:23:47 -05:00
Youwes09	000195be89	Fix: State-Based Issues & AboutSettings (WIP)	2026-05-02 16:53:50 -05:00
Youwes09	399d429142	Fix: Rust-Cleanup & Flake-SHA Patch	2026-05-01 11:32:29 -05:00
Youwes09	b79ee99e8a	Fix: Linked CORS Bypass to UI-LOGIN	2026-05-01 11:09:29 -05:00
Youwes09	80c4b9d9be	Chore: Update pnpm-tauri Packages	2026-05-01 01:14:39 -05:00
Youwes09	4584e6e69e	Chore: Post-Bump for v0.9.2	2026-05-01 01:09:41 -05:00