organised local library backend

desktop/package-lock.json

@@ -11,12 +11,15 @@
       "dependencies": {
         "@fastify/static": "^8.3.0",
         "@xhayper/discord-rpc": "^1.3.0",
+        "adm-zip": "^0.5.16",
         "bcryptjs": "^3.0.3",
         "bindings": "^1.5.0",
         "cheerio": "^1.1.2",
         "dotenv": "^17.2.3",
         "electron-log": "^5.4.3",
+        "epub": "^1.3.0",
         "fastify": "^5.6.2",
+        "js-yaml": "^4.1.1",
         "jsonwebtoken": "^9.0.3",
         "node-addon-api": "^8.5.0",
         "node-cron": "^4.2.1",
@@ -24,6 +27,7 @@
         "sqlite3": "^5.1.7"
       },
       "devDependencies": {
+        "@types/adm-zip": "^0.5.7",
         "@types/bcrypt": "^6.0.0",
         "@types/jsonwebtoken": "^9.0.10",
         "@types/node": "^24.0.0",
@@ -1508,6 +1512,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/adm-zip": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@types/adm-zip/-/adm-zip-0.5.7.tgz",
+      "integrity": "sha512-DNEs/QvmyRLurdQPChqq0Md4zGvPwHerAJYWk9l2jCbD1VPpnzRJorOdiq4zsw09NFbYnhfsoEhWtxIzXpn2yw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/bcrypt": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/@types/bcrypt/-/bcrypt-6.0.0.tgz",
@@ -1721,6 +1735,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/adm-zip": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.5.16.tgz",
+      "integrity": "sha512-TGw5yVi4saajsSEgz25grObGHEUaDrniwvA2qwSC060KfqGPdglhvPMA2lPIoxs3PQIItj2iag35fONcQqgUaQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0"
+      }
+    },
     "node_modules/agent-base": {
       "version": "7.1.4",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
@@ -1955,7 +1978,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true,
       "license": "Python-2.0"
     },
     "node_modules/assert-plus": {
@@ -2674,6 +2696,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/code-point-at": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+      "integrity": "sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2876,7 +2908,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
       "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
-      "dev": true,
       "license": "MIT",
       "optional": true
     },
@@ -3686,6 +3717,27 @@
         "node": ">=6"
       }
     },
+    "node_modules/epub": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/epub/-/epub-1.3.0.tgz",
+      "integrity": "sha512-6BL8gIitljkTf4HW52Ast6wenPTkMKllU28bRc5awVsT+xCaPl6nWSaqSmHbRgPrl1+5uekOPvOxy7DQzbhM8Q==",
+      "dependencies": {
+        "adm-zip": "^0.4.11",
+        "xml2js": "^0.4.23"
+      },
+      "optionalDependencies": {
+        "zipfile": "^0.5.11"
+      }
+    },
+    "node_modules/epub/node_modules/adm-zip": {
+      "version": "0.4.16",
+      "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.16.tgz",
+      "integrity": "sha512-TFi4HBKSGfIKsK5YCkKaaFG2m4PEDyViZmEwof3MTIgzimHLto6muaHVpbrljdIvIrFZzEq/p4nafOeLcYegrg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.3.0"
+      }
+    },
     "node_modules/err-code": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz",
@@ -4647,6 +4699,29 @@
       ],
       "license": "BSD-3-Clause"
     },
+    "node_modules/ignore-walk": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.4.tgz",
+      "integrity": "sha512-PY6Ii8o1jMRA1z4F2hRkH/xN59ox43DavKvD3oDpfurRlOJyAHpifIwpbdv1n4jt4ov0jSpw3kQ4GhJnpBL6WQ==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "minimatch": "^3.0.4"
+      }
+    },
+    "node_modules/ignore-walk/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -4769,6 +4844,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/isbinaryfile": {
       "version": "5.0.7",
       "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-5.0.7.tgz",
@@ -4825,7 +4907,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
       "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1"
@@ -5400,12 +5481,60 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "license": "MIT"
     },
+    "node_modules/nan": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.10.0.tgz",
+      "integrity": "sha512-bAdJv7fBLhWC+/Bls0Oza+mvTaNQtP+1RyhhhvD95pgUJz6XM5IzgmxOkItJ9tkoCiplvAnXI1tNmmUD/eScyA==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/napi-build-utils": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-2.0.0.tgz",
       "integrity": "sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==",
       "license": "MIT"
     },
+    "node_modules/needle": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/needle/-/needle-2.9.1.tgz",
+      "integrity": "sha512-6R9fqJ5Zcmf+uYaFgdIHmLwNldn5HbK8L5ybn7Uz+ylX/rnOsSp1AHcvQSrCaFN+qNM1wpymHqD7mVasEOlHGQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "debug": "^3.2.6",
+        "iconv-lite": "^0.4.4",
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "needle": "bin/needle"
+      },
+      "engines": {
+        "node": ">= 4.4.x"
+      }
+    },
+    "node_modules/needle/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/needle/node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/negotiator": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
@@ -5557,6 +5686,348 @@
         "node": ">=18"
       }
     },
+    "node_modules/node-pre-gyp": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.10.3.tgz",
+      "integrity": "sha512-d1xFs+C/IPS8Id0qPTZ4bUT8wWryfR/OzzAFxweG+uLN85oPzyo2Iw6bVlLQ/JOdgNonXLCoRyqDzDWq4iw72A==",
+      "deprecated": "Please upgrade to @mapbox/node-pre-gyp: the non-scoped node-pre-gyp package is deprecated and only the @mapbox scoped package will recieve updates in the future",
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^1.0.2",
+        "mkdirp": "^0.5.1",
+        "needle": "^2.2.1",
+        "nopt": "^4.0.1",
+        "npm-packlist": "^1.1.6",
+        "npmlog": "^4.0.2",
+        "rc": "^1.2.7",
+        "rimraf": "^2.6.1",
+        "semver": "^5.3.0",
+        "tar": "^4"
+      },
+      "bin": {
+        "node-pre-gyp": "bin/node-pre-gyp"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/node-pre-gyp/node_modules/ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/aproba": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
+      "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/node-pre-gyp/node_modules/are-we-there-yet": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.7.tgz",
+      "integrity": "sha512-nxwy40TuMiUGqMyRHgCSWZ9FM4VAoRP4xUYSTv5ImRog+h9yISPbVH7H8fASCIzYn9wlEv4zvFL7uKDMCFQm3g==",
+      "deprecated": "This package is no longer supported.",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "delegates": "^1.0.0",
+        "readable-stream": "^2.0.6"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/node-pre-gyp/node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/fs-minipass": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.7.tgz",
+      "integrity": "sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "minipass": "^2.6.0"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/gauge": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+      "integrity": "sha512-14x4kjc6lkD3ltw589k0NrPD6cCNTD6CWoVUNpB85+DrtONoZn+Rug6xZU5RvSC4+TZPxA5AnBibQYAvZn41Hg==",
+      "deprecated": "This package is no longer supported.",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "aproba": "^1.0.3",
+        "console-control-strings": "^1.0.0",
+        "has-unicode": "^2.0.0",
+        "object-assign": "^4.1.0",
+        "signal-exit": "^3.0.0",
+        "string-width": "^1.0.1",
+        "strip-ansi": "^3.0.1",
+        "wide-align": "^1.1.0"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/is-fullwidth-code-point": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+      "integrity": "sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "number-is-nan": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/minipass": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz",
+      "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "safe-buffer": "^5.1.2",
+        "yallist": "^3.0.0"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/minizlib": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.3.3.tgz",
+      "integrity": "sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "minipass": "^2.9.0"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/nopt": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz",
+      "integrity": "sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "abbrev": "1",
+        "osenv": "^0.1.4"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/npmlog": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
+      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
+      "deprecated": "This package is no longer supported.",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "are-we-there-yet": "~1.1.2",
+        "console-control-strings": "~1.1.0",
+        "gauge": "~2.7.3",
+        "set-blocking": "~2.0.0"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/readable-stream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/node-pre-gyp/node_modules/rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/node-pre-gyp/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/string_decoder/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/node-pre-gyp/node_modules/string-width": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+      "integrity": "sha512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "code-point-at": "^1.0.0",
+        "is-fullwidth-code-point": "^1.0.0",
+        "strip-ansi": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/strip-ansi": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "ansi-regex": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/tar": {
+      "version": "4.4.19",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.19.tgz",
+      "integrity": "sha512-a20gEsvHnWe0ygBY8JbxoM4w3SJdhc7ZAuxkLqh+nvNQN2IOt0B5lLgM490X5Hl8FF0dl0tOf2ewFYAlIFgzVA==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "chownr": "^1.1.4",
+        "fs-minipass": "^1.2.7",
+        "minipass": "^2.9.0",
+        "minizlib": "^1.3.3",
+        "mkdirp": "^0.5.5",
+        "safe-buffer": "^5.2.1",
+        "yallist": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=4.5"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/nopt": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-9.0.0.tgz",
@@ -5586,6 +6057,35 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/npm-bundled": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.2.tgz",
+      "integrity": "sha512-x5DHup0SuyQcmL3s7Rx/YQ8sbw/Hzg0rj48eN0dV7hf5cmQq5PXIeioroH3raV1QC1yh3uTYuMThvEQF3iKgGQ==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "npm-normalize-package-bin": "^1.0.1"
+      }
+    },
+    "node_modules/npm-normalize-package-bin": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz",
+      "integrity": "sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/npm-packlist": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz",
+      "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "ignore-walk": "^3.0.1",
+        "npm-bundled": "^1.0.1",
+        "npm-normalize-package-bin": "^1.0.1"
+      }
+    },
     "node_modules/npmlog": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-6.0.2.tgz",
@@ -5615,6 +6115,26 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/number-is-nan": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+      "integrity": "sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
@@ -5707,6 +6227,38 @@
         "node": ">=8"
       }
     },
+    "node_modules/os-homedir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+      "integrity": "sha512-B5JU3cabzk8c67mRRd3ECmROafjYMXbuzlwtqdM8IbS8ktlTix8aFGb2bAGKrSRIlnfKwovGUUr72JUPyOb6kQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/os-tmpdir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/osenv": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+      "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
+      "deprecated": "This package is no longer supported.",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "os-homedir": "^1.0.0",
+        "os-tmpdir": "^1.0.0"
+      }
+    },
     "node_modules/p-cancelable": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-2.1.1.tgz",
@@ -6024,6 +6576,13 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/process-warning": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/process-warning/-/process-warning-5.0.0.tgz",
@@ -6413,7 +6972,6 @@
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.3.tgz",
       "integrity": "sha512-yqYn1JhPczigF94DMS+shiDMjDowYO6y9+wB/4WgO0Y19jWYk0lQ4tuG5KI7kj4FTp1wxPj5IFfcrz/s1c3jjQ==",
-      "dev": true,
       "license": "BlueOak-1.0.0"
     },
     "node_modules/secure-json-parse": {
@@ -7918,6 +8476,28 @@
         }
       }
     },
+    "node_modules/xml2js": {
+      "version": "0.4.23",
+      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
+      "integrity": "sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==",
+      "license": "MIT",
+      "dependencies": {
+        "sax": ">=0.6.0",
+        "xmlbuilder": "~11.0.0"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/xml2js/node_modules/xmlbuilder": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
+      "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/xmlbuilder": {
       "version": "15.1.1",
       "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-15.1.1.tgz",
@@ -8051,6 +8631,20 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zipfile": {
+      "version": "0.5.12",
+      "resolved": "https://registry.npmjs.org/zipfile/-/zipfile-0.5.12.tgz",
+      "integrity": "sha512-zA60gW+XgQBu/Q4qV3BCXNIDRald6Xi5UOPj3jWGlnkjmBHaKDwIz7kyXWV3kq7VEsQN/2t/IWjdXdKeVNm6Eg==",
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "nan": "~2.10.0",
+        "node-pre-gyp": "~0.10.2"
+      },
+      "bin": {
+        "unzip.js": "bin/unzip.js"
+      }
     }
   }
 }

desktop/package.json

@@ -14,12 +14,15 @@
   "dependencies": {
     "@fastify/static": "^8.3.0",
     "@xhayper/discord-rpc": "^1.3.0",
+    "adm-zip": "^0.5.16",
     "bcryptjs": "^3.0.3",
     "bindings": "^1.5.0",
     "cheerio": "^1.1.2",
     "dotenv": "^17.2.3",
     "electron-log": "^5.4.3",
+    "epub": "^1.3.0",
     "fastify": "^5.6.2",
+    "js-yaml": "^4.1.1",
     "jsonwebtoken": "^9.0.3",
     "node-addon-api": "^8.5.0",
     "node-cron": "^4.2.1",
@@ -27,6 +30,7 @@
     "sqlite3": "^5.1.7"
   },
   "devDependencies": {
+    "@types/adm-zip": "^0.5.7",
     "@types/bcrypt": "^6.0.0",
     "@types/jsonwebtoken": "^9.0.10",
     "@types/node": "^24.0.0",

desktop/server.js

@@ -8,6 +8,7 @@ const cron = require("node-cron");
 const { initHeadless } = require("./electron/shared/headless");
 const { initDatabase } = require("./electron/shared/database");
 const { loadExtensions } = require("./electron/shared/extensions");
+const { ensureConfigFile } = require("./electron/shared/config");
 const { init } = require("./electron/api/rpc/rpc.controller");
 const {refreshTrendingAnime, refreshTopAiringAnime} = require("./electron/api/anime/anime.service");
 const {refreshPopularBooks, refreshTrendingBooks} = require("./electron/api/books/books.service");
@@ -29,6 +30,8 @@ const rpcRoutes = require("./electron/api/rpc/rpc.routes");
 const userRoutes = require("./electron/api/user/user.routes");
 const listRoutes = require("./electron/api/list/list.routes");
 const anilistRoute = require("./electron/api/anilist/anilist");
+const localRoutes = require("./electron/api/local/local.routes");
+const configRoutes = require("./electron/api/config/config.routes");
 
 fastify.addHook("preHandler", async (request) => {
   const auth = request.headers.authorization;
@@ -70,15 +73,19 @@ fastify.register(rpcRoutes, { prefix: "/api" });
 fastify.register(userRoutes, { prefix: "/api" });
 fastify.register(anilistRoute, { prefix: "/api" });
 fastify.register(listRoutes, { prefix: "/api" });
+fastify.register(localRoutes, { prefix: "/api" });
+fastify.register(configRoutes, { prefix: "/api" });
 
 const sleep = ms => new Promise(r => setTimeout(r, ms));
 
 const start = async () => {
   try {
+    ensureConfigFile()
     initDatabase("anilist");
     initDatabase("favorites");
     initDatabase("cache");
     initDatabase("userdata");
+    initDatabase("local_library");
     init();
 
     const refreshAll = async () => {

desktop/src/api/config/config.controller.ts

@@ -0,0 +1,43 @@
+import {FastifyReply, FastifyRequest} from 'fastify';
+import {getConfig, setConfig} from '../../shared/config';
+
+export async function getFullConfig(req: FastifyRequest, reply: FastifyReply) {
+    try {
+        return getConfig();
+    } catch (err) {
+        return { error: "Error loading config" };
+    }
+}
+
+export async function getConfigSection(req: FastifyRequest<{ Params: { section: string } }>, reply: FastifyReply) {
+    try {
+        const { section } = req.params;
+        const config = getConfig();
+
+        if (config[section] === undefined) {
+            return { error: "Section not found" };
+        }
+
+        return { [section]: config[section] };
+    } catch (err) {
+        return { error: "Error loading config section" };
+    }
+}
+
+export async function updateConfig(req: FastifyRequest<{ Body: any }>, reply: FastifyReply) {
+    try {
+        return setConfig(req.body);
+    } catch (err) {
+        return { error: "Error updating config" };
+    }
+}
+
+export async function updateConfigSection(req: FastifyRequest<{ Params: { section: string }, Body: any }>, reply: FastifyReply) {
+    try {
+        const { section } = req.params;
+        const updatedConfig = setConfig({ [section]: req.body });
+        return { [section]: updatedConfig[section] };
+    } catch (err) {
+        return { error: "Error updating config section" };
+    }
+}

desktop/src/api/config/config.routes.ts

@@ -0,0 +1,11 @@
+import { FastifyInstance } from 'fastify';
+import * as controller from './config.controller';
+
+async function configRoutes(fastify: FastifyInstance) {
+    fastify.get('/config', controller.getFullConfig);
+    fastify.get('/config/:section', controller.getConfigSection);
+    fastify.post('/config', controller.updateConfig);
+    fastify.post('/config/:section', controller.updateConfigSection);
+}
+
+export default configRoutes;

desktop/src/api/local/local.controller.ts

@@ -0,0 +1,185 @@
+import {FastifyReply, FastifyRequest} from 'fastify';
+import fs from 'fs';
+import * as service from './local.service';
+
+type ScanQuery = {
+    mode?: 'full' | 'incremental';
+};
+
+type Params = {
+    type: 'anime' | 'manga' | 'novels';
+    id?: string;
+};
+
+type MatchBody = {
+    source: 'anilist';
+    matched_id: number | null;
+};
+
+export async function scanLibrary(request: FastifyRequest<{ Querystring: ScanQuery }>, reply: FastifyReply) {
+    try {
+        const mode = request.query.mode || 'incremental';
+        return await service.performLibraryScan(mode);
+    } catch (err: any) {
+        if (err.message === 'NO_LIBRARY_CONFIGURED') {
+            return reply.status(400).send({ error: 'NO_LIBRARY_CONFIGURED' });
+        }
+        return reply.status(500).send({ error: 'FAILED_TO_SCAN_LIBRARY' });
+    }
+}
+
+export async function listEntries(request: FastifyRequest<{ Params: Params }>, reply: FastifyReply) {
+    try {
+        const { type } = request.params;
+        const entries = await service.getEntriesByType(type);
+        return entries;
+    } catch {
+        return reply.status(500).send({ error: 'FAILED_TO_LIST_ENTRIES' });
+    }
+}
+
+export async function getEntry(request: FastifyRequest<{ Params: Params }>, reply: FastifyReply) {
+    try {
+        const { type, id } = request.params as { type: string, id: string };
+        const entry = await service.getEntryDetails(type, id);
+
+        if (!entry) {
+            return reply.status(404).send({ error: 'ENTRY_NOT_FOUND' });
+        }
+
+        return entry;
+    } catch {
+        return reply.status(500).send({ error: 'FAILED_TO_GET_ENTRY' });
+    }
+}
+
+export async function streamUnit(request: FastifyRequest, reply: FastifyReply) {
+    const { id, unit } = request.params as any;
+
+    const fileInfo = await service.getFileForStreaming(id, unit);
+
+    if (!fileInfo) {
+        return reply.status(404).send({ error: 'FILE_NOT_FOUND' });
+    }
+
+    const { filePath, stat } = fileInfo;
+    const range = request.headers.range;
+
+    if (!range) {
+        reply
+            .header('Content-Length', stat.size)
+            .header('Content-Type', 'video/mp4');
+        return fs.createReadStream(filePath);
+    }
+
+    const parts = range.replace(/bytes=/, '').split('-');
+    const start = Number(parts[0]);
+    const end = parts[1] ? Number(parts[1]) : stat.size - 1;
+
+    if (
+        Number.isNaN(start) ||
+        Number.isNaN(end) ||
+        start < 0 ||
+        start >= stat.size ||
+        end < start ||
+        end >= stat.size
+    ) {
+        return reply.status(416).send({ error: 'INVALID_RANGE' });
+    }
+
+    const contentLength = end - start + 1;
+
+    reply
+        .status(206)
+        .header('Content-Range', `bytes ${start}-${end}/${stat.size}`)
+        .header('Accept-Ranges', 'bytes')
+        .header('Content-Length', contentLength)
+        .header('Content-Type', 'video/mp4');
+
+    return fs.createReadStream(filePath, { start, end });
+}
+
+export async function matchEntry(
+    request: FastifyRequest<{ Body: MatchBody }>,
+    reply: FastifyReply
+) {
+    const { id, type } = request.params as any;
+    const { source, matched_id } = request.body;
+
+    const result = await service.updateEntryMatch(id, type, source, matched_id);
+
+    if (!result) {
+        return reply.status(404).send({ error: 'ENTRY_NOT_FOUND' });
+    }
+
+    return result;
+}
+
+export async function getUnits(request: FastifyRequest<{ Params: Params }>, reply: FastifyReply) {
+    try {
+        const { id } = request.params as { id: string };
+        const units = await service.getEntryUnits(id);
+
+        if (!units) {
+            return reply.status(404).send({ error: 'ENTRY_NOT_FOUND' });
+        }
+
+        return units;
+    } catch (err) {
+        console.error('Error getting units:', err);
+        return reply.status(500).send({ error: 'FAILED_TO_GET_UNITS' });
+    }
+}
+
+export async function getManifest(request: FastifyRequest, reply: FastifyReply) {
+    const { unitId } = request.params as any;
+
+    try {
+        const manifest = await service.getUnitManifest(unitId);
+
+        if (!manifest) {
+            return reply.status(404).send({ error: 'FILE_NOT_FOUND' });
+        }
+
+        return manifest;
+    } catch (err: any) {
+        if (err.message === 'UNSUPPORTED_FORMAT') {
+            return reply.status(400).send({ error: 'UNSUPPORTED_FORMAT' });
+        }
+        return reply.status(500).send({ error: 'FAILED_TO_GET_MANIFEST' });
+    }
+}
+
+export async function getPage(request: FastifyRequest, reply: FastifyReply) {
+    const { unitId, resId } = request.params as any;
+
+    const resource = await service.getUnitResource(unitId, resId);
+
+    if (!resource) {
+        return reply.status(404).send();
+    }
+
+    if (resource.type === 'image') {
+        if (resource.data) {
+            return reply
+                .header('Content-Type', 'image/jpeg')
+                .send(resource.data);
+        }
+
+        if (resource.path && resource.size) {
+            reply
+                .header('Content-Length', resource.size)
+                .header('Content-Type', 'image/jpeg');
+
+            return fs.createReadStream(resource.path);
+        }
+    }
+
+    if (resource.type === 'html') {
+        return reply
+            .header('Content-Type', 'text/html; charset=utf-8')
+            .send(resource.data);
+    }
+
+    return reply.status(400).send();
+}

desktop/src/api/local/local.routes.ts

@@ -0,0 +1,15 @@
+import { FastifyInstance } from 'fastify';
+import * as controller from './local.controller';
+
+async function localRoutes(fastify: FastifyInstance) {
+    fastify.post('/library/scan', controller.scanLibrary);
+    fastify.get('/library/:type', controller.listEntries);
+    fastify.get('/library/:type/:id', controller.getEntry);
+    fastify.get('/library/stream/:type/:id/:unit', controller.streamUnit);
+    fastify.post('/library/:type/:id/match', controller.matchEntry);
+    fastify.get('/library/:id/units', controller.getUnits);
+    fastify.get('/library/:unitId/manifest', controller.getManifest);
+    fastify.get('/library/:unitId/resource/:resId', controller.getPage);
+}
+
+export default localRoutes;

desktop/src/api/local/local.service.ts

@@ -0,0 +1,454 @@
+import { getConfig as loadConfig } from '../../shared/config.js';
+import { queryOne, queryAll, run } from '../../shared/database.js';
+import crypto from 'crypto';
+import fs from "fs";
+import { PathLike } from "node:fs";
+import path from "path";
+import { getAnimeById, searchAnimeLocal } from "../anime/anime.service";
+import { getBookById, searchBooksAniList } from "../books/books.service";
+import AdmZip from 'adm-zip';
+import EPub from 'epub';
+
+const MANGA_IMAGE_EXTS = ['.jpg', '.jpeg', '.png', '.webp'];
+const MANGA_ARCHIVES = ['.cbz', '.cbr', '.zip'];
+const NOVEL_EXTS = ['.epub', '.pdf', '.txt', '.md', '.docx', '.mobi'];
+
+export async function resolveEntryMetadata(entry: any, type: string) {
+    let metadata = null;
+    let matchedId = entry.matched_id;
+
+    if (!matchedId) {
+        const query = entry.folder_name;
+
+        const results = type === 'anime'
+            ? await searchAnimeLocal(query)
+            : await searchBooksAniList(query);
+
+        let picked = null;
+
+        if (type !== 'anime' && Array.isArray(results)) {
+            console.log(type);
+            if (entry.type === 'novels') {
+                picked = results.find(r => r.format === 'NOVEL');
+            } else if (entry.type === 'manga') {
+                picked = results.find(r => r.format !== 'NOVEL');
+            }
+        }
+
+        picked ??= results?.[0];
+
+        if (picked?.id) {
+            matchedId = picked.id;
+
+            await run(
+                `UPDATE local_entries
+                 SET matched_id = ?, matched_source = 'anilist'
+                 WHERE id = ?`,
+                [matchedId, entry.id],
+                'local_library'
+            );
+        }
+    }
+
+    if (matchedId) {
+        metadata = type === 'anime'
+            ? await getAnimeById(matchedId)
+            : await getBookById(matchedId);
+    }
+
+    return {
+        id: entry.id,
+        type: entry.type,
+        matched: !!matchedId,
+        metadata
+    };
+}
+
+export async function performLibraryScan(mode: 'full' | 'incremental' = 'incremental') {
+    const config = loadConfig();
+
+    if (!config.library) {
+        throw new Error('NO_LIBRARY_CONFIGURED');
+    }
+
+    if (mode === 'full') {
+        await run(`DELETE FROM local_files`, [], 'local_library');
+        await run(`DELETE FROM local_entries`, [], 'local_library');
+    }
+
+    for (const [type, basePath] of Object.entries(config.library)) {
+        if (!basePath || !fs.existsSync(<PathLike>basePath)) continue;
+
+        const dirs = fs.readdirSync(<string>basePath, { withFileTypes: true }).filter(d => d.isDirectory());
+
+        for (const dir of dirs) {
+            const fullPath = path.join(<string>basePath, dir.name);
+            const id = crypto.createHash('sha1').update(fullPath).digest('hex');
+            const now = Date.now();
+
+            const existing = await queryOne(`SELECT id FROM local_entries WHERE id = ?`, [id], 'local_library');
+
+            if (existing) {
+                await run(`UPDATE local_entries SET last_scan = ? WHERE id = ?`, [now, id], 'local_library');
+                await run(`DELETE FROM local_files WHERE entry_id = ?`, [id], 'local_library');
+            } else {
+                await run(
+                    `INSERT INTO local_entries (id, type, path, folder_name, last_scan) VALUES (?, ?, ?, ?, ?)`,
+                    [id, type, fullPath, dir.name, now],
+                    'local_library'
+                );
+            }
+
+            const files = fs.readdirSync(fullPath, { withFileTypes: true })
+                .filter(f =>
+                    f.isFile() ||
+                    (type === 'manga' && f.isDirectory())
+                )
+                .sort((a, b) => a.name.localeCompare(b.name));
+
+            let unit = 1;
+
+            for (const file of files) {
+                await run(
+                    `INSERT INTO local_files (id, entry_id, file_path, unit_number)
+                     VALUES (?, ?, ?, ?)`,
+                    [crypto.randomUUID(), id, path.join(fullPath, file.name), unit],
+                    'local_library'
+                );
+                unit++;
+            }
+        }
+    }
+
+    return { status: 'OK' };
+}
+
+export async function getEntriesByType(type: string) {
+    const entries = await queryAll(`SELECT * FROM local_entries WHERE type = ?`, [type], 'local_library');
+    return await Promise.all(entries.map((entry: any) => resolveEntryMetadata(entry, type)));
+}
+
+export async function getEntryDetails(type: string, id: string) {
+    const entry = await queryOne(
+        `SELECT * FROM local_entries WHERE matched_id = ? AND type = ?`,
+        [Number(id), type],
+        'local_library'
+    );
+
+    if (!entry) {
+        return null;
+    }
+
+    const [details, files] = await Promise.all([
+        resolveEntryMetadata(entry, type),
+        queryAll(
+            `SELECT id, file_path, unit_number FROM local_files WHERE entry_id = ? ORDER BY unit_number ASC`,
+            [id],
+            'local_library'
+        )
+    ]);
+
+    return { ...details, files };
+}
+
+export async function getFileForStreaming(id: string, unit: string) {
+    const file = await queryOne(
+        `SELECT file_path FROM local_files WHERE entry_id = ? AND unit_number = ?`,
+        [id, unit],
+        'local_library'
+    );
+
+    if (!file || !fs.existsSync(file.file_path)) {
+        return null;
+    }
+
+    return {
+        filePath: file.file_path,
+        stat: fs.statSync(file.file_path)
+    };
+}
+
+export async function updateEntryMatch(id: string, type: string, source: string, matchedId: number | null) {
+    const entry = await queryOne(
+        `SELECT id FROM local_entries WHERE id = ? AND type = ?`,
+        [id, type],
+        'local_library'
+    );
+
+    if (!entry) {
+        return null;
+    }
+
+    await run(
+        `UPDATE local_entries
+         SET matched_source = ?, matched_id = ?
+         WHERE id = ?`,
+        [source, matchedId, id],
+        'local_library'
+    );
+
+    return { status: 'OK', matched: !!matchedId };
+}
+
+function isImageFolder(folderPath: string): boolean {
+    if (!fs.existsSync(folderPath)) return false;
+    if (!fs.statSync(folderPath).isDirectory()) return false;
+
+    const files = fs.readdirSync(folderPath);
+    return files.some(f => MANGA_IMAGE_EXTS.includes(path.extname(f).toLowerCase()));
+}
+
+export async function getEntryUnits(id: string) {
+    const entry = await queryOne(
+        `SELECT id, type, matched_id FROM local_entries WHERE matched_id = ?`,
+        [Number(id)],
+        'local_library'
+    );
+
+    if (!entry) {
+        return null;
+    }
+
+    const files = await queryAll(
+        `SELECT id, file_path, unit_number FROM local_files 
+         WHERE entry_id = ? 
+         ORDER BY unit_number ASC`,
+        [entry.id],
+        'local_library'
+    );
+
+    const units = files
+        .map((file: any) => {
+            const fileExt = path.extname(file.file_path).toLowerCase();
+            const isDir = fs.existsSync(file.file_path) &&
+                fs.statSync(file.file_path).isDirectory();
+
+            if (entry.type === 'manga') {
+                if (MANGA_ARCHIVES.includes(fileExt)) {
+                    return {
+                        id: file.id,
+                        number: file.unit_number,
+                        name: path.basename(file.file_path),
+                        type: 'chapter',
+                        format: fileExt.replace('.', ''),
+                        path: file.file_path
+                    };
+                }
+
+                if (isDir && isImageFolder(file.file_path)) {
+                    return {
+                        id: file.id,
+                        number: file.unit_number,
+                        name: path.basename(file.file_path),
+                        type: 'chapter',
+                        format: 'folder',
+                        path: file.file_path
+                    };
+                }
+
+                return null;
+            }
+
+            if (entry.type === 'novels') {
+                if (NOVEL_EXTS.includes(fileExt)) {
+                    return {
+                        id: file.id,
+                        number: file.unit_number,
+                        name: path.basename(file.file_path),
+                        type: 'chapter',
+                        format: fileExt.replace('.', ''),
+                        path: file.file_path
+                    };
+                }
+
+                return null;
+            }
+
+            if (entry.type === 'anime') {
+                return {
+                    id: file.id,
+                    number: file.unit_number,
+                    name: path.basename(file.file_path),
+                    type: 'episode',
+                    format: fileExt.replace('.', ''),
+                    path: file.file_path
+                };
+            }
+
+            return null;
+        })
+        .filter(Boolean);
+
+    return {
+        entry_id: entry.id,
+        matched_id: entry.matched_id,
+        type: entry.type,
+        total: units.length,
+        units
+    };
+}
+
+export async function getUnitManifest(unitId: string) {
+    const file = await queryOne(
+        `SELECT file_path FROM local_files WHERE id = ?`,
+        [unitId],
+        'local_library'
+    );
+
+    if (!file || !fs.existsSync(file.file_path)) {
+        return null;
+    }
+
+    const ext = path.extname(file.file_path).toLowerCase();
+
+    if (['.cbz', '.cbr', '.zip'].includes(ext)) {
+        const zip = new AdmZip(file.file_path);
+
+        const pages = zip.getEntries()
+            .filter(e => !e.isDirectory && /\.(jpg|jpeg|png|webp)$/i.test(e.entryName))
+            .sort((a, b) => a.entryName.localeCompare(b.entryName, undefined, { numeric: true }))
+            .map((_, i) => ({
+                id: i,
+                url: `/api/library/${unitId}/resource/${i}`
+            }));
+
+        return {
+            type: 'manga',
+            format: 'archive',
+            pages
+        };
+    }
+
+    if (fs.statSync(file.file_path).isDirectory()) {
+        const pages = fs.readdirSync(file.file_path)
+            .filter(f => /\.(jpg|jpeg|png|webp)$/i.test(f))
+            .sort((a, b) => a.localeCompare(b, undefined, { numeric: true }))
+            .map((_, i) => ({
+                id: i,
+                url: `/api/library/${unitId}/resource/${i}`
+            }));
+
+        return {
+            type: 'manga',
+            format: 'folder',
+            pages
+        };
+    }
+
+    if (ext === '.epub') {
+        return {
+            type: 'ln',
+            format: 'epub',
+            url: `/api/library/${unitId}/resource/epub`
+        };
+    }
+
+    if (['.txt', '.md'].includes(ext)) {
+        return {
+            type: 'ln',
+            format: 'text',
+            url: `/api/library/${unitId}/resource/text`
+        };
+    }
+
+    if (ext === '.pdf') {
+        return {
+            type: 'ln',
+            format: 'pdf',
+            url: `/api/library/${unitId}/resource/pdf`
+        };
+    }
+
+    throw new Error('UNSUPPORTED_FORMAT');
+}
+
+export async function getUnitResource(unitId: string, resId: string) {
+    const file = await queryOne(
+        `SELECT file_path FROM local_files WHERE id = ?`,
+        [unitId],
+        'local_library'
+    );
+
+    if (!file) return null;
+
+    const ext = path.extname(file.file_path).toLowerCase();
+
+    if (['.cbz', '.zip', '.cbr'].includes(ext)) {
+        const zip = new AdmZip(file.file_path);
+        const images = zip.getEntries()
+            .filter(e => !e.isDirectory && /\.(jpg|jpeg|png|webp)$/i.test(e.entryName))
+            .sort((a, b) => a.entryName.localeCompare(b.entryName, undefined, { numeric: true }));
+
+        const entry = images[Number(resId)];
+        if (!entry) return null;
+
+        return {
+            type: 'image',
+            data: entry.getData()
+        };
+    }
+
+    if (fs.statSync(file.file_path).isDirectory()) {
+        const images = fs.readdirSync(file.file_path)
+            .filter(f => /\.(jpg|jpeg|png|webp)$/i.test(f))
+            .sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
+
+        const img = images[Number(resId)];
+        if (!img) return null;
+
+        const imgPath = path.join(file.file_path, img);
+        const stat = fs.statSync(imgPath);
+
+        return {
+            type: 'image',
+            path: imgPath,
+            size: stat.size
+        };
+    }
+
+    if (ext === '.epub') {
+        const html = await parseEpubToHtml(file.file_path);
+
+        return {
+            type: 'html',
+            data: html
+        };
+    }
+
+    if (['.txt', '.md'].includes(ext)) {
+        const text = fs.readFileSync(file.file_path, 'utf8');
+
+        return {
+            type: 'html',
+            data: `<div class="ln-content"><pre>${text}</pre></div>`
+        };
+    }
+
+    return null;
+}
+
+function parseEpubToHtml(filePath: string): Promise<string> {
+    return new Promise((resolve, reject) => {
+        const epub = new EPub(filePath);
+
+        epub.on('end', async () => {
+            let html = '';
+
+            for (const id of epub.flow.map(f => f.id)) {
+                const chapter = await new Promise<string>((res, rej) => {
+                    epub.getChapter(id, (err, text) => {
+                        if (err) rej(err);
+                        else res(text);
+                    });
+                });
+
+                html += `<section class="ln-chapter">${chapter}</section>`;
+            }
+
+            resolve(html);
+        });
+
+        epub.on('error', reject);
+        epub.parse();
+    });
+}

desktop/src/scripts/anime/anime.js

@@ -1,6 +1,7 @@
 let animeData = null;
 let extensionName = null;
 let animeId = null;
+let isLocal = false;
 
 const episodePagination = Object.create(PaginationManager);
 episodePagination.init(12, renderEpisodes);
@@ -13,6 +14,30 @@ document.addEventListener('DOMContentLoaded', () => {
     setupEpisodeSearch();
 });
 
+function markAsLocal() {
+    isLocal = true;
+    const pill = document.getElementById('local-pill');
+    if (!pill) return;
+
+    pill.textContent = 'Local';
+    pill.style.display = 'inline-flex';
+    pill.style.background = 'rgba(34,197,94,.2)';
+    pill.style.color = '#22c55e';
+    pill.style.borderColor = 'rgba(34,197,94,.3)';
+}
+
+async function checkLocalLibraryEntry() {
+    try {
+        const res = await fetch(`/api/library/anime/${animeId}`);
+        if (!res.ok) return;
+
+        markAsLocal();
+
+    } catch (e) {
+    }
+}
+
+
 async function loadAnime() {
     try {
 
@@ -24,6 +49,7 @@ async function loadAnime() {
 
         extensionName = urlData.extensionName;
         animeId = urlData.entityId;
+        await checkLocalLibraryEntry();
 
         const fetchUrl = extensionName
             ? `/api/anime/${animeId}?source=${extensionName}`
@@ -38,7 +64,7 @@ async function loadAnime() {
         }
 
         animeData = data;
-
+        animeData.entry_type = 'ANIME';
         const metadata = MediaMetadataUtils.formatAnimeData(data, !!extensionName);
 
         updatePageTitle(metadata.title);
@@ -142,8 +168,8 @@ function setupWatchButton() {
     const watchBtn = document.getElementById('watch-btn');
     if (watchBtn) {
         watchBtn.onclick = () => {
-            const url = URLUtils.buildWatchUrl(animeId, 1, extensionName);
-            window.location.href = url;
+            const source = isLocal ? 'local' : (extensionName || 'anilist');
+            window.location.href = URLUtils.buildWatchUrl(animeId, num, source);
         };
     }
 }
@@ -226,8 +252,8 @@ function createEpisodeButton(num, container) {
     btn.className = 'episode-btn';
     btn.innerText = `Ep ${num}`;
     btn.onclick = () => {
-        const url = URLUtils.buildWatchUrl(animeId, num, extensionName);
-        window.location.href = url;
+        const source = isLocal ? 'local' : (extensionName || 'anilist');
+        window.location.href = URLUtils.buildWatchUrl(animeId, num, source);
     };
     container.appendChild(btn);
 }

desktop/src/scripts/anime/animes.js

@@ -92,6 +92,7 @@ function startHeroCycle() {
 
 async function updateHeroUI(anime) {
     if(!anime) return;
+    anime.entry_type = 'ANIME';
 
     const title = anime.title.english || anime.title.romaji || "Unknown Title";
     const score = anime.averageScore ? anime.averageScore + '% Match' : 'N/A';

desktop/src/scripts/anime/player.js

@@ -18,12 +18,28 @@ const firstKey = params.keys().next().value;
 let extName;
 if (firstKey) extName = firstKey;
 
-const href = extName
+// URL de retroceso: Si es local, volvemos a la vista de Anilist normal
+const href = (extName && extName !== 'local')
     ? `/anime/${extName}/${animeId}`
     : `/anime/${animeId}`;
 
 document.getElementById('back-link').href = href;
 document.getElementById('episode-label').innerText = `Episode ${currentEpisode}`;
+
+
+let localEntryId = null;
+
+async function checkLocal() {
+    try {
+        const res = await fetch(`/api/library/anime/${animeId}`);
+        if (!res.ok) return null;
+        const data = await res.json();
+        return data.id;
+    } catch {
+        return null;
+    }
+}
+
 async function loadAniSkip(malId, episode, duration) {
     try {
         const res = await fetch(`https://api.aniskip.com/v2/skip-times/${malId}/${episode}?types[]=op&types[]=ed&episodeLength=${duration}`);
@@ -37,9 +53,10 @@ async function loadAniSkip(malId, episode, duration) {
 }
 
 async function loadMetadata() {
+    localEntryId = await checkLocal();
     try {
-        const extQuery = extName ? `?source=${extName}` : "?source=anilist";
-        const res = await fetch(`/api/anime/${animeId}${extQuery}`);
+        const sourceQuery = (extName === 'local' || !extName) ? "source=anilist" : `source=${extName}`;
+        const res = await fetch(`/api/anime/${animeId}?${sourceQuery}`);
         const data = await res.json();
 
         if (data.error) {
@@ -49,13 +66,7 @@ async function loadMetadata() {
 
         const isAnilistFormat = data.title && (data.title.romaji || data.title.english);
 
-        let title = '';
-        let description = '';
-        let coverImage = '';
-        let averageScore = '';
-        let format = '';
-        let seasonYear = '';
-        let season = '';
+        let title = '', description = '', coverImage = '', averageScore = '', format = '', seasonYear = '', season = '';
 
         if (isAnilistFormat) {
             title = data.title.romaji || data.title.english || data.title.native || 'Anime Title';
@@ -97,7 +108,8 @@ async function loadMetadata() {
         document.getElementById('detail-season').innerText = season && seasonYear ? `${season} ${seasonYear}` : (season || seasonYear || '--');
         document.getElementById('detail-cover-image').src = coverImage || '/default-cover.jpg';
 
-        if (extName) {
+        // Solo cargamos episodios de extensión si hay extensión real y no es local
+        if (extName && extName !== 'local') {
             await loadExtensionEpisodes();
         } else {
             if (data.nextAiringEpisode?.episode) {
@@ -109,12 +121,7 @@ async function loadMetadata() {
             }
             const simpleEpisodes = [];
             for (let i = 1; i <= totalEpisodes; i++) {
-                simpleEpisodes.push({
-                    number: i,
-                    title: null,
-                    thumbnail: null,
-                    isDub: false
-                });
+                simpleEpisodes.push({ number: i, title: null, thumbnail: null, isDub: false });
             }
             populateEpisodeCarousel(simpleEpisodes);
         }
@@ -126,75 +133,34 @@ async function loadMetadata() {
     } catch (error) {
         console.error('Error loading metadata:', error);
     }
+    await loadExtensions();
 }
 
 async function applyAniSkip(video) {
-    if (!isAnilist || !malId) {
-        console.log('AniSkip disabled: isAnilist=' + isAnilist + ', malId=' + malId);
-        return;
-    }
+    if (!isAnilist || !malId) return;
 
-    console.log('Loading AniSkip for MAL ID:', malId, 'Episode:', currentEpisode);
+    aniSkipData = await loadAniSkip(malId, currentEpisode, Math.floor(video.duration));
 
-    aniSkipData = await loadAniSkip(
-        malId,
-        currentEpisode,
-        Math.floor(video.duration)
-    );
+    if (!aniSkipData || aniSkipData.length === 0) return;
 
-    console.log('AniSkip data received:', aniSkipData);
-
-    if (!aniSkipData || aniSkipData.length === 0) {
-        console.log('No AniSkip data available');
-        return;
-    }
-
-    let op, ed;
     const markers = [];
-
     aniSkipData.forEach(item => {
         const { startTime, endTime } = item.interval;
-
-        if (item.skipType === 'op') {
-            op = { start: startTime, end: endTime };
         markers.push({
             start: startTime,
             end: endTime,
-                label: 'Opening'
+            label: item.skipType === 'op' ? 'Opening' : 'Ending'
+        });
     });
 
-            console.log('Opening found:', startTime, '-', endTime);
-        }
-
-        if (item.skipType === 'ed') {
-            ed = { start: startTime, end: endTime };
-            markers.push({
-                start: startTime,
-                end: endTime,
-                label: 'Ending'
-            });
-
-            console.log('Ending found:', startTime, '-', endTime);
-        }
-    });
-
-    // Crear markers visuales en el DOM
     if (plyrInstance && markers.length > 0) {
-        console.log('Creating visual markers:', markers);
-
-        // Esperar a que el player esté completamente cargado
         setTimeout(() => {
             const progressContainer = document.querySelector('.plyr__progress');
-            if (!progressContainer) {
-                console.error('Progress container not found');
-                return;
-            }
+            if (!progressContainer) return;
 
-            // Eliminar markers anteriores si existen
             const oldMarkers = progressContainer.querySelector('.plyr__markers');
             if (oldMarkers) oldMarkers.remove();
 
-            // Crear contenedor de markers
             const markersContainer = document.createElement('div');
             markersContainer.className = 'plyr__markers';
 
@@ -216,35 +182,19 @@ async function applyAniSkip(video) {
 
                 markersContainer.appendChild(markerElement);
             });
-
-
             progressContainer.appendChild(markersContainer);
-            console.log('Visual markers created successfully');
         }, 500);
     }
 }
 
 async function loadExtensionEpisodes() {
     try {
-        const extQuery = extName ? `?source=${extName}` : "?source=anilist";
-        const res = await fetch(`/api/anime/${animeId}/episodes${extQuery}`);
+        const res = await fetch(`/api/anime/${animeId}/episodes?source=${extName}`);
         const data = await res.json();
-
         totalEpisodes = Array.isArray(data) ? data.length : 0;
-
-        if (Array.isArray(data) && data.length > 0) {
-            populateEpisodeCarousel(data);
-        } else {
-
-            const fallback = [];
-            for (let i = 1; i <= totalEpisodes; i++) {
-                fallback.push({ number: i, title: null, thumbnail: null });
-            }
-            populateEpisodeCarousel(fallback);
-        }
+        populateEpisodeCarousel(Array.isArray(data) ? data : []);
     } catch (e) {
-        console.error("Error cargando episodios por extensión:", e);
-        totalEpisodes = 0;
+        console.error("Error cargando episodios:", e);
     }
 }
 
@@ -256,15 +206,12 @@ function populateEpisodeCarousel(episodesData) {
         const epNumber = ep.number || ep.episodeNumber || ep.id || (index + 1);
         if (!epNumber) return;
 
-        const extParam = extName ? `?${extName}` : "";
+        const extParam = (extName && extName !== 'local') ? `?${extName}` : "";
         const hasThumbnail = ep.thumbnail && ep.thumbnail.trim() !== '';
 
         const link = document.createElement('a');
         link.href = `/watch/${animeId}/${epNumber}${extParam}`;
         link.classList.add('carousel-item');
-        link.dataset.episode = epNumber;
-
-        if (!hasThumbnail) link.classList.add('no-thumbnail');
         if (parseInt(epNumber) === currentEpisode) link.classList.add('active-ep-carousel');
 
         const imgContainer = document.createElement('div');
@@ -272,21 +219,15 @@ function populateEpisodeCarousel(episodesData) {
 
         if (hasThumbnail) {
             const img = document.createElement('img');
-            img.classList.add('carousel-item-img');
             img.src = ep.thumbnail;
-            img.alt = `Episode ${epNumber} Thumbnail`;
+            img.classList.add('carousel-item-img');
             imgContainer.appendChild(img);
         }
 
         link.appendChild(imgContainer);
-
         const info = document.createElement('div');
         info.classList.add('carousel-item-info');
-
-        const title = document.createElement('p');
-        title.innerText = `Ep ${epNumber}: ${ep.title || 'Untitled'}`;
-
-        info.appendChild(title);
+        info.innerHTML = `<p>Ep ${epNumber}: ${ep.title || 'Untitled'}</p>`;
         link.appendChild(info);
         carousel.appendChild(link);
     });
@@ -297,28 +238,27 @@ async function loadExtensions() {
         const res = await fetch('/api/extensions/anime');
         const data = await res.json();
         const select = document.getElementById('extension-select');
+        let extensions = data.extensions || [];
+
+        if (extName === 'local' && !extensions.includes('local')) {
+            extensions.push('local');
+        }
 
-        if (data.extensions && data.extensions.length > 0) {
         select.innerHTML = '';
-            data.extensions.forEach(ext => {
+        extensions.forEach(ext => {
             const opt = document.createElement('option');
             opt.value = opt.innerText = ext;
             select.appendChild(opt);
         });
 
-            if (typeof extName === 'string' && data.extensions.includes(extName)) {
+        if (extName && extensions.includes(extName)) {
             select.value = extName;
-            } else {
-                select.selectedIndex = 0;
+        } else if (extensions.length > 0) {
+            select.value = extensions[0];
         }
 
         currentExtension = select.value;
         onExtensionChange();
-        } else {
-            select.innerHTML = '<option>No Extensions</option>';
-            select.disabled = true;
-            setLoading("No anime extensions found.");
-        }
     } catch (error) {
         console.error("Extension Error:", error);
     }
@@ -327,83 +267,70 @@ async function loadExtensions() {
 async function onExtensionChange() {
     const select = document.getElementById('extension-select');
     currentExtension = select.value;
-    setLoading("Fetching extension settings...");
 
+    if (currentExtension === 'local') {
+        document.getElementById('sd-toggle').style.display = 'none';
+        document.getElementById('server-select').style.display = 'none';
+        loadStream();
+        return;
+    }
+
+    setLoading("Fetching extension settings...");
     try {
         const res = await fetch(`/api/extensions/${currentExtension}/settings`);
         const settings = await res.json();
 
         const toggle = document.getElementById('sd-toggle');
-        if (settings.supportsDub) {
-            toggle.style.display = 'flex';
+        toggle.style.display = settings.supportsDub ? 'flex' : 'none';
         setAudioMode('sub');
-        } else {
-            toggle.style.display = 'none';
-            setAudioMode('sub');
-        }
 
         const serverSelect = document.getElementById('server-select');
         serverSelect.innerHTML = '';
-        if (settings.episodeServers && settings.episodeServers.length > 0) {
+        if (settings.episodeServers?.length > 0) {
             settings.episodeServers.forEach(srv => {
                 const opt = document.createElement('option');
-                opt.value = srv;
-                opt.innerText = srv;
+                opt.value = opt.innerText = srv;
                 serverSelect.appendChild(opt);
             });
             serverSelect.style.display = 'block';
         } else {
             serverSelect.style.display = 'none';
         }
-
         loadStream();
     } catch (error) {
-        console.error(error);
-        setLoading("Failed to load extension settings.");
+        setLoading("Failed to load settings.");
     }
 }
 
-function toggleAudioMode() {
-    const newMode = audioMode === 'sub' ? 'dub' : 'sub';
-    setAudioMode(newMode);
-    loadStream();
-}
-
-function setAudioMode(mode) {
-    audioMode = mode;
-    const toggle = document.getElementById('sd-toggle');
-    const subOpt = document.getElementById('opt-sub');
-    const dubOpt = document.getElementById('opt-dub');
-
-    toggle.setAttribute('data-state', mode);
-    subOpt.classList.toggle('active', mode === 'sub');
-    dubOpt.classList.toggle('active', mode === 'dub');
-}
-
 async function loadStream() {
     if (!currentExtension) return;
 
+    if (currentExtension === 'local') {
+        console.log(localEntryId);
+        if (!localEntryId) {
+            setLoading("No existe en local");
+            return;
+        }
+
+        const localUrl = `/api/library/stream/anime/${localEntryId}/${currentEpisode}`;
+        playVideo(localUrl, []);
+        document.getElementById('loading-overlay').style.display = 'none';
+        return;
+    }
+
+
     const serverSelect = document.getElementById('server-select');
     const server = serverSelect.value || "default";
-
     setLoading(`Loading stream (${audioMode})...`);
 
     try {
-        let sourc = "&source=anilist";
-        if (extName){
-            sourc = `&source=${extName}`;
-        }
+        const sourc = (extName && extName !== 'local') ? `&source=${extName}` : "&source=anilist";
         const url = `/api/watch/stream?animeId=${animeId}&episode=${currentEpisode}&server=${server}&category=${audioMode}&ext=${currentExtension}${sourc}`;
         const res = await fetch(url);
         const data = await res.json();
 
-        if (data.error) {
-            setLoading(`Error: ${data.error}`);
-            return;
-        }
-
-        if (!data.videoSources || data.videoSources.length === 0) {
-            setLoading("No video sources found.");
+        if (data.error || !data.videoSources?.length) {
+            setLoading(data.error || "No video sources.");
             return;
         }
 
@@ -415,34 +342,31 @@ async function loadStream() {
         if (headers['Origin']) proxyUrl += `&origin=${encodeURIComponent(headers['Origin'])}`;
         if (headers['User-Agent']) proxyUrl += `&userAgent=${encodeURIComponent(headers['User-Agent'])}`;
 
-        playVideo(proxyUrl, data.videoSources[0].subtitles || data.subtitles);
+        playVideo(proxyUrl, source.subtitles || data.subtitles || []);
         document.getElementById('loading-overlay').style.display = 'none';
     } catch (error) {
-        setLoading("Stream error. Check console.");
-        console.error(error);
+        setLoading("Stream error.");
     }
 }
 
 function playVideo(url, subtitles = []) {
     const video = document.getElementById('player');
+    const isLocal = url.includes('/api/library/stream/');
 
-    if (Hls.isSupported()) {
+    if (!isLocal && Hls.isSupported()) {
         if (hlsInstance) hlsInstance.destroy();
         hlsInstance = new Hls({ xhrSetup: (xhr) => xhr.withCredentials = false });
         hlsInstance.loadSource(url);
         hlsInstance.attachMedia(video);
-    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+    } else {
+        if (hlsInstance) hlsInstance.destroy();
         video.src = url;
     }
 
     if (plyrInstance) plyrInstance.destroy();
-
-    while (video.textTracks.length > 0) {
-        video.removeChild(video.textTracks[0]);
-    }
+    while (video.textTracks.length > 0) video.removeChild(video.textTracks[0]);
 
     subtitles.forEach(sub => {
-        if (!sub.url) return;
         const track = document.createElement('track');
         track.kind = 'captions';
         track.label = sub.language || 'Unknown';
@@ -455,59 +379,34 @@ function playVideo(url, subtitles = []) {
     plyrInstance = new Plyr(video, {
         captions: { active: true, update: true, language: 'en' },
         controls: ['play-large', 'play', 'progress', 'current-time', 'duration', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'],
-        settings: ['captions', 'quality', 'speed'],
-        markers: {
-            enabled: true,
-            points: []
-        }
+        settings: ['captions', 'quality', 'speed']
     });
 
-    video.addEventListener('loadedmetadata', () => {
-        applyAniSkip(video);
-    });
+    video.addEventListener('loadedmetadata', () => applyAniSkip(video));
 
+    // LÓGICA DE RPC (Discord)
     let rpcActive = false;
-    let lastSeek = 0;
-
     video.addEventListener("play", () => {
         if (!video.duration) return;
-
         const elapsed = Math.floor(video.currentTime);
         const start = Math.floor(Date.now() / 1000) - elapsed;
         const end = start + Math.floor(video.duration);
-
-        sendRPC({
-            startTimestamp: start,
-            endTimestamp: end
-        });
-
+        sendRPC({ startTimestamp: start, endTimestamp: end });
         rpcActive = true;
     });
 
     video.addEventListener("pause", () => {
-        if (!rpcActive) return;
-
-        sendRPC({
-            paused: true
-        });
-    });
-
-    video.addEventListener("seeking", () => {
-        lastSeek = video.currentTime;
+        if (rpcActive) sendRPC({ paused: true });
     });
 
     video.addEventListener("seeked", () => {
         if (video.paused || !rpcActive) return;
-
         const elapsed = Math.floor(video.currentTime);
         const start = Math.floor(Date.now() / 1000) - elapsed;
         const end = start + Math.floor(video.duration);
-
-        sendRPC({
-            startTimestamp: start,
-            endTimestamp: end
-        });
+        sendRPC({ startTimestamp: start, endTimestamp: end });
     });
+}
 
 function sendRPC({ startTimestamp, endTimestamp, paused = false } = {}) {
     fetch("/api/rpc", {
@@ -523,50 +422,18 @@ function playVideo(url, subtitles = []) {
         })
     });
 }
-}
-
-function setLoading(message) {
-    const overlay = document.getElementById('loading-overlay');
-    const text = document.getElementById('loading-text');
-    overlay.style.display = 'flex';
-    text.innerText = message;
-}
-
-const extParam = extName ? `?${extName}` : "";
-
-document.getElementById('prev-btn').onclick = () => {
-    if (currentEpisode > 1) {
-        window.location.href = `/watch/${animeId}/${currentEpisode - 1}${extParam}`;
-    }
-};
-
-document.getElementById('next-btn').onclick = () => {
-    if (currentEpisode < totalEpisodes || totalEpisodes === 0) {
-        window.location.href = `/watch/${animeId}/${currentEpisode + 1}${extParam}`;
-    }
-};
-
-if (currentEpisode <= 1) {
-    document.getElementById('prev-btn').disabled = true;
-}
-
 
 async function sendProgress() {
     const token = localStorage.getItem('token');
     if (!token) return;
-
-    const source = extName
-        ? extName
-        : "anilist";
+    const source = (extName && extName !== 'local') ? extName : "anilist";
 
     const body = {
         entry_id: animeId,
         source: source,
         entry_type: "ANIME",
         status: 'CURRENT',
-        progress: source === 'anilist'
-            ? Math.floor(currentEpisode)
-            : currentEpisode
+        progress: currentEpisode
     };
 
     try {
@@ -583,7 +450,38 @@ async function sendProgress() {
     }
 }
 
+// Botones y Toggle
+document.getElementById('sd-toggle').onclick = () => {
+    audioMode = audioMode === 'sub' ? 'dub' : 'sub';
+    setAudioMode(audioMode);
+    loadStream();
+};
+
+function setAudioMode(mode) {
+    const toggle = document.getElementById('sd-toggle');
+    toggle.setAttribute('data-state', mode);
+    document.getElementById('opt-sub').classList.toggle('active', mode === 'sub');
+    document.getElementById('opt-dub').classList.toggle('active', mode === 'dub');
+}
+
+function setLoading(message) {
+    document.getElementById('loading-text').innerText = message;
+    document.getElementById('loading-overlay').style.display = 'flex';
+}
+
+const extParam = (extName && extName !== 'local') ? `?${extName}` : "";
+document.getElementById('prev-btn').onclick = () => {
+    if (currentEpisode > 1) window.location.href = `/watch/${animeId}/${currentEpisode - 1}${extParam}`;
+};
+document.getElementById('next-btn').onclick = () => {
+    if (currentEpisode < totalEpisodes || totalEpisodes === 0) window.location.href = `/watch/${animeId}/${currentEpisode + 1}${extParam}`;
+};
+
+if (currentEpisode <= 1) document.getElementById('prev-btn').disabled = true;
+
+// Actualizar progreso cada 1 minuto si el video está reproduciéndose
+setInterval(() => {
+    if (plyrInstance && !plyrInstance.paused) sendProgress();
+}, 60000);
 
 loadMetadata();
-loadExtensions();
-

desktop/src/scripts/auth-guard.js

@@ -43,6 +43,43 @@ async function loadMeUI() {
     }
 }
 
+// Variable para saber si el modal ya fue cargado
+let settingsModalLoaded = false;
+
+document.getElementById('nav-settings').addEventListener('click', openSettings)
+
+async function openSettings() {
+    if (!settingsModalLoaded) {
+        try {
+            const res = await fetch('/views/components/settings-modal.html')
+            const html = await res.text()
+            document.body.insertAdjacentHTML('beforeend', html)
+            settingsModalLoaded = true;
+
+            // Esperar un momento para que el DOM se actualice
+            await new Promise(resolve => setTimeout(resolve, 50));
+
+            // Ahora cargar los settings
+            if (window.toggleSettingsModal) {
+                await window.toggleSettingsModal(false);
+            }
+        } catch (err) {
+            console.error('Error loading settings modal:', err);
+        }
+    } else {
+        if (window.toggleSettingsModal) {
+            await window.toggleSettingsModal(false);
+        }
+    }
+}
+
+function closeSettings() {
+    const modal = document.getElementById('settings-modal');
+    if (modal) {
+        modal.classList.add('hidden');
+    }
+}
+
 function setupDropdown() {
     const userAvatarBtn = document.querySelector(".user-avatar-btn")
     const navDropdown = document.getElementById("nav-dropdown")

desktop/src/scripts/books/book.js

@@ -7,7 +7,7 @@ let allChapters = [];
 let filteredChapters = [];
 
 let availableExtensions = [];
-
+let isLocal = false;
 const chapterPagination = Object.create(PaginationManager);
 chapterPagination.init(12, () => renderChapterTable());
 
@@ -16,6 +16,31 @@ document.addEventListener('DOMContentLoaded', () => {
     setupModalClickOutside();
 });
 
+async function checkLocalLibraryEntry() {
+    try {
+        const libraryType =
+            bookData?.entry_type === 'NOVEL' ? 'novels' : 'manga';
+
+        const res = await fetch(`/api/library/${libraryType}/${bookId}`);
+        if (!res.ok) return;
+
+        const data = await res.json();
+        if (data.matched) {
+            isLocal = true;
+            const pill = document.getElementById('local-pill');
+            if (pill) {
+                pill.textContent = 'Local';
+                pill.style.display = 'inline-flex';
+                pill.style.background = 'rgba(34, 197, 94, 0.2)';
+                pill.style.color = '#22c55e';
+                pill.style.borderColor = 'rgba(34, 197, 94, 0.3)';
+            }
+        }
+    } catch (e) {
+        console.error("Error checking local status:", e);
+    }
+}
+
 async function init() {
     try {
         const urlData = URLUtils.parseEntityPath('book');
@@ -27,8 +52,8 @@ async function init() {
         extensionName = urlData.extensionName;
         bookId = urlData.entityId;
         bookSlug = urlData.slug;
-
         await loadBookMetadata();
+        await checkLocalLibraryEntry();
 
         await loadAvailableExtensions();
         await loadChapters();
@@ -69,7 +94,8 @@ async function loadBookMetadata() {
     bookData = raw;
 
     const metadata = MediaMetadataUtils.formatBookData(raw, !!extensionName);
-
+    bookData.entry_type =
+        metadata.format === 'MANGA' ? 'MANGA' : 'NOVEL';
     updatePageTitle(metadata.title);
     updateMetadata(metadata);
     updateExtensionPill();
@@ -172,32 +198,46 @@ async function loadChapters(targetProvider = null) {
     const tbody = document.getElementById('chapters-body');
     if (!tbody) return;
 
-    // Si no se pasa provider, intentamos pillar el del select o el primero disponible
     if (!targetProvider) {
         const select = document.getElementById('provider-filter');
         targetProvider = select ? select.value : (availableExtensions[0] || 'all');
     }
 
-    tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">Searching extension for chapters...</td></tr>';
+    tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">Loading chapters...</td></tr>';
 
     try {
+        let fetchUrl;
+        let isLocalRequest = targetProvider === 'local';
+
+        if (isLocalRequest) {
+            // Nuevo endpoint para archivos locales
+            fetchUrl = `/api/library/${bookId}/units`;
+        } else {
             const source = extensionName || 'anilist';
-        // Añadimos el query param 'provider' para que el backend filtre
-        let fetchUrl = `/api/book/${bookId}/chapters?source=${source}`;
-        if (targetProvider !== 'all') {
-            fetchUrl += `&provider=${targetProvider}`;
+            fetchUrl = `/api/book/${bookId}/chapters?source=${source}`;
+            if (targetProvider !== 'all') fetchUrl += `&provider=${targetProvider}`;
         }
 
         const res = await fetch(fetchUrl);
         const data = await res.json();
 
+        // Mapeo de datos: Si es local usamos 'units', si no, usamos 'chapters'
+        if (isLocalRequest) {
+            allChapters = (data.units || []).map((unit, idx) => ({
+                number: unit.number,
+                title: unit.name,
+                provider: 'local',
+                index: idx,           // ✅ índice (0,1,2…)
+                format: unit.format
+            }));
+        } else {
             allChapters = data.chapters || [];
-        filteredChapters = [...allChapters];
+        }
 
+        filteredChapters = [...allChapters];
         applyChapterFilter();
 
         const totalEl = document.getElementById('total-chapters');
-
         if (allChapters.length === 0) {
             tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">No chapters found.</td></tr>';
             if (totalEl) totalEl.innerText = "0 Found";
@@ -207,7 +247,6 @@ async function loadChapters(targetProvider = null) {
         if (totalEl) totalEl.innerText = `${allChapters.length} Found`;
 
         setupReadButton();
-
         chapterPagination.setTotalItems(filteredChapters.length);
         chapterPagination.reset();
         renderChapterTable();
@@ -234,16 +273,26 @@ function applyChapterFilter() {
 
 function setupProviderFilter() {
     const select = document.getElementById('provider-filter');
-    if (!select || availableExtensions.length === 0) return;
+    if (!select) return;
 
     select.style.display = 'inline-block';
     select.innerHTML = '';
 
+    // Opción para cargar todo
     const allOpt = document.createElement('option');
     allOpt.value = 'all';
     allOpt.innerText = 'Load All (Slower)';
     select.appendChild(allOpt);
 
+    // NUEVO: Si es local, añadimos la opción 'local' al principio
+    if (isLocal) {
+        const localOpt = document.createElement('option');
+        localOpt.value = 'local';
+        localOpt.innerText = 'Local';
+        select.appendChild(localOpt);
+    }
+
+    // Añadir extensiones normales
     availableExtensions.forEach(ext => {
         const opt = document.createElement('option');
         opt.value = ext;
@@ -251,7 +300,10 @@ function setupProviderFilter() {
         select.appendChild(opt);
     });
 
-    if (extensionName && availableExtensions.includes(extensionName)) {
+    // Lógica de selección automática
+    if (isLocal) {
+        select.value = 'local'; // Prioridad si es local
+    } else if (extensionName && availableExtensions.includes(extensionName)) {
         select.value = extensionName;
     } else if (availableExtensions.length > 0) {
         select.value = availableExtensions[0];
@@ -313,7 +365,14 @@ function renderChapterTable() {
 }
 
 function openReader(chapterId, provider) {
-    window.location.href = URLUtils.buildReadUrl(bookId, chapterId, provider, extensionName);
+    const effectiveExtension = extensionName || 'anilist';
+
+    window.location.href = URLUtils.buildReadUrl(
+        bookId,          // SIEMPRE anilist
+        chapterId,       // número normal
+        provider,        // 'local' o extensión
+        extensionName || 'anilist'
+    );
 }
 
 function setupModalClickOutside() {

desktop/src/scripts/books/books.js

@@ -55,7 +55,8 @@ function startHeroCycle() {
 
 async function updateHeroUI(book) {
     if(!book) return;
-
+    book.entry_type =
+        book.format === 'MANGA' ? 'MANGA' : 'NOVEL';
     const title = book.title.english || book.title.romaji;
     const desc = book.description || "No description available.";
     const poster = (book.coverImage && (book.coverImage.extraLarge || book.coverImage.large)) || '';

desktop/src/scripts/books/reader.js

@@ -129,11 +129,54 @@ async function loadChapter() {
     if (!source) {
         source = 'anilist';
     }
-    const newEndpoint = `/api/book/${bookId}/${chapter}/${provider}?source=${source}`;
+    let newEndpoint;
+
+    if (provider === 'local') {
+        newEndpoint = `/api/library/${bookId}/units`;
+    } else {
+        newEndpoint = `/api/book/${bookId}/${chapter}/${provider}?source=${source}`;
+    }
 
     try {
         const res = await fetch(newEndpoint);
         const data = await res.json();
+        if (provider === 'local') {
+            const unit = data.units[Number(chapter)];
+            if (!unit) return;
+
+            chapterLabel.textContent = unit.name;
+            document.title = unit.name;
+
+            const manifestRes = await fetch(`/api/library/${unit.id}/manifest`);
+            const manifest = await manifestRes.json();
+
+            reader.innerHTML = '';
+
+            // ===== MANGA =====
+            if (manifest.type === 'manga') {
+                currentType = 'manga';
+                updateSettingsVisibility();
+                applyStyles();
+
+                currentPages = manifest.pages;
+                loadManga(currentPages);
+                return;
+            }
+
+            // ===== LN =====
+            if (manifest.type === 'ln') {
+                currentType = 'ln';
+                updateSettingsVisibility();
+                applyStyles();
+
+                const contentRes = await fetch(manifest.url);
+                const html = await contentRes.text();
+
+                loadLN(html);
+                return;
+            }
+        }
+
 
         if (data.title) {
             chapterLabel.textContent = data.title;
@@ -293,7 +336,9 @@ function createImageElement(page, index) {
     img.className = 'page-img';
     img.dataset.index = index;
 
-    const url = buildProxyUrl(page.url, page.headers);
+    const url = provider === 'local'
+        ? page.url
+        : buildProxyUrl(page.url, page.headers);
     const placeholder = "/public/assets/placeholder.svg";
 
     img.onerror = () => {

desktop/src/scripts/gallery/gallery.js

@@ -1,5 +1,5 @@
 const providerSelector = document.getElementById('provider-selector');
-const searchInput = document.getElementById('main-search-input');
+const searchInput = document.getElementById('search-input');
 const resultsContainer = document.getElementById('gallery-results');
 
 let currentPage = 1;
@@ -299,7 +299,7 @@ async function searchGallery(isLoadMore = false) {
             const msg = favoritesMode
                 ? (query ? 'No favorites found matching your search' : 'You don\'t have any favorite images yet')
                 : 'No results found';
-            resultsContainer.innerHTML = `<p style="text-align:center;color:var(--text-secondary);padding:4rem;font-size:1.1rem;">${msg}</p>`;
+            resultsContainer.innerHTML = `<p style="text-align:center;color:var(--color-text-secondary);padding:4rem;font-size:1.1rem;">${msg}</p>`;
         }
 
         if (msnry) msnry.layout();

desktop/src/scripts/list.js

@@ -284,7 +284,7 @@ function createListItem(item) {
 
     const itemLink = getEntryLink(item);
 
-    const posterUrl = item.poster || '/public/assets/placeholder.png';
+    const posterUrl = item.poster || '/public/assets/placeholder.svg';
     const progress = item.progress || 0;
 
     const totalUnits = item.entry_type === 'ANIME' ?

desktop/src/scripts/local-library-books.js

@@ -0,0 +1,106 @@
+let activeFilter = 'all';
+let activeSort = 'az';
+let isLocalMode = false;
+let localEntries = [];
+
+function toggleLibraryMode() {
+    isLocalMode = !isLocalMode;
+    const btn = document.getElementById('library-mode-btn');
+    const onlineContent = document.getElementById('online-content');
+    const localContent = document.getElementById('local-content');
+
+    if (isLocalMode) {
+        btn.classList.add('active');
+        onlineContent.classList.add('hidden');
+        localContent.classList.remove('hidden');
+        loadLocalEntries();
+    } else {
+        btn.classList.remove('active');
+        onlineContent.classList.remove('hidden');
+        localContent.classList.add('hidden');
+    }
+}
+
+async function loadLocalEntries() {
+    const grid = document.getElementById('local-entries-grid');
+    grid.innerHTML = '<div class="skeleton-card"></div>'.repeat(6);
+
+    try {
+        const [mangaRes, novelRes] = await Promise.all([
+            fetch('/api/library/manga'),
+            fetch('/api/library/novels')
+        ]);
+
+        const [manga, novel] = await Promise.all([
+            mangaRes.json(),
+            novelRes.json()
+        ]);
+
+        localEntries = [
+            ...manga.map(e => ({ ...e, type: 'manga' })),
+            ...novel.map(e => ({ ...e, type: 'novel' }))
+        ];
+
+        if (localEntries.length === 0) {
+            grid.innerHTML = '<p style="grid-column:1/-1;text-align:center;padding:3rem;">No books found.</p>';
+            return;
+        }
+
+        renderLocalEntries(localEntries);
+    } catch {
+        grid.innerHTML = '<p style="grid-column:1/-1;text-align:center;color:var(--color-danger);padding:3rem;">Error loading library.</p>';
+    }
+}
+
+function filterLocal(type) {
+    if (type === 'all') renderLocalEntries(localEntries);
+    else renderLocalEntries(localEntries.filter(e => e.type === type));
+}
+
+function renderLocalEntries(entries) {
+    const grid = document.getElementById('local-entries-grid');
+    grid.innerHTML = entries.map(entry => {
+        const title = entry.metadata?.title?.romaji || entry.metadata?.title?.english || entry.id;
+        const cover = entry.metadata?.coverImage?.extraLarge || '/public/assets/placeholder.jpg';
+        const chapters = entry.metadata?.chapters || '??';
+
+        return `
+            <div class="local-card" onclick="viewLocalEntry(${entry.metadata?.id || 'null'})">
+                <div class="card-img-wrap">
+                    <img src="${cover}" alt="${title}" loading="lazy">
+                </div>
+                <div class="local-card-info">
+                    <div class="local-card-title">${title}</div>
+                    <p style="font-size: 0.85rem; color: var(--color-text-secondary); margin: 0;">
+                        ${chapters} Chapters
+                    </p>
+                    <div class="badge">${entry.type}</div>
+                    <div class="match-status ${entry.matched ? 'status-linked' : 'status-unlinked'}">
+                        ${entry.matched ? '● Linked' : '○ Unlinked'}
+                    </div>
+                </div>
+            </div>
+        `;
+    }).join('');
+}
+
+async function scanLocalLibrary() {
+    const btnText = document.getElementById('scan-text');
+    btnText.innerText = "Scanning...";
+    try {
+        // Asumiendo que el scan de libros usa este query param
+        const response = await fetch('/api/library/scan?mode=incremental', { method: 'POST' });
+        if (response.ok) {
+            await loadLocalEntries();
+            if (window.NotificationUtils) NotificationUtils.show('Library scanned!', 'success');
+        }
+    } catch (err) {
+        if (window.NotificationUtils) NotificationUtils.show('Scan failed', 'error');
+    } finally {
+        btnText.innerText = "Scan Library";
+    }
+}
+
+function viewLocalEntry(id) {
+    if (id) window.location.href = `/book/${id}`;
+}

desktop/src/scripts/local-library.js

@@ -0,0 +1,209 @@
+let activeFilter = 'all';
+let activeSort = 'az';
+let isLocalMode = false;
+let localEntries = [];
+
+function toggleLibraryMode() {
+    isLocalMode = !isLocalMode;
+
+    const btn = document.getElementById('library-mode-btn');
+    const onlineContent = document.getElementById('online-content');
+    const localContent = document.getElementById('local-content');
+    const svg = btn.querySelector('svg');
+    const label = btn.querySelector('span');
+
+    if (isLocalMode) {
+        // LOCAL MODE
+        btn.classList.add('active');
+        onlineContent.classList.add('hidden');
+        localContent.classList.remove('hidden');
+        loadLocalEntries();
+
+        svg.innerHTML = `
+            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+            <polyline points="9 22 9 12 15 12 15 22"/>
+        `;
+    } else {
+        // ONLINE MODE
+        btn.classList.remove('active');
+        onlineContent.classList.remove('hidden');
+        localContent.classList.add('hidden');
+
+        svg.innerHTML = `
+            <circle cx="12" cy="12" r="10"/>
+            <line x1="2" y1="12" x2="22" y2="12"/>
+            <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
+        `;
+    }
+}
+
+async function loadLocalEntries() {
+    const grid = document.getElementById('local-entries-grid');
+    grid.innerHTML = '<div class="skeleton-card"></div>'.repeat(8);
+
+    try {
+        const response = await fetch('/api/library/anime');
+        const entries = await response.json();
+        localEntries = entries;
+
+        if (entries.length === 0) {
+            grid.innerHTML = '<p style="grid-column: 1/-1; text-align: center; color: var(--color-text-secondary); padding: 3rem;">No anime found in your local library. Click "Scan Library" to scan your folders.</p>';
+
+            return;
+        }
+
+        // Renderizar grid
+        grid.innerHTML = entries.map(entry => {
+            const title = entry.metadata?.title?.romaji || entry.metadata?.title?.english || entry.id;
+            const cover = entry.metadata?.coverImage?.extraLarge || entry.metadata?.coverImage?.large || '/public/assets/placeholder.jpg';
+            const score = entry.metadata?.averageScore || '--';
+            const episodes = entry.metadata?.episodes || '??';
+
+            return `
+                <div class="local-card" onclick="viewLocalEntry(${entry.metadata?.id || 'null'})">
+                    <div class="card-img-wrap">
+                        <img src="${cover}" alt="${title}" loading="lazy">
+                    </div>
+                    <div class="local-card-info">
+                        <div class="local-card-title">${title}</div>
+                        <p style="font-size: 0.85rem; color: var(--color-text-secondary); margin: 0;">
+                            ${score}% • ${episodes} Eps
+                        </p>
+                        <div class="match-status ${entry.matched ? 'status-linked' : 'status-unlinked'}">
+                            ${entry.matched ? '● Linked' : '○ Unlinked'}
+                        </div>
+                    </div>
+                </div>
+            `;
+        }).join('');
+    } catch (err) {
+        console.error('Error loading local entries:', err);
+        grid.innerHTML = '<p style="grid-column: 1/-1; text-align: center; color: var(--color-danger); padding: 3rem;">Error loading local library. Make sure the backend is running.</p>';
+    }
+}
+
+
+async function scanLocalLibrary() {
+    const btnText = document.getElementById('scan-text');
+    const originalText = btnText.innerText;
+    btnText.innerText = "Scanning...";
+
+    try {
+        const response = await fetch('/api/library/scan?mode=incremental', {
+            method: 'POST'
+        });
+
+        if (response.ok) {
+            await loadLocalEntries();
+            // Mostrar notificación de éxito si tienes sistema de notificaciones
+            if (window.NotificationUtils) {
+                NotificationUtils.show('Library scanned successfully!', 'success');
+            }
+        } else {
+            throw new Error('Scan failed');
+        }
+    } catch (err) {
+        console.error("Scan failed", err);
+        alert("Failed to scan library. Check console for details.");
+
+        // Mostrar notificación de error si tienes sistema de notificaciones
+        if (window.NotificationUtils) {
+            NotificationUtils.show('Failed to scan library', 'error');
+        }
+    } finally {
+        btnText.innerText = originalText;
+    }
+}
+
+function viewLocalEntry(anilistId) {
+    if (!anilistId) {
+        console.warn('Anime not linked');
+        return;
+    }
+    window.location.href = `/anime/${anilistId}`;
+}
+
+function renderLocalEntries(entries) {
+    const grid = document.getElementById('local-entries-grid');
+
+    grid.innerHTML = entries.map(entry => {
+        const title = entry.metadata?.title?.romaji
+            || entry.metadata?.title?.english
+            || entry.id;
+
+        const cover =
+            entry.metadata?.coverImage?.extraLarge
+            || entry.metadata?.coverImage?.large
+            || '/public/assets/placeholder.jpg';
+
+        const score = entry.metadata?.averageScore || '--';
+        const episodes = entry.metadata?.episodes || '??';
+
+        return `
+            <div class="local-card" onclick="viewLocalEntry(${entry.metadata?.id || 'null'})">
+                <div class="card-img-wrap">
+                    <img src="${cover}" alt="${title}" loading="lazy">
+                </div>
+                <div class="local-card-info">
+                    <div class="local-card-title">${title}</div>
+                    <p style="font-size: 0.85rem; color: var(--color-text-secondary); margin: 0;">
+                        ${score}% • ${episodes} Eps
+                    </p>
+                    <div class="match-status ${entry.matched ? 'status-linked' : 'status-unlinked'}">
+                        ${entry.matched ? '● Linked' : '○ Unlinked'}
+                    </div>
+                </div>
+            </div>
+        `;
+    }).join('');
+}
+
+function applyLocalFilters() {
+    let filtered = [...localEntries];
+
+    if (activeFilter === 'linked') {
+        filtered = filtered.filter(e => e.matched);
+    }
+
+    if (activeFilter === 'unlinked') {
+        filtered = filtered.filter(e => !e.matched);
+    }
+
+    if (activeSort === 'az') {
+        filtered.sort((a, b) =>
+            (a.metadata?.title?.romaji || a.id)
+                .localeCompare(b.metadata?.title?.romaji || b.id)
+        );
+    }
+
+    if (activeSort === 'za') {
+        filtered.sort((a, b) =>
+            (b.metadata?.title?.romaji || b.id)
+                .localeCompare(a.metadata?.title?.romaji || a.id)
+        );
+    }
+
+    renderLocalEntries(filtered);
+}
+
+document.addEventListener('click', e => {
+    const btn = e.target.closest('.filter-btn');
+    if (!btn) return;
+
+    if (btn.dataset.filter) {
+        activeFilter = btn.dataset.filter;
+    }
+
+    if (btn.dataset.sort) {
+        activeSort = btn.dataset.sort;
+    }
+
+    btn
+        .closest('.local-filters')
+        .querySelectorAll('.filter-btn')
+        .forEach(b => b.classList.remove('active'));
+
+    btn.classList.add('active');
+
+    applyLocalFilters();
+});

desktop/src/scripts/settings.js

@@ -0,0 +1,218 @@
+const API_BASE = '/api/config';
+let currentConfig = {};
+let activeSection = '';
+let modal, navContainer, formContent, form;
+
+window.toggleSettingsModal = async (forceClose = false) => {
+    modal = document.getElementById('settings-modal');
+    navContainer = document.getElementById('config-nav');
+    formContent = document.getElementById('config-section-content');
+    form = document.getElementById('config-form');
+
+    if (!modal) {
+        console.error('Modal not found');
+        return;
+    }
+
+    if (forceClose) {
+        modal.classList.add('hidden');
+    } else {
+        const isHidden = modal.classList.contains('hidden');
+
+        if (isHidden) {
+            // Abrir modal
+            modal.classList.remove('hidden');
+            await loadSettings();
+        } else {
+            // Cerrar modal
+            modal.classList.add('hidden');
+        }
+    }
+};
+
+async function loadSettings() {
+    if (!formContent) {
+        console.error('Form content not found');
+        return;
+    }
+
+    // Mostrar loading
+    formContent.innerHTML = `
+        <div class="skeleton-loader">
+            <div class="skeleton title-skeleton"></div>
+            <div class="skeleton text-skeleton"></div>
+            <div class="skeleton text-skeleton"></div>
+        </div>
+    `;
+
+    try {
+        const res = await fetch(API_BASE);
+
+        if (!res.ok) {
+            throw new Error(`HTTP error! status: ${res.status}`);
+        }
+
+        const data = await res.json();
+
+        if (data.error) throw new Error(data.error);
+
+        currentConfig = data;
+        renderNav();
+
+        // Seleccionar la primera sección si no hay ninguna activa
+        if (!activeSection || !currentConfig[activeSection]) {
+            activeSection = Object.keys(currentConfig)[0];
+        }
+
+        switchSection(activeSection);
+    } catch (err) {
+        console.error('Error loading settings:', err);
+        formContent.innerHTML = `
+            <div style="padding: 2rem; text-align: center;">
+                <p style="color: var(--color-danger); margin-bottom: 1rem;">Failed to load settings</p>
+                <p style="color: var(--color-text-muted); font-size: 0.9rem;">${err.message}</p>
+            </div>
+        `;
+    }
+}
+
+function renderNav() {
+    if (!navContainer) return;
+
+    navContainer.innerHTML = '';
+    Object.keys(currentConfig).forEach(section => {
+        const btn = document.createElement('div');
+        btn.className = `nav-item ${section === activeSection ? 'active' : ''}`;
+        btn.textContent = section;
+        btn.onclick = () => switchSection(section);
+        navContainer.appendChild(btn);
+    });
+}
+
+function switchSection(section) {
+    if (!currentConfig[section]) return;
+
+    activeSection = section;
+    renderNav();
+
+    const sectionData = currentConfig[section];
+
+    formContent.innerHTML = `
+        <h2 class="section-title" style="margin-bottom: 2rem; text-transform: capitalize;">
+            ${section.replace(/_/g, ' ')}
+        </h2>
+    `;
+
+    Object.entries(sectionData).forEach(([key, value]) => {
+        const group = document.createElement('div');
+        group.className = 'config-group';
+
+        const isBool = typeof value === 'boolean';
+        const inputId = `input-${section}-${key}`;
+        const label = key.replace(/_/g, ' ');
+
+        if (isBool) {
+            group.innerHTML = `
+                <div style="display: flex; align-items: center; gap: 0.5rem;">
+                    <input type="checkbox" id="${inputId}" name="${key}" ${value ? 'checked' : ''}>
+                    <label for="${inputId}" style="margin: 0; cursor: pointer;">${label}</label>
+                </div>
+            `;
+        } else {
+            group.innerHTML = `
+                <label for="${inputId}">${label}</label>
+                <input class="config-input" id="${inputId}" name="${key}"
+                       type="${typeof value === 'number' ? 'number' : 'text'}"
+                       value="${value}">
+            `;
+        }
+
+        formContent.appendChild(group);
+    });
+}
+
+// Setup form submit handler
+document.addEventListener('DOMContentLoaded', () => {
+    // Usar delegación de eventos ya que el form se carga dinámicamente
+    document.addEventListener('submit', async (e) => {
+        if (e.target.id === 'config-form') {
+            e.preventDefault();
+            await saveSettings();
+        }
+    });
+});
+
+async function saveSettings() {
+    if (!form || !activeSection) return;
+
+    const updatedData = {};
+
+    Object.keys(currentConfig[activeSection]).forEach(key => {
+        const input = form.elements[key];
+        if (!input) return;
+
+        if (input.type === 'checkbox') {
+            updatedData[key] = input.checked;
+        } else if (input.type === 'number') {
+            updatedData[key] = Number(input.value);
+        } else {
+            updatedData[key] = input.value;
+        }
+    });
+
+    try {
+        const res = await fetch(`${API_BASE}/${activeSection}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(updatedData)
+        });
+
+        if (res.ok) {
+            currentConfig[activeSection] = updatedData;
+
+            // Mostrar notificación de éxito
+            const notification = document.createElement('div');
+            notification.style.cssText = `
+                position: fixed;
+                top: 20px;
+                right: 20px;
+                background: var(--color-success, #10b981);
+                color: white;
+                padding: 1rem 1.5rem;
+                border-radius: 8px;
+                box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+                z-index: 10000;
+                animation: slideIn 0.3s ease-out;
+            `;
+            notification.textContent = 'Settings saved successfully!';
+            document.body.appendChild(notification);
+
+            setTimeout(() => {
+                notification.style.animation = 'slideOut 0.3s ease-out';
+                setTimeout(() => notification.remove(), 300);
+            }, 2000);
+        } else {
+            throw new Error('Failed to save settings');
+        }
+    } catch (err) {
+        console.error('Error saving settings:', err);
+        alert('Error saving settings: ' + err.message);
+    }
+}
+
+// Añadir estilos para las animaciones (solo si no existen)
+if (!document.getElementById('settings-animations')) {
+    const animationStyles = document.createElement('style');
+    animationStyles.id = 'settings-animations';
+    animationStyles.textContent = `
+        @keyframes slideIn {
+            from { transform: translateX(400px); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
+        }
+        @keyframes slideOut {
+            from { transform: translateX(0); opacity: 1; }
+            to { transform: translateX(400px); opacity: 0; }
+        }
+    `;
+    document.head.appendChild(animationStyles);
+}

desktop/src/scripts/utils/list-modal-manager.js

@@ -83,7 +83,7 @@ const ListModalManager = {
             document.getElementById('progress-label');
 
         if (this.isInList && this.currentEntry) {
-            document.getElementById('entry-status').value = this.currentEntry.status || 'PLANNING';
+            document.getElementById('entry-status').value = this.normalizeStatus(this.currentEntry.status);
             document.getElementById('entry-progress').value = this.currentEntry.progress || 0;
             document.getElementById('entry-score').value = this.currentEntry.score || '';
             document.getElementById('entry-start-date').value = this.currentEntry.start_date?.split('T')[0] || '';
@@ -131,6 +131,12 @@ const ListModalManager = {
         document.getElementById('add-list-modal').classList.add('active');
     },
 
+    normalizeStatus(status) {
+        if (!status) return 'PLANNING';
+        if (status === 'WATCHING' || status === 'READING') return 'CURRENT';
+        return status;
+    },
+
     close() {
         document.getElementById('add-list-modal').classList.remove('active');
     },
@@ -212,15 +218,21 @@ const ListModalManager = {
     }
 };
 
-document.addEventListener('DOMContentLoaded', () => {
+async function loadListModal() {
+    if (document.getElementById('add-list-modal')) return;
+
+    const res = await fetch('/views/components/list-modal.html');
+    const html = await res.text();
+    document.body.insertAdjacentHTML('beforeend', html);
+
     const modal = document.getElementById('add-list-modal');
-    if (modal) {
     modal.addEventListener('click', (e) => {
         if (e.target.id === 'add-list-modal') {
             ListModalManager.close();
         }
     });
 }
-});
+
+document.addEventListener('DOMContentLoaded', loadListModal);
 
 window.ListModalManager = ListModalManager;

desktop/src/shared/config.js

@@ -0,0 +1,71 @@
+import fs from 'fs';
+import path from 'path';
+import os from 'os';
+import yaml from 'js-yaml';
+
+const BASE_DIR = path.join(os.homedir(), 'WaifuBoards');
+const CONFIG_PATH = path.join(BASE_DIR, 'config.yaml');
+
+const DEFAULT_CONFIG = {
+    library: {
+        anime: null,
+        manga: null,
+        novels: null
+    }
+};
+
+function ensureConfigFile() {
+    if (!fs.existsSync(BASE_DIR)) {
+        fs.mkdirSync(BASE_DIR, { recursive: true });
+    }
+
+    if (!fs.existsSync(CONFIG_PATH)) {
+        fs.writeFileSync(
+            CONFIG_PATH,
+            yaml.dump(DEFAULT_CONFIG),
+            'utf8'
+        );
+    }
+}
+
+export function getConfig() {
+    ensureConfigFile();
+    const raw = fs.readFileSync(CONFIG_PATH, 'utf8');
+    return yaml.load(raw) || DEFAULT_CONFIG;
+}
+
+export function setConfig(partialConfig) {
+    ensureConfigFile();
+
+    const current = getConfig();
+    const next = deepMerge(current, partialConfig);
+
+    fs.writeFileSync(
+        CONFIG_PATH,
+        yaml.dump(next),
+        'utf8'
+    );
+
+    return next;
+}
+
+function deepMerge(target, source) {
+    for (const key in source) {
+        if (
+            source[key] &&
+            typeof source[key] === 'object' &&
+            !Array.isArray(source[key])
+        ) {
+            target[key] = deepMerge(target[key] || {}, source[key]);
+        } else {
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+
+module.exports = {
+    ensureConfigFile,
+    getConfig,
+    setConfig,
+};

desktop/src/shared/database.js

@@ -2,7 +2,7 @@ const sqlite3 = require('sqlite3').verbose();
 const os = require("os");
 const path = require("path");
 const fs = require("fs");
-const {ensureUserDataDB, ensureAnilistSchema, ensureExtensionsTable, ensureCacheTable, ensureFavoritesDB} = require('./schemas');
+const {ensureUserDataDB, ensureAnilistSchema, ensureExtensionsTable, ensureCacheTable, ensureFavoritesDB, ensureLocalLibrarySchema } = require('./schemas');
 
 const databases = new Map();
 
@@ -10,7 +10,8 @@ const DEFAULT_PATHS = {
     anilist: path.join(os.homedir(), "WaifuBoards", 'anilist_anime.db'),
     favorites: path.join(os.homedir(), "WaifuBoards", "favorites.db"),
     cache: path.join(os.homedir(), "WaifuBoards", "cache.db"),
-    userdata: path.join(os.homedir(), "WaifuBoards", "user_data.db")
+    userdata: path.join(os.homedir(), "WaifuBoards", "user_data.db"),
+    local_library: path.join(os.homedir(), "WaifuBoards", "local_library.db")
 };
 
 function initDatabase(name = 'anilist', dbPath = null, readOnly = false) {
@@ -49,6 +50,11 @@ function initDatabase(name = 'anilist', dbPath = null, readOnly = false) {
 
     databases.set(name, db);
 
+    if (name === "local_library") {
+        ensureLocalLibrarySchema(db)
+            .catch(err => console.error("Error creating local library schema:", err));
+    }
+
     if (name === "anilist") {
         ensureAnilistSchema(db)
             .then(() => ensureExtensionsTable(db))

desktop/src/shared/schemas.js

@@ -2,6 +2,54 @@ const sqlite3 = require('sqlite3').verbose();
 const path = require("path");
 const fs = require("fs");
 
+async function ensureLocalLibrarySchema(db) {
+    await run(db, `
+    CREATE TABLE IF NOT EXISTS local_entries (
+      id TEXT PRIMARY KEY,
+      type TEXT NOT NULL,
+      path TEXT NOT NULL,
+      folder_name TEXT NOT NULL,
+      matched_id INTEGER,
+      matched_source TEXT,
+      last_scan INTEGER NOT NULL
+    )
+  `);
+
+    await run(db, `
+    CREATE TABLE IF NOT EXISTS local_files (
+      id TEXT PRIMARY KEY,
+      entry_id TEXT NOT NULL,
+      file_path TEXT NOT NULL,
+      unit_number INTEGER,
+      FOREIGN KEY (entry_id) REFERENCES local_entries(id)
+    )
+  `);
+
+    await run(db, `
+    CREATE INDEX IF NOT EXISTS idx_local_entries_type
+    ON local_entries(type)
+  `);
+
+    await run(db, `
+    CREATE INDEX IF NOT EXISTS idx_local_entries_matched
+    ON local_entries(matched_id)
+  `);
+
+    await run(db, `
+    CREATE INDEX IF NOT EXISTS idx_local_files_entry
+    ON local_files(entry_id)
+  `);
+}
+
+function run(db, sql, params = []) {
+    return new Promise((resolve, reject) => {
+        db.run(sql, params, err => {
+            if (err) reject(err);
+            else resolve();
+        });
+    });
+}
+
 async function ensureUserDataDB(dbPath) {
     const dir = path.dirname(dbPath);
 
@@ -230,5 +278,6 @@ module.exports = {
     ensureAnilistSchema,
     ensureExtensionsTable,
     ensureCacheTable,
-    ensureFavoritesDB
+    ensureFavoritesDB,
+    ensureLocalLibrarySchema
 };

desktop/src/views/views.routes.ts

@@ -2,80 +2,144 @@ import { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify';
 import * as fs from 'fs';
 import * as path from 'path';
 
+let cachedNavbar: string | null = null;
+
+function getNavbarHTML(activePage: string, showSearch: boolean = true): string {
+    if (!cachedNavbar) {
+        const navbarPath = path.join(__dirname, '..', '..', 'views', 'components', 'navbar.html');
+        cachedNavbar = fs.readFileSync(navbarPath, 'utf-8');
+    }
+
+    let navbar = cachedNavbar;
+
+    const pages = ['anime', 'books', 'gallery', 'schedule', 'my-list', 'marketplace'];
+    pages.forEach(page => {
+        const regex = new RegExp(`(<button class="nav-button[^"]*)"\\s+data-page="${page}"`, 'g');
+        if (page === activePage) {
+            navbar = navbar.replace(regex, `$1 active" data-page="${page}"`);
+        }
+    });
+
+    if (!showSearch) {
+        navbar = navbar.replace(
+            '<div class="search-wrapper">',
+            '<div class="search-wrapper" style="visibility: hidden;">'
+        );
+    }
+
+    return navbar;
+}
+
+function injectNavbar(htmlContent: string, activePage: string, showSearch: boolean = true): string {
+    const navbar = getNavbarHTML(activePage, showSearch);
+
+    return htmlContent.replace(/<body[^>]*>/, `$&\n${navbar}`);
+}
+
 async function viewsRoutes(fastify: FastifyInstance) {
+
     fastify.get('/', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'users.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'users.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        reply.type('text/html').send(html);
     });
 
     fastify.get('/anime', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'anime', 'animes.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'animes.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        const htmlWithNavbar = injectNavbar(html, 'anime', true);
+        reply.type('text/html').send(htmlWithNavbar);
     });
 
     fastify.get('/my-list', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'list.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'list.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        const htmlWithNavbar = injectNavbar(html, 'my-list', false);
+        reply.type('text/html').send(htmlWithNavbar);
     });
 
     fastify.get('/books', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'books', 'books.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'books.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        const htmlWithNavbar = injectNavbar(html, 'books', true);
+        reply.type('text/html').send(htmlWithNavbar);
     });
 
     fastify.get('/schedule', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'schedule.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'schedule.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        const htmlWithNavbar = injectNavbar(html, 'schedule', false);
+        reply.type('text/html').send(htmlWithNavbar);
     });
 
     fastify.get('/gallery', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'gallery', 'gallery.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'gallery', 'gallery.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        const htmlWithNavbar = injectNavbar(html, 'gallery', true);
+        reply.type('text/html').send(htmlWithNavbar);
     });
 
     fastify.get('/marketplace', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'marketplace.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'marketplace.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        const htmlWithNavbar = injectNavbar(html, 'marketplace', false);
+        reply.type('text/html').send(htmlWithNavbar);
     });
 
     fastify.get('/gallery/:extension/*', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'gallery', 'image.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'gallery', 'image.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        const htmlWithNavbar = injectNavbar(html, 'gallery', true);
+        reply.type('text/html').send(htmlWithNavbar);
     });
 
     fastify.get('/gallery/favorites/*', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'gallery', 'image.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'gallery', 'image.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        const htmlWithNavbar = injectNavbar(html, 'gallery', true);
+        reply.type('text/html').send(htmlWithNavbar);
     });
 
     fastify.get('/anime/:id', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'anime', 'anime.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'anime.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        reply.type('text/html').send(html);
     });
 
     fastify.get('/anime/:extension/*', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'anime', 'anime.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'anime.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        reply.type('text/html').send(html);
     });
 
     fastify.get('/watch/:id/:episode', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'anime', 'watch.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'watch.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        reply.type('text/html').send(html);
     });
 
     fastify.get('/book/:id', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'books', 'book.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'book.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        reply.type('text/html').send(html);
     });
 
     fastify.get('/book/:extension/*', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'books', 'book.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'book.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        reply.type('text/html').send(html);
     });
 
     fastify.get('/read/:provider/:chapter/*', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'books', 'read.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'read.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        reply.type('text/html').send(html);
+    });
+
+    fastify.setNotFoundHandler((req, reply) => {
+        const htmlPath = path.join(__dirname, '..', '..', 'views', '404.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        reply.code(404).type('text/html').send(html);
     });
 }
 

desktop/views/404.html

@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>404 - WaifuBoard</title>
+    <link rel="stylesheet" href="/views/css/globals.css">
+    <link rel="stylesheet" href="/views/css/components/navbar.css">
+    <link rel="stylesheet" href="/views/css/components/titlebar.css">
+    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
+
+    <script src="/src/scripts/titlebar.js"></script>
+
+    <style>
+        .error-container {
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            padding: var(--spacing-2xl);
+            background: var(--color-bg-base);
+        }
+
+        .error-code {
+            font-size: 6rem;
+            font-weight: 900;
+            margin: 0;
+            color: var(--color-primary);
+        }
+
+        .error-message {
+            font-size: 1.1rem;
+            color: var(--color-text-secondary);
+            margin: var(--spacing-md) 0 var(--spacing-xl);
+            max-width: 420px;
+        }
+
+        .error-actions {
+            display: flex;
+            gap: var(--spacing-md);
+            justify-content: center;
+        }
+    </style>
+</head>
+<body>
+
+<div id="titlebar">
+    <div class="title-left">
+        <img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
+        <span class="app-title">WaifuBoard</span>
+    </div>
+    <div class="title-right">
+        <button class="min">−</button>
+        <button class="max">🗖</button>
+        <button class="close">✕</button>
+    </div>
+</div>
+
+<nav class="navbar" id="navbar">
+    <a href="#" class="nav-brand">
+        <div class="brand-icon">
+            <img src="/public/assets/waifuboards.ico" alt="WF Logo">
+        </div>
+        WaifuBoard
+    </a>
+
+    <div class="nav-center">
+        <button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
+        <button class="nav-button" onclick="window.location.href='/books'">Books</button>
+        <button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
+        <button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
+        <button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
+        <button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
+    </div>
+
+    <div class="nav-right">
+        <div class="search-wrapper" style="visibility: hidden;">
+            <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                <circle cx="11" cy="11" r="8"/>
+                <path d="M21 21l-4.35-4.35"/>
+            </svg>
+            <input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
+            <div class="search-results" id="search-results"></div>
+        </div>
+
+        <div class="nav-user" id="nav-user" style="display:none;">
+            <div class="user-avatar-btn">
+                <img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
+                <div class="online-indicator"></div>
+            </div>
+
+            <div class="nav-dropdown" id="nav-dropdown">
+                <div class="dropdown-header">
+                    <img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
+                    <div class="dropdown-user-info">
+                        <div class="dropdown-username" id="nav-username"></div>
+                    </div>
+                </div>
+
+                <a href="/my-list" class="dropdown-item">
+                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
+                        <polyline points="17 21 17 13 7 13 7 21"/>
+                        <polyline points="7 3 7 8 15 8"/>
+                    </svg>
+                    <span>My List</span>
+                </a>
+                <button class="dropdown-item logout-item" id="nav-logout">
+                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+                        <polyline points="16 17 21 12 16 7"/>
+                        <line x1="21" y1="12" x2="9" y2="12"/>
+                    </svg>
+                    <span>Logout</span>
+                </button>
+            </div>
+        </div>
+    </div>
+</nav>
+
+<main class="error-container">
+    <div>
+        <h1 class="error-code">404</h1>
+        <p class="error-message">
+            This page doesn’t exist.
+        </p>
+
+        <div class="error-actions">
+            <button class="btn-primary" onclick="location.href='/'">Home</button>
+            <button class="btn-blur" onclick="history.back()">Back</button>
+        </div>
+    </div>
+</main>
+
+<script src="/src/scripts/utils/auth-utils.js"></script>
+
+</body>
+</html>

desktop/views/anime/anime.html

@@ -34,75 +34,6 @@
     </div>
 </div>
 
-<div class="modal-overlay" id="add-list-modal">
-    <div class="modal-content modal-list">
-        <button class="modal-close" onclick="closeAddToListModal()">✕</button>
-        <h2 class="modal-title" id="modal-title">Add to List</h2>
-
-        <div class="modal-body">
-            <div class="modal-fields-grid">
-
-                <div class="form-group">
-                    <label>Status</label>
-                    <select id="entry-status" class="form-input">
-                        <option value="WATCHING">Watching</option>
-                        <option value="COMPLETED">Completed</option>
-                        <option value="PLANNING">Planning</option>
-                        <option value="PAUSED">Paused</option>
-                        <option value="DROPPED">Dropped</option>
-                        <option value="REPEATING">Rewatching</option>
-                    </select>
-                </div>
-
-                <div class="form-group">
-                    <label>Episodes Watched</label>
-                    <input type="number" id="entry-progress" class="form-input" min="0" placeholder="0">
-                </div>
-
-                <div class="form-group">
-                    <label>Your Score (0-10)</label>
-                    <input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
-                </div>
-
-                <div class="form-group full-width">
-                    <div class="date-group">
-                        <div class="date-input-pair">
-                            <label for="entry-start-date">Start Date</label>
-                            <input type="date" id="entry-start-date" class="form-input">
-                        </div>
-                        <div class="date-input-pair">
-                            <label for="entry-end-date">End Date</label>
-                            <input type="date" id="entry-end-date" class="form-input">
-                        </div>
-                    </div>
-                </div>
-
-                <div class="form-group">
-                    <label for="entry-repeat-count">Rewatch Count</label>
-                    <input type="number" id="entry-repeat-count" class="form-input" min="0">
-                </div>
-
-                <div class="form-group notes-group">
-                    <label for="entry-notes">Notes</label>
-                    <textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
-                </div>
-
-                <div class="form-group checkbox-group">
-                    <input type="checkbox" id="entry-is-private" class="form-checkbox">
-                    <label for="entry-is-private">Mark as Private</label>
-                </div>
-
-            </div>
-        </div>
-
-        <div class="modal-actions">
-            <button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
-            <button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
-            <button class="btn-primary" onclick="saveToList()">Save Changes</button>
-        </div>
-    </div>
-</div>
-
 <a href="/anime" class="back-btn">
     <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
     Back to Home
@@ -158,6 +89,7 @@
 
             <div class="meta-row">
                 <div class="pill extension-pill" id="extension-pill" style="display: none; background: #8b5cf6;"></div>
+                <div class="pill" id="local-pill" style="display: none; background: #8b5cf6;"></div>
                 <div class="pill score" id="score">--% Score</div>
                 <div class="pill" id="year">----</div>
                 <div class="pill" id="genres">Action</div>

desktop/views/anime/animes.html

@@ -9,84 +9,24 @@
     <link rel="stylesheet" href="/views/css/components/hero.css">
     <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
     <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
+    <link rel="stylesheet" href="/views/css/components/local-library.css">
     <link rel="stylesheet" href="/views/css/components/titlebar.css">
     <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
     <script src="/src/scripts/titlebar.js"></script>
 </head>
 <body>
-<div id="titlebar"><div class="title-left">
+<div id="titlebar">
+    <div class="title-left">
         <img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
         <span class="app-title">WaifuBoard</span>
     </div>
     <div class="title-right">
-        <button class="min">—</button>
+        <button class="min">−</button>
         <button class="max">🗖</button>
         <button class="close">✕</button>
     </div>
 </div>
 
-<nav class="navbar" id="navbar">
-    <a href="#" class="nav-brand">
-        <div class="brand-icon">
-            <img src="/public/assets/waifuboards.ico" alt="WF Logo">
-        </div>
-        WaifuBoard
-    </a>
-
-    <div class="nav-center">
-        <button class="nav-button active">Anime</button>
-        <button class="nav-button" onclick="window.location.href='/books'">Books</button>
-        <button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
-        <button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
-        <button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
-        <button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
-    </div>
-
-    <div class="nav-right">
-        <div class="search-wrapper">
-            <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                <circle cx="11" cy="11" r="8"/>
-                <path d="M21 21l-4.35-4.35"/>
-            </svg>
-            <input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
-            <div class="search-results" id="search-results"></div>
-        </div>
-
-        <div class="nav-user" id="nav-user" style="display:none;">
-            <div class="user-avatar-btn">
-                <img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
-                <div class="online-indicator"></div>
-            </div>
-
-            <div class="nav-dropdown" id="nav-dropdown">
-                <div class="dropdown-header">
-                    <img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
-                    <div class="dropdown-user-info">
-                        <div class="dropdown-username" id="nav-username"></div>
-                    </div>
-                </div>
-
-                <a href="/my-list" class="dropdown-item">
-                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
-                        <polyline points="17 21 17 13 7 13 7 21"/>
-                        <polyline points="7 3 7 8 15 8"/>
-                    </svg>
-                    <span>My List</span>
-                </a>
-                <button class="dropdown-item logout-item" id="nav-logout">
-                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
-                        <polyline points="16 17 21 12 16 7"/>
-                        <line x1="21" y1="12" x2="9" y2="12"/>
-                    </svg>
-                    <span>Logout</span>
-                </button>
-            </div>
-        </div>
-    </div>
-</nav>
-
 <div class="hero-wrapper">
     <div class="hero-background">
         <img id="hero-bg-media" alt="">
@@ -121,77 +61,17 @@
             </div>
         </div>
     </div>
-</div>
-
-<div class="modal-overlay" id="add-list-modal">
-    <div class="modal-content modal-list">
-        <button class="modal-close" onclick="closeAddToListModal()">✕</button>
-        <h2 class="modal-title" id="modal-title">Add to List</h2>
-
-        <div class="modal-body">
-            <div class="modal-fields-grid">
-
-                <div class="form-group">
-                    <label>Status</label>
-                    <select id="entry-status" class="form-input">
-                        <option value="WATCHING">Watching/Reading</option>
-                        <option value="COMPLETED">Completed</option>
-                        <option value="PLANNING">Planning</option>
-                        <option value="PAUSED">Paused</option>
-                        <option value="DROPPED">Dropped</option>
-                        <option value="REPEATING">Rewatching</option>
-                    </select>
-                </div>
-
-                <div class="form-group">
-                    <label>Episodes Watched</label>
-                    <input type="number" id="entry-progress" class="form-input" min="0" placeholder="0">
-                </div>
-
-                <div class="form-group">
-                    <label>Your Score (0-10)</label>
-                    <input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
-                </div>
-
-                <div class="form-group full-width">
-                    <div class="date-group">
-                        <div class="date-input-pair">
-                            <label for="entry-start-date">Start Date</label>
-                            <input type="date" id="entry-start-date" class="form-input">
-                        </div>
-                        <div class="date-input-pair">
-                            <label for="entry-end-date">End Date</label>
-                            <input type="date" id="entry-end-date" class="form-input">
-                        </div>
-                    </div>
-                </div>
-
-                <div class="form-group">
-                    <label for="entry-repeat-count">Rewatch Count</label>
-                    <input type="number" id="entry-repeat-count" class="form-input" min="0">
-                </div>
-
-                <div class="form-group notes-group">
-                    <label for="entry-notes">Notes</label>
-                    <textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
-                </div>
-
-                <div class="form-group checkbox-group">
-                    <input type="checkbox" id="entry-is-private" class="form-checkbox">
-                    <label for="entry-is-private">Mark as Private</label>
-                </div>
+    <button class="library-mode-btn icon-only" id="library-mode-btn" onclick="toggleLibraryMode()" title="Switch library mode">
+        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+            <polyline points="9 22 9 12 15 12 15 22"/>
+        </svg>
+    </button>
 
 </div>
-        </div>
 
-        <div class="modal-actions">
-            <button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
-            <button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
-            <button class="btn-primary" onclick="saveToList()">Save Changes</button>
-        </div>
-    </div>
-</div>
-<main>
+<!-- Online Mode Content -->
+<main id="online-content">
     <section class="section">
         <div class="section-header">
             <div class="section-title">Continue watching</div>
@@ -208,13 +88,11 @@
         </div>
     </section>
 
-
     <section class="section">
         <div class="section-header"><div class="section-title">Trending This Season</div></div>
         <div class="carousel-wrapper">
             <button class="scroll-btn left" onclick="scrollCarousel('trending', -1)">‹</button>
             <div class="carousel" id="trending">
-
                 <div class="card"><div class="card-img-wrap skeleton"></div></div>
                 <div class="card"><div class="card-img-wrap skeleton"></div></div>
                 <div class="card"><div class="card-img-wrap skeleton"></div></div>
@@ -224,7 +102,6 @@
         </div>
     </section>
 
-
     <section class="section">
         <div class="section-header"><div class="section-title">Top Airing Now</div></div>
         <div class="carousel-wrapper">
@@ -240,14 +117,49 @@
     </section>
 </main>
 
+<!-- Local Library Mode Content -->
+<main id="local-content" class="hidden">
+    <section class="section">
+        <div class="section-header">
+            <div class="section-title">Local Anime Library</div>
+            <button class="btn-secondary" onclick="scanLocalLibrary()">
+                <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                    <path d="M21 12a9 9 0 1 1-9-9"/>
+                    <path d="M21 3v6h-6"/>
+                </svg>
+                <span id="scan-text">Scan Library</span>
+            </button>
+        </div>
+        <div class="local-filters">
+            <div class="filter-group">
+                <button class="filter-btn active" data-filter="all">All</button>
+                <button class="filter-btn" data-filter="watching">Watching</button>
+                <button class="filter-btn" data-filter="completed">Completed</button>
+                <button class="filter-btn" data-filter="unwatched">Unwatched</button>
+                <button class="filter-btn" data-filter="unlinked">Unlinked</button>
+            </div>
+
+            <div class="filter-group">
+                <button class="filter-btn" data-sort="az">A–Z</button>
+                <button class="filter-btn" data-sort="recent">Recent</button>
+            </div>
+        </div>
+        <div class="local-library-grid" id="local-entries-grid">
+            <div class="skeleton-card"></div>
+            <div class="skeleton-card"></div>
+            <div class="skeleton-card"></div>
+            <div class="skeleton-card"></div>
+            <div class="skeleton-card"></div>
+            <div class="skeleton-card"></div>
+            <div class="skeleton-card"></div>
+            <div class="skeleton-card"></div>
+        </div>
+    </section>
+</main>
+
 <div id="updateToast" class="hidden">
     <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
-
-    <a
-            id="downloadButton"
-            href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
-            target="_blank"
-    >
+    <a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">
         Click To Download
     </a>
 </div>
@@ -258,8 +170,10 @@
 <script src="/src/scripts/utils/continue-watching-manager.js"></script>
 <script src="/src/scripts/utils/youtube-player-utils.js"></script>
 <script src="/src/scripts/anime/animes.js"></script>
+<script src="/src/scripts/local-library.js"></script>
 <script src="/src/scripts/updateNotifier.js"></script>
 <script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
+<script src="/src/scripts/settings.js"></script>
 </body>
 </html>

desktop/views/books/book.html

@@ -25,72 +25,6 @@
     </div>
 </div>
 
-<div class="modal-overlay" id="add-list-modal">
-    <div class="modal-content">
-        <button class="modal-close" onclick="closeAddToListModal()">✕</button>
-        <h2 class="modal-title" id="modal-title">Add to Library</h2>
-
-        <div class="modal-body">
-            <div class="modal-fields-grid">
-
-                <div class="form-group">
-                    <label for="entry-status">Status</label>
-                    <select id="entry-status" class="form-input">
-                        <option value="CURRENT">Reading</option>
-                        <option value="COMPLETED">Completed</option>
-                        <option value="PLANNING">Plan to Read</option>
-                        <option value="PAUSED">Paused</option>
-                        <option value="DROPPED">Dropped</option>
-                        <option value="REPEATING">Rereading</option>
-                    </select>
-                </div>
-
-                <div class="form-group">
-                    <label for="entry-progress" id="progress-label">Chapters Read</label>
-                    <input type="number" id="entry-progress" class="form-input" min="0" max="0" placeholder="0">
-                </div>
-
-                <div class="form-group">
-                    <label for="entry-score">Score (0-10)</label>
-                    <input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
-                </div>
-
-                <div class="form-group full-width date-group">
-                    <div class="date-input-pair">
-                        <label for="entry-start-date">Start Date</label>
-                        <input type="date" id="entry-start-date" class="form-input">
-                    </div>
-                    <div class="date-input-pair">
-                        <label for="entry-end-date">End Date</label>
-                        <input type="date" id="entry-end-date" class="form-input">
-                    </div>
-                </div>
-
-                <div class="form-group">
-                    <label for="entry-repeat-count">Re-read Count</label>
-                    <input type="number" id="entry-repeat-count" class="form-input" min="0">
-                </div>
-
-                <div class="form-group notes-group">
-                    <label for="entry-notes">Notes</label>
-                    <textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
-                </div>
-
-                <div class="form-group checkbox-group">
-                    <input type="checkbox" id="entry-is-private" class="form-checkbox">
-                    <label for="entry-is-private">Mark as Private</label>
-                </div>
-
-            </div>
-        </div>
-
-        <div class="modal-actions">
-            <button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
-            <button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
-            <button class="btn-primary" onclick="saveToList()">Save Changes</button>
-        </div>
-    </div>
-</div>
 <a href="/books" class="back-btn">
     <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
     Back to Books
@@ -140,6 +74,7 @@
 
             <div class="meta-row">
                 <div class="pill extension-pill" id="extension-pill" style="display: none; background: #8b5cf6;"></div>
+                <div class="pill" id="local-pill" style="display: none; background: #8b5cf6;"></div>
                 <div class="pill score" id="score">--% Score</div>
                 <div class="pill" id="genres">Action</div>
             </div>

desktop/views/books/books.html

@@ -12,6 +12,7 @@
     <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
     <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
     <script src="/src/scripts/titlebar.js"></script>
+    <link rel="stylesheet" href="/views/css/components/local-library.css">
 </head>
 <body>
 <div id="titlebar"> <div class="title-left">
@@ -25,66 +26,6 @@
     </div>
 </div>
 
-<nav class="navbar" id="navbar">
-    <a href="#" class="nav-brand">
-        <div class="brand-icon">
-            <img src="/public/assets/waifuboards.ico" alt="WF Logo">
-        </div>
-        WaifuBoard
-    </a>
-
-    <div class="nav-center">
-        <button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
-        <button class="nav-button active">Books</button>
-        <button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
-        <button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
-        <button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
-        <button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
-    </div>
-
-    <div class="nav-right">
-        <div class="search-wrapper">
-            <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
-            <input type="text" class="search-input" id="search-input" placeholder="Search books..." autocomplete="off">
-            <div class="search-results" id="search-results"></div>
-        </div>
-
-        <div class="nav-user" id="nav-user" style="display:none;">
-            <div class="user-avatar-btn">
-                <img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
-                <div class="online-indicator"></div>
-            </div>
-
-            <div class="nav-dropdown" id="nav-dropdown">
-                <div class="dropdown-header">
-                    <img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
-                    <div class="dropdown-user-info">
-                        <div class="dropdown-username" id="nav-username"></div>
-                    </div>
-                </div>
-
-                <a href="/my-list" class="dropdown-item">
-                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
-                        <polyline points="17 21 17 13 7 13 7 21"/>
-                        <polyline points="7 3 7 8 15 8"/>
-                    </svg>
-                    <span>My List</span>
-                </a>
-                <button class="dropdown-item logout-item" id="nav-logout">
-                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
-                        <polyline points="16 17 21 12 16 7"/>
-                        <line x1="21" y1="12" x2="9" y2="12"/>
-                    </svg>
-                    <span>Logout</span>
-                </button>
-            </div>
-        </div>
-    </div>
-</nav>
-
-
 <div class="hero-wrapper">
     <div class="hero-background">
         <img id="hero-bg-media" src="" alt="">
@@ -109,75 +50,40 @@
             </div>
         </div>
     </div>
+    <button class="library-mode-btn icon-only" id="library-mode-btn" onclick="toggleLibraryMode()" title="Switch library mode">
+        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+            <polyline points="9 22 9 12 15 12 15 22"/>
+        </svg>
+    </button>
 </div>
-
-<div class="modal-overlay" id="add-list-modal">
-    <div class="modal-content modal-list">
-        <button class="modal-close" onclick="closeAddToListModal()">✕</button>
-        <h2 class="modal-title" id="modal-title">Add to Library</h2>
-
-        <div class="modal-body">
-            <div class="modal-fields-grid">
-
-                <div class="form-group">
-                    <label for="entry-status">Status</label>
-                    <select id="entry-status" class="form-input">
-                        <option value="CURRENT">Reading</option>
-                        <option value="COMPLETED">Completed</option>
-                        <option value="PLANNING">Plan to Read</option>
-                        <option value="PAUSED">Paused</option>
-                        <option value="DROPPED">Dropped</option>
-                        <option value="REPEATING">Rereading</option>
-                    </select>
+<main id="local-content" class="hidden">
+    <section class="section">
+        <div class="section-header">
+            <div class="section-title">Local Books Library</div>
+            <button class="btn-secondary" onclick="scanLocalLibrary()">
+                <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                    <path d="M21 12a9 9 0 1 1-9-9"/><path d="M21 3v6h-6"/>
+                </svg>
+                <span id="scan-text">Scan Library</span>
+            </button>
         </div>
-
-                <div class="form-group">
-                    <label for="entry-progress" id="progress-label">Chapters Read</label>
-                    <input type="number" id="entry-progress" class="form-input" min="0" max="0" placeholder="0">
+        <div class="local-filters">
+            <div class="filter-group">
+                <button class="filter-btn active" data-filter="all">All</button>
+                <button class="filter-btn" data-filter="unlinked">Unlinked</button>
             </div>
-
-                <div class="form-group">
-                    <label for="entry-score">Score (0-10)</label>
-                    <input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
-                </div>
-
-                <div class="form-group full-width date-group">
-                    <div class="date-input-pair">
-                        <label for="entry-start-date">Start Date</label>
-                        <input type="date" id="entry-start-date" class="form-input">
-                    </div>
-                    <div class="date-input-pair">
-                        <label for="entry-end-date">End Date</label>
-                        <input type="date" id="entry-end-date" class="form-input">
+            <div class="filter-group">
+                <button class="filter-btn" data-sort="az">A–Z</button>
             </div>
         </div>
-
-                <div class="form-group">
-                    <label for="entry-repeat-count">Re-read Count</label>
-                    <input type="number" id="entry-repeat-count" class="form-input" min="0">
+        <div class="local-library-grid" id="local-entries-grid">
+            <div class="skeleton-card"></div>
+            <div class="skeleton-card"></div>
         </div>
-
-                <div class="form-group notes-group">
-                    <label for="entry-notes">Notes</label>
-                    <textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
-                </div>
-
-                <div class="form-group checkbox-group">
-                    <input type="checkbox" id="entry-is-private" class="form-checkbox">
-                    <label for="entry-is-private">Mark as Private</label>
-                </div>
-
-            </div>
-        </div>
-
-        <div class="modal-actions">
-            <button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
-            <button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
-            <button class="btn-primary" onclick="saveToList()">Save Changes</button>
-        </div>
-    </div>
-</div>
-<main>
+    </section>
+</main>
+<main id="online-content">
     <section class="section">
         <div class="section-header">
             <div class="section-title">Continue Reading</div>
@@ -226,7 +132,7 @@
 <script src="/src/scripts/utils/list-modal-manager.js"></script>
 <script src="/src/scripts/utils/continue-watching-manager.js"></script>
 <script src="/src/scripts/books/books.js"></script>
-
+<script src="/src/scripts/local-library-books.js"></script>
 <script src="/src/scripts/updateNotifier.js"></script>
 <script src="/src/scripts/rpc-inapp.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>

desktop/views/components/list-modal.html

@@ -0,0 +1,66 @@
+<div class="modal-overlay" id="add-list-modal">
+    <div class="modal-content modal-list">
+        <button class="modal-close" onclick="closeAddToListModal()">✕</button>
+        <h2 class="modal-title" id="modal-title">Add to List</h2>
+
+        <div class="modal-body">
+            <div class="modal-fields-grid">
+                <div class="form-group">
+                    <label>Status</label>
+                    <select id="entry-status" class="form-input">
+                        <option value="CURRENT">Watching/Reading</option>
+                        <option value="COMPLETED">Completed</option>
+                        <option value="PLANNING">Planning</option>
+                        <option value="PAUSED">Paused</option>
+                        <option value="DROPPED">Dropped</option>
+                        <option value="REPEATING">Rewatching</option>
+                    </select>
+                </div>
+
+                <div class="form-group">
+                    <label>Episodes Watched</label>
+                    <input type="number" id="entry-progress" class="form-input" min="0" placeholder="0">
+                </div>
+
+                <div class="form-group">
+                    <label>Your Score (0-10)</label>
+                    <input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
+                </div>
+
+                <div class="form-group full-width">
+                    <div class="date-group">
+                        <div class="date-input-pair">
+                            <label for="entry-start-date">Start Date</label>
+                            <input type="date" id="entry-start-date" class="form-input">
+                        </div>
+                        <div class="date-input-pair">
+                            <label for="entry-end-date">End Date</label>
+                            <input type="date" id="entry-end-date" class="form-input">
+                        </div>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label for="entry-repeat-count">Rewatch Count</label>
+                    <input type="number" id="entry-repeat-count" class="form-input" min="0">
+                </div>
+
+                <div class="form-group notes-group">
+                    <label for="entry-notes">Notes</label>
+                    <textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
+                </div>
+
+                <div class="form-group checkbox-group">
+                    <input type="checkbox" id="entry-is-private" class="form-checkbox">
+                    <label for="entry-is-private">Mark as Private</label>
+                </div>
+            </div>
+        </div>
+
+        <div class="modal-actions">
+            <button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
+            <button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
+            <button class="btn-primary" onclick="saveToList()">Save Changes</button>
+        </div>
+    </div>
+</div>

desktop/views/components/navbar.html

@@ -0,0 +1,69 @@
+<nav class="navbar" id="navbar">
+  <a href="#" class="nav-brand">
+    <div class="brand-icon">
+      <img src="/public/assets/waifuboards.ico" alt="WF Logo">
+    </div>
+    WaifuBoard
+  </a>
+
+  <div class="nav-center">
+    <button class="nav-button" data-page="anime" onclick="window.location.href='/anime'">Anime</button>
+    <button class="nav-button" data-page="books" onclick="window.location.href='/books'">Books</button>
+    <button class="nav-button" data-page="gallery" onclick="window.location.href='/gallery'">Gallery</button>
+    <button class="nav-button" data-page="schedule" onclick="window.location.href='/schedule'">Schedule</button>
+    <button class="nav-button" data-page="my-list" onclick="window.location.href='/my-list'">My List</button>
+    <button class="nav-button" data-page="marketplace" onclick="window.location.href='/marketplace'">Marketplace</button>
+  </div>
+
+  <div class="nav-right">
+    <div class="search-wrapper">
+      <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+        <circle cx="11" cy="11" r="8"/>
+        <path d="M21 21l-4.35-4.35"/>
+      </svg>
+      <input type="text" class="search-input" id="search-input" placeholder="Search..." autocomplete="off">
+      <div class="search-results" id="search-results"></div>
+    </div>
+
+    <div class="nav-user" id="nav-user" style="display:none;">
+      <div class="user-avatar-btn">
+        <img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
+        <div class="online-indicator"></div>
+      </div>
+
+      <div class="nav-dropdown" id="nav-dropdown">
+        <div class="dropdown-header">
+          <img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
+          <div class="dropdown-user-info">
+            <div class="dropdown-username" id="nav-username"></div>
+          </div>
+        </div>
+
+        <button class="dropdown-item" id="nav-settings">
+          <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <circle cx="12" cy="12" r="3"/>
+            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.65 1.65 0 0 0 15 19.4a1.65 1.65 0 0 0-1 .6 1.65 1.65 0 0 0-.33 1.82V22a2 2 0 1 1-4 0v-.18a1.65 1.65 0 0 0-.33-1.82 1.65 1.65 0 0 0-1-.6 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-.6-1 1.65 1.65 0 0 0-1.82-.33H2a2 2 0 1 1 0-4h.18a1.65 1.65 0 0 0 1.82-.33 1.65 1.65 0 0 0 .6-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6c.37 0 .72-.14 1-.6A1.65 1.65 0 0 0 10.33 2.18V2a2 2 0 1 1 4 0v.18a1.65 1.65 0 0 0 .33 1.82c.28.46.63.6 1 .6a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c0 .37.14.72.6 1 .46.28.6.63.6 1z"/>
+          </svg>
+          <span>Settings</span>
+        </button>
+
+        <a href="/my-list" class="dropdown-item">
+          <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
+            <polyline points="17 21 17 13 7 13 7 21"/>
+            <polyline points="7 3 7 8 15 8"/>
+          </svg>
+          <span>My List</span>
+        </a>
+        <button class="dropdown-item logout-item" id="nav-logout">
+          <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+            <polyline points="16 17 21 12 16 7"/>
+            <line x1="21" y1="12" x2="9" y2="12"/>
+          </svg>
+          <span>Logout</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</nav>

desktop/views/components/settings-modal.html

@@ -0,0 +1,278 @@
+<div id="settings-modal" class="modal hidden" onclick="if(event.target === this) window.toggleSettingsModal(true)">
+  <div class="modal-overlay"></div>
+  <div class="modal-content">
+
+    <aside class="modal-sidebar">
+      <div class="sidebar-header">
+        <h2 class="sidebar-title">Settings</h2>
+      </div>
+      <nav id="config-nav" class="nav-list">
+      </nav>
+
+      <div class="sidebar-footer">
+        <button onclick="window.toggleSettingsModal(true)" class="btn-exit">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+            <polyline points="16 17 21 12 16 7"></polyline>
+            <line x1="21" y1="12" x2="9" y2="12"></line>
+          </svg>
+          Close
+        </button>
+      </div>
+    </aside>
+
+    <main class="modal-main">
+      <form id="config-form" class="config-wrapper">
+        <div id="config-section-content" class="section-container">
+          <div class="skeleton-loader">
+            <div class="skeleton title-skeleton"></div>
+            <div class="skeleton field-skeleton"></div>
+            <div class="skeleton field-skeleton"></div>
+            <div class="skeleton field-skeleton"></div>
+          </div>
+        </div>
+
+        <div class="modal-footer-sticky">
+          <p class="footer-hint">Changes are applied immediately after saving.</p>
+          <button type="submit" class="btn-primary">Save Changes</button>
+        </div>
+      </form>
+    </main>
+  </div>
+</div>
+
+<style>
+  /* --- AMOLED THEME VARIABLES --- */
+  :root {
+    --amoled-black: #000000;
+    --amoled-surface: #080808;
+    --amoled-field: #0e0e0e;
+    --amoled-border: rgba(255, 255, 255, 0.08);
+    --accent-purple: #8b5cf6;
+    --accent-glow: rgba(139, 92, 246, 0.15);
+    --text-main: #ffffff;
+    --text-dim: #a1a1aa;
+  }
+
+  /* --- MODAL BASE --- */
+  .modal {
+    position: fixed;
+    inset: 0;
+    z-index: 10000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+  }
+
+  .modal.hidden { display: none !important; }
+
+  .modal-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.9);
+    backdrop-filter: blur(12px);
+    z-index: -1;
+  }
+
+  .modal-content {
+    position: relative;
+    display: flex;
+    flex-direction: row; /* Horizontal layout */
+    width: 95%;
+    max-width: 1200px; /* Increased size */
+    height: 85vh;
+    background: var(--amoled-black);
+    border: var(--amoled-border);
+    border-radius: 28px;
+    overflow: hidden;
+    box-shadow: 0 0 0 1px var(--amoled-border), 0 24px 60px rgba(0,0,0,0.8);
+    animation: modalScaleUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  /* --- SIDEBAR --- */
+  .modal-sidebar {
+    width: 280px;
+    background: var(--amoled-surface);
+    border-right: var(--amoled-border);
+    display: flex;
+    flex-direction: column;
+    padding: 2rem;
+    flex-shrink: 0;
+  }
+
+  .sidebar-title {
+    font-size: 1.4rem;
+    font-weight: 800;
+    margin-bottom: 2.5rem;
+    color: var(--text-main);
+    letter-spacing: -0.02em;
+  }
+
+  .nav-list { flex: 1; }
+
+  .nav-item {
+    padding: 12px 16px;
+    border-radius: 14px;
+    cursor: pointer;
+    color: var(--text-dim);
+    transition: all 0.2s ease;
+    margin-bottom: 6px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    text-transform: capitalize;
+  }
+
+  .nav-item:hover {
+    background: rgba(255, 255, 255, 0.05);
+    color: var(--text-main);
+  }
+
+  .nav-item.active {
+    background: var(--accent-glow);
+    color: var(--accent-purple);
+    box-shadow: inset 3px 0 0 var(--accent-purple);
+  }
+
+  /* --- MAIN CONTENT & DYNAMIC INPUTS --- */
+  .modal-main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: var(--amoled-black);
+    min-width: 0;
+  }
+
+  .config-wrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .section-container {
+    flex: 1;
+    padding: 3.5rem;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: #222 transparent;
+  }
+
+  /* Styles for the injected section content */
+  .config-group {
+    margin-bottom: 2.5rem;
+    animation: fadeInSection 0.4s ease-out;
+  }
+
+  .config-group label {
+    display: block;
+    font-size: 0.75rem;
+    color: var(--accent-purple);
+    margin-bottom: 0.8rem;
+    letter-spacing: 0.05em;
+    font-weight: 800;
+    text-transform: uppercase;
+  }
+
+  .config-input {
+    width: 100%;
+    padding: 1rem 1.2rem;
+    background: var(--amoled-field);
+    border: 1px solid #1a1a1a;
+    border-radius: 14px;
+    color: #fff;
+    font-size: 1rem;
+    transition: all 0.25s ease;
+  }
+
+  .config-input:focus {
+    outline: none;
+    border-color: var(--accent-purple);
+    background: #121212;
+    box-shadow: 0 0 0 4px var(--accent-glow);
+  }
+
+  /* --- FOOTER --- */
+  .modal-footer-sticky {
+    padding: 1.5rem 3.5rem;
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(10px);
+    border-top: var(--amoled-border);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .footer-hint {
+    font-size: 0.85rem;
+    color: var(--text-dim);
+  }
+
+  /* --- BUTTONS --- */
+  .btn-primary {
+    padding: 0.8rem 2.2rem;
+    background: #ffffff;
+    color: #000000;
+    border: none;
+    border-radius: 100px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+  }
+
+  .btn-primary:hover {
+    transform: translateY(-2px);
+    background: #f0f0f0;
+  }
+
+  .btn-exit {
+    background: #111;
+    border: 1px solid #222;
+    color: #ef4444;
+    padding: 10px;
+    border-radius: 12px;
+    width: 100%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    font-weight: 600;
+    margin-top: auto;
+  }
+
+  /* --- ANIMATIONS & SKELETON --- */
+  @keyframes modalScaleUp {
+    from { opacity: 0; transform: scale(0.97) translateY(10px); }
+    to { opacity: 1; transform: scale(1) translateY(0); }
+  }
+
+  @keyframes fadeInSection {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  .skeleton-loader { display: flex; flex-direction: column; gap: 2rem; }
+  .skeleton {
+    background: linear-gradient(90deg, #080808 25%, #121212 50%, #080808 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+    border-radius: 12px;
+  }
+  @keyframes shimmer {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
+  .title-skeleton { height: 35px; width: 40%; }
+  .field-skeleton { height: 55px; width: 100%; }
+
+  /* Responsive Mobile View */
+  @media (max-width: 850px) {
+    .modal-content { flex-direction: column; height: 95vh; width: 100vw; border-radius: 0; }
+    .modal-sidebar { width: 100%; height: auto; border-right: none; border-bottom: var(--amoled-border); padding: 1rem; }
+    .sidebar-title { margin-bottom: 1rem; font-size: 1.2rem; }
+    .section-container { padding: 2rem; }
+    .modal-footer-sticky { padding: 1.5rem 2rem; }
+  }
+</style>

desktop/views/css/anime/anime.css

@@ -53,8 +53,8 @@
     gap: 1.25rem;
 }
 
-.info-item h4 { margin: 0 0 0.25rem 0; font-size: 0.85rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
-.info-item span { font-weight: 600; font-size: 1rem; color: var(--text-primary); }
+.info-item h4 { margin: 0 0 0.25rem 0; font-size: 0.85rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
+.info-item span { font-weight: 600; font-size: 1rem; color: var(--color-text-primary); }
 
 .character-list {
     display: flex;
@@ -180,7 +180,7 @@
     transition: 0.2s;
     text-align: center;
     font-weight: 600;
-    color: var(--text-secondary);
+    color: var(--color-text-secondary);
 }
 
 .episode-btn:hover {

desktop/views/css/components/local-library.css

@@ -0,0 +1,132 @@
+.library-mode-btn {
+    padding: 0.6rem 1.2rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: var(--radius-full);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 600;
+    font-size: 0.9rem;
+    transition: all 0.2s;
+}
+
+.library-mode-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+}
+
+.library-mode-btn.active {
+    background: var(--color-primary);
+    color: white;
+    border-color: var(--color-primary);
+}
+
+.library-mode-btn svg {
+    width: 18px;
+    height: 18px;
+}
+
+.local-library-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 1.5rem;
+    padding: 1rem 0;
+}
+
+.local-card {
+    cursor: pointer;
+    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.local-card:hover {
+    transform: translateY(-8px);
+}
+
+.local-card-info {
+    padding: 0.8rem 0;
+}
+
+.local-card-title {
+    font-size: 1rem;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: 0.5rem;
+}
+
+.match-status {
+    font-size: 0.85rem;
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    border-radius: var(--radius-sm);
+}
+
+.status-linked {
+    background: rgba(34, 197, 94, 0.2);
+    color: var(--color-success);
+}
+
+.status-unlinked {
+    background: rgba(239, 68, 68, 0.2);
+    color: var(--color-danger);
+}
+
+.hidden {
+    display: none !important;
+}
+
+.skeleton-card {
+    width: 100%;
+    aspect-ratio: 2/3;
+    background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+    border-radius: var(--radius-md);
+}
+
+@keyframes shimmer {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}
+
+.hero-wrapper {
+    position: relative;
+}
+
+.library-mode-btn.icon-only {
+    position: absolute;
+    bottom: 2rem;
+    right: 2rem;
+    z-index: 50;
+}
+
+
+.hero-mode-switch .library-mode-btn {
+    backdrop-filter: blur(10px);
+}
+
+.local-filters {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1rem;
+    flex-wrap: wrap;
+}
+
+.filter-btn {
+    padding: 0.4rem 0.9rem;
+    border-radius: 999px;
+    background: rgba(255,255,255,0.06);
+    border: 1px solid rgba(255,255,255,0.12);
+    color: #bbb;
+    cursor: pointer;
+}
+
+.filter-btn.active {
+    background: var(--color-primary);
+    color: white;
+    border-color: var(--color-primary);
+}

desktop/views/gallery/gallery.html

@@ -27,70 +27,6 @@
     </div>
 </div>
 
-<nav class="navbar" id="navbar">
-    <a href="#" class="nav-brand">
-        <div class="brand-icon">
-            <img src="/public/assets/waifuboards.ico" alt="WF Logo">
-        </div>
-        WaifuBoard
-    </a>
-
-    <div class="nav-center">
-        <button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
-        <button class="nav-button" onclick="window.location.href='/books'">Books</button>
-        <button class="nav-button active">Gallery</button>
-        <button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
-        <button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
-        <button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
-    </div>
-
-    <!-- Mejorado el contenedor de usuario con dropdown más completo -->
-    <div class="nav-right">
-        <div class="search-wrapper">
-            <input type="text" id="main-search-input" class="search-input" placeholder="Search in gallery..." autocomplete="off">
-            <div class="search-results">
-                <button id="favorites-toggle-nav" class="fav-toggle-btn" title="Mostrar favoritos" style="margin: 10px; width: auto; font-size: 0.85rem;">
-                    <i class="far fa-heart"></i>
-                    <span class="fav-text">Favorites Mode</span>
-                </button>
-            </div>
-        </div>
-
-        <div class="nav-user" id="nav-user" style="display:none;">
-            <div class="user-avatar-btn">
-                <img id="nav-avatar" src="/placeholder.svg" alt="avatar">
-                <div class="online-indicator"></div>
-            </div>
-
-            <div class="nav-dropdown" id="nav-dropdown">
-                <div class="dropdown-header">
-                    <img id="dropdown-avatar" src="/placeholder.svg" alt="avatar" class="dropdown-avatar">
-                    <div class="dropdown-user-info">
-                        <div class="dropdown-username" id="nav-username"></div>
-                    </div>
-                </div>
-
-                <a href="/my-list" class="dropdown-item">
-                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
-                        <polyline points="17 21 17 13 7 13 7 21"/>
-                        <polyline points="7 3 7 8 15 8"/>
-                    </svg>
-                    <span>My List</span>
-                </a>
-                <button class="dropdown-item logout-item" id="nav-logout">
-                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
-                        <polyline points="16 17 21 12 16 7"/>
-                        <line x1="21" y1="12" x2="9" y2="12"/>
-                    </svg>
-                    <span>Logout</span>
-                </button>
-            </div>
-        </div>
-    </div>
-</nav>
-
 <main class="gallery-main">
     <div class="gallery-hero-placeholder"></div>
 

desktop/views/gallery/image.html

@@ -26,65 +26,6 @@
   </div>
 </div>
 
-<nav class="navbar" id="navbar">
-  <a href="#" class="nav-brand">
-    <div class="brand-icon">
-      <img src="/public/assets/waifuboards.ico" alt="WF Logo">
-    </div>
-    WaifuBoard
-  </a>
-
-  <div class="nav-center">
-    <button class="nav-button">Anime</button>
-    <button class="nav-button" onclick="window.location.href='/books'">Books</button>
-    <button class="nav-button active" onclick="window.location.href='/gallery'">Gallery</button>
-    <button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
-    <button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
-    <button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
-  </div>
-
-  <!-- Mejorado el contenedor de usuario con dropdown más completo -->
-  <div class="nav-right">
-    <div class="search-wrapper" id="global-search-wrapper" style="visibility: hidden;width: 250px;">
-      <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
-      <input type="text" class="search-input" placeholder="Search site..." autocomplete="off">
-      <div class="search-results"></div>
-    </div>
-
-    <div class="nav-user" id="nav-user" style="display:none;">
-      <div class="user-avatar-btn">
-        <img id="nav-avatar" src="/placeholder.svg" alt="avatar">
-        <div class="online-indicator"></div>
-      </div>
-
-      <div class="nav-dropdown" id="nav-dropdown">
-        <div class="dropdown-header">
-          <img id="dropdown-avatar" src="/placeholder.svg" alt="avatar" class="dropdown-avatar">
-          <div class="dropdown-user-info">
-            <div class="dropdown-username" id="nav-username"></div>
-          </div>
-        </div>
-
-        <a href="/my-list" class="dropdown-item">
-          <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-            <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
-            <polyline points="17 21 17 13 7 13 7 21"/>
-            <polyline points="7 3 7 8 15 8"/>
-          </svg>
-          <span>My List</span>
-        </a>
-        <button class="dropdown-item logout-item" id="nav-logout">
-          <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
-            <polyline points="16 17 21 12 16 7"/>
-            <line x1="21" y1="12" x2="9" y2="12"/>
-          </svg>
-          <span>Logout</span>
-        </button>
-      </div>
-    </div>
-  </div>
-</nav>
 <a href="/gallery" class="back-btn">
   <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
   Back to Gallery

desktop/views/list.html

@@ -25,68 +25,6 @@
     </div>
 </div>
 
-<nav class="navbar" id="navbar">
-    <a href="#" class="nav-brand">
-        <div class="brand-icon">
-            <img src="/public/assets/waifuboards.ico" alt="WF Logo">
-        </div>
-        WaifuBoard
-    </a>
-
-    <div class="nav-center">
-        <button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
-        <button class="nav-button" onclick="window.location.href='/books'">Books</button>
-        <button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
-        <button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
-        <button class="nav-button active">My List</button>
-        <button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
-    </div>
-
-    <div class="nav-right">
-        <div class="search-wrapper" style="visibility: hidden;">
-            <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                <circle cx="11" cy="11" r="8"/>
-                <path d="M21 21l-4.35-4.35"/>
-            </svg>
-            <input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
-            <div class="search-results" id="search-results"></div>
-        </div>
-
-        <div class="nav-user" id="nav-user" style="display:none;">
-            <div class="user-avatar-btn">
-                <img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
-                <div class="online-indicator"></div>
-            </div>
-
-            <div class="nav-dropdown" id="nav-dropdown">
-                <div class="dropdown-header">
-                    <img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
-                    <div class="dropdown-user-info">
-                        <div class="dropdown-username" id="nav-username"></div>
-                    </div>
-                </div>
-
-                <a href="/my-list" class="dropdown-item">
-                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
-                        <polyline points="17 21 17 13 7 13 7 21"/>
-                        <polyline points="7 3 7 8 15 8"/>
-                    </svg>
-                    <span>My List</span>
-                </a>
-                <button class="dropdown-item logout-item" id="nav-logout">
-                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
-                        <polyline points="16 17 21 12 16 7"/>
-                        <line x1="21" y1="12" x2="9" y2="12"/>
-                    </svg>
-                    <span>Logout</span>
-                </button>
-            </div>
-        </div>
-    </div>
-</nav>
-
 <div class="container">
     <div class="header-section">
         <h1 class="page-title">My List</h1>
@@ -189,77 +127,6 @@
     <div id="list-container" class="list-grid"></div>
 </div>
 
-<div class="modal-overlay" id="add-list-modal">
-    <div class="modal-content">
-        <button class="modal-close" onclick="window.ListModalManager.close()">✕</button>
-        <h2 class="modal-title" id="modal-title">Edit List Entry</h2>
-
-        <div class="modal-body">
-            <div class="modal-fields-grid">
-
-                <div class="form-group">
-                    <label>Status</label>
-                    <select id="entry-status" class="form-input">
-                        <option value="CURRENT">Current</option>
-                        <option value="COMPLETED">Completed</option>
-                        <option value="PLANNING">Planning</option>
-                        <option value="PAUSED">Paused</option>
-                        <option value="DROPPED">Dropped</option>
-                        <option value="REPEATING">Rewatching/Rereading</option>
-                    </select>
-                </div>
-
-                <div class="form-group">
-                    <label for="entry-progress" id="progress-label">Progress</label>
-                    <input type="number" id="entry-progress" class="form-input" min="0">
-                </div>
-
-                <div class="form-group">
-                    <label>Score (0-10)</label>
-                    <input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1">
-                </div>
-
-                <div class="form-group full-width">
-                    <div class="date-group">
-                        <div class="date-input-pair">
-                            <label for="entry-start-date">Start Date</label>
-                            <input type="date" id="entry-start-date" class="form-input">
-                        </div>
-                        <div class="date-input-pair">
-                            <label for="entry-end-date">End Date</label>
-                            <input type="date" id="entry-end-date" class="form-input">
-                        </div>
-                    </div>
-                </div>
-
-                <div class="form-group">
-                    <label for="entry-repeat-count">Repeat Count</label>
-                    <input type="number" id="entry-repeat-count" class="form-input" min="0">
-                </div>
-
-                <div class="form-group notes-group">
-                    <label for="entry-notes">Notes</label>
-                    <textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
-                </div>
-
-                <div class="form-group checkbox-group">
-                    <input type="checkbox" id="entry-is-private" class="form-checkbox">
-                    <label for="entry-is-private">Mark as Private</label>
-                </div>
-
-            </div>
-        </div>
-
-        <div class="modal-actions">
-            <button class="btn-secondary" onclick="window.ListModalManager.close()">Cancel</button>
-
-            <button class="btn-danger" id="modal-delete-btn" style="display:none;">Delete</button>
-
-            <button class="btn-primary" id="modal-save-btn">Save Changes</button>
-        </div>
-    </div>
-</div>
-
 <div id="updateToast" class="hidden">
     <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
     <a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">

desktop/views/marketplace.html

@@ -24,68 +24,6 @@
     </div>
 </div>
 
-<nav class="navbar" id="navbar">
-    <a href="#" class="nav-brand">
-        <div class="brand-icon">
-            <img src="/public/assets/waifuboards.ico" alt="WF Logo">
-        </div>
-        WaifuBoard
-    </a>
-
-    <div class="nav-center">
-        <button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
-        <button class="nav-button" onclick="window.location.href='/books'">Books</button>
-        <button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
-        <button class="nav-button" onclick="window.location.href='/schedule.html'">Schedule</button>
-        <button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
-        <button class="nav-button">Marketplace</button>
-    </div>
-
-    <div class="nav-right">
-        <div class="search-wrapper" style="visibility: hidden;">
-            <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                <circle cx="11" cy="11" r="8"/>
-                <path d="M21 21l-4.35-4.35"/>
-            </svg>
-            <input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
-            <div class="search-results" id="search-results"></div>
-        </div>
-
-        <div class="nav-user" id="nav-user" style="display:none;">
-            <div class="user-avatar-btn">
-                <img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
-                <div class="online-indicator"></div>
-            </div>
-
-            <div class="nav-dropdown" id="nav-dropdown">
-                <div class="dropdown-header">
-                    <img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
-                    <div class="dropdown-user-info">
-                        <div class="dropdown-username" id="nav-username"></div>
-                    </div>
-                </div>
-
-                <a href="/my-list" class="dropdown-item">
-                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
-                        <polyline points="17 21 17 13 7 13 7 21"/>
-                        <polyline points="7 3 7 8 15 8"/>
-                    </svg>
-                    <span>My List</span>
-                </a>
-                <button class="dropdown-item logout-item" id="nav-logout">
-                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
-                        <polyline points="16 17 21 12 16 7"/>
-                        <line x1="21" y1="12" x2="9" y2="12"/>
-                    </svg>
-                    <span>Logout</span>
-                </button>
-            </div>
-        </div>
-    </div>
-</nav>
-
 <div class="hero-spacer"></div>
 
 <main>

desktop/views/schedule.html

@@ -29,68 +29,6 @@
 
     <div class="ambient-bg" id="ambientBg"></div>
 
-<nav class="navbar" id="navbar">
-    <a href="#" class="nav-brand">
-        <div class="brand-icon">
-            <img src="/public/assets/waifuboards.ico" alt="WF Logo">
-        </div>
-        WaifuBoard
-    </a>
-
-    <div class="nav-center">
-        <button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
-        <button class="nav-button" onclick="window.location.href='/books'">Books</button>
-        <button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
-        <button class="nav-button active">Schedule</button>
-        <button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
-        <button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
-    </div>
-
-    <div class="nav-right">
-        <div class="search-wrapper" style="visibility: hidden;">
-            <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                <circle cx="11" cy="11" r="8"/>
-                <path d="M21 21l-4.35-4.35"/>
-            </svg>
-            <input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
-            <div class="search-results" id="search-results"></div>
-        </div>
-
-        <div class="nav-user" id="nav-user" style="display:none;">
-            <div class="user-avatar-btn">
-                <img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
-                <div class="online-indicator"></div>
-            </div>
-
-            <div class="nav-dropdown" id="nav-dropdown">
-                <div class="dropdown-header">
-                    <img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
-                    <div class="dropdown-user-info">
-                        <div class="dropdown-username" id="nav-username"></div>
-                    </div>
-                </div>
-
-                <a href="/my-list" class="dropdown-item">
-                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
-                        <polyline points="17 21 17 13 7 13 7 21"/>
-                        <polyline points="7 3 7 8 15 8"/>
-                    </svg>
-                    <span>My List</span>
-                </a>
-                <button class="dropdown-item logout-item" id="nav-logout">
-                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
-                        <polyline points="16 17 21 12 16 7"/>
-                        <line x1="21" y1="12" x2="9" y2="12"/>
-                    </svg>
-                    <span>Logout</span>
-                </button>
-            </div>
-        </div>
-    </div>
-</nav>
-
     <div class="calendar-wrapper">
         <div class="calendar-controls">
             <div class="month-selector">

docker/package-lock.json

@@ -10,11 +10,14 @@
       "license": "ISC",
       "dependencies": {
         "@fastify/static": "^8.3.0",
+        "adm-zip": "^0.5.16",
         "bcrypt": "^6.0.0",
         "bindings": "^1.5.0",
         "cheerio": "^1.1.2",
         "dotenv": "^17.2.3",
+        "epub": "^1.3.0",
         "fastify": "^5.6.2",
+        "js-yaml": "^4.1.1",
         "jsonwebtoken": "^9.0.3",
         "node-addon-api": "^8.5.0",
         "node-cron": "^4.2.1",
@@ -22,6 +25,7 @@
         "sqlite3": "^5.1.7"
       },
       "devDependencies": {
+        "@types/adm-zip": "^0.5.7",
         "@types/bcrypt": "^6.0.0",
         "@types/jsonwebtoken": "^9.0.10",
         "@types/node": "^24.0.0",
@@ -401,6 +405,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/adm-zip": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@types/adm-zip/-/adm-zip-0.5.7.tgz",
+      "integrity": "sha512-DNEs/QvmyRLurdQPChqq0Md4zGvPwHerAJYWk9l2jCbD1VPpnzRJorOdiq4zsw09NFbYnhfsoEhWtxIzXpn2yw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/bcrypt": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/@types/bcrypt/-/bcrypt-6.0.0.tgz",
@@ -481,6 +495,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/adm-zip": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.5.16.tgz",
+      "integrity": "sha512-TGw5yVi4saajsSEgz25grObGHEUaDrniwvA2qwSC060KfqGPdglhvPMA2lPIoxs3PQIItj2iag35fONcQqgUaQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0"
+      }
+    },
     "node_modules/agent-base": {
       "version": "7.1.4",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
@@ -604,6 +627,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "license": "Python-2.0"
+    },
     "node_modules/atomic-sleep": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/atomic-sleep/-/atomic-sleep-1.0.0.tgz",
@@ -846,6 +875,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/code-point-at": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+      "integrity": "sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -913,6 +952,13 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/create-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
@@ -1190,6 +1236,27 @@
         "node": ">=6"
       }
     },
+    "node_modules/epub": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/epub/-/epub-1.3.0.tgz",
+      "integrity": "sha512-6BL8gIitljkTf4HW52Ast6wenPTkMKllU28bRc5awVsT+xCaPl6nWSaqSmHbRgPrl1+5uekOPvOxy7DQzbhM8Q==",
+      "dependencies": {
+        "adm-zip": "^0.4.11",
+        "xml2js": "^0.4.23"
+      },
+      "optionalDependencies": {
+        "zipfile": "^0.5.11"
+      }
+    },
+    "node_modules/epub/node_modules/adm-zip": {
+      "version": "0.4.16",
+      "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.16.tgz",
+      "integrity": "sha512-TFi4HBKSGfIKsK5YCkKaaFG2m4PEDyViZmEwof3MTIgzimHLto6muaHVpbrljdIvIrFZzEq/p4nafOeLcYegrg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.3.0"
+      }
+    },
     "node_modules/err-code": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz",
@@ -1673,6 +1740,29 @@
       ],
       "license": "BSD-3-Clause"
     },
+    "node_modules/ignore-walk": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.4.tgz",
+      "integrity": "sha512-PY6Ii8o1jMRA1z4F2hRkH/xN59ox43DavKvD3oDpfurRlOJyAHpifIwpbdv1n4jt4ov0jSpw3kQ4GhJnpBL6WQ==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "minimatch": "^3.0.4"
+      }
+    },
+    "node_modules/ignore-walk/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -1759,6 +1849,13 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -1780,6 +1877,18 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/js-yaml": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/json-schema-ref-resolver": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-ref-resolver/-/json-schema-ref-resolver-3.0.0.tgz",
@@ -2194,12 +2303,60 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "license": "MIT"
     },
+    "node_modules/nan": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.10.0.tgz",
+      "integrity": "sha512-bAdJv7fBLhWC+/Bls0Oza+mvTaNQtP+1RyhhhvD95pgUJz6XM5IzgmxOkItJ9tkoCiplvAnXI1tNmmUD/eScyA==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/napi-build-utils": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-2.0.0.tgz",
       "integrity": "sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==",
       "license": "MIT"
     },
+    "node_modules/needle": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/needle/-/needle-2.9.1.tgz",
+      "integrity": "sha512-6R9fqJ5Zcmf+uYaFgdIHmLwNldn5HbK8L5ybn7Uz+ylX/rnOsSp1AHcvQSrCaFN+qNM1wpymHqD7mVasEOlHGQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "debug": "^3.2.6",
+        "iconv-lite": "^0.4.4",
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "needle": "bin/needle"
+      },
+      "engines": {
+        "node": ">= 4.4.x"
+      }
+    },
+    "node_modules/needle/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/needle/node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/negotiator": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
@@ -2352,6 +2509,348 @@
         "node": ">=18"
       }
     },
+    "node_modules/node-pre-gyp": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.10.3.tgz",
+      "integrity": "sha512-d1xFs+C/IPS8Id0qPTZ4bUT8wWryfR/OzzAFxweG+uLN85oPzyo2Iw6bVlLQ/JOdgNonXLCoRyqDzDWq4iw72A==",
+      "deprecated": "Please upgrade to @mapbox/node-pre-gyp: the non-scoped node-pre-gyp package is deprecated and only the @mapbox scoped package will recieve updates in the future",
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^1.0.2",
+        "mkdirp": "^0.5.1",
+        "needle": "^2.2.1",
+        "nopt": "^4.0.1",
+        "npm-packlist": "^1.1.6",
+        "npmlog": "^4.0.2",
+        "rc": "^1.2.7",
+        "rimraf": "^2.6.1",
+        "semver": "^5.3.0",
+        "tar": "^4"
+      },
+      "bin": {
+        "node-pre-gyp": "bin/node-pre-gyp"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/node-pre-gyp/node_modules/ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/aproba": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
+      "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/node-pre-gyp/node_modules/are-we-there-yet": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.7.tgz",
+      "integrity": "sha512-nxwy40TuMiUGqMyRHgCSWZ9FM4VAoRP4xUYSTv5ImRog+h9yISPbVH7H8fASCIzYn9wlEv4zvFL7uKDMCFQm3g==",
+      "deprecated": "This package is no longer supported.",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "delegates": "^1.0.0",
+        "readable-stream": "^2.0.6"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/node-pre-gyp/node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/fs-minipass": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.7.tgz",
+      "integrity": "sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "minipass": "^2.6.0"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/gauge": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+      "integrity": "sha512-14x4kjc6lkD3ltw589k0NrPD6cCNTD6CWoVUNpB85+DrtONoZn+Rug6xZU5RvSC4+TZPxA5AnBibQYAvZn41Hg==",
+      "deprecated": "This package is no longer supported.",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "aproba": "^1.0.3",
+        "console-control-strings": "^1.0.0",
+        "has-unicode": "^2.0.0",
+        "object-assign": "^4.1.0",
+        "signal-exit": "^3.0.0",
+        "string-width": "^1.0.1",
+        "strip-ansi": "^3.0.1",
+        "wide-align": "^1.1.0"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/is-fullwidth-code-point": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+      "integrity": "sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "number-is-nan": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/minipass": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz",
+      "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "safe-buffer": "^5.1.2",
+        "yallist": "^3.0.0"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/minizlib": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.3.3.tgz",
+      "integrity": "sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "minipass": "^2.9.0"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/nopt": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz",
+      "integrity": "sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "abbrev": "1",
+        "osenv": "^0.1.4"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/npmlog": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
+      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
+      "deprecated": "This package is no longer supported.",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "are-we-there-yet": "~1.1.2",
+        "console-control-strings": "~1.1.0",
+        "gauge": "~2.7.3",
+        "set-blocking": "~2.0.0"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/readable-stream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/node-pre-gyp/node_modules/rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/node-pre-gyp/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/string_decoder/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/node-pre-gyp/node_modules/string-width": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+      "integrity": "sha512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "code-point-at": "^1.0.0",
+        "is-fullwidth-code-point": "^1.0.0",
+        "strip-ansi": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/strip-ansi": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "ansi-regex": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/tar": {
+      "version": "4.4.19",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.19.tgz",
+      "integrity": "sha512-a20gEsvHnWe0ygBY8JbxoM4w3SJdhc7ZAuxkLqh+nvNQN2IOt0B5lLgM490X5Hl8FF0dl0tOf2ewFYAlIFgzVA==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "chownr": "^1.1.4",
+        "fs-minipass": "^1.2.7",
+        "minipass": "^2.9.0",
+        "minizlib": "^1.3.3",
+        "mkdirp": "^0.5.5",
+        "safe-buffer": "^5.2.1",
+        "yallist": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=4.5"
+      }
+    },
+    "node_modules/node-pre-gyp/node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/nopt": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-9.0.0.tgz",
@@ -2368,6 +2867,35 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
+    "node_modules/npm-bundled": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.2.tgz",
+      "integrity": "sha512-x5DHup0SuyQcmL3s7Rx/YQ8sbw/Hzg0rj48eN0dV7hf5cmQq5PXIeioroH3raV1QC1yh3uTYuMThvEQF3iKgGQ==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "npm-normalize-package-bin": "^1.0.1"
+      }
+    },
+    "node_modules/npm-normalize-package-bin": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz",
+      "integrity": "sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/npm-packlist": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz",
+      "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "ignore-walk": "^3.0.1",
+        "npm-bundled": "^1.0.1",
+        "npm-normalize-package-bin": "^1.0.1"
+      }
+    },
     "node_modules/npmlog": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-6.0.2.tgz",
@@ -2397,6 +2925,26 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/number-is-nan": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+      "integrity": "sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/on-exit-leak-free": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/on-exit-leak-free/-/on-exit-leak-free-2.1.2.tgz",
@@ -2415,6 +2963,38 @@
         "wrappy": "1"
       }
     },
+    "node_modules/os-homedir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+      "integrity": "sha512-B5JU3cabzk8c67mRRd3ECmROafjYMXbuzlwtqdM8IbS8ktlTix8aFGb2bAGKrSRIlnfKwovGUUr72JUPyOb6kQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/os-tmpdir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/osenv": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+      "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
+      "deprecated": "This package is no longer supported.",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "os-homedir": "^1.0.0",
+        "os-tmpdir": "^1.0.0"
+      }
+    },
     "node_modules/p-map": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/p-map/-/p-map-7.0.4.tgz",
@@ -2632,6 +3212,13 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/process-warning": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/process-warning/-/process-warning-5.0.0.tgz",
@@ -2873,6 +3460,12 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "license": "MIT"
     },
+    "node_modules/sax": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.3.tgz",
+      "integrity": "sha512-yqYn1JhPczigF94DMS+shiDMjDowYO6y9+wB/4WgO0Y19jWYk0lQ4tuG5KI7kj4FTp1wxPj5IFfcrz/s1c3jjQ==",
+      "license": "BlueOak-1.0.0"
+    },
     "node_modules/secure-json-parse": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/secure-json-parse/-/secure-json-parse-4.1.0.tgz",
@@ -3965,6 +4558,28 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "license": "ISC"
     },
+    "node_modules/xml2js": {
+      "version": "0.4.23",
+      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
+      "integrity": "sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==",
+      "license": "MIT",
+      "dependencies": {
+        "sax": ">=0.6.0",
+        "xmlbuilder": "~11.0.0"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/xmlbuilder": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
+      "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -3980,6 +4595,20 @@
       "engines": {
         "node": ">=6"
       }
+    },
+    "node_modules/zipfile": {
+      "version": "0.5.12",
+      "resolved": "https://registry.npmjs.org/zipfile/-/zipfile-0.5.12.tgz",
+      "integrity": "sha512-zA60gW+XgQBu/Q4qV3BCXNIDRald6Xi5UOPj3jWGlnkjmBHaKDwIz7kyXWV3kq7VEsQN/2t/IWjdXdKeVNm6Eg==",
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "nan": "~2.10.0",
+        "node-pre-gyp": "~0.10.2"
+      },
+      "bin": {
+        "unzip.js": "bin/unzip.js"
+      }
     }
   }
 }

docker/package.json

@@ -13,11 +13,14 @@
   "type": "commonjs",
   "dependencies": {
     "@fastify/static": "^8.3.0",
+    "adm-zip": "^0.5.16",
     "bcrypt": "^6.0.0",
     "bindings": "^1.5.0",
     "cheerio": "^1.1.2",
     "dotenv": "^17.2.3",
+    "epub": "^1.3.0",
     "fastify": "^5.6.2",
+    "js-yaml": "^4.1.1",
     "jsonwebtoken": "^9.0.3",
     "node-addon-api": "^8.5.0",
     "node-cron": "^4.2.1",
@@ -25,6 +28,7 @@
     "sqlite3": "^5.1.7"
   },
   "devDependencies": {
+    "@types/adm-zip": "^0.5.7",
     "@types/bcrypt": "^6.0.0",
     "@types/jsonwebtoken": "^9.0.10",
     "@types/node": "^24.0.0",

docker/server.js

@@ -10,6 +10,7 @@ const { initDatabase } = require("./dist/shared/database");
 const { loadExtensions } = require("./dist/shared/extensions");
 const {refreshTrendingAnime, refreshTopAiringAnime} = require("./dist/api/anime/anime.service");
 const {refreshPopularBooks, refreshTrendingBooks} = require("./dist/api/books/books.service");
+const { ensureConfigFile } = require("./dist/shared/config");
 const dotenv = require("dotenv");
 
 dotenv.config();
@@ -23,6 +24,8 @@ const galleryRoutes = require("./dist/api/gallery/gallery.routes");
 const userRoutes = require("./dist/api/user/user.routes");
 const listRoutes = require("./dist/api/list/list.routes");
 const anilistRoute = require("./dist/api/anilist/anilist");
+const localRoutes = require("./dist/api/local/local.routes");
+const configRoutes = require("./dist/api/config/config.routes");
 
 fastify.addHook("preHandler", async (request) => {
   const auth = request.headers.authorization;
@@ -63,15 +66,19 @@ fastify.register(galleryRoutes, { prefix: "/api" });
 fastify.register(userRoutes, { prefix: "/api" });
 fastify.register(anilistRoute, { prefix: "/api" });
 fastify.register(listRoutes, { prefix: "/api" });
+fastify.register(localRoutes, { prefix: "/api" });
+fastify.register(configRoutes, { prefix: "/api" });
 
 const sleep = ms => new Promise(r => setTimeout(r, ms));
 
 const start = async () => {
   try {
+    ensureConfigFile()
     initDatabase("anilist");
     initDatabase("favorites");
     initDatabase("cache");
     initDatabase("userdata");
+    initDatabase("local_library");
 
     const refreshAll = async () => {
       await refreshTrendingAnime();

docker/src/api/config/config.controller.ts

@@ -0,0 +1,43 @@
+import {FastifyReply, FastifyRequest} from 'fastify';
+import {getConfig, setConfig} from '../../shared/config';
+
+export async function getFullConfig(req: FastifyRequest, reply: FastifyReply) {
+    try {
+        return getConfig();
+    } catch (err) {
+        return { error: "Error loading config" };
+    }
+}
+
+export async function getConfigSection(req: FastifyRequest<{ Params: { section: string } }>, reply: FastifyReply) {
+    try {
+        const { section } = req.params;
+        const config = getConfig();
+
+        if (config[section] === undefined) {
+            return { error: "Section not found" };
+        }
+
+        return { [section]: config[section] };
+    } catch (err) {
+        return { error: "Error loading config section" };
+    }
+}
+
+export async function updateConfig(req: FastifyRequest<{ Body: any }>, reply: FastifyReply) {
+    try {
+        return setConfig(req.body);
+    } catch (err) {
+        return { error: "Error updating config" };
+    }
+}
+
+export async function updateConfigSection(req: FastifyRequest<{ Params: { section: string }, Body: any }>, reply: FastifyReply) {
+    try {
+        const { section } = req.params;
+        const updatedConfig = setConfig({ [section]: req.body });
+        return { [section]: updatedConfig[section] };
+    } catch (err) {
+        return { error: "Error updating config section" };
+    }
+}

docker/src/api/config/config.routes.ts

@@ -0,0 +1,11 @@
+import { FastifyInstance } from 'fastify';
+import * as controller from './config.controller';
+
+async function configRoutes(fastify: FastifyInstance) {
+    fastify.get('/config', controller.getFullConfig);
+    fastify.get('/config/:section', controller.getConfigSection);
+    fastify.post('/config', controller.updateConfig);
+    fastify.post('/config/:section', controller.updateConfigSection);
+}
+
+export default configRoutes;

docker/src/api/local/local.controller.ts

@@ -0,0 +1,185 @@
+import {FastifyReply, FastifyRequest} from 'fastify';
+import fs from 'fs';
+import * as service from './local.service';
+
+type ScanQuery = {
+    mode?: 'full' | 'incremental';
+};
+
+type Params = {
+    type: 'anime' | 'manga' | 'novels';
+    id?: string;
+};
+
+type MatchBody = {
+    source: 'anilist';
+    matched_id: number | null;
+};
+
+export async function scanLibrary(request: FastifyRequest<{ Querystring: ScanQuery }>, reply: FastifyReply) {
+    try {
+        const mode = request.query.mode || 'incremental';
+        return await service.performLibraryScan(mode);
+    } catch (err: any) {
+        if (err.message === 'NO_LIBRARY_CONFIGURED') {
+            return reply.status(400).send({ error: 'NO_LIBRARY_CONFIGURED' });
+        }
+        return reply.status(500).send({ error: 'FAILED_TO_SCAN_LIBRARY' });
+    }
+}
+
+export async function listEntries(request: FastifyRequest<{ Params: Params }>, reply: FastifyReply) {
+    try {
+        const { type } = request.params;
+        const entries = await service.getEntriesByType(type);
+        return entries;
+    } catch {
+        return reply.status(500).send({ error: 'FAILED_TO_LIST_ENTRIES' });
+    }
+}
+
+export async function getEntry(request: FastifyRequest<{ Params: Params }>, reply: FastifyReply) {
+    try {
+        const { type, id } = request.params as { type: string, id: string };
+        const entry = await service.getEntryDetails(type, id);
+
+        if (!entry) {
+            return reply.status(404).send({ error: 'ENTRY_NOT_FOUND' });
+        }
+
+        return entry;
+    } catch {
+        return reply.status(500).send({ error: 'FAILED_TO_GET_ENTRY' });
+    }
+}
+
+export async function streamUnit(request: FastifyRequest, reply: FastifyReply) {
+    const { id, unit } = request.params as any;
+
+    const fileInfo = await service.getFileForStreaming(id, unit);
+
+    if (!fileInfo) {
+        return reply.status(404).send({ error: 'FILE_NOT_FOUND' });
+    }
+
+    const { filePath, stat } = fileInfo;
+    const range = request.headers.range;
+
+    if (!range) {
+        reply
+            .header('Content-Length', stat.size)
+            .header('Content-Type', 'video/mp4');
+        return fs.createReadStream(filePath);
+    }
+
+    const parts = range.replace(/bytes=/, '').split('-');
+    const start = Number(parts[0]);
+    const end = parts[1] ? Number(parts[1]) : stat.size - 1;
+
+    if (
+        Number.isNaN(start) ||
+        Number.isNaN(end) ||
+        start < 0 ||
+        start >= stat.size ||
+        end < start ||
+        end >= stat.size
+    ) {
+        return reply.status(416).send({ error: 'INVALID_RANGE' });
+    }
+
+    const contentLength = end - start + 1;
+
+    reply
+        .status(206)
+        .header('Content-Range', `bytes ${start}-${end}/${stat.size}`)
+        .header('Accept-Ranges', 'bytes')
+        .header('Content-Length', contentLength)
+        .header('Content-Type', 'video/mp4');
+
+    return fs.createReadStream(filePath, { start, end });
+}
+
+export async function matchEntry(
+    request: FastifyRequest<{ Body: MatchBody }>,
+    reply: FastifyReply
+) {
+    const { id, type } = request.params as any;
+    const { source, matched_id } = request.body;
+
+    const result = await service.updateEntryMatch(id, type, source, matched_id);
+
+    if (!result) {
+        return reply.status(404).send({ error: 'ENTRY_NOT_FOUND' });
+    }
+
+    return result;
+}
+
+export async function getUnits(request: FastifyRequest<{ Params: Params }>, reply: FastifyReply) {
+    try {
+        const { id } = request.params as { id: string };
+        const units = await service.getEntryUnits(id);
+
+        if (!units) {
+            return reply.status(404).send({ error: 'ENTRY_NOT_FOUND' });
+        }
+
+        return units;
+    } catch (err) {
+        console.error('Error getting units:', err);
+        return reply.status(500).send({ error: 'FAILED_TO_GET_UNITS' });
+    }
+}
+
+export async function getManifest(request: FastifyRequest, reply: FastifyReply) {
+    const { unitId } = request.params as any;
+
+    try {
+        const manifest = await service.getUnitManifest(unitId);
+
+        if (!manifest) {
+            return reply.status(404).send({ error: 'FILE_NOT_FOUND' });
+        }
+
+        return manifest;
+    } catch (err: any) {
+        if (err.message === 'UNSUPPORTED_FORMAT') {
+            return reply.status(400).send({ error: 'UNSUPPORTED_FORMAT' });
+        }
+        return reply.status(500).send({ error: 'FAILED_TO_GET_MANIFEST' });
+    }
+}
+
+export async function getPage(request: FastifyRequest, reply: FastifyReply) {
+    const { unitId, resId } = request.params as any;
+
+    const resource = await service.getUnitResource(unitId, resId);
+
+    if (!resource) {
+        return reply.status(404).send();
+    }
+
+    if (resource.type === 'image') {
+        if (resource.data) {
+            return reply
+                .header('Content-Type', 'image/jpeg')
+                .send(resource.data);
+        }
+
+        if (resource.path && resource.size) {
+            reply
+                .header('Content-Length', resource.size)
+                .header('Content-Type', 'image/jpeg');
+
+            return fs.createReadStream(resource.path);
+        }
+    }
+
+    if (resource.type === 'html') {
+        return reply
+            .header('Content-Type', 'text/html; charset=utf-8')
+            .send(resource.data);
+    }
+
+    return reply.status(400).send();
+}

docker/src/api/local/local.routes.ts

@@ -0,0 +1,15 @@
+import { FastifyInstance } from 'fastify';
+import * as controller from './local.controller';
+
+async function localRoutes(fastify: FastifyInstance) {
+    fastify.post('/library/scan', controller.scanLibrary);
+    fastify.get('/library/:type', controller.listEntries);
+    fastify.get('/library/:type/:id', controller.getEntry);
+    fastify.get('/library/stream/:type/:id/:unit', controller.streamUnit);
+    fastify.post('/library/:type/:id/match', controller.matchEntry);
+    fastify.get('/library/:id/units', controller.getUnits);
+    fastify.get('/library/:unitId/manifest', controller.getManifest);
+    fastify.get('/library/:unitId/resource/:resId', controller.getPage);
+}
+
+export default localRoutes;

docker/src/api/local/local.service.ts

@@ -0,0 +1,454 @@
+import { getConfig as loadConfig } from '../../shared/config.js';
+import { queryOne, queryAll, run } from '../../shared/database.js';
+import crypto from 'crypto';
+import fs from "fs";
+import { PathLike } from "node:fs";
+import path from "path";
+import { getAnimeById, searchAnimeLocal } from "../anime/anime.service";
+import { getBookById, searchBooksAniList } from "../books/books.service";
+import AdmZip from 'adm-zip';
+import EPub from 'epub';
+
+const MANGA_IMAGE_EXTS = ['.jpg', '.jpeg', '.png', '.webp'];
+const MANGA_ARCHIVES = ['.cbz', '.cbr', '.zip'];
+const NOVEL_EXTS = ['.epub', '.pdf', '.txt', '.md', '.docx', '.mobi'];
+
+export async function resolveEntryMetadata(entry: any, type: string) {
+    let metadata = null;
+    let matchedId = entry.matched_id;
+
+    if (!matchedId) {
+        const query = entry.folder_name;
+
+        const results = type === 'anime'
+            ? await searchAnimeLocal(query)
+            : await searchBooksAniList(query);
+
+        let picked = null;
+
+        if (type !== 'anime' && Array.isArray(results)) {
+            console.log(type);
+            if (entry.type === 'novels') {
+                picked = results.find(r => r.format === 'NOVEL');
+            } else if (entry.type === 'manga') {
+                picked = results.find(r => r.format !== 'NOVEL');
+            }
+        }
+
+        picked ??= results?.[0];
+
+        if (picked?.id) {
+            matchedId = picked.id;
+
+            await run(
+                `UPDATE local_entries
+                 SET matched_id = ?, matched_source = 'anilist'
+                 WHERE id = ?`,
+                [matchedId, entry.id],
+                'local_library'
+            );
+        }
+    }
+
+    if (matchedId) {
+        metadata = type === 'anime'
+            ? await getAnimeById(matchedId)
+            : await getBookById(matchedId);
+    }
+
+    return {
+        id: entry.id,
+        type: entry.type,
+        matched: !!matchedId,
+        metadata
+    };
+}
+
+export async function performLibraryScan(mode: 'full' | 'incremental' = 'incremental') {
+    const config = loadConfig();
+
+    if (!config.library) {
+        throw new Error('NO_LIBRARY_CONFIGURED');
+    }
+
+    if (mode === 'full') {
+        await run(`DELETE FROM local_files`, [], 'local_library');
+        await run(`DELETE FROM local_entries`, [], 'local_library');
+    }
+
+    for (const [type, basePath] of Object.entries(config.library)) {
+        if (!basePath || !fs.existsSync(<PathLike>basePath)) continue;
+
+        const dirs = fs.readdirSync(<string>basePath, { withFileTypes: true }).filter(d => d.isDirectory());
+
+        for (const dir of dirs) {
+            const fullPath = path.join(<string>basePath, dir.name);
+            const id = crypto.createHash('sha1').update(fullPath).digest('hex');
+            const now = Date.now();
+
+            const existing = await queryOne(`SELECT id FROM local_entries WHERE id = ?`, [id], 'local_library');
+
+            if (existing) {
+                await run(`UPDATE local_entries SET last_scan = ? WHERE id = ?`, [now, id], 'local_library');
+                await run(`DELETE FROM local_files WHERE entry_id = ?`, [id], 'local_library');
+            } else {
+                await run(
+                    `INSERT INTO local_entries (id, type, path, folder_name, last_scan) VALUES (?, ?, ?, ?, ?)`,
+                    [id, type, fullPath, dir.name, now],
+                    'local_library'
+                );
+            }
+
+            const files = fs.readdirSync(fullPath, { withFileTypes: true })
+                .filter(f =>
+                    f.isFile() ||
+                    (type === 'manga' && f.isDirectory())
+                )
+                .sort((a, b) => a.name.localeCompare(b.name));
+
+            let unit = 1;
+
+            for (const file of files) {
+                await run(
+                    `INSERT INTO local_files (id, entry_id, file_path, unit_number)
+                     VALUES (?, ?, ?, ?)`,
+                    [crypto.randomUUID(), id, path.join(fullPath, file.name), unit],
+                    'local_library'
+                );
+                unit++;
+            }
+        }
+    }
+
+    return { status: 'OK' };
+}
+
+export async function getEntriesByType(type: string) {
+    const entries = await queryAll(`SELECT * FROM local_entries WHERE type = ?`, [type], 'local_library');
+    return await Promise.all(entries.map((entry: any) => resolveEntryMetadata(entry, type)));
+}
+
+export async function getEntryDetails(type: string, id: string) {
+    const entry = await queryOne(
+        `SELECT * FROM local_entries WHERE matched_id = ? AND type = ?`,
+        [Number(id), type],
+        'local_library'
+    );
+
+    if (!entry) {
+        return null;
+    }
+
+    const [details, files] = await Promise.all([
+        resolveEntryMetadata(entry, type),
+        queryAll(
+            `SELECT id, file_path, unit_number FROM local_files WHERE entry_id = ? ORDER BY unit_number ASC`,
+            [id],
+            'local_library'
+        )
+    ]);
+
+    return { ...details, files };
+}
+
+export async function getFileForStreaming(id: string, unit: string) {
+    const file = await queryOne(
+        `SELECT file_path FROM local_files WHERE entry_id = ? AND unit_number = ?`,
+        [id, unit],
+        'local_library'
+    );
+
+    if (!file || !fs.existsSync(file.file_path)) {
+        return null;
+    }
+
+    return {
+        filePath: file.file_path,
+        stat: fs.statSync(file.file_path)
+    };
+}
+
+export async function updateEntryMatch(id: string, type: string, source: string, matchedId: number | null) {
+    const entry = await queryOne(
+        `SELECT id FROM local_entries WHERE id = ? AND type = ?`,
+        [id, type],
+        'local_library'
+    );
+
+    if (!entry) {
+        return null;
+    }
+
+    await run(
+        `UPDATE local_entries
+         SET matched_source = ?, matched_id = ?
+         WHERE id = ?`,
+        [source, matchedId, id],
+        'local_library'
+    );
+
+    return { status: 'OK', matched: !!matchedId };
+}
+
+function isImageFolder(folderPath: string): boolean {
+    if (!fs.existsSync(folderPath)) return false;
+    if (!fs.statSync(folderPath).isDirectory()) return false;
+
+    const files = fs.readdirSync(folderPath);
+    return files.some(f => MANGA_IMAGE_EXTS.includes(path.extname(f).toLowerCase()));
+}
+
+export async function getEntryUnits(id: string) {
+    const entry = await queryOne(
+        `SELECT id, type, matched_id FROM local_entries WHERE matched_id = ?`,
+        [Number(id)],
+        'local_library'
+    );
+
+    if (!entry) {
+        return null;
+    }
+
+    const files = await queryAll(
+        `SELECT id, file_path, unit_number FROM local_files 
+         WHERE entry_id = ? 
+         ORDER BY unit_number ASC`,
+        [entry.id],
+        'local_library'
+    );
+
+    const units = files
+        .map((file: any) => {
+            const fileExt = path.extname(file.file_path).toLowerCase();
+            const isDir = fs.existsSync(file.file_path) &&
+                fs.statSync(file.file_path).isDirectory();
+
+            if (entry.type === 'manga') {
+                if (MANGA_ARCHIVES.includes(fileExt)) {
+                    return {
+                        id: file.id,
+                        number: file.unit_number,
+                        name: path.basename(file.file_path),
+                        type: 'chapter',
+                        format: fileExt.replace('.', ''),
+                        path: file.file_path
+                    };
+                }
+
+                if (isDir && isImageFolder(file.file_path)) {
+                    return {
+                        id: file.id,
+                        number: file.unit_number,
+                        name: path.basename(file.file_path),
+                        type: 'chapter',
+                        format: 'folder',
+                        path: file.file_path
+                    };
+                }
+
+                return null;
+            }
+
+            if (entry.type === 'novels') {
+                if (NOVEL_EXTS.includes(fileExt)) {
+                    return {
+                        id: file.id,
+                        number: file.unit_number,
+                        name: path.basename(file.file_path),
+                        type: 'chapter',
+                        format: fileExt.replace('.', ''),
+                        path: file.file_path
+                    };
+                }
+
+                return null;
+            }
+
+            if (entry.type === 'anime') {
+                return {
+                    id: file.id,
+                    number: file.unit_number,
+                    name: path.basename(file.file_path),
+                    type: 'episode',
+                    format: fileExt.replace('.', ''),
+                    path: file.file_path
+                };
+            }
+
+            return null;
+        })
+        .filter(Boolean);
+
+    return {
+        entry_id: entry.id,
+        matched_id: entry.matched_id,
+        type: entry.type,
+        total: units.length,
+        units
+    };
+}
+
+export async function getUnitManifest(unitId: string) {
+    const file = await queryOne(
+        `SELECT file_path FROM local_files WHERE id = ?`,
+        [unitId],
+        'local_library'
+    );
+
+    if (!file || !fs.existsSync(file.file_path)) {
+        return null;
+    }
+
+    const ext = path.extname(file.file_path).toLowerCase();
+
+    if (['.cbz', '.cbr', '.zip'].includes(ext)) {
+        const zip = new AdmZip(file.file_path);
+
+        const pages = zip.getEntries()
+            .filter(e => !e.isDirectory && /\.(jpg|jpeg|png|webp)$/i.test(e.entryName))
+            .sort((a, b) => a.entryName.localeCompare(b.entryName, undefined, { numeric: true }))
+            .map((_, i) => ({
+                id: i,
+                url: `/api/library/${unitId}/resource/${i}`
+            }));
+
+        return {
+            type: 'manga',
+            format: 'archive',
+            pages
+        };
+    }
+
+    if (fs.statSync(file.file_path).isDirectory()) {
+        const pages = fs.readdirSync(file.file_path)
+            .filter(f => /\.(jpg|jpeg|png|webp)$/i.test(f))
+            .sort((a, b) => a.localeCompare(b, undefined, { numeric: true }))
+            .map((_, i) => ({
+                id: i,
+                url: `/api/library/${unitId}/resource/${i}`
+            }));
+
+        return {
+            type: 'manga',
+            format: 'folder',
+            pages
+        };
+    }
+
+    if (ext === '.epub') {
+        return {
+            type: 'ln',
+            format: 'epub',
+            url: `/api/library/${unitId}/resource/epub`
+        };
+    }
+
+    if (['.txt', '.md'].includes(ext)) {
+        return {
+            type: 'ln',
+            format: 'text',
+            url: `/api/library/${unitId}/resource/text`
+        };
+    }
+
+    if (ext === '.pdf') {
+        return {
+            type: 'ln',
+            format: 'pdf',
+            url: `/api/library/${unitId}/resource/pdf`
+        };
+    }
+
+    throw new Error('UNSUPPORTED_FORMAT');
+}
+
+export async function getUnitResource(unitId: string, resId: string) {
+    const file = await queryOne(
+        `SELECT file_path FROM local_files WHERE id = ?`,
+        [unitId],
+        'local_library'
+    );
+
+    if (!file) return null;
+
+    const ext = path.extname(file.file_path).toLowerCase();
+
+    if (['.cbz', '.zip', '.cbr'].includes(ext)) {
+        const zip = new AdmZip(file.file_path);
+        const images = zip.getEntries()
+            .filter(e => !e.isDirectory && /\.(jpg|jpeg|png|webp)$/i.test(e.entryName))
+            .sort((a, b) => a.entryName.localeCompare(b.entryName, undefined, { numeric: true }));
+
+        const entry = images[Number(resId)];
+        if (!entry) return null;
+
+        return {
+            type: 'image',
+            data: entry.getData()
+        };
+    }
+
+    if (fs.statSync(file.file_path).isDirectory()) {
+        const images = fs.readdirSync(file.file_path)
+            .filter(f => /\.(jpg|jpeg|png|webp)$/i.test(f))
+            .sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
+
+        const img = images[Number(resId)];
+        if (!img) return null;
+
+        const imgPath = path.join(file.file_path, img);
+        const stat = fs.statSync(imgPath);
+
+        return {
+            type: 'image',
+            path: imgPath,
+            size: stat.size
+        };
+    }
+
+    if (ext === '.epub') {
+        const html = await parseEpubToHtml(file.file_path);
+
+        return {
+            type: 'html',
+            data: html
+        };
+    }
+
+    if (['.txt', '.md'].includes(ext)) {
+        const text = fs.readFileSync(file.file_path, 'utf8');
+
+        return {
+            type: 'html',
+            data: `<div class="ln-content"><pre>${text}</pre></div>`
+        };
+    }
+
+    return null;
+}
+
+function parseEpubToHtml(filePath: string): Promise<string> {
+    return new Promise((resolve, reject) => {
+        const epub = new EPub(filePath);
+
+        epub.on('end', async () => {
+            let html = '';
+
+            for (const id of epub.flow.map(f => f.id)) {
+                const chapter = await new Promise<string>((res, rej) => {
+                    epub.getChapter(id, (err, text) => {
+                        if (err) rej(err);
+                        else res(text);
+                    });
+                });
+
+                html += `<section class="ln-chapter">${chapter}</section>`;
+            }
+
+            resolve(html);
+        });
+
+        epub.on('error', reject);
+        epub.parse();
+    });
+}

docker/src/scripts/anime/anime.js

@@ -1,6 +1,7 @@
 let animeData = null;
 let extensionName = null;
 let animeId = null;
+let isLocal = false;
 
 const episodePagination = Object.create(PaginationManager);
 episodePagination.init(12, renderEpisodes);
@@ -13,6 +14,29 @@ document.addEventListener('DOMContentLoaded', () => {
     setupEpisodeSearch();
 });
 
+function markAsLocal() {
+    isLocal = true;
+    const pill = document.getElementById('local-pill');
+    if (!pill) return;
+
+    pill.textContent = 'Local';
+    pill.style.display = 'inline-flex';
+    pill.style.background = 'rgba(34,197,94,.2)';
+    pill.style.color = '#22c55e';
+    pill.style.borderColor = 'rgba(34,197,94,.3)';
+}
+
+async function checkLocalLibraryEntry() {
+    try {
+        const res = await fetch(`/api/library/anime/${animeId}`);
+        if (!res.ok) return;
+
+        markAsLocal();
+
+    } catch (e) {
+    }
+}
+
 async function loadAnime() {
     try {
 
@@ -24,6 +48,7 @@ async function loadAnime() {
 
         extensionName = urlData.extensionName;
         animeId = urlData.entityId;
+        await checkLocalLibraryEntry();
 
         const fetchUrl = extensionName
             ? `/api/anime/${animeId}?source=${extensionName}`
@@ -38,7 +63,7 @@ async function loadAnime() {
         }
 
         animeData = data;
-
+        animeData.entry_type = 'ANIME';
         const metadata = MediaMetadataUtils.formatAnimeData(data, !!extensionName);
 
         updatePageTitle(metadata.title);
@@ -142,8 +167,8 @@ function setupWatchButton() {
     const watchBtn = document.getElementById('watch-btn');
     if (watchBtn) {
         watchBtn.onclick = () => {
-            const url = URLUtils.buildWatchUrl(animeId, 1, extensionName);
-            window.location.href = url;
+            const source = isLocal ? 'local' : (extensionName || 'anilist');
+            window.location.href = URLUtils.buildWatchUrl(animeId, num, source);
         };
     }
 }
@@ -226,8 +251,8 @@ function createEpisodeButton(num, container) {
     btn.className = 'episode-btn';
     btn.innerText = `Ep ${num}`;
     btn.onclick = () => {
-        const url = URLUtils.buildWatchUrl(animeId, num, extensionName);
-        window.location.href = url;
+        const source = isLocal ? 'local' : (extensionName || 'anilist');
+        window.location.href = URLUtils.buildWatchUrl(animeId, num, source);
     };
     container.appendChild(btn);
 }

docker/src/scripts/anime/animes.js

@@ -92,6 +92,7 @@ function startHeroCycle() {
 
 async function updateHeroUI(anime) {
     if(!anime) return;
+    anime.entry_type = 'ANIME';
 
     const title = anime.title.english || anime.title.romaji || "Unknown Title";
     const score = anime.averageScore ? anime.averageScore + '% Match' : 'N/A';

docker/src/scripts/anime/player.js

@@ -7,6 +7,7 @@ let currentExtension = '';
 let plyrInstance;
 let hlsInstance;
 let totalEpisodes = 0;
+let animeTitle = "";
 let aniSkipData = null;
 
 let isAnilist = false;
@@ -17,13 +18,28 @@ const firstKey = params.keys().next().value;
 let extName;
 if (firstKey) extName = firstKey;
 
-const href = extName
+// URL de retroceso: Si es local, volvemos a la vista de Anilist normal
+const href = (extName && extName !== 'local')
     ? `/anime/${extName}/${animeId}`
     : `/anime/${animeId}`;
 
 document.getElementById('back-link').href = href;
 document.getElementById('episode-label').innerText = `Episode ${currentEpisode}`;
 
+
+let localEntryId = null;
+
+async function checkLocal() {
+    try {
+        const res = await fetch(`/api/library/anime/${animeId}`);
+        if (!res.ok) return null;
+        const data = await res.json();
+        return data.id;
+    } catch {
+        return null;
+    }
+}
+
 async function loadAniSkip(malId, episode, duration) {
     try {
         const res = await fetch(`https://api.aniskip.com/v2/skip-times/${malId}/${episode}?types[]=op&types[]=ed&episodeLength=${duration}`);
@@ -37,9 +53,10 @@ async function loadAniSkip(malId, episode, duration) {
 }
 
 async function loadMetadata() {
+    localEntryId = await checkLocal();
     try {
-        const extQuery = extName ? `?source=${extName}` : "?source=anilist";
-        const res = await fetch(`/api/anime/${animeId}${extQuery}`);
+        const sourceQuery = (extName === 'local' || !extName) ? "source=anilist" : `source=${extName}`;
+        const res = await fetch(`/api/anime/${animeId}?${sourceQuery}`);
         const data = await res.json();
 
         if (data.error) {
@@ -49,13 +66,7 @@ async function loadMetadata() {
 
         const isAnilistFormat = data.title && (data.title.romaji || data.title.english);
 
-        let title = '';
-        let description = '';
-        let coverImage = '';
-        let averageScore = '';
-        let format = '';
-        let seasonYear = '';
-        let season = '';
+        let title = '', description = '', coverImage = '', averageScore = '', format = '', seasonYear = '', season = '';
 
         if (isAnilistFormat) {
             title = data.title.romaji || data.title.english || data.title.native || 'Anime Title';
@@ -85,6 +96,7 @@ async function loadMetadata() {
 
         document.getElementById('anime-title-details').innerText = title;
         document.getElementById('anime-title-details2').innerText = title;
+        animeTitle = title;
         document.title = `Watching ${title} - Ep ${currentEpisode}`;
 
         const tempDiv = document.createElement('div');
@@ -96,7 +108,8 @@ async function loadMetadata() {
         document.getElementById('detail-season').innerText = season && seasonYear ? `${season} ${seasonYear}` : (season || seasonYear || '--');
         document.getElementById('detail-cover-image').src = coverImage || '/default-cover.jpg';
 
-        if (extName) {
+        // Solo cargamos episodios de extensión si hay extensión real y no es local
+        if (extName && extName !== 'local') {
             await loadExtensionEpisodes();
         } else {
             if (data.nextAiringEpisode?.episode) {
@@ -108,12 +121,7 @@ async function loadMetadata() {
             }
             const simpleEpisodes = [];
             for (let i = 1; i <= totalEpisodes; i++) {
-                simpleEpisodes.push({
-                    number: i,
-                    title: null,
-                    thumbnail: null,
-                    isDub: false
-                });
+                simpleEpisodes.push({ number: i, title: null, thumbnail: null, isDub: false });
             }
             populateEpisodeCarousel(simpleEpisodes);
         }
@@ -125,75 +133,34 @@ async function loadMetadata() {
     } catch (error) {
         console.error('Error loading metadata:', error);
     }
+    await loadExtensions();
 }
 
 async function applyAniSkip(video) {
-    if (!isAnilist || !malId) {
-        console.log('AniSkip disabled: isAnilist=' + isAnilist + ', malId=' + malId);
-        return;
-    }
+    if (!isAnilist || !malId) return;
 
-    console.log('Loading AniSkip for MAL ID:', malId, 'Episode:', currentEpisode);
+    aniSkipData = await loadAniSkip(malId, currentEpisode, Math.floor(video.duration));
 
-    aniSkipData = await loadAniSkip(
-        malId,
-        currentEpisode,
-        Math.floor(video.duration)
-    );
+    if (!aniSkipData || aniSkipData.length === 0) return;
 
-    console.log('AniSkip data received:', aniSkipData);
-
-    if (!aniSkipData || aniSkipData.length === 0) {
-        console.log('No AniSkip data available');
-        return;
-    }
-
-    let op, ed;
     const markers = [];
-
     aniSkipData.forEach(item => {
         const { startTime, endTime } = item.interval;
-
-        if (item.skipType === 'op') {
-            op = { start: startTime, end: endTime };
         markers.push({
             start: startTime,
             end: endTime,
-                label: 'Opening'
+            label: item.skipType === 'op' ? 'Opening' : 'Ending'
+        });
     });
 
-            console.log('Opening found:', startTime, '-', endTime);
-        }
-
-        if (item.skipType === 'ed') {
-            ed = { start: startTime, end: endTime };
-            markers.push({
-                start: startTime,
-                end: endTime,
-                label: 'Ending'
-            });
-
-            console.log('Ending found:', startTime, '-', endTime);
-        }
-    });
-
-    // Crear markers visuales en el DOM
     if (plyrInstance && markers.length > 0) {
-        console.log('Creating visual markers:', markers);
-
-        // Esperar a que el player esté completamente cargado
         setTimeout(() => {
             const progressContainer = document.querySelector('.plyr__progress');
-            if (!progressContainer) {
-                console.error('Progress container not found');
-                return;
-            }
+            if (!progressContainer) return;
 
-            // Eliminar markers anteriores si existen
             const oldMarkers = progressContainer.querySelector('.plyr__markers');
             if (oldMarkers) oldMarkers.remove();
 
-            // Crear contenedor de markers
             const markersContainer = document.createElement('div');
             markersContainer.className = 'plyr__markers';
 
@@ -215,56 +182,36 @@ async function applyAniSkip(video) {
 
                 markersContainer.appendChild(markerElement);
             });
-
-
             progressContainer.appendChild(markersContainer);
-            console.log('Visual markers created successfully');
         }, 500);
     }
 }
 
 async function loadExtensionEpisodes() {
     try {
-        const extQuery = extName ? `?source=${extName}` : "?source=anilist";
-        const res = await fetch(`/api/anime/${animeId}/episodes${extQuery}`);
+        const res = await fetch(`/api/anime/${animeId}/episodes?source=${extName}`);
         const data = await res.json();
-
         totalEpisodes = Array.isArray(data) ? data.length : 0;
-
-        if (Array.isArray(data) && data.length > 0) {
-            populateEpisodeCarousel(data);
-        } else {
-            const fallback = [];
-            for (let i = 1; i <= totalEpisodes; i++) {
-                fallback.push({ number: i, title: null, thumbnail: null });
-            }
-            populateEpisodeCarousel(fallback);
-        }
+        populateEpisodeCarousel(Array.isArray(data) ? data : []);
     } catch (e) {
-        console.error("Error cargando episodios por extensión:", e);
-        totalEpisodes = 0;
+        console.error("Error cargando episodios:", e);
     }
 }
 
 function populateEpisodeCarousel(episodesData) {
     const carousel = document.getElementById('episode-carousel');
-    if (!carousel) return;
-
     carousel.innerHTML = '';
 
     episodesData.forEach((ep, index) => {
         const epNumber = ep.number || ep.episodeNumber || ep.id || (index + 1);
         if (!epNumber) return;
 
-        const extParam = extName ? `?${extName}` : "";
+        const extParam = (extName && extName !== 'local') ? `?${extName}` : "";
         const hasThumbnail = ep.thumbnail && ep.thumbnail.trim() !== '';
 
         const link = document.createElement('a');
         link.href = `/watch/${animeId}/${epNumber}${extParam}`;
         link.classList.add('carousel-item');
-        link.dataset.episode = epNumber;
-
-        if (!hasThumbnail) link.classList.add('no-thumbnail');
         if (parseInt(epNumber) === currentEpisode) link.classList.add('active-ep-carousel');
 
         const imgContainer = document.createElement('div');
@@ -272,21 +219,15 @@ function populateEpisodeCarousel(episodesData) {
 
         if (hasThumbnail) {
             const img = document.createElement('img');
-            img.classList.add('carousel-item-img');
             img.src = ep.thumbnail;
-            img.alt = `Episode ${epNumber} Thumbnail`;
+            img.classList.add('carousel-item-img');
             imgContainer.appendChild(img);
         }
 
         link.appendChild(imgContainer);
-
         const info = document.createElement('div');
         info.classList.add('carousel-item-info');
-
-        const title = document.createElement('p');
-        title.innerText = `Ep ${epNumber}: ${ep.title || 'Untitled'}`;
-
-        info.appendChild(title);
+        info.innerHTML = `<p>Ep ${epNumber}: ${ep.title || 'Untitled'}</p>`;
         link.appendChild(info);
         carousel.appendChild(link);
     });
@@ -297,28 +238,27 @@ async function loadExtensions() {
         const res = await fetch('/api/extensions/anime');
         const data = await res.json();
         const select = document.getElementById('extension-select');
+        let extensions = data.extensions || [];
+
+        if (extName === 'local' && !extensions.includes('local')) {
+            extensions.push('local');
+        }
 
-        if (data.extensions && data.extensions.length > 0) {
         select.innerHTML = '';
-            data.extensions.forEach(ext => {
+        extensions.forEach(ext => {
             const opt = document.createElement('option');
             opt.value = opt.innerText = ext;
             select.appendChild(opt);
         });
 
-            if (typeof extName === 'string' && data.extensions.includes(extName)) {
+        if (extName && extensions.includes(extName)) {
             select.value = extName;
-            } else {
-                select.selectedIndex = 0;
+        } else if (extensions.length > 0) {
+            select.value = extensions[0];
         }
 
         currentExtension = select.value;
         onExtensionChange();
-        } else {
-            select.innerHTML = '<option>No Extensions</option>';
-            select.disabled = true;
-            setLoading("No anime extensions found.");
-        }
     } catch (error) {
         console.error("Extension Error:", error);
     }
@@ -327,83 +267,69 @@ async function loadExtensions() {
 async function onExtensionChange() {
     const select = document.getElementById('extension-select');
     currentExtension = select.value;
-    setLoading("Fetching extension settings...");
 
+    if (currentExtension === 'local') {
+        document.getElementById('sd-toggle').style.display = 'none';
+        document.getElementById('server-select').style.display = 'none';
+        loadStream();
+        return;
+    }
+
+    setLoading("Fetching extension settings...");
     try {
         const res = await fetch(`/api/extensions/${currentExtension}/settings`);
         const settings = await res.json();
 
         const toggle = document.getElementById('sd-toggle');
-        if (settings.supportsDub) {
-            toggle.style.display = 'flex';
+        toggle.style.display = settings.supportsDub ? 'flex' : 'none';
         setAudioMode('sub');
-        } else {
-            toggle.style.display = 'none';
-            setAudioMode('sub');
-        }
 
         const serverSelect = document.getElementById('server-select');
         serverSelect.innerHTML = '';
-        if (settings.episodeServers && settings.episodeServers.length > 0) {
+        if (settings.episodeServers?.length > 0) {
             settings.episodeServers.forEach(srv => {
                 const opt = document.createElement('option');
-                opt.value = srv;
-                opt.innerText = srv;
+                opt.value = opt.innerText = srv;
                 serverSelect.appendChild(opt);
             });
             serverSelect.style.display = 'block';
         } else {
             serverSelect.style.display = 'none';
         }
-
         loadStream();
     } catch (error) {
-        console.error(error);
-        setLoading("Failed to load extension settings.");
+        setLoading("Failed to load settings.");
     }
 }
 
-function toggleAudioMode() {
-    const newMode = audioMode === 'sub' ? 'dub' : 'sub';
-    setAudioMode(newMode);
-    loadStream();
-}
-
-function setAudioMode(mode) {
-    audioMode = mode;
-    const toggle = document.getElementById('sd-toggle');
-    const subOpt = document.getElementById('opt-sub');
-    const dubOpt = document.getElementById('opt-dub');
-
-    toggle.setAttribute('data-state', mode);
-    subOpt.classList.toggle('active', mode === 'sub');
-    dubOpt.classList.toggle('active', mode === 'dub');
-}
-
 async function loadStream() {
     if (!currentExtension) return;
 
+    if (currentExtension === 'local') {
+        if (!localEntryId) {
+            setLoading("No existe en local");
+            return;
+        }
+
+        const localUrl = `/api/library/stream/anime/${localEntryId}/${currentEpisode}`;
+        playVideo(localUrl, []);
+        document.getElementById('loading-overlay').style.display = 'none';
+        return;
+    }
+
+
     const serverSelect = document.getElementById('server-select');
     const server = serverSelect.value || "default";
-
     setLoading(`Loading stream (${audioMode})...`);
 
     try {
-        let sourc = "&source=anilist";
-        if (extName){
-            sourc = `&source=${extName}`;
-        }
+        const sourc = (extName && extName !== 'local') ? `&source=${extName}` : "&source=anilist";
         const url = `/api/watch/stream?animeId=${animeId}&episode=${currentEpisode}&server=${server}&category=${audioMode}&ext=${currentExtension}${sourc}`;
         const res = await fetch(url);
         const data = await res.json();
 
-        if (data.error) {
-            setLoading(`Error: ${data.error}`);
-            return;
-        }
-
-        if (!data.videoSources || data.videoSources.length === 0) {
-            setLoading("No video sources found.");
+        if (data.error || !data.videoSources?.length) {
+            setLoading(data.error || "No video sources.");
             return;
         }
 
@@ -415,33 +341,31 @@ async function loadStream() {
         if (headers['Origin']) proxyUrl += `&origin=${encodeURIComponent(headers['Origin'])}`;
         if (headers['User-Agent']) proxyUrl += `&userAgent=${encodeURIComponent(headers['User-Agent'])}`;
 
-        playVideo(proxyUrl, data.videoSources[0].subtitles || data.subtitles);
+        playVideo(proxyUrl, source.subtitles || data.subtitles || []);
         document.getElementById('loading-overlay').style.display = 'none';
     } catch (error) {
-        setLoading("Stream error. Check console.");
-        console.error(error);
+        setLoading("Stream error.");
     }
 }
 
 function playVideo(url, subtitles = []) {
     const video = document.getElementById('player');
+    const isLocal = url.includes('/api/library/stream/');
 
-    if (Hls.isSupported()) {
+    if (!isLocal && Hls.isSupported()) {
         if (hlsInstance) hlsInstance.destroy();
         hlsInstance = new Hls({ xhrSetup: (xhr) => xhr.withCredentials = false });
         hlsInstance.loadSource(url);
         hlsInstance.attachMedia(video);
-    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+    } else {
+        if (hlsInstance) hlsInstance.destroy();
         video.src = url;
     }
 
     if (plyrInstance) plyrInstance.destroy();
-
-    const existingTracks = video.querySelectorAll('track');
-    existingTracks.forEach(track => track.remove());
+    while (video.textTracks.length > 0) video.removeChild(video.textTracks[0]);
 
     subtitles.forEach(sub => {
-        if (!sub.url) return;
         const track = document.createElement('track');
         track.kind = 'captions';
         track.label = sub.language || 'Unknown';
@@ -454,74 +378,23 @@ function playVideo(url, subtitles = []) {
     plyrInstance = new Plyr(video, {
         captions: { active: true, update: true, language: 'en' },
         controls: ['play-large', 'play', 'progress', 'current-time', 'duration', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'],
-        settings: ['captions', 'quality', 'speed'],
-        markers: {
-            enabled: true,
-            points: []
-        }
+        settings: ['captions', 'quality', 'speed']
     });
 
-    video.addEventListener('loadedmetadata', () => {
-        applyAniSkip(video);
-    });
-
-    let alreadyTriggered = false;
-
-    video.addEventListener('timeupdate', () => {
-        if (!video.duration) return;
-
-        const percent = (video.currentTime / video.duration) * 100;
-
-        if (percent >= 80 && !alreadyTriggered) {
-            alreadyTriggered = true;
-            sendProgress();
-        }
-    });
-
-    video.play().catch(() => console.log("Autoplay blocked"));
-}
-
-function setLoading(message) {
-    const overlay = document.getElementById('loading-overlay');
-    const text = document.getElementById('loading-text');
-    overlay.style.display = 'flex';
-    text.innerText = message;
-}
-
-const extParam = extName ? `?${extName}` : "";
-
-document.getElementById('prev-btn').onclick = () => {
-    if (currentEpisode > 1) {
-        window.location.href = `/watch/${animeId}/${currentEpisode - 1}${extParam}`;
-    }
-};
-
-document.getElementById('next-btn').onclick = () => {
-    if (currentEpisode < totalEpisodes || totalEpisodes === 0) {
-        window.location.href = `/watch/${animeId}/${currentEpisode + 1}${extParam}`;
-    }
-};
-
-if (currentEpisode <= 1) {
-    document.getElementById('prev-btn').disabled = true;
+    video.addEventListener('loadedmetadata', () => applyAniSkip(video));
 }
 
 async function sendProgress() {
     const token = localStorage.getItem('token');
     if (!token) return;
-
-    const source = extName
-        ? extName
-        : "anilist";
+    const source = (extName && extName !== 'local') ? extName : "anilist";
 
     const body = {
         entry_id: animeId,
         source: source,
         entry_type: "ANIME",
         status: 'CURRENT',
-        progress: source === 'anilist'
-            ? Math.floor(currentEpisode)
-            : currentEpisode
+        progress: currentEpisode
     };
 
     try {
@@ -538,5 +411,38 @@ async function sendProgress() {
     }
 }
 
+// Botones y Toggle
+document.getElementById('sd-toggle').onclick = () => {
+    audioMode = audioMode === 'sub' ? 'dub' : 'sub';
+    setAudioMode(audioMode);
+    loadStream();
+};
+
+function setAudioMode(mode) {
+    const toggle = document.getElementById('sd-toggle');
+    toggle.setAttribute('data-state', mode);
+    document.getElementById('opt-sub').classList.toggle('active', mode === 'sub');
+    document.getElementById('opt-dub').classList.toggle('active', mode === 'dub');
+}
+
+function setLoading(message) {
+    document.getElementById('loading-text').innerText = message;
+    document.getElementById('loading-overlay').style.display = 'flex';
+}
+
+const extParam = (extName && extName !== 'local') ? `?${extName}` : "";
+document.getElementById('prev-btn').onclick = () => {
+    if (currentEpisode > 1) window.location.href = `/watch/${animeId}/${currentEpisode - 1}${extParam}`;
+};
+document.getElementById('next-btn').onclick = () => {
+    if (currentEpisode < totalEpisodes || totalEpisodes === 0) window.location.href = `/watch/${animeId}/${currentEpisode + 1}${extParam}`;
+};
+
+if (currentEpisode <= 1) document.getElementById('prev-btn').disabled = true;
+
+// Actualizar progreso cada 1 minuto si el video está reproduciéndose
+setInterval(() => {
+    if (plyrInstance && !plyrInstance.paused) sendProgress();
+}, 60000);
+
 loadMetadata();
-loadExtensions();

docker/src/scripts/auth-guard.js

@@ -43,6 +43,43 @@ async function loadMeUI() {
     }
 }
 
+// Variable para saber si el modal ya fue cargado
+let settingsModalLoaded = false;
+
+document.getElementById('nav-settings').addEventListener('click', openSettings)
+
+async function openSettings() {
+    if (!settingsModalLoaded) {
+        try {
+            const res = await fetch('/views/components/settings-modal.html')
+            const html = await res.text()
+            document.body.insertAdjacentHTML('beforeend', html)
+            settingsModalLoaded = true;
+
+            // Esperar un momento para que el DOM se actualice
+            await new Promise(resolve => setTimeout(resolve, 50));
+
+            // Ahora cargar los settings
+            if (window.toggleSettingsModal) {
+                await window.toggleSettingsModal(false);
+            }
+        } catch (err) {
+            console.error('Error loading settings modal:', err);
+        }
+    } else {
+        if (window.toggleSettingsModal) {
+            await window.toggleSettingsModal(false);
+        }
+    }
+}
+
+function closeSettings() {
+    const modal = document.getElementById('settings-modal');
+    if (modal) {
+        modal.classList.add('hidden');
+    }
+}
+
 function setupDropdown() {
     const userAvatarBtn = document.querySelector(".user-avatar-btn")
     const navDropdown = document.getElementById("nav-dropdown")

docker/src/scripts/books/book.js

@@ -7,7 +7,7 @@ let allChapters = [];
 let filteredChapters = [];
 
 let availableExtensions = [];
-
+let isLocal = false;
 const chapterPagination = Object.create(PaginationManager);
 chapterPagination.init(12, () => renderChapterTable());
 
@@ -16,6 +16,31 @@ document.addEventListener('DOMContentLoaded', () => {
     setupModalClickOutside();
 });
 
+async function checkLocalLibraryEntry() {
+    try {
+        const libraryType =
+            bookData?.entry_type === 'NOVEL' ? 'novels' : 'manga';
+
+        const res = await fetch(`/api/library/${libraryType}/${bookId}`);
+        if (!res.ok) return;
+
+        const data = await res.json();
+        if (data.matched) {
+            isLocal = true;
+            const pill = document.getElementById('local-pill');
+            if (pill) {
+                pill.textContent = 'Local';
+                pill.style.display = 'inline-flex';
+                pill.style.background = 'rgba(34, 197, 94, 0.2)';
+                pill.style.color = '#22c55e';
+                pill.style.borderColor = 'rgba(34, 197, 94, 0.3)';
+            }
+        }
+    } catch (e) {
+        console.error("Error checking local status:", e);
+    }
+}
+
 async function init() {
     try {
         const urlData = URLUtils.parseEntityPath('book');
@@ -27,8 +52,8 @@ async function init() {
         extensionName = urlData.extensionName;
         bookId = urlData.entityId;
         bookSlug = urlData.slug;
-
         await loadBookMetadata();
+        await checkLocalLibraryEntry();
 
         await loadAvailableExtensions();
         await loadChapters();
@@ -69,7 +94,8 @@ async function loadBookMetadata() {
     bookData = raw;
 
     const metadata = MediaMetadataUtils.formatBookData(raw, !!extensionName);
-
+    bookData.entry_type =
+        metadata.format === 'MANGA' ? 'MANGA' : 'NOVEL';
     updatePageTitle(metadata.title);
     updateMetadata(metadata);
     updateExtensionPill();
@@ -172,32 +198,46 @@ async function loadChapters(targetProvider = null) {
     const tbody = document.getElementById('chapters-body');
     if (!tbody) return;
 
-    // Si no se pasa provider, intentamos pillar el del select o el primero disponible
     if (!targetProvider) {
         const select = document.getElementById('provider-filter');
         targetProvider = select ? select.value : (availableExtensions[0] || 'all');
     }
 
-    tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">Searching extension for chapters...</td></tr>';
+    tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">Loading chapters...</td></tr>';
 
     try {
+        let fetchUrl;
+        let isLocalRequest = targetProvider === 'local';
+
+        if (isLocalRequest) {
+            // Nuevo endpoint para archivos locales
+            fetchUrl = `/api/library/${bookId}/units`;
+        } else {
             const source = extensionName || 'anilist';
-        // Añadimos el query param 'provider' para que el backend filtre
-        let fetchUrl = `/api/book/${bookId}/chapters?source=${source}`;
-        if (targetProvider !== 'all') {
-            fetchUrl += `&provider=${targetProvider}`;
+            fetchUrl = `/api/book/${bookId}/chapters?source=${source}`;
+            if (targetProvider !== 'all') fetchUrl += `&provider=${targetProvider}`;
         }
 
         const res = await fetch(fetchUrl);
         const data = await res.json();
 
+        // Mapeo de datos: Si es local usamos 'units', si no, usamos 'chapters'
+        if (isLocalRequest) {
+            allChapters = (data.units || []).map((unit, idx) => ({
+                number: unit.number,
+                title: unit.name,
+                provider: 'local',
+                index: idx,           // ✅ índice (0,1,2…)
+                format: unit.format
+            }));
+        } else {
             allChapters = data.chapters || [];
-        filteredChapters = [...allChapters];
+        }
 
+        filteredChapters = [...allChapters];
         applyChapterFilter();
 
         const totalEl = document.getElementById('total-chapters');
-
         if (allChapters.length === 0) {
             tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">No chapters found.</td></tr>';
             if (totalEl) totalEl.innerText = "0 Found";
@@ -207,7 +247,6 @@ async function loadChapters(targetProvider = null) {
         if (totalEl) totalEl.innerText = `${allChapters.length} Found`;
 
         setupReadButton();
-
         chapterPagination.setTotalItems(filteredChapters.length);
         chapterPagination.reset();
         renderChapterTable();
@@ -234,16 +273,26 @@ function applyChapterFilter() {
 
 function setupProviderFilter() {
     const select = document.getElementById('provider-filter');
-    if (!select || availableExtensions.length === 0) return;
+    if (!select) return;
 
     select.style.display = 'inline-block';
     select.innerHTML = '';
 
+    // Opción para cargar todo
     const allOpt = document.createElement('option');
     allOpt.value = 'all';
     allOpt.innerText = 'Load All (Slower)';
     select.appendChild(allOpt);
 
+    // NUEVO: Si es local, añadimos la opción 'local' al principio
+    if (isLocal) {
+        const localOpt = document.createElement('option');
+        localOpt.value = 'local';
+        localOpt.innerText = 'Local';
+        select.appendChild(localOpt);
+    }
+
+    // Añadir extensiones normales
     availableExtensions.forEach(ext => {
         const opt = document.createElement('option');
         opt.value = ext;
@@ -251,7 +300,10 @@ function setupProviderFilter() {
         select.appendChild(opt);
     });
 
-    if (extensionName && availableExtensions.includes(extensionName)) {
+    // Lógica de selección automática
+    if (isLocal) {
+        select.value = 'local'; // Prioridad si es local
+    } else if (extensionName && availableExtensions.includes(extensionName)) {
         select.value = extensionName;
     } else if (availableExtensions.length > 0) {
         select.value = availableExtensions[0];
@@ -313,7 +365,14 @@ function renderChapterTable() {
 }
 
 function openReader(chapterId, provider) {
-    window.location.href = URLUtils.buildReadUrl(bookId, chapterId, provider, extensionName);
+    const effectiveExtension = extensionName || 'anilist';
+
+    window.location.href = URLUtils.buildReadUrl(
+        bookId,          // SIEMPRE anilist
+        chapterId,       // número normal
+        provider,        // 'local' o extensión
+        extensionName || 'anilist'
+    );
 }
 
 function setupModalClickOutside() {

docker/src/scripts/books/books.js

@@ -55,7 +55,8 @@ function startHeroCycle() {
 
 async function updateHeroUI(book) {
     if(!book) return;
-
+    book.entry_type =
+        book.format === 'MANGA' ? 'MANGA' : 'NOVEL';
     const title = book.title.english || book.title.romaji;
     const desc = book.description || "No description available.";
     const poster = (book.coverImage && (book.coverImage.extraLarge || book.coverImage.large)) || '';

docker/src/scripts/books/reader.js

@@ -129,11 +129,54 @@ async function loadChapter() {
     if (!source) {
         source = 'anilist';
     }
-    const newEndpoint = `/api/book/${bookId}/${chapter}/${provider}?source=${source}`;
+    let newEndpoint;
+
+    if (provider === 'local') {
+        newEndpoint = `/api/library/${bookId}/units`;
+    } else {
+        newEndpoint = `/api/book/${bookId}/${chapter}/${provider}?source=${source}`;
+    }
 
     try {
         const res = await fetch(newEndpoint);
         const data = await res.json();
+        if (provider === 'local') {
+            const unit = data.units[Number(chapter)];
+            if (!unit) return;
+
+            chapterLabel.textContent = unit.name;
+            document.title = unit.name;
+
+            const manifestRes = await fetch(`/api/library/${unit.id}/manifest`);
+            const manifest = await manifestRes.json();
+
+            reader.innerHTML = '';
+
+            // ===== MANGA =====
+            if (manifest.type === 'manga') {
+                currentType = 'manga';
+                updateSettingsVisibility();
+                applyStyles();
+
+                currentPages = manifest.pages;
+                loadManga(currentPages);
+                return;
+            }
+
+            // ===== LN =====
+            if (manifest.type === 'ln') {
+                currentType = 'ln';
+                updateSettingsVisibility();
+                applyStyles();
+
+                const contentRes = await fetch(manifest.url);
+                const html = await contentRes.text();
+
+                loadLN(html);
+                return;
+            }
+        }
+
 
         if (data.title) {
             chapterLabel.textContent = data.title;
@@ -281,7 +324,9 @@ function createImageElement(page, index) {
     img.className = 'page-img';
     img.dataset.index = index;
 
-    const url = buildProxyUrl(page.url, page.headers);
+    const url = provider === 'local'
+        ? page.url
+        : buildProxyUrl(page.url, page.headers);
     const placeholder = "/public/assets/placeholder.svg";
 
     img.onerror = () => {

docker/src/scripts/gallery/gallery.js

@@ -1,5 +1,5 @@
 const providerSelector = document.getElementById('provider-selector');
-const searchInput = document.getElementById('main-search-input');
+const searchInput = document.getElementById('search-input');
 const resultsContainer = document.getElementById('gallery-results');
 
 let currentPage = 1;
@@ -299,7 +299,7 @@ async function searchGallery(isLoadMore = false) {
             const msg = favoritesMode
                 ? (query ? 'No favorites found matching your search' : 'You don\'t have any favorite images yet')
                 : 'No results found';
-            resultsContainer.innerHTML = `<p style="text-align:center;color:var(--text-secondary);padding:4rem;font-size:1.1rem;">${msg}</p>`;
+            resultsContainer.innerHTML = `<p style="text-align:center;color:var(--color-text-secondary);padding:4rem;font-size:1.1rem;">${msg}</p>`;
         }
 
         if (msnry) msnry.layout();

docker/src/scripts/local-library-books.js

@@ -0,0 +1,106 @@
+let activeFilter = 'all';
+let activeSort = 'az';
+let isLocalMode = false;
+let localEntries = [];
+
+function toggleLibraryMode() {
+    isLocalMode = !isLocalMode;
+    const btn = document.getElementById('library-mode-btn');
+    const onlineContent = document.getElementById('online-content');
+    const localContent = document.getElementById('local-content');
+
+    if (isLocalMode) {
+        btn.classList.add('active');
+        onlineContent.classList.add('hidden');
+        localContent.classList.remove('hidden');
+        loadLocalEntries();
+    } else {
+        btn.classList.remove('active');
+        onlineContent.classList.remove('hidden');
+        localContent.classList.add('hidden');
+    }
+}
+
+async function loadLocalEntries() {
+    const grid = document.getElementById('local-entries-grid');
+    grid.innerHTML = '<div class="skeleton-card"></div>'.repeat(6);
+
+    try {
+        const [mangaRes, novelRes] = await Promise.all([
+            fetch('/api/library/manga'),
+            fetch('/api/library/novels')
+        ]);
+
+        const [manga, novel] = await Promise.all([
+            mangaRes.json(),
+            novelRes.json()
+        ]);
+
+        localEntries = [
+            ...manga.map(e => ({ ...e, type: 'manga' })),
+            ...novel.map(e => ({ ...e, type: 'novel' }))
+        ];
+
+        if (localEntries.length === 0) {
+            grid.innerHTML = '<p style="grid-column:1/-1;text-align:center;padding:3rem;">No books found.</p>';
+            return;
+        }
+
+        renderLocalEntries(localEntries);
+    } catch {
+        grid.innerHTML = '<p style="grid-column:1/-1;text-align:center;color:var(--color-danger);padding:3rem;">Error loading library.</p>';
+    }
+}
+
+function filterLocal(type) {
+    if (type === 'all') renderLocalEntries(localEntries);
+    else renderLocalEntries(localEntries.filter(e => e.type === type));
+}
+
+function renderLocalEntries(entries) {
+    const grid = document.getElementById('local-entries-grid');
+    grid.innerHTML = entries.map(entry => {
+        const title = entry.metadata?.title?.romaji || entry.metadata?.title?.english || entry.id;
+        const cover = entry.metadata?.coverImage?.extraLarge || '/public/assets/placeholder.jpg';
+        const chapters = entry.metadata?.chapters || '??';
+
+        return `
+            <div class="local-card" onclick="viewLocalEntry(${entry.metadata?.id || 'null'})">
+                <div class="card-img-wrap">
+                    <img src="${cover}" alt="${title}" loading="lazy">
+                </div>
+                <div class="local-card-info">
+                    <div class="local-card-title">${title}</div>
+                    <p style="font-size: 0.85rem; color: var(--color-text-secondary); margin: 0;">
+                        ${chapters} Chapters
+                    </p>
+                    <div class="badge">${entry.type}</div>
+                    <div class="match-status ${entry.matched ? 'status-linked' : 'status-unlinked'}">
+                        ${entry.matched ? '● Linked' : '○ Unlinked'}
+                    </div>
+                </div>
+            </div>
+        `;
+    }).join('');
+}
+
+async function scanLocalLibrary() {
+    const btnText = document.getElementById('scan-text');
+    btnText.innerText = "Scanning...";
+    try {
+        // Asumiendo que el scan de libros usa este query param
+        const response = await fetch('/api/library/scan?mode=incremental', { method: 'POST' });
+        if (response.ok) {
+            await loadLocalEntries();
+            if (window.NotificationUtils) NotificationUtils.show('Library scanned!', 'success');
+        }
+    } catch (err) {
+        if (window.NotificationUtils) NotificationUtils.show('Scan failed', 'error');
+    } finally {
+        btnText.innerText = "Scan Library";
+    }
+}
+
+function viewLocalEntry(id) {
+    if (id) window.location.href = `/book/${id}`;
+}

docker/src/scripts/local-library.js

@@ -0,0 +1,209 @@
+let activeFilter = 'all';
+let activeSort = 'az';
+let isLocalMode = false;
+let localEntries = [];
+
+function toggleLibraryMode() {
+    isLocalMode = !isLocalMode;
+
+    const btn = document.getElementById('library-mode-btn');
+    const onlineContent = document.getElementById('online-content');
+    const localContent = document.getElementById('local-content');
+    const svg = btn.querySelector('svg');
+    const label = btn.querySelector('span');
+
+    if (isLocalMode) {
+        // LOCAL MODE
+        btn.classList.add('active');
+        onlineContent.classList.add('hidden');
+        localContent.classList.remove('hidden');
+        loadLocalEntries();
+
+        svg.innerHTML = `
+            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+            <polyline points="9 22 9 12 15 12 15 22"/>
+        `;
+    } else {
+        // ONLINE MODE
+        btn.classList.remove('active');
+        onlineContent.classList.remove('hidden');
+        localContent.classList.add('hidden');
+
+        svg.innerHTML = `
+            <circle cx="12" cy="12" r="10"/>
+            <line x1="2" y1="12" x2="22" y2="12"/>
+            <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
+        `;
+    }
+}
+
+async function loadLocalEntries() {
+    const grid = document.getElementById('local-entries-grid');
+    grid.innerHTML = '<div class="skeleton-card"></div>'.repeat(8);
+
+    try {
+        const response = await fetch('/api/library/anime');
+        const entries = await response.json();
+        localEntries = entries;
+
+        if (entries.length === 0) {
+            grid.innerHTML = '<p style="grid-column: 1/-1; text-align: center; color: var(--color-text-secondary); padding: 3rem;">No anime found in your local library. Click "Scan Library" to scan your folders.</p>';
+
+            return;
+        }
+
+        // Renderizar grid
+        grid.innerHTML = entries.map(entry => {
+            const title = entry.metadata?.title?.romaji || entry.metadata?.title?.english || entry.id;
+            const cover = entry.metadata?.coverImage?.extraLarge || entry.metadata?.coverImage?.large || '/public/assets/placeholder.jpg';
+            const score = entry.metadata?.averageScore || '--';
+            const episodes = entry.metadata?.episodes || '??';
+
+            return `
+                <div class="local-card" onclick="viewLocalEntry(${entry.metadata?.id || 'null'})">
+                    <div class="card-img-wrap">
+                        <img src="${cover}" alt="${title}" loading="lazy">
+                    </div>
+                    <div class="local-card-info">
+                        <div class="local-card-title">${title}</div>
+                        <p style="font-size: 0.85rem; color: var(--color-text-secondary); margin: 0;">
+                            ${score}% • ${episodes} Eps
+                        </p>
+                        <div class="match-status ${entry.matched ? 'status-linked' : 'status-unlinked'}">
+                            ${entry.matched ? '● Linked' : '○ Unlinked'}
+                        </div>
+                    </div>
+                </div>
+            `;
+        }).join('');
+    } catch (err) {
+        console.error('Error loading local entries:', err);
+        grid.innerHTML = '<p style="grid-column: 1/-1; text-align: center; color: var(--color-danger); padding: 3rem;">Error loading local library. Make sure the backend is running.</p>';
+    }
+}
+
+
+async function scanLocalLibrary() {
+    const btnText = document.getElementById('scan-text');
+    const originalText = btnText.innerText;
+    btnText.innerText = "Scanning...";
+
+    try {
+        const response = await fetch('/api/library/scan?mode=incremental', {
+            method: 'POST'
+        });
+
+        if (response.ok) {
+            await loadLocalEntries();
+            // Mostrar notificación de éxito si tienes sistema de notificaciones
+            if (window.NotificationUtils) {
+                NotificationUtils.show('Library scanned successfully!', 'success');
+            }
+        } else {
+            throw new Error('Scan failed');
+        }
+    } catch (err) {
+        console.error("Scan failed", err);
+        alert("Failed to scan library. Check console for details.");
+
+        // Mostrar notificación de error si tienes sistema de notificaciones
+        if (window.NotificationUtils) {
+            NotificationUtils.show('Failed to scan library', 'error');
+        }
+    } finally {
+        btnText.innerText = originalText;
+    }
+}
+
+function viewLocalEntry(anilistId) {
+    if (!anilistId) {
+        console.warn('Anime not linked');
+        return;
+    }
+    window.location.href = `/anime/${anilistId}`;
+}
+
+function renderLocalEntries(entries) {
+    const grid = document.getElementById('local-entries-grid');
+
+    grid.innerHTML = entries.map(entry => {
+        const title = entry.metadata?.title?.romaji
+            || entry.metadata?.title?.english
+            || entry.id;
+
+        const cover =
+            entry.metadata?.coverImage?.extraLarge
+            || entry.metadata?.coverImage?.large
+            || '/public/assets/placeholder.jpg';
+
+        const score = entry.metadata?.averageScore || '--';
+        const episodes = entry.metadata?.episodes || '??';
+
+        return `
+            <div class="local-card" onclick="viewLocalEntry(${entry.metadata?.id || 'null'})">
+                <div class="card-img-wrap">
+                    <img src="${cover}" alt="${title}" loading="lazy">
+                </div>
+                <div class="local-card-info">
+                    <div class="local-card-title">${title}</div>
+                    <p style="font-size: 0.85rem; color: var(--color-text-secondary); margin: 0;">
+                        ${score}% • ${episodes} Eps
+                    </p>
+                    <div class="match-status ${entry.matched ? 'status-linked' : 'status-unlinked'}">
+                        ${entry.matched ? '● Linked' : '○ Unlinked'}
+                    </div>
+                </div>
+            </div>
+        `;
+    }).join('');
+}
+
+function applyLocalFilters() {
+    let filtered = [...localEntries];
+
+    if (activeFilter === 'linked') {
+        filtered = filtered.filter(e => e.matched);
+    }
+
+    if (activeFilter === 'unlinked') {
+        filtered = filtered.filter(e => !e.matched);
+    }
+
+    if (activeSort === 'az') {
+        filtered.sort((a, b) =>
+            (a.metadata?.title?.romaji || a.id)
+                .localeCompare(b.metadata?.title?.romaji || b.id)
+        );
+    }
+
+    if (activeSort === 'za') {
+        filtered.sort((a, b) =>
+            (b.metadata?.title?.romaji || b.id)
+                .localeCompare(a.metadata?.title?.romaji || a.id)
+        );
+    }
+
+    renderLocalEntries(filtered);
+}
+
+document.addEventListener('click', e => {
+    const btn = e.target.closest('.filter-btn');
+    if (!btn) return;
+
+    if (btn.dataset.filter) {
+        activeFilter = btn.dataset.filter;
+    }
+
+    if (btn.dataset.sort) {
+        activeSort = btn.dataset.sort;
+    }
+
+    btn
+        .closest('.local-filters')
+        .querySelectorAll('.filter-btn')
+        .forEach(b => b.classList.remove('active'));
+
+    btn.classList.add('active');
+
+    applyLocalFilters();
+});

docker/src/scripts/settings.js

@@ -0,0 +1,218 @@
+const API_BASE = '/api/config';
+let currentConfig = {};
+let activeSection = '';
+let modal, navContainer, formContent, form;
+
+window.toggleSettingsModal = async (forceClose = false) => {
+    modal = document.getElementById('settings-modal');
+    navContainer = document.getElementById('config-nav');
+    formContent = document.getElementById('config-section-content');
+    form = document.getElementById('config-form');
+
+    if (!modal) {
+        console.error('Modal not found');
+        return;
+    }
+
+    if (forceClose) {
+        modal.classList.add('hidden');
+    } else {
+        const isHidden = modal.classList.contains('hidden');
+
+        if (isHidden) {
+            // Abrir modal
+            modal.classList.remove('hidden');
+            await loadSettings();
+        } else {
+            // Cerrar modal
+            modal.classList.add('hidden');
+        }
+    }
+};
+
+async function loadSettings() {
+    if (!formContent) {
+        console.error('Form content not found');
+        return;
+    }
+
+    // Mostrar loading
+    formContent.innerHTML = `
+        <div class="skeleton-loader">
+            <div class="skeleton title-skeleton"></div>
+            <div class="skeleton text-skeleton"></div>
+            <div class="skeleton text-skeleton"></div>
+        </div>
+    `;
+
+    try {
+        const res = await fetch(API_BASE);
+
+        if (!res.ok) {
+            throw new Error(`HTTP error! status: ${res.status}`);
+        }
+
+        const data = await res.json();
+
+        if (data.error) throw new Error(data.error);
+
+        currentConfig = data;
+        renderNav();
+
+        // Seleccionar la primera sección si no hay ninguna activa
+        if (!activeSection || !currentConfig[activeSection]) {
+            activeSection = Object.keys(currentConfig)[0];
+        }
+
+        switchSection(activeSection);
+    } catch (err) {
+        console.error('Error loading settings:', err);
+        formContent.innerHTML = `
+            <div style="padding: 2rem; text-align: center;">
+                <p style="color: var(--color-danger); margin-bottom: 1rem;">Failed to load settings</p>
+                <p style="color: var(--color-text-muted); font-size: 0.9rem;">${err.message}</p>
+            </div>
+        `;
+    }
+}
+
+function renderNav() {
+    if (!navContainer) return;
+
+    navContainer.innerHTML = '';
+    Object.keys(currentConfig).forEach(section => {
+        const btn = document.createElement('div');
+        btn.className = `nav-item ${section === activeSection ? 'active' : ''}`;
+        btn.textContent = section;
+        btn.onclick = () => switchSection(section);
+        navContainer.appendChild(btn);
+    });
+}
+
+function switchSection(section) {
+    if (!currentConfig[section]) return;
+
+    activeSection = section;
+    renderNav();
+
+    const sectionData = currentConfig[section];
+
+    formContent.innerHTML = `
+        <h2 class="section-title" style="margin-bottom: 2rem; text-transform: capitalize;">
+            ${section.replace(/_/g, ' ')}
+        </h2>
+    `;
+
+    Object.entries(sectionData).forEach(([key, value]) => {
+        const group = document.createElement('div');
+        group.className = 'config-group';
+
+        const isBool = typeof value === 'boolean';
+        const inputId = `input-${section}-${key}`;
+        const label = key.replace(/_/g, ' ');
+
+        if (isBool) {
+            group.innerHTML = `
+                <div style="display: flex; align-items: center; gap: 0.5rem;">
+                    <input type="checkbox" id="${inputId}" name="${key}" ${value ? 'checked' : ''}>
+                    <label for="${inputId}" style="margin: 0; cursor: pointer;">${label}</label>
+                </div>
+            `;
+        } else {
+            group.innerHTML = `
+                <label for="${inputId}">${label}</label>
+                <input class="config-input" id="${inputId}" name="${key}"
+                       type="${typeof value === 'number' ? 'number' : 'text'}"
+                       value="${value}">
+            `;
+        }
+
+        formContent.appendChild(group);
+    });
+}
+
+// Setup form submit handler
+document.addEventListener('DOMContentLoaded', () => {
+    // Usar delegación de eventos ya que el form se carga dinámicamente
+    document.addEventListener('submit', async (e) => {
+        if (e.target.id === 'config-form') {
+            e.preventDefault();
+            await saveSettings();
+        }
+    });
+});
+
+async function saveSettings() {
+    if (!form || !activeSection) return;
+
+    const updatedData = {};
+
+    Object.keys(currentConfig[activeSection]).forEach(key => {
+        const input = form.elements[key];
+        if (!input) return;
+
+        if (input.type === 'checkbox') {
+            updatedData[key] = input.checked;
+        } else if (input.type === 'number') {
+            updatedData[key] = Number(input.value);
+        } else {
+            updatedData[key] = input.value;
+        }
+    });
+
+    try {
+        const res = await fetch(`${API_BASE}/${activeSection}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(updatedData)
+        });
+
+        if (res.ok) {
+            currentConfig[activeSection] = updatedData;
+
+            // Mostrar notificación de éxito
+            const notification = document.createElement('div');
+            notification.style.cssText = `
+                position: fixed;
+                top: 20px;
+                right: 20px;
+                background: var(--color-success, #10b981);
+                color: white;
+                padding: 1rem 1.5rem;
+                border-radius: 8px;
+                box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+                z-index: 10000;
+                animation: slideIn 0.3s ease-out;
+            `;
+            notification.textContent = 'Settings saved successfully!';
+            document.body.appendChild(notification);
+
+            setTimeout(() => {
+                notification.style.animation = 'slideOut 0.3s ease-out';
+                setTimeout(() => notification.remove(), 300);
+            }, 2000);
+        } else {
+            throw new Error('Failed to save settings');
+        }
+    } catch (err) {
+        console.error('Error saving settings:', err);
+        alert('Error saving settings: ' + err.message);
+    }
+}
+
+// Añadir estilos para las animaciones (solo si no existen)
+if (!document.getElementById('settings-animations')) {
+    const animationStyles = document.createElement('style');
+    animationStyles.id = 'settings-animations';
+    animationStyles.textContent = `
+        @keyframes slideIn {
+            from { transform: translateX(400px); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
+        }
+        @keyframes slideOut {
+            from { transform: translateX(0); opacity: 1; }
+            to { transform: translateX(400px); opacity: 0; }
+        }
+    `;
+    document.head.appendChild(animationStyles);
+}

docker/src/scripts/utils/list-modal-manager.js

@@ -83,7 +83,7 @@ const ListModalManager = {
             document.getElementById('progress-label');
 
         if (this.isInList && this.currentEntry) {
-            document.getElementById('entry-status').value = this.currentEntry.status || 'PLANNING';
+            document.getElementById('entry-status').value = this.normalizeStatus(this.currentEntry.status);
             document.getElementById('entry-progress').value = this.currentEntry.progress || 0;
             document.getElementById('entry-score').value = this.currentEntry.score || '';
             document.getElementById('entry-start-date').value = this.currentEntry.start_date?.split('T')[0] || '';
@@ -131,6 +131,12 @@ const ListModalManager = {
         document.getElementById('add-list-modal').classList.add('active');
     },
 
+    normalizeStatus(status) {
+        if (!status) return 'PLANNING';
+        if (status === 'WATCHING' || status === 'READING') return 'CURRENT';
+        return status;
+    },
+
     close() {
         document.getElementById('add-list-modal').classList.remove('active');
     },
@@ -212,15 +218,21 @@ const ListModalManager = {
     }
 };
 
-document.addEventListener('DOMContentLoaded', () => {
+async function loadListModal() {
+    if (document.getElementById('add-list-modal')) return;
+
+    const res = await fetch('/views/components/list-modal.html');
+    const html = await res.text();
+    document.body.insertAdjacentHTML('beforeend', html);
+
     const modal = document.getElementById('add-list-modal');
-    if (modal) {
     modal.addEventListener('click', (e) => {
         if (e.target.id === 'add-list-modal') {
             ListModalManager.close();
         }
     });
 }
-});
+
+document.addEventListener('DOMContentLoaded', loadListModal);
 
 window.ListModalManager = ListModalManager;

docker/src/shared/config.js

@@ -0,0 +1,71 @@
+import fs from 'fs';
+import path from 'path';
+import os from 'os';
+import yaml from 'js-yaml';
+
+const BASE_DIR = path.join(os.homedir(), 'WaifuBoards');
+const CONFIG_PATH = path.join(BASE_DIR, 'config.yaml');
+
+const DEFAULT_CONFIG = {
+    library: {
+        anime: null,
+        manga: null,
+        novels: null
+    }
+};
+
+function ensureConfigFile() {
+    if (!fs.existsSync(BASE_DIR)) {
+        fs.mkdirSync(BASE_DIR, { recursive: true });
+    }
+
+    if (!fs.existsSync(CONFIG_PATH)) {
+        fs.writeFileSync(
+            CONFIG_PATH,
+            yaml.dump(DEFAULT_CONFIG),
+            'utf8'
+        );
+    }
+}
+
+export function getConfig() {
+    ensureConfigFile();
+    const raw = fs.readFileSync(CONFIG_PATH, 'utf8');
+    return yaml.load(raw) || DEFAULT_CONFIG;
+}
+
+export function setConfig(partialConfig) {
+    ensureConfigFile();
+
+    const current = getConfig();
+    const next = deepMerge(current, partialConfig);
+
+    fs.writeFileSync(
+        CONFIG_PATH,
+        yaml.dump(next),
+        'utf8'
+    );
+
+    return next;
+}
+
+function deepMerge(target, source) {
+    for (const key in source) {
+        if (
+            source[key] &&
+            typeof source[key] === 'object' &&
+            !Array.isArray(source[key])
+        ) {
+            target[key] = deepMerge(target[key] || {}, source[key]);
+        } else {
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+
+module.exports = {
+    ensureConfigFile,
+    getConfig,
+    setConfig,
+};

docker/src/shared/database.js

@@ -2,7 +2,7 @@ const sqlite3 = require('sqlite3').verbose();
 const os = require("os");
 const path = require("path");
 const fs = require("fs");
-const {ensureUserDataDB, ensureAnilistSchema, ensureExtensionsTable, ensureCacheTable, ensureFavoritesDB} = require('./schemas');
+const {ensureUserDataDB, ensureAnilistSchema, ensureExtensionsTable, ensureCacheTable, ensureFavoritesDB, ensureLocalLibrarySchema } = require('./schemas');
 
 const databases = new Map();
 
@@ -10,7 +10,8 @@ const DEFAULT_PATHS = {
     anilist: path.join(os.homedir(), "WaifuBoards", 'anilist_anime.db'),
     favorites: path.join(os.homedir(), "WaifuBoards", "favorites.db"),
     cache: path.join(os.homedir(), "WaifuBoards", "cache.db"),
-    userdata: path.join(os.homedir(), "WaifuBoards", "user_data.db")
+    userdata: path.join(os.homedir(), "WaifuBoards", "user_data.db"),
+    local_library: path.join(os.homedir(), "WaifuBoards", "local_library.db")
 };
 
 function initDatabase(name = 'anilist', dbPath = null, readOnly = false) {
@@ -49,6 +50,11 @@ function initDatabase(name = 'anilist', dbPath = null, readOnly = false) {
 
     databases.set(name, db);
 
+    if (name === "local_library") {
+        ensureLocalLibrarySchema(db)
+            .catch(err => console.error("Error creating local library schema:", err));
+    }
+
     if (name === "anilist") {
         ensureAnilistSchema(db)
             .then(() => ensureExtensionsTable(db))

docker/src/shared/schemas.js

@@ -2,6 +2,54 @@ const sqlite3 = require('sqlite3').verbose();
 const path = require("path");
 const fs = require("fs");
 
+async function ensureLocalLibrarySchema(db) {
+    await run(db, `
+    CREATE TABLE IF NOT EXISTS local_entries (
+      id TEXT PRIMARY KEY,
+      type TEXT NOT NULL,
+      path TEXT NOT NULL,
+      folder_name TEXT NOT NULL,
+      matched_id INTEGER,
+      matched_source TEXT,
+      last_scan INTEGER NOT NULL
+    )
+  `);
+
+    await run(db, `
+    CREATE TABLE IF NOT EXISTS local_files (
+      id TEXT PRIMARY KEY,
+      entry_id TEXT NOT NULL,
+      file_path TEXT NOT NULL,
+      unit_number INTEGER,
+      FOREIGN KEY (entry_id) REFERENCES local_entries(id)
+    )
+  `);
+
+    await run(db, `
+    CREATE INDEX IF NOT EXISTS idx_local_entries_type
+    ON local_entries(type)
+  `);
+
+    await run(db, `
+    CREATE INDEX IF NOT EXISTS idx_local_entries_matched
+    ON local_entries(matched_id)
+  `);
+
+    await run(db, `
+    CREATE INDEX IF NOT EXISTS idx_local_files_entry
+    ON local_files(entry_id)
+  `);
+}
+
+function run(db, sql, params = []) {
+    return new Promise((resolve, reject) => {
+        db.run(sql, params, err => {
+            if (err) reject(err);
+            else resolve();
+        });
+    });
+}
+
 async function ensureUserDataDB(dbPath) {
     const dir = path.dirname(dbPath);
 
@@ -230,5 +278,6 @@ module.exports = {
     ensureAnilistSchema,
     ensureExtensionsTable,
     ensureCacheTable,
-    ensureFavoritesDB
+    ensureFavoritesDB,
+    ensureLocalLibrarySchema
 };

docker/src/views/views.routes.ts

@@ -2,80 +2,144 @@ import { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify';
 import * as fs from 'fs';
 import * as path from 'path';
 
+let cachedNavbar: string | null = null;
+
+function getNavbarHTML(activePage: string, showSearch: boolean = true): string {
+    if (!cachedNavbar) {
+        const navbarPath = path.join(__dirname, '..', '..', 'views', 'components', 'navbar.html');
+        cachedNavbar = fs.readFileSync(navbarPath, 'utf-8');
+    }
+
+    let navbar = cachedNavbar;
+
+    const pages = ['anime', 'books', 'gallery', 'schedule', 'my-list', 'marketplace'];
+    pages.forEach(page => {
+        const regex = new RegExp(`(<button class="nav-button[^"]*)"\\s+data-page="${page}"`, 'g');
+        if (page === activePage) {
+            navbar = navbar.replace(regex, `$1 active" data-page="${page}"`);
+        }
+    });
+
+    if (!showSearch) {
+        navbar = navbar.replace(
+            '<div class="search-wrapper">',
+            '<div class="search-wrapper" style="visibility: hidden;">'
+        );
+    }
+
+    return navbar;
+}
+
+function injectNavbar(htmlContent: string, activePage: string, showSearch: boolean = true): string {
+    const navbar = getNavbarHTML(activePage, showSearch);
+
+    return htmlContent.replace(/<body[^>]*>/, `$&\n${navbar}`);
+}
+
 async function viewsRoutes(fastify: FastifyInstance) {
+
     fastify.get('/', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'users.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'users.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        reply.type('text/html').send(html);
     });
 
     fastify.get('/anime', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'anime', 'animes.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'animes.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        const htmlWithNavbar = injectNavbar(html, 'anime', true);
+        reply.type('text/html').send(htmlWithNavbar);
     });
 
     fastify.get('/my-list', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'list.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'list.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        const htmlWithNavbar = injectNavbar(html, 'my-list', false);
+        reply.type('text/html').send(htmlWithNavbar);
     });
 
     fastify.get('/books', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'books', 'books.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'books.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        const htmlWithNavbar = injectNavbar(html, 'books', true);
+        reply.type('text/html').send(htmlWithNavbar);
     });
 
     fastify.get('/schedule', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'schedule.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'schedule.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        const htmlWithNavbar = injectNavbar(html, 'schedule', false);
+        reply.type('text/html').send(htmlWithNavbar);
     });
 
     fastify.get('/gallery', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'gallery', 'gallery.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'gallery', 'gallery.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        const htmlWithNavbar = injectNavbar(html, 'gallery', true);
+        reply.type('text/html').send(htmlWithNavbar);
     });
 
     fastify.get('/marketplace', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'marketplace.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'marketplace.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        const htmlWithNavbar = injectNavbar(html, 'marketplace', false);
+        reply.type('text/html').send(htmlWithNavbar);
     });
 
     fastify.get('/gallery/:extension/*', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'gallery', 'image.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'gallery', 'image.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        const htmlWithNavbar = injectNavbar(html, 'gallery', true);
+        reply.type('text/html').send(htmlWithNavbar);
     });
 
     fastify.get('/gallery/favorites/*', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'gallery', 'image.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'gallery', 'image.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        const htmlWithNavbar = injectNavbar(html, 'gallery', true);
+        reply.type('text/html').send(htmlWithNavbar);
     });
 
     fastify.get('/anime/:id', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'anime', 'anime.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'anime.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        reply.type('text/html').send(html);
     });
 
     fastify.get('/anime/:extension/*', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'anime', 'anime.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'anime.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        reply.type('text/html').send(html);
     });
 
     fastify.get('/watch/:id/:episode', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'anime', 'watch.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'watch.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        reply.type('text/html').send(html);
     });
 
     fastify.get('/book/:id', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'books', 'book.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'book.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        reply.type('text/html').send(html);
     });
 
     fastify.get('/book/:extension/*', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'books', 'book.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'book.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        reply.type('text/html').send(html);
     });
 
     fastify.get('/read/:provider/:chapter/*', (req: FastifyRequest, reply: FastifyReply) => {
-        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'books', 'read.html'));
-        reply.type('text/html').send(stream);
+        const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'read.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        reply.type('text/html').send(html);
+    });
+
+    fastify.setNotFoundHandler((req, reply) => {
+        const htmlPath = path.join(__dirname, '..', '..', 'views', '404.html');
+        const html = fs.readFileSync(htmlPath, 'utf-8');
+        reply.code(404).type('text/html').send(html);
     });
 }
 

docker/views/404.html

@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>404 - WaifuBoard</title>
+    <link rel="stylesheet" href="/views/css/globals.css">
+    <link rel="stylesheet" href="/views/css/components/navbar.css">
+    <link rel="stylesheet" href="/views/css/components/titlebar.css">
+    <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
+
+    <script src="/src/scripts/titlebar.js"></script>
+
+    <style>
+        .error-container {
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            padding: var(--spacing-2xl);
+            background: var(--color-bg-base);
+        }
+
+        .error-code {
+            font-size: 6rem;
+            font-weight: 900;
+            margin: 0;
+            color: var(--color-primary);
+        }
+
+        .error-message {
+            font-size: 1.1rem;
+            color: var(--color-text-secondary);
+            margin: var(--spacing-md) 0 var(--spacing-xl);
+            max-width: 420px;
+        }
+
+        .error-actions {
+            display: flex;
+            gap: var(--spacing-md);
+            justify-content: center;
+        }
+    </style>
+</head>
+<body>
+
+<nav class="navbar" id="navbar">
+    <a href="#" class="nav-brand">
+        <div class="brand-icon">
+            <img src="/public/assets/waifuboards.ico" alt="WF Logo">
+        </div>
+        WaifuBoard
+    </a>
+
+    <div class="nav-center">
+        <button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
+        <button class="nav-button" onclick="window.location.href='/books'">Books</button>
+        <button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
+        <button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
+        <button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
+        <button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
+    </div>
+
+    <div class="nav-right">
+        <div class="search-wrapper" style="visibility: hidden;">
+            <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                <circle cx="11" cy="11" r="8"/>
+                <path d="M21 21l-4.35-4.35"/>
+            </svg>
+            <input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
+            <div class="search-results" id="search-results"></div>
+        </div>
+
+        <div class="nav-user" id="nav-user" style="display:none;">
+            <div class="user-avatar-btn">
+                <img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
+                <div class="online-indicator"></div>
+            </div>
+
+            <div class="nav-dropdown" id="nav-dropdown">
+                <div class="dropdown-header">
+                    <img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
+                    <div class="dropdown-user-info">
+                        <div class="dropdown-username" id="nav-username"></div>
+                    </div>
+                </div>
+
+                <a href="/my-list" class="dropdown-item">
+                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
+                        <polyline points="17 21 17 13 7 13 7 21"/>
+                        <polyline points="7 3 7 8 15 8"/>
+                    </svg>
+                    <span>My List</span>
+                </a>
+                <button class="dropdown-item logout-item" id="nav-logout">
+                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+                        <polyline points="16 17 21 12 16 7"/>
+                        <line x1="21" y1="12" x2="9" y2="12"/>
+                    </svg>
+                    <span>Logout</span>
+                </button>
+            </div>
+        </div>
+    </div>
+</nav>
+
+<main class="error-container">
+    <div>
+        <h1 class="error-code">404</h1>
+        <p class="error-message">
+            This page doesn’t exist.
+        </p>
+
+        <div class="error-actions">
+            <button class="btn-primary" onclick="location.href='/'">Home</button>
+            <button class="btn-blur" onclick="history.back()">Back</button>
+        </div>
+    </div>
+</main>
+
+<script src="/src/scripts/utils/auth-utils.js"></script>
+
+</body>
+</html>

docker/views/anime/anime.html

@@ -27,130 +27,6 @@
             </div>
         </div>
 
-        <div class="modal-overlay" id="add-list-modal">
-            <div class="modal-content modal-list">
-                <button class="modal-close" onclick="closeAddToListModal()">
-                    ✕
-                </button>
-                <h2 class="modal-title" id="modal-title">Add to List</h2>
-
-                <div class="modal-body">
-                    <div class="modal-fields-grid">
-                        <div class="form-group">
-                            <label>Status</label>
-                            <select id="entry-status" class="form-input">
-                                <option value="WATCHING">Watching</option>
-                                <option value="COMPLETED">Completed</option>
-                                <option value="PLANNING">Planning</option>
-                                <option value="PAUSED">Paused</option>
-                                <option value="DROPPED">Dropped</option>
-                                <option value="REPEATING">Rewatching</option>
-                            </select>
-                        </div>
-
-                        <div class="form-group">
-                            <label>Episodes Watched</label>
-                            <input
-                                type="number"
-                                id="entry-progress"
-                                class="form-input"
-                                min="0"
-                                placeholder="0"
-                            />
-                        </div>
-
-                        <div class="form-group">
-                            <label>Your Score (0-10)</label>
-                            <input
-                                type="number"
-                                id="entry-score"
-                                class="form-input"
-                                min="0"
-                                max="10"
-                                step="0.1"
-                                placeholder="Optional"
-                            />
-                        </div>
-
-                        <div class="form-group full-width">
-                            <div class="date-group">
-                                <div class="date-input-pair">
-                                    <label for="entry-start-date"
-                                        >Start Date</label
-                                    >
-                                    <input
-                                        type="date"
-                                        id="entry-start-date"
-                                        class="form-input"
-                                    />
-                                </div>
-                                <div class="date-input-pair">
-                                    <label for="entry-end-date">End Date</label>
-                                    <input
-                                        type="date"
-                                        id="entry-end-date"
-                                        class="form-input"
-                                    />
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="form-group">
-                            <label for="entry-repeat-count"
-                                >Rewatch Count</label
-                            >
-                            <input
-                                type="number"
-                                id="entry-repeat-count"
-                                class="form-input"
-                                min="0"
-                            />
-                        </div>
-
-                        <div class="form-group notes-group">
-                            <label for="entry-notes">Notes</label>
-                            <textarea
-                                id="entry-notes"
-                                class="form-input notes-textarea"
-                                rows="4"
-                                placeholder="Personal notes..."
-                            ></textarea>
-                        </div>
-
-                        <div class="form-group checkbox-group">
-                            <input
-                                type="checkbox"
-                                id="entry-is-private"
-                                class="form-checkbox"
-                            />
-                            <label for="entry-is-private"
-                                >Mark as Private</label
-                            >
-                        </div>
-                    </div>
-                </div>
-
-                <div class="modal-actions">
-                    <button
-                        class="btn-danger"
-                        id="modal-delete-btn"
-                        onclick="deleteFromList()"
-                    >
-                        Remove
-                    </button>
-                    <button
-                        class="btn-secondary"
-                        onclick="closeAddToListModal()"
-                    >
-                        Cancel
-                    </button>
-                    <button class="btn-primary" onclick="saveToList()">
-                        Save Changes
-                    </button>
-                </div>
-            </div>
-        </div>
-
         <a href="/anime" class="back-btn">
             <svg
                 width="20"
@@ -219,6 +95,7 @@
                             id="extension-pill"
                             style="display: none; background: #8b5cf6"
                         ></div>
+                        <div class="pill" id="local-pill" style="display: none; background: #8b5cf6;"></div>
                         <div class="pill score" id="score">--% Score</div>
                         <div class="pill" id="year">----</div>
                         <div class="pill" id="genres">Action</div>

docker/views/anime/animes.html

@@ -9,71 +9,10 @@
     <link rel="stylesheet" href="/views/css/components/hero.css">
     <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
     <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
+    <link rel="stylesheet" href="/views/css/components/local-library.css">
     <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
 </head>
 <body>
-<nav class="navbar" id="navbar">
-    <a href="#" class="nav-brand">
-        <div class="brand-icon">
-            <img src="/public/assets/waifuboards.ico" alt="WF Logo">
-        </div>
-        WaifuBoard
-    </a>
-
-    <div class="nav-center">
-        <button class="nav-button active">Anime</button>
-        <button class="nav-button" onclick="window.location.href='/books'">Books</button>
-        <button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
-        <button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
-        <button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
-        <button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
-    </div>
-
-    <div class="nav-right">
-        <div class="search-wrapper">
-            <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                <circle cx="11" cy="11" r="8"/>
-                <path d="M21 21l-4.35-4.35"/>
-            </svg>
-            <input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
-            <div class="search-results" id="search-results"></div>
-        </div>
-
-        <div class="nav-user" id="nav-user" style="display:none;">
-            <div class="user-avatar-btn">
-                <img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
-                <div class="online-indicator"></div>
-            </div>
-
-            <div class="nav-dropdown" id="nav-dropdown">
-                <div class="dropdown-header">
-                    <img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
-                    <div class="dropdown-user-info">
-                        <div class="dropdown-username" id="nav-username"></div>
-                    </div>
-                </div>
-
-                <a href="/my-list" class="dropdown-item">
-                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
-                        <polyline points="17 21 17 13 7 13 7 21"/>
-                        <polyline points="7 3 7 8 15 8"/>
-                    </svg>
-                    <span>My List</span>
-                </a>
-                <button class="dropdown-item logout-item" id="nav-logout">
-                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
-                        <polyline points="16 17 21 12 16 7"/>
-                        <line x1="21" y1="12" x2="9" y2="12"/>
-                    </svg>
-                    <span>Logout</span>
-                </button>
-            </div>
-        </div>
-    </div>
-</nav>
-
 <div class="hero-wrapper">
     <div class="hero-background">
         <img id="hero-bg-media" alt="">
@@ -108,77 +47,17 @@
             </div>
         </div>
     </div>
-</div>
-
-<div class="modal-overlay" id="add-list-modal">
-    <div class="modal-content modal-list">
-        <button class="modal-close" onclick="closeAddToListModal()">✕</button>
-        <h2 class="modal-title" id="modal-title">Add to List</h2>
-
-        <div class="modal-body">
-            <div class="modal-fields-grid">
-
-                <div class="form-group">
-                    <label>Status</label>
-                    <select id="entry-status" class="form-input">
-                        <option value="WATCHING">Watching/Reading</option>
-                        <option value="COMPLETED">Completed</option>
-                        <option value="PLANNING">Planning</option>
-                        <option value="PAUSED">Paused</option>
-                        <option value="DROPPED">Dropped</option>
-                        <option value="REPEATING">Rewatching</option>
-                    </select>
-                </div>
-
-                <div class="form-group">
-                    <label>Episodes Watched</label>
-                    <input type="number" id="entry-progress" class="form-input" min="0" placeholder="0">
-                </div>
-
-                <div class="form-group">
-                    <label>Your Score (0-10)</label>
-                    <input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
-                </div>
-
-                <div class="form-group full-width">
-                    <div class="date-group">
-                        <div class="date-input-pair">
-                            <label for="entry-start-date">Start Date</label>
-                            <input type="date" id="entry-start-date" class="form-input">
-                        </div>
-                        <div class="date-input-pair">
-                            <label for="entry-end-date">End Date</label>
-                            <input type="date" id="entry-end-date" class="form-input">
-                        </div>
-                    </div>
-                </div>
-
-                <div class="form-group">
-                    <label for="entry-repeat-count">Rewatch Count</label>
-                    <input type="number" id="entry-repeat-count" class="form-input" min="0">
-                </div>
-
-                <div class="form-group notes-group">
-                    <label for="entry-notes">Notes</label>
-                    <textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
-                </div>
-
-                <div class="form-group checkbox-group">
-                    <input type="checkbox" id="entry-is-private" class="form-checkbox">
-                    <label for="entry-is-private">Mark as Private</label>
-                </div>
+    <button class="library-mode-btn icon-only" id="library-mode-btn" onclick="toggleLibraryMode()" title="Switch library mode">
+        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+            <polyline points="9 22 9 12 15 12 15 22"/>
+        </svg>
+    </button>
 
 </div>
-        </div>
 
-        <div class="modal-actions">
-            <button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
-            <button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
-            <button class="btn-primary" onclick="saveToList()">Save Changes</button>
-        </div>
-    </div>
-</div>
-<main>
+<!-- Online Mode Content -->
+<main id="online-content">
     <section class="section">
         <div class="section-header">
             <div class="section-title">Continue watching</div>
@@ -195,13 +74,11 @@
         </div>
     </section>
 
-
     <section class="section">
         <div class="section-header"><div class="section-title">Trending This Season</div></div>
         <div class="carousel-wrapper">
             <button class="scroll-btn left" onclick="scrollCarousel('trending', -1)">‹</button>
             <div class="carousel" id="trending">
-
                 <div class="card"><div class="card-img-wrap skeleton"></div></div>
                 <div class="card"><div class="card-img-wrap skeleton"></div></div>
                 <div class="card"><div class="card-img-wrap skeleton"></div></div>
@@ -211,7 +88,6 @@
         </div>
     </section>
 
-
     <section class="section">
         <div class="section-header"><div class="section-title">Top Airing Now</div></div>
         <div class="carousel-wrapper">
@@ -227,14 +103,49 @@
     </section>
 </main>
 
+<!-- Local Library Mode Content -->
+<main id="local-content" class="hidden">
+    <section class="section">
+        <div class="section-header">
+            <div class="section-title">Local Anime Library</div>
+            <button class="btn-secondary" onclick="scanLocalLibrary()">
+                <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                    <path d="M21 12a9 9 0 1 1-9-9"/>
+                    <path d="M21 3v6h-6"/>
+                </svg>
+                <span id="scan-text">Scan Library</span>
+            </button>
+        </div>
+        <div class="local-filters">
+            <div class="filter-group">
+                <button class="filter-btn active" data-filter="all">All</button>
+                <button class="filter-btn" data-filter="watching">Watching</button>
+                <button class="filter-btn" data-filter="completed">Completed</button>
+                <button class="filter-btn" data-filter="unwatched">Unwatched</button>
+                <button class="filter-btn" data-filter="unlinked">Unlinked</button>
+            </div>
+
+            <div class="filter-group">
+                <button class="filter-btn" data-sort="az">A–Z</button>
+                <button class="filter-btn" data-sort="recent">Recent</button>
+            </div>
+        </div>
+        <div class="local-library-grid" id="local-entries-grid">
+            <div class="skeleton-card"></div>
+            <div class="skeleton-card"></div>
+            <div class="skeleton-card"></div>
+            <div class="skeleton-card"></div>
+            <div class="skeleton-card"></div>
+            <div class="skeleton-card"></div>
+            <div class="skeleton-card"></div>
+            <div class="skeleton-card"></div>
+        </div>
+    </section>
+</main>
+
 <div id="updateToast" class="hidden">
     <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
-
-    <a
-            id="downloadButton"
-            href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
-            target="_blank"
-    >
+    <a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">
         Click To Download
     </a>
 </div>
@@ -245,7 +156,9 @@
 <script src="/src/scripts/utils/continue-watching-manager.js"></script>
 <script src="/src/scripts/utils/youtube-player-utils.js"></script>
 <script src="/src/scripts/anime/animes.js"></script>
+<script src="/src/scripts/local-library.js"></script>
 <script src="/src/scripts/updateNotifier.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
+<script src="/src/scripts/settings.js"></script>
 </body>
 </html>

docker/views/books/book.html

@@ -13,72 +13,6 @@
 </head>
 <body>
 
-<div class="modal-overlay" id="add-list-modal">
-    <div class="modal-content">
-        <button class="modal-close" onclick="closeAddToListModal()">✕</button>
-        <h2 class="modal-title" id="modal-title">Add to Library</h2>
-
-        <div class="modal-body">
-            <div class="modal-fields-grid">
-
-                <div class="form-group">
-                    <label for="entry-status">Status</label>
-                    <select id="entry-status" class="form-input">
-                        <option value="CURRENT">Reading</option>
-                        <option value="COMPLETED">Completed</option>
-                        <option value="PLANNING">Plan to Read</option>
-                        <option value="PAUSED">Paused</option>
-                        <option value="DROPPED">Dropped</option>
-                        <option value="REPEATING">Rereading</option>
-                    </select>
-                </div>
-
-                <div class="form-group">
-                    <label for="entry-progress" id="progress-label">Chapters Read</label>
-                    <input type="number" id="entry-progress" class="form-input" min="0" max="0" placeholder="0">
-                </div>
-
-                <div class="form-group">
-                    <label for="entry-score">Score (0-10)</label>
-                    <input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
-                </div>
-
-                <div class="form-group full-width date-group">
-                    <div class="date-input-pair">
-                        <label for="entry-start-date">Start Date</label>
-                        <input type="date" id="entry-start-date" class="form-input">
-                    </div>
-                    <div class="date-input-pair">
-                        <label for="entry-end-date">End Date</label>
-                        <input type="date" id="entry-end-date" class="form-input">
-                    </div>
-                </div>
-
-                <div class="form-group">
-                    <label for="entry-repeat-count">Re-read Count</label>
-                    <input type="number" id="entry-repeat-count" class="form-input" min="0">
-                </div>
-
-                <div class="form-group notes-group">
-                    <label for="entry-notes">Notes</label>
-                    <textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
-                </div>
-
-                <div class="form-group checkbox-group">
-                    <input type="checkbox" id="entry-is-private" class="form-checkbox">
-                    <label for="entry-is-private">Mark as Private</label>
-                </div>
-
-            </div>
-        </div>
-
-        <div class="modal-actions">
-            <button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
-            <button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
-            <button class="btn-primary" onclick="saveToList()">Save Changes</button>
-        </div>
-    </div>
-</div>
 <a href="/books" class="back-btn">
     <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
     Back to Books
@@ -128,6 +62,7 @@
 
             <div class="meta-row">
                 <div class="pill extension-pill" id="extension-pill" style="display: none; background: #8b5cf6;"></div>
+                <div class="pill" id="local-pill" style="display: none; background: #8b5cf6;"></div>
                 <div class="pill score" id="score">--% Score</div>
                 <div class="pill" id="genres">Action</div>
             </div>

docker/views/books/books.html

@@ -9,70 +9,10 @@
     <link rel="stylesheet" href="/views/css/components/hero.css">
     <link rel="stylesheet" href="/views/css/components/anilist-modal.css">
     <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
+    <link rel="stylesheet" href="/views/css/components/local-library.css">
     <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
 </head>
 <body>
-
-<nav class="navbar" id="navbar">
-    <a href="#" class="nav-brand">
-        <div class="brand-icon">
-            <img src="/public/assets/waifuboards.ico" alt="WF Logo">
-        </div>
-        WaifuBoard
-    </a>
-
-    <div class="nav-center">
-        <button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
-        <button class="nav-button active">Books</button>
-        <button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
-        <button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
-        <button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
-        <button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
-    </div>
-
-    <div class="nav-right">
-        <div class="search-wrapper">
-            <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
-            <input type="text" class="search-input" id="search-input" placeholder="Search books..." autocomplete="off">
-            <div class="search-results" id="search-results"></div>
-        </div>
-
-        <div class="nav-user" id="nav-user" style="display:none;">
-            <div class="user-avatar-btn">
-                <img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
-                <div class="online-indicator"></div>
-            </div>
-
-            <div class="nav-dropdown" id="nav-dropdown">
-                <div class="dropdown-header">
-                    <img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
-                    <div class="dropdown-user-info">
-                        <div class="dropdown-username" id="nav-username"></div>
-                    </div>
-                </div>
-
-                <a href="/my-list" class="dropdown-item">
-                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
-                        <polyline points="17 21 17 13 7 13 7 21"/>
-                        <polyline points="7 3 7 8 15 8"/>
-                    </svg>
-                    <span>My List</span>
-                </a>
-                <button class="dropdown-item logout-item" id="nav-logout">
-                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
-                        <polyline points="16 17 21 12 16 7"/>
-                        <line x1="21" y1="12" x2="9" y2="12"/>
-                    </svg>
-                    <span>Logout</span>
-                </button>
-            </div>
-        </div>
-    </div>
-</nav>
-
-
 <div class="hero-wrapper">
     <div class="hero-background">
         <img id="hero-bg-media" src="" alt="">
@@ -97,75 +37,40 @@
             </div>
         </div>
     </div>
+    <button class="library-mode-btn icon-only" id="library-mode-btn" onclick="toggleLibraryMode()" title="Switch library mode">
+        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+            <polyline points="9 22 9 12 15 12 15 22"/>
+        </svg>
+    </button>
 </div>
-
-<div class="modal-overlay" id="add-list-modal">
-    <div class="modal-content modal-list">
-        <button class="modal-close" onclick="closeAddToListModal()">✕</button>
-        <h2 class="modal-title" id="modal-title">Add to Library</h2>
-
-        <div class="modal-body">
-            <div class="modal-fields-grid">
-
-                <div class="form-group">
-                    <label for="entry-status">Status</label>
-                    <select id="entry-status" class="form-input">
-                        <option value="CURRENT">Reading</option>
-                        <option value="COMPLETED">Completed</option>
-                        <option value="PLANNING">Plan to Read</option>
-                        <option value="PAUSED">Paused</option>
-                        <option value="DROPPED">Dropped</option>
-                        <option value="REPEATING">Rereading</option>
-                    </select>
+<main id="local-content" class="hidden">
+    <section class="section">
+        <div class="section-header">
+            <div class="section-title">Local Books Library</div>
+            <button class="btn-secondary" onclick="scanLocalLibrary()">
+                <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                    <path d="M21 12a9 9 0 1 1-9-9"/><path d="M21 3v6h-6"/>
+                </svg>
+                <span id="scan-text">Scan Library</span>
+            </button>
         </div>
-
-                <div class="form-group">
-                    <label for="entry-progress" id="progress-label">Chapters Read</label>
-                    <input type="number" id="entry-progress" class="form-input" min="0" max="0" placeholder="0">
+        <div class="local-filters">
+            <div class="filter-group">
+                <button class="filter-btn active" data-filter="all">All</button>
+                <button class="filter-btn" data-filter="unlinked">Unlinked</button>
             </div>
-
-                <div class="form-group">
-                    <label for="entry-score">Score (0-10)</label>
-                    <input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
-                </div>
-
-                <div class="form-group full-width date-group">
-                    <div class="date-input-pair">
-                        <label for="entry-start-date">Start Date</label>
-                        <input type="date" id="entry-start-date" class="form-input">
-                    </div>
-                    <div class="date-input-pair">
-                        <label for="entry-end-date">End Date</label>
-                        <input type="date" id="entry-end-date" class="form-input">
+            <div class="filter-group">
+                <button class="filter-btn" data-sort="az">A–Z</button>
             </div>
         </div>
-
-                <div class="form-group">
-                    <label for="entry-repeat-count">Re-read Count</label>
-                    <input type="number" id="entry-repeat-count" class="form-input" min="0">
+        <div class="local-library-grid" id="local-entries-grid">
+            <div class="skeleton-card"></div>
+            <div class="skeleton-card"></div>
         </div>
-
-                <div class="form-group notes-group">
-                    <label for="entry-notes">Notes</label>
-                    <textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
-                </div>
-
-                <div class="form-group checkbox-group">
-                    <input type="checkbox" id="entry-is-private" class="form-checkbox">
-                    <label for="entry-is-private">Mark as Private</label>
-                </div>
-
-            </div>
-        </div>
-
-        <div class="modal-actions">
-            <button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
-            <button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
-            <button class="btn-primary" onclick="saveToList()">Save Changes</button>
-        </div>
-    </div>
-</div>
-<main>
+    </section>
+</main>
+<main id="online-content">
     <section class="section">
         <div class="section-header">
             <div class="section-title">Continue Reading</div>
@@ -214,7 +119,7 @@
 <script src="/src/scripts/utils/list-modal-manager.js"></script>
 <script src="/src/scripts/utils/continue-watching-manager.js"></script>
 <script src="/src/scripts/books/books.js"></script>
-
+<script src="/src/scripts/local-library-books.js"></script>
 <script src="/src/scripts/updateNotifier.js"></script>
 <script src="/src/scripts/auth-guard.js"></script>
 </body>

docker/views/components/list-modal.html

@@ -0,0 +1,66 @@
+<div class="modal-overlay" id="add-list-modal">
+    <div class="modal-content modal-list">
+        <button class="modal-close" onclick="closeAddToListModal()">✕</button>
+        <h2 class="modal-title" id="modal-title">Add to List</h2>
+
+        <div class="modal-body">
+            <div class="modal-fields-grid">
+                <div class="form-group">
+                    <label>Status</label>
+                    <select id="entry-status" class="form-input">
+                        <option value="CURRENT">Watching/Reading</option>
+                        <option value="COMPLETED">Completed</option>
+                        <option value="PLANNING">Planning</option>
+                        <option value="PAUSED">Paused</option>
+                        <option value="DROPPED">Dropped</option>
+                        <option value="REPEATING">Rewatching</option>
+                    </select>
+                </div>
+
+                <div class="form-group">
+                    <label>Episodes Watched</label>
+                    <input type="number" id="entry-progress" class="form-input" min="0" placeholder="0">
+                </div>
+
+                <div class="form-group">
+                    <label>Your Score (0-10)</label>
+                    <input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
+                </div>
+
+                <div class="form-group full-width">
+                    <div class="date-group">
+                        <div class="date-input-pair">
+                            <label for="entry-start-date">Start Date</label>
+                            <input type="date" id="entry-start-date" class="form-input">
+                        </div>
+                        <div class="date-input-pair">
+                            <label for="entry-end-date">End Date</label>
+                            <input type="date" id="entry-end-date" class="form-input">
+                        </div>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label for="entry-repeat-count">Rewatch Count</label>
+                    <input type="number" id="entry-repeat-count" class="form-input" min="0">
+                </div>
+
+                <div class="form-group notes-group">
+                    <label for="entry-notes">Notes</label>
+                    <textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
+                </div>
+
+                <div class="form-group checkbox-group">
+                    <input type="checkbox" id="entry-is-private" class="form-checkbox">
+                    <label for="entry-is-private">Mark as Private</label>
+                </div>
+            </div>
+        </div>
+
+        <div class="modal-actions">
+            <button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
+            <button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
+            <button class="btn-primary" onclick="saveToList()">Save Changes</button>
+        </div>
+    </div>
+</div>

docker/views/components/navbar.html

@@ -0,0 +1,69 @@
+<nav class="navbar" id="navbar">
+  <a href="#" class="nav-brand">
+    <div class="brand-icon">
+      <img src="/public/assets/waifuboards.ico" alt="WF Logo">
+    </div>
+    WaifuBoard
+  </a>
+
+  <div class="nav-center">
+    <button class="nav-button" data-page="anime" onclick="window.location.href='/anime'">Anime</button>
+    <button class="nav-button" data-page="books" onclick="window.location.href='/books'">Books</button>
+    <button class="nav-button" data-page="gallery" onclick="window.location.href='/gallery'">Gallery</button>
+    <button class="nav-button" data-page="schedule" onclick="window.location.href='/schedule'">Schedule</button>
+    <button class="nav-button" data-page="my-list" onclick="window.location.href='/my-list'">My List</button>
+    <button class="nav-button" data-page="marketplace" onclick="window.location.href='/marketplace'">Marketplace</button>
+  </div>
+
+  <div class="nav-right">
+    <div class="search-wrapper">
+      <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+        <circle cx="11" cy="11" r="8"/>
+        <path d="M21 21l-4.35-4.35"/>
+      </svg>
+      <input type="text" class="search-input" id="search-input" placeholder="Search..." autocomplete="off">
+      <div class="search-results" id="search-results"></div>
+    </div>
+
+    <div class="nav-user" id="nav-user" style="display:none;">
+      <div class="user-avatar-btn">
+        <img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
+        <div class="online-indicator"></div>
+      </div>
+
+      <div class="nav-dropdown" id="nav-dropdown">
+        <div class="dropdown-header">
+          <img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
+          <div class="dropdown-user-info">
+            <div class="dropdown-username" id="nav-username"></div>
+          </div>
+        </div>
+
+        <button class="dropdown-item" id="nav-settings">
+          <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <circle cx="12" cy="12" r="3"/>
+            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.65 1.65 0 0 0 15 19.4a1.65 1.65 0 0 0-1 .6 1.65 1.65 0 0 0-.33 1.82V22a2 2 0 1 1-4 0v-.18a1.65 1.65 0 0 0-.33-1.82 1.65 1.65 0 0 0-1-.6 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-.6-1 1.65 1.65 0 0 0-1.82-.33H2a2 2 0 1 1 0-4h.18a1.65 1.65 0 0 0 1.82-.33 1.65 1.65 0 0 0 .6-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6c.37 0 .72-.14 1-.6A1.65 1.65 0 0 0 10.33 2.18V2a2 2 0 1 1 4 0v.18a1.65 1.65 0 0 0 .33 1.82c.28.46.63.6 1 .6a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c0 .37.14.72.6 1 .46.28.6.63.6 1z"/>
+          </svg>
+          <span>Settings</span>
+        </button>
+
+        <a href="/my-list" class="dropdown-item">
+          <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
+            <polyline points="17 21 17 13 7 13 7 21"/>
+            <polyline points="7 3 7 8 15 8"/>
+          </svg>
+          <span>My List</span>
+        </a>
+        <button class="dropdown-item logout-item" id="nav-logout">
+          <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+            <polyline points="16 17 21 12 16 7"/>
+            <line x1="21" y1="12" x2="9" y2="12"/>
+          </svg>
+          <span>Logout</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</nav>

docker/views/components/settings-modal.html

@@ -0,0 +1,278 @@
+<div id="settings-modal" class="modal hidden" onclick="if(event.target === this) window.toggleSettingsModal(true)">
+  <div class="modal-overlay"></div>
+  <div class="modal-content">
+
+    <aside class="modal-sidebar">
+      <div class="sidebar-header">
+        <h2 class="sidebar-title">Settings</h2>
+      </div>
+      <nav id="config-nav" class="nav-list">
+      </nav>
+
+      <div class="sidebar-footer">
+        <button onclick="window.toggleSettingsModal(true)" class="btn-exit">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+            <polyline points="16 17 21 12 16 7"></polyline>
+            <line x1="21" y1="12" x2="9" y2="12"></line>
+          </svg>
+          Close
+        </button>
+      </div>
+    </aside>
+
+    <main class="modal-main">
+      <form id="config-form" class="config-wrapper">
+        <div id="config-section-content" class="section-container">
+          <div class="skeleton-loader">
+            <div class="skeleton title-skeleton"></div>
+            <div class="skeleton field-skeleton"></div>
+            <div class="skeleton field-skeleton"></div>
+            <div class="skeleton field-skeleton"></div>
+          </div>
+        </div>
+
+        <div class="modal-footer-sticky">
+          <p class="footer-hint">Changes are applied immediately after saving.</p>
+          <button type="submit" class="btn-primary">Save Changes</button>
+        </div>
+      </form>
+    </main>
+  </div>
+</div>
+
+<style>
+  /* --- AMOLED THEME VARIABLES --- */
+  :root {
+    --amoled-black: #000000;
+    --amoled-surface: #080808;
+    --amoled-field: #0e0e0e;
+    --amoled-border: rgba(255, 255, 255, 0.08);
+    --accent-purple: #8b5cf6;
+    --accent-glow: rgba(139, 92, 246, 0.15);
+    --text-main: #ffffff;
+    --text-dim: #a1a1aa;
+  }
+
+  /* --- MODAL BASE --- */
+  .modal {
+    position: fixed;
+    inset: 0;
+    z-index: 10000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+  }
+
+  .modal.hidden { display: none !important; }
+
+  .modal-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.9);
+    backdrop-filter: blur(12px);
+    z-index: -1;
+  }
+
+  .modal-content {
+    position: relative;
+    display: flex;
+    flex-direction: row; /* Horizontal layout */
+    width: 95%;
+    max-width: 1200px; /* Increased size */
+    height: 85vh;
+    background: var(--amoled-black);
+    border: var(--amoled-border);
+    border-radius: 28px;
+    overflow: hidden;
+    box-shadow: 0 0 0 1px var(--amoled-border), 0 24px 60px rgba(0,0,0,0.8);
+    animation: modalScaleUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  /* --- SIDEBAR --- */
+  .modal-sidebar {
+    width: 280px;
+    background: var(--amoled-surface);
+    border-right: var(--amoled-border);
+    display: flex;
+    flex-direction: column;
+    padding: 2rem;
+    flex-shrink: 0;
+  }
+
+  .sidebar-title {
+    font-size: 1.4rem;
+    font-weight: 800;
+    margin-bottom: 2.5rem;
+    color: var(--text-main);
+    letter-spacing: -0.02em;
+  }
+
+  .nav-list { flex: 1; }
+
+  .nav-item {
+    padding: 12px 16px;
+    border-radius: 14px;
+    cursor: pointer;
+    color: var(--text-dim);
+    transition: all 0.2s ease;
+    margin-bottom: 6px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    text-transform: capitalize;
+  }
+
+  .nav-item:hover {
+    background: rgba(255, 255, 255, 0.05);
+    color: var(--text-main);
+  }
+
+  .nav-item.active {
+    background: var(--accent-glow);
+    color: var(--accent-purple);
+    box-shadow: inset 3px 0 0 var(--accent-purple);
+  }
+
+  /* --- MAIN CONTENT & DYNAMIC INPUTS --- */
+  .modal-main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: var(--amoled-black);
+    min-width: 0;
+  }
+
+  .config-wrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .section-container {
+    flex: 1;
+    padding: 3.5rem;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: #222 transparent;
+  }
+
+  /* Styles for the injected section content */
+  .config-group {
+    margin-bottom: 2.5rem;
+    animation: fadeInSection 0.4s ease-out;
+  }
+
+  .config-group label {
+    display: block;
+    font-size: 0.75rem;
+    color: var(--accent-purple);
+    margin-bottom: 0.8rem;
+    letter-spacing: 0.05em;
+    font-weight: 800;
+    text-transform: uppercase;
+  }
+
+  .config-input {
+    width: 100%;
+    padding: 1rem 1.2rem;
+    background: var(--amoled-field);
+    border: 1px solid #1a1a1a;
+    border-radius: 14px;
+    color: #fff;
+    font-size: 1rem;
+    transition: all 0.25s ease;
+  }
+
+  .config-input:focus {
+    outline: none;
+    border-color: var(--accent-purple);
+    background: #121212;
+    box-shadow: 0 0 0 4px var(--accent-glow);
+  }
+
+  /* --- FOOTER --- */
+  .modal-footer-sticky {
+    padding: 1.5rem 3.5rem;
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(10px);
+    border-top: var(--amoled-border);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .footer-hint {
+    font-size: 0.85rem;
+    color: var(--text-dim);
+  }
+
+  /* --- BUTTONS --- */
+  .btn-primary {
+    padding: 0.8rem 2.2rem;
+    background: #ffffff;
+    color: #000000;
+    border: none;
+    border-radius: 100px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+  }
+
+  .btn-primary:hover {
+    transform: translateY(-2px);
+    background: #f0f0f0;
+  }
+
+  .btn-exit {
+    background: #111;
+    border: 1px solid #222;
+    color: #ef4444;
+    padding: 10px;
+    border-radius: 12px;
+    width: 100%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    font-weight: 600;
+    margin-top: auto;
+  }
+
+  /* --- ANIMATIONS & SKELETON --- */
+  @keyframes modalScaleUp {
+    from { opacity: 0; transform: scale(0.97) translateY(10px); }
+    to { opacity: 1; transform: scale(1) translateY(0); }
+  }
+
+  @keyframes fadeInSection {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  .skeleton-loader { display: flex; flex-direction: column; gap: 2rem; }
+  .skeleton {
+    background: linear-gradient(90deg, #080808 25%, #121212 50%, #080808 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+    border-radius: 12px;
+  }
+  @keyframes shimmer {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
+  .title-skeleton { height: 35px; width: 40%; }
+  .field-skeleton { height: 55px; width: 100%; }
+
+  /* Responsive Mobile View */
+  @media (max-width: 850px) {
+    .modal-content { flex-direction: column; height: 95vh; width: 100vw; border-radius: 0; }
+    .modal-sidebar { width: 100%; height: auto; border-right: none; border-bottom: var(--amoled-border); padding: 1rem; }
+    .sidebar-title { margin-bottom: 1rem; font-size: 1.2rem; }
+    .section-container { padding: 2rem; }
+    .modal-footer-sticky { padding: 1.5rem 2rem; }
+  }
+</style>

docker/views/css/anime/anime.css

@@ -53,36 +53,16 @@
     gap: 1.25rem;
 }
 
-.info-item h4 {
-    margin: 0 0 0.25rem 0;
-    font-size: 0.85rem;
-    color: var(--text-secondary);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-}
-.info-item span {
-    font-weight: 600;
-    font-size: 1rem;
-    color: var(--text-primary);
-}
+.info-item h4 { margin: 0 0 0.25rem 0; font-size: 0.85rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
+.info-item span { font-weight: 600; font-size: 1rem; color: var(--color-text-primary); }
 
 .character-list {
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
 }
-.character-item {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    font-size: 0.95rem;
-}
-.char-dot {
-    width: 6px;
-    height: 6px;
-    background: var(--color-primary);
-    border-radius: 50%;
-}
+.character-item { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; }
+.char-dot { width: 6px; height: 6px; background: var(--color-primary); border-radius: 50%; }
 
 .main-content {
     display: flex;
@@ -119,11 +99,7 @@
     font-weight: 600;
     font-size: 0.95rem;
 }
-.pill.score {
-    background: rgba(34, 197, 94, 0.2);
-    color: #4ade80;
-    border-color: rgba(34, 197, 94, 0.2);
-}
+.pill.score { background: rgba(34, 197, 94, 0.2); color: #4ade80; border-color: rgba(34, 197, 94, 0.2); }
 
 .action-row {
     display: flex;
@@ -143,9 +119,7 @@
     display: flex;
     align-items: center;
     gap: 0.75rem;
-    transition:
-        transform 0.2s,
-        box-shadow 0.2s;
+    transition: transform 0.2s, box-shadow 0.2s;
 }
 
 .btn-watch:hover {
@@ -188,21 +162,8 @@
 .episodes-section {
     margin-top: 4rem;
 }
-.section-title {
-    font-size: 1.8rem;
-    font-weight: 800;
-    margin-bottom: 1.5rem;
-    display: flex;
-    align-items: center;
-    gap: 0.8rem;
-}
-.section-title::before {
-    content: "";
-    width: 4px;
-    height: 28px;
-    background: var(--color-primary);
-    border-radius: 2px;
-}
+.section-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.8rem; }
+.section-title::before { content: ''; width: 4px; height: 28px; background: var(--color-primary); border-radius: 2px; }
 
 .episodes-grid {
     display: grid;
@@ -219,7 +180,7 @@
     transition: 0.2s;
     text-align: center;
     font-weight: 600;
-    color: var(--text-secondary);
+    color: var(--color-text-secondary);
 }
 
 .episode-btn:hover {
@@ -230,14 +191,8 @@
 }
 
 @keyframes slideUp {
-    from {
-        opacity: 0;
-        transform: translateY(60px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+    from { opacity: 0; transform: translateY(60px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
 @media (max-width: 1024px) {
@@ -246,24 +201,11 @@
         margin-top: -100px;
         padding: 0 1.5rem 4rem 1.5rem;
     }
-    .poster-card {
-        width: 220px;
-        margin: 0 auto;
-        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
-    }
-    .main-content {
-        text-align: center;
-        align-items: center;
-    }
-    .anime-title {
-        font-size: 2.5rem;
-    }
-    .meta-row {
-        justify-content: center;
-    }
-    .sidebar {
-        display: none;
-    }
+    .poster-card { width: 220px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
+    .main-content { text-align: center; align-items: center; }
+    .anime-title { font-size: 2.5rem; }
+    .meta-row { justify-content: center; }
+    .sidebar { display: none;  }
 }
 
 .read-more-btn {
@@ -279,9 +221,7 @@
     align-items: center;
     gap: 0.25rem;
 }
-.read-more-btn:hover {
-    text-decoration: underline;
-}
+.read-more-btn:hover { text-decoration: underline; }
 
 .episodes-header-row {
     display: flex;
@@ -321,10 +261,7 @@
 }
 
 .episode-search-input::-webkit-outer-spin-button,
-.episode-search-input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-}
+.episode-search-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
 
 .pagination-controls {
     display: flex;
@@ -358,118 +295,3 @@
     font-size: 0.9rem;
     font-weight: 500;
 }
-
-@media (max-width: 768px) {
-    .content-container,
-    .section,
-    .container {
-        width: 100%;
-        max-width: 100vw;
-        overflow-x: hidden;
-        padding-left: 1rem;
-        padding-right: 1rem;
-    }
-
-    .content-container {
-        display: flex;
-        flex-direction: column;
-        margin-top: -50px;
-        padding: 1rem 1.25rem 4rem 1.25rem;
-        gap: 2rem;
-    }
-
-    .sidebar {
-        display: flex !important;
-        flex-direction: column;
-        align-items: center;
-        width: 100%;
-        order: 1;
-    }
-
-    .poster-card {
-        width: 180px;
-        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
-        margin-bottom: 1rem;
-    }
-
-    .info-grid {
-        width: 100%;
-        padding: 1rem;
-    }
-
-    .main-content {
-        order: 2;
-        text-align: center;
-        align-items: center;
-    }
-
-    .anime-title {
-        font-size: 2.2rem;
-        line-height: 1.1;
-        margin-bottom: 1rem;
-    }
-
-    .meta-row {
-        justify-content: center;
-        gap: 0.5rem;
-    }
-
-    .pill {
-        padding: 0.4rem 0.8rem;
-        font-size: 0.8rem;
-    }
-
-    .action-row {
-        flex-direction: column;
-        width: 100%;
-        gap: 0.8rem;
-    }
-
-    .btn-watch,
-    .btn-secondary {
-        width: 100%;
-        justify-content: center;
-        padding: 1rem;
-    }
-
-    .description-box {
-        margin-top: 2rem;
-        padding: 1.25rem;
-        font-size: 1rem;
-        text-align: left;
-    }
-
-    .episodes-section {
-        margin-top: 3rem;
-        order: 3;
-    }
-
-    .episodes-header-row {
-        flex-direction: column;
-        align-items: stretch;
-        gap: 1rem;
-    }
-
-    .episode-search-wrapper {
-        width: 100%;
-    }
-
-    .episode-search-input {
-        width: 100%;
-        text-align: left;
-    }
-
-    .episodes-grid {
-        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
-        gap: 0.75rem;
-    }
-
-    .episode-btn {
-        padding: 0.8rem 0.5rem;
-        font-size: 0.9rem;
-    }
-
-    .pagination-controls {
-        flex-wrap: wrap;
-    }
-}

docker/views/css/components/local-library.css

@@ -0,0 +1,132 @@
+.library-mode-btn {
+    padding: 0.6rem 1.2rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: var(--radius-full);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 600;
+    font-size: 0.9rem;
+    transition: all 0.2s;
+}
+
+.library-mode-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+}
+
+.library-mode-btn.active {
+    background: var(--color-primary);
+    color: white;
+    border-color: var(--color-primary);
+}
+
+.library-mode-btn svg {
+    width: 18px;
+    height: 18px;
+}
+
+.local-library-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 1.5rem;
+    padding: 1rem 0;
+}
+
+.local-card {
+    cursor: pointer;
+    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.local-card:hover {
+    transform: translateY(-8px);
+}
+
+.local-card-info {
+    padding: 0.8rem 0;
+}
+
+.local-card-title {
+    font-size: 1rem;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: 0.5rem;
+}
+
+.match-status {
+    font-size: 0.85rem;
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    border-radius: var(--radius-sm);
+}
+
+.status-linked {
+    background: rgba(34, 197, 94, 0.2);
+    color: var(--color-success);
+}
+
+.status-unlinked {
+    background: rgba(239, 68, 68, 0.2);
+    color: var(--color-danger);
+}
+
+.hidden {
+    display: none !important;
+}
+
+.skeleton-card {
+    width: 100%;
+    aspect-ratio: 2/3;
+    background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+    border-radius: var(--radius-md);
+}
+
+@keyframes shimmer {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}
+
+.hero-wrapper {
+    position: relative;
+}
+
+.library-mode-btn.icon-only {
+    position: absolute;
+    bottom: 2rem;
+    right: 2rem;
+    z-index: 50;
+}
+
+
+.hero-mode-switch .library-mode-btn {
+    backdrop-filter: blur(10px);
+}
+
+.local-filters {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1rem;
+    flex-wrap: wrap;
+}
+
+.filter-btn {
+    padding: 0.4rem 0.9rem;
+    border-radius: 999px;
+    background: rgba(255,255,255,0.06);
+    border: 1px solid rgba(255,255,255,0.12);
+    color: #bbb;
+    cursor: pointer;
+}
+
+.filter-btn.active {
+    background: var(--color-primary);
+    color: white;
+    border-color: var(--color-primary);
+}

docker/views/gallery/gallery.html

@@ -15,70 +15,6 @@
 </head>
 <body>
 
-<nav class="navbar" id="navbar">
-    <a href="#" class="nav-brand">
-        <div class="brand-icon">
-            <img src="/public/assets/waifuboards.ico" alt="WF Logo">
-        </div>
-        WaifuBoard
-    </a>
-
-    <div class="nav-center">
-        <button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
-        <button class="nav-button" onclick="window.location.href='/books'">Books</button>
-        <button class="nav-button active">Gallery</button>
-        <button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
-        <button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
-        <button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
-    </div>
-
-    <!-- Mejorado el contenedor de usuario con dropdown más completo -->
-    <div class="nav-right">
-        <div class="search-wrapper">
-            <input type="text" id="main-search-input" class="search-input" placeholder="Search in gallery..." autocomplete="off">
-            <div class="search-results">
-                <button id="favorites-toggle-nav" class="fav-toggle-btn" title="Mostrar favoritos" style="margin: 10px; width: auto; font-size: 0.85rem;">
-                    <i class="far fa-heart"></i>
-                    <span class="fav-text">Favorites Mode</span>
-                </button>
-            </div>
-        </div>
-
-        <div class="nav-user" id="nav-user" style="display:none;">
-            <div class="user-avatar-btn">
-                <img id="nav-avatar" src="/placeholder.svg" alt="avatar">
-                <div class="online-indicator"></div>
-            </div>
-
-            <div class="nav-dropdown" id="nav-dropdown">
-                <div class="dropdown-header">
-                    <img id="dropdown-avatar" src="/placeholder.svg" alt="avatar" class="dropdown-avatar">
-                    <div class="dropdown-user-info">
-                        <div class="dropdown-username" id="nav-username"></div>
-                    </div>
-                </div>
-
-                <a href="/my-list" class="dropdown-item">
-                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
-                        <polyline points="17 21 17 13 7 13 7 21"/>
-                        <polyline points="7 3 7 8 15 8"/>
-                    </svg>
-                    <span>My List</span>
-                </a>
-                <button class="dropdown-item logout-item" id="nav-logout">
-                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
-                        <polyline points="16 17 21 12 16 7"/>
-                        <line x1="21" y1="12" x2="9" y2="12"/>
-                    </svg>
-                    <span>Logout</span>
-                </button>
-            </div>
-        </div>
-    </div>
-</nav>
-
 <main class="gallery-main">
     <div class="gallery-hero-placeholder"></div>
 

docker/views/gallery/image.html

@@ -14,65 +14,6 @@
 </head>
 <body>
 
-<nav class="navbar" id="navbar">
-  <a href="#" class="nav-brand">
-    <div class="brand-icon">
-      <img src="/public/assets/waifuboards.ico" alt="WF Logo">
-    </div>
-    WaifuBoard
-  </a>
-
-  <div class="nav-center">
-    <button class="nav-button">Anime</button>
-    <button class="nav-button" onclick="window.location.href='/books'">Books</button>
-    <button class="nav-button active" onclick="window.location.href='/gallery'">Gallery</button>
-    <button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
-    <button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
-    <button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
-  </div>
-
-  <!-- Mejorado el contenedor de usuario con dropdown más completo -->
-  <div class="nav-right">
-    <div class="search-wrapper" id="global-search-wrapper" style="visibility: hidden;width: 250px;">
-      <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
-      <input type="text" class="search-input" placeholder="Search site..." autocomplete="off">
-      <div class="search-results"></div>
-    </div>
-
-    <div class="nav-user" id="nav-user" style="display:none;">
-      <div class="user-avatar-btn">
-        <img id="nav-avatar" src="/placeholder.svg" alt="avatar">
-        <div class="online-indicator"></div>
-      </div>
-
-      <div class="nav-dropdown" id="nav-dropdown">
-        <div class="dropdown-header">
-          <img id="dropdown-avatar" src="/placeholder.svg" alt="avatar" class="dropdown-avatar">
-          <div class="dropdown-user-info">
-            <div class="dropdown-username" id="nav-username"></div>
-          </div>
-        </div>
-
-        <a href="/my-list" class="dropdown-item">
-          <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-            <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
-            <polyline points="17 21 17 13 7 13 7 21"/>
-            <polyline points="7 3 7 8 15 8"/>
-          </svg>
-          <span>My List</span>
-        </a>
-        <button class="dropdown-item logout-item" id="nav-logout">
-          <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
-            <polyline points="16 17 21 12 16 7"/>
-            <line x1="21" y1="12" x2="9" y2="12"/>
-          </svg>
-          <span>Logout</span>
-        </button>
-      </div>
-    </div>
-  </div>
-</nav>
 <a href="/gallery" class="back-btn">
   <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
   Back to Gallery

docker/views/list.html

@@ -13,68 +13,6 @@
 </head>
 <body>
 
-<nav class="navbar" id="navbar">
-    <a href="#" class="nav-brand">
-        <div class="brand-icon">
-            <img src="/public/assets/waifuboards.ico" alt="WF Logo">
-        </div>
-        WaifuBoard
-    </a>
-
-    <div class="nav-center">
-        <button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
-        <button class="nav-button" onclick="window.location.href='/books'">Books</button>
-        <button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
-        <button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
-        <button class="nav-button active">My List</button>
-        <button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
-    </div>
-
-    <div class="nav-right">
-        <div class="search-wrapper" style="visibility: hidden;">
-            <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                <circle cx="11" cy="11" r="8"/>
-                <path d="M21 21l-4.35-4.35"/>
-            </svg>
-            <input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
-            <div class="search-results" id="search-results"></div>
-        </div>
-
-        <div class="nav-user" id="nav-user" style="display:none;">
-            <div class="user-avatar-btn">
-                <img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
-                <div class="online-indicator"></div>
-            </div>
-
-            <div class="nav-dropdown" id="nav-dropdown">
-                <div class="dropdown-header">
-                    <img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
-                    <div class="dropdown-user-info">
-                        <div class="dropdown-username" id="nav-username"></div>
-                    </div>
-                </div>
-
-                <a href="/my-list" class="dropdown-item">
-                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
-                        <polyline points="17 21 17 13 7 13 7 21"/>
-                        <polyline points="7 3 7 8 15 8"/>
-                    </svg>
-                    <span>My List</span>
-                </a>
-                <button class="dropdown-item logout-item" id="nav-logout">
-                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
-                        <polyline points="16 17 21 12 16 7"/>
-                        <line x1="21" y1="12" x2="9" y2="12"/>
-                    </svg>
-                    <span>Logout</span>
-                </button>
-            </div>
-        </div>
-    </div>
-</nav>
-
 <div class="container">
     <div class="header-section">
         <h1 class="page-title">My List</h1>
@@ -177,77 +115,6 @@
     <div id="list-container" class="list-grid"></div>
 </div>
 
-<div class="modal-overlay" id="add-list-modal">
-    <div class="modal-content">
-        <button class="modal-close" onclick="window.ListModalManager.close()">✕</button>
-        <h2 class="modal-title" id="modal-title">Edit List Entry</h2>
-
-        <div class="modal-body">
-            <div class="modal-fields-grid">
-
-                <div class="form-group">
-                    <label>Status</label>
-                    <select id="entry-status" class="form-input">
-                        <option value="CURRENT">Current</option>
-                        <option value="COMPLETED">Completed</option>
-                        <option value="PLANNING">Planning</option>
-                        <option value="PAUSED">Paused</option>
-                        <option value="DROPPED">Dropped</option>
-                        <option value="REPEATING">Rewatching/Rereading</option>
-                    </select>
-                </div>
-
-                <div class="form-group">
-                    <label for="entry-progress" id="progress-label">Progress</label>
-                    <input type="number" id="entry-progress" class="form-input" min="0">
-                </div>
-
-                <div class="form-group">
-                    <label>Score (0-10)</label>
-                    <input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1">
-                </div>
-
-                <div class="form-group full-width">
-                    <div class="date-group">
-                        <div class="date-input-pair">
-                            <label for="entry-start-date">Start Date</label>
-                            <input type="date" id="entry-start-date" class="form-input">
-                        </div>
-                        <div class="date-input-pair">
-                            <label for="entry-end-date">End Date</label>
-                            <input type="date" id="entry-end-date" class="form-input">
-                        </div>
-                    </div>
-                </div>
-
-                <div class="form-group">
-                    <label for="entry-repeat-count">Repeat Count</label>
-                    <input type="number" id="entry-repeat-count" class="form-input" min="0">
-                </div>
-
-                <div class="form-group notes-group">
-                    <label for="entry-notes">Notes</label>
-                    <textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
-                </div>
-
-                <div class="form-group checkbox-group">
-                    <input type="checkbox" id="entry-is-private" class="form-checkbox">
-                    <label for="entry-is-private">Mark as Private</label>
-                </div>
-
-            </div>
-        </div>
-
-        <div class="modal-actions">
-            <button class="btn-secondary" onclick="window.ListModalManager.close()">Cancel</button>
-
-            <button class="btn-danger" id="modal-delete-btn" style="display:none;">Delete</button>
-
-            <button class="btn-primary" id="modal-save-btn">Save Changes</button>
-        </div>
-    </div>
-</div>
-
 <div id="updateToast" class="hidden">
     <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
     <a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">

docker/views/marketplace.html

@@ -12,68 +12,6 @@
 </head>
 <body>
 
-<nav class="navbar" id="navbar">
-    <a href="#" class="nav-brand">
-        <div class="brand-icon">
-            <img src="/public/assets/waifuboards.ico" alt="WF Logo">
-        </div>
-        WaifuBoard
-    </a>
-
-    <div class="nav-center">
-        <button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
-        <button class="nav-button" onclick="window.location.href='/books'">Books</button>
-        <button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
-        <button class="nav-button" onclick="window.location.href='/schedule.html'">Schedule</button>
-        <button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
-        <button class="nav-button">Marketplace</button>
-    </div>
-
-    <div class="nav-right">
-        <div class="search-wrapper" style="visibility: hidden;">
-            <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                <circle cx="11" cy="11" r="8"/>
-                <path d="M21 21l-4.35-4.35"/>
-            </svg>
-            <input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
-            <div class="search-results" id="search-results"></div>
-        </div>
-
-        <div class="nav-user" id="nav-user" style="display:none;">
-            <div class="user-avatar-btn">
-                <img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
-                <div class="online-indicator"></div>
-            </div>
-
-            <div class="nav-dropdown" id="nav-dropdown">
-                <div class="dropdown-header">
-                    <img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
-                    <div class="dropdown-user-info">
-                        <div class="dropdown-username" id="nav-username"></div>
-                    </div>
-                </div>
-
-                <a href="/my-list" class="dropdown-item">
-                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
-                        <polyline points="17 21 17 13 7 13 7 21"/>
-                        <polyline points="7 3 7 8 15 8"/>
-                    </svg>
-                    <span>My List</span>
-                </a>
-                <button class="dropdown-item logout-item" id="nav-logout">
-                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
-                        <polyline points="16 17 21 12 16 7"/>
-                        <line x1="21" y1="12" x2="9" y2="12"/>
-                    </svg>
-                    <span>Logout</span>
-                </button>
-            </div>
-        </div>
-    </div>
-</nav>
-
 <div class="hero-spacer"></div>
 
 <main>

docker/views/schedule.html

@@ -16,68 +16,6 @@
 <body>
     <div class="ambient-bg" id="ambientBg"></div>
 
-<nav class="navbar" id="navbar">
-    <a href="#" class="nav-brand">
-        <div class="brand-icon">
-            <img src="/public/assets/waifuboards.ico" alt="WF Logo">
-        </div>
-        WaifuBoard
-    </a>
-
-    <div class="nav-center">
-        <button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
-        <button class="nav-button" onclick="window.location.href='/books'">Books</button>
-        <button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
-        <button class="nav-button active">Schedule</button>
-        <button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
-        <button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
-    </div>
-
-    <div class="nav-right">
-        <div class="search-wrapper" style="visibility: hidden;">
-            <svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                <circle cx="11" cy="11" r="8"/>
-                <path d="M21 21l-4.35-4.35"/>
-            </svg>
-            <input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
-            <div class="search-results" id="search-results"></div>
-        </div>
-
-        <div class="nav-user" id="nav-user" style="display:none;">
-            <div class="user-avatar-btn">
-                <img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
-                <div class="online-indicator"></div>
-            </div>
-
-            <div class="nav-dropdown" id="nav-dropdown">
-                <div class="dropdown-header">
-                    <img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
-                    <div class="dropdown-user-info">
-                        <div class="dropdown-username" id="nav-username"></div>
-                    </div>
-                </div>
-
-                <a href="/my-list" class="dropdown-item">
-                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
-                        <polyline points="17 21 17 13 7 13 7 21"/>
-                        <polyline points="7 3 7 8 15 8"/>
-                    </svg>
-                    <span>My List</span>
-                </a>
-                <button class="dropdown-item logout-item" id="nav-logout">
-                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
-                        <polyline points="16 17 21 12 16 7"/>
-                        <line x1="21" y1="12" x2="9" y2="12"/>
-                    </svg>
-                    <span>Logout</span>
-                </button>
-            </div>
-        </div>
-    </div>
-</nav>
-
     <div class="calendar-wrapper">
         <div class="calendar-controls">
             <div class="month-selector">