Use yaml-static in Dockerfile

.github/workflows/build.yml

@@ -12,12 +12,12 @@ jobs:
 
     runs-on: ubuntu-latest
     container:
-      image: crystallang/crystal:0.35.1-alpine
+      image: crystallang/crystal:0.36.1-alpine
 
     steps:
     - uses: actions/checkout@v2
     - name: Install dependencies
-      run: apk add --no-cache yarn yaml sqlite-static libarchive-dev libarchive-static acl-static expat-static zstd-static lz4-static bzip2-static libjpeg-turbo-dev libpng-dev tiff-dev
+      run: apk add --no-cache yarn yaml-static sqlite-static libarchive-dev libarchive-static acl-static expat-static zstd-static lz4-static bzip2-static libjpeg-turbo-dev libpng-dev tiff-dev
     - name: Build
       run: make static || make static
     - name: Linter

Dockerfile

@@ -1,9 +1,9 @@
-FROM crystallang/crystal:0.35.1-alpine AS builder
+FROM crystallang/crystal:0.36.1-alpine AS builder
 
 WORKDIR /Mango
 
 COPY . .
-RUN apk add --no-cache yarn yaml sqlite-static libarchive-dev libarchive-static acl-static expat-static zstd-static lz4-static bzip2-static libjpeg-turbo-dev libpng-dev tiff-dev
+RUN apk add --no-cache yarn yaml-static sqlite-static libarchive-dev libarchive-static acl-static expat-static zstd-static lz4-static bzip2-static libjpeg-turbo-dev libpng-dev tiff-dev
 RUN make static || make static
 
 FROM library/alpine

Dockerfile.arm32v7

@@ -2,7 +2,7 @@ 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.35.1 && make deps && cd ..
+RUN git clone https://github.com/crystal-lang/crystal && cd crystal && git checkout 0.36.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 ..

Dockerfile.arm64v8

@@ -2,7 +2,7 @@ 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.35.1 && make deps && cd ..
+RUN git clone https://github.com/crystal-lang/crystal && cd crystal && git checkout 0.36.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 ..

README.md

@@ -52,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.20.1
+  Mango - Manga Server and Web Reader. Version 0.22.0
 
   Usage:
 
@@ -75,6 +75,7 @@ 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
@@ -89,14 +90,16 @@ 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://api.mangadex.org/v2
   download_wait_seconds: 5
   download_retries: 4
   download_queue_db_path: ~/mango/queue.db
   chapter_rename_rule: '[Vol.{volume} ][Ch.{chapter} ]{title|id}'
   manga_rename_rule: '{title}'
+  subscription_update_interval_hours: 24
 ```
 
 - `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

migration/md_account.11.cr

@@ -0,0 +1,20 @@
+class CreateMangaDexAccount < MG::Base
+  def up : String
+    <<-SQL
+    CREATE TABLE md_account (
+      username TEXT NOT NULL PRIMARY KEY,
+      token TEXT NOT NULL,
+      expire INTEGER NOT NULL,
+      FOREIGN KEY (username) REFERENCES users (username)
+        ON UPDATE CASCADE
+        ON DELETE CASCADE
+    );
+    SQL
+  end
+
+  def down : String
+    <<-SQL
+    DROP TABLE md_account;
+    SQL
+  end
+end

migration/subscription.12.cr

@@ -0,0 +1,31 @@
+class CreateSubscription < MG::Base
+  def up : String
+    # We allow multiple subscriptions for the same manga.
+    # This can be useful for example when you want to download from multiple
+    #   groups.
+    <<-SQL
+    CREATE TABLE subscription (
+      id INTEGER PRIMARY KEY,
+      manga_id INTEGER NOT NULL,
+      language TEXT,
+      group_id INTEGER,
+      min_volume INTEGER,
+      max_volume INTEGER,
+      min_chapter INTEGER,
+      max_chapter INTEGER,
+      last_checked INTEGER NOT NULL,
+      created_at INTEGER NOT NULL,
+      username TEXT NOT NULL,
+      FOREIGN KEY (username) REFERENCES users (username)
+        ON UPDATE CASCADE
+        ON DELETE CASCADE
+    );
+    SQL
+  end
+
+  def down : String
+    <<-SQL
+    DROP TABLE subscription;
+    SQL
+  end
+end

public/css/mango.less

@@ -34,9 +34,11 @@
 	.uk-card-body {
 		padding: 20px;
 		.uk-card-title {
-			max-height: 3em;
 			font-size: 1rem;
 		}
+		.uk-card-title:not(.free-height) {
+			max-height: 3em;
+		}
 	}
 }
 

public/css/uikit.less

@@ -43,3 +43,22 @@
 @internal-list-bullet-image:                     "../img/list-bullet.svg";
 @internal-accordion-open-image:                  "../img/accordion-open.svg";
 @internal-accordion-close-image:                 "../img/accordion-close.svg";
+
+.hook-card-default() {
+	.uk-light & {
+		background: @card-secondary-background;
+		color: @card-secondary-color;
+	}
+}
+
+.hook-card-default-title() {
+	.uk-light & {
+		color: @card-secondary-title-color;
+	}
+}
+
+.hook-card-default-hover() {
+	.uk-light & {
+		background-color: @card-secondary-hover-background;
+	}
+}

public/js/common.js

@@ -117,14 +117,10 @@ const setTheme = (theme) => {
 	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');
 	}
 };

public/js/download.js

@@ -3,9 +3,12 @@ const downloadComponent = () => {
 		chaptersLimit: 1000,
 		loading: false,
 		addingToDownload: false,
+		searchAvailable: false,
 		searchInput: '',
 		data: {},
 		chapters: [],
+		mangaAry: undefined, // undefined: not searching; []: searched but no result
+		candidateManga: {},
 		langChoice: 'All',
 		groupChoice: 'All',
 		chapterRange: '',
@@ -48,7 +51,21 @@ const downloadComponent = () => {
 				childList: true,
 				subtree: true
 			});
+
+			$.getJSON(`${base_url}api/admin/mangadex/expires`)
+				.done((data) => {
+					if (data.error) {
+						alert('danger', 'Failed to check MangaDex integration status. Error: ' + data.error);
+						return;
+					}
+					if (data.expires && data.expires > Math.floor(Date.now() / 1000))
+						this.searchAvailable = true;
+				})
+				.fail((jqXHR, status) => {
+					alert('danger', `Failed to check MangaDex integration status. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+				})
 		},
+
 		filtersUpdated() {
 			if (!this.data.chapters)
 				this.chapters = [];
@@ -90,10 +107,11 @@ const downloadComponent = () => {
 			console.log('filtered chapters:', _chapters);
 			this.chapters = _chapters;
 		},
+
 		search() {
 			if (this.loading || this.searchInput === '') return;
-			this.loading = true;
 			this.data = {};
+			this.mangaAry = undefined;
 
 			var int_id = -1;
 			try {
@@ -103,29 +121,54 @@ const downloadComponent = () => {
 			} 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;
+
+			if (!isNaN(int_id) && int_id > 0) {
+				// The input is a positive integer. We treat it as an ID.
+				this.loading = true;
+				$.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;
+						}
+
+						this.data = data;
+						this.chapters = data.chapters;
+						this.mangaAry = undefined;
+					})
+					.fail((jqXHR, status) => {
+						alert('danger', `Failed to get manga info. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+					})
+					.always(() => {
+						this.loading = false;
+					});
+			} else {
+				if (!this.searchAvailable) {
+					alert('danger', 'Please make sure you are using a valid manga ID or manga URL from Mangadex. If you are trying to search MangaDex with a search term, please log in to MangaDex first by going to "Admin -> Connect to MangaDex".');
+					return;
+				}
+
+				// Search as a search term
+				this.loading = true;
+				$.getJSON(`${base_url}api/admin/mangadex/search?${$.param({
+					query: this.searchInput
+				})}`)
+					.done((data) => {
+						if (data.error) {
+							alert('danger', `Failed to search MangaDex. Error: ${data.error}`);
+							return;
+						}
+
+						this.mangaAry = data.manga;
+						this.data = {};
+					})
+					.fail((jqXHR, status) => {
+						alert('danger', `Failed to search MangaDex. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+					})
+					.always(() => {
+						this.loading = false;
+					});
 			}
-
-			$.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;
-					}
-
-					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;
-				});
-
 		},
 
 		parseRange(str) {
@@ -217,9 +260,7 @@ const downloadComponent = () => {
 						}
 						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';
-						});
+						alert('success', `${successCount} of ${successCount + failCount} chapters added to the download queue. You can view and manage your download queue on the <a href="${base_url}admin/downloads">download manager page</a>.`);
 					})
 					.fail((jqXHR, status) => {
 						alert('danger', `Failed to add chapters to the download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
@@ -228,6 +269,111 @@ const downloadComponent = () => {
 						this.addingToDownload = false;
 					});
 			});
+		},
+
+		chooseManga(manga) {
+			this.candidateManga = manga;
+			UIkit.modal($('#modal').get(0)).show();
+		},
+
+		confirmManga(id) {
+			UIkit.modal($('#modal').get(0)).hide();
+			this.searchInput = id;
+			this.search();
+		},
+
+		subscribe(langConfirmed = false, groupConfirmed = false) {
+			const filters = {
+				manga: this.data.id,
+				language: this.langChoice === 'All' ? null : this.langChoice,
+				group: this.groupChoice === 'All' ? null : this.groupChoice,
+				volume: this.volumeRange === '' ? null : this.volumeRange,
+				chapter: this.chapterRange === '' ? null : this.chapterRange
+			};
+
+			// Get group ID
+			if (filters.group) {
+				this.data.chapters.forEach(chp => {
+					const gid = chp.groups[filters.group];
+					if (gid) {
+						filters.groupId = gid;
+						return;
+					}
+				});
+			}
+
+			// Parse range values
+			if (filters.volume) {
+				[filters.volumeMin, filters.volumeMax] = this.parseRange(filters.volume);
+			}
+			if (filters.chapter) {
+				[filters.chapterMin, filters.chapterMax] = this.parseRange(filters.chapter);
+			}
+
+			if (!filters.language && !langConfirmed) {
+				UIkit.modal.confirm('You didn\'t specify a language in the filtering rules. This might cause Mango to download chapters that are not in your preferred language. Are you sure you want to continue?', {
+					labels: {
+						ok: 'Yes',
+						cancel: 'Cancel'
+					}
+				}).then(() => {
+					this.subscribe(true, groupConfirmed);
+				});
+				return;
+			}
+
+			if (!filters.group && !groupConfirmed) {
+				UIkit.modal.confirm('You didn\'t specify a group in the filtering rules. This might cause Mango to download multiple versions of the same chapter. Are you sure you want to continue?', {
+					labels: {
+						ok: 'Yes',
+						cancel: 'Cancel'
+					}
+				}).then(() => {
+					this.subscribe(langConfirmed, true);
+				});
+				return;
+			}
+
+			const mangaURL = `${mangadex_base_url}/manga/${filters.manga}`;
+
+			console.log(filters);
+			UIkit.modal.confirm(`All <strong>FUTURE</strong> chapters matching the following filters will be downloaded:<br>
+			<ul>
+			<li>Manga ID: ${filters.manga}</li>
+			<li>Language: ${filters.language || 'all'}</li>
+			<li>Group: ${filters.group || 'all'}</li>
+			<li>Volume: ${filters.volume || 'all'}</li>
+			<li>Chapter: ${filters.chapter || 'all'}</li>
+			</ul>
+
+			<strong>IMPORTANT:</strong> Please make sure you are following the manga on MangaDex, otherwise Mango won't be able to receive any updates. To follow it, visit <a href="${mangaURL}">${mangaURL}</a> and click "Follow".
+				`, {
+				labels: {
+					ok: 'Confirm',
+					cancel: 'Cancel'
+				}
+			}).then(() => {
+				$.ajax({
+						type: 'POST',
+						url: `${base_url}api/admin/mangadex/subscriptions`,
+						data: JSON.stringify({
+							subscription: filters
+						}),
+						contentType: "application/json",
+						dataType: 'json'
+					})
+					.done(data => {
+						console.log(data);
+						if (data.error) {
+							alert('danger', `Failed to subscribe. Error: ${data.error}`);
+							return;
+						}
+						alert('success', `You've successfully subscribed to this manga! You can view and manage your subscriptions on the <a href="${base_url}download/subscription">subscription manager page</a>.`);
+					})
+					.fail((jqXHR, status) => {
+						alert('danger', `Failed to subscribe. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+					});
+			});
 		}
 	};
 };

public/js/mangadex.js

@@ -0,0 +1,61 @@
+const component = () => {
+	return {
+		username: '',
+		password: '',
+		expires: undefined,
+		loading: true,
+		loggingIn: false,
+
+		init() {
+			this.loading = true;
+			$.ajax({
+					type: 'GET',
+					url: `${base_url}api/admin/mangadex/expires`,
+					contentType: "application/json",
+				})
+				.done(data => {
+					console.log(data);
+					if (data.error) {
+						alert('danger', `Failed to retrieve MangaDex token status. Error: ${data.error}`);
+						return;
+					}
+					this.expires = data.expires;
+					this.loading = false;
+				})
+				.fail((jqXHR, status) => {
+					alert('danger', `Failed to retrieve MangaDex token status. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+				});
+		},
+		login() {
+			if (!(this.username && this.password)) return;
+			this.loggingIn = true;
+			$.ajax({
+					type: 'POST',
+					url: `${base_url}api/admin/mangadex/login`,
+					contentType: "application/json",
+					dataType: 'json',
+					data: JSON.stringify({
+						username: this.username,
+						password: this.password
+					})
+				})
+				.done(data => {
+					console.log(data);
+					if (data.error) {
+						alert('danger', `Failed to log in. Error: ${data.error}`);
+						return;
+					}
+					this.expires = data.expires;
+				})
+				.fail((jqXHR, status) => {
+					alert('danger', `Failed to log in. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+				})
+				.always(() => {
+					this.loggingIn = false;
+				});
+		},
+		get expired() {
+			return this.expires && moment().diff(moment.unix(this.expires)) > 0;
+		}
+	};
+};

public/js/plugin-download.js

@@ -126,9 +126,7 @@ const download = () => {
 				}
 				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';
-				});
+				alert('success', `${successCount} of ${successCount + failCount} chapters added to the download queue. You can view and manage your download queue on the <a href="${base_url}admin/downloads">download manager page</a>.`);
 			})
 			.fail((jqXHR, status) => {
 				alert('danger', `Failed to add chapters to the download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);

public/js/reader.js

@@ -9,6 +9,8 @@ const readerComponent = () => {
 		flipAnimation: null,
 		longPages: false,
 		lastSavedPage: page,
+		selectedIndex: 0, // 0: not selected; 1: the first page
+		margin: 30,
 
 		/**
 		 * Initialize the component by fetching the page dimensions
@@ -26,7 +28,6 @@ const readerComponent = () => {
 							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;`
 						};
 					});
 
@@ -46,6 +47,11 @@ const readerComponent = () => {
 					const mode = this.mode;
 					this.updateMode(this.mode, page, nextTick);
 					$('#mode-select').val(mode);
+
+					const savedMargin = localStorage.getItem('margin');
+					if (savedMargin) {
+						this.margin = savedMargin;
+					}
 				})
 				.catch(e => {
 					const errMsg = `Failed to get the page dimensions. ${e}`;
@@ -221,10 +227,7 @@ const readerComponent = () => {
 		 */
 		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);
+			this.selectedIndex = idx;
 			UIkit.modal($('#modal-sections')).show();
 		},
 		/**
@@ -263,19 +266,27 @@ const readerComponent = () => {
 			});
 		},
 		/**
-		 * Exits the reader, and optionally sets the reading progress tp 100%
+		 * Exits the reader, and 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);
-			}
+		exitReader(exitUrl) {
 			this.saveProgress(this.items.length, () => {
 				this.redirect(exitUrl);
 			});
+		},
+
+		/**
+		 * Handles the `change` event for the entry selector
+		 */
+		entryChanged() {
+			const id = $('#entry-select').val();
+			this.redirect(`${base_url}reader/${tid}/${id}`);
+		},
+
+		marginChanged() {
+			localStorage.setItem('margin', this.margin);
+			this.toPage(this.selectedIndex);
 		}
 	};
 }

public/js/subscription.js

@@ -0,0 +1,82 @@
+const component = () => {
+	return {
+		available: undefined,
+		subscriptions: [],
+
+		init() {
+			$.getJSON(`${base_url}api/admin/mangadex/expires`)
+				.done((data) => {
+					if (data.error) {
+						alert('danger', 'Failed to check MangaDex integration status. Error: ' + data.error);
+						return;
+					}
+					this.available = Boolean(data.expires && data.expires > Math.floor(Date.now() / 1000));
+
+					if (this.available) this.getSubscriptions();
+				})
+				.fail((jqXHR, status) => {
+					alert('danger', `Failed to check MangaDex integration status. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+				})
+		},
+
+		getSubscriptions() {
+			$.getJSON(`${base_url}api/admin/mangadex/subscriptions`)
+				.done(data => {
+					if (data.error) {
+						alert('danger', 'Failed to get subscriptions. Error: ' + data.error);
+						return;
+					}
+					this.subscriptions = data.subscriptions;
+				})
+				.fail((jqXHR, status) => {
+					alert('danger', `Failed to get subscriptions. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+				})
+		},
+
+		rm(event) {
+			const id = event.currentTarget.parentNode.getAttribute('data-id');
+			$.ajax({
+					type: 'DELETE',
+					url: `${base_url}api/admin/mangadex/subscriptions/${id}`,
+					contentType: 'application/json'
+				})
+				.done(data => {
+					if (data.error) {
+						alert('danger', `Failed to delete subscription. Error: ${data.error}`);
+					}
+					this.getSubscriptions();
+				})
+				.fail((jqXHR, status) => {
+					alert('danger', `Failed to delete subscription. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+				});
+		},
+
+		check(event) {
+			const id = event.currentTarget.parentNode.getAttribute('data-id');
+			$.ajax({
+					type: 'POST',
+					url: `${base_url}api/admin/mangadex/subscriptions/check/${id}`,
+					contentType: 'application/json'
+				})
+				.done(data => {
+					if (data.error) {
+						alert('danger', `Failed to check subscription. Error: ${data.error}`);
+						return;
+					}
+					alert('success', 'Mango is now checking the subscription for updates. This might take a while, but you can safely leave the page.');
+				})
+				.fail((jqXHR, status) => {
+					alert('danger', `Failed to check subscription. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+				});
+		},
+
+		formatRange(min, max) {
+			if (!isNaN(min) && isNaN(max)) return `≥ ${min}`;
+			if (isNaN(min) && !isNaN(max)) return `≤ ${max}`;
+			if (isNaN(min) && isNaN(max)) return 'All';
+
+			if (min === max) return `= ${min}`;
+			return `${min} - ${max}`;
+		}
+	};
+};

shard.lock

@@ -2,7 +2,7 @@ version: 2.0
 shards:
   ameba:
     git: https://github.com/crystal-ameba/ameba.git
-    version: 0.12.1
+    version: 0.14.0
 
   archive:
     git: https://github.com/hkalexling/archive.cr.git
@@ -30,7 +30,7 @@ shards:
 
   http_proxy:
     git: https://github.com/mamantoha/http_proxy.git
-    version: 0.7.1
+    version: 0.8.0
 
   image_size:
     git: https://github.com/hkalexling/image_size.cr.git
@@ -42,7 +42,7 @@ shards:
 
   kemal-session:
     git: https://github.com/kemalcr/kemal-session.git
-    version: 0.12.1
+    version: 0.13.0
 
   kilt:
     git: https://github.com/jeromegn/kilt.git
@@ -50,11 +50,11 @@ shards:
 
   koa:
     git: https://github.com/hkalexling/koa.git
-    version: 0.5.0
+    version: 0.7.0
 
   mangadex:
     git: https://github.com/hkalexling/mangadex.git
-    version: 0.5.0+git.commit.323110c56c2d5134ce4162b27a9b24ec34137fcb
+    version: 0.11.0+git.commit.f5b0d64fbb138879fb9228b6e9ff34ec97c3e824
 
   mg:
     git: https://github.com/hkalexling/mg.git

shard.yml

@@ -1,5 +1,5 @@
 name: mango
-version: 0.20.1
+version: 0.22.0
 
 authors:
   - Alex Ling <hkalexling@gmail.com>
@@ -8,7 +8,7 @@ targets:
   mango:
     main: src/mango.cr
 
-crystal: 0.35.1
+crystal: 0.36.1
 
 license: MIT
 

spec/storage_spec.cr

@@ -8,9 +8,7 @@ describe Storage do
   end
 
   it "deletes user" do
-    with_storage do |storage|
-      storage.delete_user "admin"
-    end
+    with_storage &.delete_user "admin"
   end
 
   it "creates new user" do

spec/util_spec.cr

@@ -21,7 +21,7 @@ describe "compare_numerically" do
   it "sorts like the stack exchange post" do
     ary = ["2", "12", "200000", "1000000", "a", "a12", "b2", "text2",
            "text2a", "text2a2", "text2a12", "text2ab", "text12", "text12a"]
-    ary.reverse.sort { |a, b|
+    ary.reverse.sort! { |a, b|
       compare_numerically a, b
     }.should eq ary
   end
@@ -29,7 +29,7 @@ describe "compare_numerically" do
   # https://github.com/hkalexling/Mango/issues/22
   it "handles numbers larger than Int32" do
     ary = ["14410155591588.jpg", "21410155591588.png", "104410155591588.jpg"]
-    ary.reverse.sort { |a, b|
+    ary.reverse.sort! { |a, b|
       compare_numerically a, b
     }.should eq ary
   end
@@ -56,7 +56,7 @@ 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"]
     sorter = ChapterSorter.new ary
-    ary.reverse.sort do |a, b|
+    ary.reverse.sort! do |a, b|
       sorter.compare a, b
     end.should eq ary
   end

src/config.cr

@@ -5,6 +5,7 @@ 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"
@@ -19,7 +20,6 @@ class Config
   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 = ""
@@ -28,13 +28,15 @@ class Config
   @[YAML::Field(ignore: true)]
   @mangadex_defaults = {
     "base_url"               => "https://mangadex.org",
-    "api_url"                => "https://mangadex.org/api/v2",
+    "api_url"                => "https://api.mangadex.org/v2",
     "download_wait_seconds"  => 5,
     "download_retries"       => 4,
     "download_queue_db_path" => File.expand_path("~/mango/queue.db",
       home: true),
-    "chapter_rename_rule" => "[Vol.{volume} ][Ch.{chapter} ]{title|id}",
-    "manga_rename_rule"   => "{title}",
+    "chapter_rename_rule" => "[Vol.{volume} ]" \
+                             "[Ch.{chapter} ]{title|id}",
+    "manga_rename_rule"                  => "{title}",
+    "subscription_update_interval_hours" => 24,
   }
 
   @@singlet : Config?
@@ -92,15 +94,23 @@ class Config
       raise "Login is disabled, but default username is not set. " \
             "Please set a default username"
     end
+
+    # `Logger.default` is not available yet
+    Log.setup :debug
     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 " \
+                 "v1 in your config file. Please update it to " \
                  "https://api.mangadex.org/v2 to suppress this warning." }
-      mangadex["api_url"] = "https://mangadex.org/api/v2"
+      mangadex["api_url"] = "https://api.mangadex.org/v2"
     end
+    if mangadex["api_url"] =~ /\/api\/v2/
+      Log.warn { "It looks like you are using the outdated MangaDex API " \
+                 "url (mangadex.org/api/v2) in your config file. Please " \
+                 "update it to https://api.mangadex.org/v2 to suppress this " \
+                 "warning." }
+      mangadex["api_url"] = "https://api.mangadex.org/v2"
+    end
+
     mangadex["api_url"] = mangadex["api_url"].to_s.rstrip "/"
     mangadex["base_url"] = mangadex["base_url"].to_s.rstrip "/"
   end

src/library/entry.cr

@@ -86,7 +86,7 @@ class Entry
           SUPPORTED_IMG_TYPES.includes? \
             MIME.from_filename? e.filename
         }
-        .sort { |a, b|
+        .sort! { |a, b|
           compare_numerically a.filename, b.filename
         }
       yield file, entries
@@ -134,10 +134,11 @@ class Entry
     entries[idx + 1]
   end
 
-  def previous_entry
-    idx = @book.entries.index self
+  def previous_entry(username)
+    entries = @book.sorted_entries username
+    idx = entries.index self
     return nil if idx.nil? || idx == 0
-    @book.entries[idx - 1]
+    entries[idx - 1]
   end
 
   def date_added

src/library/library.cr

@@ -42,6 +42,25 @@ class Library
         end
       end
     end
+
+    subscription_interval = Config.current
+      .mangadex["subscription_update_interval_hours"].as Int32
+    unless subscription_interval < 1
+      spawn do
+        loop do
+          subscriptions = Storage.default.subscriptions
+          Logger.info "Checking MangaDex for updates on " \
+                      "#{subscriptions.size} subscriptions"
+          added_count = 0
+          subscriptions.each do |sub|
+            added_count += sub.check_for_updates
+          end
+          Logger.info "Subscription update completed. Added #{added_count} " \
+                      "chapters to the download queue"
+          sleep subscription_interval.hours
+        end
+      end
+    end
   end
 
   def titles
@@ -63,7 +82,7 @@ class Library
   end
 
   def deep_titles
-    titles + titles.map { |t| t.deep_titles }.flatten
+    titles + titles.flat_map &.deep_titles
   end
 
   def to_json(json : JSON::Builder)
@@ -98,7 +117,7 @@ class Library
       .select { |path| File.directory? path }
       .map { |path| Title.new path, "" }
       .select { |title| !(title.entries.empty? && title.titles.empty?) }
-      .sort { |a, b| a.title <=> b.title }
+      .sort! { |a, b| a.title <=> b.title }
       .tap { |_| @title_ids.clear }
       .each do |title|
         @title_hash[title.id] = title
@@ -114,14 +133,14 @@ class Library
 
   def get_continue_reading_entries(username)
     cr_entries = deep_titles
-      .map { |t| t.get_last_read_entry username }
+      .map(&.get_last_read_entry username)
       # Select elements with type `Entry` from the array and ignore all `Nil`s
       .select(Entry)[0...ENTRIES_IN_HOME_SECTIONS]
       .map { |e|
         # Get the last read time of the entry. If it hasn't been started, get
         #   the last read time of the previous entry
         last_read = e.load_last_read username
-        pe = e.previous_entry
+        pe = e.previous_entry username
         if last_read.nil? && pe
           last_read = pe.load_last_read username
         end
@@ -150,14 +169,14 @@ class Library
     recently_added = [] of RA
     last_date_added = nil
 
-    titles.map { |t| t.deep_entries_with_date_added }.flatten
-      .select { |e| e[:date_added] > 1.month.ago }
-      .sort { |a, b| b[:date_added] <=> a[:date_added] }
+    titles.flat_map(&.deep_entries_with_date_added)
+      .select(&.[:date_added].> 1.month.ago)
+      .sort! { |a, b| b[:date_added] <=> a[:date_added] }
       .each do |e|
         break if recently_added.size > 12
         last = recently_added.last?
         if last && e[:entry].book.id == last[:entry].book.id &&
-           (e[:date_added] - last_date_added.not_nil!).duration < 1.day
+           (e[:date_added] - last_date_added.not_nil!).abs < 1.day
           # A NamedTuple is immutable, so we have to cast it to a Hash first
           last_hash = last.to_h
           count = last_hash[:grouped_count].as(Int32)
@@ -188,9 +207,9 @@ class Library
     # If we use `deep_titles`, the start reading section might include `Vol. 2`
     #   when the user hasn't started `Vol. 1` yet
     titles
-      .select { |t| t.load_percentage(username) == 0 }
+      .select(&.load_percentage(username).== 0)
       .sample(ENTRIES_IN_HOME_SECTIONS)
-      .shuffle
+      .shuffle!
   end
 
   def thumbnail_generation_progress
@@ -205,7 +224,7 @@ class Library
     end
 
     Logger.info "Starting thumbnail generation"
-    entries = deep_titles.map(&.deep_entries).flatten.reject &.err_msg
+    entries = deep_titles.flat_map(&.deep_entries).reject &.err_msg
     @entries_count = entries.size
     @thumbnails_count = 0
 

src/library/title.cr

@@ -44,14 +44,14 @@ class Title
 
     mtimes = [@mtime]
     mtimes += @title_ids.map { |e| Library.default.title_hash[e].mtime }
-    mtimes += @entries.map { |e| e.mtime }
+    mtimes += @entries.map &.mtime
     @mtime = mtimes.max
 
     @title_ids.sort! do |a, b|
       compare_numerically Library.default.title_hash[a].title,
         Library.default.title_hash[b].title
     end
-    sorter = ChapterSorter.new @entries.map { |e| e.title }
+    sorter = ChapterSorter.new @entries.map &.title
     @entries.sort! do |a, b|
       sorter.compare a.title, b.title
     end
@@ -92,12 +92,12 @@ class Title
   # Get all entries, including entries in nested titles
   def deep_entries
     return @entries if title_ids.empty?
-    @entries + titles.map { |t| t.deep_entries }.flatten
+    @entries + titles.flat_map &.deep_entries
   end
 
   def deep_titles
     return [] of Title if titles.empty?
-    titles + titles.map { |t| t.deep_titles }.flatten
+    titles + titles.flat_map &.deep_titles
   end
 
   def parents
@@ -138,7 +138,7 @@ class Title
   end
 
   def get_entry(eid)
-    @entries.find { |e| e.id == eid }
+    @entries.find &.id.== eid
   end
 
   def display_name
@@ -217,29 +217,23 @@ class Title
     @entries.each do |e|
       e.save_progress username, e.pages
     end
-    titles.each do |t|
-      t.read_all username
-    end
+    titles.each &.read_all username
   end
 
   # Set the reading progress of all entries and nested libraries to 0%
   def unread_all(username)
-    @entries.each do |e|
-      e.save_progress username, 0
-    end
-    titles.each do |t|
-      t.unread_all username
-    end
+    @entries.each &.save_progress(username, 0)
+    titles.each &.unread_all username
   end
 
   def deep_read_page_count(username) : Int32
     load_progress_for_all_entries(username).sum +
-      titles.map { |t| t.deep_read_page_count username }.flatten.sum
+      titles.flat_map(&.deep_read_page_count username).sum
   end
 
   def deep_total_page_count : Int32
-    entries.map { |e| e.pages }.sum +
-      titles.map { |t| t.deep_total_page_count }.flatten.sum
+    entries.sum(&.pages) +
+      titles.flat_map(&.deep_total_page_count).sum
   end
 
   def load_percentage(username)
@@ -311,13 +305,13 @@ class Title
       ary = @entries.zip(percentage_ary)
         .sort { |a_tp, b_tp| (a_tp[1] <=> b_tp[1]).or \
           compare_numerically a_tp[0].title, b_tp[0].title }
-        .map { |tp| tp[0] }
+        .map &.[0]
     else
       unless opt.method.auto?
         Logger.warn "Unknown sorting method #{opt.not_nil!.method}. Using " \
                     "Auto instead"
       end
-      sorter = ChapterSorter.new @entries.map { |e| e.title }
+      sorter = ChapterSorter.new @entries.map &.title
       ary = @entries.sort do |a, b|
         sorter.compare(a.title, b.title).or \
           compare_numerically a.title, b.title
@@ -383,13 +377,13 @@ class Title
       {entry: e, date_added: da_ary[i]}
     end
     return zip if title_ids.empty?
-    zip + titles.map { |t| t.deep_entries_with_date_added }.flatten
+    zip + titles.flat_map &.deep_entries_with_date_added
   end
 
   def bulk_progress(action, ids : Array(String), username)
     selected_entries = ids
       .map { |id|
-        @entries.find { |e| e.id == id }
+        @entries.find &.id.==(id)
       }
       .select(Entry)
 

src/mangadex/downloader.cr

@@ -49,6 +49,9 @@ module MangaDex
       @queue.set_status Queue::JobStatus::Downloading, job
       begin
         chapter = @client.chapter job.id
+        # We must put the `.pages` call in a rescue block to handle external
+        #   chapters.
+        pages = chapter.pages
       rescue e
         Logger.error e
         @queue.set_status Queue::JobStatus::Error, job
@@ -58,7 +61,7 @@ module MangaDex
         @downloading = false
         return
       end
-      @queue.set_pages chapter.pages.size, job
+      @queue.set_pages pages.size, job
       lib_dir = @library_path
       rename_rule = Rename::Rule.new \
         Config.current.mangadex["manga_rename_rule"].to_s
@@ -69,13 +72,13 @@ module MangaDex
       zip_path = File.join manga_dir, "#{job.title}.cbz.part"
 
       # Find the number of digits needed to store the number of pages
-      len = Math.log10(chapter.pages.size).to_i + 1
+      len = Math.log10(pages.size).to_i + 1
 
       writer = Compress::Zip::Writer.new zip_path
       # Create a buffered channel. It works as an FIFO queue
-      channel = Channel(PageJob).new chapter.pages.size
+      channel = Channel(PageJob).new pages.size
       spawn do
-        chapter.pages.each_with_index do |url, i|
+        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}"
@@ -99,7 +102,7 @@ module MangaDex
 
       spawn do
         page_jobs = [] of PageJob
-        chapter.pages.size.times do
+        pages.size.times do
           page_job = channel.receive
 
           break unless @queue.exists? job

src/mangadex/ext.cr

@@ -35,7 +35,7 @@ module MangaDex
   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 ","
+      hash["groups"] = groups.join(",", &.name)
       rule.render hash
     end
 
@@ -56,5 +56,39 @@ module MangaDex
       hash["full_title"] = JSON::Any.new full_title
       hash.to_json
     end
+
+    # We don't need to rename the manga title here. It will be renamed in
+    #   src/mangadex/downloader.cr
+    def to_job : Queue::Job
+      Queue::Job.new(
+        id.to_s,
+        manga_id.to_s,
+        full_title,
+        manga_title,
+        Queue::JobStatus::Pending,
+        Time.unix timestamp
+      )
+    end
+  end
+
+  struct User
+    def updates_after(time : Time, &block : Chapter ->)
+      page = 1
+      stopped = false
+      until stopped
+        chapters = followed_updates(page: page).chapters
+        return if chapters.empty?
+        chapters.each do |c|
+          if time > Time.unix c.timestamp
+            stopped = true
+            break
+          end
+          yield c
+        end
+        page += 1
+        # Let's not DDOS MangaDex :)
+        sleep 5.seconds
+      end
+    end
   end
 end

src/mango.cr

@@ -8,7 +8,7 @@ require "option_parser"
 require "clim"
 require "tallboy"
 
-MANGO_VERSION = "0.20.1"
+MANGO_VERSION = "0.22.0"
 
 # From http://www.network-science.de/ascii/
 BANNER = %{

src/plugin/plugin.cr

@@ -117,7 +117,7 @@ class Plugin
   def initialize(id : String)
     Plugin.build_info_ary
 
-    @info = @@info_ary.find { |i| i.id == id }
+    @info = @@info_ary.find &.id.== id
     if @info.nil?
       raise Error.new "Plugin with ID #{id} not found"
     end

src/queue.cr

@@ -303,12 +303,12 @@ class Queue
   end
 
   def pause
-    @downloaders.each { |d| d.stopped = true }
+    @downloaders.each &.stopped=(true)
     @paused = true
   end
 
   def resume
-    @downloaders.each { |d| d.stopped = false }
+    @downloaders.each &.stopped=(false)
     @paused = false
   end
 

src/rename.cr

@@ -35,15 +35,15 @@ module Rename
 
   class Group < Base(Pattern | String)
     def render(hash : VHash)
-      return "" if @ary.select(&.is_a? Pattern)
+      return "" if @ary.select(Pattern)
                      .any? &.as(Pattern).render(hash).empty?
-      @ary.map do |e|
+      @ary.join do |e|
         if e.is_a? Pattern
           e.render hash
         else
           e
         end
-      end.join
+      end
     end
   end
 
@@ -129,13 +129,13 @@ module Rename
     end
 
     def render(hash : VHash)
-      str = @ary.map do |e|
+      str = @ary.join do |e|
         if e.is_a? String
           e
         else
           e.render hash
         end
-      end.join.strip
+      end.strip
       post_process str
     end
 

src/routes/admin.cr

@@ -73,5 +73,9 @@ struct AdminRouter
     get "/admin/missing" do |env|
       layout "missing-items"
     end
+
+    get "/admin/mangadex" do |env|
+      layout "mangadex"
+    end
   end
 end

src/routes/api.cr

@@ -10,7 +10,7 @@ struct APIRouter
   macro s(fields)
     {
       {% for field in fields %}
-        {{field}} => "string",
+        {{field}} => String,
       {% end %}
     }
   end
@@ -33,160 +33,49 @@ struct APIRouter
     MD
 
     Koa.cookie_auth "cookie", "mango-sessid-#{Config.current.port}"
-    Koa.global_tag "admin", desc: <<-MD
+    Koa.define_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"
+    Koa.schema "entry", {
+      "pages" => Int32,
+      "mtime" => Int64,
+    }.merge(s %w(zip_path title size id title_id display_name cover_url)),
+      desc: "An entry in a book"
 
-    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,
+    Koa.schema "title", {
+      "mtime"   => Int64,
+      "entries" => ["entry"],
+      "titles"  => ["title"],
+      "parents" => [String],
+    }.merge(s %w(dir title id display_name cover_url)),
       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.schema "result", {
+      "success" => Bool,
+      "error"   => String?,
     }
 
-    Koa.object "progressResult", {
-      "progress" => "number",
-    }
+    Koa.schema("mdChapter", {
+      "id"    => Int64,
+      "group" => {} of String => String,
+    }.merge(s %w(title volume chapter language full_title time
+      manga_title manga_id)),
+      desc: "A MangaDex chapter")
 
-    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.schema "mdManga", {
+      "id"       => Int64,
+      "chapters" => ["mdChapter"],
+    }.merge(s %w(title description author artist cover_url)),
+      desc: "A MangaDex manga"
 
     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.path "page", schema: Int32, desc: "The page number to return (starts from 1)"
+    Koa.response 200, schema: Bytes, media_type: "image/*"
     Koa.response 500, "Page not found or not readable"
+    Koa.tag "reader"
     get "/api/page/:tid/:eid/:page" do |env|
       begin
         tid = env.params.url["tid"]
@@ -212,8 +101,9 @@ struct APIRouter
     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 200, schema: Bytes, media_type: "image/*"
     Koa.response 500, "Page not found or not readable"
+    Koa.tag "library"
     get "/api/cover/:tid/:eid" do |env|
       begin
         tid = env.params.url["tid"]
@@ -238,8 +128,9 @@ struct APIRouter
 
     Koa.describe "Returns the book with title `tid`"
     Koa.path "tid", desc: "Title ID"
-    Koa.response 200, ref: "$title"
+    Koa.response 200, schema: "title"
     Koa.response 404, "Title not found"
+    Koa.tag "library"
     get "/api/book/:tid" do |env|
       begin
         tid = env.params.url["tid"]
@@ -255,14 +146,21 @@ struct APIRouter
     end
 
     Koa.describe "Returns the entire library with all titles and entries"
-    Koa.response 200, ref: "$library"
+    Koa.response 200, schema: {
+      "dir"    => String,
+      "titles" => ["title"],
+    }
+    Koa.tag "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"
+    Koa.tags ["admin", "library"]
+    Koa.response 200, schema: {
+      "milliseconds" => Float64,
+      "titles"       => Int32,
+    }
     post "/api/admin/scan" do |env|
       start = Time.utc
       Library.default.scan
@@ -274,8 +172,10 @@ struct APIRouter
     end
 
     Koa.describe "Returns the thumbnail generation progress between 0 and 1"
-    Koa.tag "admin"
-    Koa.response 200, ref: "$progressResult"
+    Koa.tags ["admin", "library"]
+    Koa.response 200, schema: {
+      "progress" => Float64,
+    }
     get "/api/admin/thumbnail_progress" do |env|
       send_json env, {
         "progress" => Library.default.thumbnail_generation_progress,
@@ -283,7 +183,7 @@ struct APIRouter
     end
 
     Koa.describe "Triggers a thumbnail generation"
-    Koa.tag "admin"
+    Koa.tags ["admin", "library"]
     post "/api/admin/generate_thumbnails" do |env|
       spawn do
         Library.default.generate_thumbnails
@@ -291,8 +191,8 @@ struct APIRouter
     end
 
     Koa.describe "Deletes a user with `username`"
-    Koa.tag "admin"
-    Koa.response 200, ref: "$result"
+    Koa.tags ["admin", "users"]
+    Koa.response 200, schema: "result"
     delete "/api/admin/user/delete/:username" do |env|
       begin
         username = env.params.url["username"]
@@ -319,7 +219,8 @@ struct APIRouter
     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"
+    Koa.response 200, schema: "result"
+    Koa.tag "progress"
     put "/api/progress/:tid/:page" do |env|
       begin
         username = get_username env
@@ -350,8 +251,11 @@ struct APIRouter
     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"
+    Koa.body schema: {
+      "ids" => [String],
+    }, desc: "An array of entry IDs"
+    Koa.response 200, schema: "result"
+    Koa.tag "progress"
     put "/api/bulk_progress/:action/:tid" do |env|
       begin
         username = get_username env
@@ -377,11 +281,11 @@ struct APIRouter
     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.tags ["admin", "library"]
     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"
+    Koa.response 200, schema: "result"
     put "/api/admin/display_name/:tid/:name" do |env|
       begin
         title = (Library.default.get_title env.params.url["tid"])
@@ -408,9 +312,9 @@ struct APIRouter
     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.tags ["admin", "mangadex"]
     Koa.path "id", desc: "A MangaDex manga ID"
-    Koa.response 200, ref: "$mangadexManga"
+    Koa.response 200, schema: "mdManga"
     get "/api/admin/mangadex/manga/:id" do |env|
       begin
         id = env.params.url["id"]
@@ -425,12 +329,17 @@ struct APIRouter
     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"
+    Koa.tags ["admin", "mangadex", "downloader"]
+    Koa.body schema: {
+      "chapters" => ["mdChapter"],
+    }
+    Koa.response 200, schema: {
+      "success" => Int32,
+      "fail"    => Int32,
+    }
     post "/api/admin/mangadex/download" do |env|
       begin
-        chapters = env.params.json["chapters"].as(Array).map { |c| c.as_h }
+        chapters = env.params.json["chapters"].as(Array).map &.as_h
         jobs = chapters.map { |chapter|
           Queue::Job.new(
             chapter["id"].as_i64.to_s,
@@ -457,7 +366,7 @@ struct APIRouter
       interval = (interval_raw.to_i? if interval_raw) || 5
       loop do
         socket.send({
-          "jobs"   => Queue.default.get_all,
+          "jobs"   => Queue.default.get_all.reverse,
           "paused" => Queue.default.paused?,
         }.to_json)
         sleep interval.seconds
@@ -467,17 +376,27 @@ struct APIRouter
     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"
+    Koa.tags ["admin", "downloader"]
+    Koa.response 200, schema: {
+      "success" => Bool,
+      "error"   => String?,
+      "paused"  => Bool?,
+      "jobs?"   => [{
+        "pages"         => Int32,
+        "success_count" => Int32,
+        "fail_count"    => Int32,
+        "time"          => Int64,
+      }.merge(s %w(id manga_id title manga_title status_message status))],
+    }
     get "/api/admin/mangadex/queue" do |env|
       begin
-        jobs = Queue.default.get_all
         send_json env, {
-          "jobs"    => jobs,
+          "jobs"    => Queue.default.get_all.reverse,
           "paused"  => Queue.default.paused?,
           "success" => true,
         }.to_json
       rescue e
+        Logger.error e
         send_json env, {
           "success" => false,
           "error"   => e.message,
@@ -494,10 +413,10 @@ struct APIRouter
 
       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.tags ["admin", "downloader"]
     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"
+    Koa.response 200, schema: "result"
     post "/api/admin/mangadex/queue/:action" do |env|
       begin
         action = env.params.url["action"]
@@ -525,6 +444,7 @@ struct APIRouter
 
         send_json env, {"success" => true}.to_json
       rescue e
+        Logger.error e
         send_json env, {
           "success" => false,
           "error"   => e.message,
@@ -546,8 +466,10 @@ struct APIRouter
       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"
+    Koa.body media_type: "multipart/form-data", schema: {
+      "file" => Bytes,
+    }
+    Koa.response 200, schema: "result"
     post "/api/admin/upload/:target" do |env|
       begin
         target = env.params.url["target"]
@@ -595,6 +517,7 @@ struct APIRouter
 
         raise "No part with name `file` found"
       rescue e
+        Logger.error e
         send_json env, {
           "success" => false,
           "error"   => e.message,
@@ -603,9 +526,18 @@ struct APIRouter
     end
 
     Koa.describe "Lists the chapters in a title from a plugin"
-    Koa.tag "admin"
-    Koa.body ref: "$pluginListBody"
-    Koa.response 200, ref: "$pluginList"
+    Koa.tags ["admin", "downloader"]
+    Koa.query "plugin", schema: String
+    Koa.query "query", schema: String
+    Koa.response 200, schema: {
+      "success"   => Bool,
+      "error"     => String?,
+      "chapters?" => [{
+        "id"    => String,
+        "title" => String,
+      }],
+      "title" => String?,
+    }
     get "/api/admin/plugin/list" do |env|
       begin
         query = env.params.query["query"].as String
@@ -621,6 +553,7 @@ struct APIRouter
           "title"    => title,
         }.to_json
       rescue e
+        Logger.error e
         send_json env, {
           "success" => false,
           "error"   => e.message,
@@ -629,9 +562,19 @@ struct APIRouter
     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"
+    Koa.tags ["admin", "downloader"]
+    Koa.body schema: {
+      "plugin"   => String,
+      "title"    => String,
+      "chapters" => [{
+        "id"    => String,
+        "title" => String,
+      }],
+    }
+    Koa.response 200, schema: {
+      "success" => Int32,
+      "fail"    => Int32,
+    }
     post "/api/admin/plugin/download" do |env|
       begin
         plugin = Plugin.new env.params.json["plugin"].as String
@@ -654,6 +597,7 @@ struct APIRouter
           "fail":    jobs.size - inserted_count,
         }.to_json
       rescue e
+        Logger.error e
         send_json env, {
           "success" => false,
           "error"   => e.message,
@@ -664,7 +608,15 @@ struct APIRouter
     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"
+    Koa.tag "reader"
+    Koa.response 200, schema: {
+      "success"     => Bool,
+      "error"       => String?,
+      "dimensions?" => [{
+        "width"  => Int32,
+        "height" => Int32,
+      }],
+    }
     get "/api/dimensions/:tid/:eid" do |env|
       begin
         tid = env.params.url["tid"]
@@ -679,9 +631,9 @@ struct APIRouter
         send_json env, {
           "success"    => true,
           "dimensions" => sizes,
-          "margin"     => Config.current.page_margin,
         }.to_json
       rescue e
+        Logger.error e
         send_json env, {
           "success" => false,
           "error"   => e.message,
@@ -692,8 +644,9 @@ struct APIRouter
     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 200, schema: Bytes
     Koa.response 404, "Entry not found"
+    Koa.tags ["library", "reader"]
     get "/api/download/:tid/:eid" do |env|
       begin
         title = (Library.default.get_title env.params.url["tid"]).not_nil!
@@ -708,7 +661,12 @@ struct APIRouter
 
     Koa.describe "Gets the tags of a title"
     Koa.path "tid", desc: "A title ID"
-    Koa.response 200, ref: "$tagsResult"
+    Koa.response 200, schema: {
+      "success" => Bool,
+      "error"   => String?,
+      "tags"    => [String?],
+    }
+    Koa.tags ["library", "tags"]
     get "/api/tags/:tid" do |env|
       begin
         title = (Library.default.get_title env.params.url["tid"]).not_nil!
@@ -728,7 +686,12 @@ struct APIRouter
     end
 
     Koa.describe "Returns all tags"
-    Koa.response 200, ref: "$tagsResult"
+    Koa.response 200, schema: {
+      "success" => Bool,
+      "error"   => String?,
+      "tags"    => [String?],
+    }
+    Koa.tags ["library", "tags"]
     get "/api/tags" do |env|
       begin
         tags = Storage.default.list_tags
@@ -747,8 +710,8 @@ struct APIRouter
 
     Koa.describe "Adds a new tag to a title"
     Koa.path "tid", desc: "A title ID"
-    Koa.response 200, ref: "$result"
-    Koa.tag "admin"
+    Koa.response 200, schema: "result"
+    Koa.tags ["admin", "library", "tags"]
     put "/api/admin/tags/:tid/:tag" do |env|
       begin
         title = (Library.default.get_title env.params.url["tid"]).not_nil!
@@ -770,8 +733,8 @@ struct APIRouter
 
     Koa.describe "Deletes a tag from a title"
     Koa.path "tid", desc: "A title ID"
-    Koa.response 200, ref: "$result"
-    Koa.tag "admin"
+    Koa.response 200, schema: "result"
+    Koa.tags ["admin", "library", "tags"]
     delete "/api/admin/tags/:tid/:tag" do |env|
       begin
         title = (Library.default.get_title env.params.url["tid"]).not_nil!
@@ -792,8 +755,16 @@ struct APIRouter
     end
 
     Koa.describe "Lists all missing titles"
-    Koa.response 200, ref: "$missingResult"
-    Koa.tag "admin"
+    Koa.response 200, schema: {
+      "success" => Bool,
+      "error"   => String?,
+      "titles?" => [{
+        "path"      => String,
+        "id"        => String,
+        "signature" => String,
+      }],
+    }
+    Koa.tags ["admin", "library"]
     get "/api/admin/titles/missing" do |env|
       begin
         send_json env, {
@@ -802,6 +773,7 @@ struct APIRouter
           "titles"  => Storage.default.missing_titles,
         }.to_json
       rescue e
+        Logger.error e
         send_json env, {
           "success" => false,
           "error"   => e.message,
@@ -810,8 +782,16 @@ struct APIRouter
     end
 
     Koa.describe "Lists all missing entries"
-    Koa.response 200, ref: "$missingResult"
-    Koa.tag "admin"
+    Koa.response 200, schema: {
+      "success"  => Bool,
+      "error"    => String?,
+      "entries?" => [{
+        "path"      => String,
+        "id"        => String,
+        "signature" => String,
+      }],
+    }
+    Koa.tags ["admin", "library"]
     get "/api/admin/entries/missing" do |env|
       begin
         send_json env, {
@@ -820,6 +800,7 @@ struct APIRouter
           "entries" => Storage.default.missing_entries,
         }.to_json
       rescue e
+        Logger.error e
         send_json env, {
           "success" => false,
           "error"   => e.message,
@@ -828,8 +809,8 @@ struct APIRouter
     end
 
     Koa.describe "Deletes all missing titles"
-    Koa.response 200, ref: "$result"
-    Koa.tag "admin"
+    Koa.response 200, schema: "result"
+    Koa.tags ["admin", "library"]
     delete "/api/admin/titles/missing" do |env|
       begin
         Storage.default.delete_missing_title
@@ -838,6 +819,7 @@ struct APIRouter
           "error"   => nil,
         }.to_json
       rescue e
+        Logger.error e
         send_json env, {
           "success" => false,
           "error"   => e.message,
@@ -846,8 +828,8 @@ struct APIRouter
     end
 
     Koa.describe "Deletes all missing entries"
-    Koa.response 200, ref: "$result"
-    Koa.tag "admin"
+    Koa.response 200, schema: "result"
+    Koa.tags ["admin", "library"]
     delete "/api/admin/entries/missing" do |env|
       begin
         Storage.default.delete_missing_entry
@@ -856,6 +838,7 @@ struct APIRouter
           "error"   => nil,
         }.to_json
       rescue e
+        Logger.error e
         send_json env, {
           "success" => false,
           "error"   => e.message,
@@ -866,8 +849,8 @@ struct APIRouter
     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"
+    Koa.response 200, schema: "result"
+    Koa.tags ["admin", "library"]
     delete "/api/admin/titles/missing/:tid" do |env|
       begin
         tid = env.params.url["tid"]
@@ -877,6 +860,7 @@ struct APIRouter
           "error"   => nil,
         }.to_json
       rescue e
+        Logger.error e
         send_json env, {
           "success" => false,
           "error"   => e.message,
@@ -887,8 +871,8 @@ struct APIRouter
     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"
+    Koa.response 200, schema: "result"
+    Koa.tags ["admin", "library"]
     delete "/api/admin/entries/missing/:eid" do |env|
       begin
         eid = env.params.url["eid"]
@@ -898,6 +882,240 @@ struct APIRouter
           "error"   => nil,
         }.to_json
       rescue e
+        Logger.error e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
+    Koa.describe "Logs the current user into their MangaDex account", <<-MD
+    If successful, returns the expiration date (as a unix timestamp) of the newly created token.
+    MD
+    Koa.body schema: {
+      "username" => String,
+      "password" => String,
+    }
+    Koa.response 200, schema: {
+      "success" => Bool,
+      "error"   => String?,
+      "expires" => Int64?,
+    }
+    Koa.tags ["admin", "mangadex", "users"]
+    post "/api/admin/mangadex/login" do |env|
+      begin
+        username = env.params.json["username"].as String
+        password = env.params.json["password"].as String
+        mango_username = get_username env
+
+        client = MangaDex::Client.from_config
+        client.auth username, password
+
+        Storage.default.save_md_token mango_username, client.token.not_nil!,
+          client.token_expires
+
+        send_json env, {
+          "success" => true,
+          "error"   => nil,
+          "expires" => client.token_expires.to_unix,
+        }.to_json
+      rescue e
+        Logger.error e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
+    Koa.describe "Returns the expiration date (as a unix timestamp) of the mangadex token if it exists"
+    Koa.response 200, schema: {
+      "success" => Bool,
+      "error"   => String?,
+      "expires" => Int64?,
+    }
+    Koa.tags ["admin", "mangadex", "users"]
+    get "/api/admin/mangadex/expires" do |env|
+      begin
+        username = get_username env
+        _, expires = Storage.default.get_md_token username
+
+        send_json env, {
+          "success" => true,
+          "error"   => nil,
+          "expires" => expires.try &.to_unix,
+        }.to_json
+      rescue e
+        Logger.error e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
+    Koa.describe "Searches MangaDex for manga matching `query`", <<-MD
+    Returns an empty list if the current user hasn't logged in to MangaDex.
+    MD
+    Koa.query "query"
+    Koa.response 200, schema: {
+      "success" => Bool,
+      "error"   => String?,
+      "manga?"  => [{
+        "id"          => Int64,
+        "title"       => String,
+        "description" => String,
+        "mainCover"   => String,
+      }],
+    }
+    Koa.tags ["admin", "mangadex"]
+    get "/api/admin/mangadex/search" do |env|
+      begin
+        query = env.params.query["query"]
+
+        send_json env, {
+          "success" => true,
+          "error"   => nil,
+          "manga"   => get_client(env).partial_search query,
+        }.to_json
+      rescue e
+        Logger.error e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
+    Koa.describe "Lists all MangaDex subscriptions"
+    Koa.response 200, schema: {
+      "success"        => Bool,
+      "error"          => String?,
+      "subscriptions?" => [{
+        "id"           => Int64,
+        "username"     => String,
+        "manga_id"     => Int64,
+        "language"     => String?,
+        "group_id"     => Int64?,
+        "min_volume"   => Int64?,
+        "max_volume"   => Int64?,
+        "min_chapter"  => Int64?,
+        "max_chapter"  => Int64?,
+        "last_checked" => Int64,
+        "created_at"   => Int64,
+      }],
+    }
+    Koa.tags ["admin", "mangadex", "subscriptions"]
+    get "/api/admin/mangadex/subscriptions" do |env|
+      begin
+        send_json env, {
+          "success"       => true,
+          "error"         => nil,
+          "subscriptions" => Storage.default.subscriptions,
+        }.to_json
+      rescue e
+        Logger.error e
+        send_json env, {
+          "success" => false,
+          "error"   => e.message,
+        }.to_json
+      end
+    end
+
+    Koa.describe "Creates a new MangaDex subscription"
+    Koa.body schema: {
+      "subscription" => {
+        "manga"      => Int64,
+        "language"   => String?,
+        "groupId"    => Int64?,
+        "volumeMin"  => Int64?,
+        "volumeMax"  => Int64?,
+        "chapterMin" => Int64?,
+        "chapterMax" => Int64?,
+      },
+    }
+    Koa.response 200, schema: {
+      "success" => Bool,
+      "error"   => String?,
+    }
+    Koa.tags ["admin", "mangadex", "subscriptions"]
+    post "/api/admin/mangadex/subscriptions" do |env|
+      begin
+        json = env.params.json["subscription"].as Hash(String, JSON::Any)
+        sub = Subscription.new json["manga"].as_i64, get_username env
+        sub.language = json["language"]?.try &.as_s?
+        sub.group_id = json["groupId"]?.try &.as_i64?
+        sub.min_volume = json["volumeMin"]?.try &.as_i64?
+        sub.max_volume = json["volumeMax"]?.try &.as_i64?
+        sub.min_chapter = json["chapterMin"]?.try &.as_i64?
+        sub.max_chapter = json["chapterMax"]?.try &.as_i64?
+
+        Storage.default.save_subscription sub
+
+        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 MangaDex subscription identified by `id`", <<-MD
+    Does nothing if the subscription was not created by the current user.
+    MD
+    Koa.response 200, schema: {
+      "success" => Bool,
+      "error"   => String?,
+    }
+    Koa.tags ["admin", "mangadex", "subscriptions"]
+    delete "/api/admin/mangadex/subscriptions/:id" do |env|
+      begin
+        id = env.params.url["id"].to_i64
+        Storage.default.delete_subscription id, get_username env
+        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 "Triggers an update for a MangaDex subscription identified by `id`", <<-MD
+    Does nothing if the subscription was not created by the current user.
+    MD
+    Koa.response 200, schema: {
+      "success" => Bool,
+      "error"   => String?,
+    }
+    Koa.tags ["admin", "mangadex", "subscriptions"]
+    post "/api/admin/mangadex/subscriptions/check/:id" do |env|
+      begin
+        id = env.params.url["id"].to_i64
+        username = get_username env
+        sub = Storage.default.get_subscription id, username
+        unless sub
+          raise "Subscription with id #{id} not found under user #{username}"
+        end
+        spawn do
+          sub.check_for_updates
+        end
+        send_json env, {
+          "success" => true,
+          "error"   => nil,
+        }.to_json
+      rescue e
+        Logger.error e
         send_json env, {
           "success" => false,
           "error"   => e.message,

src/routes/main.cr

@@ -95,6 +95,12 @@ struct MainRouter
       end
     end
 
+    get "/download/subscription" do |env|
+      mangadex_base_url = Config.current.mangadex["base_url"]
+      username = get_username env
+      layout "subscription"
+    end
+
     get "/" do |env|
       begin
         username = get_username env
@@ -103,7 +109,7 @@ struct MainRouter
         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 }
+        new_user = !titles.any? &.load_percentage(username).> 0
         empty_library = titles.size == 0
         layout "home"
       rescue e

src/routes/reader.cr

@@ -30,6 +30,11 @@ struct ReaderRouter
 
         title = (Library.default.get_title env.params.url["title"]).not_nil!
         entry = (title.get_entry env.params.url["entry"]).not_nil!
+
+        sort_opt = SortOptions.from_info_json title.dir, username
+        get_sort_opt
+        entries = title.sorted_entries username, sort_opt
+
         page_idx = env.params.url["page"].to_i
         if page_idx > entry.pages || page_idx <= 0
           raise "Page #{page_idx} not found."
@@ -37,10 +42,12 @@ struct ReaderRouter
 
         exit_url = "#{base_url}book/#{title.id}"
 
-        next_entry_url = nil
-        next_entry = entry.next_entry username
-        unless next_entry.nil?
-          next_entry_url = "#{base_url}reader/#{title.id}/#{next_entry.id}"
+        next_entry_url = entry.next_entry(username).try do |e|
+          "#{base_url}reader/#{title.id}/#{e.id}"
+        end
+
+        previous_entry_url = entry.previous_entry(username).try do |e|
+          "#{base_url}reader/#{title.id}/#{e.id}"
         end
 
         render "src/views/reader.html.ecr"

src/server.cr

@@ -49,6 +49,7 @@ class 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

@@ -5,6 +5,7 @@ require "base64"
 require "./util/*"
 require "mg"
 require "../migration/*"
+require "./subscription"
 
 def hash_password(pw)
   Crypto::Bcrypt::Password.create(pw).to_s
@@ -14,6 +15,9 @@ def verify_password(hash, pw)
   (Crypto::Bcrypt::Password.new hash).verify pw
 end
 
+SUB_ATTR = %w(manga_id language group_id min_volume max_volume min_chapter
+  max_chapter username)
+
 class Storage
   @@insert_entry_ids = [] of IDTuple
   @@insert_title_ids = [] of IDTuple
@@ -34,7 +38,7 @@ class Storage
     dir = File.dirname @path
     unless Dir.exists? dir
       Logger.info "The DB directory #{dir} does not exist. " \
-                  "Attepmting to create it"
+                  "Attempting to create it"
       Dir.mkdir_p dir
     end
     MainFiber.run do
@@ -445,7 +449,7 @@ class Storage
           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 ","})"
+                "(#{trash_ids.join "," { |i| "'#{i}'" }})"
 
         # Detect dangling title IDs
         trash_titles = [] of String
@@ -461,7 +465,7 @@ class Storage
           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 ","})"
+                "(#{trash_titles.join "," { |i| "'#{i}'" }})"
       end
     end
   end
@@ -514,6 +518,101 @@ class Storage
     delete_missing "titles", id
   end
 
+  def save_md_token(username : String, token : String, expire : Time)
+    MainFiber.run do
+      get_db do |db|
+        count = db.query_one "select count(*) from md_account where " \
+                             "username = (?)", username, as: Int64
+        if count == 0
+          db.exec "insert into md_account values (?, ?, ?)", username, token,
+            expire.to_unix
+        else
+          db.exec "update md_account set token = (?), expire = (?) " \
+                  "where username = (?)", token, expire.to_unix, username
+        end
+      end
+    end
+  end
+
+  def get_md_token(username) : Tuple(String?, Time?)
+    token = nil
+    expires = nil
+    MainFiber.run do
+      get_db do |db|
+        db.query_one? "select token, expire from md_account where " \
+                      "username = (?)", username do |res|
+          token = res.read String
+          expires = Time.unix res.read Int64
+        end
+      end
+    end
+    {token, expires}
+  end
+
+  def save_subscription(sub : Subscription)
+    MainFiber.run do
+      get_db do |db|
+        {% begin %}
+          db.exec "insert into subscription (#{SUB_ATTR.join ","}, " \
+            "last_checked, created_at) values " \
+            "(#{Array.new(SUB_ATTR.size + 2, "?").join ","})",
+          {% for type in SUB_ATTR %}
+            sub.{{type.id}},
+          {% end %}
+          sub.last_checked.to_unix, sub.created_at.to_unix
+        {% end %}
+      end
+    end
+  end
+
+  def subscriptions : Array(Subscription)
+    subs = [] of Subscription
+    MainFiber.run do
+      get_db do |db|
+        db.query "select * from subscription" do |rs|
+          subs += Subscription.from_rs rs
+        end
+      end
+    end
+    subs
+  end
+
+  def delete_subscription(id : Int64, username : String)
+    MainFiber.run do
+      get_db do |db|
+        db.exec "delete from subscription where id = (?) and username = (?)",
+          id, username
+      end
+    end
+  end
+
+  def get_subscription(id : Int64, username : String) : Subscription?
+    sub = nil
+    MainFiber.run do
+      get_db do |db|
+        db.query "select * from subscription where id = (?) and " \
+                 "username = (?) limit 1", id, username do |rs|
+          sub = Subscription.from_rs(rs).first?
+        end
+      end
+    end
+    sub
+  end
+
+  def update_subscription_last_checked(id : Int64? = nil)
+    MainFiber.run do
+      get_db do |db|
+        if id
+          db.exec "update subscription set last_checked = (?) where id = (?)",
+            Time.utc.to_unix, id
+        else
+          db.exec "update subscription set last_checked = (?)",
+            Time.utc.to_unix
+        end
+      end
+    end
+  end
+
   def close
     MainFiber.run do
       unless @db.nil?

src/subscription.cr

@@ -0,0 +1,83 @@
+require "db"
+require "json"
+
+struct Subscription
+  include DB::Serializable
+  include JSON::Serializable
+
+  getter id : Int64 = 0
+  getter username : String
+  getter manga_id : Int64
+  property language : String?
+  property group_id : Int64?
+  property min_volume : Int64?
+  property max_volume : Int64?
+  property min_chapter : Int64?
+  property max_chapter : Int64?
+  @[DB::Field(key: "last_checked")]
+  @[JSON::Field(key: "last_checked")]
+  @raw_last_checked : Int64
+  @[DB::Field(key: "created_at")]
+  @[JSON::Field(key: "created_at")]
+  @raw_created_at : Int64
+
+  def last_checked : Time
+    Time.unix @raw_last_checked
+  end
+
+  def created_at : Time
+    Time.unix @raw_created_at
+  end
+
+  def initialize(@manga_id, @username)
+    @raw_created_at = Time.utc.to_unix
+    @raw_last_checked = Time.utc.to_unix
+  end
+
+  private def in_range?(value : String, lowerbound : Int64?,
+                        upperbound : Int64?) : Bool
+    lb = lowerbound.try &.to_f64
+    ub = upperbound.try &.to_f64
+
+    return true if lb.nil? && ub.nil?
+
+    v = value.to_f64?
+    return false unless v
+
+    if lb.nil?
+      v <= ub.not_nil!
+    elsif ub.nil?
+      v >= lb.not_nil!
+    else
+      v >= lb.not_nil! && v <= ub.not_nil!
+    end
+  end
+
+  def match?(chapter : MangaDex::Chapter) : Bool
+    if chapter.manga_id != manga_id ||
+       (language && chapter.language != language) ||
+       (group_id && !chapter.groups.map(&.id).includes? group_id)
+      return false
+    end
+
+    in_range?(chapter.volume, min_volume, max_volume) &&
+      in_range?(chapter.chapter, min_chapter, max_chapter)
+  end
+
+  def check_for_updates : Int32
+    Logger.debug "Checking updates for subscription with ID #{id}"
+    jobs = [] of Queue::Job
+    get_client(username).user.updates_after last_checked do |chapter|
+      next unless match? chapter
+      jobs << chapter.to_job
+    end
+    Storage.default.update_subscription_last_checked id
+    count = Queue.default.push jobs
+    Logger.debug "#{count}/#{jobs.size} of updates added to queue"
+    count
+  rescue e
+    Logger.error "Error occurred when checking updates for " \
+                 "subscription with ID #{id}. #{e}"
+    0
+  end
+end

src/util/chapter_sort.cr

@@ -73,7 +73,7 @@ class ChapterSorter
       .select do |key|
         keys[key].count >= str_ary.size / 2
       end
-      .sort do |a_key, b_key|
+      .sort! do |a_key, b_key|
         a = keys[a_key]
         b = keys[b_key]
         # Sort keys by the number of times they appear

src/util/numeric_sort.cr

@@ -11,7 +11,7 @@ end
 def split_by_alphanumeric(str)
   arr = [] of String
   str.scan(/([^\d\n\r]*)(\d*)([^\d\n\r]*)/) do |match|
-    arr += match.captures.select { |s| s != "" }
+    arr += match.captures.select &.!= ""
   end
   arr
 end

src/util/util.cr

@@ -114,7 +114,7 @@ class String
   def components_similarity(other : String) : Float64
     s, l = [self, other]
       .map { |str| Path.new(str).parts }
-      .sort_by &.size
+      .sort_by! &.size
 
     match = s.reverse.zip(l.reverse).count { |a, b| a == b }
     match / s.size

src/util/web.cr

@@ -72,7 +72,7 @@ def redirect(env, path)
 end
 
 def hash_to_query(hash)
-  hash.map { |k, v| "#{k}=#{v}" }.join("&")
+  hash.join "&" { |k, v| "#{k}=#{v}" }
 end
 
 def request_path_startswith(env, ary)
@@ -107,6 +107,25 @@ macro get_sort_opt
   end
 end
 
+# Returns an authorized client
+def get_client(username : String) : MangaDex::Client
+  token, expires = Storage.default.get_md_token username
+
+  unless expires && token
+    raise "No token found for user #{username}"
+  end
+
+  client = MangaDex::Client.from_config
+  client.token = token
+  client.token_expires = expires
+
+  client
+end
+
+def get_client(env) : MangaDex::Client
+  get_client get_username env
+end
+
 module HTTP
   class Client
     private def self.exec(uri : URI, tls : TLSContext = nil)

src/views/admin.html.ecr

@@ -33,6 +33,7 @@
       <option>System</option>
     </select>
   </li>
+  <li><a class="uk-link-reset" href="<%= base_url %>admin/mangadex">Connect to MangaDex</a></li>
 </ul>
 
 <hr class="uk-divider-icon">

src/views/components/dots.html.ecr

@@ -1,3 +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="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/jquery-ui.html.ecr

@@ -0,0 +1 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

src/views/components/moment.html.ecr

@@ -0,0 +1 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

src/views/download-manager.html.ecr

@@ -5,65 +5,67 @@
     <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>
+  <div class="uk-overflow-auto">
+    <table class="uk-table uk-table-striped">
+      <thead>
+        <tr>
+          <th>Chapter</th>
+          <th>Manga</th>
+          <th>Progress</th>
+          <th>Time</th>
+          <th>Status</th>
+          <th>Plugin</th>
+          <th>Actions</th>
         </tr>
-      </template>
-    </tbody>
-  </table>
+      </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" uk-tooltip="Delete"></a>
+              <template x-if="job.status_message.length > 0">
+                <a @click="jobAction('retry', $event)" uk-icon="refresh" uk-tooltip="Retry"></a>
+              </template>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
 </div>
 
 <% content_for "script" do %>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
+  <%= render_component "moment" %>
   <script src="<%= base_url %>js/alert.js"></script>
   <script src="<%= base_url %>js/download-manager.js"></script>
 <% end %>

src/views/download.html.ecr

@@ -1,117 +1,170 @@
 <h2 class=uk-title>Download from MangaDex</h2>
 <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 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 class="uk-grid-small" uk-grid style="margin-bottom:40px;">
+        <div class="uk-width-expand">
+            <input class="uk-input" type="text" :placeholder="searchAvailable ? 'Search MangaDex or enter a manga ID/URL' : 'MangaDex manga ID or URL'" x-model="searchInput" @keydown.enter.debounce="search()">
         </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 class="uk-width-auto">
+            <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 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="mangaAry">
+        <div>
+            <p x-show="mangaAry.length === 0">No matching manga found.</p>
 
-      <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>
+            <div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
+                <template x-for="manga in mangaAry" :key="manga.id">
+                    <div class="item" :data-id="manga.id" @click="chooseManga(manga)">
+                        <div class="uk-card uk-card-default">
+                            <div class="uk-card-media-top uk-inline">
+                                <img uk-img :data-src="manga.mainCover">
+                            </div>
+                            <div class="uk-card-body">
+                                <h3 class="uk-card-title break-word uk-margin-remove-bottom free-height" x-text="manga.title"></h3>
+                                <p class="uk-text-meta" x-text="`ID: ${manga.id}`"></p>
+                            </div>
+                        </div>
+                    </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>
+    </template>
+
+    <div x-show="data && data.chapters" x-cloak>
+        <div class"uk-grid-small" uk-grid>
+            <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">
+                <span>Filter Chapters</span>
+                <button class="uk-icon-button uk-align-right" uk-icon="rss" uk-tooltip="Subscribe" x-show="searchAvailable" @click="subscribe()"></button>
+                </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>
+        <div class="uk-overflow-auto">
+            <table class="uk-table uk-table-striped" 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 id="modal" class="uk-flex-top" uk-modal="container: false">
+        <div class="uk-modal-dialog uk-margin-auto-vertical">
+            <button class="uk-modal-close-default" type="button" uk-close></button>
+            <div class="uk-modal-header">
+                <h3 class="uk-modal-title break-word" x-text="candidateManga.title"></h3>
+            </div>
+            <div class="uk-modal-body">
+                <div class="uk-grid">
+                    <div class="uk-width-1-3@s">
+                        <img uk-img data-width data-height :src="candidateManga.mainCover" style="width:100%;margin-bottom:10px;">
+                        <a :href="`<%= mangadex_base_url %>/manga/${candidateManga.id}`" x-text="`ID: ${candidateManga.id}`" class="uk-link-muted"></a>
+                    </div>
+                    <div class="uk-width-2-3@s">
+                        <p x-text="candidateManga.description"></p>
+                    </div>
+                </div>
+            </div>
+            <div class="uk-modal-footer">
+                <button class="uk-button uk-button-primary" type="button" @click="confirmManga(candidateManga.id)">Choose</button>
+            </div>
+        </div>
+    </div>
 </div>
 
 <% content_for "script" do %>
-  <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>
-  <script src="<%= base_url %>js/download.js"></script>
+    <%= render_component "moment" %>
+    <%= render_component "jquery-ui" %>
+    <script>
+        const mangadex_base_url = "<%= mangadex_base_url %>";
+    </script>
+    <script src="<%= base_url %>js/alert.js"></script>
+    <script src="<%= base_url %>js/download.js"></script>
 <% end %>

src/views/home.html.ecr

@@ -77,7 +77,7 @@
 <%- end -%>
 
 <% content_for "script" do %>
-  <%= render_component "dots-scripts" %>
+  <%= render_component "dots" %>
   <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,91 @@
 <!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>
-                            <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>
-            </div>
+  <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>
+                    <li><a href="<%= base_url %>download/subscription">Subscription 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 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 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-section uk-section-small">
-        </div>
-        <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 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>
+                    <li><a href="<%= base_url %>download/subscription">Subscription Manager</a></li>
+                  </ul>
                 </div>
-            </div>
+              </li>
+            <% end %>
+          </ul>
         </div>
-        <script>
-            setTheme();
-            const base_url = "<%= base_url %>";
-        </script>
-        <%= render_component "uikit" %>
-        <%= yield_content "script" %>
-    </body>
+        <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 class="uk-section uk-section-small">
+    </div>
+    <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,7 +24,7 @@
 </div>
 
 <% content_for "script" do %>
-  <%= render_component "dots-scripts" %>
+  <%= render_component "dots" %>
   <script src="<%= base_url %>js/search.js"></script>
   <script src="<%= base_url %>js/sort-items.js"></script>
 <% end %>

src/views/mangadex.html.ecr

@@ -0,0 +1,39 @@
+<div x-data="component()" x-init="init()">
+  <h2 class="uk-title">Connect to MangaDex</h2>
+  <div class"uk-grid-small" uk-grid x-show="!loading" x-cloak>
+    <div class="uk-width-1-2@s" x-show="!expires">
+      <p>This step is optional but highly recommended if you are using the MangaDex downloader. Connecting to MangaDex allows you to:</p>
+      <ul>
+        <li>Search MangaDex by search terms in addition to manga IDs</li>
+        <li>Automatically download new chapters when they are available (coming soon)</li>
+      </ul>
+    </div>
+
+    <div class="uk-width-1-2@s" x-show="expires">
+      <p>
+      <span x-show="!expired">You have logged in to MangaDex!</span>
+      <span x-show="expired">You have logged in to MangaDex but the token has expired.</span>
+      The expiration date of your token is <code x-text="moment.unix(expires).format('MMMM Do YYYY, HH:mm:ss')"></code>. 
+      <span x-show="!expired">If the integration is not working, you</span>
+      <span x-show="expired">You</span>
+      can log in again and the token will be updated.
+      </p>
+    </div>
+
+    <div class="uk-width-1-2@s">
+      <div class="uk-margin">
+        <div class="uk-inline uk-width-1-1"><span class="uk-form-icon" uk-icon="icon:user"></span><input class="uk-input uk-form-large" type="text" x-model="username" @keydown.enter.debounce="login()"></div>
+      </div>
+      <div class="uk-margin">
+        <div class="uk-inline uk-width-1-1"><span class="uk-form-icon" uk-icon="icon:lock"></span><input class="uk-input uk-form-large" type="password" x-model="password" @keydown.enter.debounce="login()"></div>
+      </div>
+      <div class="uk-margin"><button class="uk-button uk-button-primary uk-button-large uk-width-1-1" @click="login()" :disabled="loggingIn">Login to MangaDex</button></div>
+    </div>
+  </div>
+</div>
+
+<% content_for "script" do %>
+  <%= render_component "moment" %>
+  <script src="<%= base_url %>js/alert.js"></script>
+  <script src="<%= base_url %>js/mangadex.js"></script>
+<% end %>

src/views/missing-items.html.ecr

@@ -3,34 +3,36 @@
   <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>
+    <div class="uk-overflow-auto">
+      <table class="uk-table uk-table-striped">
+        <thead>
+          <tr>
+            <th>Type</th>
+            <th>Relative Path</th>
+            <th>ID</th>
+            <th>Actions</th>
           </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>
+        </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>
 </div>
 

src/views/plugin-download.html.ecr

@@ -56,8 +56,10 @@
       <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>
-    <table class="uk-table uk-table-striped uk-overflow-auto tablesorter">
-    </table>
+    <div class="uk-overflow-auto">
+      <table class="uk-table uk-table-striped tablesorter">
+      </table>
+    </div>
   </div>
 <% end %>
 
@@ -68,7 +70,7 @@
       var pid = "<%= plugin.not_nil!.info.id %>";
     </script>
   <% end %>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
+  <%= render_component "jquery-ui" %>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.combined.min.js"></script>
   <script src="<%= base_url %>js/alert.js"></script>
   <script src="<%= base_url %>js/plugin-download.js"></script>

src/views/reader.html.ecr

@@ -25,18 +25,18 @@
             <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"
+              :style="`margin-top:${margin}px; margin-bottom:${margin}px`"
               @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>
+            <button id="next-btn" class="uk-align-center uk-button uk-button-primary" @click="exitReader('<%= exit_url %>')">Exit Reader</button>
           <%- end -%>
         </div>
 
@@ -68,18 +68,19 @@
         </div>
         <div class="uk-modal-body">
           <div class="uk-margin">
-            <p id="progress-label"></p>
+            <p x-text="`Progress: ${selectedIndex}/${items.length} (${(selectedIndex/items.length * 100).toFixed(1)}%)`"></p>
           </div>
           <div class="uk-margin">
-            <label class="uk-form-label" for="page-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" @change="pageChanged()">
+              <select id="page-select" class="uk-select" @change="pageChanged()" x-model="selectedIndex">
                 <%- (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">
@@ -89,9 +90,40 @@
               </select>
             </div>
           </div>
+
+          <div class="uk-margin" x-show="mode === 'continuous'">
+            <label class="uk-form-label" for="margin-range" x-text="`Page Margin: ${margin}px`"></label>
+            <div class="uk-form-controls">
+              <input id="margin-range" class="uk-range" type="range" min="0" max="50" step="5" x-model="margin" @change="marginChanged()">
+            </div>
+          </div>
+
+          <hr class="uk-divider-icon">
+
+          <div class="uk-margin">
+            <label class="uk-form-label" for="entry-select">Jump to Entry</label>
+            <div class="uk-form-controls">
+              <select id="entry-select" class="uk-select" @change="entryChanged()">
+                <% entries.each do |e| %>
+                  <option value="<%= e.id %>"
+                  <% if e.id == entry.id %>
+                    selected
+                  <% end %>>
+                  <%= e.title %>
+                  </option>
+                <% end %>
+              </select>
+            </div>
+          </div>
         </div>
         <div class="uk-modal-footer uk-text-right">
-          <button class="uk-button uk-button-danger" type="button" @click="exitReader('<%= exit_url %>')">Exit Reader</button>
+          <% if previous_entry_url %>
+            <a class="uk-button uk-button-default uk-margin-small-bottom uk-margin-small-right" href="<%= previous_entry_url %>">Previous Entry</a>
+          <% end %>
+          <% if next_entry_url %>
+            <a class="uk-button uk-button-default uk-margin-small-bottom uk-margin-small-right" href="<%= next_entry_url %>">Next Entry</a>
+          <% end %>
+          <a class="uk-button uk-button-danger uk-margin-small-bottom uk-margin-small-right" href="<%= exit_url %>">Exit Reader</a>
         </div>
       </div>
     </div>

src/views/subscription.html.ecr

@@ -0,0 +1,54 @@
+<h2 class="uk-title">MangaDex Subscription Manager</h2>
+
+<div x-data="component()" x-init="init()">
+  <p x-show="available === false">The subscription manager uses a MangaDex API that requires authentication. Please <a href="<%= base_url %>admin/mangadex">connect to MangaDex</a> before using this feature.</p>
+
+  <p x-show="available && subscriptions.length === 0">No subscription found. Go to the <a href="<%= base_url %>download">MangaDex download page</a> and start subscribing.</p>
+
+  <template x-if="subscriptions.length > 0">
+    <div class="uk-overflow-auto">
+      <table class="uk-table uk-table-striped">
+        <thead>
+          <tr>
+            <th>Manga ID</th>
+            <th>Language</th>
+            <th>Group ID</th>
+            <th>Volume Range</th>
+            <th>Chapter Range</th>
+            <th>Creator</th>
+            <th>Last Checked</th>
+            <th>Created At</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <template x-for="sub in subscriptions" :key="sub">
+            <tr>
+              <td><a :href="`<%= mangadex_base_url %>/manga/${sub.manga_id}`" x-text="sub.manga_id"></a></td>
+              <td x-text="sub.language || 'All'"></td>
+              <td>
+                <a x-show="sub.group_id" :href="`<%= mangadex_base_url %>/group/${sub.group_id}`" x-text="sub.group_id"></a>
+                <span x-show="!sub.group_id">All</span>
+              </td>
+              <td x-text="formatRange(sub.min_volume, sub.max_volume)"></td>
+              <td x-text="formatRange(sub.min_chapter, sub.max_chapter)"></td>
+              <td x-text="sub.username"></td>
+              <td x-text="`${moment.unix(sub.last_checked).fromNow()}`"></td>
+              <td x-text="`${moment.unix(sub.created_at).fromNow()}`"></td>
+              <td :data-id="sub.id">
+                <a @click="check($event)" x-show="sub.username === '<%= username %>'" uk-icon="refresh" uk-tooltip="Check for updates"></a>
+                <a @click="rm($event)" x-show="sub.username === '<%= username %>'" uk-icon="trash" uk-tooltip="Delete"></a>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+  </template>
+</div>
+
+<% content_for "script" do %>
+  <%= render_component "moment" %>
+  <script src="<%= base_url %>js/alert.js"></script>
+  <script src="<%= base_url %>js/subscription.js"></script>
+<% end %>

src/views/tag.html.ecr

@@ -24,7 +24,7 @@
 </div>
 
 <% content_for "script" do %>
-  <%= render_component "dots-scripts" %>
+  <%= render_component "dots" %>
   <script src="<%= base_url %>js/search.js"></script>
   <script src="<%= base_url %>js/sort-items.js"></script>
 <% end %>

src/views/title.html.ecr

@@ -123,7 +123,7 @@
 </div>
 
 <% content_for "script" do %>
-  <%= render_component "dots-scripts" %>
+  <%= render_component "dots" %>
   <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>