Use yaml-static in Dockerfile

2026-03-20 00:00:48 -04:00 · 2021-08-18 19:42:32 +09:00
20 changed files with 885 additions and 1142 deletions
--- a/2
+++ b/2
@@ -3,7 +3,7 @@ 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
--- a/migration/subscription.12.cr
+++ b/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
--- a/public/js/download.js
+++ b/public/js/download.js
@@ -280,6 +280,100 @@ const downloadComponent = () => {
 			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}`);
+					});
+			});
 		}
 	};
 };
--- a/public/js/plugin-download.js
+++ b/public/js/plugin-download.js
@@ -1,326 +1,139 @@
-const component = () => {
-	return {
-		plugins: [],
-		info: undefined,
-		pid: undefined,
-		chapters: undefined, // undefined: not searched yet, []: empty
-		manga: undefined, // undefined: not searched yet, []: empty
-		allChapters: [],
-		query: '',
-		mangaTitle: '',
-		searching: false,
-		adding: false,
-		sortOptions: [],
-		showFilters: false,
-		appliedFilters: [],
-		chaptersLimit: 500,
-		listManga: false,
+const loadPlugin = id => {
+	localStorage.setItem('plugin', id);
+	const url = `${location.protocol}//${location.host}${location.pathname}`;
+	const newURL = `${url}?${$.param({
+			plugin: id
+		})}`;
+	window.location.href = newURL;
+};

-		init() {
-			const tableObserver = new MutationObserver(() => {
-				console.log('table mutated');
-				$('#selectable').selectable({
-					filter: 'tr'
-				});
-			});
-			tableObserver.observe($('table').get(0), {
-				childList: true,
-				subtree: true
-			});
-			fetch(`${base_url}api/admin/plugin`)
-				.then(res => res.json())
-				.then(data => {
-					if (!data.success)
-						throw new Error(data.error);
-					this.plugins = data.plugins;
+$(() => {
+	var storedID = localStorage.getItem('plugin');
+	if (storedID && storedID !== pid) {
+		loadPlugin(storedID);
+	} else {
+		$('#controls').removeAttr('hidden');
+	}

-					const pid = localStorage.getItem('plugin');
-					if (pid && this.plugins.map(p => p.id).includes(pid))
-						return this.loadPlugin(pid);
+	$('#search-input').keypress(event => {
+		if (event.which === 13) {
+			search();
+		}
+	});
+	$('#plugin-select').val(pid);
+	$('#plugin-select').change(() => {
+		const id = $('#plugin-select').val();
+		loadPlugin(id);
+	});
+});

-					if (this.plugins.length > 0)
-						this.loadPlugin(this.plugins[0].id);
-				})
-				.catch(e => {
-					alert('danger', `Failed to list the available plugins. Error: ${e}`);
-				});
-		},
-		loadPlugin(pid) {
-			fetch(`${base_url}api/admin/plugin/info?${new URLSearchParams({
-				plugin: pid
-			})}`)
-				.then(res => res.json())
-				.then(data => {
-					if (!data.success)
-						throw new Error(data.error);
-					this.info = data.info;
-					this.pid = pid;
-				})
-				.catch(e => {
-					alert('danger', `Failed to get plugin metadata. Error: ${e}`);
-				});
-		},
-		pluginChanged() {
-			this.loadPlugin(this.pid);
-			localStorage.setItem('plugin', this.pid);
-		},
-		get chapterKeys() {
-			if (this.allChapters.length < 1) return [];
-			return Object.keys(this.allChapters[0]).filter(k => !['manga_title'].includes(k));
-		},
-		searchChapters(query) {
-			this.searching = true;
-			this.allChapters = [];
-			this.chapters = undefined;
-			this.listManga = false;
-			fetch(`${base_url}api/admin/plugin/list?${new URLSearchParams({
-				plugin: this.pid,
-				query: query
-			})}`)
-				.then(res => res.json())
-				.then(data => {
-					if (!data.success)
-						throw new Error(data.error);
-					try {
-						this.mangaTitle = data.chapters[0].manga_title;
-						if (!this.mangaTitle) throw new Error();
-					} catch (e) {
-						this.mangaTitle = data.title;
-					}
+let mangaTitle = "";
+let searching = false;
+const search = () => {
+	if (searching)
+		return;

-					this.allChapters = data.chapters;
-					this.chapters = data.chapters;
-				})
-				.catch(e => {
-					alert('danger', `Failed to list chapters. Error: ${e}`);
-				})
-				.finally(() => {
-					this.searching = false;
-				});
-		},
-		searchManga() {
-			this.searching = true;
-			this.allChapters = [];
-			this.chapters = undefined;
-			this.manga = undefined;
-			fetch(`${base_url}api/admin/plugin/search?${new URLSearchParams({
-				plugin: this.pid,
-				query: this.query
-			})}`)
-				.then(res => res.json())
-				.then(data => {
-					if (!data.success)
-						throw new Error(data.error);
-					this.manga = data.manga;
-					this.listManga = true;
-				})
-				.catch(e => {
-					alert('danger', `Search failed. Error: ${e}`);
-				})
-				.finally(() => {
-					this.searching = false;
-				});
-		},
-		search() {
-			this.manga = undefined;
-			if (this.info.version === 1) {
-				this.searchChapters(this.query);
-			} else {
-				this.searchManga();
-			}
-		},
-		selectAll() {
-			$('tbody > tr').each((i, e) => {
-				$(e).addClass('ui-selected');
-			});
-		},
-		clearSelection() {
-			$('tbody > tr').each((i, e) => {
-				$(e).removeClass('ui-selected');
-			});
-		},
-		download() {
-			const selected = $('tbody > tr.ui-selected').get();
-			if (selected.length === 0) return;
-
-			UIkit.modal.confirm(`Download ${selected.length} selected chapters?`).then(() => {
-				const ids = selected.map(e => e.id);
-				const chapters = this.chapters.filter(c => ids.includes(c.id));
-				console.log(chapters);
-				this.adding = true;
-				fetch(`${base_url}api/admin/plugin/download`, {
-						method: 'POST',
-						body: JSON.stringify({
-							chapters,
-							plugin: this.pid,
-							title: this.mangaTitle
-						}),
-						headers: {
-							"Content-Type": "application/json"
-						}
-					})
-					.then(res => res.json())
-					.then(data => {
-						if (!data.success)
-							throw new Error(data.error);
-						const successCount = parseInt(data.success);
-						const failCount = parseInt(data.fail);
-						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>.`);
-					})
-					.catch(e => {
-						alert('danger', `Failed to add chapters to the download queue. Error: ${e}`);
-					})
-					.finally(() => {
-						this.adding = false;
-					});
-			})
-		},
-		thClicked(event) {
-			const idx = parseInt(event.currentTarget.id.split('-')[1]);
-			if (idx === undefined || isNaN(idx)) return;
-			const curOption = this.sortOptions[idx];
-			let option;
-			this.sortOptions = [];
-			switch (curOption) {
-				case 1:
-					option = -1;
-					break;
-				case -1:
-					option = 0;
-					break;
-				default:
-					option = 1;
-			}
-			this.sortOptions[idx] = option;
-			this.sort(this.chapterKeys[idx], option)
-		},
-		// Returns an array of filtered but unsorted chapters. Useful when
-		// 	reseting the sort options.
-		get filteredChapters() {
-			let ary = this.allChapters.slice();
-
-			console.log('initial size:', ary.length);
-			for (let filter of this.appliedFilters) {
-				if (!filter.value) continue;
-				if (filter.type === 'array' && filter.value === 'all') continue;
-
-				console.log('applying filter:', filter);
-
-				if (filter.type === 'string') {
-					ary = ary.filter(ch => ch[filter.key].toLowerCase().includes(filter.value.toLowerCase()));
-				}
-				if (filter.type === 'number-min') {
-					ary = ary.filter(ch => Number(ch[filter.key]) >= Number(filter.value));
-				}
-				if (filter.type === 'number-max') {
-					ary = ary.filter(ch => Number(ch[filter.key]) <= Number(filter.value));
-				}
-				if (filter.type === 'date-min') {
-					ary = ary.filter(ch => this.parseDate(ch[filter.key]) >= this.parseDate(filter.value));
-				}
-				if (filter.type === 'date-max') {
-					ary = ary.filter(ch => this.parseDate(ch[filter.key]) <= this.parseDate(filter.value));
-				}
-				if (filter.type === 'array') {
-					ary = ary.filter(ch => ch[filter.key].map(s => typeof s === 'string' ? s.toLowerCase() : s).includes(filter.value.toLowerCase()));
-				}
-
-				console.log('filtered size:', ary.length);
-			}
-
-			return ary;
-		},
-		// option:
-		// 	- 1: asending
-		// 	- -1: desending
-		// 	- 0: unsorted
-		sort(key, option) {
-			if (option === 0) {
-				this.chapters = this.filteredChapters;
+	const query = $.param({
+		query: $('#search-input').val(),
+		plugin: pid
+	});
+	$.ajax({
+			type: 'GET',
+			url: `${base_url}api/admin/plugin/list?${query}`,
+			contentType: "application/json",
+			dataType: 'json'
+		})
+		.done(data => {
+			console.log(data);
+			if (data.error) {
+				alert('danger', `Search failed. Error: ${data.error}`);
 				return;
 			}
-
-			this.chapters = this.filteredChapters.sort((a, b) => {
-				const comp = this.compare(a[key], b[key]);
-				return option < 0 ? comp * -1 : comp;
-			});
-		},
-		compare(a, b) {
-			if (a === b) return 0;
-
-			// try numbers
-			// this must come before the date checks, because any integer would
-			// 		also be parsed as a date.
-			if (!isNaN(a) && !isNaN(b))
-				return Number(a) - Number(b);
-
-			// try dates
-			if (!isNaN(this.parseDate(a)) && !isNaN(this.parseDate(b)))
-				return this.parseDate(a) - this.parseDate(b);
-
-			const preprocessString = (val) => {
-				if (typeof val !== 'string') return val;
-				return val.toLowerCase().replace(/\s\s/g, ' ').trim();
-			};
-
-			return preprocessString(a) > preprocessString(b) ? 1 : -1;
-		},
-		fieldType(values) {
-			if (values.every(v => !isNaN(v))) return 'number'; // display input for number range
-			if (values.every(v => !isNaN(this.parseDate(v)))) return 'date'; // display input for date range
-			if (values.every(v => Array.isArray(v))) return 'array'; // display input for contains
-			return 'string'; // display input for string searching.
-			// for the last two, if the number of options is small enough (say < 50), display a multi-select2
-		},
-		get filters() {
-			if (this.allChapters.length < 1) return [];
-			const keys = Object.keys(this.allChapters[0]).filter(k => !['manga_title', 'id'].includes(k));
-			return keys.map(k => {
-				let values = this.allChapters.map(c => c[k]);
-				const type = this.fieldType(values);
-
-				if (type === 'array') {
-					// if the type is an array, return the list of available elements
-					// example: an array of groups or authors
-					values = Array.from(new Set(values.flat().map(v => {
-						if (typeof v === 'string') return v.toLowerCase();
-					})));
-				}
-
-				return {
-					key: k,
-					type: type,
-					values: values
-				};
-			});
-		},
-		applyFilters() {
-			const values = $('#filter-form input, #filter-form select')
-				.get()
-				.map(i => ({
-					key: i.getAttribute('data-filter-key'),
-					value: i.value.trim(),
-					type: i.getAttribute('data-filter-type')
-				}));
-			this.appliedFilters = values;
-			this.chapters = this.filteredChapters;
-		},
-		clearFilters() {
-			$('#filter-form input').get().forEach(i => i.value = '');
-			this.appliedFilters = [];
-			this.chapters = this.filteredChapters;
-		},
-		mangaSelected(event) {
-			const mid = event.currentTarget.getAttribute('data-id');
-			this.searchChapters(mid);
-		},
-		parseDate(str) {
-			const regex = /([0-9]+[/\-,\ ][0-9]+[/\-,\ ][0-9]+)|([A-Za-z]+)[/\-,\ ]+[0-9]+(st|nd|rd|th)?[/\-,\ ]+[0-9]+/g;
-			// Basic sanity check to make sure it's an actual date.
-			// We need this because Date.parse thinks 'Chapter 1' is a date.
-			if (!regex.test(str))
-				return NaN;
-			return Date.parse(str);
-		}
-	};
+			mangaTitle = data.title;
+			$('#title-text').text(data.title);
+			buildTable(data.chapters);
+		})
+		.fail((jqXHR, status) => {
+			alert('danger', `Search failed. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+		})
+		.always(() => {});
+};
+
+const buildTable = (chapters) => {
+	$('#table').attr('hidden', '');
+	$('table').empty();
+
+	const keys = Object.keys(chapters[0]).map(k => `<th>${k}</th>`).join('');
+	const thead = `<thead><tr>${keys}</tr></thead>`;
+	$('table').append(thead);
+
+	const rows = chapters.map(ch => {
+		const tds = Object.values(ch).map(v => `<td>${v}</td>`).join('');
+		return `<tr data-id="${ch.id}" data-title="${ch.title}">${tds}</tr>`;
+	});
+	const tbody = `<tbody id="selectable">${rows}</tbody>`;
+	$('table').append(tbody);
+
+	$('#selectable').selectable({
+		filter: 'tr'
+	});
+
+	$('#table table').tablesorter();
+	$('#table').removeAttr('hidden');
+};
+
+const selectAll = () => {
+	$('tbody > tr').each((i, e) => {
+		$(e).addClass('ui-selected');
+	});
+};
+
+const unselect = () => {
+	$('tbody > tr').each((i, e) => {
+		$(e).removeClass('ui-selected');
+	});
+};
+
+const download = () => {
+	const selected = $('tbody > tr.ui-selected');
+	if (selected.length === 0) return;
+	UIkit.modal.confirm(`Download ${selected.length} selected chapters?`).then(() => {
+		$('#download-btn').attr('hidden', '');
+		$('#download-spinner').removeAttr('hidden');
+		const chapters = selected.map((i, e) => {
+			return {
+				id: $(e).attr('data-id'),
+				title: $(e).attr('data-title')
+			}
+		}).get();
+		console.log(chapters);
+		$.ajax({
+				type: 'POST',
+				url: base_url + 'api/admin/plugin/download',
+				data: JSON.stringify({
+					plugin: pid,
+					chapters: chapters,
+					title: mangaTitle
+				}),
+				contentType: "application/json",
+				dataType: 'json'
+			})
+			.done(data => {
+				console.log(data);
+				if (data.error) {
+					alert('danger', `Failed to add chapters to the download queue. Error: ${data.error}`);
+					return;
+				}
+				const successCount = parseInt(data.success);
+				const failCount = parseInt(data.fail);
+				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}`);
+			})
+			.always(() => {
+				$('#download-spinner').attr('hidden', '');
+				$('#download-btn').removeAttr('hidden');
+			});
+	});
 };
--- a/shard.lock
+++ b/shard.lock
@@ -54,7 +54,7 @@ shards:

  mangadex:
    git: https://github.com/hkalexling/mangadex.git
-    version: 0.9.0+git.commit.a8e5deb3e6f882f5bc0f4de66e0f6c20aa98a8a6
+    version: 0.11.0+git.commit.f5b0d64fbb138879fb9228b6e9ff34ec97c3e824

  mg:
    git: https://github.com/hkalexling/mg.git
--- a/src/config.cr
+++ b/src/config.cr
@@ -33,8 +33,10 @@ class Config
    "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?
--- a/src/library/entry.cr
+++ b/src/library/entry.cr
@@ -46,19 +46,6 @@ class Entry
    file.close
  end

-  def to_slim_json : String
-    JSON.build do |json|
-      json.object do
-        {% for str in ["zip_path", "title", "size", "id"] %}
-        json.field {{str}}, @{{str.id}}
-      {% end %}
-        json.field "title_id", @book.id
-        json.field "title_title", @book.title
-        json.field "pages" { json.number @pages }
-      end
-    end
-  end
-
  def to_json(json : JSON::Builder)
    json.object do
      {% for str in ["zip_path", "title", "size", "id"] %}
--- a/src/library/library.cr
+++ b/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
@@ -66,21 +85,6 @@ class Library
    titles + titles.flat_map &.deep_titles
  end

-  def to_slim_json : String
-    JSON.build do |json|
-      json.object do
-        json.field "dir", @dir
-        json.field "titles" do
-          json.array do
-            self.titles.each do |title|
-              json.raw title.to_slim_json
-            end
-          end
-        end
-      end
-    end
-  end
-
  def to_json(json : JSON::Builder)
    json.object do
      json.field "dir", @dir
--- a/src/library/title.cr
+++ b/src/library/title.cr
@@ -57,41 +57,6 @@ class Title
    end
  end

-  def to_slim_json : String
-    JSON.build do |json|
-      json.object do
-        {% for str in ["dir", "title", "id"] %}
-        json.field {{str}}, @{{str.id}}
-      {% end %}
-        json.field "signature" { json.number @signature }
-        json.field "titles" do
-          json.array do
-            self.titles.each do |title|
-              json.raw title.to_slim_json
-            end
-          end
-        end
-        json.field "entries" do
-          json.array do
-            @entries.each do |entry|
-              json.raw entry.to_slim_json
-            end
-          end
-        end
-        json.field "parents" do
-          json.array do
-            self.parents.each do |title|
-              json.object do
-                json.field "title", title.title
-                json.field "id", title.id
-              end
-            end
-          end
-        end
-      end
-    end
-  end
-
  def to_json(json : JSON::Builder)
    json.object do
      {% for str in ["dir", "title", "id"] %}
--- a/src/mangadex/ext.cr
+++ b/src/mangadex/ext.cr
@@ -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
--- a/src/plugin/plugin.cr
+++ b/src/plugin/plugin.cr
@@ -2,8 +2,6 @@ require "duktape/runtime"
 require "myhtml"
 require "xml"

-require "./subscriptions"
-
 class Plugin
  class Error < ::Exception
  end
@@ -18,19 +16,12 @@ class Plugin
  end

  struct Info
-    include JSON::Serializable
-
    {% for name in ["id", "title", "placeholder"] %}
      getter {{name.id}} = ""
    {% end %}
-    getter wait_seconds = 0u64
-    getter version = 0u64
-    getter settings = {} of String => String?
+    getter wait_seconds : UInt64 = 0
    getter dir : String

-    @[JSON::Field(ignore: true)]
-    @json : JSON::Any
-
    def initialize(@dir)
      info_path = File.join @dir, "info.json"

@@ -46,16 +37,6 @@ class Plugin
          @{{name.id}} = @json[{{name}}].as_s
        {% end %}
        @wait_seconds = @json["wait_seconds"].as_i.to_u64
-        @version = @json["api_version"]?.try(&.as_i.to_u64) || 1u64
-
-        if @version > 1 && (settings_hash = @json["settings"]?.try &.as_h?)
-          settings_hash.each do |k, v|
-            unless str_value = v.as_s?
-              raise "The settings object can only contain strings or null"
-            end
-            @settings[k] = str_value
-          end
-        end

        unless @id.alphanumeric_underscore?
          raise "Plugin ID can only contain alphanumeric characters and " \
@@ -133,22 +114,6 @@ class Plugin
    @info.not_nil!
  end

-  def subscribe(subscription : Subscription)
-    list = SubscriptionList.new info.dir
-    list << subscription
-    list.save
-  end
-
-  def list_subscriptions
-    SubscriptionList.new(info.dir).ary
-  end
-
-  def unsubscribe(id : String)
-    list = SubscriptionList.new info.dir
-    list.reject &.id.== id
-    list.save
-  end
-
  def initialize(id : String)
    Plugin.build_info_ary

@@ -173,12 +138,6 @@ class Plugin
      sbx.push_string path
      sbx.put_prop_string -2, "storage_path"

-      sbx.push_pointer info.dir.as(Void*)
-      path = sbx.require_pointer(-1).as String
-      sbx.pop
-      sbx.push_string path
-      sbx.put_prop_string -2, "info_dir"
-
      def_helper_functions sbx
    end

@@ -193,67 +152,23 @@ class Plugin
    {% end %}
  end

-  def assert_manga_type(obj : JSON::Any)
-    obj["id"].as_s && obj["title"].as_s
-  rescue e
-    raise Error.new "Missing required fields in the Manga type"
-  end
-
-  def assert_chapter_type(obj : JSON::Any)
-    obj["id"].as_s && obj["title"].as_s && obj["pages"].as_i &&
-      obj["manga_title"].as_s
-  rescue e
-    raise Error.new "Missing required fields in the Chapter type"
-  end
-
-  def assert_page_type(obj : JSON::Any)
-    obj["url"].as_s && obj["filename"].as_s
-  rescue e
-    raise Error.new "Missing required fields in the Page type"
-  end
-
-  def search_manga(query : String)
-    if info.version == 1
-      raise Error.new "Manga searching is only available for plugins targeting API " \
-                      "v2 or above"
-    end
-    json = eval_json "searchManga('#{query}')"
-    begin
-      json.as_a.each do |obj|
-        assert_manga_type obj
-      end
-    rescue e
-      raise Error.new e.message
-    end
-    json
-  end
-
  def list_chapters(query : String)
    json = eval_json "listChapters('#{query}')"
    begin
-      if info.version > 1
-        # Since v2, listChapters returns an array
-        json.as_a.each do |obj|
-          assert_chapter_type obj
+      check_fields ["title", "chapters"]
+
+      ary = json["chapters"].as_a
+      ary.each do |obj|
+        id = obj["id"]?
+        raise "Field `id` missing from `listChapters` outputs" if id.nil?
+
+        unless id.to_s.alphanumeric_underscore?
+          raise "The `id` field can only contain alphanumeric characters " \
+                "and underscores"
        end
-      else
-        check_fields ["title", "chapters"]

-        ary = json["chapters"].as_a
-        ary.each do |obj|
-          id = obj["id"]?
-          raise "Field `id` missing from `listChapters` outputs" if id.nil?
-
-          unless id.to_s.alphanumeric_underscore?
-            raise "The `id` field can only contain alphanumeric characters " \
-                  "and underscores"
-          end
-
-          title = obj["title"]?
-          if title.nil?
-            raise "Field `title` missing from `listChapters` outputs"
-          end
-        end
+        title = obj["title"]?
+        raise "Field `title` missing from `listChapters` outputs" if title.nil?
      end
    rescue e
      raise Error.new e.message
@@ -264,14 +179,10 @@ class Plugin
  def select_chapter(id : String)
    json = eval_json "selectChapter('#{id}')"
    begin
-      if info.version > 1
-        assert_chapter_type json
-      else
-        check_fields ["title", "pages"]
+      check_fields ["title", "pages"]

-        if json["title"].to_s.empty?
-          raise "The `title` field of the chapter can not be empty"
-        end
+      if json["title"].to_s.empty?
+        raise "The `title` field of the chapter can not be empty"
      end
    rescue e
      raise Error.new e.message
@@ -283,19 +194,7 @@ class Plugin
    json = eval_json "nextPage()"
    return if json.size == 0
    begin
-      assert_page_type json
-    rescue e
-      raise Error.new e.message
-    end
-    json
-  end
-
-  def new_chapters(manga_id : String, after : Int64)
-    json = eval_json "newChapters('#{manga_id}', #{after})"
-    begin
-      json.as_a.each do |obj|
-        assert_chapter_type obj
-      end
+      check_fields ["filename", "url"]
    rescue e
      raise Error.new e.message
    end
@@ -480,27 +379,6 @@ class Plugin
    end
    sbx.put_prop_string -2, "storage"

-    if info.version > 1
-      sbx.push_proc 1 do |ptr|
-        env = Duktape::Sandbox.new ptr
-        key = env.require_string 0
-
-        env.get_global_string "info_dir"
-        info_dir = env.require_string -1
-        env.pop
-        info = Info.new info_dir
-
-        if value = info.settings[key]?
-          env.push_string value
-        else
-          env.push_undefined
-        end
-
-        env.call_success
-      end
-      sbx.put_prop_string -2, "settings"
-    end
-
    sbx.put_prop_string -2, "mango"
  end
 end
--- a/src/plugin/subscriptions.cr
+++ b/src/plugin/subscriptions.cr
@@ -1,87 +0,0 @@
-require "uuid"
-
-enum FilterType
-  String
-  NumMin
-  NumMax
-  DateMin
-  DateMax
-  Array
-
-  def self.from_string(str)
-    case str
-    when "string"
-      String
-    when "number-min"
-      NumMin
-    when "number-max"
-      NumMax
-    when "date-min"
-      DateMin
-    when "date-max"
-      DateMax
-    when "array"
-      Array
-    else
-      raise "Unknown filter type with string #{str}"
-    end
-  end
-end
-
-struct Filter
-  include JSON::Serializable
-
-  property key : String
-  property value : String | Int32 | Int64 | Float32 | Nil
-  property type : FilterType
-
-  def initialize(@key, @value, @type)
-  end
-
-  def self.from_json(str) : Filter
-    json = JSON.parse str
-    key = json["key"].as_s
-    type = FilterType.from_string json["type"].as_s
-    _value = json["value"]
-    value = _value.as_s? || _value.as_i32? || _value.as_i64? ||
-            _value.as_f32? || nil
-    self.new key, value, type
-  end
-end
-
-struct Subscription
-  include JSON::Serializable
-
-  property id : String
-  property plugin_id : String
-  property name : String
-  property created_at : Int64
-  property last_checked : Int64
-  property filters = [] of Filter
-
-  def initialize(@plugin_id, @name)
-    @id = UUID.random.to_s
-    @created_at = Time.utc.to_unix
-    @last_checked = Time.utc.to_unix
-  end
-end
-
-struct SubscriptionList
-  @dir : String
-  @path : String
-
-  getter ary = [] of Subscription
-
-  forward_missing_to @ary
-
-  def initialize(@dir)
-    @path = Path[@dir, "subscriptions.json"]
-    if File.exists? @path
-      @ary = Array(Subscription).from_json File.read @path
-    end
-  end
-
-  def save
-    File.write @path, @ary.to_json
-  end
-end
--- a/src/routes/api.cr
+++ b/src/routes/api.cr
@@ -126,11 +126,8 @@ struct APIRouter
      end
    end

-    Koa.describe "Returns the book with title `tid`", <<-MD
-    Supply the `tid` query parameter to strip away "display_name", "cover_url", and "mtime" from the returned object to speed up the loading time
-    MD
+    Koa.describe "Returns the book with title `tid`"
    Koa.path "tid", desc: "Title ID"
-    Koa.query "slim"
    Koa.response 200, schema: "title"
    Koa.response 404, "Title not found"
    Koa.tag "library"
@@ -140,11 +137,7 @@ struct APIRouter
        title = Library.default.get_title tid
        raise "Title ID `#{tid}` not found" if title.nil?

-        if env.params.query["slim"]?
-          send_json env, title.to_slim_json
-        else
-          send_json env, title.to_json
-        end
+        send_json env, title.to_json
      rescue e
        Logger.error e
        env.response.status_code = 404
@@ -152,21 +145,14 @@ struct APIRouter
      end
    end

-    Koa.describe "Returns the entire library with all titles and entries", <<-MD
-    Supply the `tid` query parameter to strip away "display_name", "cover_url", and "mtime" from the returned object to speed up the loading time
-    MD
-    Koa.query "slim"
+    Koa.describe "Returns the entire library with all titles and entries"
    Koa.response 200, schema: {
      "dir"    => String,
      "titles" => ["title"],
    }
    Koa.tag "library"
    get "/api/library" do |env|
-      if env.params.query["slim"]?
-        send_json env, Library.default.to_slim_json
-      else
-        send_json env, Library.default.to_json
-      end
+      send_json env, Library.default.to_json
    end

    Koa.describe "Triggers a library scan"
@@ -539,97 +525,6 @@ struct APIRouter
      end
    end

-    Koa.describe "Returns a list of available plugins"
-    Koa.tags ["admin", "downloader"]
-    Koa.query "plugin", schema: String
-    Koa.response 200, schema: {
-      "success" => Bool,
-      "error"   => String?,
-      "plugins" => [{
-        "id"    => String,
-        "title" => String,
-      }],
-    }
-    get "/api/admin/plugin" do |env|
-      begin
-        send_json env, {
-          "success" => true,
-          "plugins" => Plugin.list,
-        }.to_json
-      rescue e
-        Logger.error e
-        send_json env, {
-          "success" => false,
-          "error"   => e.message,
-        }.to_json
-      end
-    end
-
-    Koa.describe "Returns the metadata of a plugin"
-    Koa.tags ["admin", "downloader"]
-    Koa.query "plugin", schema: String
-    Koa.response 200, schema: {
-      "success" => Bool,
-      "error"   => String?,
-      "info"    => {
-        "dir"          => String,
-        "id"           => String,
-        "title"        => String,
-        "placeholder"  => String,
-        "wait_seconds" => Int32,
-        "version"      => Int32,
-        "settings"     => {} of String => String,
-      },
-    }
-    get "/api/admin/plugin/info" do |env|
-      begin
-        plugin = Plugin.new env.params.query["plugin"].as String
-        send_json env, {
-          "success" => true,
-          "info"    => plugin.info,
-        }.to_json
-      rescue e
-        Logger.error e
-        send_json env, {
-          "success" => false,
-          "error"   => e.message,
-        }.to_json
-      end
-    end
-
-    Koa.describe "Searches for manga matching the given query from a plugin", <<-MD
-    Only available for plugins targeting API v2 or above.
-    MD
-    Koa.tags ["admin", "downloader"]
-    Koa.query "plugin", schema: String
-    Koa.query "query", schema: String
-    Koa.response 200, schema: {
-      "success" => Bool,
-      "error"   => String?,
-      "manga"   => [{
-        "id"    => String,
-        "title" => String,
-      }],
-    }
-    get "/api/admin/plugin/search" do |env|
-      begin
-        query = env.params.query["query"].as String
-        plugin = Plugin.new env.params.query["plugin"].as String
-
-        manga_ary = plugin.search_manga(query).as_a
-        send_json env, {
-          "success" => true,
-          "manga"   => manga_ary,
-        }.to_json
-      rescue e
-        Logger.error e
-        send_json env, {
-          "success" => false,
-          "error"   => e.message,
-        }.to_json
-      end
-    end
-
    Koa.describe "Lists the chapters in a title from a plugin"
    Koa.tags ["admin", "downloader"]
    Koa.query "plugin", schema: String
@@ -638,8 +533,8 @@ struct APIRouter
      "success"   => Bool,
      "error"     => String?,
      "chapters?" => [{
-        "id"     => String,
-        "title?" => String,
+        "id"    => String,
+        "title" => String,
      }],
      "title" => String?,
    }
@@ -649,14 +544,8 @@ struct APIRouter
        plugin = Plugin.new env.params.query["plugin"].as String

        json = plugin.list_chapters query
-
-        if plugin.info.version == 1
-          chapters = json["chapters"]
-          title = json["title"]
-        else
-          chapters = json
-          title = nil
-        end
+        chapters = json["chapters"]
+        title = json["title"]

        send_json env, {
          "success"  => true,
@@ -1083,23 +972,147 @@ struct APIRouter
    Koa.tags ["admin", "mangadex"]
    get "/api/admin/mangadex/search" do |env|
      begin
-        username = get_username env
-        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
-
        query = env.params.query["query"]

        send_json env, {
          "success" => true,
          "error"   => nil,
-          "manga"   => client.partial_search query,
+          "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
--- a/src/routes/main.cr
+++ b/src/routes/main.cr
@@ -30,8 +30,7 @@ struct MainRouter
        else
          redirect env, "/"
        end
-      rescue e
-        Logger.error e
+      rescue
        redirect env, "/login"
      end
    end
@@ -79,6 +78,16 @@ struct MainRouter

    get "/download/plugins" do |env|
      begin
+        id = env.params.query["plugin"]?
+        plugins = Plugin.list
+        plugin = nil
+
+        if id
+          plugin = Plugin.new id
+        elsif !plugins.empty?
+          plugin = Plugin.new plugins[0][:id]
+        end
+
        layout "plugin-download"
      rescue e
        Logger.error e
@@ -86,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
--- a/src/storage.cr
+++ b/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
@@ -545,6 +549,70 @@ class Storage
    {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?
--- a/src/util/web.cr
+++ b/src/util/web.cr
@@ -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)
--- a/src/views/download-manager.html.ecr
+++ b/src/views/download-manager.html.ecr
@@ -52,9 +52,9 @@
            <td x-text="`${job.plugin_id || ''}`"></td>

            <td>
-              <a @click="jobAction('delete', $event)" uk-icon="trash"></a>
+              <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"></a>
+                <a @click="jobAction('retry', $event)" uk-icon="refresh" uk-tooltip="Retry"></a>
              </template>
            </td>
          </tr>
--- a/src/views/download.html.ecr
+++ b/src/views/download.html.ecr
@@ -1,162 +1,170 @@
 <h2 class=uk-title>Download from MangaDex</h2>
 <div x-data="downloadComponent()" x-init="init()">
-  <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-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>
-
-  <template x-if="mangaAry">
-    <div>
-      <p x-show="mangaAry.length === 0">No matching manga found.</p>
-
-      <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>
-      </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">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 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" uk-overflow-auto>
-            <p x-text="candidateManga.description"></p>
-          </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 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 %>
-  <%= render_component "moment" %>
-  <%= render_component "jquery-ui" %>
-  <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 %>
--- a/src/views/layout.html.ecr
+++ b/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>
--- a/src/views/plugin-download.html.ecr
+++ b/src/views/plugin-download.html.ecr
@@ -1,180 +1,77 @@
-<div x-data="component()" x-init="init()" x-cloak>
-  <div class="uk-grid-small" uk-grid style="margin-bottom:40px;">
-    <div class="uk-container uk-text-center" x-show="plugins.length === 0" style="width:100%">
-      <h2>No Plugins Found</h2>
-      <p>We could't find any plugins in the directory <code><%= Config.current.plugin_path %></code>.</p>
-      <p>You can download official plugins from the <a href="https://github.com/hkalexling/mango-plugins">Mango plugins repository</a>.</p>
+<% if plugins.empty? %>
+  <div class="uk-container uk-text-center">
+    <h2>No Plugins Found</h2>
+    <p>We could't find any plugins in the directory <code><%= Config.current.plugin_path %></code>.</p>
+    <p>You can download official plugins from the <a href="https://github.com/hkalexling/mango-plugins">Mango plugins repository</a>.</p>
+  </div>
+
+<% else %>
+  <h2 class=uk-title>Download with Plugins</h2>
+
+  <div id="controls" class="uk-grid-small" uk-grid hidden>
+    <div class="uk-width-3-4@m uk-child-width-1-1">
+      <div class="uk-margin">
+        <label class="uk-form-label" for="search-input">&nbsp;</label>
+        <div class="uk-form-controls">
+          <input id="search-input" class="uk-input" type="text" placeholder="<%= plugin.not_nil!.info.placeholder %>">
+        </div>
+      </div>
    </div>
-
-    <div x-show="plugins.length > 0" style="width:100%">
-      <h2 class=uk-title>Download with Plugins
-        <span x-show="searching" uk-spinner class="uk-margin-left"></span>
-      </h2>
-
-      <template x-if="info !== undefined">
-        <div>
-          <div class="uk-grid-small" uk-grid>
-            <div class="uk-width-3-4@m uk-child-width-1-1">
-              <div class="uk-margin">
-                <div class="uk-form-controls">
-                  <label class="uk-form-label">&nbsp;</label>
-                  <input class="uk-input" type="text" :placeholder="info.placeholder" x-model="query" @keydown.enter="search()">
-                </div>
-              </div>
-            </div>
-            <div class="uk-width-expand">
-              <div class="uk-margin">
-                <label class="uk-form-label">Choose a plugin</label>
-                <div class="uk-form-controls">
-                  <select class="uk-select" x-model="pid" @change="pluginChanged()">
-                    <template x-for="p in plugins" :key="p">
-                      <option :value="p.id" x-text="p.title"></option>
-                    </template>
-                  </select>
-                </div>
-              </div>
-            </div>
-            <div class="uk-width-auto">
-              <div class="uk-margin">
-                <label class="uk-form-label">&nbsp;</label>
-                <div class="uk-form-controls" style="padding-top: 10px;">
-                  <span uk-icon="info" uk-toggle="target: #toggle"></span>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <template x-for="entry, idx in Object.entries(info).filter(tp => !['id', 'settings'].includes(tp[0]))" :key="idx">
-            <dl class="uk-description-list" id="toggle" hidden>
-              <dt x-text="entry[0]"></dt>
-              <dd x-text="entry[1]"></dd>
-            </dl>
-          </template>
+    <div class="uk-width-expand">
+      <div class="uk-margin">
+        <label class="uk-form-label" for="plugin-select">Choose a plugin</label>
+        <div class="uk-form-controls">
+          <select id="plugin-select" class="uk-select">
+            <% plugins.each do |p| %>
+              <option value="<%= p[:id] %>"><%= p[:title] %></option>
+            <% end %>
+          </select>
        </div>
-      </template>
-
-      <template x-if="manga">
-        <div class="uk-margin">
-          <p x-show="manga.length === 0">No matching manga found.</p>
-          <p x-show="manga.length > 0">
-          <span x-text="`${manga.length} manga found`"></span>
-          <span :uk-icon="listManga ? 'chevron-down' : 'chevron-right'" @click="listManga = !listManga"></span>
-          </p>
-
-          <div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid x-show="listManga">
-            <template x-for="m in manga" :key="m.id">
-              <div class="item" :data-id="m.id" @click="mangaSelected($event)">
-                <div class="uk-card uk-card-default">
-                  <div class="uk-card-media-top uk-inline">
-                    <img uk-img :data-src="m.cover_url">
-                  </div>
-                  <div class="uk-card-body">
-                    <h3 class="uk-card-title break-word uk-margin-remove-bottom free-height" x-text="m.title"></h3>
-                    <p class="uk-text-meta" x-text="`ID: ${m.id}`"></p>
-                  </div>
-                </div>
-              </div>
-            </template>
-          </div>
-        </div>
-      </template>
-
-      <div class="uk-margin-large-top" x-show="chapters !== undefined">
-        <h3 x-text="mangaTitle"></h3>
-        <p x-text="`${chapters ? chapters.length : 0} chapters found`"></p>
-
-        <div class="uk-margin">
-          <div x-show="chapters && chapters.length > 0 && chapters.length <= chaptersLimit">
-            <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()">Download Selected</button>
-            <button class="uk-icon-button uk-margin-small-left" uk-icon="settings" @click="showFilters = !showFilters"></button>
-          </div>
-          <div uk-spinner class="uk-margin-left" x-show="adding"></div>
-        </div>
-
-        <form x-show="showFilters || (chapters && chapters.length > chaptersLimit)" class="uk-form-stacked uk-margin-bottom" id="filter-form">
-          <template x-for="field in filters">
-            <div class="uk-margin">
-              <label class="uk-form-label">
-                <span x-text="field.key"></span>
-                <template x-if="field.type === 'number'">
-                  <span class="uk-text-meta" x-text="`(between ${Math.min(...field.values)} and ${Math.max(...field.values)})`"></span>
-                </template>
-              </label>
-
-              <div x-show="field.type === 'number'" class="uk-grid-small" uk-grid>
-                <div class="uk-width-1-2@s">
-                  <input class="uk-input" placeholder="minimum value" :data-filter-key="field.key" data-filter-type="number-min">
-                </div>
-                <div class="uk-width-1-2@s">
-                  <input class="uk-input" placeholder="maximum value" :data-filter-key="field.key" data-filter-type="number-max">
-                </div>
-              </div>
-
-              <div x-show="field.type === 'date'" class="uk-grid-small" uk-grid>
-                <div class="uk-width-1-2@s">
-                  <input class="uk-input" placeholder="minimum date, e.g., Jan 1 1970" :data-filter-key="field.key" data-filter-type="date-min">
-                </div>
-                <div class="uk-width-1-2@s">
-                  <input class="uk-input" placeholder="maximum date, e.g., Jan 1 1970" :data-filter-key="field.key" data-filter-type="date-max">
-                </div>
-              </div>
-
-              <input x-show="field.type === 'string'" class="uk-input" placeholder="filter text" :data-filter-key="field.key" data-filter-type="string">
-
-              <select class="uk-select" x-show="field.type === 'array'" :data-filter-key="field.key" data-filter-type="array">
-                <option value="all">All</option>
-                <template x-for="v in field.values" :key="v">
-                  <option x-text="v" :value="v"></option>
-                </template>
-              </select>
-            </div>
-          </template>
-          <button class="uk-button uk-button-primary" @click.prevent="applyFilters()">Apply</button>
-          <button class="uk-button uk-button-default" @click.prevent="clearFilters()">Clear</button>
-        </form>
-
-        <p class="uk-text-meta" x-show="chapters && chapters.length > chaptersLimit" x-text="`The manga has ${chapters ? chapters.length : 0} chapters, but Mango can only list up to ${chaptersLimit}. Please use the filters to narrow down your search.`"></p>
-        <p x-show="chapters && chapters.length === 0" class="uk-text-meta">No chapters found.</p>
-
-        <div x-show="chapters && chapters.length > 0 && chapters.length <= chaptersLimit">
-          <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 class="uk-overflow-auto">
-            <table class="uk-table uk-table-striped">
-              <thead>
-                <tr>
-                  <template x-for="(k, idx) in chapterKeys" :key="k">
-                    <th :id="`th-${idx}`" @click="thClicked($event)">
-                      <span x-text="k"></span>
-                      <i class="fas fa-sort" x-show="![1, -1].includes(sortOptions[idx])"></i>
-                      <i class="fas fa-sort-up" x-show="sortOptions[idx] === 1"></i>
-                      <i class="fas fa-sort-down" x-show="sortOptions[idx] === -1"></i>
-                    </th>
-                  </template>
-                </tr>
-              </thead>
-              <tbody id="selectable">
-                <template x-if="chapters !== undefined && chapters.length < chaptersLimit">
-                  <template x-for="ch in chapters" :key="ch">
-                    <tr class="ui-widget-content" :id="ch.id">
-                      <template x-for="k in chapterKeys" :key="k">
-                        <td x-text="ch[k]"></td>
-                      </template>
-                    </tr>
-                  </template>
-                </template>
-              </tbody>
-            </table>
-          </div>
+      </div>
+    </div>
+    <div class="uk-width-auto">
+      <div class="uk-margin">
+        <label class="uk-form-label" for="search-input">&nbsp;</label>
+        <div class="uk-form-controls" style="padding-top: 10px;">
+          <span uk-icon="info" uk-toggle="target: #toggle"></span>
        </div>
      </div>
    </div>
  </div>
-</div>
+
+  <dl class="uk-description-list" id="toggle" hidden>
+    <% plugin.not_nil!.info.each do |k, v| %>
+      <dt><%= k %></dt>
+      <dd><%= v.to_s %></dd>
+    <% end %>
+  </dl>
+
+  <div id="table" class="uk-margin-large-top" hidden>
+    <h3 id="title-text"></h3>
+
+    <div class="uk-margin">
+      <button class="uk-button uk-button-default" onclick="selectAll()">Select All</button>
+      <button class="uk-button uk-button-default" onclick="unselect()">Clear Selections</button>
+      <button class="uk-button uk-button-primary" id="download-btn" onclick="download()">Download Selected</button>
+      <div id="download-spinner" uk-spinner class="uk-margin-left" hidden></div>
+    </div>
+    <p class="uk-text-meta">Click on a table row to select the chapter. Drag your mouse over multiple rows to select them all. Hold Ctrl to make multiple non-adjacent selections.</p>
+    <div class="uk-overflow-auto">
+      <table class="uk-table uk-table-striped tablesorter">
+      </table>
+    </div>
+  </div>
+<% end %>
+

 <% content_for "script" do %>
+  <% if plugin %>
+    <script>
+      var pid = "<%= plugin.not_nil!.info.id %>";
+    </script>
+  <% end %>
  <%= 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>
 <% end %>