Merge pull request #172 from hkalexling/hotfix/bind-localhost

docs: add davidkna as a contributor

.all-contributorsrc

@@ -0,0 +1,111 @@
+{
+  "projectName": "Mango",
+  "projectOwner": "hkalexling",
+  "repoType": "github",
+  "repoHost": "https://github.com",
+  "files": [
+    "README.md"
+  ],
+  "imageSize": 100,
+  "commit": false,
+  "commitConvention": "none",
+  "contributors": [
+    {
+      "login": "hkalexling",
+      "name": "Alex Ling",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/7845831?v=4",
+      "profile": "https://github.com/hkalexling/",
+      "contributions": [
+        "code",
+        "doc",
+        "infra"
+      ]
+    },
+    {
+      "login": "jaredlt",
+      "name": "jaredlt",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/8590311?v=4",
+      "profile": "https://github.com/jaredlt",
+      "contributions": [
+        "code",
+        "ideas",
+        "design"
+      ]
+    },
+    {
+      "login": "shincurry",
+      "name": "ココロ",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/4946624?v=4",
+      "profile": "https://windisco.com/",
+      "contributions": [
+        "infra"
+      ]
+    },
+    {
+      "login": "noirscape",
+      "name": "Valentijn",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/13433513?v=4",
+      "profile": "https://catgirlsin.space/",
+      "contributions": [
+        "infra"
+      ]
+    },
+    {
+      "login": "flying-sausages",
+      "name": "flying-sausages",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/23618693?v=4",
+      "profile": "https://github.com/flying-sausages",
+      "contributions": [
+        "doc",
+        "ideas"
+      ]
+    },
+    {
+      "login": "XavierSchiller",
+      "name": "Xavier",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/22575255?v=4",
+      "profile": "https://github.com/XavierSchiller",
+      "contributions": [
+        "infra"
+      ]
+    },
+    {
+      "login": "WROIATE",
+      "name": "Jarao",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/44677306?v=4",
+      "profile": "https://github.com/WROIATE",
+      "contributions": [
+        "infra"
+      ]
+    },
+    {
+      "login": "Leeingnyo",
+      "name": "이인용",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/6760150?v=4",
+      "profile": "https://github.com/Leeingnyo",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "h45h74x",
+      "name": "Simon",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/27204033?v=4",
+      "profile": "http://h45h74x.eu.org",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "davidkna",
+      "name": "David Knaack",
+      "avatar_url": "https://avatars.githubusercontent.com/u/835177?v=4",
+      "profile": "https://github.com/davidkna",
+      "contributions": [
+        "infra"
+      ]
+    }
+  ],
+  "contributorsPerLine": 7,
+  "skipCi": true
+}

.ameba.yml

@@ -7,3 +7,8 @@ Lint/UnusedArgument:
     - src/routes/*
 Metrics/CyclomaticComplexity:
   Enabled: false
+Layout/LineLength:
+  Enabled: true
+  MaxLength: 80
+  Excluded:
+    - src/routes/api.cr

.github/autoapproval.yml

@@ -0,0 +1,6 @@
+from_owner:
+  - hkalexling
+required_labels:
+  - autoapprove
+apply_labels:
+  - autoapproved

.github/workflows/build.yml

@@ -2,7 +2,7 @@ name: Build
 
 on:
   push:
-    branches: [ master, dev ]
+    branches: [ master, dev, hotfix/* ]
   pull_request:
     branches: [ master, dev ]
 
@@ -12,7 +12,7 @@ jobs:
 
     runs-on: ubuntu-latest
     container:
-      image: crystallang/crystal:0.34.0-alpine
+      image: crystallang/crystal:0.35.1-alpine
 
     steps:
     - uses: actions/checkout@v2

.github/workflows/dockerhub.yml

@@ -9,7 +9,7 @@ jobs:
     - uses: actions/checkout@master
     - name: Get release version
       id: get_version
-      run: echo ::set-env name=RELEASE_VERSION::$(echo ${GITHUB_REF:10})
+      run: echo "RELEASE_VERSION=$(echo ${GITHUB_REF:10})" >> $GITHUB_ENV
     - name: Publish to Dockerhub
       uses: elgohr/Publish-Docker-Github-Action@master
       with:

.gitignore

@@ -12,3 +12,5 @@ mango
 public/css/uikit.css
 public/img/*.svg
 public/js/*.min.js
+public/css/*.css
+public/webfonts

Dockerfile

@@ -1,4 +1,4 @@
-FROM crystallang/crystal:0.34.0-alpine AS builder
+FROM crystallang/crystal:0.35.1-alpine AS builder
 
 WORKDIR /Mango
 
@@ -10,6 +10,6 @@ FROM library/alpine
 
 WORKDIR /
 
-COPY --from=builder /Mango/mango .
+COPY --from=builder /Mango/mango /usr/local/bin/mango
 
-CMD ["./mango"]
+CMD ["/usr/local/bin/mango"]

Dockerfile.arm32v7

@@ -2,13 +2,14 @@ FROM arm32v7/ubuntu:18.04
 
 RUN apt-get update && apt-get install -y wget git make llvm-8 llvm-8-dev g++ libsqlite3-dev libyaml-dev libgc-dev libssl-dev libcrypto++-dev libevent-dev libgmp-dev zlib1g-dev libpcre++-dev pkg-config libarchive-dev libxml2-dev libacl1-dev nettle-dev liblzo2-dev liblzma-dev libbz2-dev libjpeg-turbo8-dev libpng-dev libtiff-dev
 
-RUN git clone https://github.com/crystal-lang/crystal && cd crystal && git checkout 0.34.0 && make deps && cd ..
+RUN git clone https://github.com/crystal-lang/crystal && cd crystal && git checkout 0.35.1 && make deps && cd ..
 RUN git clone https://github.com/kostya/myhtml && cd myhtml/src/ext && git checkout v1.5.0 && make && cd ..
 RUN git clone https://github.com/jessedoyle/duktape.cr && cd duktape.cr/ext && git checkout v0.20.0 && make && cd ..
 RUN git clone https://github.com/hkalexling/image_size.cr && cd image_size.cr && git checkout v0.2.0 && make && cd ..
 
 COPY mango-arm32v7.o .
 
-RUN cc 'mango-arm32v7.o' -o 'mango' -rdynamic -lxml2 -L/image_size.cr/ext/libwebp -lwebp -L/image_size.cr/ext/stbi -lstbi /myhtml/src/ext/modest-c/lib/libmodest_static.a -L/duktape.cr/src/.build/lib -L/duktape.cr/src/.build/include -lduktape -lm `pkg-config libarchive --libs` -lz `command -v pkg-config > /dev/null && pkg-config --libs --silence-errors libssl || printf %s '-lssl -lcrypto'` `command -v pkg-config > /dev/null && pkg-config --libs --silence-errors libcrypto || printf %s '-lcrypto'` -lgmp -lsqlite3 -lyaml -lpcre -lm /usr/lib/arm-linux-gnueabihf/libgc.so -lpthread /crystal/src/ext/libcrystal.a -levent -lrt -ldl -L/usr/bin/../lib/crystal/lib -L/usr/bin/../lib/crystal/lib
+RUN cc 'mango-arm32v7.o' -o '/usr/local/bin/mango' -rdynamic -lxml2 -L/image_size.cr/ext/libwebp -lwebp -L/image_size.cr/ext/stbi -lstbi /myhtml/src/ext/modest-c/lib/libmodest_static.a -L/duktape.cr/src/.build/lib -L/duktape.cr/src/.build/include -lduktape -lm `pkg-config libarchive --libs` -lz `command -v pkg-config > /dev/null && pkg-config --libs --silence-errors libssl || printf %s '-lssl -lcrypto'` `command -v pkg-config > /dev/null && pkg-config --libs --silence-errors libcrypto || printf %s '-lcrypto'` -lgmp -lsqlite3 -lyaml -lpcre -lm /usr/lib/arm-linux-gnueabihf/libgc.so -lpthread /crystal/src/ext/libcrystal.a -levent -lrt -ldl -L/usr/bin/../lib/crystal/lib -L/usr/bin/../lib/crystal/lib
+
+CMD ["/usr/local/bin/mango"]
 
-CMD ["./mango"]

Dockerfile.arm64v8

@@ -2,13 +2,13 @@ FROM arm64v8/ubuntu:18.04
 
 RUN apt-get update && apt-get install -y wget git make llvm-8 llvm-8-dev g++ libsqlite3-dev libyaml-dev libgc-dev libssl-dev libcrypto++-dev libevent-dev libgmp-dev zlib1g-dev libpcre++-dev pkg-config libarchive-dev libxml2-dev libacl1-dev nettle-dev liblzo2-dev liblzma-dev libbz2-dev libjpeg-turbo8-dev libpng-dev libtiff-dev
 
-RUN git clone https://github.com/crystal-lang/crystal && cd crystal && git checkout 0.34.0 && make deps && cd ..
+RUN git clone https://github.com/crystal-lang/crystal && cd crystal && git checkout 0.35.1 && make deps && cd ..
 RUN git clone https://github.com/kostya/myhtml && cd myhtml/src/ext && git checkout v1.5.0 && make && cd ..
 RUN git clone https://github.com/jessedoyle/duktape.cr && cd duktape.cr/ext && git checkout v0.20.0 && make && cd ..
 RUN git clone https://github.com/hkalexling/image_size.cr && cd image_size.cr && git checkout v0.2.0 && make && cd ..
 
 COPY mango-arm64v8.o .
 
-RUN cc 'mango-arm64v8.o' -o 'mango' -rdynamic -lxml2 -L/image_size.cr/ext/libwebp -lwebp -L/image_size.cr/ext/stbi -lstbi /myhtml/src/ext/modest-c/lib/libmodest_static.a -L/duktape.cr/src/.build/lib -L/duktape.cr/src/.build/include -lduktape -lm `pkg-config libarchive --libs` -lz `command -v pkg-config > /dev/null && pkg-config --libs --silence-errors libssl || printf %s '-lssl -lcrypto'` `command -v pkg-config > /dev/null && pkg-config --libs --silence-errors libcrypto || printf %s '-lcrypto'` -lgmp -lsqlite3 -lyaml -lpcre -lm /usr/lib/arm-linux-gnueabihf/libgc.so -lpthread /crystal/src/ext/libcrystal.a -levent -lrt -ldl -L/usr/bin/../lib/crystal/lib -L/usr/bin/../lib/crystal/lib
+RUN cc 'mango-arm64v8.o' -o '/usr/local/bin/mango' -rdynamic -lxml2 -L/image_size.cr/ext/libwebp -lwebp -L/image_size.cr/ext/stbi -lstbi /myhtml/src/ext/modest-c/lib/libmodest_static.a -L/duktape.cr/src/.build/lib -L/duktape.cr/src/.build/include -lduktape -lm `pkg-config libarchive --libs` -lz `command -v pkg-config > /dev/null && pkg-config --libs --silence-errors libssl || printf %s '-lssl -lcrypto'` `command -v pkg-config > /dev/null && pkg-config --libs --silence-errors libcrypto || printf %s '-lcrypto'` -lgmp -lsqlite3 -lyaml -lpcre -lm /usr/lib/aarch64-linux-gnu/libgc.so -lpthread /crystal/src/ext/libcrystal.a -levent -lrt -ldl -L/usr/bin/../lib/crystal/lib -L/usr/bin/../lib/crystal/lib
 
-CMD ["./mango"]
+CMD ["/usr/local/bin/mango"]

Makefile

@@ -29,7 +29,6 @@ test:
 check:
 	crystal tool format --check
 	./bin/ameba
-	./dev/linewidth.sh
 
 arm32v7:
 	crystal build src/mango.cr --release --progress --error-trace --cross-compile --target='arm-linux-gnueabihf' -o mango-arm32v7

README.md

@@ -12,6 +12,7 @@ Mango is a self-hosted manga server and reader. Its features include
 - Supported formats: `.cbz`, `.zip`, `.cbr` and `.rar`
 - Supports nested folders in library
 - Automatically stores reading progress
+- Thumbnail generation
 - Built-in [MangaDex](https://mangadex.org/) downloader
 - Supports [plugins](https://github.com/hkalexling/mango-plugins) to download from thrid-party sites
 - The web reader is responsive and works well on mobile, so there is no need for a mobile app
@@ -51,7 +52,7 @@ The official docker images are available on [Dockerhub](https://hub.docker.com/r
 ### CLI
 
 ```
-  Mango - Manga Server and Web Reader. Version 0.12.3
+  Mango - Manga Server and Web Reader. Version 0.20.2
 
   Usage:
 
@@ -74,16 +75,25 @@ The default config file location is `~/.config/mango/config.yml`. It might be di
 
 ```yaml
 ---
+host: 0.0.0.0
 port: 9000
 base_url: /
+session_secret: mango-session-secret
 library_path: ~/mango/library
 db_path: ~/mango/mango.db
 scan_interval_minutes: 5
+thumbnail_generation_interval_hours: 24
 log_level: info
 upload_path: ~/mango/uploads
+plugin_path: ~/mango/plugins
+download_timeout_seconds: 30
+page_margin: 30
+disable_login: false
+default_username: ""
+auth_proxy_header_name: ""
 mangadex:
   base_url: https://mangadex.org
-  api_url: https://mangadex.org/api
+  api_url: https://mangadex.org/api/v2
   download_wait_seconds: 5
   download_retries: 4
   download_queue_db_path: ~/mango/queue.db
@@ -91,8 +101,9 @@ mangadex:
   manga_rename_rule: '{title}'
 ```
 
-- `scan_interval_minutes` can be any non-negative integer. Setting it to `0` disables the periodic scan
+- `scan_interval_minutes`, `thumbnail_generation_interval_hours` and `db_optimization_interval_hours` can be any non-negative integer. Setting them to `0` disables the periodic tasks
 - `log_level` can be `debug`, `info`, `warn`, `error`, `fatal` or `off`. Setting it to `off` disables the logging
+- You can disable authentication by setting `disable_login` to true. Note that `default_username` must be set to an existing username for this to work.
 
 ### Library Structure
 
@@ -147,5 +158,27 @@ Mobile UI:
 ## Contributors
 
 Please check the [development guideline](https://github.com/hkalexling/Mango/wiki/Development) if you are interested in code contributions.
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="https://github.com/hkalexling/"><img src="https://avatars1.githubusercontent.com/u/7845831?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Alex Ling</b></sub></a><br /><a href="https://github.com/hkalexling/Mango/commits?author=hkalexling" title="Code">💻</a> <a href="https://github.com/hkalexling/Mango/commits?author=hkalexling" title="Documentation">📖</a> <a href="#infra-hkalexling" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+    <td align="center"><a href="https://github.com/jaredlt"><img src="https://avatars1.githubusercontent.com/u/8590311?v=4?s=100" width="100px;" alt=""/><br /><sub><b>jaredlt</b></sub></a><br /><a href="https://github.com/hkalexling/Mango/commits?author=jaredlt" title="Code">💻</a> <a href="#ideas-jaredlt" title="Ideas, Planning, & Feedback">🤔</a> <a href="#design-jaredlt" title="Design">🎨</a></td>
+    <td align="center"><a href="https://windisco.com/"><img src="https://avatars1.githubusercontent.com/u/4946624?v=4?s=100" width="100px;" alt=""/><br /><sub><b>ココロ</b></sub></a><br /><a href="#infra-shincurry" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+    <td align="center"><a href="https://catgirlsin.space/"><img src="https://avatars0.githubusercontent.com/u/13433513?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Valentijn</b></sub></a><br /><a href="#infra-noirscape" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+    <td align="center"><a href="https://github.com/flying-sausages"><img src="https://avatars1.githubusercontent.com/u/23618693?v=4?s=100" width="100px;" alt=""/><br /><sub><b>flying-sausages</b></sub></a><br /><a href="https://github.com/hkalexling/Mango/commits?author=flying-sausages" title="Documentation">📖</a> <a href="#ideas-flying-sausages" title="Ideas, Planning, & Feedback">🤔</a></td>
+    <td align="center"><a href="https://github.com/XavierSchiller"><img src="https://avatars1.githubusercontent.com/u/22575255?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Xavier</b></sub></a><br /><a href="#infra-XavierSchiller" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+    <td align="center"><a href="https://github.com/WROIATE"><img src="https://avatars3.githubusercontent.com/u/44677306?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jarao</b></sub></a><br /><a href="#infra-WROIATE" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/Leeingnyo"><img src="https://avatars0.githubusercontent.com/u/6760150?v=4?s=100" width="100px;" alt=""/><br /><sub><b>이인용</b></sub></a><br /><a href="https://github.com/hkalexling/Mango/commits?author=Leeingnyo" title="Code">💻</a></td>
+    <td align="center"><a href="http://h45h74x.eu.org"><img src="https://avatars1.githubusercontent.com/u/27204033?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Simon</b></sub></a><br /><a href="https://github.com/hkalexling/Mango/commits?author=h45h74x" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/davidkna"><img src="https://avatars.githubusercontent.com/u/835177?v=4?s=100" width="100px;" alt=""/><br /><sub><b>David Knaack</b></sub></a><br /><a href="#infra-davidkna" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+  </tr>
+</table>
 
-[![](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/images/0)](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/links/0)[![](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/images/1)](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/links/1)[![](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/images/2)](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/links/2)[![](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/images/3)](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/links/3)[![](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/images/4)](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/links/4)[![](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/images/5)](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/links/5)[![](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/images/6)](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/links/6)[![](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/images/7)](https://sourcerer.io/fame/hkalexling/hkalexling/Mango/links/7)
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->

dev/linewidth.sh

@@ -1,5 +0,0 @@
-#!/bin/sh
-
-[ ! -z "$(grep '.\{80\}' --exclude-dir=lib --include="*.cr" -nr --color=always . | tee /dev/tty)" ] \
-	&& echo "The above lines exceed the 80 characters limit" \
-	|| exit 0

gulpfile.js

@@ -4,26 +4,25 @@ const minify = require('gulp-babel-minify');
 const minifyCss = require('gulp-minify-css');
 const less = require('gulp-less');
 
-// Copy libraries from node_moduels to public/js
-gulp.task('copy-js', () => {
-	return gulp.src([
-			'node_modules/@fortawesome/fontawesome-free/js/fontawesome.min.js',
-			'node_modules/@fortawesome/fontawesome-free/js/solid.min.js',
-			'node_modules/uikit/dist/js/uikit.min.js',
-			'node_modules/uikit/dist/js/uikit-icons.min.js'
-		])
-		.pipe(gulp.dest('public/js'));
-});
-
-// Copy UIKit SVG icons to public/img
-gulp.task('copy-uikit-icons', () => {
+gulp.task('copy-img', () => {
 	return gulp.src('node_modules/uikit/src/images/backgrounds/*.svg')
 		.pipe(gulp.dest('public/img'));
 });
 
+gulp.task('copy-font', () => {
+	return gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff**')
+		.pipe(gulp.dest('public/webfonts'));
+});
+
+// Copy files from node_modules
+gulp.task('node-modules-copy', gulp.parallel('copy-img', 'copy-font'));
+
 // Compile less
 gulp.task('less', () => {
-	return gulp.src('public/css/*.less')
+	return gulp.src([
+			'public/css/mango.less',
+			'public/css/tags.less'
+		])
 		.pipe(less())
 		.pipe(gulp.dest('public/css'));
 });
@@ -54,14 +53,19 @@ gulp.task('minify-css', () => {
 
 // Copy static files (includeing images) to dist
 gulp.task('copy-files', () => {
-	return gulp.src(['public/img/*', 'public/*.*', 'public/js/*.min.js'], {
+	return gulp.src([
+			'public/*.*',
+			'public/img/*',
+			'public/webfonts/*',
+			'public/js/*.min.js'
+		], {
 			base: 'public'
 		})
 		.pipe(gulp.dest('dist'));
 });
 
 // Set up the public folder for development
-gulp.task('dev', gulp.parallel('copy-js', 'copy-uikit-icons', 'less'));
+gulp.task('dev', gulp.parallel('node-modules-copy', 'less'));
 
 // Set up the dist folder for deployment
 gulp.task('deploy', gulp.parallel('babel', 'minify-css', 'copy-files'));

migration/foreign_keys.6.cr

@@ -0,0 +1,85 @@
+class ForeignKeys < MG::Base
+  def up : String
+    <<-SQL
+    -- add foreign key to tags
+    ALTER TABLE tags RENAME TO tmp;
+
+    CREATE TABLE tags (
+      id TEXT NOT NULL,
+      tag TEXT NOT NULL,
+      UNIQUE (id, tag),
+      FOREIGN KEY (id) REFERENCES titles (id)
+        ON UPDATE CASCADE
+        ON DELETE CASCADE
+    );
+
+    INSERT INTO tags
+    SELECT * FROM tmp;
+
+    DROP TABLE tmp;
+
+    CREATE INDEX tags_id_idx ON tags (id);
+    CREATE INDEX tags_tag_idx ON tags (tag);
+
+    -- add foreign key to thumbnails
+    ALTER TABLE thumbnails RENAME TO tmp;
+
+    CREATE TABLE thumbnails (
+      id TEXT NOT NULL,
+      data BLOB NOT NULL,
+      filename TEXT NOT NULL,
+      mime TEXT NOT NULL,
+      size INTEGER NOT NULL,
+      FOREIGN KEY (id) REFERENCES ids (id)
+        ON UPDATE CASCADE
+        ON DELETE CASCADE
+    );
+
+    INSERT INTO thumbnails
+    SELECT * FROM tmp;
+
+    DROP TABLE tmp;
+
+    CREATE UNIQUE INDEX tn_index ON thumbnails (id);
+    SQL
+  end
+
+  def down : String
+    <<-SQL
+    -- remove foreign key from thumbnails
+    ALTER TABLE thumbnails RENAME TO tmp;
+
+    CREATE TABLE thumbnails (
+      id TEXT NOT NULL,
+      data BLOB NOT NULL,
+      filename TEXT NOT NULL,
+      mime TEXT NOT NULL,
+      size INTEGER NOT NULL
+    );
+
+    INSERT INTO thumbnails
+    SELECT * FROM tmp;
+
+    DROP TABLE tmp;
+
+    CREATE UNIQUE INDEX tn_index ON thumbnails (id);
+
+    -- remove foreign key from tags
+    ALTER TABLE tags RENAME TO tmp;
+
+    CREATE TABLE tags (
+      id TEXT NOT NULL,
+      tag TEXT NOT NULL,
+      UNIQUE (id, tag)
+    );
+
+    INSERT INTO tags
+    SELECT * FROM tmp;
+
+    DROP TABLE tmp;
+
+    CREATE INDEX tags_id_idx ON tags (id);
+    CREATE INDEX tags_tag_idx ON tags (tag);
+    SQL
+  end
+end

migration/ids.2.cr

@@ -0,0 +1,19 @@
+class CreateIds < MG::Base
+  def up : String
+    <<-SQL
+    CREATE TABLE IF NOT EXISTS ids (
+      path TEXT NOT NULL,
+      id TEXT NOT NULL,
+      is_title INTEGER NOT NULL
+    );
+    CREATE UNIQUE INDEX IF NOT EXISTS path_idx ON ids (path);
+    CREATE UNIQUE INDEX IF NOT EXISTS id_idx ON ids (id);
+    SQL
+  end
+
+  def down : String
+    <<-SQL
+    DROP TABLE ids;
+    SQL
+  end
+end

migration/ids_signature.7.cr

@@ -0,0 +1,50 @@
+class IDSignature < MG::Base
+  def up : String
+    <<-SQL
+    ALTER TABLE ids ADD COLUMN signature TEXT;
+    SQL
+  end
+
+  def down : String
+    <<-SQL
+    -- remove signature column from ids
+    ALTER TABLE ids RENAME TO tmp;
+
+    CREATE TABLE ids (
+      path TEXT NOT NULL,
+      id TEXT NOT NULL
+    );
+
+    INSERT INTO ids
+    SELECT path, id
+    FROM tmp;
+
+    DROP TABLE tmp;
+
+    -- recreate the indices
+    CREATE UNIQUE INDEX path_idx ON ids (path);
+    CREATE UNIQUE INDEX id_idx ON ids (id);
+
+    -- recreate the foreign key constraint on thumbnails
+    ALTER TABLE thumbnails RENAME TO tmp;
+
+    CREATE TABLE thumbnails (
+      id TEXT NOT NULL,
+      data BLOB NOT NULL,
+      filename TEXT NOT NULL,
+      mime TEXT NOT NULL,
+      size INTEGER NOT NULL,
+      FOREIGN KEY (id) REFERENCES ids (id)
+        ON UPDATE CASCADE
+        ON DELETE CASCADE
+    );
+
+    INSERT INTO thumbnails
+    SELECT * FROM tmp;
+
+    DROP TABLE tmp;
+
+    CREATE UNIQUE INDEX tn_index ON thumbnails (id);
+    SQL
+  end
+end

migration/relative_path.8.cr

@@ -0,0 +1,33 @@
+class RelativePath < MG::Base
+  def up : String
+    base = Config.current.library_path
+    # Escape single quotes in case the path contains them, and remove the
+    #   trailing slash (this is a mistake, fixed in DB version 10)
+    base = base.gsub("'", "''").rstrip "/"
+
+    <<-SQL
+    -- update the path column in ids to relative paths
+    UPDATE ids
+    SET path = REPLACE(path, '#{base}', '');
+
+    -- update the path column in titles to relative paths
+    UPDATE titles
+    SET path = REPLACE(path, '#{base}', '');
+    SQL
+  end
+
+  def down : String
+    base = Config.current.library_path
+    base = base.gsub("'", "''").rstrip "/"
+
+    <<-SQL
+    -- update the path column in ids to absolute paths
+    UPDATE ids
+    SET path = '#{base}' || path;
+
+    -- update the path column in titles to absolute paths
+    UPDATE titles
+    SET path = '#{base}' || path;
+    SQL
+  end
+end

migration/relative_path_fix.10.cr

@@ -0,0 +1,31 @@
+# In DB version 8, we replaced the absolute paths in DB with relative paths,
+#   but we mistakenly left the starting slashes. This migration removes them.
+class RelativePathFix < MG::Base
+  def up : String
+    <<-SQL
+    -- remove leading slashes from the paths in ids
+    UPDATE ids
+    SET path = SUBSTR(path, 2, LENGTH(path) - 1)
+    WHERE path LIKE '/%';
+
+    -- remove leading slashes from the paths in titles
+    UPDATE titles
+    SET path = SUBSTR(path, 2, LENGTH(path) - 1)
+    WHERE path LIKE '/%';
+    SQL
+  end
+
+  def down : String
+    <<-SQL
+    -- add leading slashes to paths in ids
+    UPDATE ids
+    SET path = '/' || path
+    WHERE path NOT LIKE '/%';
+
+    -- add leading slashes to paths in titles
+    UPDATE titles
+    SET path = '/' || path
+    WHERE path NOT LIKE '/%';
+    SQL
+  end
+end

migration/tags.4.cr

@@ -0,0 +1,19 @@
+class CreateTags < MG::Base
+  def up : String
+    <<-SQL
+    CREATE TABLE IF NOT EXISTS tags (
+      id TEXT NOT NULL,
+      tag TEXT NOT NULL,
+      UNIQUE (id, tag)
+    );
+    CREATE INDEX IF NOT EXISTS tags_id_idx ON tags (id);
+    CREATE INDEX IF NOT EXISTS tags_tag_idx ON tags (tag);
+    SQL
+  end
+
+  def down : String
+    <<-SQL
+    DROP TABLE tags;
+    SQL
+  end
+end

migration/thumbnails.3.cr

@@ -0,0 +1,20 @@
+class CreateThumbnails < MG::Base
+  def up : String
+    <<-SQL
+    CREATE TABLE IF NOT EXISTS thumbnails (
+      id TEXT NOT NULL,
+      data BLOB NOT NULL,
+      filename TEXT NOT NULL,
+      mime TEXT NOT NULL,
+      size INTEGER NOT NULL
+    );
+    CREATE UNIQUE INDEX IF NOT EXISTS tn_index ON thumbnails (id);
+    SQL
+  end
+
+  def down : String
+    <<-SQL
+    DROP TABLE thumbnails;
+    SQL
+  end
+end

migration/titles.5.cr

@@ -0,0 +1,56 @@
+class CreateTitles < MG::Base
+  def up : String
+    <<-SQL
+    -- create titles
+    CREATE TABLE titles (
+      id TEXT NOT NULL,
+      path TEXT NOT NULL,
+      signature TEXT
+    );
+    CREATE UNIQUE INDEX titles_id_idx on titles (id);
+    CREATE UNIQUE INDEX titles_path_idx on titles (path);
+
+    -- migrate data from ids to titles
+    INSERT INTO titles
+    SELECT id, path, null
+    FROM ids
+    WHERE is_title = 1;
+
+    DELETE FROM ids
+    WHERE is_title = 1;
+
+    -- remove the is_title column from ids
+    ALTER TABLE ids RENAME TO tmp;
+
+    CREATE TABLE ids (
+      path TEXT NOT NULL,
+      id TEXT NOT NULL
+    );
+
+    INSERT INTO ids
+    SELECT path, id
+    FROM tmp;
+
+    DROP TABLE tmp;
+
+    -- recreate the indices
+    CREATE UNIQUE INDEX path_idx ON ids (path);
+    CREATE UNIQUE INDEX id_idx ON ids (id);
+    SQL
+  end
+
+  def down : String
+    <<-SQL
+    -- insert the is_title column
+    ALTER TABLE ids ADD COLUMN is_title INTEGER NOT NULL DEFAULT 0;
+
+    -- migrate data from titles to ids
+    INSERT INTO ids
+    SELECT path, id, 1
+    FROM titles;
+
+    -- remove titles
+    DROP TABLE titles;
+    SQL
+  end
+end

migration/unavailable.9.cr

@@ -0,0 +1,94 @@
+class UnavailableIDs < MG::Base
+  def up : String
+    <<-SQL
+    -- add unavailable column to ids
+    ALTER TABLE ids ADD COLUMN unavailable INTEGER NOT NULL DEFAULT 0;
+
+    -- add unavailable column to titles
+    ALTER TABLE titles ADD COLUMN unavailable INTEGER NOT NULL DEFAULT 0;
+    SQL
+  end
+
+  def down : String
+    <<-SQL
+    -- remove unavailable column from ids
+    ALTER TABLE ids RENAME TO tmp;
+
+    CREATE TABLE ids (
+      path TEXT NOT NULL,
+      id TEXT NOT NULL,
+      signature TEXT
+    );
+
+    INSERT INTO ids
+    SELECT path, id, signature
+    FROM tmp;
+
+    DROP TABLE tmp;
+
+    -- recreate the indices
+    CREATE UNIQUE INDEX path_idx ON ids (path);
+    CREATE UNIQUE INDEX id_idx ON ids (id);
+
+    -- recreate the foreign key constraint on thumbnails
+    ALTER TABLE thumbnails RENAME TO tmp;
+
+    CREATE TABLE thumbnails (
+      id TEXT NOT NULL,
+      data BLOB NOT NULL,
+      filename TEXT NOT NULL,
+      mime TEXT NOT NULL,
+      size INTEGER NOT NULL,
+      FOREIGN KEY (id) REFERENCES ids (id)
+        ON UPDATE CASCADE
+        ON DELETE CASCADE
+    );
+
+    INSERT INTO thumbnails
+    SELECT * FROM tmp;
+
+    DROP TABLE tmp;
+
+    CREATE UNIQUE INDEX tn_index ON thumbnails (id);
+
+    -- remove unavailable column from titles
+    ALTER TABLE titles RENAME TO tmp;
+
+    CREATE TABLE titles (
+      id TEXT NOT NULL,
+      path TEXT NOT NULL,
+      signature TEXT
+    );
+
+    INSERT INTO titles
+    SELECT path, id, signature
+    FROM tmp;
+
+    DROP TABLE tmp;
+
+    -- recreate the indices
+    CREATE UNIQUE INDEX titles_id_idx on titles (id);
+    CREATE UNIQUE INDEX titles_path_idx on titles (path);
+
+    -- recreate the foreign key constraint on tags
+    ALTER TABLE tags RENAME TO tmp;
+
+    CREATE TABLE tags (
+      id TEXT NOT NULL,
+      tag TEXT NOT NULL,
+      UNIQUE (id, tag),
+      FOREIGN KEY (id) REFERENCES titles (id)
+        ON UPDATE CASCADE
+        ON DELETE CASCADE
+    );
+
+    INSERT INTO tags
+    SELECT * FROM tmp;
+
+    DROP TABLE tmp;
+
+    CREATE INDEX tags_id_idx ON tags (id);
+    CREATE INDEX tags_tag_idx ON tags (tag);
+    SQL
+  end
+end

migration/users.1.cr

@@ -0,0 +1,20 @@
+class CreateUsers < MG::Base
+  def up : String
+    <<-SQL
+    CREATE TABLE IF NOT EXISTS users (
+      username TEXT NOT NULL,
+      password TEXT NOT NULL,
+      token TEXT,
+      admin INTEGER NOT NULL
+    );
+    CREATE UNIQUE INDEX IF NOT EXISTS username_idx ON users (username);
+    CREATE UNIQUE INDEX IF NOT EXISTS token_idx ON users (token);
+    SQL
+  end
+
+  def down : String
+    <<-SQL
+    DROP TABLE users;
+    SQL
+  end
+end

package.json

@@ -7,6 +7,7 @@
 	"license": "MIT",
 	"devDependencies": {
 		"@babel/preset-env": "^7.11.5",
+		"all-contributors-cli": "^6.19.0",
 		"gulp": "^4.0.2",
 		"gulp-babel": "^8.0.0",
 		"gulp-babel-minify": "^0.5.1",

public/css/mango.css

@@ -1,154 +0,0 @@
-.uk-alert-close {
-    color: black !important;
-}
-
-.uk-card-body {
-    padding: 20px;
-}
-
-.uk-card-media-top {
-    width: 100%;
-    height: 250px;
-}
-
-@media (min-width: 600px) {
-    .uk-card-media-top {
-        height: 300px;
-    }
-}
-
-.uk-card-media-top>img {
-    height: 100%;
-    width: 100%;
-    object-fit: cover;
-}
-
-.uk-card-title {
-    max-height: 3em;
-}
-
-.acard:hover {
-    cursor: pointer;
-}
-
-.uk-list li:not(.nopointer) {
-    cursor: pointer;
-}
-
-#scan-status {
-    cursor: auto;
-}
-
-.reader-bg {
-    background-color: black;
-}
-
-.break-word {
-    word-wrap: break-word;
-}
-
-.uk-logo>img {
-    height: 90px;
-    width: 90px;
-}
-
-.uk-search {
-    width: 100%;
-}
-
-#selectable .ui-selecting {
-    background: #EEE6B9;
-}
-
-#selectable .ui-selected {
-    background: #F4E487;
-}
-
-.uk-light #selectable .ui-selecting {
-    background: #5E5731;
-}
-
-.uk-light #selectable .ui-selected {
-    background: #9D9252;
-}
-
-td>.uk-dropdown {
-    white-space: pre-line;
-}
-
-#edit-modal .uk-grid>div {
-    height: 300px;
-}
-
-#edit-modal #cover {
-    height: 100%;
-    width: 100%;
-    object-fit: cover;
-}
-
-#edit-modal #cover-upload {
-    height: 100%;
-    box-sizing: border-box;
-}
-
-#edit-modal .uk-modal-body .uk-inline {
-    width: 100%;
-}
-
-.item .uk-card-title {
-    font-size: 1rem;
-}
-
-.grayscale {
-    filter: grayscale(100%);
-}
-
-.uk-light .uk-navbar-dropdown,
-.uk-light .uk-modal-header,
-.uk-light .uk-modal-body,
-.uk-light .uk-modal-footer {
-    background: #222;
-}
-
-.uk-light .uk-dropdown {
-    background: #333;
-}
-
-.uk-light .uk-navbar-dropdown,
-.uk-light .uk-dropdown {
-    color: #ccc;
-}
-
-.uk-light .uk-nav-header,
-.uk-light .uk-description-list>dt {
-    color: #555;
-}
-
-[x-cloak] {
-    display: none;
-}
-
-#select-bar-controls a {
-    transform: scale(1.5, 1.5);
-}
-
-#select-bar-controls a:hover {
-    color: orange;
-}
-
-#main-section {
-    position: relative;
-}
-
-#totop-wrapper {
-    position: absolute;
-    top: 100vh;
-    right: 2em;
-    bottom: 0;
-}
-
-#totop-wrapper a {
-    position: fixed;
-    position: sticky;
-    top: calc(100vh - 5em);
-}

public/css/mango.less

@@ -0,0 +1,137 @@
+// UIKit
+@import "./uikit.less";
+
+// FontAwesome
+@import "../../node_modules/@fortawesome/fontawesome-free/less/fontawesome.less";
+@import "../../node_modules/@fortawesome/fontawesome-free/less/solid.less";
+
+@font-face {
+  src: url('@{fa-font-path}/fa-solid-900.woff2');
+  src: url('@{fa-font-path}/fa-solid-900.woff2') format('woff2'),
+    url('@{fa-font-path}/fa-solid-900.woff') format('woff');
+}
+
+// Item cards
+.item .uk-card {
+    cursor: pointer;
+	.uk-card-media-top {
+		width: 100%;
+		height: 250px;
+		@media (min-width: 600px) {
+			height: 300px;
+		}
+
+		img {
+			height: 100%;
+			width: 100%;
+			object-fit: cover;
+
+			&.grayscale {
+				filter: grayscale(100%);
+			}
+		}
+	}
+	.uk-card-body {
+		padding: 20px;
+		.uk-card-title {
+			max-height: 3em;
+			font-size: 1rem;
+		}
+	}
+}
+
+// jQuery selectable
+#selectable {
+	.ui-selecting {
+		background: #EEE6B9;
+	}
+	.ui-selected {
+		background: #F4E487;
+	}
+	.uk-light & {
+		.ui-selecting {
+			background: #5E5731;
+		}
+		.ui-selected {
+			background: #9D9252;
+		}
+	}
+}
+
+// Edit modal
+#edit-modal {
+	.uk-grid > div {
+		height: 300px;
+	}
+	#cover {
+		height: 100%;
+		width: 100%;
+		object-fit: cover;
+	}
+	#cover-upload {
+		height: 100%;
+		box-sizing: border-box;
+	}
+	.uk-modal-body .uk-inline {
+		width: 100%;
+	}
+}
+
+// Dark theme
+.uk-light {
+	.uk-modal-header,
+	.uk-modal-body,
+	.uk-modal-footer {
+		background: #222;
+	}
+	.uk-navbar-dropdown,
+	.uk-dropdown {
+		color: #ccc;
+		background: #333;
+	}
+	.uk-nav-header,
+	.uk-description-list > dt {
+		color: #555;
+	}
+}
+
+// Alpine magic
+[x-cloak] {
+    display: none;
+}
+
+// Batch select bar on title page
+#select-bar-controls {
+	a {
+		transform: scale(1.5, 1.5);
+
+		&:hover {
+			color: orange;
+		}
+	}
+}
+
+// Totop button
+#totop-wrapper {
+    position: absolute;
+    top: 100vh;
+    right: 2em;
+    bottom: 0;
+
+	a {
+		position: fixed;
+		position: sticky;
+		top: calc(100vh - 5em);
+	}
+}
+
+// Misc
+.uk-alert-close {
+    color: black !important;
+}
+.break-word {
+    word-wrap: break-word;
+}
+.uk-search {
+    width: 100%;
+}

public/css/tags.less

@@ -0,0 +1,58 @@
+@light-gray: #e5e5e5;
+@gray: #666666;
+@black: #141414;
+@blue: rgb(30, 135, 240);
+@white1: rgba(255, 255, 255, .1);
+@white2: rgba(255, 255, 255, .2);
+@white7: rgba(255, 255, 255, .7);
+
+.select2-container--default {
+	.select2-selection--multiple {
+		border: 1px solid @light-gray;
+		.select2-selection__choice,
+		.select2-selection__choice__remove,
+		.select2-selection__choice__remove:hover
+		{
+			background-color: @blue;
+			color: white;
+			border: none;
+			border-radius: 2px;
+		}
+	}
+	.select2-dropdown {
+		.select2-results__option--highlighted.select2-results__option--selectable {
+			background-color: @blue;
+		}
+		.select2-results__option--selected:not(.select2-results__option--highlighted) {
+			background-color: @light-gray
+		}
+	}
+}
+
+.uk-light {
+	.select2-container--default {
+		.select2-selection {
+			background-color: @white1;
+		}
+		.select2-selection--multiple {
+			border: 1px solid @white2;
+			.select2-selection__choice,
+			.select2-selection__choice__remove,
+			.select2-selection__choice__remove:hover
+			{
+				background-color: white;
+				color: @gray;
+				border: none;
+			}
+			.select2-search__field {
+				color: @white7;
+			}
+		}
+	}
+	.select2-dropdown {
+		background-color: @black;
+		.select2-results__option--selected:not(.select2-results__option--highlighted) {
+			background-color: @white2;
+		}
+	}
+}

public/js/admin.js

@@ -1,40 +1,55 @@
-let scanning = false;
+const component = () => {
+	return {
+		progress: 1.0,
+		generating: false,
+		scanning: false,
+		scanTitles: 0,
+		scanMs: -1,
+		themeSetting: '',
 
-const scan = () => {
-	scanning = true;
-	$('#scan-status > div').removeAttr('hidden');
-	$('#scan-status > span').attr('hidden', '');
-	const color = $('#scan').css('color');
-	$('#scan').css('color', 'gray');
-	$.post(base_url + 'api/admin/scan', (data) => {
-		const ms = data.milliseconds;
-		const titles = data.titles;
-		$('#scan-status > span').text('Scanned ' + titles + ' titles in ' + ms + 'ms');
-		$('#scan-status > span').removeAttr('hidden');
-		$('#scan').css('color', color);
-		$('#scan-status > div').attr('hidden', '');
-		scanning = false;
-	});
-}
+		init() {
+			this.getProgress();
+			setInterval(() => {
+				this.getProgress();
+			}, 5000);
 
-String.prototype.capitalize = function() {
-	return this.charAt(0).toUpperCase() + this.slice(1);
-}
-
-$(() => {
-	$('li').click((e) => {
-		const url = $(e.currentTarget).attr('data-url');
-		if (url) {
-			$(location).attr('href', url);
-		}
-	});
-
-	const setting = loadThemeSetting();
-	$('#theme-select').val(setting.capitalize());
-
-	$('#theme-select').change((e) => {
-		const newSetting = $(e.currentTarget).val().toLowerCase();
-		saveThemeSetting(newSetting);
-		setTheme();
-	});
-});
+			const setting = loadThemeSetting();
+			this.themeSetting = setting.charAt(0).toUpperCase() + setting.slice(1);
+		},
+		themeChanged(event) {
+			const newSetting = $(event.currentTarget).val().toLowerCase();
+			saveThemeSetting(newSetting);
+			setTheme();
+		},
+		scan() {
+			if (this.scanning) return;
+			this.scanning = true;
+			this.scanMs = -1;
+			this.scanTitles = 0;
+			$.post(`${base_url}api/admin/scan`)
+				.then(data => {
+					this.scanMs = data.milliseconds;
+					this.scanTitles = data.titles;
+				})
+				.always(() => {
+					this.scanning = false;
+				});
+		},
+		generateThumbnails() {
+			if (this.generating) return;
+			this.generating = true;
+			this.progress = 0.0;
+			$.post(`${base_url}api/admin/generate_thumbnails`)
+				.then(() => {
+					this.getProgress()
+				});
+		},
+		getProgress() {
+			$.get(`${base_url}api/admin/thumbnail_progress`)
+				.then(data => {
+					this.progress = data.progress;
+					this.generating = data.progress > 0;
+				});
+		},
+	};
+};

public/js/common.js

@@ -0,0 +1,147 @@
+/**
+ * --- Alpine helper functions
+ */
+
+/**
+ * Set an alpine.js property
+ *
+ * @function setProp
+ * @param {string} key - Key of the data property
+ * @param {*} prop - The data property
+ * @param {string} selector - The jQuery selector to the root element
+ */
+const setProp = (key, prop, selector = '#root') => {
+	$(selector).get(0).__x.$data[key] = prop;
+};
+
+/**
+ * Get an alpine.js property
+ *
+ * @function getProp
+ * @param {string} key - Key of the data property
+ * @param {string} selector - The jQuery selector to the root element
+ * @return {*} The data property
+ */
+const getProp = (key, selector = '#root') => {
+	return $(selector).get(0).__x.$data[key];
+};
+
+/**
+ * --- Theme related functions
+ *  	Note: In the comments below we treat "theme" and "theme setting"
+ *  		differently. A theme can have only two values, either "dark" or
+ *  		"light", while a theme setting can have the third value "system".
+ */
+
+/**
+ * Check if the system setting prefers dark theme.
+ * 		from https://flaviocopes.com/javascript-detect-dark-mode/
+ *
+ * @function preferDarkMode
+ * @return {bool}
+ */
+const preferDarkMode = () => {
+	return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+};
+
+/**
+ * Check whether a given string represents a valid theme setting
+ *
+ * @function validThemeSetting
+ * @param {string} theme - The string representing the theme setting
+ * @return {bool}
+ */
+const validThemeSetting = (theme) => {
+	return ['dark', 'light', 'system'].indexOf(theme) >= 0;
+};
+
+/**
+ * Load theme setting from local storage, or use 'light'
+ *
+ * @function loadThemeSetting
+ * @return {string} A theme setting ('dark', 'light', or 'system')
+ */
+const loadThemeSetting = () => {
+	let str = localStorage.getItem('theme');
+	if (!str || !validThemeSetting(str)) str = 'system';
+	return str;
+};
+
+/**
+ * Load the current theme (not theme setting)
+ *
+ * @function loadTheme
+ * @return {string} The current theme to use ('dark' or 'light')
+ */
+const loadTheme = () => {
+	let setting = loadThemeSetting();
+	if (setting === 'system') {
+		setting = preferDarkMode() ? 'dark' : 'light';
+	}
+	return setting;
+};
+
+/**
+ * Save a theme setting
+ *
+ * @function saveThemeSetting
+ * @param {string} setting - A theme setting
+ */
+const saveThemeSetting = setting => {
+	if (!validThemeSetting(setting)) setting = 'system';
+	localStorage.setItem('theme', setting);
+};
+
+/**
+ * Toggle the current theme. When the current theme setting is 'system', it
+ *		will be changed to either 'light' or 'dark'
+ *
+ * @function toggleTheme
+ */
+const toggleTheme = () => {
+	const theme = loadTheme();
+	const newTheme = theme === 'dark' ? 'light' : 'dark';
+	saveThemeSetting(newTheme);
+	setTheme(newTheme);
+};
+
+/**
+ * Apply a theme, or load a theme and then apply it
+ *
+ * @function setTheme
+ * @param {string?} theme - (Optional) The theme to apply. When omitted, use
+ * 		`loadTheme` to get a theme and apply it.
+ */
+const setTheme = (theme) => {
+	if (!theme) theme = loadTheme();
+	if (theme === 'dark') {
+		$('html').css('background', 'rgb(20, 20, 20)');
+		$('body').addClass('uk-light');
+		$('.uk-card').addClass('uk-card-secondary');
+		$('.uk-card').removeClass('uk-card-default');
+		$('.ui-widget-content').addClass('dark');
+	} else {
+		$('html').css('background', '');
+		$('body').removeClass('uk-light');
+		$('.uk-card').removeClass('uk-card-secondary');
+		$('.uk-card').addClass('uk-card-default');
+		$('.ui-widget-content').removeClass('dark');
+	}
+};
+
+// do it before document is ready to prevent the initial flash of white on
+// 	most pages
+setTheme();
+$(() => {
+	// hack for the reader page
+	setTheme();
+
+	// on system dark mode setting change
+	if (window.matchMedia) {
+		window.matchMedia('(prefers-color-scheme: dark)')
+			.addEventListener('change', event => {
+				if (loadThemeSetting() === 'system')
+					setTheme(event.matches ? 'dark' : 'light');
+			});
+	}
+});

public/js/dots.js

@@ -1,17 +1,26 @@
-const truncate = () => {
-	$('.uk-card-title').each((i, e) => {
-		$(e).dotdotdot({
-			truncate: 'letter',
-			watch: true,
-			callback: (truncated) => {
-				if (truncated) {
-					$(e).attr('uk-tooltip', $(e).attr('data-title'));
-				} else {
-					$(e).removeAttr('uk-tooltip');
-				}
+/**
+ * Truncate a .uk-card-title element
+ *
+ * @function truncate
+ * @param {object} e - The title element to truncate
+ */
+const truncate = (e) => {
+	$(e).dotdotdot({
+		truncate: 'letter',
+		watch: true,
+		callback: (truncated) => {
+			if (truncated) {
+				$(e).attr('uk-tooltip', $(e).attr('data-title'));
+			} else {
+				$(e).removeAttr('uk-tooltip');
 			}
-		});
+		}
 	});
 };
 
-truncate();
+$('.uk-card-title').each((i, e) => {
+	// Truncate the title when it first enters the view
+	$(e).one('inview', () => {
+		truncate(e);
+	});
+});

public/js/download-manager.js

@@ -1,145 +1,116 @@
-$(() => {
-	$('input.uk-checkbox').each((i, e) => {
-		$(e).change(() => {
-			loadConfig();
-		});
-	});
-	loadConfig();
-	load();
+const component = () => {
+	return {
+		jobs: [],
+		paused: undefined,
+		loading: false,
+		toggling: false,
+		ws: undefined,
 
-	const intervalMS = 5000;
-	setTimeout(() => {
-		setInterval(() => {
-			if (globalConfig.autoRefresh !== true) return;
-			load();
-		}, intervalMS);
-	}, intervalMS);
-});
-var globalConfig = {};
-var loading = false;
-
-const loadConfig = () => {
-	globalConfig.autoRefresh = $('#auto-refresh').prop('checked');
-};
-const remove = (id) => {
-	var url = base_url + 'api/admin/mangadex/queue/delete';
-	if (id !== undefined)
-		url += '?' + $.param({
-			id: id
-		});
-	console.log(url);
-	$.ajax({
-			type: 'POST',
-			url: url,
-			dataType: 'json'
-		})
-		.done(data => {
-			if (!data.success && data.error) {
-				alert('danger', `Failed to remove job from download queue. Error: ${data.error}`);
-				return;
+		wsConnect(secure = true) {
+			const url = `${secure ? 'wss' : 'ws'}://${location.host}${base_url}api/admin/mangadex/queue`;
+			console.log(`Connecting to ${url}`);
+			this.ws = new WebSocket(url);
+			this.ws.onmessage = event => {
+				const data = JSON.parse(event.data);
+				this.jobs = data.jobs;
+				this.paused = data.paused;
+			};
+			this.ws.onclose = () => {
+				if (this.ws.failed)
+					return this.wsConnect(false);
+				alert('danger', 'Socket connection closed');
+			};
+			this.ws.onerror = () => {
+				if (secure)
+					return this.ws.failed = true;
+				alert('danger', 'Socket connection failed');
+			};
+		},
+		init() {
+			this.wsConnect();
+			this.load();
+		},
+		load() {
+			this.loading = true;
+			$.ajax({
+					type: 'GET',
+					url: base_url + 'api/admin/mangadex/queue',
+					dataType: 'json'
+				})
+				.done(data => {
+					if (!data.success && data.error) {
+						alert('danger', `Failed to fetch download queue. Error: ${data.error}`);
+						return;
+					}
+					this.jobs = data.jobs;
+					this.paused = data.paused;
+				})
+				.fail((jqXHR, status) => {
+					alert('danger', `Failed to fetch download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+				})
+				.always(() => {
+					this.loading = false;
+				});
+		},
+		jobAction(action, event) {
+			let url = `${base_url}api/admin/mangadex/queue/${action}`;
+			if (event) {
+				const id = event.currentTarget.closest('tr').id.split('-')[1];
+				url = `${url}?${$.param({
+					id: id
+				})}`;
 			}
-			load();
-		})
-		.fail((jqXHR, status) => {
-			alert('danger', `Failed to remove job from download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
-		});
-};
-const refresh = (id) => {
-	var url = base_url + 'api/admin/mangadex/queue/retry';
-	if (id !== undefined)
-		url += '?' + $.param({
-			id: id
-		});
-	console.log(url);
-	$.ajax({
-			type: 'POST',
-			url: url,
-			dataType: 'json'
-		})
-		.done(data => {
-			if (!data.success && data.error) {
-				alert('danger', `Failed to restart download job. Error: ${data.error}`);
-				return;
-			}
-			load();
-		})
-		.fail((jqXHR, status) => {
-			alert('danger', `Failed to restart download job. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
-		});
-};
-const toggle = () => {
-	$('#pause-resume-btn').attr('disabled', '');
-	const paused = $('#pause-resume-btn').text() === 'Resume download';
-	const action = paused ? 'resume' : 'pause';
-	const url = `${base_url}api/admin/mangadex/queue/${action}`;
-	$.ajax({
-			type: 'POST',
-			url: url,
-			dataType: 'json'
-		})
-		.fail((jqXHR, status) => {
-			alert('danger', `Failed to ${action} download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
-		})
-		.always(() => {
-			load();
-			$('#pause-resume-btn').removeAttr('disabled');
-		});
-};
-const load = () => {
-	if (loading) return;
-	loading = true;
-	console.log('fetching');
-	$.ajax({
-			type: 'GET',
-			url: base_url + 'api/admin/mangadex/queue',
-			dataType: 'json'
-		})
-		.done(data => {
-			if (!data.success && data.error) {
-				alert('danger', `Failed to fetch download queue. Error: ${data.error}`);
-				return;
-			}
-			console.log(data);
-			const btnText = data.paused ? "Resume download" : "Pause download";
-			$('#pause-resume-btn').text(btnText);
-			$('#pause-resume-btn').removeAttr('hidden');
-			const rows = data.jobs.map(obj => {
-				var cls = 'label ';
-				if (obj.status === 'Pending')
+			console.log(url);
+			$.ajax({
+					type: 'POST',
+					url: url,
+					dataType: 'json'
+				})
+				.done(data => {
+					if (!data.success && data.error) {
+						alert('danger', `Failed to ${action} job from download queue. Error: ${data.error}`);
+						return;
+					}
+					this.load();
+				})
+				.fail((jqXHR, status) => {
+					alert('danger', `Failed to ${action} job from download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+				});
+		},
+		toggle() {
+			this.toggling = true;
+			const action = this.paused ? 'resume' : 'pause';
+			const url = `${base_url}api/admin/mangadex/queue/${action}`;
+			$.ajax({
+					type: 'POST',
+					url: url,
+					dataType: 'json'
+				})
+				.fail((jqXHR, status) => {
+					alert('danger', `Failed to ${action} download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+				})
+				.always(() => {
+					this.load();
+					this.toggling = false;
+				});
+		},
+		statusClass(status) {
+			let cls = 'label ';
+			switch (status) {
+				case 'Pending':
 					cls += 'label-pending';
-				if (obj.status === 'Completed')
+					break;
+				case 'Completed':
 					cls += 'label-success';
-				if (obj.status === 'Error')
+					break;
+				case 'Error':
 					cls += 'label-danger';
-				if (obj.status === 'MissingPages')
+					break;
+				case 'MissingPages':
 					cls += 'label-warning';
-
-				const info = obj.status_message.length > 0 ? '<span uk-icon="info"></span>' : '';
-				const statusSpan = `<span class="${cls}">${obj.status} ${info}</span>`;
-				const dropdown = obj.status_message.length > 0 ? `<div uk-dropdown>${obj.status_message}</div>` : '';
-				const retryBtn = obj.status_message.length > 0 ? `<a onclick="refresh('${obj.id}')" uk-icon="refresh"></a>` : '';
-				return `<tr id="chapter-${obj.id}">
-				<td>${obj.plugin_id ? obj.title : `<a href="${baseURL}/chapter/${obj.id}">${obj.title}</a>`}</td>
-				<td>${obj.plugin_id ? obj.manga_title : `<a href="${baseURL}/manga/${obj.manga_id}">${obj.manga_title}</a>`}</td>
-				<td>${obj.success_count}/${obj.pages}</td>
-				<td>${moment(obj.time).fromNow()}</td>
-				<td>${statusSpan} ${dropdown}</td>
-				<td>${obj.plugin_id || ""}</td>
-				<td>
-					<a onclick="remove('${obj.id}')" uk-icon="trash"></a>
-					${retryBtn}
-				</td>
-				</tr>`;
-			});
-
-			const tbody = `<tbody>${rows.join('')}</tbody>`;
-			$('tbody').remove();
-			$('table').append(tbody);
-		})
-		.fail((jqXHR, status) => {
-			alert('danger', `Failed to fetch download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
-		})
-		.always(() => {
-			loading = false;
-		});
+					break;
+			}
+			return cls;
+		}
+	};
 };

public/js/download.js

@@ -1,305 +1,233 @@
-$(() => {
-	$('#search-input').keypress(event => {
-		if (event.which === 13) {
-			search();
-		}
-	});
-	$('.filter-field').each((i, ele) => {
-		$(ele).change(() => {
-			buildTable();
-		});
-	});
-});
-const selectAll = () => {
-	$('tbody > tr').each((i, e) => {
-		$(e).addClass('ui-selected');
-	});
-};
-const unselect = () => {
-	$('tbody > tr').each((i, e) => {
-		$(e).removeClass('ui-selected');
-	});
-};
-const download = () => {
-	const selected = $('tbody > tr.ui-selected');
-	if (selected.length === 0) return;
-	UIkit.modal.confirm(`Download ${selected.length} selected chapters?`).then(() => {
-		$('#download-btn').attr('hidden', '');
-		$('#download-spinner').removeAttr('hidden');
-		const ids = selected.map((i, e) => {
-			return $(e).find('td').first().text();
-		}).get();
-		const chapters = globalChapters.filter(c => ids.indexOf(c.id) >= 0);
-		console.log(ids);
-		$.ajax({
-				type: 'POST',
-				url: base_url + 'api/admin/mangadex/download',
-				data: JSON.stringify({
-					chapters: chapters
-				}),
-				contentType: "application/json",
-				dataType: 'json'
-			})
-			.done(data => {
-				console.log(data);
-				if (data.error) {
-					alert('danger', `Failed to add chapters to the download queue. Error: ${data.error}`);
+const downloadComponent = () => {
+	return {
+		chaptersLimit: 1000,
+		loading: false,
+		addingToDownload: false,
+		searchInput: '',
+		data: {},
+		chapters: [],
+		langChoice: 'All',
+		groupChoice: 'All',
+		chapterRange: '',
+		volumeRange: '',
+
+		get languages() {
+			const set = new Set();
+			if (this.data.chapters) {
+				this.data.chapters.forEach(chp => {
+					set.add(chp.language);
+				});
+			}
+			const ary = [...set].sort();
+			ary.unshift('All');
+			return ary;
+		},
+
+		get groups() {
+			const set = new Set();
+			if (this.data.chapters) {
+				this.data.chapters.forEach(chp => {
+					Object.keys(chp.groups).forEach(g => {
+						set.add(g);
+					});
+				});
+			}
+			const ary = [...set].sort();
+			ary.unshift('All');
+			return ary;
+		},
+
+		init() {
+			const tableObserver = new MutationObserver(() => {
+				console.log('table mutated');
+				$("#selectable").selectable({
+					filter: 'tr'
+				});
+			});
+			tableObserver.observe($('table').get(0), {
+				childList: true,
+				subtree: true
+			});
+		},
+		filtersUpdated() {
+			if (!this.data.chapters)
+				this.chapters = [];
+			const filters = {
+				chapter: this.parseRange(this.chapterRange),
+				volume: this.parseRange(this.volumeRange),
+				lang: this.langChoice,
+				group: this.groupChoice
+			};
+			console.log('filters:', filters);
+			let _chapters = this.data.chapters.slice();
+			Object.entries(filters).forEach(([k, v]) => {
+				if (v === 'All') return;
+				if (k === 'group') {
+					_chapters = _chapters.filter(c => {
+						const unescaped_groups = Object.entries(c.groups).map(([g, id]) => this.unescapeHTML(g));
+						return unescaped_groups.indexOf(v) >= 0;
+					});
 					return;
 				}
-				const successCount = parseInt(data.success);
-				const failCount = parseInt(data.fail);
-				UIkit.modal.confirm(`${successCount} of ${successCount + failCount} chapters added to the download queue. Proceed to the download manager?`).then(() => {
-					window.location.href = base_url + 'admin/downloads';
+				if (k === 'lang') {
+					_chapters = _chapters.filter(c => c.language === v);
+					return;
+				}
+				const lb = parseFloat(v[0]);
+				const ub = parseFloat(v[1]);
+				if (isNaN(lb) && isNaN(ub)) return;
+				_chapters = _chapters.filter(c => {
+					const val = parseFloat(c[k]);
+					if (isNaN(val)) return false;
+					if (isNaN(lb))
+						return val <= ub;
+					else if (isNaN(ub))
+						return val >= lb;
+					else
+						return val >= lb && val <= ub;
 				});
-			})
-			.fail((jqXHR, status) => {
-				alert('danger', `Failed to add chapters to the download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
-			})
-			.always(() => {
-				$('#download-spinner').attr('hidden', '');
-				$('#download-btn').removeAttr('hidden');
 			});
-	});
-};
-const toggleSpinner = () => {
-	var attr = $('#spinner').attr('hidden');
-	if (attr) {
-		$('#spinner').removeAttr('hidden');
-		$('#search-btn').attr('hidden', '');
-	} else {
-		$('#search-btn').removeAttr('hidden');
-		$('#spinner').attr('hidden', '');
-	}
-	searching = !searching;
-};
-var searching = false;
-var globalChapters;
-const search = () => {
-	if (searching) {
-		return;
-	}
-	$('#manga-details').attr('hidden', '');
-	$('#filter-form').attr('hidden', '');
-	$('table').attr('hidden', '');
-	$('#selection-controls').attr('hidden', '');
-	$('#filter-notification').attr('hidden', '');
-	toggleSpinner();
-	const input = $('input').val();
+			console.log('filtered chapters:', _chapters);
+			this.chapters = _chapters;
+		},
+		search() {
+			if (this.loading || this.searchInput === '') return;
+			this.loading = true;
+			this.data = {};
 
-	if (input === "") {
-		toggleSpinner();
-		return;
-	}
-
-	var int_id = -1;
-
-	try {
-		const path = new URL(input).pathname;
-		const match = /\/title\/([0-9]+)/.exec(path);
-		int_id = parseInt(match[1]);
-	} catch (e) {
-		int_id = parseInt(input);
-	}
-
-	if (int_id <= 0 || isNaN(int_id)) {
-		alert('danger', 'Please make sure you are using a valid manga ID or manga URL from Mangadex.');
-		toggleSpinner();
-		return;
-	}
-
-	$.getJSON(`${base_url}api/admin/mangadex/manga/${int_id}`)
-		.done((data) => {
-			if (data.error) {
-				alert('danger', 'Failed to get manga info. Error: ' + data.error);
+			var int_id = -1;
+			try {
+				const path = new URL(this.searchInput).pathname;
+				const match = /\/(?:title|manga)\/([0-9]+)/.exec(path);
+				int_id = parseInt(match[1]);
+			} catch (e) {
+				int_id = parseInt(this.searchInput);
+			}
+			if (int_id <= 0 || isNaN(int_id)) {
+				alert('danger', 'Please make sure you are using a valid manga ID or manga URL from Mangadex.');
+				this.loading = false;
 				return;
 			}
 
-			const cover = baseURL + data.cover_url;
-			$('#cover').attr("src", cover);
-			$('#title').text("Title: " + data.title);
-			$('#artist').text("Artist: " + data.artist);
-			$('#author').text("Author: " + data.author);
+			$.getJSON(`${base_url}api/admin/mangadex/manga/${int_id}`)
+				.done((data) => {
+					if (data.error) {
+						alert('danger', 'Failed to get manga info. Error: ' + data.error);
+						return;
+					}
 
-			$('#manga-details').removeAttr('hidden');
-
-			console.log(data.chapters);
-			globalChapters = data.chapters;
-
-			let langs = new Set();
-			let group_names = new Set();
-			data.chapters.forEach(chp => {
-				Object.entries(chp.groups).forEach(([k, v]) => {
-					group_names.add(k);
+					this.data = data;
+					this.chapters = data.chapters;
+				})
+				.fail((jqXHR, status) => {
+					alert('danger', `Failed to get manga info. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+				})
+				.always(() => {
+					this.loading = false;
 				});
-				langs.add(chp.language);
+
+		},
+
+		parseRange(str) {
+			const regex = /^[\t ]*(?:(?:(<|<=|>|>=)[\t ]*([0-9]+))|(?:([0-9]+))|(?:([0-9]+)[\t ]*-[\t ]*([0-9]+))|(?:[\t ]*))[\t ]*$/m;
+			const matches = str.match(regex);
+			var num;
+
+			if (!matches) {
+				return [null, null];
+			} else if (typeof matches[1] !== 'undefined' && typeof matches[2] !== 'undefined') {
+				// e.g., <= 30
+				num = parseInt(matches[2]);
+				if (isNaN(num)) {
+					return [null, null];
+				}
+				switch (matches[1]) {
+					case '<':
+						return [null, num - 1];
+					case '<=':
+						return [null, num];
+					case '>':
+						return [num + 1, null];
+					case '>=':
+						return [num, null];
+				}
+			} else if (typeof matches[3] !== 'undefined') {
+				// a single number
+				num = parseInt(matches[3]);
+				if (isNaN(num)) {
+					return [null, null];
+				}
+				return [num, num];
+			} else if (typeof matches[4] !== 'undefined' && typeof matches[5] !== 'undefined') {
+				// e.g., 10 - 23
+				num = parseInt(matches[4]);
+				const n2 = parseInt(matches[5]);
+				if (isNaN(num) || isNaN(n2) || num > n2) {
+					return [null, null];
+				}
+				return [num, n2];
+			} else {
+				// empty or space only
+				return [null, null];
+			}
+		},
+
+		unescapeHTML(str) {
+			var elt = document.createElement("span");
+			elt.innerHTML = str;
+			return elt.innerText;
+		},
+
+		selectAll() {
+			$('tbody > tr').each((i, e) => {
+				$(e).addClass('ui-selected');
 			});
+		},
 
-			const comp = (a, b) => {
-				var ai;
-				var bi;
-				try {
-					ai = parseFloat(a);
-				} catch (e) {}
-				try {
-					bi = parseFloat(b);
-				} catch (e) {}
-				if (typeof ai === 'undefined') return -1;
-				if (typeof bi === 'undefined') return 1;
-				if (ai < bi) return 1;
-				if (ai > bi) return -1;
-				return 0;
-			};
-
-			langs = [...langs].sort();
-			group_names = [...group_names].sort();
-
-			langs.unshift('All');
-			group_names.unshift('All');
-
-			$('select#lang-select').append(langs.map(e => `<option>${e}</option>`).join(''));
-			$('select#group-select').append(group_names.map(e => `<option>${e}</option>`).join(''));
-
-			$('#filter-form').removeAttr('hidden');
-
-			buildTable();
-		})
-		.fail((jqXHR, status) => {
-			alert('danger', `Failed to get manga info. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
-		})
-		.always(() => {
-			toggleSpinner();
-		});
-};
-const parseRange = str => {
-	const regex = /^[\t ]*(?:(?:(<|<=|>|>=)[\t ]*([0-9]+))|(?:([0-9]+))|(?:([0-9]+)[\t ]*-[\t ]*([0-9]+))|(?:[\t ]*))[\t ]*$/m;
-	const matches = str.match(regex);
-	var num;
-
-	if (!matches) {
-		alert('danger', `Failed to parse filter input ${str}`);
-		return [null, null];
-	} else if (typeof matches[1] !== 'undefined' && typeof matches[2] !== 'undefined') {
-		// e.g., <= 30
-		num = parseInt(matches[2]);
-		if (isNaN(num)) {
-			alert('danger', `Failed to parse filter input ${str}`);
-			return [null, null];
-		}
-		switch (matches[1]) {
-			case '<':
-				return [null, num - 1];
-			case '<=':
-				return [null, num];
-			case '>':
-				return [num + 1, null];
-			case '>=':
-				return [num, null];
-		}
-	} else if (typeof matches[3] !== 'undefined') {
-		// a single number
-		num = parseInt(matches[3]);
-		if (isNaN(num)) {
-			alert('danger', `Failed to parse filter input ${str}`);
-			return [null, null];
-		}
-		return [num, num];
-	} else if (typeof matches[4] !== 'undefined' && typeof matches[5] !== 'undefined') {
-		// e.g., 10 - 23
-		num = parseInt(matches[4]);
-		const n2 = parseInt(matches[5]);
-		if (isNaN(num) || isNaN(n2) || num > n2) {
-			alert('danger', `Failed to parse filter input ${str}`);
-			return [null, null];
-		}
-		return [num, n2];
-	} else {
-		// empty or space only
-		return [null, null];
-	}
-};
-const getFilters = () => {
-	const filters = {};
-	$('.uk-select').each((i, ele) => {
-		const id = $(ele).attr('id');
-		const by = id.split('-')[0];
-		const choice = $(ele).val();
-		filters[by] = choice;
-	});
-	filters.volume = parseRange($('#volume-range').val());
-	filters.chapter = parseRange($('#chapter-range').val());
-	return filters;
-};
-const buildTable = () => {
-	$('table').attr('hidden', '');
-	$('#selection-controls').attr('hidden', '');
-	$('#filter-notification').attr('hidden', '');
-	console.log('rebuilding table');
-	const filters = getFilters();
-	console.log('filters:', filters);
-	var chapters = globalChapters.slice();
-	Object.entries(filters).forEach(([k, v]) => {
-		if (v === 'All') return;
-		if (k === 'group') {
-			chapters = chapters.filter(c => {
-				unescaped_groups = Object.entries(c.groups).map(([g, id]) => unescapeHTML(g));
-				return unescaped_groups.indexOf(v) >= 0;
+		clearSelection() {
+			$('tbody > tr').each((i, e) => {
+				$(e).removeClass('ui-selected');
+			});
+		},
+
+		download() {
+			const selected = $('tbody > tr.ui-selected');
+			if (selected.length === 0) return;
+			UIkit.modal.confirm(`Download ${selected.length} selected chapters?`).then(() => {
+				const ids = selected.map((i, e) => {
+					return parseInt($(e).find('td').first().text());
+				}).get();
+				const chapters = this.chapters.filter(c => ids.indexOf(c.id) >= 0);
+				console.log(ids);
+				this.addingToDownload = true;
+				$.ajax({
+						type: 'POST',
+						url: `${base_url}api/admin/mangadex/download`,
+						data: JSON.stringify({
+							chapters: chapters
+						}),
+						contentType: "application/json",
+						dataType: 'json'
+					})
+					.done(data => {
+						console.log(data);
+						if (data.error) {
+							alert('danger', `Failed to add chapters to the download queue. Error: ${data.error}`);
+							return;
+						}
+						const successCount = parseInt(data.success);
+						const failCount = parseInt(data.fail);
+						UIkit.modal.confirm(`${successCount} of ${successCount + failCount} chapters added to the download queue. Proceed to the download manager?`).then(() => {
+							window.location.href = base_url + 'admin/downloads';
+						});
+					})
+					.fail((jqXHR, status) => {
+						alert('danger', `Failed to add chapters to the download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+					})
+					.always(() => {
+						this.addingToDownload = false;
+					});
 			});
-			return;
 		}
-		if (k === 'lang') {
-			chapters = chapters.filter(c => c.language === v);
-			return;
-		}
-		const lb = parseFloat(v[0]);
-		const ub = parseFloat(v[1]);
-		if (isNaN(lb) && isNaN(ub)) return;
-		chapters = chapters.filter(c => {
-			const val = parseFloat(c[k]);
-			if (isNaN(val)) return false;
-			if (isNaN(lb))
-				return val <= ub;
-			else if (isNaN(ub))
-				return val >= lb;
-			else
-				return val >= lb && val <= ub;
-		});
-	});
-	console.log('filtered chapters:', chapters);
-	$('#count-text').text(`${chapters.length} chapters found`);
-
-	const chaptersLimit = 1000;
-	if (chapters.length > chaptersLimit) {
-		$('#filter-notification').text(`Mango can only list ${chaptersLimit} chapters, but we found ${chapters.length} chapters in this manga. Please use the filter options above to narrow down your search.`);
-		$('#filter-notification').removeAttr('hidden');
-		return;
-	}
-
-	const inner = chapters.map(chp => {
-		const group_str = Object.entries(chp.groups).map(([k, v]) => {
-			return `<a href="${baseURL }/group/${v}">${k}</a>`;
-		}).join(' | ');
-		return `<tr class="ui-widget-content">
-						<td><a href="${baseURL}/chapter/${chp.id}">${chp.id}</a></td>
-						<td>${chp.title}</td>
-						<td>${chp.language}</td>
-						<td>${group_str}</td>
-						<td>${chp.volume}</td>
-						<td>${chp.chapter}</td>
-						<td>${moment.unix(chp.time).fromNow()}</td>
-					</tr>`;
-	}).join('');
-	const tbody = `<tbody id="selectable">${inner}</tbody>`;
-	$('tbody').remove();
-	$('table').append(tbody);
-	$('table').removeAttr('hidden');
-	$("#selectable").selectable({
-		filter: 'tr'
-	});
-	$('#selection-controls').removeAttr('hidden');
-};
-
-const unescapeHTML = (str) => {
-	var elt = document.createElement("span");
-	elt.innerHTML = str;
-	return elt.innerText;
+	};
 };

public/js/missing-items.js

@@ -0,0 +1,60 @@
+const component = () => {
+	return {
+		empty: true,
+		titles: [],
+		entries: [],
+		loading: true,
+
+		load() {
+			this.loading = true;
+			this.request('GET', `${base_url}api/admin/titles/missing`, data => {
+				this.titles = data.titles;
+				this.request('GET', `${base_url}api/admin/entries/missing`, data => {
+					this.entries = data.entries;
+					this.loading = false;
+					this.empty = this.entries.length === 0 && this.titles.length === 0;
+				});
+			});
+		},
+		rm(event) {
+			const rawID = event.currentTarget.closest('tr').id;
+			const [type, id] = rawID.split('-');
+			const url = `${base_url}api/admin/${type === 'title' ? 'titles' : 'entries'}/missing/${id}`;
+			this.request('DELETE', url, () => {
+				this.load();
+			});
+		},
+		rmAll() {
+			UIkit.modal.confirm('Are you sure? All metadata associated with these items, including their tags and thumbnails, will be deleted from the database.', {
+				labels: {
+					ok: 'Yes, delete them',
+					cancel: 'Cancel'
+				}
+			}).then(() => {
+				this.request('DELETE', `${base_url}api/admin/titles/missing`, () => {
+					this.request('DELETE', `${base_url}api/admin/entries/missing`, () => {
+						this.load();
+					});
+				});
+			});
+		},
+		request(method, url, cb) {
+			console.log(url);
+			$.ajax({
+					type: method,
+					url: url,
+					contentType: 'application/json'
+				})
+				.done(data => {
+					if (data.error) {
+						alert('danger', `Failed to ${method} ${url}. Error: ${data.error}`);
+						return;
+					}
+					if (cb) cb(data);
+				})
+				.fail((jqXHR, status) => {
+					alert('danger', `Failed to ${method} ${url}. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+				});
+		}
+	};
+};

public/js/plugin-download.js

@@ -33,14 +33,13 @@ const search = () => {
 	if (searching)
 		return;
 
-	const query = $('#search-input').val();
+	const query = $.param({
+		query: $('#search-input').val(),
+		plugin: pid
+	});
 	$.ajax({
-			type: 'POST',
-			url: base_url + 'api/admin/plugin/list',
-			data: JSON.stringify({
-				query: query,
-				plugin: pid
-			}),
+			type: 'GET',
+			url: `${base_url}api/admin/plugin/list?${query}`,
 			contentType: "application/json",
 			dataType: 'json'
 		})

public/js/reader.js

@@ -1,195 +1,281 @@
-let lastSavedPage = page;
-let items = [];
-let longPages = false;
+const readerComponent = () => {
+	return {
+		loading: true,
+		mode: 'continuous', // Can be 'continuous', 'height' or 'width'
+		msg: 'Loading the web reader. Please wait...',
+		alertClass: 'uk-alert-primary',
+		items: [],
+		curItem: {},
+		flipAnimation: null,
+		longPages: false,
+		lastSavedPage: page,
 
-$(() => {
-	getPages();
+		/**
+		 * Initialize the component by fetching the page dimensions
+		 */
+		init(nextTick) {
+			$.get(`${base_url}api/dimensions/${tid}/${eid}`)
+				.then(data => {
+					if (!data.success && data.error)
+						throw new Error(resp.error);
+					const dimensions = data.dimensions;
 
-	$('#page-select').change(() => {
-		const p = parseInt($('#page-select').val());
-		toPage(p);
-	});
-});
+					this.items = dimensions.map((d, i) => {
+						return {
+							id: i + 1,
+							url: `${base_url}api/page/${tid}/${eid}/${i+1}`,
+							width: d.width,
+							height: d.height,
+							style: `margin-top: ${data.margin}px; margin-bottom: ${data.margin}px;`
+						};
+					});
 
-/**
- * Set an alpine.js property
- *
- * @function setProp
- * @param {string} key - Key of the data property
- * @param {*} prop - The data property
- */
-const setProp = (key, prop) => {
-	$('#root').get(0).__x.$data[key] = prop;
-};
+					const avgRatio = this.items.reduce((acc, cur) => {
+						return acc + cur.height / cur.width
+					}, 0) / this.items.length;
 
-/**
- * Get dimension of the pages in the entry from the API and update the view
- */
-const getPages = () => {
-	$.get(`${base_url}api/dimensions/${tid}/${eid}`)
-		.then(data => {
-			if (!data.success && data.error)
-				throw new Error(resp.error);
-			const dimensions = data.dimensions;
+					console.log(avgRatio);
+					this.longPages = avgRatio > 2;
+					this.loading = false;
+					this.mode = localStorage.getItem('mode') || 'continuous';
 
-			items = dimensions.map((d, i) => {
-				return {
-					id: i + 1,
-					url: `${base_url}api/page/${tid}/${eid}/${i+1}`,
-					width: d.width,
-					height: d.height
-				};
-			});
+					// Here we save a copy of this.mode, and use the copy as
+					// 	the model-select value. This is because `updateMode`
+					// 	might change this.mode and make it `height` or `width`,
+					// 	which are not available in mode-select
+					const mode = this.mode;
+					this.updateMode(this.mode, page, nextTick);
+					$('#mode-select').val(mode);
+				})
+				.catch(e => {
+					const errMsg = `Failed to get the page dimensions. ${e}`;
+					console.error(e);
+					this.alertClass = 'uk-alert-danger';
+					this.msg = errMsg;
+				})
+		},
+		/**
+		 * Handles the `change` event for the page selector
+		 */
+		pageChanged() {
+			const p = parseInt($('#page-select').val());
+			this.toPage(p);
+		},
+		/**
+		 * Handles the `change` event for the mode selector
+		 *
+		 * @param {function} nextTick - Alpine $nextTick magic property
+		 */
+		modeChanged(nextTick) {
+			const mode = $('#mode-select').val();
+			const curIdx = parseInt($('#page-select').val());
 
-			const avgRatio = items.reduce((acc, cur) => {
-				return acc + cur.height / cur.width
-			}, 0) / items.length;
+			this.updateMode(mode, curIdx, nextTick);
+		},
+		/**
+		 * Handles the window `resize` event
+		 */
+		resized() {
+			if (this.mode === 'continuous') return;
 
-			console.log(avgRatio);
-			longPages = avgRatio > 2;
+			const wideScreen = $(window).width() > $(window).height();
+			this.mode = wideScreen ? 'height' : 'width';
+		},
+		/**
+		 * Handles the window `keydown` event
+		 *
+		 * @param {Event} event - The triggering event
+		 */
+		keyHandler(event) {
+			if (this.mode === 'continuous') return;
 
-			setProp('items', items);
-			setProp('loading', false);
+			if (event.key === 'ArrowLeft' || event.key === 'k')
+				this.flipPage(false);
+			if (event.key === 'ArrowRight' || event.key === 'j')
+				this.flipPage(true);
+		},
+		/**
+		 * Flips to the next or the previous page
+		 *
+		 * @param {bool} isNext - Whether we are going to the next page 
+		 */
+		flipPage(isNext) {
+			const idx = parseInt(this.curItem.id);
+			const newIdx = idx + (isNext ? 1 : -1);
 
-			waitForPage(items.length, () => {
-				toPage(page);
-				setupScroller();
-			});
-		})
-		.catch(e => {
-			const errMsg = `Failed to get the page dimensions. ${e}`;
-			console.error(e);
-			setProp('alertClass', 'uk-alert-danger');
-			setProp('msg', errMsg);
-		})
-};
+			if (newIdx <= 0 || newIdx > this.items.length) return;
 
-/**
- * Jump to a specific page
- *
- * @function toPage
- * @param {number} idx - One-based index of the page
- */
-const toPage = (idx) => {
-	$(`#${idx}`).get(0).scrollIntoView(true);
-	UIkit.modal($('#modal-sections')).hide();
-};
+			this.toPage(newIdx);
 
-/**
- * Check if a page exists every 100ms. If so, invoke the callback function.
- *
- * @function waitForPage
- * @param {number} idx - One-based index of the page
- * @param {function} cb - Callback function
- */
-const waitForPage = (idx, cb) => {
-	if ($(`#${idx}`).length > 0) return cb();
-	setTimeout(() => {
-		waitForPage(idx, cb)
-	}, 100);
-};
+			if (isNext)
+				this.flipAnimation = 'right';
+			else
+				this.flipAnimation = 'left';
 
-/**
- * Show the control modal
- *
- * @function showControl
- * @param {object} event - The onclick event that triggers the function
- */
-const showControl = (event) => {
-	const idx = parseInt($(event.currentTarget).attr('id'));
-	const pageCount = $('#page-select > option').length;
-	const progressText = `Progress: ${idx}/${pageCount} (${(idx/pageCount * 100).toFixed(1)}%)`;
-	$('#progress-label').text(progressText);
-	$('#page-select').val(idx);
-	UIkit.modal($('#modal-sections')).show();
-}
+			setTimeout(() => {
+				this.flipAnimation = null;
+			}, 500);
 
-/**
- * Redirect to a URL
- *
- * @function redirect
- * @param {string} url - The target URL
- */
-const redirect = (url) => {
-	window.location.replace(url);
-}
-
-/**
- * Replace the address bar history and save th ereading progress if necessary
- *
- * @function replaceHistory
- * @param {number} idx - One-based index of the current page
- */
-const replaceHistory = (idx) => {
-	const ary = window.location.pathname.split('/');
-	ary[ary.length - 1] = idx;
-	ary.shift(); // remove leading `/`
-	ary.unshift(window.location.origin);
-	const url = ary.join('/');
-	saveProgress(idx);
-	history.replaceState(null, "", url);
-}
-
-/**
- * Set up the scroll handler that calls `replaceHistory` when an image
- * 		enters the view port
- *
- * @function setupScroller
- */
-const setupScroller = () => {
-	$('#root img').each((idx, el) => {
-		$(el).on('inview', (event, inView) => {
-			if (inView) {
-				const current = $(event.currentTarget).attr('id');
-				replaceHistory(current);
+			this.replaceHistory(newIdx);
+		},
+		/**
+		 * Jumps to a specific page
+		 *
+		 * @param {number} idx - One-based index of the page
+		 */
+		toPage(idx) {
+			if (this.mode === 'continuous') {
+				$(`#${idx}`).get(0).scrollIntoView(true);
+			} else {
+				if (idx >= 1 && idx <= this.items.length) {
+					this.curItem = this.items[idx - 1];
+				}
 			}
-		});
-	});
-};
+			this.replaceHistory(idx);
+			UIkit.modal($('#modal-sections')).hide();
+		},
+		/**
+		 * Replace the address bar history and save the reading progress if necessary 
+		 *
+		 * @param {number} idx - One-based index of the page
+		 */
+		replaceHistory(idx) {
+			const ary = window.location.pathname.split('/');
+			ary[ary.length - 1] = idx;
+			ary.shift(); // remove leading `/`
+			ary.unshift(window.location.origin);
+			const url = ary.join('/');
+			this.saveProgress(idx);
+			history.replaceState(null, "", url);
+		},
+		/**
+		 * Updates the backend reading progress if:
+		 * 		1) the current page is more than five pages away from the last 
+		 * 			saved page, or
+		 * 		2) the average height/width ratio of the pages is over 2, or
+		 * 		3) the current page is the first page, or
+		 * 		4) the current page is the last page
+		 *
+		 * @param {number} idx - One-based index of the page
+		 * @param {function} cb - Callback
+		 */
+		saveProgress(idx, cb) {
+			idx = parseInt(idx);
+			if (Math.abs(idx - this.lastSavedPage) >= 5 ||
+				this.longPages ||
+				idx === 1 || idx === this.items.length
+			) {
+				this.lastSavedPage = idx;
+				console.log('saving progress', idx);
 
-/**
- * Update the backend reading progress if:
- * 		1) the current page is more than five pages away from the last 
- * 			saved page, or
- * 		2) the average height/width ratio of the pages is over 2, or
- * 		3) the current page is the first page, or
- * 		4) the current page is the last page
- *
- * @function saveProgress
- * @param {number} idx - One-based index of the page
- * @param {function} cb - Callback
- */
-const saveProgress = (idx, cb) => {
-	idx = parseInt(idx);
-	if (Math.abs(idx - lastSavedPage) >= 5 ||
-		longPages ||
-		idx === 1 || idx === items.length
-	) {
-		lastSavedPage = idx;
-		console.log('saving progress', idx);
+				const url = `${base_url}api/progress/${tid}/${idx}?${$.param({eid: eid})}`;
+				$.ajax({
+						method: 'PUT',
+						url: url,
+						dataType: 'json'
+					})
+					.done(data => {
+						if (data.error)
+							alert('danger', data.error);
+						if (cb) cb();
+					})
+					.fail((jqXHR, status) => {
+						alert('danger', `Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+					});
+			}
+		},
+		/**
+		 * Updates the reader mode
+		 *
+		 * @param {string} mode - Either `continuous` or `paged`
+		 * @param {number} targetPage - The one-based index of the target page
+		 * @param {function} nextTick - Alpine $nextTick magic property
+		 */
+		updateMode(mode, targetPage, nextTick) {
+			localStorage.setItem('mode', mode);
 
-		const url = `${base_url}api/progress/${tid}/${idx}?${$.param({entry: eid})}`;
-		$.post(url)
-			.then(data => {
-				if (data.error) throw new Error(data.error);
-				if (cb) cb();
-			})
-			.catch(e => {
-				console.error(e);
-				alert('danger', e);
+			// The mode to be put into the `mode` prop. It can't be `screen`
+			let propMode = mode;
+
+			if (mode === 'paged') {
+				const wideScreen = $(window).width() > $(window).height();
+				propMode = wideScreen ? 'height' : 'width';
+			}
+
+			this.mode = propMode;
+
+			if (mode === 'continuous') {
+				nextTick(() => {
+					this.setupScroller();
+				});
+			}
+
+			nextTick(() => {
+				this.toPage(targetPage);
 			});
-	}
-};
+		},
+		/**
+		 * Shows the control modal
+		 *
+		 * @param {Event} event - The triggering event
+		 */
+		showControl(event) {
+			const idx = event.currentTarget.id;
+			const pageCount = this.items.length;
+			const progressText = `Progress: ${idx}/${pageCount} (${(idx/pageCount * 100).toFixed(1)}%)`;
+			$('#progress-label').text(progressText);
+			$('#page-select').val(idx);
+			UIkit.modal($('#modal-sections')).show();
+		},
+		/**
+		 * Redirects to a URL
+		 *
+		 * @param {string} url - The target URL
+		 */
+		redirect(url) {
+			window.location.replace(url);
+		},
+		/**
+		 * Set up the scroll handler that calls `replaceHistory` when an image 
+		 * 	enters the view port
+		 */
+		setupScroller() {
+			if (this.mode !== 'continuous') return;
+			$('img').each((idx, el) => {
+				$(el).on('inview', (event, inView) => {
+					if (inView) {
+						const current = $(event.currentTarget).attr('id');
 
-/**
- * Mark progress to 100% and redirect to the next entry
- * 	Used as the onclick handler for the "Next Entry" button
- *
- * @function nextEntry
- * @param {string} nextUrl - URL of the next entry
- */
-const nextEntry = (nextUrl) => {
-	saveProgress(items.length, () => {
-		redirect(nextUrl);
-	});
-};
+						this.curItem = this.items[current - 1];
+						this.replaceHistory(current);
+					}
+				});
+			});
+		},
+		/**
+		 * Marks progress as 100% and jumps to the next entry
+		 *
+		 * @param {string} nextUrl - URL of the next entry
+		 */
+		nextEntry(nextUrl) {
+			this.saveProgress(this.items.length, () => {
+				this.redirect(nextUrl);
+			});
+		},
+		/**
+		 * Exits the reader, and optionally sets the reading progress tp 100%
+		 *
+		 * @param {string} exitUrl - The Exit URL
+		 * @param {boolean} [markCompleted] - Whether we should mark the
+		 *		reading progress to 100%
+		 */
+		exitReader(exitUrl, markCompleted = false) {
+			if (!markCompleted) {
+				return this.redirect(exitUrl);
+			}
+			this.saveProgress(this.items.length, () => {
+				this.redirect(exitUrl);
+			});
+		}
+	};
+}

public/js/theme.js

@@ -1,72 +0,0 @@
-// https://flaviocopes.com/javascript-detect-dark-mode/
-const preferDarkMode = () => {
-	return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-};
-
-const validThemeSetting = (theme) => {
-	return ['dark', 'light', 'system'].indexOf(theme) >= 0;
-};
-
-// dark / light / system
-const loadThemeSetting = () => {
-	let str = localStorage.getItem('theme');
-	if (!str || !validThemeSetting(str)) str = 'light';
-	return str;
-};
-
-// dark / light
-const loadTheme = () => {
-	let setting = loadThemeSetting();
-	if (setting === 'system') {
-		setting = preferDarkMode() ? 'dark' : 'light';
-	}
-	return setting;
-};
-
-const saveThemeSetting = setting => {
-	if (!validThemeSetting(setting)) setting = 'light';
-	localStorage.setItem('theme', setting);
-};
-
-// when toggled, Auto will be changed to light or dark
-const toggleTheme = () => {
-	const theme = loadTheme();
-	const newTheme = theme === 'dark' ? 'light' : 'dark';
-	saveThemeSetting(newTheme);
-	setTheme(newTheme);
-};
-
-const setTheme = (theme) => {
-	if (!theme) theme = loadTheme();
-	if (theme === 'dark') {
-		$('html').css('background', 'rgb(20, 20, 20)');
-		$('body').addClass('uk-light');
-		$('.uk-card').addClass('uk-card-secondary');
-		$('.uk-card').removeClass('uk-card-default');
-		$('.ui-widget-content').addClass('dark');
-	} else {
-		$('html').css('background', '');
-		$('body').removeClass('uk-light');
-		$('.uk-card').removeClass('uk-card-secondary');
-		$('.uk-card').addClass('uk-card-default');
-		$('.ui-widget-content').removeClass('dark');
-	}
-};
-
-// do it before document is ready to prevent the initial flash of white on
-// 	most pages
-setTheme();
-
-$(() => {
-	// hack for the reader page
-	setTheme();
-
-	// on system dark mode setting change
-	if (window.matchMedia) {
-		window.matchMedia('(prefers-color-scheme: dark)')
-			.addEventListener('change', event => {
-				if (loadThemeSetting() === 'system')
-					setTheme(event.matches ? 'dark' : 'light');
-			});
-	}
-});

public/js/title.js

@@ -55,7 +55,7 @@ function showModal(encodedPath, pages, percentage, encodedeTitle, encodedEntryTi
 
 	$('#modal-edit-btn').attr('onclick', `edit("${entryID}")`);
 
-	$('#modal-download-btn').attr('href', `${base_url}opds/download/${titleID}/${entryID}`);
+	$('#modal-download-btn').attr('href', `${base_url}api/download/${titleID}/${entryID}`);
 
 	UIkit.modal($('#modal')).show();
 }
@@ -63,18 +63,27 @@ function showModal(encodedPath, pages, percentage, encodedeTitle, encodedEntryTi
 const updateProgress = (tid, eid, page) => {
 	let url = `${base_url}api/progress/${tid}/${page}`
 	const query = $.param({
-		entry: eid
+		eid: eid
 	});
 	if (eid)
 		url += `?${query}`;
-	$.post(url, (data) => {
-		if (data.success) {
-			location.reload();
-		} else {
-			error = data.error;
-			alert('danger', error);
-		}
-	});
+
+	$.ajax({
+			method: 'PUT',
+			url: url,
+			dataType: 'json'
+		})
+		.done(data => {
+			if (data.success) {
+				location.reload();
+			} else {
+				error = data.error;
+				alert('danger', error);
+			}
+		})
+		.fail((jqXHR, status) => {
+			alert('danger', `Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+		});
 };
 
 const renameSubmit = (name, eid) => {
@@ -89,14 +98,14 @@ const renameSubmit = (name, eid) => {
 	}
 
 	const query = $.param({
-		entry: eid
+		eid: eid
 	});
 	let url = `${base_url}api/admin/display_name/${titleId}/${name}`;
 	if (eid)
 		url += `?${query}`;
 
 	$.ajax({
-			type: 'POST',
+			type: 'PUT',
 			url: url,
 			contentType: "application/json",
 			dataType: 'json'
@@ -131,6 +140,7 @@ const edit = (eid) => {
 
 	const displayNameField = $('#display-name-field');
 	displayNameField.attr('value', displayName);
+	console.log(displayNameField);
 	displayNameField.keyup(event => {
 		if (event.keyCode === 13) {
 			renameSubmit(displayNameField.val(), eid);
@@ -150,10 +160,10 @@ const setupUpload = (eid) => {
 	const bar = $('#upload-progress').get(0);
 	const titleId = upload.attr('data-title-id');
 	const queryObj = {
-		title: titleId
+		tid: titleId
 	};
 	if (eid)
-		queryObj['entry'] = eid;
+		queryObj['eid'] = eid;
 	const query = $.param(queryObj);
 	const url = `${base_url}api/admin/upload/cover?${query}`;
 	console.log(url);
@@ -218,9 +228,9 @@ const selectedIDs = () => {
 const bulkProgress = (action, el) => {
 	const tid = $(el).attr('data-id');
 	const ids = selectedIDs();
-	const url = `${base_url}api/bulk-progress/${action}/${tid}`;
+	const url = `${base_url}api/bulk_progress/${action}/${tid}`;
 	$.ajax({
-			type: 'POST',
+			type: 'PUT',
 			url: url,
 			contentType: "application/json",
 			dataType: 'json',
@@ -242,3 +252,85 @@ const bulkProgress = (action, el) => {
 			deselectAll();
 		});
 };
+
+const tagsComponent = () => {
+	return {
+		isAdmin: false,
+		tags: [],
+		tid: $('.upload-field').attr('data-title-id'),
+		loading: true,
+
+		load(admin) {
+			this.isAdmin = admin;
+
+			$('.tag-select').select2({
+				tags: true,
+				placeholder: this.isAdmin ? 'Tag the title' : 'No tags found',
+				disabled: !this.isAdmin,
+				templateSelection(state) {
+					const a = document.createElement('a');
+					a.setAttribute('href', `${base_url}tags/${encodeURIComponent(state.text)}`);
+					a.setAttribute('class', 'uk-link-reset');
+					a.onclick = event => {
+						event.stopPropagation();
+					};
+					a.innerText = state.text;
+					return a;
+				}
+			});
+
+			this.request(`${base_url}api/tags`, 'GET', (data) => {
+				const allTags = data.tags;
+				const url = `${base_url}api/tags/${this.tid}`;
+				this.request(url, 'GET', data => {
+					this.tags = data.tags;
+					allTags.forEach(t => {
+						const op = new Option(t, t, false, this.tags.indexOf(t) >= 0);
+						$('.tag-select').append(op);
+					});
+					$('.tag-select').on('select2:select', e => {
+						this.onAdd(e);
+					});
+					$('.tag-select').on('select2:unselect', e => {
+						this.onDelete(e);
+					});
+					$('.tag-select').on('change', () => {
+						this.onChange();
+					});
+					$('.tag-select').trigger('change');
+					this.loading = false;
+				});
+			});
+		},
+		onChange() {
+			this.tags = $('.tag-select').select2('data').map(o => o.text);
+		},
+		onAdd(event) {
+			const tag = event.params.data.text;
+			const url = `${base_url}api/admin/tags/${this.tid}/${encodeURIComponent(tag)}`;
+			this.request(url, 'PUT');
+		},
+		onDelete(event) {
+			const tag = event.params.data.text;
+			const url = `${base_url}api/admin/tags/${this.tid}/${encodeURIComponent(tag)}`;
+			this.request(url, 'DELETE');
+		},
+		request(url, method, cb) {
+			$.ajax({
+					url: url,
+					method: method,
+					dataType: 'json'
+				})
+				.done(data => {
+					if (data.success) {
+						if (cb) cb(data);
+					} else {
+						alert('danger', data.error);
+					}
+				})
+				.fail((jqXHR, status) => {
+					alert('danger', `Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+				});
+		}
+	};
+};

public/js/user.js

@@ -1,11 +1,16 @@
-function remove(username) {
-	$.post(base_url + 'api/admin/user/delete/' + username, function(data) {
-		if (data.success) {
-			location.reload();
-		}
-		else {
-			error = data.error;
-			alert('danger', error);
-		}
-	});
-}
+const remove = (username) => {
+	$.ajax({
+			url: `${base_url}api/admin/user/delete/${username}`,
+			type: 'DELETE',
+			dataType: 'json'
+		})
+		.done(data => {
+			if (data.success)
+				location.reload();
+			else
+				alert('danger', data.error);
+		})
+		.fail((jqXHR, status) => {
+			alert('danger', `Failed to delete the user. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+		});
+};

shard.lock

@@ -1,62 +1,82 @@
-version: 1.0
+version: 2.0
 shards:
   ameba:
-    github: crystal-ameba/ameba
+    git: https://github.com/crystal-ameba/ameba.git
     version: 0.12.1
 
   archive:
-    github: hkalexling/archive.cr
+    git: https://github.com/hkalexling/archive.cr.git
     version: 0.4.0
 
   baked_file_system:
-    github: schovi/baked_file_system
-    version: 0.9.8
+    git: https://github.com/schovi/baked_file_system.git
+    version: 0.9.8+git.commit.fb3091b546797fbec3c25dc0e1e2cff60bb9033b
 
   clim:
-    github: at-grandpa/clim
+    git: https://github.com/at-grandpa/clim.git
     version: 0.12.0
 
   db:
-    github: crystal-lang/crystal-db
+    git: https://github.com/crystal-lang/crystal-db.git
     version: 0.9.0
 
   duktape:
-    github: jessedoyle/duktape.cr
+    git: https://github.com/jessedoyle/duktape.cr.git
     version: 0.20.0
 
   exception_page:
-    github: crystal-loot/exception_page
+    git: https://github.com/crystal-loot/exception_page.git
     version: 0.1.4
 
   http_proxy:
-    github: mamantoha/http_proxy
+    git: https://github.com/mamantoha/http_proxy.git
     version: 0.7.1
 
   image_size:
-    github: hkalexling/image_size.cr
-    version: 0.2.0
+    git: https://github.com/hkalexling/image_size.cr.git
+    version: 0.4.0
 
   kemal:
-    github: kemalcr/kemal
-    version: 0.26.1
+    git: https://github.com/kemalcr/kemal.git
+    version: 0.27.0
 
   kemal-session:
-    github: kemalcr/kemal-session
+    git: https://github.com/kemalcr/kemal-session.git
     version: 0.12.1
 
   kilt:
-    github: jeromegn/kilt
+    git: https://github.com/jeromegn/kilt.git
     version: 0.4.0
 
+  koa:
+    git: https://github.com/hkalexling/koa.git
+    version: 0.5.0
+
+  mangadex:
+    git: https://github.com/hkalexling/mangadex.git
+    version: 0.5.0+git.commit.323110c56c2d5134ce4162b27a9b24ec34137fcb
+
+  mg:
+    git: https://github.com/hkalexling/mg.git
+    version: 0.3.0+git.commit.a19417abf03eece80039f89569926cff1ce3a1a3
+
   myhtml:
-    github: kostya/myhtml
+    git: https://github.com/kostya/myhtml.git
     version: 1.5.1
 
+  open_api:
+    git: https://github.com/jreinert/open_api.cr.git
+    version: 1.2.1+git.commit.95e4df2ca10b1fe88b8b35c62a18b06a10267b6c
+
   radix:
-    github: luislavena/radix
+    git: https://github.com/luislavena/radix.git
     version: 0.3.9
 
   sqlite3:
-    github: crystal-lang/crystal-sqlite3
+    git: https://github.com/crystal-lang/crystal-sqlite3.git
     version: 0.16.0
 
+  tallboy:
+    git: https://github.com/epoch/tallboy.git
+    version: 0.9.3
+

shard.yml

@@ -1,5 +1,5 @@
 name: mango
-version: 0.12.3
+version: 0.20.2
 
 authors:
   - Alex Ling <hkalexling@gmail.com>
@@ -8,7 +8,7 @@ targets:
   mango:
     main: src/mango.cr
 
-crystal: 0.34.0
+crystal: 0.35.1
 
 license: MIT
 
@@ -21,6 +21,7 @@ dependencies:
     github: crystal-lang/crystal-sqlite3
   baked_file_system:
     github: schovi/baked_file_system
+    version: 0.9.8+git.commit.fb3091b546797fbec3c25dc0e1e2cff60bb9033b
   archive:
     github: hkalexling/archive.cr
   ameba:
@@ -36,3 +37,11 @@ dependencies:
     github: mamantoha/http_proxy
   image_size:
    github: hkalexling/image_size.cr
+  koa:
+    github: hkalexling/koa
+  tallboy:
+    github: epoch/tallboy
+  mg:
+   github: hkalexling/mg
+  mangadex:
+   github: hkalexling/mangadex

spec/rename_spec.cr

@@ -40,11 +40,6 @@ describe Rule do
     rule.render({"a" => "a", "b" => "b"}).should eq "a"
   end
 
-  it "allows `|` outside of patterns" do
-    rule = Rule.new "hello|world"
-    rule.render({} of String => String).should eq "hello|world"
-  end
-
   it "raises on escaped characters" do
     expect_raises Exception do
       Rule.new "hello/world"
@@ -69,8 +64,13 @@ describe Rule do
     rule.render({} of String => String).should eq "testing"
   end
 
-  it "escapes slash" do
-    rule = Rule.new "{id}"
-    rule.render({"id" => "/hello/world"}).should eq "_hello_world"
+  it "escapes illegal characters" do
+    rule = Rule.new "{a}"
+    rule.render({"a" => "/?<>:*|\"^"}).should eq "_________"
+  end
+
+  it "strips trailing spaces and dots" do
+    rule = Rule.new "hello. world. .."
+    rule.render({} of String => String).should eq "hello. world"
   end
 end

spec/util_spec.cr

@@ -35,6 +35,23 @@ describe "compare_numerically" do
   end
 end
 
+describe "is_supported_file" do
+  it "returns true when the filename has a supported extension" do
+    filename = "manga.cbz"
+    is_supported_file(filename).should eq true
+  end
+
+  it "returns true when the filename does not have a supported extension" do
+    filename = "info.json"
+    is_supported_file(filename).should eq false
+  end
+
+  it "is case insensitive" do
+    filename = "manga.ZiP"
+    is_supported_file(filename).should eq true
+  end
+end
+
 describe "chapter_sort" do
   it "sorts correctly" do
     ary = ["Vol.1 Ch.01", "Vol.1 Ch.02", "Vol.2 Ch. 2.5", "Ch. 3", "Ch.04"]

src/archive.cr

@@ -1,13 +1,13 @@
-require "zip"
+require "compress/zip"
 require "archive"
 
-# A unified class to handle all supported archive formats. It uses the ::Zip
-#   module in crystal standard library if the target file is a zip archive.
-#   Otherwise it uses `archive.cr`.
+# A unified class to handle all supported archive formats. It uses the
+#   Compress::Zip module in crystal standard library if the target file is
+#   a zip archive. Otherwise it uses `archive.cr`.
 class ArchiveFile
   def initialize(@filename : String)
     if [".cbz", ".zip"].includes? File.extname filename
-      @archive_file = Zip::File.new filename
+      @archive_file = Compress::Zip::File.new filename
     else
       @archive_file = Archive::File.new filename
     end
@@ -20,16 +20,16 @@ class ArchiveFile
   end
 
   def close
-    if @archive_file.is_a? Zip::File
-      @archive_file.as(Zip::File).close
+    if @archive_file.is_a? Compress::Zip::File
+      @archive_file.as(Compress::Zip::File).close
     end
   end
 
   # Lists all file entries
   def entries
-    ary = [] of Zip::File::Entry | Archive::Entry
+    ary = [] of Compress::Zip::File::Entry | Archive::Entry
     @archive_file.entries.map do |e|
-      if (e.is_a? Zip::File::Entry && e.file?) ||
+      if (e.is_a? Compress::Zip::File::Entry && e.file?) ||
          (e.is_a? Archive::Entry && e.info.file?)
         ary.push e
       end
@@ -37,8 +37,8 @@ class ArchiveFile
     ary
   end
 
-  def read_entry(e : Zip::File::Entry | Archive::Entry) : Bytes?
-    if e.is_a? Zip::File::Entry
+  def read_entry(e : Compress::Zip::File::Entry | Archive::Entry) : Bytes?
+    if e.is_a? Compress::Zip::File::Entry
       data = nil
       e.open do |io|
         slice = Bytes.new e.uncompressed_size

src/assets/lang_codes.csv

@@ -1,41 +0,0 @@
-Arabic,sa
-Bengali,bd
-Bulgarian,bg
-Burmese,mm
-Catalan,ct
-Chinese (Simp),cn
-Chinese (Trad),hk
-Czech,cz
-Danish,dk
-Dutch,nl
-English,gb
-Filipino,ph
-Finnish,fi
-French,fr
-German,de
-Greek,gr
-Hebrew,il
-Hindi,in
-Hungarian,hu
-Indonesian,id
-Italian,it
-Japanese,jp
-Korean,kr
-Lithuanian,lt
-Malay,my
-Mongolian,mn
-Other,
-Persian,ir
-Polish,pl
-Portuguese (Br),br
-Portuguese (Pt),pt
-Romanian,ro
-Russian,ru
-Serbo-Croatian,rs
-Spanish (Es),es
-Spanish (LATAM),mx
-Swedish,se
-Thai,th
-Turkish,tr
-Ukrainian,ua
-Vietnames,vn

src/config.cr

@@ -5,25 +5,31 @@ class Config
 
   @[YAML::Field(ignore: true)]
   property path : String = ""
+  property host : String = "0.0.0.0"
   property port : Int32 = 9000
   property base_url : String = "/"
   property session_secret : String = "mango-session-secret"
   property library_path : String = File.expand_path "~/mango/library",
     home: true
   property db_path : String = File.expand_path "~/mango/mango.db", home: true
-  @[YAML::Field(key: "scan_interval_minutes")]
-  property scan_interval : Int32 = 5
+  property scan_interval_minutes : Int32 = 5
+  property thumbnail_generation_interval_hours : Int32 = 24
   property log_level : String = "info"
   property upload_path : String = File.expand_path "~/mango/uploads",
     home: true
   property plugin_path : String = File.expand_path "~/mango/plugins",
     home: true
+  property download_timeout_seconds : Int32 = 30
+  property page_margin : Int32 = 30
+  property disable_login = false
+  property default_username = ""
+  property auth_proxy_header_name = ""
   property mangadex = Hash(String, String | Int32).new
 
   @[YAML::Field(ignore: true)]
   @mangadex_defaults = {
     "base_url"               => "https://mangadex.org",
-    "api_url"                => "https://mangadex.org/api",
+    "api_url"                => "https://mangadex.org/api/v2",
     "download_wait_seconds"  => 5,
     "download_retries"       => 4,
     "download_queue_db_path" => File.expand_path("~/mango/queue.db",
@@ -47,9 +53,9 @@ class Config
     cfg_path = File.expand_path path, home: true
     if File.exists? cfg_path
       config = self.from_yaml File.read cfg_path
-      config.preprocess
       config.path = path
       config.fill_defaults
+      config.preprocess
       return config
     end
     puts "The config file #{cfg_path} does not exist. " \
@@ -83,5 +89,20 @@ class Config
     unless base_url.ends_with? "/"
       @base_url += "/"
     end
+    if disable_login && default_username.empty?
+      raise "Login is disabled, but default username is not set. " \
+            "Please set a default username"
+    end
+    unless mangadex["api_url"] =~ /\/v2/
+      # `Logger.default` is not available yet
+      Log.setup :debug
+      Log.warn { "It looks like you are using the deprecated MangaDex API " \
+                 "v1 in your config file. Please update it to either " \
+                 "https://mangadex.org/api/v2 or " \
+                 "https://api.mangadex.org/v2 to suppress this warning." }
+      mangadex["api_url"] = "https://mangadex.org/api/v2"
+    end
+    mangadex["api_url"] = mangadex["api_url"].to_s.rstrip "/"
+    mangadex["base_url"] = mangadex["base_url"].to_s.rstrip "/"
   end
 end

src/handlers/auth_handler.cr

@@ -11,24 +11,25 @@ class AuthHandler < Kemal::Handler
                  "You have to login with proper credentials"
   HEADER_LOGIN_REQUIRED = "Basic realm=\"Login Required\""
 
-  def initialize(@storage : Storage)
-  end
-
   def require_basic_auth(env)
     env.response.status_code = 401
     env.response.headers["WWW-Authenticate"] = HEADER_LOGIN_REQUIRED
     env.response.print AUTH_MESSAGE
-    call_next env
+  end
+
+  def require_auth(env)
+    env.session.string "callback", env.request.path
+    redirect env, "/login"
   end
 
   def validate_token(env)
     token = env.session.string? "token"
-    !token.nil? && @storage.verify_token token
+    !token.nil? && Storage.default.verify_token token
   end
 
   def validate_token_admin(env)
     token = env.session.string? "token"
-    !token.nil? && @storage.verify_admin token
+    !token.nil? && Storage.default.verify_admin token
   end
 
   def validate_auth_header(env)
@@ -49,44 +50,53 @@ class AuthHandler < Kemal::Handler
   def verify_user(value)
     username, password = Base64.decode_string(value[BASIC.size + 1..-1])
       .split(":")
-    @storage.verify_user username, password
+    Storage.default.verify_user username, password
   end
 
-  def handle_opds_auth(env)
-    if validate_token(env) || validate_auth_header(env)
-      call_next env
-    else
-      env.response.status_code = 401
-      env.response.headers["WWW-Authenticate"] = HEADER_LOGIN_REQUIRED
-      env.response.print AUTH_MESSAGE
-    end
-  end
-
-  def handle_auth(env)
+  def call(env)
+    # Skip all authentication if requesting /login, /logout, or a static file
     if request_path_startswith(env, ["/login", "/logout"]) ||
        requesting_static_file env
       return call_next(env)
     end
 
-    unless validate_token env
-      env.session.string "callback", env.request.path
-      return redirect env, "/login"
+    # Check user is logged in
+    if validate_token env
+      # Skip if the request has a valid token
+    elsif Config.current.disable_login
+      # Check default username if login is disabled
+      unless Storage.default.username_exists Config.current.default_username
+        Logger.warn "Default username #{Config.current.default_username} " \
+                    "does not exist"
+        return require_auth env
+      end
+    elsif !Config.current.auth_proxy_header_name.empty?
+      # Check auth proxy if present
+      username = env.request.headers[Config.current.auth_proxy_header_name]?
+      unless username && Storage.default.username_exists username
+        Logger.warn "Header #{Config.current.auth_proxy_header_name} unset " \
+                    "or is not a valid username"
+        return require_auth env
+      end
+    elsif request_path_startswith env, ["/opds"]
+      # Check auth header if requesting an opds page
+      unless validate_auth_header env
+        return require_basic_auth env
+      end
+    else
+      return require_auth env
     end
 
-    if request_path_startswith env, ["/admin", "/api/admin", "/download"]
-      unless validate_token_admin env
+    # Check admin access when requesting an admin page
+    if request_path_startswith env, %w(/admin /api/admin /download)
+      unless is_admin? env
         env.response.status_code = 403
+        return send_error_page "HTTP 403: You are not authorized to visit " \
+                               "#{env.request.path}"
       end
     end
 
+    # Let the request go through if it passes the above checks
     call_next env
   end
-
-  def call(env)
-    if request_path_startswith env, ["/opds"]
-      handle_opds_auth env
-    else
-      handle_auth env
-    end
-  end
 end

src/handlers/static_handler.cr

@@ -23,7 +23,7 @@ class StaticHandler < Kemal::Handler
 
       slice = Bytes.new file.size
       file.read slice
-      return send_file env, slice, file.mime_type
+      return send_file env, slice, MIME.from_filename file.path
     end
     call_next env
   end

src/library/entry.cr

@@ -1,22 +1,23 @@
 require "image_size"
 
 class Entry
-  property zip_path : String, book : Title, title : String,
+  getter zip_path : String, book : Title, title : String,
     size : String, pages : Int32, id : String, encoded_path : String,
     encoded_title : String, mtime : Time, err_msg : String?
 
-  def initialize(@zip_path, @book, storage)
+  def initialize(@zip_path, @book)
+    storage = Storage.default
     @encoded_path = URI.encode @zip_path
     @title = File.basename @zip_path, File.extname @zip_path
     @encoded_title = URI.encode @title
     @size = (File.size @zip_path).humanize_bytes
-    id = storage.get_id @zip_path, false
+    id = storage.get_entry_id @zip_path, File.signature(@zip_path)
     if id.nil?
       id = random_str
-      storage.insert_id({
-        path:     @zip_path,
-        id:       id,
-        is_title: false,
+      storage.insert_entry_id({
+        path:      @zip_path,
+        id:        id,
+        signature: File.signature(@zip_path).to_s,
       })
     end
     @id = id
@@ -47,8 +48,7 @@ class Entry
 
   def to_json(json : JSON::Builder)
     json.object do
-      {% for str in ["zip_path", "title", "size", "id",
-                     "encoded_path", "encoded_title"] %}
+      {% for str in ["zip_path", "title", "size", "id"] %}
         json.field {{str}}, @{{str.id}}
       {% end %}
       json.field "title_id", @book.id
@@ -69,7 +69,7 @@ class Entry
 
   def cover_url
     return "#{Config.current.base_url}img/icon.png" if @err_msg
-    url = "#{Config.current.base_url}api/page/#{@book.id}/#{@id}/1"
+    url = "#{Config.current.base_url}api/cover/#{@book.id}/#{@id}"
     TitleInfo.new @book.dir do |info|
       info_url = info.entry_cover_url[@title]?
       unless info_url.nil? || info_url.empty?
@@ -118,8 +118,8 @@ class Entry
             "width"  => size.width,
             "height" => size.height,
           }
-        rescue
-          Logger.warn "Failed to read page #{i} of entry #{@id}"
+        rescue e
+          Logger.warn "Failed to read page #{i} of entry #{zip_path}. #{e}"
           sizes << {"width" => 1000_i32, "height" => 1000_i32}
         end
       end
@@ -207,4 +207,33 @@ class Entry
   def started?(username)
     load_progress(username) > 0
   end
+
+  def generate_thumbnail : Image?
+    return if @err_msg
+
+    img = read_page(1).not_nil!
+    begin
+      size = ImageSize.get img.data
+      if size.height > size.width
+        thumbnail = ImageSize.resize img.data, width: 200
+      else
+        thumbnail = ImageSize.resize img.data, height: 300
+      end
+      img.data = thumbnail
+      img.size = thumbnail.size
+      unless img.mime == "image/webp"
+        # image_size.cr resizes non-webp images to jpg
+        img.mime = "image/jpeg"
+      end
+      Storage.default.save_thumbnail @id, img
+    rescue e
+      Logger.warn "Failed to generate thumbnail for file #{@zip_path}. #{e}"
+    end
+
+    img
+  end
+
+  def get_thumbnail : Image?
+    Storage.default.get_thumbnail @id
+  end
 end

src/library/library.cr

@@ -1,5 +1,5 @@
 class Library
-  property dir : String, title_ids : Array(String), scan_interval : Int32,
+  getter dir : String, title_ids : Array(String),
     title_hash : Hash(String, Title)
 
   use_default
@@ -8,20 +8,38 @@ class Library
     register_mime_types
 
     @dir = Config.current.library_path
-    @scan_interval = Config.current.scan_interval
     # explicitly initialize @titles to bypass the compiler check. it will
     #   be filled with actual Titles in the `scan` call below
     @title_ids = [] of String
     @title_hash = {} of String => Title
 
-    return scan if @scan_interval < 1
-    spawn do
-      loop do
-        start = Time.local
-        scan
-        ms = (Time.local - start).total_milliseconds
-        Logger.info "Scanned #{@title_ids.size} titles in #{ms}ms"
-        sleep @scan_interval * 60
+    @entries_count = 0
+    @thumbnails_count = 0
+
+    scan_interval = Config.current.scan_interval_minutes
+    if scan_interval < 1
+      scan
+    else
+      spawn do
+        loop do
+          start = Time.local
+          scan
+          ms = (Time.local - start).total_milliseconds
+          Logger.info "Scanned #{@title_ids.size} titles in #{ms}ms"
+          sleep scan_interval.minutes
+        end
+      end
+    end
+
+    thumbnail_interval = Config.current.thumbnail_generation_interval_hours
+    unless thumbnail_interval < 1
+      spawn do
+        loop do
+          # Wait for scan to complete (in most cases)
+          sleep 1.minutes
+          generate_thumbnails
+          sleep thumbnail_interval.hours
+        end
       end
     end
   end
@@ -40,29 +58,8 @@ class Library
       end
     end
 
-    # This is a hack to bypass a compiler bug
-    ary = titles
-
-    case opt.not_nil!.method
-    when .time_modified?
-      ary.sort! { |a, b| (a.mtime <=> b.mtime).or \
-        compare_numerically a.title, b.title }
-    when .progress?
-      ary.sort! do |a, b|
-        (a.load_percentage(username) <=> b.load_percentage(username)).or \
-          compare_numerically a.title, b.title
-      end
-    else
-      unless opt.method.auto?
-        Logger.warn "Unknown sorting method #{opt.not_nil!.method}. Using " \
-                    "Auto instead"
-      end
-      ary.sort! { |a, b| compare_numerically a.title, b.title }
-    end
-
-    ary.reverse! unless opt.not_nil!.ascend
-
-    ary
+    # Helper function from src/util/util.cr
+    sort_titles titles, opt.not_nil!, username
   end
 
   def deep_titles
@@ -99,7 +96,7 @@ class Library
       .select { |fn| !fn.starts_with? "." }
       .map { |fn| File.join @dir, fn }
       .select { |path| File.directory? path }
-      .map { |path| Title.new path, "", storage, self }
+      .map { |path| Title.new path, "" }
       .select { |title| !(title.entries.empty? && title.titles.empty?) }
       .sort { |a, b| a.title <=> b.title }
       .tap { |_| @title_ids.clear }
@@ -112,6 +109,7 @@ class Library
     storage.close
 
     Logger.debug "Scan completed"
+    Storage.default.mark_unavailable
   end
 
   def get_continue_reading_entries(username)
@@ -194,4 +192,50 @@ class Library
       .sample(ENTRIES_IN_HOME_SECTIONS)
       .shuffle
   end
+
+  def thumbnail_generation_progress
+    return 0 if @entries_count == 0
+    @thumbnails_count / @entries_count
+  end
+
+  def generate_thumbnails
+    if @thumbnails_count > 0
+      Logger.debug "Thumbnail generation in progress"
+      return
+    end
+
+    Logger.info "Starting thumbnail generation"
+    entries = deep_titles.map(&.deep_entries).flatten.reject &.err_msg
+    @entries_count = entries.size
+    @thumbnails_count = 0
+
+    # Report generation progress regularly
+    spawn do
+      loop do
+        unless @thumbnails_count == 0
+          Logger.debug "Thumbnail generation progress: " \
+                       "#{(thumbnail_generation_progress * 100).round 1}%"
+        end
+        # Generation is completed. We reset the count to 0 to allow subsequent
+        #   calls to the function, and break from the loop to stop the progress
+        #   report fiber
+        if thumbnail_generation_progress.to_i == 1
+          @thumbnails_count = 0
+          break
+        end
+        sleep 10.seconds
+      end
+    end
+
+    entries.each do |e|
+      unless e.get_thumbnail
+        e.generate_thumbnail
+        # Sleep after each generation to minimize the impact on disk IO
+        #   and CPU
+        sleep 1.seconds
+      end
+      @thumbnails_count += 1
+    end
+    Logger.info "Thumbnail generation finished"
+  end
 end

src/library/title.cr

@@ -1,19 +1,22 @@
 require "../archive"
 
 class Title
-  property dir : String, parent_id : String, title_ids : Array(String),
+  getter dir : String, parent_id : String, title_ids : Array(String),
     entries : Array(Entry), title : String, id : String,
-    encoded_title : String, mtime : Time
+    encoded_title : String, mtime : Time, signature : UInt64
 
-  def initialize(@dir : String, @parent_id, storage,
-                 @library : Library)
-    id = storage.get_id @dir, true
+  @entry_display_name_cache : Hash(String, String)?
+
+  def initialize(@dir : String, @parent_id)
+    storage = Storage.default
+    @signature = Dir.signature dir
+    id = storage.get_title_id dir, signature
     if id.nil?
       id = random_str
-      storage.insert_id({
-        path:     @dir,
-        id:       id,
-        is_title: true,
+      storage.insert_title_id({
+        path:      dir,
+        id:        id,
+        signature: signature.to_s,
       })
     end
     @id = id
@@ -27,26 +30,26 @@ class Title
       next if fn.starts_with? "."
       path = File.join dir, fn
       if File.directory? path
-        title = Title.new path, @id, storage, library
+        title = Title.new path, @id
         next if title.entries.size == 0 && title.titles.size == 0
-        @library.title_hash[title.id] = title
+        Library.default.title_hash[title.id] = title
         @title_ids << title.id
         next
       end
-      if [".zip", ".cbz", ".rar", ".cbr"].includes? File.extname path
-        entry = Entry.new path, self, storage
+      if is_supported_file path
+        entry = Entry.new path, self
         @entries << entry if entry.pages > 0 || entry.err_msg
       end
     end
 
     mtimes = [@mtime]
-    mtimes += @title_ids.map { |e| @library.title_hash[e].mtime }
+    mtimes += @title_ids.map { |e| Library.default.title_hash[e].mtime }
     mtimes += @entries.map { |e| e.mtime }
     @mtime = mtimes.max
 
     @title_ids.sort! do |a, b|
-      compare_numerically @library.title_hash[a].title,
-        @library.title_hash[b].title
+      compare_numerically Library.default.title_hash[a].title,
+        Library.default.title_hash[b].title
     end
     sorter = ChapterSorter.new @entries.map { |e| e.title }
     @entries.sort! do |a, b|
@@ -56,9 +59,10 @@ class Title
 
   def to_json(json : JSON::Builder)
     json.object do
-      {% for str in ["dir", "title", "id", "encoded_title"] %}
+      {% for str in ["dir", "title", "id"] %}
         json.field {{str}}, @{{str.id}}
       {% end %}
+      json.field "signature" { json.number @signature }
       json.field "display_name", display_name
       json.field "cover_url", cover_url
       json.field "mtime" { json.number @mtime.to_unix }
@@ -82,7 +86,7 @@ class Title
   end
 
   def titles
-    @title_ids.map { |tid| @library.get_title! tid }
+    @title_ids.map { |tid| Library.default.get_title! tid }
   end
 
   # Get all entries, including entries in nested titles
@@ -100,15 +104,37 @@ class Title
     ary = [] of Title
     tid = @parent_id
     while !tid.empty?
-      title = @library.get_title! tid
+      title = Library.default.get_title! tid
       ary << title
       tid = title.parent_id
     end
     ary.reverse
   end
 
-  def size
-    @entries.size + @title_ids.size
+  # Returns a string the describes the content of the title
+  #   e.g., - 3 titles and 1 entry
+  #         - 4 entries
+  #         - 1 title
+  def content_label
+    ary = [] of String
+    tsize = titles.size
+    esize = entries.size
+
+    ary << "#{tsize} #{tsize > 1 ? "titles" : "title"}" if tsize > 0
+    ary << "#{esize} #{esize > 1 ? "entries" : "entry"}" if esize > 0
+    ary.join " and "
+  end
+
+  def tags
+    Storage.default.get_title_tags @id
+  end
+
+  def add_tag(tag)
+    Storage.default.add_tag @id, tag
+  end
+
+  def delete_tag(tag)
+    Storage.default.delete_tag @id, tag
   end
 
   def get_entry(eid)
@@ -129,13 +155,17 @@ class Title
   end
 
   def display_name(entry_name)
-    dn = entry_name
-    TitleInfo.new @dir do |info|
-      info_dn = info.entry_display_name[entry_name]?
-      unless info_dn.nil? || info_dn.empty?
-        dn = info_dn
+    unless @entry_display_name_cache
+      TitleInfo.new @dir do |info|
+        @entry_display_name_cache = info.entry_display_name
       end
     end
+
+    dn = entry_name
+    info_dn = @entry_display_name_cache.not_nil![entry_name]?
+    unless info_dn.nil? || info_dn.empty?
+      dn = info_dn
+    end
     dn
   end
 

src/library/types.cr

@@ -57,6 +57,16 @@ struct Image
 
   def initialize(@data, @mime, @filename, @size)
   end
+
+  def self.from_db(res : DB::ResultSet)
+    img = Image.allocate
+    res.read String
+    img.data = res.read Bytes
+    img.filename = res.read String
+    img.mime = res.read String
+    img.size = res.read Int32
+    img
+  end
 end
 
 class TitleInfo

src/logger.cr

@@ -6,29 +6,17 @@ class Logger
   SEVERITY_IDS = [0, 4, 5, 2, 3]
   COLORS       = [:light_cyan, :light_red, :red, :light_yellow, :light_magenta]
 
+  getter raw_log = Log.for ""
+
   @@severity : Log::Severity = :info
 
   use_default
 
   def initialize
-    level = Config.current.log_level
-    {% begin %}
-      case level.downcase
-      when "off"
-        @@severity = :none
-        {% for lvl, i in LEVELS %}
-        when {{lvl}}
-          @@severity = Log::Severity.new SEVERITY_IDS[{{i}}]
-        {% end %}
-      else
-        raise "Unknown log level #{level}"
-      end
-    {% end %}
-
-    @log = Log.for("")
-
+    @@severity = Logger.get_severity
     @backend = Log::IOBackend.new
-    @backend.formatter = ->(entry : Log::Entry, io : IO) do
+
+    format_proc = ->(entry : Log::Entry, io : IO) do
       color = :default
       {% begin %}
         case entry.severity.label.to_s().downcase
@@ -45,12 +33,32 @@ class Logger
       io << entry.message
     end
 
-    Log.builder.bind "*", @@severity, @backend
+    @backend.formatter = Log::Formatter.new &format_proc
+    Log.setup @@severity, @backend
+  end
+
+  def self.get_severity(level = "") : Log::Severity
+    if level.empty?
+      level = Config.current.log_level
+    end
+    {% begin %}
+      case level.downcase
+      when "off"
+        return Log::Severity::None
+        {% for lvl, i in LEVELS %}
+          when {{lvl}}
+          return Log::Severity.new SEVERITY_IDS[{{i}}]
+        {% end %}
+      else
+        raise "Unknown log level #{level}"
+      end
+    {% end %}
   end
 
   # Ignores @@severity and always log msg
   def log(msg)
-    @backend.write Log::Entry.new "", Log::Severity::None, msg, nil
+    @backend.write Log::Entry.new "", Log::Severity::None, msg,
+      Log::Metadata.empty, nil
   end
 
   def self.log(msg)
@@ -59,7 +67,7 @@ class Logger
 
   {% for lvl in LEVELS %}
     def {{lvl.id}}(msg)
-      @log.{{lvl.id}} { msg }
+      raw_log.{{lvl.id}} { msg }
     end
     def self.{{lvl.id}}(msg)
       default.not_nil!.{{lvl.id}} msg

src/mangadex/api.cr

@@ -1,217 +0,0 @@
-require "json"
-require "csv"
-require "../rename"
-
-macro string_properties(names)
-  {% for name in names %}
-    property {{name.id}} = ""
-  {% end %}
-end
-
-macro parse_strings_from_json(names)
-  {% for name in names %}
-    @{{name.id}} = obj[{{name}}].as_s
-  {% end %}
-end
-
-macro properties_to_hash(names)
-  {
-    {% for name in names %}
-      "{{name.id}}" => @{{name.id}}.to_s,
-    {% end %}
-  }
-end
-
-module MangaDex
-  class Chapter
-    string_properties ["lang_code", "title", "volume", "chapter"]
-    property manga : Manga
-    property time = Time.local
-    property id : String
-    property full_title = ""
-    property language = ""
-    property pages = [] of {String, String} # filename, url
-    property groups = [] of {Int32, String} # group_id, group_name
-
-    def initialize(@id, json_obj : JSON::Any, @manga,
-                   lang : Hash(String, String))
-      self.parse_json json_obj, lang
-    end
-
-    def to_info_json
-      JSON.build do |json|
-        json.object do
-          {% for name in ["id", "title", "volume", "chapter",
-                          "language", "full_title"] %}
-          json.field {{name}}, @{{name.id}}
-        {% end %}
-          json.field "time", @time.to_unix.to_s
-          json.field "manga_title", @manga.title
-          json.field "manga_id", @manga.id
-          json.field "groups" do
-            json.object do
-              @groups.each do |gid, gname|
-                json.field gname, gid
-              end
-            end
-          end
-        end
-      end
-    end
-
-    def parse_json(obj, lang)
-      parse_strings_from_json ["lang_code", "title", "volume",
-                               "chapter"]
-      language = lang[@lang_code]?
-      @language = language if language
-      @time = Time.unix obj["timestamp"].as_i
-      suffixes = ["", "_2", "_3"]
-      suffixes.each do |s|
-        gid = obj["group_id#{s}"].as_i
-        next if gid == 0
-        gname = obj["group_name#{s}"].as_s
-        @groups << {gid, gname}
-      end
-
-      rename_rule = Rename::Rule.new \
-        Config.current.mangadex["chapter_rename_rule"].to_s
-      @full_title = rename rename_rule
-    rescue e
-      raise "failed to parse json: #{e}"
-    end
-
-    def rename(rule : Rename::Rule)
-      hash = properties_to_hash ["id", "title", "volume", "chapter",
-                                 "lang_code", "language", "pages"]
-      hash["groups"] = @groups.map { |g| g[1] }.join ","
-      rule.render hash
-    end
-  end
-
-  class Manga
-    string_properties ["cover_url", "description", "title", "author", "artist"]
-    property chapters = [] of Chapter
-    property id : String
-
-    def initialize(@id, json_obj : JSON::Any)
-      self.parse_json json_obj
-    end
-
-    def to_info_json(with_chapters = true)
-      JSON.build do |json|
-        json.object do
-          {% for name in ["id", "title", "description", "author", "artist",
-                          "cover_url"] %}
-            json.field {{name}}, @{{name.id}}
-          {% end %}
-          if with_chapters
-            json.field "chapters" do
-              json.array do
-                @chapters.each do |c|
-                  json.raw c.to_info_json
-                end
-              end
-            end
-          end
-        end
-      end
-    end
-
-    def parse_json(obj)
-      parse_strings_from_json ["cover_url", "description", "title", "author",
-                               "artist"]
-    rescue e
-      raise "failed to parse json: #{e}"
-    end
-
-    def rename(rule : Rename::Rule)
-      rule.render properties_to_hash ["id", "title", "author", "artist"]
-    end
-  end
-
-  class API
-    use_default
-
-    def initialize
-      @base_url = Config.current.mangadex["api_url"].to_s ||
-                  "https://mangadex.org/api/"
-      @lang = {} of String => String
-      CSV.each_row {{read_file "src/assets/lang_codes.csv"}} do |row|
-        @lang[row[1]] = row[0]
-      end
-    end
-
-    def get(url)
-      headers = HTTP::Headers{
-        "User-agent" => "Mangadex.cr",
-      }
-      res = HTTP::Client.get url, headers
-      raise "Failed to get #{url}. [#{res.status_code}] " \
-            "#{res.status_message}" if !res.success?
-      JSON.parse res.body
-    end
-
-    def get_manga(id)
-      obj = self.get File.join @base_url, "manga/#{id}"
-      if obj["status"]? != "OK"
-        raise "Expecting `OK` in the `status` field. Got `#{obj["status"]?}`"
-      end
-      begin
-        manga = Manga.new id, obj["manga"]
-        obj["chapter"].as_h.map do |k, v|
-          chapter = Chapter.new k, v, manga, @lang
-          manga.chapters << chapter
-        end
-        manga
-      rescue
-        raise "Failed to parse JSON"
-      end
-    end
-
-    def get_chapter(chapter : Chapter)
-      obj = self.get File.join @base_url, "chapter/#{chapter.id}"
-      if obj["status"]? == "external"
-        raise "This chapter is hosted on an external site " \
-              "#{obj["external"]?}, and Mango does not support " \
-              "external chapters."
-      end
-      if obj["status"]? != "OK"
-        raise "Expecting `OK` in the `status` field. Got `#{obj["status"]?}`"
-      end
-      begin
-        server = obj["server"].as_s
-        hash = obj["hash"].as_s
-        chapter.pages = obj["page_array"].as_a.map do |fn|
-          {
-            fn.as_s,
-            "#{server}#{hash}/#{fn.as_s}",
-          }
-        end
-      rescue
-        raise "Failed to parse JSON"
-      end
-    end
-
-    def get_chapter(id : String)
-      obj = self.get File.join @base_url, "chapter/#{id}"
-      if obj["status"]? == "external"
-        raise "This chapter is hosted on an external site " \
-              "#{obj["external"]?}, and Mango does not support " \
-              "external chapters."
-      end
-      if obj["status"]? != "OK"
-        raise "Expecting `OK` in the `status` field. Got `#{obj["status"]?}`"
-      end
-      manga_id = ""
-      begin
-        manga_id = obj["manga_id"].as_i.to_s
-      rescue
-        raise "Failed to parse JSON"
-      end
-      manga = self.get_manga manga_id
-      chapter = manga.chapters.find { |c| c.id == id }.not_nil!
-      self.get_chapter chapter
-      chapter
-    end
-  end
-end

src/mangadex/downloader.cr

@@ -1,12 +1,14 @@
-require "./api"
-require "zip"
+require "mangadex"
+require "compress/zip"
+require "../rename"
+require "./ext"
 
 module MangaDex
   class PageJob
     property success = false
     property url : String
     property filename : String
-    property writer : Zip::Writer
+    property writer : Compress::Zip::Writer
     property tries_remaning : Int32
 
     def initialize(@url, @filename, @writer, @tries_remaning)
@@ -21,7 +23,7 @@ module MangaDex
     use_default
 
     def initialize
-      @api = API.default
+      @client = Client.from_config
       super
     end
 
@@ -46,7 +48,7 @@ module MangaDex
       @downloading = true
       @queue.set_status Queue::JobStatus::Downloading, job
       begin
-        chapter = @api.get_chapter(job.id)
+        chapter = @client.chapter job.id
       rescue e
         Logger.error e
         @queue.set_status Queue::JobStatus::Error, job
@@ -69,12 +71,12 @@ module MangaDex
       # Find the number of digits needed to store the number of pages
       len = Math.log10(chapter.pages.size).to_i + 1
 
-      writer = Zip::Writer.new zip_path
+      writer = Compress::Zip::Writer.new zip_path
       # Create a buffered channel. It works as an FIFO queue
       channel = Channel(PageJob).new chapter.pages.size
       spawn do
-        chapter.pages.each_with_index do |tuple, i|
-          fn, url = tuple
+        chapter.pages.each_with_index do |url, i|
+          fn = Path.new(URI.parse(url).path).basename
           ext = File.extname fn
           fn = "#{i.to_s.rjust len, '0'}#{ext}"
           page_job = PageJob.new url, fn, writer, @retries
@@ -91,6 +93,7 @@ module MangaDex
           end
 
           channel.send page_job
+          break unless @queue.exists? job
         end
       end
 
@@ -98,6 +101,9 @@ module MangaDex
         page_jobs = [] of PageJob
         chapter.pages.size.times do
           page_job = channel.receive
+
+          break unless @queue.exists? job
+
           Logger.debug "[#{page_job.success ? "success" : "failed"}] " \
                        "#{page_job.url}"
           page_jobs << page_job
@@ -110,6 +116,13 @@ module MangaDex
             Logger.error msg
           end
         end
+
+        unless @queue.exists? job
+          Logger.debug "Download cancelled"
+          @downloading = false
+          next
+        end
+
         fail_count = page_jobs.count { |j| !j.success }
         Logger.debug "Download completed. " \
                      "#{fail_count}/#{page_jobs.size} failed"

src/mangadex/ext.cr

@@ -0,0 +1,60 @@
+private macro properties_to_hash(names)
+  {
+    {% for name in names %}
+      "{{name.id}}" => {{name.id}}.to_s,
+    {% end %}
+  }
+end
+
+# Monkey-patch the structures in the `mangadex` shard to suit our needs
+module MangaDex
+  struct Client
+    @@group_cache = {} of String => Group
+
+    def self.from_config : Client
+      self.new base_url: Config.current.mangadex["base_url"].to_s,
+        api_url: Config.current.mangadex["api_url"].to_s
+    end
+  end
+
+  struct Manga
+    def rename(rule : Rename::Rule)
+      rule.render properties_to_hash %w(id title author artist)
+    end
+
+    def to_info_json
+      hash = JSON.parse(to_json).as_h
+      _chapters = chapters.map do |c|
+        JSON.parse c.to_info_json
+      end
+      hash["chapters"] = JSON::Any.new _chapters
+      hash.to_json
+    end
+  end
+
+  struct Chapter
+    def rename(rule : Rename::Rule)
+      hash = properties_to_hash %w(id title volume chapter lang_code language)
+      hash["groups"] = groups.map(&.name).join ","
+      rule.render hash
+    end
+
+    def full_title
+      rule = Rename::Rule.new \
+        Config.current.mangadex["chapter_rename_rule"].to_s
+      rename rule
+    end
+
+    def to_info_json
+      hash = JSON.parse(to_json).as_h
+      hash["language"] = JSON::Any.new language
+      _groups = {} of String => JSON::Any
+      groups.each do |g|
+        _groups[g.name] = JSON::Any.new g.id
+      end
+      hash["groups"] = JSON::Any.new _groups
+      hash["full_title"] = JSON::Any.new full_title
+      hash.to_json
+    end
+  end
+end

src/mango.cr

@@ -3,11 +3,12 @@ require "./queue"
 require "./server"
 require "./main_fiber"
 require "./mangadex/*"
+require "./plugin/*"
 require "option_parser"
 require "clim"
-require "./plugin/*"
+require "tallboy"
 
-MANGO_VERSION = "0.12.3"
+MANGO_VERSION = "0.20.2"
 
 # From http://www.network-science.de/ascii/
 BANNER = %{
@@ -53,11 +54,21 @@ class CLI < Clim
       ARGV.clear
 
       Config.load(opts.config).set_current
+
+      # Initialize main components
+      Storage.default
+      Queue.default
+      Library.default
       MangaDex::Downloader.default
       Plugin::Downloader.default
 
       spawn do
-        Server.new.start
+        begin
+          Server.new.start
+        rescue e
+          Logger.fatal e
+          Process.exit 1
+        end
       end
 
       MainFiber.start_and_block
@@ -105,18 +116,13 @@ class CLI < Clim
               password.not_nil!, opts.admin
           when "list"
             users = storage.list_users
-            name_length = users.map(&.[0].size).max? || 0
-            l_cell_width = ["username".size, name_length].max
-            r_cell_width = "admin access".size
-            header = " #{"username".ljust l_cell_width} | admin access "
-            puts "-" * header.size
-            puts header
-            puts "-" * header.size
-            users.each do |name, admin|
-              puts " #{name.ljust l_cell_width} | " \
-                   "#{admin.to_s.ljust r_cell_width} "
+            table = Tallboy.table do
+              header ["username", "admin access"]
+              users.each do |name, admin|
+                row [name, admin]
+              end
             end
-            puts "-" * header.size
+            puts table
           when nil
             puts opts.help_string
           else

src/plugin/downloader.cr

@@ -53,7 +53,7 @@ class Plugin
         end
 
         zip_path = File.join manga_dir, "#{chapter_title}.cbz.part"
-        writer = Zip::Writer.new zip_path
+        writer = Compress::Zip::Writer.new zip_path
       rescue e
         @queue.set_status Queue::JobStatus::Error, job
         unless e.message.nil?
@@ -66,6 +66,8 @@ class Plugin
       fail_count = 0
 
       while page = plugin.next_page
+        break unless @queue.exists? job
+
         fn = process_filename page["filename"].as_s
         url = page["url"].as_s
         headers = HTTP::Headers.new
@@ -109,6 +111,12 @@ class Plugin
         end
       end
 
+      unless @queue.exists? job
+        Logger.debug "Download cancelled"
+        @downloading = false
+        return
+      end
+
       Logger.debug "Download completed. #{fail_count}/#{pages} failed"
       writer.close
       filename = File.join File.dirname(zip_path), File.basename(zip_path,

src/plugin/plugin.cr

@@ -257,6 +257,48 @@ class Plugin
     end
     sbx.put_prop_string -2, "get"
 
+    sbx.push_proc LibDUK::VARARGS do |ptr|
+      env = Duktape::Sandbox.new ptr
+      url = env.require_string 0
+      body = env.require_string 1
+
+      headers = HTTP::Headers.new
+
+      if env.get_top == 3
+        env.enum 2, LibDUK::Enum::OwnPropertiesOnly
+        while env.next -1, true
+          key = env.require_string -2
+          val = env.require_string -1
+          headers.add key, val
+          env.pop_2
+        end
+      end
+
+      res = HTTP::Client.post url, headers, body
+
+      env.push_object
+
+      env.push_int res.status_code
+      env.put_prop_string -2, "status_code"
+
+      env.push_string res.body
+      env.put_prop_string -2, "body"
+
+      env.push_object
+      res.headers.each do |k, v|
+        if v.size == 1
+          env.push_string v[0]
+        else
+          env.push_string v.join ","
+        end
+        env.put_prop_string -2, k
+      end
+      env.put_prop_string -2, "headers"
+
+      env.call_success
+    end
+    sbx.put_prop_string -2, "post"
+
     sbx.push_proc 2 do |ptr|
       env = Duktape::Sandbox.new ptr
       html = env.require_string 0

src/queue.cr

@@ -196,6 +196,21 @@ class Queue
     self.delete job.id
   end
 
+  def exists?(id : String)
+    res = false
+    MainFiber.run do
+      DB.open "sqlite3://#{@path}" do |db|
+        res = db.query_one "select count(*) from queue where id = (?)", id,
+          as: Bool
+      end
+    end
+    res
+  end
+
+  def exists?(job : Job)
+    self.exists? job.id
+  end
+
   def delete_status(status : JobStatus)
     MainFiber.run do
       DB.open "sqlite3://#{@path}" do |db|

src/rename.cr

@@ -139,9 +139,13 @@ module Rename
       post_process str
     end
 
+    # Post-processes the generated file/folder name
+    #   - Handles the rare case where the string is `..`
+    #   - Removes trailing spaces and periods
+    #   - Replace illegal characters with `_`
     private def post_process(str)
       return "_" if str == ".."
-      str.gsub "/", "_"
+      str.rstrip(" .").gsub /[\/?<>\\:*|"^]/, "_"
     end
   end
 end

src/routes/admin.cr

@@ -1,13 +1,14 @@
-require "./router"
-
-class AdminRouter < Router
+struct AdminRouter
   def initialize
     get "/admin" do |env|
+      storage = Storage.default
+      missing_count = storage.missing_titles.size +
+                      storage.missing_entries.size
       layout "admin"
     end
 
     get "/admin/user" do |env|
-      users = @context.storage.list_users
+      users = Storage.default.list_users
       username = get_username env
       layout "user"
     end
@@ -32,11 +33,11 @@ class AdminRouter < Router
       #   would not contain `admin`
       admin = !env.params.body["admin"]?.nil?
 
-      @context.storage.new_user username, password, admin
+      Storage.default.new_user username, password, admin
 
       redirect env, "/admin/user"
     rescue e
-      @context.error e
+      Logger.error e
       redirect_url = URI.new \
         path: "/admin/user/edit",
         query: hash_to_query({"error" => e.message})
@@ -51,12 +52,12 @@ class AdminRouter < Router
       admin = !env.params.body["admin"]?.nil?
       original_username = env.params.url["original_username"]
 
-      @context.storage.update_user \
+      Storage.default.update_user \
         original_username, username, password, admin
 
       redirect env, "/admin/user"
     rescue e
-      @context.error e
+      Logger.error e
       redirect_url = URI.new \
         path: "/admin/user/edit",
         query: hash_to_query({"username" => original_username, \
@@ -68,5 +69,9 @@ class AdminRouter < Router
       mangadex_base_url = Config.current.mangadex["base_url"]
       layout "download-manager"
     end
+
+    get "/admin/missing" do |env|
+      layout "missing-items"
+    end
   end
 end

src/routes/api.cr

@@ -1,16 +1,199 @@
-require "./router"
 require "../mangadex/*"
 require "../upload"
+require "koa"
+
+struct APIRouter
+  @@api_json : String?
+
+  API_VERSION = "0.1.0"
+
+  macro s(fields)
+    {
+      {% for field in fields %}
+        {{field}} => "string",
+      {% end %}
+    }
+  end
 
-class APIRouter < Router
   def initialize
+    Koa.init "Mango API", version: API_VERSION, desc: <<-MD
+    # A Word of Caution
+
+    This API was designed for internal use only, and the design doesn't comply with the resources convention of a RESTful API. Because of this, most of the API endpoints listed here will soon be updated and removed in future versions of Mango, so use them at your own risk!
+
+    # Authentication
+
+    All endpoints require authentication. After logging in, your session ID would be stored as a cookie named `mango-sessid-#{Config.current.port}`, which can be used to authenticate the API access. Note that all admin API endpoints (`/api/admin/...`) require the logged-in user to have admin access.
+
+    # Terminologies
+
+    - Entry: An entry is a `cbz`/`cbr` file in your library. Depending on how you organize your manga collection, an entry can contain a chapter, a volume or even an entire manga.
+    - Title: A title contains a list of entries and optionally some sub-titles. For example, you can have a title to store a manga, and it contains a list of sub-titles representing the volumes in the manga. Each sub-title would then contain a list of entries representing the chapters in the volume.
+    - Library: The library is a collection of top-level titles, and it does not contain entries (though the titles do). A Mango instance can only have one library.
+    MD
+
+    Koa.cookie_auth "cookie", "mango-sessid-#{Config.current.port}"
+    Koa.global_tag "admin", desc: <<-MD
+      These are the admin endpoints only accessible for users with admin access. A non-admin user will get HTTP 403 when calling the endpoints.
+    MD
+
+    Koa.binary "binary", desc: "A binary file"
+    Koa.array "entryAry", "$entry", desc: "An array of entries"
+    Koa.array "titleAry", "$title", desc: "An array of titles"
+    Koa.array "strAry", "string", desc: "An array of strings"
+
+    entry_schema = {
+      "pages" => "integer",
+      "mtime" => "integer",
+    }.merge s %w(zip_path title size id title_id display_name cover_url)
+    Koa.object "entry", entry_schema, desc: "An entry in a book"
+
+    title_schema = {
+      "mtime"   => "integer",
+      "entries" => "$entryAry",
+      "titles"  => "$titleAry",
+      "parents" => "$strAry",
+    }.merge s %w(dir title id display_name cover_url)
+    Koa.object "title", title_schema,
+      desc: "A manga title (a collection of entries and sub-titles)"
+
+    Koa.object "library", {
+      "dir"    => "string",
+      "titles" => "$titleAry",
+    }, desc: "A library containing a list of top-level titles"
+
+    Koa.object "scanResult", {
+      "milliseconds" => "integer",
+      "titles"       => "integer",
+    }
+
+    Koa.object "progressResult", {
+      "progress" => "number",
+    }
+
+    Koa.object "result", {
+      "success" => "boolean",
+      "error"   => "string?",
+    }
+
+    mc_schema = {
+      "groups" => "object",
+    }.merge s %w(id title volume chapter language full_title time manga_title manga_id)
+    Koa.object "mangadexChapter", mc_schema, desc: "A MangaDex chapter"
+
+    Koa.array "chapterAry", "$mangadexChapter"
+
+    mm_schema = {
+      "chapers" => "$chapterAry",
+    }.merge s %w(id title description author artist cover_url)
+    Koa.object "mangadexManga", mm_schema, desc: "A MangaDex manga"
+
+    Koa.object "chaptersObj", {
+      "chapters" => "$chapterAry",
+    }
+
+    Koa.object "successFailCount", {
+      "success" => "integer",
+      "fail"    => "integer",
+    }
+
+    job_schema = {
+      "pages"         => "integer",
+      "success_count" => "integer",
+      "fail_count"    => "integer",
+      "time"          => "integer",
+    }.merge s %w(id manga_id title manga_title status_message status)
+    Koa.object "job", job_schema, desc: "A download job in the queue"
+
+    Koa.array "jobAry", "$job"
+
+    Koa.object "jobs", {
+      "success" => "boolean",
+      "paused"  => "boolean",
+      "jobs"    => "$jobAry",
+    }
+
+    Koa.object "binaryUpload", {
+      "file" => "$binary",
+    }
+
+    Koa.object "pluginListBody", {
+      "plugin" => "string",
+      "query"  => "string",
+    }
+
+    Koa.object "pluginChapter", {
+      "id"    => "string",
+      "title" => "string",
+    }
+
+    Koa.array "pluginChapterAry", "$pluginChapter"
+
+    Koa.object "pluginList", {
+      "success"  => "boolean",
+      "chapters" => "$pluginChapterAry?",
+      "title"    => "string?",
+      "error"    => "string?",
+    }
+
+    Koa.object "pluginDownload", {
+      "plugin"   => "string",
+      "title"    => "string",
+      "chapters" => "$pluginChapterAry",
+    }
+
+    Koa.object "dimension", {
+      "width"  => "integer",
+      "height" => "integer",
+    }
+
+    Koa.array "dimensionAry", "$dimension"
+
+    Koa.object "dimensionResult", {
+      "success"    => "boolean",
+      "dimensions" => "$dimensionAry?",
+      "margin"     => "number",
+      "error"      => "string?",
+    }
+
+    Koa.object "ids", {
+      "ids" => "$strAry",
+    }
+
+    Koa.object "tagsResult", {
+      "success" => "boolean",
+      "tags"    => "$strAry?",
+      "error"   => "string?",
+    }
+
+    Koa.object "missing", {
+      "path"      => "string",
+      "id"        => "string",
+      "signature" => "string",
+    }
+
+    Koa.array "missingAry", "$missing"
+
+    Koa.object "missingResult", {
+      "success" => "boolean",
+      "error"   => "string?",
+      "entries" => "$missingAry?",
+      "titles"  => "$missingAry?",
+    }
+
+    Koa.describe "Returns a page in a manga entry"
+    Koa.path "tid", desc: "Title ID"
+    Koa.path "eid", desc: "Entry ID"
+    Koa.path "page", type: "integer", desc: "The page number to return (starts from 1)"
+    Koa.response 200, ref: "$binary", media_type: "image/*"
+    Koa.response 500, "Page not found or not readable"
     get "/api/page/:tid/:eid/:page" do |env|
       begin
         tid = env.params.url["tid"]
         eid = env.params.url["eid"]
         page = env.params.url["page"].to_i
 
-        title = @context.library.get_title tid
+        title = Library.default.get_title tid
         raise "Title ID `#{tid}` not found" if title.nil?
         entry = title.get_entry eid
         raise "Entry ID `#{eid}` of `#{title.title}` not found" if entry.nil?
@@ -20,46 +203,102 @@ class APIRouter < Router
 
         send_img env, img
       rescue e
-        @context.error e
+        Logger.error e
         env.response.status_code = 500
         e.message
       end
     end
 
+    Koa.describe "Returns the cover image of a manga entry"
+    Koa.path "tid", desc: "Title ID"
+    Koa.path "eid", desc: "Entry ID"
+    Koa.response 200, ref: "$binary", media_type: "image/*"
+    Koa.response 500, "Page not found or not readable"
+    get "/api/cover/:tid/:eid" do |env|
+      begin
+        tid = env.params.url["tid"]
+        eid = env.params.url["eid"]
+
+        title = Library.default.get_title tid
+        raise "Title ID `#{tid}` not found" if title.nil?
+        entry = title.get_entry eid
+        raise "Entry ID `#{eid}` of `#{title.title}` not found" if entry.nil?
+
+        img = entry.get_thumbnail || entry.read_page 1
+        raise "Failed to get cover of `#{title.title}/#{entry.title}`" \
+           if img.nil?
+
+        send_img env, img
+      rescue e
+        Logger.error e
+        env.response.status_code = 500
+        e.message
+      end
+    end
+
+    Koa.describe "Returns the book with title `tid`"
+    Koa.path "tid", desc: "Title ID"
+    Koa.response 200, ref: "$title"
+    Koa.response 404, "Title not found"
     get "/api/book/:tid" do |env|
       begin
         tid = env.params.url["tid"]
-        title = @context.library.get_title tid
+        title = Library.default.get_title tid
         raise "Title ID `#{tid}` not found" if title.nil?
 
         send_json env, title.to_json
       rescue e
-        @context.error e
-        env.response.status_code = 500
+        Logger.error e
+        env.response.status_code = 404
         e.message
       end
     end
 
-    get "/api/book" do |env|
-      send_json env, @context.library.to_json
+    Koa.describe "Returns the entire library with all titles and entries"
+    Koa.response 200, ref: "$library"
+    get "/api/library" do |env|
+      send_json env, Library.default.to_json
     end
 
+    Koa.describe "Triggers a library scan"
+    Koa.tag "admin"
+    Koa.response 200, ref: "$scanResult"
     post "/api/admin/scan" do |env|
       start = Time.utc
-      @context.library.scan
+      Library.default.scan
       ms = (Time.utc - start).total_milliseconds
       send_json env, {
         "milliseconds" => ms,
-        "titles"       => @context.library.titles.size,
+        "titles"       => Library.default.titles.size,
       }.to_json
     end
 
-    post "/api/admin/user/delete/:username" do |env|
+    Koa.describe "Returns the thumbnail generation progress between 0 and 1"
+    Koa.tag "admin"
+    Koa.response 200, ref: "$progressResult"
+    get "/api/admin/thumbnail_progress" do |env|
+      send_json env, {
+        "progress" => Library.default.thumbnail_generation_progress,
+      }.to_json
+    end
+
+    Koa.describe "Triggers a thumbnail generation"
+    Koa.tag "admin"
+    post "/api/admin/generate_thumbnails" do |env|
+      spawn do
+        Library.default.generate_thumbnails
+      end
+    end
+
+    Koa.describe "Deletes a user with `username`"
+    Koa.tag "admin"
+    Koa.response 200, ref: "$result"
+    delete "/api/admin/user/delete/:username" do |env|
       begin
         username = env.params.url["username"]
-        @context.storage.delete_user username
+        Storage.default.delete_user username
       rescue e
-        @context.error e
+        Logger.error e
         send_json env, {
           "success" => false,
           "error"   => e.message,
@@ -69,13 +308,24 @@ class APIRouter < Router
       end
     end
 
-    post "/api/progress/:title/:page" do |env|
+    Koa.describe "Updates the reading progress of an entry or the whole title for the current user", <<-MD
+      When `eid` is provided, sets the reading progress of the entry to `page`.
+
+      When `eid` is omitted, updates the progress of the entire title. Specifically:
+
+      - if `page` is 0, marks the entire title as unread
+      - otherwise, marks the entire title as read
+    MD
+    Koa.path "tid", desc: "Title ID"
+    Koa.query "eid", desc: "Entry ID", required: false
+    Koa.path "page", desc: "The new page number indicating the progress"
+    Koa.response 200, ref: "$result"
+    put "/api/progress/:tid/:page" do |env|
       begin
         username = get_username env
-        title = (@context.library.get_title env.params.url["title"])
-          .not_nil!
+        title = (Library.default.get_title env.params.url["tid"]).not_nil!
         page = env.params.url["page"].to_i
-        entry_id = env.params.query["entry"]?
+        entry_id = env.params.query["eid"]?
 
         if !entry_id.nil?
           entry = title.get_entry(entry_id).not_nil!
@@ -87,7 +337,7 @@ class APIRouter < Router
           title.read_all username
         end
       rescue e
-        @context.error e
+        Logger.error e
         send_json env, {
           "success" => false,
           "error"   => e.message,
@@ -97,10 +347,15 @@ class APIRouter < Router
       end
     end
 
-    post "/api/bulk-progress/:action/:title" do |env|
+    Koa.describe "Updates the reading progress of multiple entries in a title"
+    Koa.path "action", desc: "The action to perform. Can be either `read` or `unread`"
+    Koa.path "tid", desc: "Title ID"
+    Koa.body ref: "$ids", desc: "An array of entry IDs"
+    Koa.response 200, ref: "$result"
+    put "/api/bulk_progress/:action/:tid" do |env|
       begin
         username = get_username env
-        title = (@context.library.get_title env.params.url["title"]).not_nil!
+        title = (Library.default.get_title env.params.url["tid"]).not_nil!
         action = env.params.url["action"]
         ids = env.params.json["ids"].as(Array).map &.as_s
 
@@ -109,7 +364,7 @@ class APIRouter < Router
         end
         title.bulk_progress action, ids, username
       rescue e
-        @context.error e
+        Logger.error e
         send_json env, {
           "success" => false,
           "error"   => e.message,
@@ -119,12 +374,20 @@ class APIRouter < Router
       end
     end
 
-    post "/api/admin/display_name/:title/:name" do |env|
+    Koa.describe "Sets the display name of a title or an entry", <<-MD
+      When `eid` is provided, apply the display name to the entry. Otherwise, apply the display name to the title identified by `tid`.
+    MD
+    Koa.tag "admin"
+    Koa.path "tid", desc: "Title ID"
+    Koa.query "eid", desc: "Entry ID", required: false
+    Koa.path "name", desc: "The new display name"
+    Koa.response 200, ref: "$result"
+    put "/api/admin/display_name/:tid/:name" do |env|
       begin
-        title = (@context.library.get_title env.params.url["title"])
+        title = (Library.default.get_title env.params.url["tid"])
           .not_nil!
         name = env.params.url["name"]
-        entry = env.params.query["entry"]?
+        entry = env.params.query["eid"]?
         if entry.nil?
           title.set_display_name name
         else
@@ -132,7 +395,7 @@ class APIRouter < Router
           title.set_display_name eobj.not_nil!.title, name
         end
       rescue e
-        @context.error e
+        Logger.error e
         send_json env, {
           "success" => false,
           "error"   => e.message,
@@ -142,48 +405,76 @@ class APIRouter < Router
       end
     end
 
+    Koa.describe "Returns a MangaDex manga identified by `id`", <<-MD
+      On error, returns a JSON that contains the error message in the `error` field.
+    MD
+    Koa.tag "admin"
+    Koa.path "id", desc: "A MangaDex manga ID"
+    Koa.response 200, ref: "$mangadexManga"
     get "/api/admin/mangadex/manga/:id" do |env|
       begin
         id = env.params.url["id"]
-        api = MangaDex::API.default
-        manga = api.get_manga id
+        manga = MangaDex::Client.from_config.manga id
         send_json env, manga.to_info_json
       rescue e
-        @context.error e
+        Logger.error e
         send_json env, {"error" => e.message}.to_json
       end
     end
 
+    Koa.describe "Adds a list of MangaDex chapters to the download queue", <<-MD
+      On error, returns a JSON that contains the error message in the `error` field.
+    MD
+    Koa.tag "admin"
+    Koa.body ref: "$chaptersObj"
+    Koa.response 200, ref: "$successFailCount"
     post "/api/admin/mangadex/download" do |env|
       begin
         chapters = env.params.json["chapters"].as(Array).map { |c| c.as_h }
         jobs = chapters.map { |chapter|
           Queue::Job.new(
-            chapter["id"].as_s,
-            chapter["manga_id"].as_s,
+            chapter["id"].as_i64.to_s,
+            chapter["mangaId"].as_i64.to_s,
             chapter["full_title"].as_s,
-            chapter["manga_title"].as_s,
+            chapter["mangaTitle"].as_s,
             Queue::JobStatus::Pending,
-            Time.unix chapter["time"].as_s.to_i
+            Time.unix chapter["timestamp"].as_i64
           )
         }
-        inserted_count = @context.queue.push jobs
+        inserted_count = Queue.default.push jobs
         send_json env, {
           "success": inserted_count,
           "fail":    jobs.size - inserted_count,
         }.to_json
       rescue e
-        @context.error e
+        Logger.error e
         send_json env, {"error" => e.message}.to_json
       end
     end
 
+    ws "/api/admin/mangadex/queue" do |socket, env|
+      interval_raw = env.params.query["interval"]?
+      interval = (interval_raw.to_i? if interval_raw) || 5
+      loop do
+        socket.send({
+          "jobs"   => Queue.default.get_all,
+          "paused" => Queue.default.paused?,
+        }.to_json)
+        sleep interval.seconds
+      end
+    end
+
+    Koa.describe "Returns the current download queue", <<-MD
+      On error, returns a JSON that contains the error message in the `error` field.
+    MD
+    Koa.tag "admin"
+    Koa.response 200, ref: "$jobs"
     get "/api/admin/mangadex/queue" do |env|
       begin
-        jobs = @context.queue.get_all
+        jobs = Queue.default.get_all
         send_json env, {
           "jobs"    => jobs,
-          "paused"  => @context.queue.paused?,
+          "paused"  => Queue.default.paused?,
           "success" => true,
         }.to_json
       rescue e
@@ -194,6 +485,19 @@ class APIRouter < Router
       end
     end
 
+    Koa.describe "Perform an action on a download job or all jobs in the queue", <<-MD
+      The `action` parameter can be `delete`, `retry`, `pause` or `resume`.
+
+      When `action` is `pause` or `resume`, pauses or resumes the download queue, respectively.
+
+      When `action` is set to `delete`, the behavior depends on `id`. If `id` is provided, deletes the specific job identified by the ID. Otherwise, deletes all **completed** jobs in the queue.
+
+      When `action` is set to `retry`, the behavior depends on `id`. If `id` is provided, restarts the job identified by the ID. Otherwise, retries all jobs in the `Error` or `MissingPages` status in the queue.
+    MD
+    Koa.tag "admin"
+    Koa.path "action", desc: "The action to perform. It should be one of the followins: `delete`, `retry`, `pause` and `resume`."
+    Koa.query "id", required: false, desc: "A job ID"
+    Koa.response 200, ref: "$result"
     post "/api/admin/mangadex/queue/:action" do |env|
       begin
         action = env.params.url["action"]
@@ -201,20 +505,20 @@ class APIRouter < Router
         case action
         when "delete"
           if id.nil?
-            @context.queue.delete_status Queue::JobStatus::Completed
+            Queue.default.delete_status Queue::JobStatus::Completed
           else
-            @context.queue.delete id
+            Queue.default.delete id
           end
         when "retry"
           if id.nil?
-            @context.queue.reset
+            Queue.default.reset
           else
-            @context.queue.reset id
+            Queue.default.reset id
           end
         when "pause"
-          @context.queue.pause
+          Queue.default.pause
         when "resume"
-          @context.queue.resume
+          Queue.default.resume
         else
           raise "Unknown queue action #{action}"
         end
@@ -228,6 +532,22 @@ class APIRouter < Router
       end
     end
 
+    Koa.describe "Uploads a file to the server", <<-MD
+      Currently the only supported value for the `target` parameter is `cover`.
+
+      ### Cover
+
+      Uploads a cover image for a title or an entry.
+
+      Query parameters:
+      - `tid`: A title ID
+      - `eid`: (Optional) An entry ID
+
+      When `eid` is omitted, the new cover image will be applied to the title. Otherwise, applies the image to the specified entry.
+    MD
+    Koa.tag "admin"
+    Koa.body type: "multipart/form-data", ref: "$binaryUpload"
+    Koa.response 200, ref: "$result"
     post "/api/admin/upload/:target" do |env|
       begin
         target = env.params.url["target"]
@@ -242,9 +562,9 @@ class APIRouter < Router
 
           case target
           when "cover"
-            title_id = env.params.query["title"]
-            entry_id = env.params.query["entry"]?
-            title = @context.library.get_title(title_id).not_nil!
+            title_id = env.params.query["tid"]
+            entry_id = env.params.query["eid"]?
+            title = Library.default.get_title(title_id).not_nil!
 
             unless SUPPORTED_IMG_TYPES.includes? \
                      MIME.from_filename? filename
@@ -282,10 +602,14 @@ class APIRouter < Router
       end
     end
 
-    post "/api/admin/plugin/list" do |env|
+    Koa.describe "Lists the chapters in a title from a plugin"
+    Koa.tag "admin"
+    Koa.body ref: "$pluginListBody"
+    Koa.response 200, ref: "$pluginList"
+    get "/api/admin/plugin/list" do |env|
       begin
-        query = env.params.json["query"].as String
-        plugin = Plugin.new env.params.json["plugin"].as String
+        query = env.params.query["query"].as String
+        plugin = Plugin.new env.params.query["plugin"].as String
 
         json = plugin.list_chapters query
         chapters = json["chapters"]
@@ -304,6 +628,10 @@ class APIRouter < Router
       end
     end
 
+    Koa.describe "Adds a list of chapters from a plugin to the download queue"
+    Koa.tag "admin"
+    Koa.body ref: "$pluginDownload"
+    Koa.response 200, ref: "$successFailCount"
     post "/api/admin/plugin/download" do |env|
       begin
         plugin = Plugin.new env.params.json["plugin"].as String
@@ -320,7 +648,7 @@ class APIRouter < Router
             Time.utc
           )
         }
-        inserted_count = @context.queue.push jobs
+        inserted_count = Queue.default.push jobs
         send_json env, {
           "success": inserted_count,
           "fail":    jobs.size - inserted_count,
@@ -333,12 +661,16 @@ class APIRouter < Router
       end
     end
 
+    Koa.describe "Returns the image dimensions of all pages in an entry"
+    Koa.path "tid", desc: "A title ID"
+    Koa.path "eid", desc: "An entry ID"
+    Koa.response 200, ref: "$dimensionResult"
     get "/api/dimensions/:tid/:eid" do |env|
       begin
         tid = env.params.url["tid"]
         eid = env.params.url["eid"]
 
-        title = @context.library.get_title tid
+        title = Library.default.get_title tid
         raise "Title ID `#{tid}` not found" if title.nil?
         entry = title.get_entry eid
         raise "Entry ID `#{eid}` of `#{title.title}` not found" if entry.nil?
@@ -347,6 +679,7 @@ class APIRouter < Router
         send_json env, {
           "success"    => true,
           "dimensions" => sizes,
+          "margin"     => Config.current.page_margin,
         }.to_json
       rescue e
         send_json env, {
@@ -355,5 +688,232 @@ class APIRouter < Router
         }.to_json
       end
     end
+
+    Koa.describe "Downloads an entry"
+    Koa.path "tid", desc: "A title ID"
+    Koa.path "eid", desc: "An entry ID"
+    Koa.response 200, ref: "$binary"
+    Koa.response 404, "Entry not found"
+    get "/api/download/:tid/:eid" do |env|
+      begin
+        title = (Library.default.get_title env.params.url["tid"]).not_nil!
+        entry = (title.get_entry env.params.url["eid"]).not_nil!
+
+        send_attachment env, entry.zip_path
+      rescue e
+        Logger.error e
+        env.response.status_code = 404
+      end
+    end
+
+    Koa.describe "Gets the tags of a title"
+    Koa.path "tid", desc: "A title ID"
+    Koa.response 200, ref: "$tagsResult"
+    get "/api/tags/:tid" do |env|
+      begin
+        title = (Library.default.get_title env.params.url["tid"]).not_nil!
+        tags = title.tags
+
+        send_json env, {
+          "success" => true,
+          "tags"    => tags,
+        }.to_json
+      rescue e
+        Logger.error e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
+    Koa.describe "Returns all tags"
+    Koa.response 200, ref: "$tagsResult"
+    get "/api/tags" do |env|
+      begin
+        tags = Storage.default.list_tags
+        send_json env, {
+          "success" => true,
+          "tags"    => tags,
+        }.to_json
+      rescue e
+        Logger.error e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
+    Koa.describe "Adds a new tag to a title"
+    Koa.path "tid", desc: "A title ID"
+    Koa.response 200, ref: "$result"
+    Koa.tag "admin"
+    put "/api/admin/tags/:tid/:tag" do |env|
+      begin
+        title = (Library.default.get_title env.params.url["tid"]).not_nil!
+        tag = env.params.url["tag"]
+
+        title.add_tag tag
+        send_json env, {
+          "success" => true,
+          "error"   => nil,
+        }.to_json
+      rescue e
+        Logger.error e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
+    Koa.describe "Deletes a tag from a title"
+    Koa.path "tid", desc: "A title ID"
+    Koa.response 200, ref: "$result"
+    Koa.tag "admin"
+    delete "/api/admin/tags/:tid/:tag" do |env|
+      begin
+        title = (Library.default.get_title env.params.url["tid"]).not_nil!
+        tag = env.params.url["tag"]
+
+        title.delete_tag tag
+        send_json env, {
+          "success" => true,
+          "error"   => nil,
+        }.to_json
+      rescue e
+        Logger.error e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
+    Koa.describe "Lists all missing titles"
+    Koa.response 200, ref: "$missingResult"
+    Koa.tag "admin"
+    get "/api/admin/titles/missing" do |env|
+      begin
+        send_json env, {
+          "success" => true,
+          "error"   => nil,
+          "titles"  => Storage.default.missing_titles,
+        }.to_json
+      rescue e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
+    Koa.describe "Lists all missing entries"
+    Koa.response 200, ref: "$missingResult"
+    Koa.tag "admin"
+    get "/api/admin/entries/missing" do |env|
+      begin
+        send_json env, {
+          "success" => true,
+          "error"   => nil,
+          "entries" => Storage.default.missing_entries,
+        }.to_json
+      rescue e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
+    Koa.describe "Deletes all missing titles"
+    Koa.response 200, ref: "$result"
+    Koa.tag "admin"
+    delete "/api/admin/titles/missing" do |env|
+      begin
+        Storage.default.delete_missing_title
+        send_json env, {
+          "success" => true,
+          "error"   => nil,
+        }.to_json
+      rescue e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
+    Koa.describe "Deletes all missing entries"
+    Koa.response 200, ref: "$result"
+    Koa.tag "admin"
+    delete "/api/admin/entries/missing" do |env|
+      begin
+        Storage.default.delete_missing_entry
+        send_json env, {
+          "success" => true,
+          "error"   => nil,
+        }.to_json
+      rescue e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
+    Koa.describe "Deletes a missing title identified by `tid`", <<-MD
+    Does nothing if the given `tid` is not found or if the title is not missing.
+    MD
+    Koa.response 200, ref: "$result"
+    Koa.tag "admin"
+    delete "/api/admin/titles/missing/:tid" do |env|
+      begin
+        tid = env.params.url["tid"]
+        Storage.default.delete_missing_title tid
+        send_json env, {
+          "success" => true,
+          "error"   => nil,
+        }.to_json
+      rescue e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
+    Koa.describe "Deletes a missing entry identified by `eid`", <<-MD
+    Does nothing if the given `eid` is not found or if the entry is not missing.
+    MD
+    Koa.response 200, ref: "$result"
+    Koa.tag "admin"
+    delete "/api/admin/entries/missing/:eid" do |env|
+      begin
+        eid = env.params.url["eid"]
+        Storage.default.delete_missing_entry eid
+        send_json env, {
+          "success" => true,
+          "error"   => nil,
+        }.to_json
+      rescue e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
+    doc = Koa.generate
+    @@api_json = doc.to_json if doc
+
+    get "/openapi.json" do |env|
+      if @@api_json
+        send_json env, @@api_json
+      else
+        env.response.status_code = 404
+      end
+    end
   end
 end

src/routes/main.cr

@@ -1,6 +1,4 @@
-require "./router"
-
-class MainRouter < Router
+struct MainRouter
   def initialize
     get "/login" do |env|
       base_url = Config.current.base_url
@@ -11,7 +9,7 @@ class MainRouter < Router
       begin
         env.session.delete_string "token"
       rescue e
-        @context.error "Error when attempting to log out: #{e}"
+        Logger.error "Error when attempting to log out: #{e}"
       ensure
         redirect env, "/login"
       end
@@ -21,7 +19,7 @@ class MainRouter < Router
       begin
         username = env.params.body["username"]
         password = env.params.body["password"]
-        token = @context.storage.verify_user(username, password).not_nil!
+        token = Storage.default.verify_user(username, password).not_nil!
 
         env.session.string "token", token
 
@@ -41,22 +39,22 @@ class MainRouter < Router
       begin
         username = get_username env
 
-        sort_opt = SortOptions.from_info_json @context.library.dir, username
+        sort_opt = SortOptions.from_info_json Library.default.dir, username
         get_sort_opt
 
-        titles = @context.library.sorted_titles username, sort_opt
+        titles = Library.default.sorted_titles username, sort_opt
         percentage = titles.map &.load_percentage username
 
         layout "library"
       rescue e
-        @context.error e
+        Logger.error e
         env.response.status_code = 500
       end
     end
 
     get "/book/:title" do |env|
       begin
-        title = (@context.library.get_title env.params.url["title"]).not_nil!
+        title = (Library.default.get_title env.params.url["title"]).not_nil!
         username = get_username env
 
         sort_opt = SortOptions.from_info_json title.dir, username
@@ -68,7 +66,7 @@ class MainRouter < Router
         title_percentage = title.titles.map &.load_percentage username
         layout "title"
       rescue e
-        @context.error e
+        Logger.error e
         env.response.status_code = 500
       end
     end
@@ -92,7 +90,7 @@ class MainRouter < Router
 
         layout "plugin-download"
       rescue e
-        @context.error e
+        Logger.error e
         env.response.status_code = 500
       end
     end
@@ -100,18 +98,64 @@ class MainRouter < Router
     get "/" do |env|
       begin
         username = get_username env
-        continue_reading = @context
-          .library.get_continue_reading_entries username
-        recently_added = @context.library.get_recently_added_entries username
-        start_reading = @context.library.get_start_reading_titles username
-        titles = @context.library.titles
+        continue_reading = Library.default
+          .get_continue_reading_entries username
+        recently_added = Library.default.get_recently_added_entries username
+        start_reading = Library.default.get_start_reading_titles username
+        titles = Library.default.titles
         new_user = !titles.any? { |t| t.load_percentage(username) > 0 }
         empty_library = titles.size == 0
         layout "home"
       rescue e
-        @context.error e
+        Logger.error e
         env.response.status_code = 500
       end
     end
+
+    get "/tags/:tag" do |env|
+      begin
+        username = get_username env
+        tag = env.params.url["tag"]
+
+        sort_opt = SortOptions.new
+        get_sort_opt
+
+        title_ids = Storage.default.get_tag_titles tag
+
+        raise "Tag #{tag} not found" if title_ids.empty?
+
+        titles = title_ids.map { |id| Library.default.get_title id }
+          .select Title
+
+        titles = sort_titles titles, sort_opt, username
+        percentage = titles.map &.load_percentage username
+
+        layout "tag"
+      rescue e
+        Logger.error e
+        env.response.status_code = 404
+      end
+    end
+
+    get "/tags" do |env|
+      tags = Storage.default.list_tags.map do |tag|
+        {
+          tag:         tag,
+          encoded_tag: URI.encode_www_form(tag, space_to_plus: false),
+          count:       Storage.default.get_tag_titles(tag).size,
+        }
+      end
+      # Sort by :count reversly, and then sort by :tag
+      tags.sort! do |a, b|
+        (b[:count] <=> a[:count]).or(a[:tag] <=> b[:tag])
+      end
+
+      layout "tags"
+    end
+
+    get "/api" do |env|
+      base_url = Config.current.base_url
+      render "src/views/api.html.ecr"
+    end
   end
 end

src/routes/opds.cr

@@ -1,30 +1,16 @@
-require "./router"
-
-class OPDSRouter < Router
+struct OPDSRouter
   def initialize
     get "/opds" do |env|
-      titles = @context.library.titles
+      titles = Library.default.titles
       render_xml "src/views/opds/index.xml.ecr"
     end
 
     get "/opds/book/:title_id" do |env|
       begin
-        title = @context.library.get_title(env.params.url["title_id"]).not_nil!
+        title = Library.default.get_title(env.params.url["title_id"]).not_nil!
         render_xml "src/views/opds/title.xml.ecr"
       rescue e
-        @context.error e
-        env.response.status_code = 404
-      end
-    end
-
-    get "/opds/download/:title/:entry" do |env|
-      begin
-        title = (@context.library.get_title env.params.url["title"]).not_nil!
-        entry = (title.get_entry env.params.url["entry"]).not_nil!
-
-        send_attachment env, entry.zip_path
-      rescue e
-        @context.error e
+        Logger.error e
         env.response.status_code = 404
       end
     end

src/routes/reader.cr

@@ -1,25 +1,23 @@
-require "./router"
-
-class ReaderRouter < Router
+struct ReaderRouter
   def initialize
     get "/reader/:title/:entry" do |env|
       begin
         username = get_username env
 
-        title = (@context.library.get_title env.params.url["title"]).not_nil!
+        title = (Library.default.get_title env.params.url["title"]).not_nil!
         entry = (title.get_entry env.params.url["entry"]).not_nil!
 
         next layout "reader-error" if entry.err_msg
 
         # load progress
-        page = [1, entry.load_progress username].max
+        page_idx = [1, entry.load_progress username].max
 
         # start from page 1 if the user has finished reading the entry
-        page = 1 if entry.finished? username
+        page_idx = 1 if entry.finished? username
 
-        redirect env, "/reader/#{title.id}/#{entry.id}/#{page}"
+        redirect env, "/reader/#{title.id}/#{entry.id}/#{page_idx}"
       rescue e
-        @context.error e
+        Logger.error e
         env.response.status_code = 404
       end
     end
@@ -30,10 +28,12 @@ class ReaderRouter < Router
 
         username = get_username env
 
-        title = (@context.library.get_title env.params.url["title"]).not_nil!
+        title = (Library.default.get_title env.params.url["title"]).not_nil!
         entry = (title.get_entry env.params.url["entry"]).not_nil!
-        page = env.params.url["page"].to_i
-        raise "" if page > entry.pages || page <= 0
+        page_idx = env.params.url["page"].to_i
+        if page_idx > entry.pages || page_idx <= 0
+          raise "Page #{page_idx} not found."
+        end
 
         exit_url = "#{base_url}book/#{title.id}"
 
@@ -45,7 +45,7 @@ class ReaderRouter < Router
 
         render "src/views/reader.html.ecr"
       rescue e
-        @context.error e
+        Logger.error e
         env.response.status_code = 404
       end
     end

src/routes/router.cr

@@ -1,3 +0,0 @@
-class Router
-  @context : Context = Context.default
-end

src/server.cr

@@ -5,34 +5,8 @@ require "./handlers/*"
 require "./util/*"
 require "./routes/*"
 
-class Context
-  property library : Library
-  property storage : Storage
-  property queue : Queue
-
-  use_default
-
-  def initialize
-    @storage = Storage.default
-    @library = Library.default
-    @queue = Queue.default
-  end
-
-  {% for lvl in Logger::LEVELS %}
-      def {{lvl.id}}(msg)
-          Logger.{{lvl.id}} msg
-      end
-  {% end %}
-end
-
 class Server
-  @context : Context = Context.default
-
   def initialize
-    error 403 do |env|
-      message = "HTTP 403: You are not authorized to visit #{env.request.path}"
-      layout "message"
-    end
     error 404 do |env|
       message = "HTTP 404: Mango cannot find the page #{env.request.path}"
       layout "message"
@@ -53,11 +27,11 @@ class Server
 
     Kemal.config.logging = false
     add_handler LogHandler.new
-    add_handler AuthHandler.new @context.storage
+    add_handler AuthHandler.new
     add_handler UploadHandler.new Config.current.upload_path
     {% if flag?(:release) %}
       # when building for relase, embed the static files in binary
-      @context.debug "We are in release mode. Using embedded static files."
+      Logger.debug "We are in release mode. Using embedded static files."
       serve_static false
       add_handler StaticHandler.new
     {% end %}
@@ -71,10 +45,11 @@ class Server
   end
 
   def start
-    @context.debug "Starting Kemal server"
+    Logger.debug "Starting Kemal server"
     {% if flag?(:release) %}
       Kemal.config.env = "production"
     {% end %}
+    Kemal.config.host_binding = Config.current.host
     Kemal.config.port = Config.current.port
     Kemal.run
   end

src/storage.cr

@@ -3,6 +3,8 @@ require "crypto/bcrypt"
 require "uuid"
 require "base64"
 require "./util/*"
+require "mg"
+require "../migration/*"
 
 def hash_password(pw)
   Crypto::Bcrypt::Password.create(pw).to_s
@@ -13,13 +15,16 @@ def verify_password(hash, pw)
 end
 
 class Storage
+  @@insert_entry_ids = [] of IDTuple
+  @@insert_title_ids = [] of IDTuple
+
   @path : String
   @db : DB::Database?
-  @insert_ids = [] of IDTuple
 
-  alias IDTuple = NamedTuple(path: String,
+  alias IDTuple = NamedTuple(
+    path: String,
     id: String,
-    is_title: Bool)
+    signature: String?)
 
   use_default
 
@@ -35,33 +40,14 @@ class Storage
     MainFiber.run do
       DB.open "sqlite3://#{@path}" do |db|
         begin
-          # We create the `ids` table first. even if the uses has an
-          #   early version installed and has the `user` table only,
-          #   we will still be able to create `ids`
-          db.exec "create table ids" \
-                  "(path text, id text, is_title integer)"
-          db.exec "create unique index path_idx on ids (path)"
-          db.exec "create unique index id_idx on ids (id)"
-
-          db.exec "create table users" \
-                  "(username text, password text, token text, admin integer)"
+          MG::Migration.new(db, log: Logger.default.raw_log).migrate
         rescue e
-          unless e.message.not_nil!.ends_with? "already exists"
-            Logger.fatal "Error when checking tables in DB: #{e}"
-            raise e
-          end
-
-          # If the DB is initialized through CLI but no user is added, we need
-          #   to create the admin user when first starting the app
-          user_count = db.query_one "select count(*) from users", as: Int32
-          init_admin if init_user && user_count == 0
-        else
-          Logger.debug "Creating DB file at #{@path}"
-          db.exec "create unique index username_idx on users (username)"
-          db.exec "create unique index token_idx on users (token)"
-
-          init_admin if init_user
+          Logger.fatal "DB migration failed. #{e}"
+          raise e
         end
+
+        user_count = db.query_one "select count(*) from users", as: Int32
+        init_admin if init_user && user_count == 0
       end
       unless @auto_close
         @db = DB.open "sqlite3://#{@path}"
@@ -81,13 +67,37 @@ class Storage
   private def get_db(&block : DB::Database ->)
     if @db.nil?
       DB.open "sqlite3://#{@path}" do |db|
+        db.exec "PRAGMA foreign_keys = 1"
         yield db
       end
     else
+      @db.not_nil!.exec "PRAGMA foreign_keys = 1"
       yield @db.not_nil!
     end
   end
 
+  def username_exists(username)
+    exists = false
+    MainFiber.run do
+      get_db do |db|
+        exists = db.query_one("select count(*) from users where " \
+                              "username = (?)", username, as: Int32) > 0
+      end
+    end
+    exists
+  end
+
+  def username_is_admin(username)
+    is_admin = false
+    MainFiber.run do
+      get_db do |db|
+        is_admin = db.query_one("select admin from users where " \
+                                "username = (?)", username, as: Int32) > 0
+      end
+    end
+    is_admin
+  end
+
   def verify_user(username, password)
     out_token = nil
     MainFiber.run do
@@ -214,35 +224,296 @@ class Storage
     end
   end
 
-  def get_id(path, is_title)
+  def get_title_id(path, signature)
     id = nil
+    path = Path.new(path).relative_to(Config.current.library_path).to_s
     MainFiber.run do
       get_db do |db|
-        id = db.query_one? "select id from ids where path = (?)", path,
-          as: {String}
+        # First attempt to find the matching title in DB using BOTH path
+        #   and signature
+        id = db.query_one? "select id from titles where path = (?) and " \
+                           "signature = (?) and unavailable = 0",
+          path, signature.to_s, as: String
+
+        should_update = id.nil?
+        # If it fails, try to match using the path only. This could happen
+        #   for example when a new entry is added to the title
+        id ||= db.query_one? "select id from titles where path = (?)", path,
+          as: String
+
+        # If it still fails, we will have to rely on the signature values.
+        #   This could happen when the user moved or renamed the title, or
+        #   a title containing the title
+        unless id
+          # If there are multiple rows with the same signature (this could
+          #   happen simply by bad luck, or when the user copied a title),
+          #   pick the row that has the most similar path to the give path
+          rows = [] of Tuple(String, String)
+          db.query "select id, path from titles where signature = (?)",
+            signature.to_s do |rs|
+            rs.each do
+              rows << {rs.read(String), rs.read(String)}
+            end
+          end
+          row = rows.max_by?(&.[1].components_similarity(path))
+          id = row[0] if row
+        end
+
+        # At this point, `id` would still be nil if there's no row matching
+        #   either the path or the signature
+
+        # If we did identify a matching title, save the path and signature
+        #   values back to the DB
+        if id && should_update
+          db.exec "update titles set path = (?), signature = (?), " \
+                  "unavailable = 0 where id = (?)", path, signature.to_s, id
+        end
       end
     end
     id
   end
 
-  def insert_id(tp : IDTuple)
-    @insert_ids << tp
+  # See the comments in `#get_title_id` to see how this method works.
+  def get_entry_id(path, signature)
+    id = nil
+    path = Path.new(path).relative_to(Config.current.library_path).to_s
+    MainFiber.run do
+      get_db do |db|
+        id = db.query_one? "select id from ids where path = (?) and " \
+                           "signature = (?) and unavailable = 0",
+          path, signature.to_s, as: String
+
+        should_update = id.nil?
+        id ||= db.query_one? "select id from ids where path = (?)", path,
+          as: String
+
+        unless id
+          rows = [] of Tuple(String, String)
+          db.query "select id, path from ids where signature = (?)",
+            signature.to_s do |rs|
+            rs.each do
+              rows << {rs.read(String), rs.read(String)}
+            end
+          end
+          row = rows.max_by?(&.[1].components_similarity(path))
+          id = row[0] if row
+        end
+
+        if id && should_update
+          db.exec "update ids set path = (?), signature = (?), " \
+                  "unavailable = 0 where id = (?)", path, signature.to_s, id
+        end
+      end
+    end
+    id
+  end
+
+  def insert_entry_id(tp)
+    @@insert_entry_ids << tp
+  end
+
+  def insert_title_id(tp)
+    @@insert_title_ids << tp
   end
 
   def bulk_insert_ids
     MainFiber.run do
       get_db do |db|
-        db.transaction do |tx|
-          @insert_ids.each do |tp|
-            tx.connection.exec "insert into ids values (?, ?, ?)", tp[:path],
-              tp[:id], tp[:is_title] ? 1 : 0
+        db.transaction do |tran|
+          conn = tran.connection
+          @@insert_title_ids.each do |tp|
+            path = Path.new(tp[:path])
+              .relative_to(Config.current.library_path).to_s
+            conn.exec "insert into titles (id, path, signature, " \
+                      "unavailable) values (?, ?, ?, 0)",
+              tp[:id], path, tp[:signature].to_s
+          end
+          @@insert_entry_ids.each do |tp|
+            path = Path.new(tp[:path])
+              .relative_to(Config.current.library_path).to_s
+            conn.exec "insert into ids (id, path, signature, " \
+                      "unavailable) values (?, ?, ?, 0)",
+              tp[:id], path, tp[:signature].to_s
           end
         end
       end
-      @insert_ids.clear
+      @@insert_entry_ids.clear
+      @@insert_title_ids.clear
     end
   end
 
+  def save_thumbnail(id : String, img : Image)
+    MainFiber.run do
+      get_db do |db|
+        db.exec "insert into thumbnails values (?, ?, ?, ?, ?)", id, img.data,
+          img.filename, img.mime, img.size
+      end
+    end
+  end
+
+  def get_thumbnail(id : String) : Image?
+    img = nil
+    MainFiber.run do
+      get_db do |db|
+        db.query_one? "select * from thumbnails where id = (?)", id do |res|
+          img = Image.from_db res
+        end
+      end
+    end
+    img
+  end
+
+  def get_title_tags(id : String) : Array(String)
+    tags = [] of String
+    MainFiber.run do
+      get_db do |db|
+        db.query "select tag from tags where id = (?) order by tag", id do |rs|
+          rs.each do
+            tags << rs.read String
+          end
+        end
+      end
+    end
+    tags
+  end
+
+  def get_tag_titles(tag : String) : Array(String)
+    tids = [] of String
+    MainFiber.run do
+      get_db do |db|
+        db.query "select id from tags where tag = (?)", tag do |rs|
+          rs.each do
+            tids << rs.read String
+          end
+        end
+      end
+    end
+    tids
+  end
+
+  def list_tags : Array(String)
+    tags = [] of String
+    MainFiber.run do
+      get_db do |db|
+        db.query "select distinct tag from tags natural join titles " \
+                 "where unavailable = 0" do |rs|
+          rs.each do
+            tags << rs.read String
+          end
+        end
+      end
+    end
+    tags
+  end
+
+  def add_tag(id : String, tag : String)
+    err = nil
+    MainFiber.run do
+      begin
+        get_db do |db|
+          db.exec "insert into tags values (?, ?)", id, tag
+        end
+      rescue e
+        err = e
+      end
+    end
+    raise err.not_nil! if err
+  end
+
+  def delete_tag(id : String, tag : String)
+    MainFiber.run do
+      get_db do |db|
+        db.exec "delete from tags where id = (?) and tag = (?)", id, tag
+      end
+    end
+  end
+
+  def mark_unavailable
+    MainFiber.run do
+      get_db do |db|
+        # Detect dangling entry IDs
+        trash_ids = [] of String
+        db.query "select path, id from ids where unavailable = 0" do |rs|
+          rs.each do
+            path = rs.read String
+            fullpath = Path.new(path).expand(Config.current.library_path).to_s
+            trash_ids << rs.read String unless File.exists? fullpath
+          end
+        end
+
+        unless trash_ids.empty?
+          Logger.debug "Marking #{trash_ids.size} entries as unavailable"
+        end
+        db.exec "update ids set unavailable = 1 where id in " \
+                "(#{trash_ids.map { |i| "'#{i}'" }.join ","})"
+
+        # Detect dangling title IDs
+        trash_titles = [] of String
+        db.query "select path, id from titles where unavailable  = 0" do |rs|
+          rs.each do
+            path = rs.read String
+            fullpath = Path.new(path).expand(Config.current.library_path).to_s
+            trash_titles << rs.read String unless Dir.exists? fullpath
+          end
+        end
+
+        unless trash_titles.empty?
+          Logger.debug "Marking #{trash_titles.size} titles as unavailable"
+        end
+        db.exec "update titles set unavailable = 1 where id in " \
+                "(#{trash_titles.map { |i| "'#{i}'" }.join ","})"
+      end
+    end
+  end
+
+  private def get_missing(tablename)
+    ary = [] of IDTuple
+    MainFiber.run do
+      get_db do |db|
+        db.query "select id, path, signature from #{tablename} " \
+                 "where unavailable = 1" do |rs|
+          rs.each do
+            ary << {
+              id:        rs.read(String),
+              path:      rs.read(String),
+              signature: rs.read(String?),
+            }
+          end
+        end
+      end
+    end
+    ary
+  end
+
+  private def delete_missing(tablename, id : String? = nil)
+    MainFiber.run do
+      get_db do |db|
+        if id
+          db.exec "delete from #{tablename} where id = (?) " \
+                  "and unavailable = 1", id
+        else
+          db.exec "delete from #{tablename} where unavailable = 1"
+        end
+      end
+    end
+  end
+
+  def missing_entries
+    get_missing "ids"
+  end
+
+  def missing_titles
+    get_missing "titles"
+  end
+
+  def delete_missing_entry(id = nil)
+    delete_missing "ids", id
+  end
+
+  def delete_missing_title(id = nil)
+    delete_missing "titles", id
+  end
+
   def close
     MainFiber.run do
       unless @db.nil?

src/util/proxy.cr

@@ -5,7 +5,7 @@ require "http_proxy"
 module HTTP
   class Client
     private def self.exec(uri : URI, tls : TLSContext = nil)
-      Logger.debug "Using monkey-patched HTTP::Client"
+      Logger.debug "Setting proxy"
       previous_def uri, tls do |client, path|
         client.set_proxy get_proxy uri
         yield client, path
@@ -35,7 +35,8 @@ private def env_to_proxy(key : String) : HTTP::Proxy::Client?
 
   begin
     uri = URI.parse val
-    HTTP::Proxy::Client.new uri.hostname.not_nil!, uri.port.not_nil!
+    HTTP::Proxy::Client.new uri.hostname.not_nil!, uri.port.not_nil!,
+      username: uri.user, password: uri.password
   rescue
     nil
   end

src/util/signature.cr

@@ -0,0 +1,51 @@
+require "./util"
+
+class File
+  abstract struct Info
+    def inode : UInt64
+      @stat.st_ino.to_u64
+    end
+  end
+
+  # Returns the signature of the file at filename.
+  # When it is not a supported file, returns 0. Otherwise, uses the inode
+  #   number as its signature. On most file systems, the inode number is
+  #   preserved even when the file is renamed, moved or edited.
+  # Some cases that would cause the inode number to change:
+  #   - Reboot/remount on some file systems
+  #   - Replaced with a copied file
+  #   - Moved to a different device
+  # Since we are also using the relative paths to match ids, we won't lose
+  #   information as long as the above changes do not happen together with
+  #   a file/folder rename, with no library scan in between.
+  def self.signature(filename) : UInt64
+    if is_supported_file filename
+      File.info(filename).inode
+    else
+      0u64
+    end
+  end
+end
+
+class Dir
+  # Returns the signature of the directory at dirname. See the comments for
+  #   `File.signature` for more information.
+  def self.signature(dirname) : UInt64
+    signatures = [File.info(dirname).inode]
+    self.open dirname do |dir|
+      dir.entries.each do |fn|
+        next if fn.starts_with? "."
+        path = File.join dirname, fn
+        if File.directory? path
+          signatures << Dir.signature path
+        else
+          _sig = File.signature path
+          # Only add its signature value to `signatures` when it is a
+          #   supported file
+          signatures << _sig if _sig > 0
+        end
+      end
+    end
+    Digest::CRC32.checksum(signatures.sort.join).to_u64
+  end
+end

src/util/util.cr

@@ -1,7 +1,8 @@
 IMGS_PER_PAGE            = 5
 ENTRIES_IN_HOME_SECTIONS = 8
 UPLOAD_URL_PREFIX        = "/uploads"
-STATIC_DIRS              = ["/css", "/js", "/img", "/favicon.ico"]
+STATIC_DIRS              = %w(/css /js /img /webfonts /favicon.ico /robots.txt)
+SUPPORTED_FILE_EXTNAMES  = [".zip", ".cbz", ".rar", ".cbr"]
 
 def random_str
   UUID.random.to_s.gsub "-", ""
@@ -22,15 +23,27 @@ end
 
 def register_mime_types
   {
+    # Comic Archives
     ".zip" => "application/zip",
     ".rar" => "application/x-rar-compressed",
     ".cbz" => "application/vnd.comicbook+zip",
     ".cbr" => "application/vnd.comicbook-rar",
+
+    # Favicon
+    ".ico" => "image/x-icon",
+
+    # FontAwesome fonts
+    ".woff"  => "font/woff",
+    ".woff2" => "font/woff2",
   }.each do |k, v|
     MIME.register k, v
   end
 end
 
+def is_supported_file(path)
+  SUPPORTED_FILE_EXTNAMES.includes? File.extname(path).downcase
+end
+
 struct Int
   def or(other : Int)
     if self == 0
@@ -61,3 +74,49 @@ class String
     self.chars.all? { |c| c.alphanumeric? || c == '_' }
   end
 end
+
+def env_is_true?(key : String) : Bool
+  val = ENV[key.upcase]? || ENV[key.downcase]?
+  return false unless val
+  val.downcase.in? "1", "true"
+end
+
+def sort_titles(titles : Array(Title), opt : SortOptions, username : String)
+  ary = titles
+
+  case opt.method
+  when .time_modified?
+    ary.sort! { |a, b| (a.mtime <=> b.mtime).or \
+      compare_numerically a.title, b.title }
+  when .progress?
+    ary.sort! do |a, b|
+      (a.load_percentage(username) <=> b.load_percentage(username)).or \
+        compare_numerically a.title, b.title
+    end
+  else
+    unless opt.method.auto?
+      Logger.warn "Unknown sorting method #{opt.not_nil!.method}. Using " \
+                  "Auto instead"
+    end
+    ary.sort! { |a, b| compare_numerically a.title, b.title }
+  end
+
+  ary.reverse! unless opt.not_nil!.ascend
+
+  ary
+end
+
+class String
+  # Returns the similarity (in [0, 1]) of two paths.
+  # For the two paths, separate them into arrays of components, count the
+  #   number of matching components backwards, and divide the count by the
+  #   number of components of the shorter path.
+  def components_similarity(other : String) : Float64
+    s, l = [self, other]
+      .map { |str| Path.new(str).parts }
+      .sort_by &.size
+
+    match = s.reverse.zip(l.reverse).count { |a, b| a == b }
+    match / s.size
+  end
+end

src/util/web.cr

@@ -1,30 +1,60 @@
 # Web related helper functions/macros
 
+def is_admin?(env) : Bool
+  is_admin = false
+  if !Config.current.auth_proxy_header_name.empty? ||
+     Config.current.disable_login
+    is_admin = Storage.default.username_is_admin get_username env
+  end
+
+  # The token (if exists) takes precedence over other authentication methods.
+  if token = env.session.string? "token"
+    is_admin = Storage.default.verify_admin token
+  end
+
+  is_admin
+end
+
 macro layout(name)
   base_url = Config.current.base_url
+  is_admin = is_admin? env
   begin
-    is_admin = false
-    if token = env.session.string? "token"
-      is_admin = @context.storage.verify_admin token
-    end
     page = {{name}}
     render "src/views/#{{{name}}}.html.ecr", "src/views/layout.html.ecr"
   rescue e
     message = e.to_s
-    @context.error message
+    Logger.error message
+    page = "Error"
     render "src/views/message.html.ecr", "src/views/layout.html.ecr"
   end
 end
 
+macro send_error_page(msg)
+  message = {{msg}}
+  base_url = Config.current.base_url
+  is_admin = is_admin? env
+  page = "Error"
+  html = render "src/views/message.html.ecr", "src/views/layout.html.ecr"
+  send_file env, html.to_slice, "text/html"
+end
+
 macro send_img(env, img)
   send_file {{env}}, {{img}}.data, {{img}}.mime
 end
 
 macro get_username(env)
-  # if the request gets here, it has gone through the auth handler, and
-  #   we can be sure that a valid token exists, so we can use not_nil! here
-  token = env.session.string "token"
-  (@context.storage.verify_token token).not_nil!
+  begin
+    token = env.session.string "token"
+    (Storage.default.verify_token token).not_nil!
+  rescue e
+    if Config.current.disable_login
+      Config.current.default_username
+    elsif (header = Config.current.auth_proxy_header_name) && !header.empty?
+      env.request.headers[header]
+    else
+      raise e
+    end
+  end
 end
 
 def send_json(env, json)
@@ -46,12 +76,7 @@ def hash_to_query(hash)
 end
 
 def request_path_startswith(env, ary)
-  ary.each do |prefix|
-    if env.request.path.starts_with? prefix
-      return true
-    end
-  end
-  false
+  ary.any? { |prefix| env.request.path.starts_with? prefix }
 end
 
 def requesting_static_file(env)
@@ -81,3 +106,20 @@ macro get_sort_opt
     sort_opt = SortOptions.new sort_method, is_ascending
   end
 end
+
+module HTTP
+  class Client
+    private def self.exec(uri : URI, tls : TLSContext = nil)
+      previous_def uri, tls do |client, path|
+        if client.tls? && env_is_true? "DISABLE_SSL_VERIFICATION"
+          Logger.debug "Disabling SSL verification"
+          client.tls.verify_mode = OpenSSL::SSL::VerifyMode::NONE
+        end
+        Logger.debug "Setting read timeout"
+        client.read_timeout = Config.current.download_timeout_seconds.seconds
+        Logger.debug "Requesting #{uri}"
+        yield client, path
+      end
+    end
+  end
+end

src/views/admin.html.ecr

@@ -1,15 +1,33 @@
-<ul class="uk-list uk-list-large uk-list-divider">
-  <li data-url="<%= base_url %>admin/user">User Managerment</li>
-  <li onclick="if(!scanning){scan()}">
-    <span id="scan">Scan Library Files</span>
-    <span id="scan-status" class="uk-align-right">
-      <div uk-spinner hidden></div>
-      <span hidden></span>
-    </span>
+<ul class="uk-list uk-list-large uk-list-divider" x-data="component()" x-init="init()">
+  <li><a class="uk-link-reset" href="<%= base_url %>admin/user">User Management</a></li>
+  <li>
+    <a class="uk-link-reset" href="<%= base_url %>admin/missing">Missing Items</a>
+    <% if missing_count > 0 %>
+      <div class="uk-align-right">
+        <span class="uk-badge"><%= missing_count %></span>
+      </div>
+    <% end %>
   </li>
-  <li class="nopointer">
+  <li>
+    <a class="uk-link-reset" @click="scan()">
+      <span :style="`${scanning ? 'color:grey' : ''}`">Scan Library Files</span>
+      <div class="uk-align-right">
+        <div uk-spinner x-show="scanning"></div>
+        <span x-show="!scanning && scanMs > 0" x-text="`Scan ${scanTitles} titles in ${scanMs}ms`"></span>
+      </div>
+    </a>
+  </li>
+  <li>
+    <a class="uk-link-reset" @click="generateThumbnails()">
+      <span :style="`${generating ? 'color:grey' : ''}`">Generate Thumbnails</span>
+      <div class="uk-align-right">
+        <span x-show="generating && progress > 0" x-text="`${(progress * 100).toFixed(2)}%`"></span>
+      </div>
+    </a>
+  </li>
+  <li>
     <span>Theme</span>
-    <select id="theme-select" class="uk-select uk-align-right uk-width-1-3@m uk-width-1-2">
+    <select id="theme-select" class="uk-select uk-align-right uk-width-1-3@m uk-width-1-2" :value="themeSetting" @change="themeChanged($event)">
       <option>Dark</option>
       <option>Light</option>
       <option>System</option>

src/views/api.html.ecr

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="X-UA-Compatible" content="IE=edge">
+    <title>Mango API Documentation</title>
+    <meta name="description" content="Mango - Manga Server and Web Reader">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <redoc spec-url="<%= base_url %>openapi.json"></redoc>
+    <script src="https://cdn.jsdelivr.net/npm/redoc/bundles/redoc.standalone.js"></script>
+  </body>
+</html>

src/views/components/card.html.ecr

@@ -35,7 +35,7 @@
       onclick="location='<%= base_url %>book/<%= item.id %>'" 
     <% end %>>
 
-    <div class="uk-card uk-card-default" x-data="{selected: false, hover: false, disabled: true}" :class="{selected: selected}"
+    <div class="uk-card uk-card-default" x-data="{selected: false, hover: false, disabled: true, selecting: false}" :class="{selected: selected}" @count.window="selecting = $event.detail.count > 0"
       <% if page == "title" && item.is_a?(Entry) && item.err_msg.nil? %>
         x-init="disabled = false"
       <% end %>>
@@ -45,6 +45,7 @@
           class="grayscale"
         <% end %>>
         <div class="uk-overlay-primary uk-position-cover" x-show="!disabled && (selected || hover)">
+          <div class="uk-height-1-1 uk-width-1-1" x-show="selecting" @click.stop="selected = !selected; $dispatch(selected ? 'add' : 'remove')"></div>
           <div class="uk-position-center">
             <span class="fas fa-check-circle fa-3x" @click.stop="selected = !selected; $dispatch(selected ? 'add' : 'remove')" :style="`color:${selected && 'orange'};`"></span>
           </div>
@@ -75,7 +76,7 @@
         <% end %>
         <% if item.is_a? Title %>
           <% if grouped_count == 1 %>
-            <p class="uk-text-meta"><%= item.size %> entries</p>
+            <p class="uk-text-meta"><%= item.content_label %></p>
           <% else %>
             <p class="uk-text-meta"><%= grouped_count %> new entries</p>
           <% end %>

src/views/components/dots-scripts.html.ecr

@@ -0,0 +1,3 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/4.0.11/dotdotdot.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
+<script src="<%= base_url %>js/dots.js"></script>

src/views/components/head.html.ecr

@@ -1,18 +1,15 @@
 <head>
   <meta charset="utf-8">
   <meta name="X-UA-Compatible" content="IE=edge">
-  <title>Mango</title>
+  <title>Mango - <%= page.split("-").map(&.capitalize).join(" ") %></title>
   <meta name="description" content="Mango - Manga Server and Web Reader">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="<%= base_url %>css/uikit.css" />
   <link rel="stylesheet" href="<%= base_url %>css/mango.css" />
   <link rel="icon" href="<%= base_url %>favicon.ico">
 
-  <script src="https://polyfill.io/v3/polyfill.min.js?features=matchMedia%2Cdefault&flags=gated"></script>
-  <script defer src="<%= base_url %>js/fontawesome.min.js"></script>
-  <script defer src="<%= base_url %>js/solid.min.js"></script>
+  <script src="https://polyfill.io/v3/polyfill.min.js?features=MutationObserver%2Cdefault%2CmatchMedia&flats=gated"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.5.0/dist/alpine.min.js"></script>
-  <script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.5.0/dist/alpine-ie11.min.js" defer></script>
-  <script src="<%= base_url %>js/theme.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js"></script>
+  <script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine-ie11.min.js" defer></script>
+  <script src="<%= base_url %>js/common.js"></script>
 </head>

src/views/components/uikit.html.ecr

@@ -0,0 +1,2 @@
+<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.9/dist/js/uikit.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.9/dist/js/uikit-icons.min.js"></script>

src/views/download-manager.html.ecr

@@ -1,32 +1,68 @@
-<div class="uk-margin">
-  <div id="actions" class="uk-margin">
-    <button class="uk-button uk-button-default" onclick="remove()">Delete Completed Tasks</button>
-    <button class="uk-button uk-button-default" onclick="refresh()">Retry Failed Tasks</button>
-    <button class="uk-button uk-button-default" onclick="load()">Refresh Queue</button>
-    <button class="uk-button uk-button-default" onclick="toggle()" id="pause-resume-btn" hidden></button>
-  </div>
-  <div id="config" class="uk-margin">
-    <label><input id="auto-refresh" class="uk-checkbox" type="checkbox" checked> Auto Refresh</label>
+<div x-data="component()" x-init="init()">
+  <div class="uk-margin">
+    <button class="uk-button uk-button-default" @click="jobAction('delete')">Delete Completed Tasks</button>
+    <button class="uk-button uk-button-default" @click="jobAction('retry')">Retry Failed Tasks</button>
+    <button class="uk-button uk-button-default" @click="load()" :disabled="loading">Refresh Queue</button>
+    <button class="uk-button uk-button-default" x-show="paused !== undefined" x-text="paused ? 'Resume Download' : 'Pause Download'" @click="toggle()" :disabled="toggling"></button>
   </div>
+  <table class="uk-table uk-table-striped uk-overflow-auto">
+    <thead>
+      <tr>
+        <th>Chapter</th>
+        <th>Manga</th>
+        <th>Progress</th>
+        <th>Time</th>
+        <th>Status</th>
+        <th>Plugin</th>
+        <th>Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      <template x-for="job in jobs" :key="job">
+        <tr :id="`chapter-${job.id}`">
+
+          <template x-if="job.plugin_id">
+            <td x-text="job.title"></td>
+          </template>
+          <template x-if="!job.plugin_id">
+            <td><a :href="`<%= mangadex_base_url %>/chapter/${job.id}`" x-text="job.title"></td>
+          </template>
+
+          <template x-if="job.plugin_id">
+            <td x-text="job.manga_title"></td>
+          </template>
+          <template x-if="!job.plugin_id">
+            <td><a :href="`<%= mangadex_base_url %>/manga/${job.manga_id}`" x-text="job.manga_title"></td>
+          </template>
+
+          <td x-text="`${job.success_count}/${job.pages}`"></td>
+          <td x-text="`${moment(job.time).fromNow()}`"></td>
+
+          <td>
+            <span :class="statusClass(job.status)" x-text="job.status"></span>
+            <template x-if="job.status_message.length > 0">
+              <div class="uk-inline">
+                <span uk-icon="info"></span>
+                <div uk-dropdown x-text="job.status_message" style="white-space: pre-line;"></div>
+              </div>
+            </template>
+          </td>
+
+          <td x-text="`${job.plugin_id || ''}`"></td>
+
+          <td>
+            <a @click="jobAction('delete', $event)" uk-icon="trash"></a>
+            <template x-if="job.status_message.length > 0">
+              <a @click="jobAction('retry', $event)" uk-icon="refresh"></a>
+            </template>
+          </td>
+        </tr>
+      </template>
+    </tbody>
+  </table>
 </div>
-<table class="uk-table uk-table-striped uk-overflow-auto">
-  <thead>
-    <tr>
-      <th>Chapter</th>
-      <th>Manga</th>
-      <th>Progress</th>
-      <th>Time</th>
-      <th>Status</th>
-      <th>Plugin</th>
-      <th>Actions</th>
-    </tr>
-  </thead>
-</table>
 
 <% content_for "script" do %>
-  <script>
-    var baseURL = "<%= mangadex_base_url %>".replace(/\/$/, "");
-  </script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
   <script src="<%= base_url %>js/alert.js"></script>
   <script src="<%= base_url %>js/download-manager.js"></script>

src/views/download.html.ecr

@@ -1,81 +1,115 @@
 <h2 class=uk-title>Download from MangaDex</h2>
-<div class="uk-grid-small" uk-grid>
-  <div class="uk-width-3-4">
-    <input id="search-input" class="uk-input" type="text" placeholder="MangaDex manga ID or URL">
+<div x-data="downloadComponent()" x-init="init()">
+  <div class="uk-grid-small" uk-grid>
+    <div class="uk-width-3-4">
+      <input class="uk-input" type="text" placeholder="MangaDex manga ID or URL" x-model="searchInput" @keydown.enter.debounce="search()">
+    </div>
+    <div class="uk-width-1-4">
+      <div uk-spinner class="uk-align-center" x-show="loading" x-cloak></div>
+      <button class="uk-button uk-button-default" x-show="!loading" @click="search()">Search</button>
+    </div>
   </div>
-  <div class="uk-width-1-4">
-    <div id="spinner" uk-spinner class="uk-align-center" hidden></div>
-    <button id="search-btn" class="uk-button uk-button-default" onclick="search()">Search</button>
+
+  <div x-show="data && data.chapters" x-cloak>
+    <div class"uk-grid-small" uk-grid style="margin-top:40px">
+      <div class="uk-width-1-4@s">
+        <img :src="data.mainCover">
+      </div>
+      <div class="uk-width-1-4@s">
+        <p>Title: <a :href="`<%= mangadex_base_url %>/manga/${data.id}`" x-text="data.title"></a></p>
+        <p x-text="`Artist: ${data.artist}`"></p>
+        <p x-text="`Author: ${data.author}`"></p>
+      </div>
+      <div class="uk-form-stacked uk-width-1-2@s" id="filters">
+        <p class="uk-text-lead uk-margin-remove-bottom">Filter Chapters</p>
+        <p class="uk-text-meta uk-margin-remove-top" x-text="`${chapters.length} chapters found`"></p>
+        <div class="uk-margin">
+          <label class="uk-form-label">Language</label>
+          <div class="uk-form-controls">
+            <select class="uk-select filter-field" x-model="langChoice" @change="filtersUpdated()">
+              <template x-for="lang in languages" :key="lang">
+                <option x-text="lang"></option>
+              </template>
+            </select>
+          </div>
+        </div>
+
+        <div class="uk-margin">
+          <label class="uk-form-label">Group</label>
+          <div class="uk-form-controls">
+            <select class="uk-select filter-field" x-model="groupChoice" @change="filtersUpdated()">
+              <template x-for="group in groups" :key="group">
+                <option x-text="group"></option>
+              </template>
+            </select>
+          </div>
+        </div>
+
+        <div class="uk-margin">
+          <label class="uk-form-label">Volume</label>
+          <div class="uk-form-controls">
+            <input class="uk-input filter-field" type="text" placeholder="e.g., 127, 10-14, >30, <=212, or leave it empty." x-model="volumeRange" @keydown.enter="filtersUpdated()">
+          </div>
+        </div>
+
+        <div class="uk-margin">
+          <label class="uk-form-label">Chapter</label>
+          <div class="uk-form-controls">
+            <input class="uk-input filter-field" type="text" placeholder="e.g., 127, 10-14, >30, <=212, or leave it empty." x-model="chapterRange" @keydown.enter="filtersUpdated()">
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="uk-margin">
+      <div class="uk-margin">
+        <button class="uk-button uk-button-default" @click="selectAll()">Select All</button>
+        <button class="uk-button uk-button-default" @click="clearSelection()">Clear Selections</button>
+        <button class="uk-button uk-button-primary" @click="download()" x-show="!addingToDownload">Download Selected</button>
+        <div uk-spinner class="uk-margin-left" x-show="addingToDownload"></div>
+      </div>
+      <p class="uk-text-meta">Click on a table row to select the chapter. Drag your mouse over multiple rows to select them all. Hold Ctrl to make multiple non-adjacent selections.</p>
+    </div>
+    <p x-text="`Mango can only list ${chaptersLimit} chapters, but we found ${chapters.length} chapters. Please use the filter options above to narrow down your search.`" x-show="chapters.length > chaptersLimit"></p>
+    <table class="uk-table uk-table-striped uk-overflow-auto" x-show="chapters.length <= chaptersLimit">
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Title</th>
+          <th>Language</th>
+          <th>Group</th>
+          <th>Volume</th>
+          <th>Chapter</th>
+          <th>Timestamp</th>
+        </tr>
+      </thead>
+
+      <template x-if="chapters.length <= chaptersLimit">
+        <tbody id="selectable">
+          <template x-for="chp in chapters" :key="chp">
+            <tr class="ui-widget-content">
+              <td><a :href="`<%= mangadex_base_url %>/chapter/${chp.id}`" x-text="chp.id"></a></td>
+              <td x-text="chp.title"></td>
+              <td x-text="chp.language"></td>
+              <td>
+                <template x-for="grp in Object.entries(chp.groups)">
+                  <div>
+                    <a :href="`<%= mangadex_base_url %>/group/${grp[1]}`" x-text="grp[0]"></a>
+                  </div>
+                </template>
+              </td>
+              <td x-text="chp.volume"></td>
+              <td x-text="chp.chapter"></td>
+              <td x-text="`${moment.unix(chp.timestamp).fromNow()}`"></td>
+            </tr>
+          </template>
+        </tbody>
+      </template>
+    </table>
   </div>
 </div>
-<div class"uk-grid-small" uk-grid hidden id="manga-details">
-  <div class="uk-width-1-4@s">
-    <img id="cover">
-  </div>
-  <div class="uk-width-1-4@s">
-    <p id="title"></p>
-    <p id="artist"></p>
-    <p id="author"></p>
-  </div>
-  <div id="filter-form" class="uk-form-stacked uk-width-1-2@s" hidden>
-    <p class="uk-text-lead uk-margin-remove-bottom">Filter Chapters</p>
-    <p class="uk-text-meta uk-margin-remove-top" id="count-text"></p>
-    <div class="uk-margin">
-      <label class="uk-form-label" for="lang-select">Language</label>
-      <div class="uk-form-controls">
-        <select class="uk-select filter-field" id="lang-select">
-        </select>
-      </div>
-    </div>
-    <div class="uk-margin">
-      <label class="uk-form-label" for="group-select">Group</label>
-      <div class="uk-form-controls">
-        <select class="uk-select filter-field" id="group-select">
-        </select>
-      </div>
-    </div>
-    <div class="uk-margin">
-      <label class="uk-form-label" for="volume-range">Volume</label>
-      <div class="uk-form-controls">
-        <input class="uk-input filter-field" type="text" id="volume-range" placeholder="e.g., 127, 10-14, >30, <=212, or leave it empty.">
-      </div>
-    </div>
-    <div class="uk-margin">
-      <label class="uk-form-label" for="chapter-range">Chapter</label>
-      <div class="uk-form-controls">
-        <input class="uk-input filter-field" type="text" id="chapter-range" placeholder="e.g., 127, 10-14, >30, <=212, or leave it empty.">
-      </div>
-    </div>
-  </div>
-</div>
-<div id="selection-controls" class="uk-margin" hidden>
-  <div class="uk-margin">
-    <button class="uk-button uk-button-default" onclick="selectAll()">Select All</button>
-    <button class="uk-button uk-button-default" onclick="unselect()">Clear Selections</button>
-    <button class="uk-button uk-button-primary" id="download-btn" onclick="download()">Download Selected</button>
-    <div id="download-spinner" uk-spinner class="uk-margin-left" hidden></div>
-  </div>
-  <p class="uk-text-meta">Click on a table row to select the chapter. Drag your mouse over multiple rows to select them all. Hold Ctrl to make multiple non-adjacent selections.</p>
-</div>
-<p id="filter-notification" hidden></p>
-<table class="uk-table uk-table-striped uk-overflow-auto" hidden>
-  <thead>
-    <tr>
-      <th>ID</th>
-      <th>Title</th>
-      <th>Language</th>
-      <th>Group</th>
-      <th>Volume</th>
-      <th>Chapter</th>
-      <th>Timestamp</th>
-    </tr>
-  </thead>
-</table>
 
 <% content_for "script" do %>
-  <script>
-    var baseURL = "<%= mangadex_base_url %>".replace(/\/$/, "");
-  </script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   <script src="<%= base_url %>js/alert.js"></script>

src/views/home.html.ecr

@@ -11,7 +11,7 @@
       <dd>Update <code>config.yml</code> located at: <code><%= Config.current.path %></code></dd>
       <dt style="font-weight: 500;">Can't see your files yet?</dt>
       <dd>
-      You must wait <%= Config.current.scan_interval %> minutes for the library scan to complete
+      You must wait <%= Config.current.scan_interval_minutes %> minutes for the library scan to complete
       <% if is_admin %>
         , or manually re-scan from <a href="<%= base_url %>admin">Admin</a>
       <% end %>.
@@ -77,8 +77,7 @@
 <%- end -%>
 
 <% content_for "script" do %>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/4.0.11/dotdotdot.js"></script>
-  <script src="<%= base_url %>js/dots.js"></script>
+  <%= render_component "dots-scripts" %>
   <script src="<%= base_url %>js/alert.js"></script>
   <script src="<%= base_url %>js/title.js"></script>
 <% end %>

src/views/layout.html.ecr

@@ -1,89 +1,89 @@
 <!DOCTYPE html>
 <html>
 
-  <%= render_component "head" %>
+    <%= render_component "head" %>
 
-  <body>
-    <div class="uk-offcanvas-content">
-      <div class="uk-navbar-container uk-navbar-transparent" uk-navbar="uk-navbar">
-        <div id="mobile-nav" uk-offcanvas="overlay: true">
-          <div class="uk-offcanvas-bar uk-flex uk-flex-column">
-            <ul class="uk-nav-parent-icon uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
-              <li><a href="<%= base_url %>">Home</a></li>
-              <li><a href="<%= base_url %>library">Library</a></li>
-              <% if is_admin %>
-                <li><a href="<%= base_url %>admin">Admin</a></li>
-                <li class="uk-parent">
-                  <a href="#">Download</a>
-                  <ul class="uk-nav-sub">
-                    <li><a href="<%= base_url %>download">MangaDex</a></li>
-                    <li><a href="<%= base_url %>download/plugins">Plugins</a></li>
-                    <li><a href="<%= base_url %>admin/downloads">Download Manager</a></li>
-                  </ul>
-                </li>
-              <% end %>
-              <hr uk-divider>
-              <li><a onclick="toggleTheme()"><i class="fas fa-adjust"></i></a></li>
-              <li><a href="<%= base_url %>logout">Logout</a></li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="uk-position-top">
-      <div class="uk-navbar-container uk-navbar-transparent" uk-navbar="uk-navbar">
-        <div class="uk-navbar-left uk-hidden@s">
-          <div class="uk-navbar-toggle" uk-navbar-toggle-icon="uk-navbar-toggle-icon" uk-toggle="target: #mobile-nav"></div>
-        </div>
-        <div class="uk-navbar-left uk-visible@s">
-          <a class="uk-navbar-item uk-logo" href="<%= base_url %>"><img src="<%= base_url %>img/icon.png"></a>
-          <ul class="uk-navbar-nav">
-            <li><a href="<%= base_url %>">Home</a></li>
-            <li><a href="<%= base_url %>library">Library</a></li>
-            <% if is_admin %>
-              <li><a href="<%= base_url %>admin">Admin</a></li>
-              <li>
-                <a href="#">Download</a>
-                <div class="uk-navbar-dropdown">
-                  <ul class="uk-nav uk-navbar-dropdown-nav">
-                    <li class="uk-nav-header">Source</li>
-                    <li><a href="<%= base_url %>download">MangaDex</a></li>
-                    <li><a href="<%= base_url %>download/plugins">Plugins</a></li>
-                    <li class="uk-nav-divider"></li>
-                    <li><a href="<%= base_url %>admin/downloads">Download Manager</a></li>
-                  </ul>
+    <body>
+        <div class="uk-offcanvas-content">
+            <div class="uk-navbar-container uk-navbar-transparent" uk-navbar="uk-navbar">
+                <div id="mobile-nav" uk-offcanvas="overlay: true">
+                    <div class="uk-offcanvas-bar uk-flex uk-flex-column">
+                        <ul class="uk-nav-parent-icon uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
+                            <li><a href="<%= base_url %>">Home</a></li>
+                            <li><a href="<%= base_url %>library">Library</a></li>
+                            <li><a href="<%= base_url %>tags">Tags</a></li>
+                            <% if is_admin %>
+                                <li><a href="<%= base_url %>admin">Admin</a></li>
+                                <li class="uk-parent">
+                                    <a href="#">Download</a>
+                                    <ul class="uk-nav-sub">
+                                        <li><a href="<%= base_url %>download">MangaDex</a></li>
+                                        <li><a href="<%= base_url %>download/plugins">Plugins</a></li>
+                                        <li><a href="<%= base_url %>admin/downloads">Download Manager</a></li>
+                                    </ul>
+                                </li>
+                            <% end %>
+                            <hr uk-divider>
+                            <li><a onclick="toggleTheme()"><i class="fas fa-adjust"></i></a></li>
+                            <li><a href="<%= base_url %>logout">Logout</a></li>
+                        </ul>
+                    </div>
                 </div>
-              </li>
-            <% end %>
-          </ul>
+            </div>
         </div>
-        <div class="uk-navbar-right uk-visible@s">
-          <ul class="uk-navbar-nav">
-            <li><a onclick="toggleTheme()"><i class="fas fa-adjust"></i></a></li>
-            <li><a href="<%= base_url %>logout">Logout</a></li>
-          </ul>
+        <div class="uk-position-top">
+            <div class="uk-navbar-container uk-navbar-transparent" uk-navbar="uk-navbar">
+                <div class="uk-navbar-left uk-hidden@s">
+                    <div class="uk-navbar-toggle" uk-navbar-toggle-icon="uk-navbar-toggle-icon" uk-toggle="target: #mobile-nav"></div>
+                </div>
+                <div class="uk-navbar-left uk-visible@s">
+                    <a class="uk-navbar-item uk-logo" href="<%= base_url %>"><img src="<%= base_url %>img/icon.png" style="width:90px;height:90px;"></a>
+                    <ul class="uk-navbar-nav">
+                        <li><a href="<%= base_url %>">Home</a></li>
+                        <li><a href="<%= base_url %>library">Library</a></li>
+                        <li><a href="<%= base_url %>tags">Tags</a></li>
+                        <% if is_admin %>
+                            <li><a href="<%= base_url %>admin">Admin</a></li>
+                            <li>
+                                <a href="#">Download</a>
+                                <div class="uk-navbar-dropdown">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
+                                        <li class="uk-nav-header">Source</li>
+                                        <li><a href="<%= base_url %>download">MangaDex</a></li>
+                                        <li><a href="<%= base_url %>download/plugins">Plugins</a></li>
+                                        <li class="uk-nav-divider"></li>
+                                        <li><a href="<%= base_url %>admin/downloads">Download Manager</a></li>
+                                    </ul>
+                                </div>
+                            </li>
+                        <% end %>
+                    </ul>
+                </div>
+                <div class="uk-navbar-right uk-visible@s">
+                    <ul class="uk-navbar-nav">
+                        <li><a onclick="toggleTheme()"><i class="fas fa-adjust"></i></a></li>
+                        <li><a href="<%= base_url %>logout">Logout</a></li>
+                    </ul>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-    <div class="uk-section uk-section-small">
-    </div>
-    <div class="uk-section uk-section-small" id="main-section">
-      <div class="uk-container uk-container-small">
-        <div id="alert"></div>
-        <%= content %>
-        <div class="uk-visible@m" id="totop-wrapper" x-data="{}" x-show="$('body').height() > 1.5 * $(window).height()">
-          <a href="#" uk-totop uk-scroll></a>
+        <div class="uk-section uk-section-small">
         </div>
-      </div>
-    </div>
-    <script>
-      setTheme();
-      const base_url = "<%= base_url %>";
-    </script>
-    <script src="<%= base_url %>js/uikit.min.js"></script>
-    <script src="<%= base_url %>js/uikit-icons.min.js"></script>
-
-    <%= yield_content "script" %>
-  </body>
+        <div class="uk-section uk-section-small" style="position:relative;">
+            <div class="uk-container uk-container-small">
+                <div id="alert"></div>
+                <%= content %>
+                <div class="uk-visible@m" id="totop-wrapper" x-data="{}" x-show="$('body').height() > 1.5 * $(window).height()">
+                    <a href="#" uk-totop uk-scroll></a>
+                </div>
+            </div>
+        </div>
+        <script>
+            setTheme();
+            const base_url = "<%= base_url %>";
+        </script>
+        <%= render_component "uikit" %>
+        <%= yield_content "script" %>
+    </body>
 
 </html>

src/views/library.html.ecr

@@ -24,8 +24,7 @@
 </div>
 
 <% content_for "script" do %>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/4.0.11/dotdotdot.js"></script>
-  <script src="<%= base_url %>js/dots.js"></script>
+  <%= render_component "dots-scripts" %>
   <script src="<%= base_url %>js/search.js"></script>
   <script src="<%= base_url %>js/sort-items.js"></script>
 <% end %>

src/views/login.html.ecr

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 
+  <% page = "Login" %>
   <%= render_component "head" %>
 
   <body>
@@ -29,8 +30,7 @@
     <script>
       setTheme();
     </script>
-    <script src="<%= base_url %>js/uikit.min.js"></script>
-    <script src="<%= base_url %>js/uikit-icons.min.js"></script>
+    <%= render_component "uikit" %>
   </body>
 
 </html>

src/views/missing-items.html.ecr

@@ -0,0 +1,40 @@
+<div x-data="component()" x-init="load()" x-cloak x-show="!loading">
+  <p x-show="empty" class="uk-text-lead uk-text-center">No missing items found.</p>
+  <div x-show="!empty">
+    <p>The following items were present in your library, but now we can't find them anymore. If you deleted them mistakenly, try to recover the files or folders, put them back to where they were, and rescan the library. Otherwise, you can safely delete them and the associated metadata using the buttons below to free up database space.</p>
+    <button class="uk-button uk-button-danger" @click="rmAll()">Delete All</button>
+    <table class="uk-table uk-table-striped uk-overflow-auto">
+      <thead>
+        <tr>
+          <th>Type</th>
+          <th>Relative Path</th>
+          <th>ID</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <template x-for="title in titles" :key="title">
+          <tr :id="`title-${title.id}`">
+            <td>Title</td>
+            <td x-text="title.path"></td>
+            <td x-text="title.id"></td>
+            <td><a @click="rm($event)" uk-icon="trash"></a></td>
+          </tr>
+        </template>
+        <template x-for="entry in entries" :key="entry">
+          <tr :id="`entry-${entry.id}`">
+            <td>Entry</td>
+            <td x-text="entry.path"></td>
+            <td x-text="entry.id"></td>
+            <td><a @click="rm($event)" uk-icon="trash"></a></td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<% content_for "script" do %>
+  <script src="<%= base_url %>js/alert.js"></script>
+  <script src="<%= base_url %>js/missing-items.js"></script>
+<% end %>

src/views/opds/title.xml.ecr

@@ -29,7 +29,7 @@
         <link rel="http://opds-spec.org/image" href="<%= e.cover_url %>" />
         <link rel="http://opds-spec.org/image/thumbnail" href="<%= e.cover_url %>" />
 
-        <link rel="http://opds-spec.org/acquisition" href="<%= base_url %>opds/download/<%= e.book.id %>/<%= e.id %>" title="Read" type="<%= MIME.from_filename e.zip_path %>" />
+        <link rel="http://opds-spec.org/acquisition" href="<%= base_url %>api/download/<%= e.book.id %>/<%= e.id %>" title="Read" type="<%= MIME.from_filename e.zip_path %>" />
 
         <link type="text/html" rel="alternate" title="Read in Mango" href="<%= base_url %>reader/<%= e.book.id %>/<%= e.id %>" />
         <link type="text/html" rel="alternate" title="Open in Mango" href="<%= base_url %>book/<%= e.book.id %>" />

src/views/reader-error.html.ecr

@@ -21,9 +21,7 @@
 
 <% content_for "script" do %>
   <script>
-    UIkit.modal('#modal').show().then(function() {
-      styleModal();
-    });
+    UIkit.modal('#modal').show();
     UIkit.util.on('#modal', 'hide', function() {
       location.href = "<%= base_url %>book/<%= entry.book.id %>";
     });

src/views/reader.html.ecr

@@ -1,43 +1,62 @@
 <!DOCTYPE html>
 <html class="reader-bg">
 
+  <% page = "Reader" %>
   <%= render_component "head" %>
 
-  <body>
-    <div class="uk-section uk-section-default uk-section-small reader-bg">
+  <body style="position:relative;" x-data="readerComponent()" x-init="init($nextTick)" @resize.window="resized()">
+    <div class="uk-section uk-section-default uk-section-small reader-bg" :style="mode === 'continuous' ? '' : 'padding:0'">
+
+      <div @keydown.window.debounce="keyHandler($event)"></div>
+
       <div class="uk-container uk-container-small">
         <div id="alert"></div>
-        <div id="root" x-data="{
-        loading: true, 
-        msg: 'Loading the web reader. Please wait...',
-        alertClass: 'uk-alert-primary',
-        items: []
-        }">
-          <div x-show="loading">
-            <div :class="alertClass" x-show="msg" uk-alert>
-              <p x-text="msg"></p>
-            </div>
-          </div>
-          <div x-show="!loading" x-cloak>
-            <template x-for="item in items">
-              <img
-                      uk-img
-                      class="uk-align-center"
-                      :data-src="item.url"
-                      :width="item.width"
-                      :height="item.height"
-                      :id="item.id"
-                      @click="showControl($event)"
-                      />
-            </template>
-            <%- if next_entry_url -%>
-              <button id="next-btn" class="uk-align-center uk-button uk-button-primary" @click="nextEntry('<%= next_entry_url %>')">Next Entry</button>
-            <%- else -%>
-              <button id="next-btn" class="uk-align-center uk-button uk-button-primary" @click="redirect('<%= exit_url %>')">Exit Reader</button>
-            <%- end -%>
+        <div x-show="loading">
+          <div :class="alertClass" x-show="msg" uk-alert>
+            <p x-text="msg"></p>
           </div>
         </div>
       </div>
+
+      <div
+        :class="{'uk-container': true, 'uk-container-small': mode === 'continuous', 'uk-container-expand': mode !== 'continuous'}">
+        <div x-show="!loading && mode === 'continuous'" x-cloak>
+          <template x-for="item in items">
+            <img
+              uk-img
+              :class="{'uk-align-center': true, 'spine': item.width < 50}"
+              :style="item.style"
+              :data-src="item.url"
+              :width="item.width"
+              :height="item.height"
+              :id="item.id"
+              @click="showControl($event)"
+              />
+          </template>
+          <%- if next_entry_url -%>
+            <button id="next-btn" class="uk-align-center uk-button uk-button-primary" @click="nextEntry('<%= next_entry_url %>')">Next Entry</button>
+          <%- else -%>
+            <button id="next-btn" class="uk-align-center uk-button uk-button-primary" @click="exitReader('<%= exit_url %>', true)">Exit Reader</button>
+          <%- end -%>
+        </div>
+
+        <div x-cloak x-show="!loading && mode !== 'continuous'" class="uk-flex uk-flex-middle" style="height:100vh">
+
+          <img uk-img :class="{
+                               'uk-align-center': true, 
+                               'uk-animation-slide-left': flipAnimation === 'left', 
+                               'uk-animation-slide-right': flipAnimation === 'right'
+                               }" :data-src="curItem.url" :width="curItem.width" :height="curItem.height" :id="curItem.id" @click="showControl($event)" :style="`
+                                                                                                                                                                 width:${mode === 'width' ? '100vw' : 'auto'}; 
+                                                                                                                                                                 height:${mode === 'height' ? '100vh' : 'auto'}; 
+                                                                                                                                                                 margin-bottom:0;
+                                                                                                                                                                 `" />
+
+          <div style="position:absolute;z-index:1; top:0;left:0; width:30%;height:100%;" @click="flipPage(false)"></div>
+          <div style="position:absolute;z-index:1; top:0;right:0; width:30%;height:100%;" @click="flipPage(true)"></div>
+        </div>
+
+      </div>
     </div>
 
     <div id="modal-sections" class="uk-flex-top" uk-modal>
@@ -52,38 +71,47 @@
             <p id="progress-label"></p>
           </div>
           <div class="uk-margin">
-            <label class="uk-form-label" for="form-stacked-select">Jump to page</label>
+            <label class="uk-form-label" for="page-select">Jump to page</label>
             <div class="uk-form-controls">
-              <select id="page-select" class="uk-select">
+              <select id="page-select" class="uk-select" @change="pageChanged()">
                 <%- (1..entry.pages).each do |p| -%>
                   <option value="<%= p %>"><%= p %></option>
                 <%- end -%>
               </select>
             </div>
           </div>
+          <div class="uk-margin">
+            <label class="uk-form-label" for="mode-select">Mode</label>
+            <div class="uk-form-controls">
+              <select id="mode-select" class="uk-select" @change="modeChanged($nextTick)">
+                <option value="continuous">Continuous</option>
+                <option value="paged">Paged</option>
+              </select>
+            </div>
+          </div>
         </div>
         <div class="uk-modal-footer uk-text-right">
-          <button class="uk-button uk-button-danger" type="button" onclick="redirect('<%= exit_url %>')">Exit Reader</button>
+          <button class="uk-button uk-button-danger" type="button" @click="exitReader('<%= exit_url %>')">Exit Reader</button>
         </div>
       </div>
     </div>
 
     <script>
       const base_url = "<%= base_url %>";
-      const page = <%= page %>;
+      const page = <%= page_idx %>;
       const tid = "<%= title.id %>";
       const eid = "<%= entry.id %>";
     </script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
+    <%= render_component "uikit" %>
     <script src="<%= base_url %>js/alert.js"></script>
-    <script src="<%= base_url %>js/uikit.min.js"></script>
-    <script src="<%= base_url %>js/uikit-icons.min.js"></script>
     <script src="<%= base_url %>js/reader.js"></script>
   </body>
 
   <style>
 img[data-src][src*='data:image'] { background: white; }
-#root img { width: 100%; }
+img:not(.spine) { width: 100%; }
+.reader-bg { background: black; }
   </style>
 
 </html>

src/views/tag.html.ecr

@@ -0,0 +1,30 @@
+<h2 class=uk-title>Tag: <%= tag %></h2>
+<p class="uk-text-meta"><%= titles.size %> <%= titles.size > 1 ? "titles" : "title" %> tagged</p>
+<div class="uk-grid-small" uk-grid>
+  <div class="uk-margin-bottom uk-width-3-4@s">
+    <form class="uk-search uk-search-default">
+      <span uk-search-icon></span>
+      <input class="uk-search-input" type="search" placeholder="Search">
+    </form>
+  </div>
+  <div class="uk-margin-bottom uk-width-1-4@s">
+    <% hash = {
+      "auto" => "Auto",
+      "time_modified" => "Date Modified",
+      "progress" => "Progress"
+    } %>
+    <%= render_component "sort-form" %>
+  </div>
+</div>
+<div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
+  <% titles.each_with_index do |item, i| %>
+    <% progress = percentage[i] %>
+    <%= render_component "card" %>
+  <% end %>
+</div>
+
+<% content_for "script" do %>
+  <%= render_component "dots-scripts" %>
+  <script src="<%= base_url %>js/search.js"></script>
+  <script src="<%= base_url %>js/sort-items.js"></script>
+<% end %>

src/views/tags.html.ecr

@@ -0,0 +1,8 @@
+<h2 class=uk-title>Tags</h2>
+<p class="uk-text-meta"><%= tags.size %> <%= tags.size > 1 ? "tags" : "tag" %> found</p>
+
+<% tags.each  do |tag| %>
+  <span class="uk-label uk-label-primary" style="padding:2px 5px; margin:0 5px 5px 5px; text-transform:none;">
+    <a class="uk-link-reset" href="<%= base_url %>tags/<%= tag[:encoded_tag] %>"><%= tag[:tag] %> (<%= tag[:count] %> <%= tag[:count] > 1 ? "titles" : "title" %>)</a>
+  </span>
+<% end %>

src/views/title.html.ecr

@@ -1,5 +1,5 @@
 <div>
-  <div id="select-bar" class="uk-card uk-card-body uk-card-default uk-margin-bottom" uk-sticky="offset:10" x-data="{count: 0}" @add.window="count++" @remove.window="count--" x-show="count > 0" style="border:orange;border-style:solid;" x-cloak data-id="<%= title.id %>">
+  <div id="select-bar" class="uk-card uk-card-body uk-card-default uk-margin-bottom" uk-sticky="offset:10" x-data="{count: 0}" @add.window="count++; $dispatch('count', {count: count})" @remove.window="count--; $dispatch('count', {count: count})" x-show="count > 0" style="border:orange;border-style:solid;" x-cloak data-id="<%= title.id %>">
     <div class="uk-child-width-1-3" uk-grid>
       <div>
         <p x-text="count + ' items selected'" style="color:orange"></p>
@@ -32,7 +32,13 @@
   <%- end -%>
   <li class="uk-disabled"><a><%= title.display_name %></a></li>
 </ul>
-<p class="uk-text-meta"><%= title.size %> entries found</p>
+<p class="uk-text-meta"><%= title.content_label %> found</p>
+
+<div class="uk-margin" x-data="tagsComponent()" x-cloak x-init="load(<%= is_admin %>)" x-show="!loading">
+  <select class="tag-select" multiple="multiple" style="width:100%">
+  </select>
+</div>
+
 <div class="uk-grid-small" uk-grid>
   <div class="uk-margin-bottom uk-width-3-4@s">
     <form class="uk-search uk-search-default">
@@ -117,8 +123,10 @@
 </div>
 
 <% content_for "script" do %>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/4.0.11/dotdotdot.js"></script>
-  <script src="<%= base_url %>js/dots.js"></script>
+  <%= render_component "dots-scripts" %>
+  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
+  <link href="<%= base_url %>css/tags.css" rel="stylesheet" />
+  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
   <script src="<%= base_url %>js/alert.js"></script>
   <script src="<%= base_url %>js/title.js"></script>
   <script src="<%= base_url %>js/search.js"></script>