added description column to DB and desc field

Reviewed-on: #1

.gitattributes

@@ -0,0 +1,5 @@
+# Auto detect text files and perform LF normalization
+*       text=auto
+
+# Shell scripts require LF
+*.sh    text eol=lf

.github/workflows/build-containers.yml

@@ -0,0 +1,108 @@
+name: Build Docker containers
+on:
+  push:
+    branches:
+      - master
+jobs:
+  build-client:
+    name: Build and push client/ Docker container
+    runs-on: ubuntu-latest
+    steps:
+      - name: Login to Docker Hub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_PASSWORD }}
+
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: Determine metadata
+        run: |
+          CLOSEST_VER="$(git describe --tags --abbrev=0 $GITHUB_SHA)"
+          CLOSEST_MAJOR_VER="$(echo ${CLOSEST_VER} | cut -d'.' -f1)"
+          CLOSEST_MINOR_VER="$(echo ${CLOSEST_VER} | cut -d'.' -f2)"
+          SHORT_COMMIT=$(echo $GITHUB_SHA | cut -c1-8)
+          BUILD_INFO="v${CLOSEST_VER}-${SHORT_COMMIT}"
+          BUILD_DATE="$(date -u +'%Y-%m-%dT%H:%M:%SZ')"
+
+          echo "major_tag=${CLOSEST_MAJOR_VER}" >> $GITHUB_ENV
+          echo "minor_tag=${CLOSEST_MAJOR_VER}.${CLOSEST_MINOR_VER}" >> $GITHUB_ENV
+          echo "build_info=${BUILD_INFO}" >> $GITHUB_ENV
+          echo "build_date=${BUILD_DATE}" >> $GITHUB_ENV
+
+          echo "Build Info: ${BUILD_INFO}"
+          echo "Build Date: ${BUILD_DATE}"
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1
+
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v1
+
+      - name: Build container
+        run: >
+          docker buildx build --push
+          --platform linux/amd64,linux/arm/v7,linux/arm64/v8
+          --build-arg BUILD_INFO=${{ env.build_info }}
+          --build-arg BUILD_DATE=${{ env.build_date }}
+          --build-arg SOURCE_COMMIT=$GITHUB_SHA
+          --build-arg DOCKER_REPO=szurubooru/client
+          -t "szurubooru/client:latest"
+          -t "szurubooru/client:${{ env.major_tag }}"
+          -t "szurubooru/client:${{ env.minor_tag }}"
+          ./client
+
+  build-server:
+    name: Build and push server/ Docker container
+    runs-on: ubuntu-latest
+    steps:
+      - name: Login to Docker Hub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_PASSWORD }}
+
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: Determine metadata
+        run: |
+          CLOSEST_VER="$(git describe --tags --abbrev=0 $GITHUB_SHA)"
+          CLOSEST_MAJOR_VER="$(echo ${CLOSEST_VER} | cut -d'.' -f1)"
+          CLOSEST_MINOR_VER="$(echo ${CLOSEST_VER} | cut -d'.' -f2)"
+          SHORT_COMMIT=$(echo $GITHUB_SHA | cut -c1-8)
+          BUILD_INFO="v${CLOSEST_VER}-${SHORT_COMMIT}"
+          BUILD_DATE="$(date -u +'%Y-%m-%dT%H:%M:%SZ')"
+
+          echo "major_tag=${CLOSEST_MAJOR_VER}" >> $GITHUB_ENV
+          echo "minor_tag=${CLOSEST_MAJOR_VER}.${CLOSEST_MINOR_VER}" >> $GITHUB_ENV
+          echo "build_info=${BUILD_INFO}" >> $GITHUB_ENV
+          echo "build_date=${BUILD_DATE}" >> $GITHUB_ENV
+
+          echo "Build Info: ${BUILD_INFO}"
+          echo "Build Date: ${BUILD_DATE}"
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1
+
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v1
+
+      - name: Build container
+        run: >
+          docker buildx build --push
+          --platform linux/amd64,linux/arm/v7,linux/arm64/v8
+          --build-arg BUILD_DATE=${{ env.build_date }}
+          --build-arg SOURCE_COMMIT=$GITHUB_SHA
+          --build-arg DOCKER_REPO=szurubooru/server
+          -t "szurubooru/server:latest"
+          -t "szurubooru/server:${{ env.major_tag }}"
+          -t "szurubooru/server:${{ env.minor_tag }}"
+          ./server

.github/workflows/run-unit-tests.yml

@@ -0,0 +1,28 @@
+name: Run unit tests
+on: [push, pull_request]
+jobs:
+  test-server:
+    name: Run pytest for server/
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v1
+
+      - name: Build test container
+        run: >
+          docker buildx build --load
+          --platform linux/amd64 --target testing
+          -t test_container
+          ./server
+
+      - name: Run unit tests
+        run: >
+          docker run --rm -t test_container
+          --color=no
+          --cov-report=term-missing:skip-covered
+          --cov=szurubooru
+          szurubooru/

.gitignore

@@ -1,4 +1,18 @@
+# User-specific configuration
 config.yaml
+.env
+
+# Client Development Artifacts
 */*_modules/
+client/public
+
+# Server Development Artifacts
 .coverage
 .cache
+server/**/lib/
+server/**/bin/
+server/**/pyvenv.cfg
+__pycache__/
+
+data/
+sql/

.pre-commit-config.yaml

@@ -0,0 +1,62 @@
+repos:
+
+-   repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v4.4.0
+    hooks:
+    -   id: trailing-whitespace
+    -   id: end-of-file-fixer
+    -   id: check-yaml
+    -   id: mixed-line-ending
+
+
+-   repo: https://github.com/Lucas-C/pre-commit-hooks
+    rev: v1.4.2
+    hooks:
+    -   id: remove-tabs
+
+-   repo: https://github.com/psf/black
+    rev: '23.1.0'
+    hooks:
+      - id: black
+        files: 'server/'
+        types: [python]
+        language_version: python3.9
+
+-   repo: https://github.com/PyCQA/isort
+    rev: '5.12.0'
+    hooks:
+    -   id: isort
+        files: 'server/'
+        types: [python]
+        exclude: server/szurubooru/migrations/env.py
+        additional_dependencies:
+        -   toml
+
+-   repo: https://github.com/pre-commit/mirrors-prettier
+    rev: v2.7.1
+    hooks:
+    -   id: prettier
+        files: client/js/
+        exclude: client/js/.gitignore
+        args: ['--config', 'client/.prettierrc.yml']
+
+-   repo: https://github.com/pre-commit/mirrors-eslint
+    rev: v8.33.0
+    hooks:
+    -   id: eslint
+        files: client/js/
+        args: ['--fix']
+        additional_dependencies:
+        -   eslint-config-prettier
+
+-   repo: https://github.com/PyCQA/flake8
+    rev: '6.0.0'
+    hooks:
+    -   id: flake8
+        files: server/szurubooru/
+        additional_dependencies:
+        -   flake8-print
+        args: ['--config=server/.flake8']
+
+fail_fast: true
+exclude: LICENSE.md

INSTALL.md

@@ -1,179 +0,0 @@
-This guide assumes Arch Linux. Although exact instructions for other
-distributions are different, the steps stay roughly the same.
-
-### Installing hard dependencies
-
-```console
-user@host:~$ sudo pacman -S postgresql
-user@host:~$ sudo pacman -S python
-user@host:~$ sudo pacman -S python-pip
-user@host:~$ sudo pacman -S ffmpeg
-user@host:~$ sudo pacman -S npm
-user@host:~$ sudo pip install virtualenv
-user@host:~$ python --version
-Python 3.5.1
-```
-
-The reason `ffmpeg` is used over, say, `ImageMagick` or even `PIL` is because of
-Flash and video posts.
-
-
-
-### Setting up a database
-
-First, basic `postgres` configuration:
-
-```console
-user@host:~$ sudo -i -u postgres initdb --locale en_US.UTF-8 -E UTF8 -D /var/lib/postgres/data
-user@host:~$ sudo systemctl start postgresql
-user@host:~$ sudo systemctl enable postgresql
-```
-
-Then creating a database:
-
-```console
-user@host:~$ sudo -i -u postgres createuser --interactive
-Enter name of role to add: szuru
-Shall the new role be a superuser? (y/n) n
-Shall the new role be allowed to create databases? (y/n) n
-Shall the new role be allowed to create more new roles? (y/n) n
-user@host:~$ sudo -i -u postgres createdb szuru
-user@host:~$ sudo -i -u postgres psql -c "ALTER USER szuru PASSWORD 'dog';"
-```
-
-
-
-### Preparing environment
-
-Getting `szurubooru`:
-
-```console
-user@host:~$ git clone https://github.com/rr-/szurubooru.git szuru
-user@host:~$ cd szuru
-```
-
-Installing frontend dependencies:
-
-```console
-user@host:szuru$ cd client
-user@host:szuru/client$ npm install
-```
-
-`npm` sandboxes dependencies by default, i.e. installs them to
-`./node_modules`. This is good, because it avoids polluting the system with the
-project's dependencies. To make Python work the same way, we'll use
-`virtualenv`. Installing backend dependencies with `virtualenv` looks like
-this:
-
-```console
-user@host:szuru/client$ cd ../server
-user@host:szuru/server$ virtualenv python_modules # consistent with node_modules
-user@host:szuru/server$ source python_modules/bin/activate # enters the sandbox
-(python_modules) user@host:szuru/server$ pip install -r requirements.txt # installs the dependencies
-```
-
-
-
-### Preparing `szurubooru` for first run
-
-1. Configure things:
-
-    ```console
-    user@host:szuru$ cp config.yaml.dist config.yaml
-    user@host:szuru$ vim config.yaml
-    ```
-
-    Pay extra attention to these fields:
-
-    - base URL,
-    - API URL,
-    - data directory,
-    - data URL,
-    - database,
-    - the `smtp` section.
-
-2. Compile the frontend:
-
-    ```console
-    user@host:szuru$ cd client
-    user@host:szuru/client$ npm run build
-    ```
-
-3. Upgrade the database:
-
-    ```console
-    user@host:szuru/client$ cd ../server
-    user@host:szuru/server$ source python_modules/bin/activate
-    (python_modules) user@host:szuru/server$ alembic upgrade head
-    ```
-
-    `alembic` should have been installed during installation of `szurubooru`'s
-    dependencies.
-
-4. Run the tests:
-
-    ```console
-    (python_modules) user@host:szuru/server$ ./test
-    ```
-
-It is recommended to rebuild the frontend after each change to configuration.
-
-
-
-### Wiring `szurubooru` to the web server
-
-`szurubooru` is divided into two parts: public static files, and the API. It
-tries not to impose any networking configurations on the user, so it is the
-user's responsibility to wire these to their web server.
-
-Below are described the methods to integrate the API into a web server:
-
-1. Run API locally with `waitress`, and bind it with a reverse proxy. In this
-   approach, the user needs to (from within `virtualenv`) install `waitress`
-   with `pip install waitress` and then start `szurubooru` with `./host-waitress`
-   from within the `server/` directory (see `--help` for details). Then the
-   user needs to add a virtual host that delegates the API requests to the
-   local API server, and the browser requests to the `client/public/`
-   directory.
-2. Alternatively, Apache users can use `mod_wsgi`.
-3. Alternatively, users can use other WSGI frontends such as `gunicorn` or
-   `uwsgi`, but they'll need to write wrapper scripts themselves.
-
-Note that the API URL in the virtual host configuration needs to be the same as
-the one in the `config.yaml`, so that client knows how to access the backend!
-
-#### Example
-
-**nginx configuration** - wiring API `http://great.dude/api/` to
-`localhost:6666` to avoid fiddling with CORS:
-
-```nginx
-server {
-    listen 80;
-    server_name great.dude;
-    merge_slashes off;  # to support post tags such as ///
-
-    location ~ ^/api$ {
-        return 302 /api/;
-    }
-    location ~ ^/api/(.*)$ {
-        proxy_pass http://127.0.0.1:6666/$1$is_args$args;
-    }
-    location / {
-        root /home/rr-/src/maintained/szurubooru/client/public;
-        try_files $uri /index.htm;
-    }
-}
-```
-
-**`config.yaml`**:
-
-```yaml
-api_url: 'http://big.dude/api/'
-base_url: 'http://big.dude/'
-data_url: 'http://big.dude/data/'
-data_dir: '/home/rr-/src/maintained/szurubooru/client/public/data'
-```
-
-Then the backend is started with `host-waitress` from within `virtualenv` and
-`./server/` directory.

README.md

@@ -3,14 +3,16 @@
 Szurubooru is an image board engine inspired by services such as Danbooru,
 Gelbooru and Moebooru dedicated for small and medium communities. Its name [has
 its roots in Polish language and has onomatopeic meaning of scraping or
-scrubbing](http://sjp.pwn.pl/sjp/;2527372). It is pronounced as *shoorubooru*.
+scrubbing](https://sjp.pwn.pl/sjp/;2527372). It is pronounced as *shoorubooru*.
 
 ## Features
 
 - Post content: images (JPG, PNG, GIF, animated GIF), videos (MP4, WEBM), Flash animations
+- Ability to retrieve web video content using [yt-dlp](https://github.com/yt-dlp/yt-dlp)
 - Post comments
 - Post notes / annotations, including arbitrary polygons
-- Rich JSON REST API ([see documentation](https://github.com/rr-/szurubooru/blob/master/API.md))
+- Rich JSON REST API ([see documentation](doc/API.md))
+- Token based authentication for clients
 - Rich search system
 - Rich privilege system
 - Autocomplete in search and while editing tags
@@ -18,20 +20,20 @@ scrubbing](http://sjp.pwn.pl/sjp/;2527372). It is pronounced as *shoorubooru*.
 - Tag suggestions
 - Tag implications (adding a tag automatically adds another)
 - Tag aliases
+- Pools and pool categories
 - Duplicate detection
 - Post rating and favoriting; comment rating
 - Polished UI
 - Browser configurable endless paging
 - Browser configurable backdrop grid for transparent images
 
-## Requirements
+## Installation
 
-- Python
+It is recommended that you use Docker for deployment.
-- Postgres
+[See installation instructions.](doc/INSTALL.md)
-- FFmpeg
-- node.js
 
-[See installation instructions.](https://github.com/rr-/szurubooru/blob/master/INSTALL.md)
+More installation resources, as well as related projects can be found on the
+[GitHub project Wiki](https://github.com/rr-/szurubooru/wiki)
 
 ## Screenshots
 
@@ -45,4 +47,4 @@ Post view:
 
 ## License
 
-[GPLv3](https://github.com/rr-/szurubooru/blob/master/LICENSE.md).
+[GPLv3](LICENSE.md).

client/.babelrc

@@ -1 +1 @@
-{ "presets": ["es2015"] }
+{ "presets": ["env"] }

client/.dockerignore

@@ -0,0 +1,4 @@
+node_modules/*
+Dockerfile
+.dockerignore
+**/.gitignore

client/.eslintrc.yml

@@ -0,0 +1,12 @@
+env:
+  browser: true
+  commonjs: true
+  es6: true
+extends: 'prettier'
+globals:
+  Atomics: readonly
+  SharedArrayBuffer: readonly
+ignorePatterns:
+  - build.js
+parserOptions:
+  ecmaVersion: 11

client/.prettierrc.yml

@@ -0,0 +1,4 @@
+parser: babel
+printWidth: 79
+tabWidth: 4
+quoteProps: consistent

client/Dockerfile

@@ -0,0 +1,44 @@
+FROM --platform=$BUILDPLATFORM node:lts as builder
+WORKDIR /opt/app
+
+COPY package.json package-lock.json ./
+RUN npm install
+
+COPY . ./
+
+ARG BUILD_INFO="docker-latest"
+ARG CLIENT_BUILD_ARGS=""
+RUN BASE_URL="__BASEURL__" node build.js --gzip ${CLIENT_BUILD_ARGS}
+
+
+FROM --platform=$BUILDPLATFORM scratch as approot
+
+COPY docker-start.sh /
+
+WORKDIR /etc/nginx
+COPY nginx.conf.docker ./nginx.conf
+
+WORKDIR /var/www
+COPY --from=builder /opt/app/public/ .
+
+
+FROM nginx:alpine as release
+
+RUN apk --no-cache add dumb-init
+COPY --from=approot / /
+
+CMD ["/docker-start.sh"]
+VOLUME ["/data"]
+
+ARG DOCKER_REPO
+ARG BUILD_DATE
+ARG SOURCE_COMMIT
+LABEL \
+    maintainer="" \
+    org.opencontainers.image.title="${DOCKER_REPO}" \
+    org.opencontainers.image.url="https://github.com/rr-/szurubooru" \
+    org.opencontainers.image.documentation="https://github.com/rr-/szurubooru/blob/${SOURCE_COMMIT}/doc/INSTALL.md" \
+    org.opencontainers.image.created="${BUILD_DATE}" \
+    org.opencontainers.image.source="https://github.com/rr-/szurubooru" \
+    org.opencontainers.image.revision="${SOURCE_COMMIT}" \
+    org.opencontainers.image.licenses="GPL-3.0"

client/build.js

@@ -1,234 +1,424 @@
+#!/usr/bin/env node
 'use strict';
 
+// -------------------------------------------------
+
+const webapp_icons = [
+    { name: 'android-chrome-192x192.png', size: 192 },
+    { name: 'android-chrome-512x512.png', size: 512 },
+    { name: 'apple-touch-icon.png', size: 180 },
+    { name: 'mstile-150x150.png', size: 150 }
+];
+
+const webapp_splash_screens = [
+    { w: 640, h: 1136, center: 320 },
+    { w: 750, h: 1294, center: 375 },
+    { w: 1125, h: 2436, center: 565 },
+    { w: 1242, h: 2148, center: 625 },
+    { w: 1536, h: 2048, center: 770 },
+    { w: 1668, h: 2224, center: 820 },
+    { w: 2048, h: 2732, center: 1024 }
+];
+
+const external_js = [
+    'dompurify',
+    'js-cookie',
+    'marked',
+    'mousetrap',
+    'nprogress',
+    'superagent',
+    'underscore',
+];
+
+const app_manifest = {
+    name: 'szurubooru',
+    icons: [
+        {
+            src: baseUrl() + 'img/android-chrome-192x192.png',
+            type: 'image/png',
+            sizes: '192x192'
+        },
+        {
+            src: baseUrl() + 'img/android-chrome-512x512.png',
+            type: 'image/png',
+            sizes: '512x512'
+        }
+    ],
+    start_url: baseUrl(),
+    theme_color: '#24aadd',
+    background_color: '#ffffff',
+    display: 'standalone'
+}
+
+// -------------------------------------------------
+
 const fs = require('fs');
 const glob = require('glob');
 const path = require('path');
 const util = require('util');
 const execSync = require('child_process').execSync;
-const camelcase = require('camelcase');
+const browserify = require('browserify');
-
+const chokidar = require('chokidar');
-function convertKeysToCamelCase(input) {
+const WebSocket = require('ws');
-    let result = {};
+var PrettyError = require('pretty-error');
-    Object.keys(input).map((key, _) => {
+var pe = new PrettyError();
-        const value = input[key];
-        if (value !== null && value.constructor == Object) {
-            result[camelcase(key)] = convertKeysToCamelCase(value);
-        } else {
-            result[camelcase(key)] = value;
-        }
-    });
-    return result;
-}
 
 function readTextFile(path) {
     return fs.readFileSync(path, 'utf-8');
 }
 
-function writeFile(path, content) {
+function gzipFile(file) {
-    return fs.writeFileSync(path, content);
+    file = path.normalize(file);
+    execSync('gzip -6 -k ' + file);
 }
 
-function getVersion() {
+function baseUrl() {
-    return execSync('git describe --always --dirty --long --tags')
+    return process.env.BASE_URL ? process.env.BASE_URL : '/';
-        .toString()
-        .trim();
 }
 
-function getConfig() {
+// -------------------------------------------------
-    const yaml = require('js-yaml');
-    const merge = require('merge');
-    const camelcaseKeys = require('camelcase-keys');
 
-    function parseConfigFile(path) {
+function bundleHtml() {
-        let result = yaml.load(readTextFile(path, 'utf-8'));
-        return convertKeysToCamelCase(result);
-    }
-
-    let config = parseConfigFile('../config.yaml.dist');
-
-    try {
-        const localConfig = parseConfigFile('../config.yaml');
-        config = merge.recursive(config, localConfig);
-    } catch (e) {
-        console.warn('Local config does not exist, ignoring');
-    }
-
-    config.canSendMails = !!config.smtp.host;
-    delete config.secret;
-    delete config.smtp;
-    delete config.database;
-    config.meta = {
-        version: getVersion(),
-        buildDate: new Date().toUTCString(),
-    };
-
-    return config;
-}
-
-function copyFile(source, target) {
-    fs.createReadStream(source).pipe(fs.createWriteStream(target));
-}
-
-function minifyJs(path) {
-    return require('uglify-js').minify(path, {compress: {unused: false}}).code;
-}
-
-function minifyCss(css) {
-    return require('csso').minify(css);
-}
-
-function minifyHtml(html) {
-    return require('html-minifier').minify(html, {
-        removeComments: true,
-        collapseWhitespace: true,
-        conservativeCollapse: true,
-    }).trim();
-}
-
-function bundleHtml(config) {
     const underscore = require('underscore');
     const babelify = require('babelify');
-    const baseHtml = readTextFile('./html/index.htm', 'utf-8');
-    const finalHtml = baseHtml
-        .replace(
-            /(<title>)(.*)(<\/title>)/,
-            util.format('$1%s$3', config.name));
-    writeFile('./public/index.htm', minifyHtml(finalHtml));
 
-    glob('./html/**/*.tpl', {}, (er, files) => {
+    function minifyHtml(html) {
-        let compiledTemplateJs = '\'use strict\'\n';
+        return require('html-minifier').minify(html, {
-        compiledTemplateJs += 'let _ = require(\'underscore\');';
+            removeComments: true,
-        compiledTemplateJs += 'let templates = {};';
+            collapseWhitespace: true,
-        for (const file of files) {
+            conservativeCollapse: true,
-            const name = path.basename(file, '.tpl').replace(/_/g, '-');
+        }).trim();
-            const placeholders = [];
+    }
-            let templateText = readTextFile(file, 'utf-8');
-            templateText = templateText.replace(
-                /<%.*?%>/ig,
-                (match) => {
-                    const ret = '%%%TEMPLATE' + placeholders.length;
-                    placeholders.push(match);
-                    return ret;
-                });
-            templateText = minifyHtml(templateText);
-            templateText = templateText.replace(
-                /%%%TEMPLATE(\d+)/g,
-                (match, number) => { return placeholders[number]; });
 
-            const functionText = underscore.template(
+    const baseHtml = readTextFile('./html/index.htm')
-                templateText, {variable: 'ctx'}).source;
+        .replace('<!-- Base HTML Placeholder -->', `<base href="${baseUrl()}"/>`);
-            compiledTemplateJs += `templates['${name}'] = ${functionText};`;
+    fs.writeFileSync('./public/index.htm', minifyHtml(baseHtml));
-        }
+
-        compiledTemplateJs += 'module.exports = templates;';
+    let compiledTemplateJs = [
-        writeFile('./js/.templates.autogen.js', compiledTemplateJs);
+        `'use strict';`,
-        console.info('Bundled HTML');
+        `let _ = require('underscore');`,
-    });
+        `let templates = {};`
+    ];
+
+    for (const file of glob.sync('./html/**/*.tpl')) {
+        const name = path.basename(file, '.tpl').replace(/_/g, '-');
+        const placeholders = [];
+        let templateText = readTextFile(file);
+        templateText = templateText.replace(
+            /<%.*?%>/ig,
+            (match) => {
+                const ret = '%%%TEMPLATE' + placeholders.length;
+                placeholders.push(match);
+                return ret;
+            });
+        templateText = minifyHtml(templateText);
+        templateText = templateText.replace(
+            /%%%TEMPLATE(\d+)/g,
+            (match, number) => { return placeholders[number]; });
+
+        const functionText = underscore.template(
+            templateText, { variable: 'ctx' }).source;
+
+        compiledTemplateJs.push(`templates['${name}'] = ${functionText};`);
+    }
+    compiledTemplateJs.push('module.exports = templates;');
+
+    fs.writeFileSync('./js/.templates.autogen.js', compiledTemplateJs.join('\n'));
+    console.info('Bundled HTML');
 }
 
 function bundleCss() {
     const stylus = require('stylus');
-    glob('./css/**/*.styl', {}, (er, files) => {
-        let css = '';
-        for (const file of files) {
-            css += stylus.render(
-                readTextFile(file), {filename: file});
-        }
-        writeFile('./public/css/app.min.css', minifyCss(css));
 
-        copyFile(
+    function minifyCss(css) {
-            './node_modules/font-awesome/css/font-awesome.min.css',
+        return require('csso').minify(css).css;
-            './public/css/vendor.min.css');
-
-        console.info('Bundled CSS');
-    });
-}
-
-function bundleJs(config) {
-    const browserify = require('browserify');
-    const external = [
-        'underscore',
-        'superagent',
-        'mousetrap',
-        'js-cookie',
-        'nprogress',
-    ];
-
-    function writeJsBundle(b, path, message, compress) {
-        let outputFile = fs.createWriteStream(path);
-        b.bundle().pipe(outputFile);
-        outputFile.on('finish', function() {
-            if (compress) {
-                writeFile(path, minifyJs(path));
-            }
-            console.info(message);
-        });
     }
 
-    glob('./js/**/*.js', {}, (er, files) => {
+    let css = '';
-        if (!process.argv.includes('--no-vendor-js')) {
+    for (const file of glob.sync('./css/**/*.styl')) {
-            let b = browserify();
+        css += stylus.render(readTextFile(file), { filename: file });
-            for (let lib of external) {
+    }
-                b.require(lib);
+    fs.writeFileSync('./public/css/app.min.css', minifyCss(css));
-            }
+    if (process.argv.includes('--gzip')) {
-            if (config.transpile) {
+        gzipFile('./public/css/app.min.css');
-                b.add(require.resolve('babel-polyfill'));
+    }
-            }
-            writeJsBundle(
-                b, './public/js/vendor.min.js', 'Bundled vendor JS', true);
-        }
 
-        if (!process.argv.includes('--no-app-js')) {
+    fs.copyFileSync(
-            let outputFile = fs.createWriteStream('./public/js/app.min.js');
+        './node_modules/font-awesome/css/font-awesome.min.css',
-            let b = browserify({debug: config.debug});
+        './public/css/vendor.min.css');
-            if (config.transpile) {
+    if (process.argv.includes('--gzip')) {
-                b = b.transform('babelify');
+        gzipFile('./public/css/vendor.min.css');
-            }
+    }
-            writeJsBundle(
+
-                b.external(external).add(files),
+    console.info('Bundled CSS');
-                './public/js/app.min.js',
+}
-                'Bundled app JS',
+
-                !config.debug);
+function minifyJs(path) {
+    return require('terser').minify(
+        fs.readFileSync(path, 'utf-8'), { compress: { unused: false } }).code;
+}
+
+function writeJsBundle(b, path, compress, callback) {
+    let outputFile = fs.createWriteStream(path);
+    b.bundle().on('error', (e) => console.error(pe.render(e))).pipe(outputFile);
+    outputFile.on('finish', () => {
+        if (compress) {
+            fs.writeFileSync(path, minifyJs(path));
         }
+        callback();
     });
 }
 
-function bundleConfig(config) {
+function bundleVendorJs(compress) {
-    writeFile(
+    let b = browserify();
-        './js/.config.autogen.json', JSON.stringify(config));
+    for (let lib of external_js) {
-    glob('./node_modules/font-awesome/fonts/*.*', {}, (er, files) => {
+        b.require(lib);
-        for (let file of files) {
+    }
-            if (fs.lstatSync(file).isDirectory()) {
+    if (!process.argv.includes('--no-transpile')) {
-                continue;
+        b.add(require.resolve('babel-polyfill'));
-            }
+    }
-            copyFile(file, path.join('./public/fonts/', path.basename(file)));
+    const file = './public/js/vendor.min.js';
+    writeJsBundle(b, file, compress, () => {
+        if (process.argv.includes('--gzip')) {
+            gzipFile(file);
         }
+        console.info('Bundled vendor JS');
     });
 }
 
+function bundleAppJs(b, compress, callback) {
+    const file = './public/js/app.min.js';
+    writeJsBundle(b, file, compress, () => {
+        if (process.argv.includes('--gzip')) {
+            gzipFile(file);
+        }
+        console.info('Bundled app JS');
+        callback();
+    });
+}
+
+function bundleJs() {
+    if (!process.argv.includes('--no-vendor-js')) {
+        bundleVendorJs(true);
+    }
+
+    if (!process.argv.includes('--no-app-js')) {
+        let watchify = require('watchify');
+        let b = browserify({ debug: process.argv.includes('--debug') });
+        if (!process.argv.includes('--no-transpile')) {
+            b = b.transform('babelify');
+        }
+        b = b.external(external_js).add(glob.sync('./js/**/*.js'));
+        const compress = !process.argv.includes('--debug');
+        bundleAppJs(b, compress, () => { });
+    }
+}
+
+const environment = process.argv.includes('--watch') ? "development" : "production";
+
+function bundleConfig() {
+    function getVersion() {
+        let build_info = process.env.BUILD_INFO;
+        if (!build_info) {
+            try {
+                build_info = execSync('git describe --always --dirty --long --tags').toString();
+            } catch (e) {
+                console.warn('Cannot find build version');
+                build_info = 'unknown';
+            }
+        }
+        return build_info.trim();
+    }
+    const config = {
+        meta: {
+            version: getVersion(),
+            buildDate: new Date().toUTCString()
+        },
+        environment: environment
+    };
+
+    fs.writeFileSync('./js/.config.autogen.json', JSON.stringify(config));
+    console.info('Generated config file');
+}
+
 function bundleBinaryAssets() {
-    glob('./img/*.png', {}, (er, files) => {
+    fs.copyFileSync('./img/favicon.png', './public/img/favicon.png');
-        for (let file of files) {
+    console.info('Copied images');
-            copyFile(file, path.join('./public/img/', path.basename(file)));
+
+    fs.copyFileSync('./fonts/open_sans.woff2', './public/fonts/open_sans.woff2')
+    for (let file of glob.sync('./node_modules/font-awesome/fonts/*.*')) {
+        if (fs.lstatSync(file).isDirectory()) {
+            continue;
+        }
+        fs.copyFileSync(file, path.join('./public/fonts/', path.basename(file)));
+    }
+    if (process.argv.includes('--gzip')) {
+        for (let file of glob.sync('./public/fonts/*.*')) {
+            if (file.endsWith('woff2')) {
+                continue;
+            }
+            gzipFile(file);
+        }
+    }
+    console.info('Copied fonts')
+}
+
+function bundleWebAppFiles() {
+    const Jimp = require('jimp');
+
+    fs.writeFileSync('./public/manifest.json', JSON.stringify(app_manifest));
+    console.info('Generated app manifest');
+
+    Promise.all(webapp_icons.map(icon => {
+        return Jimp.read('./img/app.png')
+            .then(file => {
+                file.resize(icon.size, Jimp.AUTO, Jimp.RESIZE_BEZIER)
+                    .write(path.join('./public/img/', icon.name));
+            });
+    }))
+        .then(() => {
+            console.info('Generated webapp icons');
+        });
+
+    Promise.all(webapp_splash_screens.map(dim => {
+        return Jimp.read('./img/splash.png')
+            .then(file => {
+                file.resize(dim.center, Jimp.AUTO, Jimp.RESIZE_BEZIER)
+                    .background(0xFFFFFFFF)
+                    .contain(dim.w, dim.center,
+                        Jimp.HORIZONTAL_ALIGN_CENTER | Jimp.VERTICAL_ALIGN_MIDDLE)
+                    .contain(dim.w, dim.h,
+                        Jimp.HORIZONTAL_ALIGN_CENTER | Jimp.VERTICAL_ALIGN_MIDDLE)
+                    .write(path.join('./public/img/',
+                        'apple-touch-startup-image-' + dim.w + 'x' + dim.h + '.png'));
+            });
+    }))
+        .then(() => {
+            console.info('Generated splash screens');
+        });
+}
+
+function makeOutputDirs() {
+    const dirs = [
+        './public',
+        './public/css',
+        './public/fonts',
+        './public/img',
+        './public/js'
+    ];
+    for (let dir of dirs) {
+        if (!fs.existsSync(dir)) {
+            fs.mkdirSync(dir, 0o755);
+            console.info('Created directory: ' + dir);
+        }
+    }
+}
+
+function watch() {
+    let wss = new WebSocket.Server({ port: 8080 });
+    const liveReload = !process.argv.includes('--no-live-reload');
+
+    function emitReload() {
+        if (liveReload) {
+            console.log("Requesting live reload.")
+            wss.clients.forEach((client) => {
+                if (client.readyState === WebSocket.OPEN) {
+                    client.send("reload");
+                }
+            });
+        }
+    }
+
+    chokidar.watch('./fonts/**/*').on('change', () => {
+        try {
+            bundleBinaryAssets();
+            emitReload();
+        } catch (e) {
+            console.error(pe.render(e));
+        }
+    });
+    chokidar.watch('./img/**/*').on('change', () => {
+        try {
+            bundleWebAppFiles();
+            emitReload();
+        } catch (e) {
+            console.error(pe.render(e));
+        }
+    });
+    chokidar.watch('./html/**/*.tpl').on('change', () => {
+        try {
+            bundleHtml();
+        } catch (e) {
+            console.error(pe.render(e));
+        }
+    });
+    chokidar.watch('./css/**/*.styl').on('change', () => {
+        try {
+            bundleCss()
+            emitReload();
+        } catch (e) {
+            console.error(pe.render(e));
         }
     });
-}
 
-process.on('uncaughtException', (error) => {
+    bundleBinaryAssets();
-    const stack = error.stack;
+    bundleWebAppFiles();
-    delete error.stack;
-    console.log(error);
-    console.log(stack);
-});
-
-const config = getConfig();
-bundleConfig(config);
-bundleBinaryAssets();
-if (!process.argv.includes('--no-html')) {
-    bundleHtml(config);
-}
-if (!process.argv.includes('--no-css')) {
     bundleCss();
+    bundleHtml();
+
+    bundleVendorJs(true);
+
+    let watchify = require('watchify');
+    let b = browserify({
+        debug: process.argv.includes('--debug'),
+        entries: ['js/main.js'],
+        cache: {},
+        packageCache: {},
+    });
+
+    b.plugin(watchify);
+
+    if (!process.argv.includes('--no-transpile')) {
+        b = b.transform('babelify');
+    }
+    b = b.external(external_js).add(glob.sync('./js/**/*.js'));
+    const compress = false;
+
+    function bundle(id) {
+        console.info("Rebundling app JS...");
+        let start = new Date();
+        bundleAppJs(b, compress, () => {
+            let end = new Date() - start;
+            console.info('Rebundled in %ds.', end / 1000)
+            emitReload();
+        });
+    }
+
+    b.on('update', bundle);
+    bundle();
 }
-if (!process.argv.includes('--no-js')) {
+
-    bundleJs(config);
+// -------------------------------------------------
+
+console.log("Building for '" + environment + "' environment.");
+makeOutputDirs();
+bundleConfig();
+if (process.argv.includes('--watch')) {
+    watch();
+} else {
+    if (!process.argv.includes('--no-binary-assets')) {
+        bundleBinaryAssets();
+    }
+    if (!process.argv.includes('--no-web-app-files')) {
+        bundleWebAppFiles();
+    }
+    if (!process.argv.includes('--no-html')) {
+        bundleHtml();
+    }
+    if (!process.argv.includes('--no-css')) {
+        bundleCss();
+    }
+    if (!process.argv.includes('--no-js')) {
+        bundleJs();
+    }
 }

client/css/colors.styl

@@ -1,13 +1,17 @@
 $main-color = #24AADD
 $window-color = white
+$window-color-darktheme = #1a1a1a
 $top-navigation-color = #F5F5F5
+$top-navigation-color-darktheme = #333333
 $text-color = #111
+$text-color-darktheme = #e6e6e6
 $inactive-link-color = #888
+$inactive-link-color-darktheme = #cccccc
 $line-color = #DDD
-$inactive-tab-text-color = $inactive-link-color
-$active-tab-text-color = $text-color
 $active-tab-background-color = rgba(0, 0, 0, 0.06)
 $focused-tab-background-color = rgba(0, 0, 0, 0.03)
+$active-tab-background-color-darktheme = rgba(255, 255, 255, 0.06)
+$focused-tab-background-color-darktheme = rgba(255, 255, 255, 0.03)
 $message-info-border-color = #BDF
 $message-info-background-color = #E3EFF9
 $message-error-border-color = #FCC
@@ -21,6 +25,7 @@ $input-good-background-color = #F5FFF5
 $input-enabled-background-color = #FAFAFA
 $input-enabled-border-color = #EEE
 $input-enabled-text-color = $text-color
+$input-enabled-text-color-darktheme = $text-color-darktheme
 $input-disabled-background-color = #FAFAFA
 $input-disabled-border-color = #EEE
 $input-disabled-text-color = #888
@@ -35,7 +40,6 @@ $new-tag-background-color = #DFC
 $new-tag-text-color = black
 $implied-tag-background-color = #FFC
 $implied-tag-text-color = black
-$tag-suggestions-background-color = $window-color
 $tag-suggestions-header-color = #EEE
 $tag-suggestions-border-color = #AAA
 $duplicate-tag-background-color = #FDC
@@ -55,3 +59,6 @@ $hovered-first-note-point-color = red
 $safety-safe = #88D488
 $safety-sketchy = #F3D75F
 $safety-unsafe = #F3985F
+$scrollbar-thumb-color = $main-color
+$scrollbar-bg-color = $input-enabled-background-color
+$transparency-grid-square-color = #F0F0F0

client/css/comment-control.styl

@@ -1,60 +1,15 @@
 @import colors
+$comment-header-background-color = $top-navigation-color
+$comment-header-background-color-darktheme = $top-navigation-color-darktheme
 
-.comment-form-container
+$comment-border-color = #DDD
-    &:not(.editing)
-        .tabs nav
-            display: none
-        .tabs .edit.tab
-            display: none
-        .comment-content
-            margin-left: 0.5em
-    &.editing
-        .tab:not(.active)
-            display: none
-        .tabs-wrapper
-            background: $active-tab-background-color
-            padding: 0.3em
-        .tab-wrapper[data-tab='preview']
-            background: $window-color
-        .tab.preview
-            padding: 1em
-        .tab.edit
-            textarea
-                resize: vertical
-                width: 100%
-                max-height: 80vh
-                box-sizing: padding-box
-                vertical-align: top /* ghost margin on chrome */
 
-    form
+.comment-container
-        width: auto
+    padding: 0 0 0 60px
-        margin: 0
-        &:after
-            display: block
-            height: 1px
-            content: ' '
-            clear: both
-
-    nav
-        vertical-align: middle !important
-        &.buttons
-            margin: 0 0.3em 0.5em 0 !important
-            float: left
-        &.actions
-            float: left
-            margin: 0.3em 0 0.5em 0 !important
-
-
-.comment
-    margin: 0 0 1em 0
-    padding: 0
-    display: -webkit-flex
-    display: flex
 
     .avatar
-        margin-right: 1em
+        float: left
-        -webkit-flex-shrink: 0
+        margin-left: -60px
-        flex-shrink: 0
         vertical-align: top
 
         .thumbnail
@@ -63,25 +18,72 @@
         a
             display: inline-block
 
-    .body
+    nav:not(.active), .tab:not(.active)
-        flex-grow: 1
+        display: none
+
+    .comment
+        border: 1px solid $comment-border-color
+
         header
             white-space: nowrap
-            line-height: 16pt
+            font-size: 95%
             vertical-align: middle
-            margin-bottom: 0.5em
+            position: relative
-            background: $top-navigation-color
+            background: $comment-header-background-color
-            padding: 0.2em 0.5em
+            border-bottom: 1px solid $comment-border-color
+
+            nav.edit
+                padding: 0.25em 1em 0 1em
+                line-height: 2em
+                ul
+                    list-style-type: none
+                    margin: -1px 0 -1px 0
+                    padding: 0
+                    li
+                        display: inline-block
+                        border: 1px solid transparent
+                        a
+                            padding: 0 1em
+                        &.active
+                            background: $window-color
+                            border: 1px solid $comment-border-color
+                            border-bottom: 1px solid $window-color
+
+            nav.readonly
+                padding: 0 1em
+                line-height: 2.25em
+
+                .date, .score-container, .edit
+                    margin-right: 2em
+
+            .score-container, .link-container
+                display: inline-block
+
+            &:before
+                position: absolute
+                display: block
+                content: ' '
+                width: 0
+                height: 0
+                left: -1.5em
+                top: calc(50% - 0.75em)
+                border: 0.75em solid transparent
+                border-right: 0.75em solid darken($comment-border-color, 10%)
+
+            &:after
+                position: absolute
+                display: block
+                content: ' '
+                width: 0
+                height: 0
+                left: calc(-1.5em + 1px)
+                top: calc(50% - 0.75em)
+                border: 0.75em solid transparent
+                border-right: 0.75em solid $comment-header-background-color
 
-            .nickname, .date, .score-container, .edit
-                margin-right: 2em
-            .date, .score-container, .edit, .delete
-                font-size: 95%
             .edit, .delete, .score-container a, .nickname a
                 &:not(.inactive)
-                    color: mix($main-color, $inactive-tab-text-color)
+                    color: mix($main-color, $inactive-link-color)
-            .edit, .delete
-                font-size: 80%
 
             i
                 margin-right: 0.3em
@@ -96,21 +98,49 @@
                 display: inline-block
                 width: 2em
 
+        .body
+            width: auto
+            margin: 1em
+
+            .keep-height
+                position: relative
+                textarea
+                    position: absolute
+                    width: 100%
+                    height: 100%
+                .tab.edit
+                    min-height: 150px
+
         .messages
             margin: 1em 0
 
+.darktheme .comment-container .comment header
+    background: $comment-header-background-color-darktheme
+    nav.edit
+        ul
+            li
+                &.active
+                    background: $window-color-darktheme
+                    border-bottom: 1px solid $window-color-darktheme
+    .edit, .delete, .score-container a, .nickname a
+        &:not(.inactive)
+            color: mix($main-color, $inactive-link-color-darktheme)
 
 .comment-content
-    ul
+    p
+        word-wrap: normal
+        word-break: break-word
+
+    ul, ol
         list-style-position: inside
         margin: 1em 0
-        padding: 0
+        padding: 0 0 0 1.5em
 
     .sjis
         font-family: 'MS PGothic', 'ＭＳ Ｐゴシック', 'IPAMonaPGothic', 'Trebuchet MS', Verdana, Futura, Arial, Helvetica, sans-serif
         background: #fbfbfb
         color: #111
-        font-size: 12pt
+        font-size: 1em
         line-height: 1
         margin: 0
         padding: 4px
@@ -118,9 +148,6 @@
         white-space: pre
         word-wrap: normal
 
-    p:first-child
-        margin-top: 0
-
     .spoiler
         background: #eee
         color: #eee
@@ -140,5 +167,7 @@
         background: #fafafa
         color: #444
 
-    blockquote :last-child
+        :first-child
-        margin-bottom: 0
+            margin-top: 0
+        :last-child
+            margin-bottom: 0

client/css/comment-list-control.styl

@@ -1,4 +1,9 @@
 .comments>ul
     list-style-type: none
-    margin: 0 0 2em 0
+    margin: 0
     padding: 0
+
+    >li
+        margin-bottom: 1em
+        &:last-child
+            margin-bottom: 0

client/css/comment-list-view.styl

@@ -1,15 +1,25 @@
+@import colors
+$comment-border-color = $top-navigation-color
+$comment-border-color-darktheme = $top-navigation-color-darktheme
+
 .global-comment-list
     text-align: left
 
     &>ul
         list-style-type: none
-        margin: 1em 0
+        margin: 1em 0 0
         padding: 0
 
+        &>li
+            margin-top: 2em
+            padding-top: 2em
+            border-top: 3px solid $comment-border-color
+            &:first-child
+                margin-top: 0
+                padding-top: 0
+                border-top: none
+
         @media (max-width: 700px)
-            &>li
-                margin-bottom: 5em
-                padding: 1vw
             .post-thumbnail
                 margin-bottom: 1em
                 .thumbnail
@@ -18,14 +28,17 @@
 
         @media (min-width: 700px)
             &>li
-                display: flex
+                padding-left: 13em
-                margin-bottom: 2em
             .post-thumbnail
                 float: left
+                margin: 0 0 1em -13em
                 .thumbnail
                     width: 12em
                     height: 8em
 
+        &>li
+            clear: both
+
         .post-thumbnail
             vertical-align: top
             margin-right: 1em
@@ -34,3 +47,8 @@
 
         .comments-container
             width: 100%
+
+.darktheme .global-comment-list
+    &>ul
+        &>li
+            border-top: 3px solid $comment-border-color-darktheme

client/css/core-forms.styl

@@ -4,21 +4,21 @@ form
     display: block
     width: 20em
 
-    ul
+    .input
         list-style-type: none
-        margin: 0 0 1em 0
+        margin: 0 0 2em 0
         padding: 0
         li
             margin-top: 1.2em
         label
             display: block
             padding: 0.3em 0
-    .input
-        margin-bottom: 2em
     .input li:first-child label:not(.radio):not(.checkbox):not(.file-dropper),
     .input li:first-child
         padding-top: 0
         margin-top: 0
+
+form:not(.horizontal)
     .hint
         margin-top: 0.2em
         margin-bottom: 0
@@ -26,18 +26,31 @@ form
         font-size: 80%
         line-height: 120%
 
+.darktheme form:not(.horizontal)
+    .hint
+        color: $inactive-link-color-darktheme
+
 form.horizontal
     display: inline-block
     margin-bottom: 1em
     .input, .buttons, ul
         display: inline-block
-        vertical-align: middle
+        vertical-align: top
         margin: 0
         padding: 0
         input
-            vertical-align: middle
+            vertical-align: top
     .buttons
         margin-right: 0.5em
+    @media (max-width: 1000px)
+        display: block
+        .input, .buttons, ul
+            display: block
+            margin-top: 0.5em
+            &:first-child
+                margin-top: 0
+        .buttons
+            margin-right: 0
 
 
 
@@ -128,6 +141,48 @@ input[type=checkbox]:focus + .checkbox:before
 
 
 
+/*
+ * Date and time inputs
+ */
+
+input[type=date],
+input[type=time]
+    vertical-align: top
+    font-family: 'Droid Sans', sans-serif
+    font-size: 100%
+    padding: 0.2em 0.3em
+    box-sizing: border-box
+    border: 2px solid $input-enabled-border-color
+    background: $input-enabled-background-color
+    color: $input-enabled-text-color
+    box-shadow: none /* :-moz-submit-invalid on FF */
+    transition: border-color 0.1s linear, background-color 0.1s linear
+
+    &:disabled
+        border: 2px solid $input-disabled-border-color
+        background: $input-disabled-background-color
+        color: $input-disabled-text-color
+
+    &:focus
+        border-color: $main-color
+
+    &[readonly]
+        border: 2px solid $input-disabled-border-color
+        background: $input-disabled-background-color
+        color: $input-disabled-text-color
+
+.darktheme
+    input[type=date],
+    input[type=time]
+        border: 2px solid darken($input-enabled-border-color, 75%)
+        background: darken($input-enabled-background-color, 75%)
+        color: $input-enabled-text-color-darktheme
+        &:disabled
+            background: darken($input-disabled-background-color, 75%)
+        &[readonly]
+            background: darken($input-disabled-background-color, 75%)
+
+
 /*
  * Regular inputs
  */
@@ -163,6 +218,21 @@ input[type=number]
         background: $input-disabled-background-color
         color: $input-disabled-text-color
 
+.darktheme
+    select,
+    textarea,
+    input[type=text],
+    input[type=email],
+    input[type=password],
+    input[type=number]
+        border: 2px solid darken($input-enabled-border-color, 75%)
+        background: darken($input-enabled-background-color, 75%)
+        color: $input-enabled-text-color-darktheme
+        &:disabled
+            background: darken($input-disabled-background-color, 75%)
+        &[readonly]
+            background: darken($input-disabled-background-color, 75%)
+
 input[readonly],
 input[readonly]+.radio,
 input[readonly]+.checkbox,
@@ -172,13 +242,25 @@ input:disabled
     cursor: not-allowed
 
 label.color
+    white-space: nowrap
     position: relative
+    display: flex
     input[type=text]
+        margin-right: 0.25em
+        width: auto
+    .preview
+        display: inline-block
         text-align: center
-        pointer-events: none
+        padding: 0 0.5em
-    input[type=color]
+        border: 2px solid black
-        position: absolute
+        &:after
-        opacity: 0
+            content: 'A'
+    .background-preview
+        border-right: 0
+        color: transparent
+    .text-preview
+        border-left: 0
+
 
 form.show-validation .input
     input:invalid
@@ -189,8 +271,9 @@ form.show-validation .input
         outline: 0
         border: 2px solid $input-good-border-color
         background: $input-good-background-color
-
+.darktheme form.show-validation .input
-
+    input:valid
+        background: darken($input-good-background-color, 75%)
 
 /*
  * Buttons
@@ -201,10 +284,13 @@ input[type=submit]
     cursor: pointer
     font-size: 100%
     padding: 0.2em 0.7em
+    border-radius: 0
     border: 2px solid $button-enabled-background-color
     background: $button-enabled-background-color
     color: $button-enabled-text-color
     outline: 0 /* something on Chrome */
+    -moz-appearance: none
+    -webkit-appearance: none
 
     &:disabled
         cursor: default
@@ -233,25 +319,30 @@ input::-moz-focus-inner
  * File dropper
  */
 .file-dropper-holder
-    display: flex
-    flex-wrap: wrap
     .file-dropper
         display: block
-        width: 100%
         background: $window-color
         border: 3px dashed #eee
         padding: 0.3em 0.5em
         line-height: 140%
         text-align: center
         cursor: pointer
+        overflow: hidden
         word-wrap: break-word
-    input
+    .url-holder
+        display: flex
         margin-top: 0.5em
-        width: auto
+        input, button
-        flex: 1
+            min-width: 0 /* firefox being sassy */
-    button
+            width: auto !important /* don't inherit anything weird */
-        margin-top: 0.5em
+        input
-        width: 8em
+            flex: 1
+        button
+            margin-left: 0.5em
+
+.darktheme .file-dropper-holder
+    .file-dropper
+        background: $window-color-darktheme
 
 input[type=file]:disabled+.file-dropper
     cursor: default
@@ -262,8 +353,6 @@ input[type=file]:focus+.file-dropper,
 .file-dropper.active
     border-color: $main-color
 
-
-
 .autocomplete
     position: absolute
     z-index: 10
@@ -288,6 +377,10 @@ input[type=file]:focus+.file-dropper,
             .disabled
                 color: $inactive-link-color
 
+.darktheme .autocomplete
+    background: $window-color-darktheme
+    ul li .disabled
+        color: $inactive-link-color-darktheme
 
 .anticomplete
     display: none

client/css/core-general.styl

@@ -1,12 +1,17 @@
 @import colors
 @import mixins
 
+$active-tab-text-color = $text-color
+$active-tab-text-color-darktheme = $text-color-darktheme
+$inactive-tab-text-color = $inactive-link-color
+$inactive-tab-text-color-darktheme = $inactive-link-color-darktheme
+
 /* latin */
 @font-face
     font-family: 'Open Sans';
     font-style: normal;
     font-weight: 400;
-    src: local('Open Sans'), local('OpenSans'), url(/fonts/open_sans.woff2) format('woff2');
+    src: local('Open Sans'), local('OpenSans'), url(../fonts/open_sans.woff2) format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 
 /* make <body> cover entire viewport */
@@ -21,19 +26,32 @@ body
     margin: 0
     color: $text-color
     font-family: 'Open Sans', sans-serif
-    font-size: 12pt
+    font-size: 1em
-    line-height: 18pt
+    line-height: 1.4
     @media (max-width: 800px)
-        font-size: 10pt
+        font-size: 0.875em
-        line-height: 15pt
     @media (max-width: 1200px)
-        font-size: 11pt
+        font-size: 0.95em
-        line-height: 16.5pt
+
+body.darktheme
+    color: $text-color-darktheme
+    background: $window-color-darktheme
 
 h1, h2, h3
     font-weight: normal
     margin-bottom: 1em
 
+h1
+    font-size: 2em
+
+h2
+    font-size: 1.5em
+
+p,
+ol,
+ul
+    margin: 1em 0
+
 th
     font-weight: normal
 
@@ -53,6 +71,11 @@ a
     .vim-nav-hint
         position: absolute
         visibility: hidden
+.darktheme a
+    &.inactive
+        color: $inactive-link-color-darktheme
+    &.icon
+        color: $inactive-link-color-darktheme
 
 a.append, span.append
     margin-left: 1em
@@ -61,8 +84,10 @@ form .fa-question-circle-o
     vertical-align: middle
 
 #content-holder
-    padding: 1.5vw
+    padding: 1.5em
     text-align: center
+    @media (max-width: 1000px)
+        padding: 1em
     >.content-wrapper
         box-sizing: border-box /* make max-width: 100% on this element include padding */
         text-align: left
@@ -70,9 +95,30 @@ form .fa-question-circle-o
         margin: 0 auto
         >*:first-child, form h1
             margin-top: 0
+        nav.buttons
+            ul
+                display: block
+                max-width: 100%
+                white-space: nowrap
+                overflow-x: auto
+                &::-webkit-scrollbar
+                    height: 6px
+                    background-color: $scrollbar-bg-color
+                &::-webkit-scrollbar-thumb
+                    background-color: $scrollbar-thumb-color
     >.content-wrapper:not(.transparent)
         background: $top-navigation-color
-        padding: 2vw
+        padding: 1.8em
+        @media (max-width: 1000px)
+            padding: 1.5em
+        .content,
+        .content .subcontent
+            >*:last-child
+                margin-bottom: 0
+
+.darktheme #content-holder
+    >.content-wrapper:not(.transparent)
+        background: $top-navigation-color-darktheme
 
 hr
     border: 0
@@ -80,6 +126,9 @@ hr
     margin: 1em 0
     padding: 0
 
+.darktheme hr
+    border-top: 1px solid darken($line-color, 25%)
+
 nav
     ul
         list-style-type: none
@@ -125,6 +174,39 @@ nav
             li
                 display: inline-block
                 float: left
+                a
+                    padding: 0 1.5em
+            #mobile-navigation-toggle
+                display: none
+                width: 100%
+                padding: 0 1em
+                line-height: 2.3em
+                font-family: inherit
+                border: none
+                background: none
+                color: $active-tab-text-color
+                .site-name
+                    display: block
+                    float: left
+                    max-width: 50vw
+                    overflow: hidden
+                    text-overflow: ellipsis
+                .toggle-icon
+                    display: block
+                    float: right
+            @media (max-width: 1000px)
+                text-align: left
+                li
+                    display: none
+                    float: none
+                    a
+                        display: block
+                        padding: 0 1em
+                #mobile-navigation-toggle
+                    display: block
+                &.opened
+                    li
+                        display: block
         ul li[data-name=account],
         ul li[data-name=register],
         ul li[data-name=login],
@@ -141,6 +223,26 @@ nav
             margin-right: 0.6em
             margin-left: calc(0.6em - 1.2em)
             float: left
+            @media (max-width: 1000px)
+                display: none
+
+.darktheme nav
+    &.buttons
+        ul
+            li:not(.active) a
+                color: $inactive-tab-text-color-darktheme
+            li:hover:not(.active) a
+                color: $active-tab-text-color-darktheme
+            li.active a
+                background: $active-tab-background-color-darktheme
+                color: $active-tab-text-color-darktheme
+            :focus
+                background: $focused-tab-background-color-darktheme
+    &#top-navigation
+        background: $top-navigation-color-darktheme
+        ul
+            #mobile-navigation-toggle
+                color: $text-color-darktheme
 
 a .access-key
     text-decoration: underline
@@ -166,6 +268,18 @@ a .access-key
             border: 1px solid $message-success-border-color
             background: $message-success-background-color
 
+.darktheme .messages
+    .message
+        &.info
+            border: 1px solid darken($message-info-border-color, 30%)
+            background: darken($message-info-background-color, 60%)
+        &.error
+            border: 1px solid darken($message-error-border-color, 30%)
+            background: darken($message-error-background-color, 60%)
+        &.success
+            border: 1px solid darken($message-success-border-color, 30%)
+            background: darken($message-success-background-color, 80%)
+
 .thumbnail
     /*background-image: attr(data-src url)*/ /* not available yet */
     vertical-align: middle
@@ -176,9 +290,14 @@ a .access-key
     width: 20px
     height: 20px
     &.empty
-        background-image: url('/img/transparency_grid.png')
+        background-image:
+            linear-gradient(45deg, $transparency-grid-square-color 25%, transparent 25%),
+            linear-gradient(-45deg, $transparency-grid-square-color 25%, transparent 25%),
+            linear-gradient(45deg, transparent 75%, $transparency-grid-square-color 75%),
+            linear-gradient(-45deg, transparent 75%, $transparency-grid-square-color 75%)
+        background-position: 0 0, 0 10px, 10px -10px, -10px 0px
         background-repeat: repeat
-        background-size: initial
+        background-size: 20px 20px
     img
         opacity: 0
         width: 100%
@@ -194,6 +313,14 @@ a .access-key
     margin-top: 0 !important
     margin-bottom: 0 !important
 
+.table-wrap
+    overflow-x: auto
+    &::-webkit-scrollbar
+        height: 6px
+        background-color: $scrollbar-bg-color
+    &::-webkit-scrollbar-thumb
+        background-color: $scrollbar-thumb-color
+
 /* hack to prevent text from being copied */
 [data-pseudo-content]:before {
     content: attr(data-pseudo-content)

client/css/expander-control.styl

@@ -16,9 +16,17 @@
             color: mix($text-color, $inactive-link-color)
             font-size: 120%
             i
-                font-size: 12pt
+                font-size: 1em
                 color: $inactive-link-color
                 float: right
                 line-height: 2em
     .expander-content
         padding: 0.5em 0.5em 2em 0.5em
+
+.darktheme .expander
+    header
+        background: $active-tab-background-color-darktheme
+        a
+            color: mix($text-color-darktheme, $inactive-link-color-darktheme)
+            i
+                color: $inactive-link-color-darktheme

client/css/help-view.styl

@@ -16,6 +16,10 @@
         font-size: 1.6em
         &:first-child
             margin-top: 0
+        @media (max-width: 1000px)
+            margin-top: 1.5em
+            &:first-child
+                margin-top: 0
     nav
         ul
             margin: 0 auto

client/css/home-view.styl

@@ -6,13 +6,16 @@
         margin-bottom: 1em
         h1
             line-height: initial
-            font-size: 30pt
+            font-size: 2.5em
             margin: 0
 
-    .message
+    .messages
-        margin-bottom: 2em
+        text-align: center
+        .message
+            margin: 0 auto 2em auto
 
     form
+        display: inline-block
         width: auto
         vertical-align: middle
         margin: 0 0 2em 0
@@ -31,6 +34,8 @@
         display: flex
         align-items: center
         justify-content: center
+        &:empty
+            margin-bottom: 0
 
     nav
         a
@@ -50,6 +55,8 @@
             li
                 display: inline
                 white-space: nowrap
+                @media (max-width: 800px)
+                    display: block
             .sep
                 word-spacing: 1.1em
                 background-repeat: no-repeat

client/css/pager.styl

@@ -8,7 +8,7 @@
     .page
         position: relative
         .page-header
-            margin: 0.5em 0.5em 0.5em 0
+            margin: 0.5em 0
             position: relative
             &:before
                 display: block
@@ -22,6 +22,14 @@
                 z-index: 1
             span
                 position: relative
-                background: white
+                background: $window-color
                 padding: 0 1em
                 z-index: 2
+
+.darktheme .pager
+    .page
+        .page-header
+            &:before
+                background: $top-navigation-color-darktheme
+            span
+                background: $window-color-darktheme

client/css/password-reset.styl

@@ -0,0 +1,2 @@
+#password-reset
+    max-width: 30em

client/css/pool-categories-view.styl

@@ -0,0 +1,29 @@
+@import colors
+
+.content-wrapper.pool-categories
+    width: 100%
+    max-width: 45em
+    table
+        border-spacing: 0
+        width: 100%
+        tr.default td
+            background: $default-pool-category-background-color
+        td, th
+            padding: .4em
+            &.color
+                input[type=text]
+                    width: 8em
+            &.usages
+                text-align: center
+            &.remove, &.set-default
+                white-space: pre
+        th
+            white-space: nowrap
+            &:first-child
+                padding-left: 0
+            &:last-child
+                padding-right: 0
+        tfoot
+            display: none
+    form
+        width: auto

client/css/pool-input-control.styl

@@ -0,0 +1,58 @@
+@import colors
+
+div.pool-input
+    position: relative
+
+    .main-control
+        display: flex
+        input
+            flex: 5
+        button
+            flex: 1
+            margin: 0 0 0 0.5em
+
+
+ul.compact-pools
+    width: 100%
+    margin: 0.5em 0 0 0
+    padding: 0
+    li
+        margin: 0
+        width: 100%
+        line-height: 140%
+        white-space: nowrap
+        overflow: hidden
+        text-overflow: ellipsis
+        transition: background-color 0.5s linear
+        a
+            display: inline
+        a:focus
+            outline: 0
+            box-shadow: inset 0 0 0 2px $main-color
+        &.implication
+            background: $implied-pool-background-color
+            color: $implied-pool-text-color
+        &.new
+            background: $new-pool-background-color
+            color: $new-pool-text-color
+        &.duplicate
+            background: $duplicate-pool-background-color
+            color: $duplicate-pool-text-color
+    i
+        padding-right: 0.4em
+
+div.pool-input, ul.compact-pools
+    .pool-usages, .pool-weight, .remove-pool
+        color: $inactive-link-color
+        unselectable()
+    .pool-usages, .pool-weight
+        font-size: 90%
+    .pool-usages, .pool-weight
+        margin-left: 0.7em
+    .remove-pool
+        margin-right: 0.5em
+
+.darktheme
+    div.pool-input, ul.compact-pools
+        .pool-usages, .pool-weight, .remove-pool
+            color: $inactive-link-color-darktheme

client/css/pool-list-view.styl

@@ -0,0 +1,63 @@
+@import colors
+
+.pool-list
+    table
+        width: 100%
+        border-spacing: 0
+        text-align: left
+        line-height: 1.3em
+        tr:hover td
+            background: $top-navigation-color
+        th, td
+            padding: 0.1em 0.5em
+        th
+            white-space: nowrap
+            background: $top-navigation-color
+        .names
+            width: 84%
+        .post-count
+            text-align: center
+            width: 8%
+        .creation-time
+            text-align: center
+            width: 8%
+            white-space: pre
+        ul
+            list-style-type: none
+            margin: 0
+            padding: 0
+            display: inline
+            li
+                padding: 0
+                display: inline
+                &:not(:last-child):after
+                    content: ', '
+        @media (max-width: 800px)
+            .posts
+                display: none
+
+.darktheme .pool-list
+    table
+        tr:hover td
+            background: $top-navigation-color-darktheme
+        th
+            background: $top-navigation-color-darktheme
+
+.pool-list-header
+    label
+        display: none !important
+    text-align: left
+    form
+        width: auto
+    input[name=search-text]
+        width: 25em
+        @media (max-width: 1000px)
+            width: 100%
+    .append
+        vertical-align: middle
+        font-size: 0.95em
+        color: $inactive-link-color
+
+.darktheme .pool-list-header
+    .append
+        color: $inactive-link-color-darktheme

client/css/pool-view.styl

@@ -0,0 +1,33 @@
+#pool
+    width: 100%
+    max-width: 40em
+    h1
+        word-break: break-all
+        line-height: 130%
+        margin-top: 0
+    form
+        width: 100%
+    .pool-edit
+        textarea
+            height: 10em
+    .pool-summary
+        section
+            &.description
+                margin: 1.5em 0 0 0
+            &.details
+                vertical-align: top
+                padding-right: 0.5em
+                ul
+                    margin: 0
+                    padding: 0
+                    list-style-type: none
+                li
+                    display: inline
+                    margin: 0
+                    padding: 0
+                li:not(:last-of-type):after
+                    content: ', '
+                ul:empty:after
+                    content: '(none)'
+                section
+                    margin-bottom: 1em

client/css/post-content-control.styl

@@ -1,6 +1,14 @@
+@import colors
+
 .post-container
     .post-content.transparency-grid img
-        background: url('/img/transparency_grid.png')
+        background-image:
+            linear-gradient(45deg, $transparency-grid-square-color 25%, transparent 25%),
+            linear-gradient(-45deg, $transparency-grid-square-color 25%, transparent 25%),
+            linear-gradient(45deg, transparent 75%, $transparency-grid-square-color 75%),
+            linear-gradient(-45deg, transparent 75%, $transparency-grid-square-color 75%)
+        background-size: 20px 20px
+        background-position: 0 0, 0 10px, 10px -10px, -10px 0px
 
     text-align: center
     .post-content
@@ -8,20 +16,14 @@
         margin: 0 auto
         position: relative
 
-        img, object, video, .post-overlay
+        .resize-listener
             position: absolute
-            height: 100%
-            width: 100%
             left: 0
             right: 0
             top: 0
             bottom: 0
+            width: 100%
+            height: 100%
 
-        .post-overlay>*
+        img
-            position: absolute
+            image-orientation: from-image
-            left: 0
-            right: 0
-            top: 0
-            bottom: 0
-            width: 100%
-            height: 100%

client/css/post-detail-view.styl

@@ -14,9 +14,6 @@
         .right-post-container
             width: 47%
             float: right
-        input[type=text]
-            width: 8em
-            margin-top: -2px
         .post-mirror
             margin-bottom: 1em
             &:after
@@ -31,3 +28,10 @@
             margin-right: 0.35em
         .target-post, .target-post-content
             margin: 1em 0
+        header
+            margin-bottom: 1em
+            label
+                display: inline-block
+                margin-top: 2px
+            input[type=text]
+                width: 6em

client/css/post-list-view.styl

@@ -54,39 +54,96 @@
                     .icon:not(:first-of-type)
                         margin-left: 1em
 
-            .masstag
+            .edit-overlay
                 position: absolute
                 top: 0.5em
                 left: 0.5em
-                display: inline-block
+
-                padding: 0.5em
+                .tag-flipper
-                box-sizing: border-box
-                border: 0
-                &:after
                     display: inline-block
-                    width: 1em
+                    padding: 0.5em
-                    height: 1em
+                    box-sizing: border-box
+                    border: 0
+                    &:after
+                        display: inline-block
+                        width: 1em
+                        height: 1em
+                        text-align: center
+                        line-height: 1em
+                        font-size: 2.2em
+                    &.tagged
+                        background: rgba(0, 230, 0, 0.7)
+                        &:after
+                            color: white
+                            content: '-'
+                    &:not(.tagged)
+                        background: rgba(255, 0, 0, 0.7)
+                        &:after
+                            color: white
+                            content: '+'
+                    &[data-disabled]
+                        background: rgba(200, 200, 200, 0.7)
+
+                .safety-flipper a
+                    display: inline-block
+                    margin: 0.1em
+                    box-sizing: border-box
+                    border: 0
+                    display: inline-block
+                    width: 1.2em
+                    height: 1.2em
                     text-align: center
                     line-height: 1em
-                    font-size: 20pt
+                    font-size: 1.6em
-                &.tagged
+                    border: 3px solid
-                    background: rgba(0, 230, 0, 0.7)
+                    &.safety-safe
+                        background-color: darken($safety-safe, 5%)
+                        border-color: @background-color
+                        &:not(.active)
+                            background-color: alpha(@background-color, 0.3)
+                    &.safety-sketchy
+                        background-color: $safety-sketchy
+                        border-color: @background-color
+                        &:not(.active)
+                            background-color: alpha(@background-color, 0.3)
+                    &.safety-unsafe
+                        background-color: $safety-unsafe
+                        border-color: @background-color
+                        &:not(.active)
+                            background-color: alpha(@background-color, 0.3)
+                    &[data-disabled]
+                        background: rgba(200, 200, 200, 0.7)
+
+                .delete-flipper
+                    display: inline-block
+                    padding: 0.5em
+                    box-sizing: border-box
+                    border: 0
                     &:after
-                        color: white
+                        display: inline-block
-                        content: '-'
+                        width: 1em
-                &:not(.tagged)
+                        height: 1em
-                    background: rgba(255, 0, 0, 0.7)
+                        text-align: center
-                    &:after
+                        line-height: 1em
-                        color: white
+                        font-size: 2.2em
-                        content: '+'
+                    &.delete
-                &[data-disabled]
+                        background: rgba(255, 0, 0, 0.7)
-                    background: rgba(200, 200, 200, 0.7)
+                        &:after
+                            color: white
+                            font-family: FontAwesome;
+                            content: "\f1f8"; // fa-trash
+                    &:not(.delete)
+                        background: rgba(200, 200, 200, 0.7)
+                        &:after
+                            color: white
+                            content: '-'
 
             .thumbnail
-                background-position: 50% 30%
                 width: 100%
                 height: 100%
                 outline-offset: -3px
+                &:not(.empty)
+                    background-position: 50% 30%
 
             .thumbnail-wrapper.no-tags
                 .thumbnail
@@ -101,41 +158,102 @@
                 .thumbnail
                     outline: 4px solid $main-color !important
 
+.post-flow
+    ul
+        li
+            min-width: inherit
+            width: inherit
+            &:not(.flexbox-dummy)
+                height: 14vw
+            .thumbnail
+                outline-offset: -1px
+            .thumbnail-wrapper.no-tags
+                .thumbnail
+                    outline: 2px solid $post-thumbnail-no-tags-border-color
+            &:hover a, a:active, a:focus
+                .thumbnail
+                    outline: 2px solid $main-color !important
+
 .post-list-header
     white-space: nowrap
     text-align: left
 
     label
-        display: none
+        display: none !important
     form
         width: auto
         margin-bottom: 0.75em
         *
             vertical-align: top
+        @media (max-width: 1000px)
+            display: block
+            &.bulk-edit-tags:not(.opened), &.bulk-edit-safety:not(.opened)
+                float: left
+                margin-right: 1em
     input
         margin-bottom: 0.25em
         margin-right: 0.25em
     input[name=search-text]
         width: 25em
-    input[name=masstag]
+        @media (max-width: 1000px)
-        width: 12em
+            display: block
-    .masstag-hint, .open-masstag
+            width: 100%
-        margin-right: 1em
+            margin-bottom: 0.5em
     .append
+        vertical-align: middle
         font-size: 0.95em
         color: $inactive-link-color
-    .masstag
+    .bulk-edit
-        &:not(.active)
+        &:not(.opened)
+            .close
+                display: none
+        &.opened
+            .open
+                display: none
+        &.hidden
+            display: none
+    .bulk-edit-tags
+        &.opened
+            .hint
+                @media (max-width: 1000px)
+                    display: block
+                    margin-bottom: 0.5em
+        &:not(.opened)
             [type=text],
-            .start-tagging,
+            .start
-            .stop-tagging
                 display: none
-            .masstag-hint
+            .hint
                 display: none
-        &.active
+        input[name=tag]
-            .open-masstag
+            width: 24em
+            @media (max-width: 1000px)
+                display: block
+                width: 100%
+                margin-bottom: 0.5em
+        .append
+            &.open,
+            &.hint
+                @media (max-width: 1000px)
+                    margin-left: 0
+        .hint
+            margin-right: 1em
+    .bulk-edit-safety
+        .append
+            @media (max-width: 1000px)
+                margin-left: 0
+    .bulk-edit-delete
+        &.opened
+            .start
+                @media (max-width: 1000px)
+                    margin-left: 0
+        &:not(.opened)
+            .start
                 display: none
-
+        .append.open
+            @media (max-width: 1000px)
+                margin-left: 0
+        .start
+            margin-left: 1em
     .safety
         margin-right: 0.25em
         &.safety-safe

client/css/post-main-view.styl

@@ -7,49 +7,66 @@
 
     >.sidebar
         margin-right: 1em
-        min-width: 20em
+        min-width: 21em
-        max-width: 20em
+        max-width: 21em
         line-height: 160%
 
         a:active
             border: 0
             outline: 0
 
-        nav.buttons
+    >.sidebar>nav.buttons, >.content nav.buttons
-            margin-top: 0
+        margin-top: 0
-            display: flex
+        display: flex
-            flex-wrap: wrap
+        flex-wrap: wrap
-            article
+        article
-                flex: 1 0 33%
+            flex: 1 0 33%
-                a
+            a
-                    display: inline-block
+                display: inline-block
-                    width: 100%
+                width: 100%
-                    padding: 0.3em 0
+                padding: 0.3em 0
-                    text-align: center
-                    vertical-align: middle
-                    transition: background 0.2s linear
-                    &:not(.inactive):hover
-                        background: lighten($main-color, 90%)
-                i
-                    font-size: 140%
                 text-align: center
+                vertical-align: middle
+                transition: background 0.2s linear, box-shadow 0.2s linear
+                &:not(.inactive):hover
+                    background: lighten($main-color, 90%)
+            i
+                font-size: 140%
+            text-align: center
+        @media (max-width: 800px)
+            margin-top: 0.6em
+            margin-bottom: 0.6em
 
     >.content
         width: 100%
 
     .post-container
-        margin-bottom: 2em
+        margin-bottom: 0.6em
 
         .post-content
             margin: 0
 
+    .after-mobile-controls
+        width: 100%
+
+.darktheme .post-view
+    >.sidebar, >.content
+        nav.buttons
+            article
+                a:not(.inactive):hover
+                    background: unset
+                    box-shadow: inset 0 0 0 0.3em $main-color
+
 @media (max-width: 800px)
     .post-view
         flex-wrap: wrap
+        >.after-mobile-controls
+            order: 3
         >.sidebar
             order: 2
             min-width: 100%
             max-width: 0
+            margin-right: 0
         >.content
             order: 1
 
@@ -102,7 +119,6 @@
         h1
             margin-bottom: 0.5em
         .thumbnail
-            background-position: 50% 30%
             width: 4em
             height: 3em
         li
@@ -130,10 +146,24 @@
             display: inline-block
 
     .management
-        li
+        ul
+            list-style-type: none
             margin: 0
+            padding: 0
+            li
+                margin: 0
+                padding: 0
 
-    label
+    .post-source
+        textarea
+            white-space: pre
+            overflow-wrap: normal
+            overflow-x: scroll
+
+    form
+        width: auto
+
+    label:not(.file-dropper)
         margin-bottom: 0.3em
         display: block
 

client/css/post-upload.styl

@@ -1,5 +1,7 @@
 @import colors
-
+$upload-header-background-color = $top-navigation-color
+$upload-header-background-color-darktheme = $top-navigation-color-darktheme
+$upload-border-color = #DDD
 $cancel-button-color = tomato
 
 #post-upload
@@ -11,8 +13,12 @@ $cancel-button-color = tomato
 
         &.inactive input[type=submit],
         &.inactive .skip-duplicates
+        &.inactive .always-upload-similar
+        &.inactive .pause-remain-on-error
         &.uploading input[type=submit],
         &.uploading .skip-duplicates,
+        &.uploading .always-upload-similar
+        &.uploading .pause-remain-on-error
         &:not(.uploading) .cancel
             display: none
 
@@ -21,6 +27,8 @@ $cancel-button-color = tomato
         .file-dropper
             font-size: 150%
             padding: 2em
+            small
+                font-size: 60%
 
     input[type=submit]
         margin-top: 1em
@@ -35,42 +43,140 @@ $cancel-button-color = tomato
     .skip-duplicates
         margin-left: 1em
 
-    .messages
+    .always-upload-similar
+        margin-left: 1em
+
+    .pause-remain-on-error
+        margin-left: 1em
+
+    form>.messages
         margin-top: 1em
 
     .uploadables-container
-        li
+        list-style-type: none
+        margin: 0
+        padding: 0
+
+        .uploadable-container
+            clear: both
             margin: 0 0 1.2em 0
+            padding-left: 13em
 
-        .uploadable
+            img
-            .file
+                width: 100%
-                margin: 0.3em 0
+                height: 100%
-                overflow: hidden
+            
-                white-space: nowrap
+            video
-                text-align: left
+                width: 100%
-                text-overflow: ellipsis
+                height: 100%
 
-            .anonymous
+            &>.thumbnail-wrapper
-                margin: 0.3em 0
-
-            .safety
-                margin: 0.3em 0
-                label
-                    display: inline-block
-                    margin-right: 1em
-
-            .thumbnail-wrapper
                 float: left
-                width: 12.5em
+                width: 12em
-                height: 7em
+                height: 8em
-                margin: 0.2em 1em 0 0
+                margin: 0 0 0 -13em
-
                 .thumbnail
                     width: 100%
                     height: 100%
 
-            .controls
+            .uploadable
-                float: right
+                border: 1px solid $upload-border-color
-                a
+                min-height: 8em
-                    color: $inactive-link-color
+                box-sizing: border-box
-                    margin-left: 0.5em
+
+                header
+                    line-height: 1.5em
+                    padding: 0.25em 1em
+                    text-align: left
+                    background: $upload-header-background-color
+                    border-bottom: 1px solid $upload-border-color
+
+                    nav
+                        &:first-of-type
+                            float: left
+                            a
+                                margin: 0 0.5em 0 0
+                        &:last-of-type
+                            float: right
+                            a
+                                margin: 0 0 0 0.5em
+
+                        ul
+                            list-style-type: none
+                        ul, li
+                            display: inline-block
+                            margin: 0
+                            padding: 0
+
+                    span.filename
+                        padding: 0 0.5em
+                        display: block
+                        overflow: hidden
+                        white-space: nowrap
+                        text-overflow: ellipsis
+
+                .body
+                    margin: 1em
+
+                    .anonymous
+                        margin: 0.3em 0
+
+                    .safety
+                        margin: 0.3em 0
+                        label
+                            display: inline-block
+                            margin-right: 1em
+
+                    .options div
+                        display: inline-block
+                        margin: 0 1em 0 0
+
+                    .messages
+                        margin-top: 1em
+                        .message:last-child
+                            margin-bottom: 0
+
+                    .lookalikes
+                        list-style-type: none
+                        margin: 0
+                        padding: 0
+
+                        li
+                            clear: both
+                            margin: 1em 0 0 0
+                            padding-left: 7em
+                            font-size: 90%
+
+                            .thumbnail-wrapper
+                                float: left
+                                width: 6em
+                                height: 4em
+                                margin: 0 0 0 -7em
+                                .thumbnail
+                                    width: 100%
+                                    height: 100%
+
+                        .description
+                            margin-right: 0.5em
+                            display: inline-block
+                        .controls
+                            float: right
+                            display: inline-block
+
+
+            &:first-child .move-up
+                color: $inactive-link-color
+            &:last-child .move-down
+                color: $inactive-link-color
+            .darktheme &:first-child .move-up
+                color: $inactive-link-color-darktheme
+            .darktheme &:last-child .move-down
+                color: $inactive-link-color-darktheme
+
+.darktheme #post-upload .uploadables-container .uploadable-container
+    .uploadable header
+        background: $upload-header-background-color-darktheme
+    &:first-child .move-up
+        color: $inactive-link-color-darktheme
+    &:last-child .move-down
+        color: $inactive-link-color-darktheme

client/css/snapshots-list-view.styl

@@ -8,11 +8,16 @@ $snapshot-merged-background-color = #FEC
 
     ul
         margin: 0 auto
+        padding: 0
         width: 100%
         max-width: 35em
         list-style-type: none
 
         li
+            margin-bottom: 1em
+            &:last-child
+                margin-bottom: 0
+
             .time
                 float: right
 
@@ -26,19 +31,34 @@ $snapshot-merged-background-color = #FEC
             div.operation-created
                 background: $snapshot-created-background-color
                 &+.details
-                    background: lighten($snapshot-created-background-color, 50%)
+                    background: alpha(@background, 50%)
             div.operation-modified
                 background: $snapshot-modified-background-color
                 &+.details
-                    background: lighten($snapshot-modified-background-color, 50%)
+                    background: alpha(@background, 50%)
             div.operation-deleted
                 background: $snapshot-deleted-background-color
                 &+.details
-                    background: lighten($snapshot-deleted-background-color, 50%)
+                    background: alpha(@background, 50%)
             div.operation-merged
                 background: $snapshot-merged-background-color
                 &+.details
-                    background: lighten($snapshot-merged-background-color, 50%)
+                    background: alpha(@background, 50%)
 
-            div.details
+.darktheme .snapshot-list ul li
-                margin-bottom: 2em
+    div.operation-created
+        background: darken($snapshot-created-background-color, 80%)
+        &+.details
+            background: alpha(@background, 50%)
+    div.operation-modified
+        background: darken($snapshot-modified-background-color, 80%)
+        &+.details
+            background: alpha(@background, 50%)
+    div.operation-deleted
+        background: darken($snapshot-deleted-background-color, 80%)
+        &+.details
+            background: alpha(@background, 50%)
+    div.operation-merged
+        background: darken($snapshot-merged-background-color, 80%)
+        &+.details
+            background: alpha(@background, 50%)

client/css/tag-categories-view.styl

@@ -2,7 +2,7 @@
 
 .content-wrapper.tag-categories
     width: 100%
-    max-width: 40em
+    max-width: 45em
     table
         border-spacing: 0
         width: 100%
@@ -11,13 +11,19 @@
         td, th
             padding: .4em
             &.color
-                text-align: center
+                input[type=text]
+                    width: 8em
             &.usages
                 text-align: center
             &.remove, &.set-default
                 white-space: pre
+        th
+            white-space: nowrap
+            &:first-child
+                padding-left: 0
+            &:last-child
+                padding-right: 0
         tfoot
             display: none
     form
         width: auto
-

client/css/tag-input-control.styl

@@ -46,7 +46,7 @@ div.tag-input
 
         .wrapper
             margin-left: 0.5em
-            background: $tag-suggestions-background-color
+            background: $window-color
             border: 1px solid $tag-suggestions-border-color
             width: 15em
             word-break: break-all
@@ -55,13 +55,14 @@ div.tag-input
                 padding: 0.2em 1em
                 margin: 0
             ul
+                list-style-type: none
                 margin: 0
                 overflow-y: auto
                 overflow-x: none
                 max-height: 20em
                 padding: 0.5em 1em 0 1em
                 li:last-child
-                    border-bottom: 0.5em solid alpha($tag-suggestions-background-color, 0)
+                    border-bottom: 0.5em solid alpha($window-color, 0)
                 li
                     margin: 0
                     font-size: 90%
@@ -85,9 +86,16 @@ div.tag-input
             font-size: 90%
             unselectable()
 
+@keyframes tag-added-to-post
+    from
+        max-height: 0
+    to
+        max-height: 5em
+
 ul.compact-tags
     width: 100%
-    margin-top: 0.5em
+    margin: 0.5em 0 0 0
+    padding: 0
     li
         margin: 0
         width: 100%
@@ -101,18 +109,30 @@ ul.compact-tags
         a:focus
             outline: 0
             box-shadow: inset 0 0 0 2px $main-color
+        // these 3 added when tag is added to ul
+        &.added, &.new, &.implication
+            animation: tag-added-to-post 1s ease forwards
         &.implication
-            background: $implied-tag-background-color
             color: $implied-tag-text-color
+            background-color: $implied-tag-background-color
         &.new
-            background: $new-tag-background-color
             color: $new-tag-text-color
+            background-color: $new-tag-background-color
         &.duplicate
-            background: $duplicate-tag-background-color
             color: $duplicate-tag-text-color
+            background-color: $duplicate-tag-background-color
     i
         padding-right: 0.4em
 
+.darktheme ul.compact-tags
+    li
+        &.new
+            background-color: darken($new-tag-background-color, 80%)
+        &.implication
+            background-color: darken($implied-tag-background-color, 85%)
+        &.duplicate
+            background-color: darken($duplicate-tag-background-color, 80%)
+
 div.tag-input, ul.compact-tags
     .tag-usages, .tag-weight, .remove-tag
         color: $inactive-link-color
@@ -123,3 +143,19 @@ div.tag-input, ul.compact-tags
         margin-left: 0.7em
     .remove-tag
         margin-right: 0.5em
+
+.darktheme
+    div.tag-input .tag-suggestions
+        .buttons a
+            color: $inactive-link-color-darktheme
+        .wrapper
+            background: $window-color-darktheme
+            ul li:last-child
+                border-bottom: 0.5em solid alpha($window-color-darktheme, 0)
+            p
+                background: darken($tag-suggestions-header-color, 80%)
+        .append
+            color: $inactive-link-color-darktheme
+    div.tag-input, ul.compact-tags
+        .tag-usages, .tag-weight, .remove-tag
+            color: $inactive-link-color-darktheme

client/css/tag-list-view.styl

@@ -11,6 +11,7 @@
         th, td
             padding: 0.1em 0.5em
         th
+            white-space: nowrap
             background: $top-navigation-color
         .names
             width: 28%
@@ -39,14 +40,28 @@
             .implications, .suggestions
                 display: none
 
+.darktheme .tag-list
+    table
+        tr:hover td
+            background: $top-navigation-color-darktheme
+        th
+            background: $top-navigation-color-darktheme
+
 .tag-list-header
     label
-        display: none
+        display: none !important
     text-align: left
     form
         width: auto
     input[name=search-text]
-        max-width: 15em
+        width: 25em
+        @media (max-width: 1000px)
+            width: 100%
     .append
+        vertical-align: middle
         font-size: 0.95em
         color: $inactive-link-color
+
+.darktheme .tag-list-header
+    .append
+        color: $inactive-link-color-darktheme

client/css/user-list-view.styl

@@ -21,19 +21,31 @@
     .details
         font-size: 90%
         line-height: 130%
+    .image
+        margin: 0.25em 0.6em 0.25em 0
     .thumbnail
         width: 3em
         height: 3em
-        margin: 0.25em 0.6em 0 0
+
+.darktheme .user-list
+    ul li
+        background: $top-navigation-color-darktheme
 
 .user-list-header
     label
-        display: none
+        display: none !important
     text-align: left
     form
         width: auto
     input[name=search-text]
-        max-width: 15em
+        width: 25em
+        @media (max-width: 1000px)
+            width: 100%
     .append
+        vertical-align: middle
         font-size: 0.95em
         color: $inactive-link-color
+
+.darktheme .user-list-header
+    .append
+        color: $inactive-link-color-darktheme

client/css/user-view.styl

@@ -1,3 +1,6 @@
+@import colors
+$token-border-color = $active-tab-background-color
+
 #user
     width: 100%
     max-width: 35em
@@ -37,7 +40,43 @@
                 height: 1px
                 clear: both
 
+    #user-tokens
+
+        .token-flex-container
+            width: 100%
+            display: flex;
+            flex-direction column;
+            padding-bottom: 0.5em;
+
+            .full-width
+                width: 100%
+
+            .token-flex-row
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                padding: 0.2em;
+
+                .no-wrap
+                  white-space: nowrap;
+
+                .token-input
+                    min-height: 2em;
+                    line-height: 2em;
+                    text-align: center;
+
+            .token-flex-column
+                display: flex;
+                flex-direction: column;
+
+            .token-flex-labels
+                padding-right: 0.5em
+
+            hr
+                border-top: 3px solid $token-border-color
+
+        form
+            width: 100%;
+
     #user-delete form
         width: 100%
-
-

client/docker-start.sh

@@ -0,0 +1,11 @@
+#!/usr/bin/dumb-init /bin/sh
+
+# Integrate environment variables
+sed -i "s|__BACKEND__|${BACKEND_HOST}|" \
+    /etc/nginx/nginx.conf
+sed -i "s|__BASEURL__|${BASE_URL:-/}|g" \
+    /var/www/index.htm \
+    /var/www/manifest.json
+
+# Start server
+exec nginx

client/html/comment.tpl

@@ -1,57 +1,85 @@
-<div class='comment'>
+<div class='comment-container'>
     <div class='avatar'>
-        <% if (ctx.comment.user && ctx.comment.user.name && ctx.canViewUsers) { %>
+        <% if (ctx.user && ctx.user.name && ctx.canViewUsers) { %>
-            <a href='/user/<%- encodeURIComponent(ctx.comment.user.name) %>'>
+            <a href='<%- ctx.formatClientLink('user', ctx.user.name) %>'>
         <% } %>
 
-        <%= ctx.makeThumbnail(ctx.comment.user ? ctx.comment.user.avatarUrl : null) %>
+        <%= ctx.makeThumbnail(ctx.user ? ctx.user.avatarUrl : null) %>
 
-        <% if (ctx.comment.user && ctx.comment.user.name && ctx.canViewUsers) { %>
+        <% if (ctx.user && ctx.user.name && ctx.canViewUsers) { %>
             </a>
         <% } %>
     </div>
 
-    <div class='body'>
+    <div class='comment'>
-        <header><%
+        <header>
-            %><span class='nickname'><%
+            <nav class='edit tabs'>
-                %><% if (ctx.comment.user && ctx.comment.user.name && ctx.canViewUsers) { %><%
+                <ul>
-                    %><a href='/user/<%- encodeURIComponent(ctx.comment.user.name) %>'><%
+                    <li class='edit'><a href>Write</a></li>
+                    <li class='preview'><a href>Preview</a></li>
+                </ul>
+            </nav>
+
+            <nav class='readonly'><%
+                %><strong><span class='nickname'><%
+                    %><% if (ctx.user && ctx.user.name && ctx.canViewUsers) { %><%
+                        %><a href='<%- ctx.formatClientLink('user', ctx.user.name) %>'><%
+                    %><% } %><%
+
+                    %><%- ctx.user ? ctx.user.name : 'Deleted user' %><%
+
+                    %><% if (ctx.user && ctx.user.name && ctx.canViewUsers) { %><%
+                        %></a><%
+                    %><% } %><%
+                %></span></strong>
+
+                <span class='date'><%
+                    %>commented <%= ctx.makeRelativeTime(ctx.comment ? ctx.comment.creationTime : null) %><%
+                %></span><%
+
+                %><wbr><%
+
+                %><span class='score-container'></span><%
+
+                %><% if (ctx.canEditComment || ctx.canDeleteComment) { %><%
+                    %><span class='action-container'><%
+                        %><% if (ctx.canEditComment) { %><%
+                            %><a href class='edit'><%
+                                %><i class='fa fa-pencil'></i>&nbsp;edit<%
+                            %></a><%
+                        %><% } %><%
+
+                        %><% if (ctx.canDeleteComment) { %><%
+                            %><a href class='delete'><%
+                                %><i class='fa fa-remove'></i>&nbsp;delete<%
+                            %></a><%
+                        %><% } %><%
+                    %></span><%
                 %><% } %><%
-
+            %></nav><%
-                %><%- ctx.comment.user ? ctx.comment.user.name : 'Deleted user' %><%
-
-                %><% if (ctx.comment.user && ctx.comment.user.name && ctx.canViewUsers) { %><%
-                    %></a><%
-                %><% } %><%
-            %></span><%
-
-            %><wbr><%
-
-            %><span class='date'><%
-                %><%= ctx.makeRelativeTime(ctx.comment.creationTime) %><%
-            %></span><%
-
-            %><wbr><%
-
-            %><span class='score-container'></span><%
-
-            %><wbr><%
-
-            %><% if (ctx.canEditComment) { %><%
-                %><a href class='edit'><%
-                    %><i class='fa fa-pencil'></i> edit<%
-                %></a><%
-            %><% } %><%
-
-            %><wbr><%
-
-            %><% if (ctx.canDeleteComment) { %><%
-                %><a href class='delete'><%
-                    %><i class='fa fa-remove'></i> delete<%
-                %></a><%
-            %><% } %><%
         %></header>
 
-        <div class='comment-form-container'></div>
+        <form class='body'>
+            <div class='keep-height'>
+                <div class='tab preview'>
+                    <div class='comment-content'>
+                        <%= ctx.makeMarkdown(ctx.comment ? ctx.comment.text : '') %>
+                    </div>
+                </div>
+
+                <div class='tab edit'>
+                    <textarea required minlength=1><%- ctx.comment ? ctx.comment.text : '' %></textarea>
+                </div>
+            </div>
+
+            <nav class='edit'>
+                <div class='messages'></div>
+
+                <input type='submit' class='save-changes' value='Save'/>
+                <% if (!ctx.onlyEditing) { %>
+                    <input type='button' class='cancel-editing discourage' value='Cancel'/>
+                <% } %>
+            </div>
+        </form>
     </div>
 </div>

client/html/comment_form.tpl

@@ -1,31 +0,0 @@
-<div class='tabs'>
-    <form>
-        <div class='tabs-wrapper'><%
-            %><div class='tab-wrapper'><%
-                %><div class='preview tab'><%
-                    %><div class='comment-content'><%
-                        %><%= ctx.makeMarkdown(ctx.comment.text) %><%
-                    %></div><%
-                %></div><%
-
-                %><div class='edit tab'><%
-                    %><textarea required minlength=1><%- ctx.comment.text %></textarea><%
-                %></div><%
-            %></div><%
-        %></div>
-
-        <nav class='buttons'>
-            <ul>
-                <li class='preview'><a href>Preview</a></li>
-                <li class='edit'><a href>Edit</a></li>
-            </ul>
-        </nav>
-
-        <nav class='actions'>
-            <input type='submit' class='save' value='Save'/>
-            <input type='button' class='cancel discourage' value='Cancel'/>
-        </nav>
-    </form>
-
-    <div class='messages'></div>
-</div>

client/html/comments_page.tpl

@@ -1,10 +1,10 @@
 <div class='global-comment-list'>
     <ul><!--
-        --><% for (let post of ctx.results) { %><!--
+        --><% for (let post of ctx.response.results) { %><!--
             --><li><!--
                 --><div class='post-thumbnail'><!--
                     --><% if (ctx.canViewPosts) { %><!--
-                        --><a href='/post/<%- encodeURIComponent(post.id) %>'><!--
+                        --><a href='<%- ctx.formatClientLink('post', post.id) %>'><!--
                     --><% } %><!--
                         --><%= ctx.makeThumbnail(post.thumbnailUrl) %><!--
                     --><% if (ctx.canViewPosts) { %><!--

client/html/endless_pager.tpl

@@ -1,5 +1,7 @@
 <div class='pager'>
     <div class='page-header-holder'></div>
     <div class='messages'></div>
+    <div class='page-guard top'></div>
     <div class='pages-holder'></div>
+    <div class='page-guard bottom'></div>
 </div>

client/html/file_dropper.tpl

@@ -8,9 +8,19 @@
         <% } %>
         <br/>
         Or just click on this box.
+        <% if (ctx.extraText) { %>
+            <br/>
+            <small><%= ctx.extraText %></small>
+        <% } %>
     </label>
     <% if (ctx.allowUrls) { %>
-        <input type='text' name='url' placeholder='Alternatively, paste an URL here.'/>
+        <div class='url-holder'>
-        <button>Add URL</button>
+            <input type='text' name='url' placeholder='<%- ctx.urlPlaceholder %>'/>
+            <% if (ctx.lock) { %>
+                <button>Confirm</button>
+            <% } else { %>
+                <button>Add URL</button>
+            <% } %>
+        </div>
     <% } %>
 </div>

client/html/help.tpl

@@ -1,11 +1,11 @@
 <div class='content-wrapper' id='help'>
     <nav class='buttons primary'><!--
         --><ul><!--
-            --><li data-name='about'><a href='/help/about'>About</a></li><!--
+            --><li data-name='about'><a href='<%- ctx.formatClientLink('help', 'about') %>'>About</a></li><!--
-            --><li data-name='keyboard'><a href='/help/keyboard'>Keyboard</a></li><!--
+            --><li data-name='keyboard'><a href='<%- ctx.formatClientLink('help', 'keyboard') %>'>Keyboard</a></li><!--
-            --><li data-name='search'><a href='/help/search'>Search syntax</a></li><!--
+            --><li data-name='search'><a href='<%- ctx.formatClientLink('help', 'search') %>'>Search syntax</a></li><!--
-            --><li data-name='comments'><a href='/help/comments'>Comments</a></li><!--
+            --><li data-name='comments'><a href='<%- ctx.formatClientLink('help', 'comments') %>'>Comments</a></li><!--
-            --><li data-name='tos'><a href='/help/tos'>Terms of service</a></li><!--
+            --><li data-name='tos'><a href='<%- ctx.formatClientLink('help', 'tos') %>'>Terms of service</a></li><!--
         --></ul><!--
     --></nav>
 

client/html/help_comments.tpl

@@ -28,3 +28,11 @@
         </tr>
     </tbody>
 </table>
+
+<p>You can also specify the size of embedded images like this:</p>
+
+<ul>
+<li><code>![alt](href =WIDTHx "title")</code></li>
+<li><code>![alt](href =xHEIGHT "title")</code></li>
+<li><code>![alt](href =WIDTHxHEIGHT "title")</code></li>
+</ul>

client/html/help_keyboard.tpl

@@ -33,10 +33,15 @@ shortcuts:</p>
             <td><kbd>P</kbd></td>
             <td>Focus first post in post list</td>
         </tr>
+
+        <tr>
+            <td><kbd>Delete</kbd></td>
+            <td>Delete post (while in edit mode)</td>
+        </tr>
     </tbody>
 </table>
 
-<p>Additionally, each item in top navigation can be accessed using feature
+<p>Additionally, each item in the top navigation can be accessed using a
-called &ldquo;access keys&rdquo;. Pressing underlined letter while holding
+feature called &ldquo;access keys&rdquo;. Pressing the underlined letter while
-Shfit or Alt+Shift (depending on your browser) will go to the desired page
+holding Shift or Alt+Shift (depending on your browser) will go to the desired
-(most browsers) or focus the link (IE).</p>
+page (most browsers) or focus the link (IE).</p>

client/html/help_search.tpl

@@ -1,9 +1,10 @@
 <nav class='buttons secondary'><!--
     --><ul><!--
-        --><li data-name='default'><a href='/help/search'>General</a></li><!--
+        --><li data-name='default'><a href='<%- ctx.formatClientLink('help', 'search') %>'>General</a></li><!--
-        --><li data-name='posts'><a href='/help/search/posts'>Posts</a></li><!--
+        --><li data-name='posts'><a href='<%- ctx.formatClientLink('help', 'search', 'posts') %>'>Posts</a></li><!--
-        --><li data-name='users'><a href='/help/search/users'>Users</a></li><!--
+        --><li data-name='users'><a href='<%- ctx.formatClientLink('help', 'search', 'users') %>'>Users</a></li><!--
-        --><li data-name='tags'><a href='/help/search/tags'>Tags</a></li><!--
+        --><li data-name='tags'><a href='<%- ctx.formatClientLink('help', 'search', 'tags') %>'>Tags</a></li><!--
+        --><li data-name='pools'><a href='<%- ctx.formatClientLink('help', 'search', 'pools') %>'>Pools</li><!--
     --></ul><!--
 --></nav>
 

client/html/help_search_general.tpl

@@ -80,6 +80,9 @@ take following form:</p>
 <code>,desc</code> to control the sort direction, which can be also controlled
 by negating the whole token.</p>
 
+<p>You can escape special characters such as <code>:</code> and <code>-</code>
+by prepending them with a backslash: <code>\\</code>.</p>
+
 <h1>Example</h1>
 
 <p>Searching for posts with following query:</p>
@@ -89,3 +92,8 @@ by negating the whole token.</p>
 <p>will show flash files tagged as sea, that were liked by seven people at
 most, uploaded by user Pirate.</p>
 
+<p>Searching for posts with <code>re:zero</code> will show an error message
+about unknown named token.</p>
+
+<p>Searching for posts with <code>re\:zero</code> will show posts tagged with
+<code>re:zero</code>.</p>

client/html/help_search_pools.tpl

@@ -0,0 +1,97 @@
+<p><strong>Anonymous tokens</strong></p>
+
+<p>Same as <code>name</code> token.</p>
+
+<p><strong>Named tokens</strong></p>
+
+<table>
+    <tbody>
+        <tr>
+            <td><code>name</code></td>
+            <td>having given name (accepts wildcards)</td>
+        </tr>
+        <tr>
+            <td><code>category</code></td>
+            <td>having given category (accepts wildcards)</td>
+        </tr>
+        <tr>
+            <td><code>creation-date</code></td>
+            <td>created at given date</td>
+        </tr>
+        <tr>
+            <td><code>creation-time</code></td>
+            <td>alias of <code>creation-date</code></td>
+        </tr>
+        <tr>
+            <td><code>last-edit-date</code></td>
+            <td>edited at given date</td>
+        </tr>
+        <tr>
+            <td><code>last-edit-time</code></td>
+            <td>alias of <code>last-edit-date</code></td>
+        </tr>
+        <tr>
+            <td><code>edit-date</code></td>
+            <td>alias of <code>last-edit-date</code></td>
+        </tr>
+        <tr>
+            <td><code>edit-time</code></td>
+            <td>alias of <code>last-edit-date</code></td>
+        </tr>
+        <tr>
+            <td><code>post-count</code></td>
+            <td>alias of <code>usages</code></td>
+        </tr>
+    </tbody>
+</table>
+
+<p><strong>Sort style tokens</strong></p>
+
+<table>
+    <tbody>
+        <tr>
+            <td><code>random</code></td>
+            <td>as random as it can get</td>
+        </tr>
+        <tr>
+            <td><code>name</code></td>
+            <td>A to Z</td>
+        </tr>
+        <tr>
+            <td><code>category</code></td>
+            <td>category (A to Z)</td>
+        </tr>
+        <tr>
+            <td><code>creation-date</code></td>
+            <td>recently created first</td>
+        </tr>
+        <tr>
+            <td><code>creation-time</code></td>
+            <td>alias of <code>creation-date</code></td>
+        </tr>
+        <tr>
+            <td><code>last-edit-date</code></td>
+            <td>recently edited first</td>
+        </tr>
+        <tr>
+            <td><code>last-edit-time</code></td>
+            <td>alias of <code>creation-time</code></td>
+        </tr>
+        <tr>
+            <td><code>edit-date</code></td>
+            <td>alias of <code>creation-time</code></td>
+        </tr>
+        <tr>
+            <td><code>edit-time</code></td>
+            <td>alias of <code>creation-time</code></td>
+        </tr>
+        <tr>
+            <td><code>post-count</code></td>
+            <td>number of posts</td>
+        </tr>
+    </tbody>
+</table>
+
+<p><strong>Special tokens</strong></p>
+
+<p>None.</p>

client/html/help_search_posts.tpl

@@ -12,7 +12,7 @@
         </tr>
         <tr>
             <td><code>tag</code></td>
-            <td>having given tag</td>
+            <td>having given tag (accepts wildcards)</td>
         </tr>
         <tr>
             <td><code>score</code></td>
@@ -20,23 +20,31 @@
         </tr>
         <tr>
             <td><code>uploader</code></td>
-            <td>uploaded by given user</td>
+            <td>uploaded by given user (accepts wildcards)</td>
         </tr>
         <tr>
             <td><code>upload</code></td>
-            <td>alias of <code>upload</code></td>
+            <td>alias of <code>uploader</code></td>
         </tr>
         <tr>
             <td><code>submit</code></td>
-            <td>alias of <code>upload</code></td>
+            <td>alias of <code>uploader</code></td>
         </tr>
         <tr>
             <td><code>comment</code></td>
-            <td>commented by given user</td>
+            <td>commented by given user (accepts wildcards)</td>
         </tr>
         <tr>
             <td><code>fav</code></td>
-            <td>favorited by given user</td>
+            <td>favorited by given user (accepts wildcards)</td>
+        </tr>
+        <tr>
+            <td><code>source</code></td>
+            <td>having given source URL (accepts wildcards)</td>
+        </tr>
+        <tr>
+            <td><code>pool</code></td>
+            <td>belonging to the pool with the given ID</td>
         </tr>
         <tr>
             <td><code>tag-count</code></td>
@@ -54,6 +62,10 @@
             <td><code>note-count</code></td>
             <td>having given number of annotations</td>
         </tr>
+        <tr>
+            <td><code>note-text</code></td>
+            <td>having given note text (accepts wildcards)</td>
+        </tr>
         <tr>
             <td><code>relation-count</code></td>
             <td>having given number of relations</td>
@@ -67,9 +79,21 @@
             <td>given type of posts. <code>&lt;value&gt;</code> can be either <code>image</code>, <code>animation</code> (or <code>animated</code> or <code>anim</code>), <code>flash</code> (or <code>swf</code>) or <code>video</code> (or <code>webm</code>).</td>
         </tr>
         <tr>
-            <td><code>content-checksum</code></td>
+            <td><code>flag</code></td>
+            <td>having given flag. <code>&lt;value&gt;</code> can be either <code>loop</code> or <code>sound</code>.</td>
+        </tr>
+        <tr>
+            <td><code>sha1</code></td>
             <td>having given SHA1 checksum</td>
         </tr>
+        <tr>
+            <td><code>md5</code></td>
+            <td>having given MD5 checksum</td>
+        </tr>
+        <tr>
+            <td><code>content-checksum</code></td>
+            <td>alias of <code>sha1</code></td>
+        </tr>
         <tr>
             <td><code>file-size</code></td>
             <td>having given file size (in bytes)</td>
@@ -86,6 +110,14 @@
             <td><code>image-area</code></td>
             <td>having given number of pixels (image width * image height)</td>
         </tr>
+        <tr>
+            <td><code>image-aspect-ratio</code></td>
+            <td>having given aspect ratio (image width / image height)</td>
+        </tr>
+        <tr>
+            <td><code>image-ar</code></td>
+            <td>alias of <code>image-aspect-ratio</code></td>
+        </tr>
         <tr>
             <td><code>width</code></td>
             <td>alias of <code>image-width</code></td>
@@ -98,6 +130,14 @@
             <td><code>area</code></td>
             <td>alias of <code>image-area</code></td>
         </tr>
+        <tr>
+            <td><code>aspect-ratio</code></td>
+            <td>alias of <code>image-aspect-ratio</code></td>
+        </tr>
+        <tr>
+            <td><code>ar</code></td>
+            <td>alias of <code>image-aspect-ratio</code></td>
+        </tr>
         <tr>
             <td><code>creation-date</code></td>
             <td>posted at given date</td>

client/html/help_search_tags.tpl

@@ -12,7 +12,7 @@
         </tr>
         <tr>
             <td><code>category</code></td>
-            <td>having given category</td>
+            <td>having given category (accepts wildcards)</td>
         </tr>
         <tr>
             <td><code>creation-date</code></td>

client/html/home.tpl

@@ -8,7 +8,7 @@
             <%= ctx.makeTextInput({name: 'search-text', placeholder: 'enter some tags'}) %>
             <input type='submit' value='Search'/>
             <span class=sep>or</span>
-            <a href='/posts'>browse all posts</a>
+            <a href='<%- ctx.formatClientLink('posts') %>'>browse all posts</a>
         </form>
     <% } %>
     <div class='post-info-container'></div>

client/html/home_footer.tpl

@@ -1,7 +1,7 @@
 <ul>
     <li><%- ctx.postCount %> posts</li><span class='sep'>
     </span><li><%= ctx.makeFileSize(ctx.diskUsage) %></li><span class='sep'>
-    </span><li>Build <a class='version' href='https://github.com/rr-/szurubooru/commits/master'><%- ctx.version %></a> from <%= ctx.makeRelativeTime(ctx.buildDate) %></li><span class='sep'>
+    </span><li>Build <a class='version' href='https://github.com/rr-/szurubooru/commits/master'><%- ctx.version %></a><%- ctx.isDevelopmentMode ? " (DEV MODE)" : "" %> from <%= ctx.makeRelativeTime(ctx.buildDate) %></li><span class='sep'>
-    </span><% if (ctx.canListSnapshots) { %><li><a href='/history'>History</a></li><span class='sep'>
+    </span><% if (ctx.canListSnapshots) { %><li><a href='<%- ctx.formatClientLink('history') %>'>History</a></li><span class='sep'>
     </span><% } %>
 </ul>

client/html/index.htm

@@ -2,16 +2,31 @@
 <html>
 <head>
     <meta charset='utf-8'/>
-    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
+    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
-    <title><!-- configured in the config file --></title>
+    <meta name='theme-color' content='#24aadd'/>
-    <link href='/css/app.min.css' rel='stylesheet' type='text/css'/>
+    <meta name='apple-mobile-web-app-capable' content='yes'/>
-    <link href='/css/vendor.min.css' rel='stylesheet' type='text/css'/>
+    <meta name='apple-mobile-web-app-status-bar-style' content='black'/>
-    <link rel='shortcut icon' type='image/png' href='/img/favicon.png'/>
+    <meta name='msapplication-TileColor' content='#ffffff'/>
+    <meta name="msapplication-TileImage" content="/img/mstile-150x150.png">
+    <title>Loading...</title>
+    <!-- Base HTML Placeholder -->
+    <link href='css/app.min.css' rel='stylesheet' type='text/css'/>
+    <link href='css/vendor.min.css' rel='stylesheet' type='text/css'/>
+    <link rel='shortcut icon' type='image/png' href='img/favicon.png'/>
+    <link rel='apple-touch-icon' sizes='180x180' href='img/apple-touch-icon.png'/>
+    <link rel='apple-touch-startup-image' href='img/apple-touch-startup-image-640x1136.png' media='(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)'/>
+    <link rel='apple-touch-startup-image' href='img/apple-touch-startup-image-750x1294.png' media='(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)'/>
+    <link rel='apple-touch-startup-image' href='img/apple-touch-startup-image-1242x2148.png' media='(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)'/>
+    <link rel='apple-touch-startup-image' href='img/apple-touch-startup-image-1125x2436.png' media='(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)'/>
+    <link rel='apple-touch-startup-image' href='img/apple-touch-startup-image-1536x2048.png' media='(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)'/>
+    <link rel='apple-touch-startup-image' href='img/apple-touch-startup-image-1668x2224.png' media='(min-device-width: 834px) and (max-device-width: 834px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)'/>
+    <link rel='apple-touch-startup-image' href='img/apple-touch-startup-image-2048x2732.png' media='(min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)'/>
+    <link rel='manifest' href='manifest.json'/>
 </head>
 <body>
     <div id='top-navigation-holder'></div>
     <div id='content-holder'></div>
-    <script type='text/javascript' src='/js/vendor.min.js'></script>
+    <script type='text/javascript' src='js/vendor.min.js'></script>
-    <script type='text/javascript' src='/js/app.min.js'></script>
+    <script type='text/javascript' src='js/app.min.js'></script>
 </body>
 </html>

client/html/login.tpl

@@ -1,38 +1,36 @@
 <div class='content-wrapper' id='login'>
     <h1>Log in</h1>
     <form>
-        <div class='input'>
+        <ul class='input'>
-            <ul>
+            <li>
-                <li>
+                <%= ctx.makeTextInput({
-                    <%= ctx.makeTextInput({
+                    text: 'User name',
-                        text: 'User name',
+                    name: 'name',
-                        name: 'name',
+                    required: true,
-                        required: true,
+                    pattern: ctx.userNamePattern,
-                        pattern: ctx.userNamePattern,
+                }) %>
-                    }) %>
+            </li>
-                </li>
+            <li>
-                <li>
+                <%= ctx.makePasswordInput({
-                    <%= ctx.makePasswordInput({
+                    text: 'Password',
-                        text: 'Password',
+                    name: 'password',
-                        name: 'password',
+                    required: true,
-                        required: true,
+                    pattern: ctx.passwordPattern,
-                        pattern: ctx.passwordPattern,
+                }) %>
-                    }) %>
+            </li>
-                </li>
+            <li>
-                <li>
+                <%= ctx.makeCheckbox({
-                    <%= ctx.makeCheckbox({
+                    text: 'Remember me',
-                        text: 'Remember me',
+                    name: 'remember-user',
-                        name: 'remember-user',
+                }) %>
-                    }) %>
+            </li>
-                </li>
+        </ul>
-            </ul>
+
-        </div>
         <div class='messages'></div>
+
         <div class='buttons'>
             <input type='submit' value='Log in'/>
-            <% if (ctx.canSendMails) { %>
+            <a class='append' href='<%- ctx.formatClientLink('password-reset') %>'>Forgot the password?</a>
-                <a class='append' href='/password-reset'>Forgot the password?</a>
-            <% } %>
         </div>
     </form>
 </div>

client/html/manual_pager_nav.tpl

@@ -1,17 +1,17 @@
 <nav class='buttons'>
     <ul>
         <li>
-            <% if (ctx.prevLinkActive) { %>
+            <% if (ctx.prevPage !== ctx.currentPage) { %>
-                <a class='prev' href='<%- ctx.prevLink %>'>
+                <a rel='prev' class='prev' href='<%- ctx.getClientUrlForPage(ctx.pages.get(ctx.prevPage).offset, ctx.pages.get(ctx.prevPage).limit) %>'>
             <% } else { %>
-                <a class='prev disabled'>
+                <a rel='prev' class='prev disabled'>
             <% } %>
                 <i class='fa fa-chevron-left'></i>
                 <span class='vim-nav-hint'>&lt; Previous page</span>
             </a>
         </li>
 
-        <% for (let page of ctx.pages) { %>
+        <% for (let page of ctx.pages.values()) { %>
             <% if (page.ellipsis) { %>
                 <li>&hellip;</li>
             <% } else { %>
@@ -20,16 +20,16 @@
                 <% } else { %>
                     <li>
                 <% } %>
-                    <a href='<%- page.link %>'><%- page.number %></a>
+                    <a href='<%- ctx.getClientUrlForPage(page.offset, page.limit) %>'><%- page.number %></a>
                 </li>
             <% } %>
         <% } %>
 
         <li>
-            <% if (ctx.nextLinkActive) { %>
+            <% if (ctx.nextPage !== ctx.currentPage) { %>
-                <a class='next' href='<%- ctx.nextLink %>'>
+                <a rel='next' class='next' href='<%- ctx.getClientUrlForPage(ctx.pages.get(ctx.nextPage).offset, ctx.pages.get(ctx.nextPage).limit) %>'>
             <% } else { %>
-                <a class='next disabled'>
+                <a rel='next' class='next disabled'>
             <% } %>
                 <i class='fa fa-chevron-right'></i>
                 <span class='vim-nav-hint'>Next page &gt;</span>

client/html/not_found.tpl

@@ -1,5 +1,5 @@
 <div class='not-found'>
     <h1>Not found</h1>
     <p><%- ctx.path %> is not a valid URL.</p>
-    <p><a href='/'>Back to main page</a></p>
+    <p><a href='<%- ctx.formatClientLink() %>'>Back to main page</a></p>
 </div>

client/html/password_reset.tpl

@@ -1,8 +1,8 @@
 <div class='content-wrapper' id='password-reset'>
     <h1>Password reset</h1>
-    <form autocomplete='off'>
+    <% if (ctx.canSendMails) { %>
-        <div class='input'>
+        <form autocomplete='off'>
-            <ul>
+            <ul class='input'>
                 <li>
                     <%= ctx.makeTextInput({
                         text: 'User name or e-mail address',
@@ -11,13 +11,20 @@
                     }) %>
                 </li>
             </ul>
-        </div>
+
-        <p><small>Proceeding will send an e-mail that contains a password reset
+            <p><small>Proceeding will send an e-mail that contains a password reset
-        link. Clicking it is going to generate a new password for your account.
+            link. Clicking it is going to generate a new password for your account.
-        It is recommended to change that password to something else.</small></p>
+            It is recommended to change that password to something else.</small></p>
-        <div class='messages'></div>
+
-        <div class='buttons'>
+            <div class='messages'></div>
-            <input type='submit' value='Proceed'/>
+            <div class='buttons'>
-        </div>
+                <input type='submit' value='Proceed'/>
-    </form>
+            </div>
+        </form>
+    <% } else { %>
+        <p>We do not support automatic password resetting.</p>
+        <% if (ctx.contactEmail) { %>
+            <p>Please send an e-mail to <a href='mailto:<%- ctx.contactEmail %>'><%- ctx.contactEmail %></a> to go through a manual procedure.</p>
+        <% } %>
+    <% } %>
 </div>

client/html/pool.tpl

@@ -0,0 +1,18 @@
+<div class='content-wrapper' id='pool'>
+    <h1><%- ctx.getPrettyName(ctx.pool.names[0]) %></h1>
+    <nav class='buttons'><!--
+        --><ul><!--
+            --><li data-name='summary'><a href='<%- ctx.formatClientLink('pool', ctx.pool.id) %>'>Summary</a></li><!--
+            --><% if (ctx.canEditAnything) { %><!--
+                --><li data-name='edit'><a href='<%- ctx.formatClientLink('pool', ctx.pool.id, 'edit') %>'>Edit</a></li><!--
+            --><% } %><!--
+            --><% if (ctx.canMerge) { %><!--
+                --><li data-name='merge'><a href='<%- ctx.formatClientLink('pool', ctx.pool.id, 'merge') %>'>Merge with&hellip;</a></li><!--
+            --><% } %><!--
+            --><% if (ctx.canDelete) { %><!--
+                --><li data-name='delete'><a href='<%- ctx.formatClientLink('pool', ctx.pool.id, 'delete') %>'>Delete</a></li><!--
+            --><% } %><!--
+        --></ul><!--
+    --></nav>
+    <div class='pool-content-holder'></div>
+</div>

client/html/pool_categories.tpl

@@ -0,0 +1,30 @@
+<div class='content-wrapper pool-categories'>
+    <form>
+        <h1>Pool categories</h1>
+        <div class="table-wrap">
+            <table>
+                <thead>
+                    <tr>
+                        <th class='name'>Category name</th>
+                        <th class='color'>CSS color</th>
+                        <th class='usages'>Usages</th>
+                    </tr>
+                </thead>
+                <tbody>
+                </tbody>
+            </table>
+        </div>
+
+        <% if (ctx.canCreate) { %>
+            <p><a href class='add'>Add new category</a></p>
+        <% } %>
+
+        <div class='messages'></div>
+
+        <% if (ctx.canCreate || ctx.canEditName || ctx.canEditColor || ctx.canDelete) { %>
+            <div class='buttons'>
+                <input type='submit' class='save' value='Save changes'>
+            </div>
+        <% } %>
+    </form>
+</div>

client/html/pool_category_row.tpl

@@ -0,0 +1,43 @@
+<% if (ctx.poolCategory.isDefault) { %><%
+    %><tr data-category='<%- ctx.poolCategory.name %>' class='default'><%
+%><% } else { %><%
+    %><tr data-category='<%- ctx.poolCategory.name %>'><%
+%><% } %>
+    <td class='name'>
+        <% if (ctx.canEditName) { %>
+            <%= ctx.makeTextInput({value: ctx.poolCategory.name, required: true}) %>
+        <% } else { %>
+            <%- ctx.poolCategory.name %>
+        <% } %>
+    </td>
+    <td class='color'>
+        <% if (ctx.canEditColor) { %>
+            <%= ctx.makeColorInput({value: ctx.poolCategory.color}) %>
+        <% } else { %>
+            <%- ctx.poolCategory.color %>
+        <% } %>
+    </td>
+    <td class='usages'>
+        <% if (ctx.poolCategory.name) { %>
+            <a href='<%- ctx.formatClientLink('pools', {query: 'category:' + ctx.poolCategory.name}) %>'>
+                <%- ctx.poolCategory.poolCount %>
+            </a>
+        <% } else { %>
+            <%- ctx.poolCategory.poolCount %>
+        <% } %>
+    </td>
+    <% if (ctx.canDelete) { %>
+        <td class='remove'>
+            <% if (ctx.poolCategory.poolCount) { %>
+                <a class='inactive' title="Can't delete category in use">Remove</a>
+            <% } else { %>
+                <a href>Remove</a>
+            <% } %>
+        </td>
+    <% } %>
+    <% if (ctx.canSetDefault) { %>
+        <td class='set-default'>
+            <a href>Make default</a>
+        </td>
+    <% } %>
+</tr>

client/html/pool_create.tpl

@@ -0,0 +1,42 @@
+<div class='content-wrapper pool-create'>
+    <form>
+        <ul class='input'>
+            <li class='names'>
+                <%= ctx.makeTextInput({
+                    text: 'Names',
+                    value: '',
+                    required: true,
+                }) %>
+            </li>
+            <li class='category'>
+                <%= ctx.makeSelect({
+                    text: 'Category',
+                    keyValues: ctx.categories,
+                    selectedKey: 'default',
+                    required: true,
+                }) %>
+            </li>
+            <li class='description'>
+                <%= ctx.makeTextarea({
+                    text: 'Description',
+                    value: '',
+                }) %>
+            </li>
+            <li class='posts'>
+                <%= ctx.makeTextInput({
+                    text: 'Posts',
+                    value: '',
+                    placeholder: 'space-separated post IDs',
+                }) %>
+            </li>
+        </ul>
+
+        <% if (ctx.canCreate) { %>
+            <div class='messages'></div>
+
+            <div class='buttons'>
+                <input type='submit' class='save' value='Create pool'>
+            </div>
+        <% } %>
+    </form>
+</div>

client/html/pool_delete.tpl

@@ -0,0 +1,21 @@
+<div class='pool-delete'>
+    <form>
+        <p>This pool has <a href='<%- ctx.formatClientLink('posts', {query: 'pool:' + ctx.pool.id}) %>'><%- ctx.pool.postCount %> post(s)</a>.</p>
+
+        <ul class='input'>
+            <li>
+                <%= ctx.makeCheckbox({
+                    name: 'confirm-deletion',
+                    text: 'I confirm that I want to delete this pool.',
+                    required: true,
+                }) %>
+            </li>
+        </ul>
+
+        <div class='messages'></div>
+
+        <div class='buttons'>
+            <input type='submit' value='Delete pool'/>
+        </div>
+    </form>
+</div>

client/html/pool_edit.tpl

@@ -0,0 +1,50 @@
+<div class='content-wrapper pool-edit'>
+    <form>
+        <ul class='input'>
+            <li class='names'>
+                <% if (ctx.canEditNames) { %>
+                    <%= ctx.makeTextInput({
+                        text: 'Names',
+                        value: ctx.pool.names.join(' '),
+                        required: true,
+                    }) %>
+                <% } %>
+            </li>
+            <li class='category'>
+                <% if (ctx.canEditCategory) { %>
+                    <%= ctx.makeSelect({
+                        text: 'Category',
+                        keyValues: ctx.categories,
+                        selectedKey: ctx.pool.category,
+                        required: true,
+                    }) %>
+                <% } %>
+            </li>
+            <li class='description'>
+                <% if (ctx.canEditDescription) { %>
+                    <%= ctx.makeTextarea({
+                        text: 'Description',
+                        value: ctx.pool.description,
+                    }) %>
+                <% } %>
+            </li>
+            <li class='posts'>
+                <% if (ctx.canEditPosts) { %>
+                    <%= ctx.makeTextInput({
+                        text: 'Posts',
+                        placeholder: 'space-separated post IDs',
+                        value: ctx.pool.posts.map(post => post.id).join(' ')
+                    }) %>
+                <% } %>
+            </li>
+        </ul>
+
+        <% if (ctx.canEditAnything) { %>
+            <div class='messages'></div>
+
+            <div class='buttons'>
+                <input type='submit' class='save' value='Save changes'>
+            </div>
+        <% } %>
+    </form>
+</div>

client/html/pool_input.tpl

@@ -0,0 +1,7 @@
+<div class='pool-input'>
+    <div class='main-control'>
+        <input type='text' placeholder='type to add…'/>
+    </div>
+
+    <ul class='compact-pools'></ul>
+</div>

client/html/pool_merge.tpl

@@ -0,0 +1,22 @@
+<div class='pool-merge'>
+    <form>
+        <ul class='input'>
+            <li class='target'>
+                <%= ctx.makeTextInput({name: 'target-pool', required: true, text: 'Target pool', pattern: ctx.poolNamePattern}) %>
+            </li>
+
+            <li>
+                <p>Posts in the two pools will be combined.
+                Category needs to be handled manually.</p>
+
+                <%= ctx.makeCheckbox({required: true, text: 'I confirm that I want to merge this pool.'}) %>
+            </li>
+        </ul>
+
+        <div class='messages'></div>
+
+        <div class='buttons'>
+            <input type='submit' value='Merge pool'/>
+        </div>
+    </form>
+</div>

client/html/pool_summary.tpl

@@ -0,0 +1,23 @@
+<div class='content-wrapper pool-summary'>
+    <section class='details'>
+        <section>
+            Category:
+            <span class='<%= ctx.makeCssName(ctx.pool.category, 'pool') %>'><%- ctx.pool.category %></span>
+        </section>
+
+        <section>
+        Aliases:<br/>
+        <ul><!--
+            --><% for (let name of ctx.pool.names.slice(1)) { %><!--
+                --><li><%= ctx.makePoolLink(ctx.pool.id, false, false, ctx.pool, name) %></li><!--
+            --><% } %><!--
+        --></ul>
+        </section>
+    </section>
+
+    <section class='description'>
+        <hr/>
+        <%= ctx.makeMarkdown(ctx.pool.description || 'This pool has no description yet.') %>
+        <p>This pool has <a href='<%- ctx.formatClientLink('posts', {query: 'pool:' + ctx.pool.id}) %>'><%- ctx.pool.postCount %> post(s)</a>.</p>
+    </section>
+</div>

client/html/pools_header.tpl

@@ -0,0 +1,22 @@
+<div class='pool-list-header'>
+    <form class='horizontal'>
+        <ul class='input'>
+            <li>
+                <%= ctx.makeTextInput({text: 'Search query', id: 'search-text', name: 'search-text', value: ctx.parameters.query}) %>
+            </li>
+        </ul>
+
+        <div class='buttons'>
+            <input type='submit' value='Search'/>
+            <a class='button append' href='<%- ctx.formatClientLink('help', 'search', 'pools') %>'>Syntax help</a>
+
+            <% if (ctx.canCreate) { %>
+                <a class='append' href='<%- ctx.formatClientLink('pool', 'create') %>'>Add new pool</a>
+            <% } %>
+
+            <% if (ctx.canEditPoolCategories) { %>
+                <a class='append' href='<%- ctx.formatClientLink('pool-categories') %>'>Pool categories</a>
+            <% } %>
+        </div>
+    </form>
+</div>

client/html/pools_page.tpl

@@ -0,0 +1,48 @@
+<div class='pool-list table-wrap'>
+    <% if (ctx.response.results.length) { %>
+        <table>
+            <thead>
+                <th class='names'>
+                    <% if (ctx.parameters.query == 'sort:name' || !ctx.parameters.query) { %>
+                        <a href='<%- ctx.formatClientLink('pools', {query: '-sort:name'}) %>'>Pool name(s)</a>
+                    <% } else { %>
+                        <a href='<%- ctx.formatClientLink('pools', {query: 'sort:name'}) %>'>Pool name(s)</a>
+                    <% } %>
+                </th>
+                <th class='post-count'>
+                     <% if (ctx.parameters.query == 'sort:post-count') { %>
+                        <a href='<%- ctx.formatClientLink('pools', {query: '-sort:post-count'}) %>'>Post count</a>
+                     <% } else { %>
+                        <a href='<%- ctx.formatClientLink('pools', {query: 'sort:post-count'}) %>'>Post count</a>
+                     <% } %>
+                     </th>
+                <th class='creation-time'>
+                    <% if (ctx.parameters.query == 'sort:creation-time') { %>
+                        <a href='<%- ctx.formatClientLink('pools', {query: '-sort:creation-time'}) %>'>Created on</a>
+                    <% } else { %>
+                        <a href='<%- ctx.formatClientLink('pools', {query: 'sort:creation-time'}) %>'>Created on</a>
+                    <% } %>
+                </th>
+            </thead>
+            <tbody>
+                <% for (let pool of ctx.response.results) { %>
+                    <tr>
+                        <td class='names'>
+                            <ul>
+                                <% for (let name of pool.names) { %>
+                                    <li><%= ctx.makePoolLink(pool.id, false, false, pool, name) %></li>
+                                <% } %>
+                            </ul>
+                        </td>
+                        <td class='post-count'>
+                            <a href='<%- ctx.formatClientLink('posts', {query: 'pool:' + pool.id}) %>'><%- pool.postCount %></a>
+                        </td>
+                        <td class='creation-time'>
+                            <%= ctx.makeRelativeTime(pool.creationTime) %>
+                        </td>
+                    </tr>
+                <% } %>
+            </tbody>
+        </table>
+    <% } %>
+</div>

client/html/post_content.tpl

@@ -1,30 +1,34 @@
 <div class='post-content post-type-<%- ctx.post.type %>'>
     <% if (['image', 'animation'].includes(ctx.post.type)) { %>
 
-        <img alt='' src='<%- ctx.post.contentUrl %>'/>
+        <img class='resize-listener' alt='' src='<%- ctx.post.contentUrl %>'/>
 
     <% } else if (ctx.post.type === 'flash') { %>
 
-        <object width='<%- ctx.post.canvasWidth %>' height='<%- ctx.post.canvasHeight %>' data='<%- ctx.post.contentUrl %>'>
+        <object class='resize-listener' width='<%- ctx.post.canvasWidth %>' height='<%- ctx.post.canvasHeight %>' data='<%- ctx.post.contentUrl %>'>
             <param name='wmode' value='opaque'/>
             <param name='movie' value='<%- ctx.post.contentUrl %>'/>
         </object>
 
     <% } else if (ctx.post.type === 'video') { %>
 
-        <% if ((ctx.post.flags || []).includes('loop')) { %>
+        <%= ctx.makeElement(
-            <video id='video' controls loop='loop'>
+            'video', {
-        <% } else { %>
+                class: 'resize-listener',
-            <video id='video' controls>
+                controls: true,
-        <% } %>
+                loop: (ctx.post.flags || []).includes('loop'),
-
+                playsinline: true,
-            <source type='<%- ctx.post.mimeType %>' src='<%- ctx.post.contentUrl %>'/>
+                autoplay: ctx.autoplay,
-
+            },
-            Your browser doesn't support HTML5 videos.
+            ctx.makeElement('source', {
-        </video>
+                type: ctx.post.mimeType,
+                src: ctx.post.contentUrl,
+            }),
+            'Your browser doesn\'t support HTML5 videos.')
+        %>
 
     <% } else { console.log(new Error('Unknown post type')); } %>
 
-    <div class='post-overlay'>
+    <div class='post-overlay resize-listener'>
     </div>
 </div>

client/html/post_detail.tpl

@@ -2,9 +2,9 @@
     <h1>Post #<%- ctx.post.id %></h1>
     <nav class='buttons'><!--
         --><ul><!--
-            --><li><a href='/post/<%- ctx.post.id %>'><i class='fa fa-reply'></i> Main view</a></li><!--
+            --><li><a href='<%- ctx.formatClientLink('post', ctx.post.id) %>'><i class='fa fa-reply'></i> Main view</a></li><!--
             --><% if (ctx.canMerge) { %><!--
-                --><li data-name='merge'><a href='/post/<%- ctx.post.id %>/merge'>Merge with&hellip;</a></li><!--
+                --><li data-name='merge'><a href='<%- ctx.formatClientLink('post', ctx.post.id, 'merge') %>'>Merge with&hellip;</a></li><!--
             --><% } %><!--
         --></ul><!--
     --></nav>

client/html/post_edit_sidebar.tpl

@@ -4,7 +4,7 @@
 
         <div class='messages'></div>
 
-        <% if (ctx.canEditPostSafety) { %>
+        <% if (ctx.enableSafety && ctx.canEditPostSafety) { %>
             <section class='safety'>
                 <label>Safety</label>
                 <div class='radio-wrapper'>
@@ -50,14 +50,32 @@
                     name: 'loop',
                     checked: ctx.post.flags.includes('loop'),
                 }) %>
+                <%= ctx.makeCheckbox({
+                    text: 'Sound',
+                    name: 'sound',
+                    checked: ctx.post.flags.includes('sound'),
+                }) %>
+            </section>
+        <% } %>
+
+        <% if (ctx.canEditPostSource) { %>
+            <section class='post-source'>
+                <%= ctx.makeTextarea({
+                    text: 'Source',
+                    value: ctx.post.source,
+                }) %>
             </section>
         <% } %>
 
         <% if (ctx.canEditPostTags) { %>
             <section class='tags'>
-                <%= ctx.makeTextInput({
+                <%= ctx.makeTextInput({}) %>
-                    value: ctx.post.tags.join(' '),
+            </section>
-                }) %>
+        <% } %>
+
+        <% if (ctx.canEditPoolPosts) { %>
+            <section class='pools'>
+                <%= ctx.makeTextInput({}) %>
             </section>
         <% } %>
 
@@ -66,6 +84,12 @@
                 <a href class='add'>Add a note</a>
                 <%= ctx.makeTextarea({disabled: true, text: 'Content (supports Markdown)', rows: '8'}) %>
                 <a href class='delete inactive'>Delete selected note</a>
+                <% if (ctx.hasClipboard) { %>
+                    <br/>
+                    <a href class='copy'>Export notes to clipboard</a>
+                    <br/>
+                    <a href class='paste'>Import notes from clipboard</a>
+                <% } %>
             </section>
         <% } %>
 

client/html/post_main.tpl

@@ -4,12 +4,12 @@
             <article class='previous-post'>
                 <% if (ctx.prevPostId) { %>
                     <% if (ctx.editMode) { %>
-                        <a href='<%= ctx.getPostEditUrl(ctx.prevPostId, ctx.parameters) %>'>
+                        <a rel='prev' href='<%= ctx.getPostEditUrl(ctx.prevPostId, ctx.parameters) %>'>
                     <% } else { %>
-                        <a href='<%= ctx.getPostUrl(ctx.prevPostId, ctx.parameters) %>'>
+                        <a rel='prev' href='<%= ctx.getPostUrl(ctx.prevPostId, ctx.parameters) %>'>
                     <% } %>
                 <% } else { %>
-                    <a class='inactive'>
+                    <a rel='prev' class='inactive'>
                 <% } %>
                     <i class='fa fa-chevron-left'></i>
                     <span class='vim-nav-hint'>&lt; Previous post</span>
@@ -18,17 +18,18 @@
             <article class='next-post'>
                 <% if (ctx.nextPostId) { %>
                     <% if (ctx.editMode) { %>
-                        <a href='<%= ctx.getPostEditUrl(ctx.nextPostId, ctx.parameters) %>'>
+                        <a rel='next' href='<%= ctx.getPostEditUrl(ctx.nextPostId, ctx.parameters) %>'>
                     <% } else { %>
-                        <a href='<%= ctx.getPostUrl(ctx.nextPostId, ctx.parameters) %>'>
+                        <a rel='next' href='<%= ctx.getPostUrl(ctx.nextPostId, ctx.parameters) %>'>
                     <% } %>
                 <% } else { %>
-                    <a class='inactive'>
+                    <a rel='next' class='inactive'>
                 <% } %>
                     <i class='fa fa-chevron-right'></i>
                     <span class='vim-nav-hint'>Next post &gt;</span>
                 </a>
             </article>
+            <% if (ctx.canEditPosts || ctx.canDeletePosts || ctx.canFeaturePosts) { %>
             <article class='edit-post'>
                 <% if (ctx.editMode) { %>
                     <a href='<%= ctx.getPostUrl(ctx.post.id, ctx.parameters) %>'>
@@ -36,16 +37,13 @@
                         <span class='vim-nav-hint'>Back to view mode</span>
                     </a>
                 <% } else { %>
-                    <% if (ctx.canEditPosts || ctx.canDeletePosts || ctx.canFeaturePosts) { %>
+                    <a href='<%= ctx.getPostEditUrl(ctx.post.id, ctx.parameters) %>'>
-                        <a href='<%= ctx.getPostEditUrl(ctx.post.id, ctx.parameters) %>'>
+                    <i class='fa fa-pencil'></i>
-                    <% } else { %>
+                    <span class='vim-nav-hint'>Edit post</span>
-                        <a class='inactive'>
-                    <% } %>
-                        <i class='fa fa-pencil'></i>
-                        <span class='vim-nav-hint'>Edit post</span>
                     </a>
                 <% } %>
             </article>
+            <% } %>
         </nav>
 
         <div class='sidebar-container'></div>
@@ -54,13 +52,16 @@
     <div class='content'>
         <div class='post-container'></div>
 
-        <% if (ctx.canListComments) { %>
+        <div class='after-mobile-controls'>
-            <div class='comments-container'></div>
+            <div class='description'></div>
-        <% } %>
+            <% if (ctx.canCreateComments) { %>
+                <h2>Add comment</h2>
+                <div class='comment-form-container'></div>
+            <% } %>
 
-        <% if (ctx.canCreateComments) { %>
+            <% if (ctx.canListComments) { %>
-            <h2>Add comment</h2>
+                <div class='comments-container'></div>
-            <div class='comment-form-container'></div>
+            <% } %>
-        <% } %>
+        </div>
     </div>
 </div>

client/html/post_merge.tpl

@@ -1,6 +1,6 @@
 <div class='post-merge'>
     <form>
-        <ul>
+        <ul class='input'>
             <li class='post-mirror'>
                 <div class='left-post-container'></div>
                 <div class='right-post-container'></div>

client/html/post_merge_side.tpl

@@ -1,8 +1,12 @@
-<% if (ctx.editable) { %>
+<header>
-    <p>Post # <input type='text' pattern='^[0-9]+$' value='<%- ctx.post ? ctx.post.id : '' %>'/></p>
+    <label for='merge-id-<%- ctx.name %>'>Post #</label>
-<% } else { %>
+    <% if (ctx.editable) { %>
-    <p>Post # <input type='text' pattern='^[0-9]+$' value='<%- ctx.post ? ctx.post.id : '' %>' readonly/></p>
+        <input type='text' id='merge-id-<%-ctx.name %>' pattern='^[0-9]+$' value='<%- ctx.post ? ctx.post.id : '' %>'/>
-<% } %>
+        <input type='button' value='Search'/>
+    <% } else { %>
+        <input type='text' id='merge-id-<%-ctx.name %>' pattern='^[0-9]+$' value='<%- ctx.post ? ctx.post.id : '' %>' readonly/>
+    <% } %>
+</header>
 
 <% if (ctx.post) { %>
     <div class='post-thumbnail'>
@@ -31,7 +35,14 @@
                     'image/gif': 'GIF',
                     'image/jpeg': 'JPEG',
                     'image/png': 'PNG',
+                    'image/webp': 'WEBP',
+                    'image/bmp': 'BMP',
+                    'image/avif': 'AVIF',
+                    'image/heif': 'HEIF',
+                    'image/heic': 'HEIC',
                     'video/webm': 'WEBM',
+                    'video/mp4': 'MPEG-4',
+                    'video/quicktime': 'MOV',
                     'application/x-shockwave-flash': 'SWF',
                 }[ctx.post.mimeType] +
                 ' (' +

client/html/post_readonly_sidebar.tpl

@@ -8,11 +8,22 @@
                     'image/gif': 'GIF',
                     'image/jpeg': 'JPEG',
                     'image/png': 'PNG',
+                    'image/webp': 'WEBP',
+                    'image/bmp': 'BMP',
+                    'image/avif': 'AVIF',
+                    'image/heif': 'HEIF',
+                    'image/heic': 'HEIC',
                     'video/webm': 'WEBM',
+                    'video/mp4': 'MPEG-4',
+                    'video/quicktime': 'MOV',
                     'application/x-shockwave-flash': 'SWF',
-                }[ctx.post.mimeType] %>
+                }[ctx.post.mimeType] %><!--
-            </a>
+            --></a>
             (<%- ctx.post.canvasWidth %>x<%- ctx.post.canvasHeight %>)
+            <% if (ctx.post.flags.length) { %><!--
+                --><% if (ctx.post.flags.includes('loop')) { %><i class='fa fa-repeat'></i><% } %><!--
+                --><% if (ctx.post.flags.includes('sound')) { %><i class='fa fa-volume-up'></i><% } %>
+            <% } %>
         </section>
 
         <section class='upload-info'>
@@ -20,10 +31,12 @@
             <%= ctx.makeRelativeTime(ctx.post.creationTime) %>
         </section>
 
-        <section class='safety'>
+        <% if (ctx.enableSafety) { %>
-            <i class='fa fa-circle safety-<%- ctx.post.safety %>'></i><!--
+            <section class='safety'>
-            --><%- ctx.post.safety[0].toUpperCase() + ctx.post.safety.slice(1) %>
+                <i class='fa fa-circle safety-<%- ctx.post.safety %>'></i><!--
-        </section>
+                --><%- ctx.post.safety[0].toUpperCase() + ctx.post.safety.slice(1) %>
+            </section>
+        <% } %>
 
         <section class='zoom'>
             <a href class='fit-original'>Original zoom</a> &middot;
@@ -32,10 +45,20 @@
             <a href class='fit-both'>both</a>
         </section>
 
+        <% if (ctx.post.source) { %>
+            <section class='source'>
+                Source: <% for (let i = 0; i < ctx.post.sourceSplit.length; i++) { %>
+                    <% if (i != 0) { %>&middot;<% } %>
+                    <a href='<%- ctx.post.sourceSplit[i] %>' title='<%- ctx.post.sourceSplit[i] %>'><%- ctx.extractRootDomain(ctx.post.sourceSplit[i]) %></a>
+                <% } %>
+            </section>
+        <% } %>
+
         <section class='search'>
             Search on
-            <a href='http://iqdb.org/?url=<%- encodeURIComponent(ctx.post.contentUrl) %>'>IQDB</a> &middot;
+            <a href='http://iqdb.org/?url=<%- encodeURIComponent(ctx.post.fullContentUrl) %>'>IQDB</a> &middot;
-            <a href='https://www.google.com/searchbyimage?&image_url=<%- encodeURIComponent(ctx.post.contentUrl) %>'>Google Images</a>
+            <a href='https://danbooru.donmai.us/posts?tags=md5:<%- ctx.post.checksumMD5 %>'>Danbooru</a> &middot;
+            <a href='https://lens.google.com/uploadbyurl?url=<%- encodeURIComponent(ctx.post.fullContentUrl) %>'>Google Images</a>
         </section>
 
         <section class='social'>
@@ -67,20 +90,20 @@
                 --><% for (let tag of ctx.post.tags) { %><!--
                     --><li><!--
                         --><% if (ctx.canViewTags) { %><!--
-                        --><a href='/tag/<%- encodeURIComponent(tag) %>' class='<%= ctx.makeCssName(ctx.getTagCategory(tag), 'tag') %>'><!--
+                        --><a href='<%- ctx.formatClientLink('tag', tag.names[0]) %>' class='<%= ctx.makeCssName(tag.category, 'tag') %>'><!--
                             --><i class='fa fa-tag'></i><!--
                         --><% } %><!--
                         --><% if (ctx.canViewTags) { %><!--
                             --></a><!--
                         --><% } %><!--
                         --><% if (ctx.canListPosts) { %><!--
-                            --><a href='/posts/query=<%- encodeURIComponent(tag) %>' class='<%= ctx.makeCssName(ctx.getTagCategory(tag), 'tag') %>'><!--
+                            --><a href='<%- ctx.formatClientLink('posts', {query: ctx.escapeTagName(tag.names[0])}) %>' class='<%= ctx.makeCssName(tag.category, 'tag') %>'><!--
                         --><% } %><!--
-                            --><%- tag %>&#32;<!--
+                            --><%- ctx.getPrettyName(tag.names[0]) %><!--
                         --><% if (ctx.canListPosts) { %><!--
                             --></a><!--
-                        --><% } %><!--
+                        --><% } %>&#32;<!--
-                        --><span class='tag-usages' data-pseudo-content='<%- ctx.getTagUsages(tag) %>'></span><!--
+                        --><span class='tag-usages' data-pseudo-content='<%- tag.postCount %>'></span><!--
                     --></li><!--
                 --><% } %><!--
             --></ul>

client/html/post_upload.tpl

@@ -7,12 +7,28 @@
 
             <span class='skip-duplicates'>
                 <%= ctx.makeCheckbox({
-                    text: 'Skip duplicates',
+                    text: 'Skip duplicate',
                     name: 'skip-duplicates',
                     checked: false,
                 }) %>
             </span>
 
+            <span class='always-upload-similar'>
+                <%= ctx.makeCheckbox({
+                    text: 'Force upload similar',
+                    name: 'always-upload-similar',
+                    checked: false,
+                }) %>
+            </span>
+
+            <span class='pause-remain-on-error'>
+                <%= ctx.makeCheckbox({
+                    text: 'Pause on error',
+                    name: 'pause-remain-on-error',
+                    checked: true,
+                }) %>
+            </span>
+
             <input type='button' value='Cancel' class='cancel'/>
         </div>
 

client/html/post_upload_row.tpl

@@ -1,10 +1,4 @@
-<li class='uploadable'>
+<li class='uploadable-container'>
-    <div class='controls'>
-        <a href class='move-up'><i class='fa fa-chevron-up'></i></a>
-        <a href class='move-down'><i class='fa fa-chevron-down'></i></a>
-        <a href class='remove'><i class='fa fa-remove'></i></a>
-    </div>
-
     <div class='thumbnail-wrapper'>
         <% if (['image'].includes(ctx.uploadable.type)) { %>
 
@@ -29,28 +23,74 @@
         <% } %>
     </div>
 
-    <div class='file'>
+    <div class='uploadable'>
-        <strong><%= ctx.uploadable.name %></strong>
+        <header>
-    </div>
+            <nav>
+                <ul>
+                    <li><a href class='move-up'><i class='fa fa-chevron-up'></i></a></li>
+                    <li><a href class='move-down'><i class='fa fa-chevron-down'></i></a></li>
+                </ul>
+            </nav>
+            <nav>
+                <ul>
+                    <li><a href class='remove'><i class='fa fa-remove'></i></a></li>
+                </ul>
+            </nav>
 
-    <div class='safety'>
+            <span class='filename'><%= ctx.uploadable.name %></span>
-        <% for (let safety of ['safe', 'sketchy', 'unsafe']) { %>
+        </header>
-            <%= ctx.makeRadio({
-                name: 'safety-' + ctx.uploadable.key,
-                value: safety,
-                text: safety[0].toUpperCase() + safety.substr(1),
-                selectedValue: ctx.uploadable.safety,
-            }) %>
-        <% } %>
-    </div>
 
-    <% if (ctx.canUploadAnonymously) { %>
+        <div class='body'>
-        <div class='anonymous'>
+            <% if (ctx.enableSafety) { %>
-            <%= ctx.makeCheckbox({
+                <div class='safety'>
-                text: 'Upload anonymously',
+                    <% for (let safety of ['safe', 'sketchy', 'unsafe']) { %>
-                name: 'anonymous',
+                        <%= ctx.makeRadio({
-                checked: ctx.uploadable.anonymous,
+                            name: 'safety-' + ctx.uploadable.key,
-            }) %>
+                            value: safety,
+                            text: safety[0].toUpperCase() + safety.substr(1),
+                            selectedValue: ctx.uploadable.safety,
+                        }) %>
+                    <% } %>
+                </div>
+            <% } %>
+
+            <div class='options'>
+                <% if (ctx.canUploadAnonymously) { %>
+                    <div class='anonymous'>
+                        <%= ctx.makeCheckbox({
+                            text: 'Upload anonymously',
+                            name: 'anonymous',
+                            checked: ctx.uploadable.anonymous,
+                            readonly: ctx.uploadable.forceAnonymous,
+                        }) %>
+                    </div>
+                <% } %>
+            </div>
+
+            <div class='messages'></div>
+
+            <% if (ctx.uploadable.lookalikes.length) { %>
+                <ul class='lookalikes'>
+                    <% for (let lookalike of ctx.uploadable.lookalikes) { %>
+                        <li>
+                            <a class='thumbnail-wrapper' title='@<%- lookalike.post.id %>'
+                                href='<%= ctx.canViewPosts ? ctx.getPostUrl(lookalike.post.id) : "" %>'>
+                                <%= ctx.makeThumbnail(lookalike.post.thumbnailUrl) %>
+                            </a>
+                            <div class='description'>
+                                Similar post: <%= ctx.makePostLink(lookalike.post.id, true) %>
+                                <br/>
+                                <%- Math.round((1-lookalike.distance) * 100) %>% match
+                            </div>
+                            <div class='controls'>
+                                <%= ctx.makeCheckbox({text: 'Copy tags', name: 'copy-tags'}) %>
+                                <br/>
+                                <%= ctx.makeCheckbox({text: 'Add relation', name: 'add-relation'}) %>
+                            </div>
+                        </li>
+                    <% } %>
+                </ul>
+            <% } %>
         </div>
-    <% } %>
+    </div>
 </li>

client/html/posts_header.tpl

@@ -1,24 +1,37 @@
 <div class='post-list-header'><%
-    %><form class='horizontal'><%
+    %><form class='horizontal search'><%
         %><%= ctx.makeTextInput({text: 'Search query', id: 'search-text', name: 'search-text', value: ctx.parameters.query}) %><%
         %><wbr/><%
         %><input class='mousetrap' type='submit' value='Search'/><%
         %><wbr/><%
-        %><input data-safety=safe type='button' class='mousetrap safety safety-safe <%- ctx.settings.listPosts.safe ? '' : 'disabled' %>'/><%
+        %><% if (ctx.enableSafety) { %><%
-        %><input data-safety=sketchy type='button' class='mousetrap safety safety-sketchy <%- ctx.settings.listPosts.sketchy ? '' : 'disabled' %>'/><%
+            %><input data-safety=safe type='button' class='mousetrap safety safety-safe <%- ctx.settings.listPosts.safe ? '' : 'disabled' %>'/><%
-        %><input data-safety=unsafe type='button' class='mousetrap safety safety-unsafe <%- ctx.settings.listPosts.unsafe ? '' : 'disabled' %>'/><%
+            %><input data-safety=sketchy type='button' class='mousetrap safety safety-sketchy <%- ctx.settings.listPosts.sketchy ? '' : 'disabled' %>'/><%
-        %><wbr/><%
+            %><input data-safety=unsafe type='button' class='mousetrap safety safety-unsafe <%- ctx.settings.listPosts.unsafe ? '' : 'disabled' %>'/><%
-        %><a class='mousetrap button append' href='/help/search/posts'>Syntax help</a><%
-        %><% if (ctx.canMassTag) { %><%
-            %><wbr/><%
-            %><span class='masstag'><%
-                %><span class='append masstag-hint'>Tagging with:</span><%
-                %><a href class='mousetrap button append open-masstag'>Mass tag</a><%
-                %><wbr/><%
-                %><%= ctx.makeTextInput({name: 'masstag', value: ctx.parameters.tag}) %><%
-                %><input class='mousetrap start-tagging' type='submit' value='Start tagging'/><%
-                %><a href class='mousetrap button append stop-tagging'>Stop tagging</a><%
-            %></span><%
         %><% } %><%
+        %><wbr/><%
+        %><a class='mousetrap button append' href='<%- ctx.formatClientLink('help', 'search', 'posts') %>'>Syntax help</a><%
     %></form><%
+    %><% if (ctx.canBulkEditTags) { %><%
+        %><form class='horizontal bulk-edit bulk-edit-tags'><%
+            %><span class='append hint'>Tagging with:</span><%
+            %><a href class='mousetrap button append open'>Mass tag</a><%
+            %><%= ctx.makeTextInput({name: 'tag', value: ctx.parameters.tag}) %><%
+            %><input class='mousetrap start' type='submit' value='Start tagging'/><%
+            %><a href class='mousetrap button append close'>Stop tagging</a><%
+        %></form><%
+    %><% } %><%
+    %><% if (ctx.enableSafety && ctx.canBulkEditSafety) { %><%
+        %><form class='horizontal bulk-edit bulk-edit-safety'><%
+            %><a href class='mousetrap button append open'>Mass edit safety</a><%
+            %><a href class='mousetrap button append close'>Stop editing safety</a><%
+        %></form><%
+    %><% } %><%
+    %><% if (ctx.canBulkDelete) { %><%
+        %><form class='horizontal bulk-edit bulk-edit-delete'><%
+            %><a href class='mousetrap button append open'>Mass delete</a><%
+            %><input class='mousetrap start' type='submit' value='Delete selected posts'/><%
+            %><a href class='mousetrap button append close'>Stop deleting</a><%
+        %></form><%
+    %><% } %><%
 %></div>

client/html/posts_page.tpl

@@ -1,14 +1,18 @@
-<div class='post-list'>
+<% if (ctx.postFlow) { %><div class='post-list post-flow'><% } else { %><div class='post-list'><% } %>
-    <% if (ctx.results.length) { %>
+    <% if (ctx.response.results.length) { %>
         <ul>
-            <% for (let post of ctx.results) { %>
+            <% for (let post of ctx.response.results) { %>
-                <li>
+                <li data-post-id='<%= post.id %>'>
                     <a class='thumbnail-wrapper <%= post.tags.length > 0 ? "tags" : "no-tags" %>'
-                            title='@<%- post.id %> (<%- post.type %>)&#10;&#10;Tags: <%- post.tags.map(tag => '#' + tag).join(' ') || 'none' %>'
+                            title='@<%- post.id %> (<%- post.type %>)&#10;&#10;Tags: <%- post.tags.map(tag => '#' + tag.names[0]).join(' ') || 'none' %>'
-                            href='<%= ctx.canViewPosts ? ctx.getPostUrl(post.id, ctx.parameters) : "" %>'>
+                            href='<%= ctx.canViewPosts ? ctx.getPostUrl(post.id, ctx.parameters) : '' %>'>
                         <%= ctx.makeThumbnail(post.thumbnailUrl) %>
                         <span class='type' data-type='<%- post.type %>'>
-                            <%- post.type %>
+                            <% if (post.type == 'video' || post.type == 'flash' || post.type == 'animation') { %>
+                                <span class='icon'><i class='fa fa-film'></i></span>
+                            <% } else { %>
+                                <%- post.type %>
+                            <% } %>
                         </span>
                         <% if (post.score || post.favoriteCount || post.commentCount) { %>
                             <span class='stats'>
@@ -33,10 +37,24 @@
                             </span>
                         <% } %>
                     </a>
-                    <% if (ctx.canMassTag && ctx.parameters && ctx.parameters.tag) { %>
+                    <span class='edit-overlay'>
-                        <a href data-post-id='<%= post.id %>' class='masstag'>
+                        <% if (ctx.canBulkEditTags && ctx.parameters && ctx.parameters.tag) { %>
-                        </a>
+                            <a href class='tag-flipper'>
-                    <% } %>
+                            </a>
+                        <% } %>
+                        <% if (ctx.canBulkEditSafety && ctx.parameters && ctx.parameters.safety) { %>
+                            <span class='safety-flipper'>
+                                <% for (let safety of ['safe', 'sketchy', 'unsafe']) { %>
+                                    <a href data-safety='<%- safety %>' class='safety-<%- safety %><%- post.safety === safety ? ' active' : '' %>'>
+                                    </a>
+                                <% } %>
+                            </span>
+                        <% } %>
+                        <% if (ctx.canBulkDelete && ctx.parameters && ctx.parameters.delete) { %>
+                            <a href class='delete-flipper'>
+                            </a>
+                        <% } %>
+                    </span>
                 </li>
             <% } %>
             <%= ctx.makeFlexboxAlign() %>

client/html/settings.tpl

@@ -5,11 +5,10 @@
         <ul class='input'>
             <li>
                 <%= ctx.makeCheckbox({
-                    text: 'Enable keyboard shortcuts',
+                    text: "Enable keyboard shortcuts <a class='append icon' href='" + ctx.formatClientLink('help', 'keyboard') + "'><i class='fa fa-question-circle-o'></i></a>",
                     name: 'keyboard-shortcuts',
                     checked: ctx.browsingSettings.keyboardShortcuts,
                 }) %>
-                <a class='append icon' href='/help/keyboard'><i class='fa fa-question-circle-o'></i></a>
             </li>
 
             <li>
@@ -23,6 +22,15 @@
                 }) %>
             </li>
 
+            <li>
+                <%= ctx.makeCheckbox({
+                    text: 'Use dark theme',
+                    name: 'dark-theme',
+                    checked: ctx.browsingSettings.darkTheme,
+                }) %>
+                <p class='hint'>Changing this setting will require you to refresh the page for it to apply.</p>
+            </li>
+
             <li>
                 <%= ctx.makeCheckbox({
                     text: 'Upscale small posts',
@@ -39,6 +47,15 @@
                 <p class='hint'>Rather than using a paged navigation, smoothly scrolls through the content.</p>
             </li>
 
+            <li>
+                <%= ctx.makeCheckbox({
+                    text: 'Use post flow',
+                    name: 'post-flow',
+                    checked: ctx.browsingSettings.postFlow,
+                }) %>
+                <p class='hint'>Use a content-aware flow for thumbnails on the post search page.</p>
+            </li>
+
             <li>
                 <%= ctx.makeCheckbox({
                     text: 'Enable transparency grid',
@@ -56,6 +73,23 @@
                 }) %>
                 <p class='hint'>Shows a popup with suggested tags in edit forms.</p>
             </li>
+
+            <li>
+                <%= ctx.makeCheckbox({
+                    text: 'Automatically play video posts',
+                    name: 'autoplay-videos',
+                    checked: ctx.browsingSettings.autoplayVideos,
+                }) %>
+            </li>
+
+            <li>
+                <%= ctx.makeCheckbox({
+                    text: 'Display underscores as spaces',
+                    name: 'underscores-as-spaces',
+                    checked: ctx.browsingSettings.tagUnderscoresAsSpaces,
+                }) %>
+                <p class='hint'>Display all underscores as if they were spaces. This is only a visual change, which means that you'll still have to use underscores when searching or editing tags.</p>
+            </li>
         </ul>
 
         <div class='messages'></div>

client/html/snapshots_page.tpl

@@ -1,7 +1,7 @@
 <div class='snapshot-list'>
-    <% if (ctx.results.length) { %>
+    <% if (ctx.response.results.length) { %>
         <ul>
-            <% for (let item of ctx.results) { %>
+            <% for (let item of ctx.response.results) { %>
                 <li>
                     <div class='header operation-<%= item.operation %>'>
                         <span class='time'>

client/html/tag.tpl

@@ -1,16 +1,16 @@
 <div class='content-wrapper' id='tag'>
-    <h1><%- ctx.tag.names[0] %></h1>
+    <h1><%- ctx.getPrettyName(ctx.tag.names[0]) %></h1>
     <nav class='buttons'><!--
         --><ul><!--
-            --><li data-name='summary'><a href='/tag/<%- encodeURIComponent(ctx.tag.names[0]) %>'>Summary</a></li><!--
+            --><li data-name='summary'><a href='<%- ctx.formatClientLink('tag', ctx.tag.names[0]) %>'>Summary</a></li><!--
             --><% if (ctx.canEditAnything) { %><!--
-                --><li data-name='edit'><a href='/tag/<%- encodeURIComponent(ctx.tag.names[0]) %>/edit'>Edit</a></li><!--
+                --><li data-name='edit'><a href='<%- ctx.formatClientLink('tag', ctx.tag.names[0], 'edit') %>'>Edit</a></li><!--
             --><% } %><!--
             --><% if (ctx.canMerge) { %><!--
-                --><li data-name='merge'><a href='/tag/<%- encodeURIComponent(ctx.tag.names[0]) %>/merge'>Merge with&hellip;</a></li><!--
+                --><li data-name='merge'><a href='<%- ctx.formatClientLink('tag', ctx.tag.names[0], 'merge') %>'>Merge with&hellip;</a></li><!--
             --><% } %><!--
             --><% if (ctx.canDelete) { %><!--
-                --><li data-name='delete'><a href='/tag/<%- encodeURIComponent(ctx.tag.names[0]) %>/delete'>Delete</a></li><!--
+                --><li data-name='delete'><a href='<%- ctx.formatClientLink('tag', ctx.tag.names[0], 'delete') %>'>Delete</a></li><!--
             --><% } %><!--
         --></ul><!--
     --></nav>

client/html/tag_categories.tpl

@@ -1,17 +1,20 @@
 <div class='content-wrapper tag-categories'>
     <form>
         <h1>Tag categories</h1>
-        <table>
+        <div class="table-wrap">
-            <thead>
+            <table>
-                <tr>
+                <thead>
-                    <th class='name'>Category name</th>
+                    <tr>
-                    <th class='color'>CSS color</th>
+                        <th class='name'>Category name</th>
-                    <th class='usages'>Usages</th>
+                        <th class='color'>CSS color</th>
-                </tr>
+                        <th class='order'>Order</th>
-            </thead>
+                        <th class='usages'>Usages</th>
-            <tbody>
+                    </tr>
-            </tbody>
+                </thead>
-        </table>
+                <tbody>
+                </tbody>
+            </table>
+        </div>
 
         <% if (ctx.canCreate) { %>
             <p><a href class='add'>Add new category</a></p>
@@ -19,7 +22,7 @@
 
         <div class='messages'></div>
 
-        <% if (ctx.canCreate || ctx.canEditName || ctx.canEditColor || ctx.canDelete) { %>
+        <% if (ctx.canCreate || ctx.canEditName || ctx.canEditColor || ctx.canEditOrder || ctx.canDelete) { %>
             <div class='buttons'>
                 <input type='submit' class='save' value='Save changes'>
             </div>

client/html/tag_category_row.tpl

@@ -17,9 +17,16 @@
             <%- ctx.tagCategory.color %>
         <% } %>
     </td>
+    <td class='order'>
+        <% if (ctx.canEditOrder) { %>
+            <%= ctx.makeNumericInput({value: ctx.tagCategory.order}) %>
+        <% } else { %>
+            <%- ctx.tagCategory.order %>
+        <% } %>
+    </td>
     <td class='usages'>
         <% if (ctx.tagCategory.name) { %>
-            <a href='/tags/query=category:<%- encodeURIComponent(ctx.tagCategory.name) %>'>
+            <a href='<%- ctx.formatClientLink('tags', {query: 'category:' + ctx.tagCategory.name}) %>'>
                 <%- ctx.tagCategory.tagCount %>
             </a>
         <% } else { %>

client/html/tag_delete.tpl

@@ -1,8 +1,8 @@
 <div class='tag-delete'>
     <form>
-        <p>This tag has <a href='/posts/query=<%- encodeURIComponent(ctx.tag.names[0]) %>'><%- ctx.tag.postCount %> usage(s)</a>.</p>
+        <p>This tag has <a href='<%- ctx.formatClientLink('posts', {query: ctx.escapeTagName(ctx.tag.names[0])}) %>'><%- ctx.tag.postCount %> usage(s)</a>.</p>
 
-        <ul>
+        <ul class='input'>
             <li>
                 <%= ctx.makeCheckbox({
                     name: 'confirm-deletion',

client/html/tag_edit.tpl

@@ -1,6 +1,6 @@
 <div class='content-wrapper tag-edit'>
     <form>
-        <ul>
+        <ul class='input'>
             <li class='names'>
                 <% if (ctx.canEditNames) { %>
                     <%= ctx.makeTextInput({
@@ -22,18 +22,12 @@
             </li>
             <li class='implications'>
                 <% if (ctx.canEditImplications) { %>
-                    <%= ctx.makeTextInput({
+                    <%= ctx.makeTextInput({text: 'Implications'}) %>
-                        text: 'Implications',
-                        value: ctx.tag.implications.join(' '),
-                    }) %>
                 <% } %>
             </li>
             <li class='suggestions'>
                 <% if (ctx.canEditSuggestions) { %>
-                    <%= ctx.makeTextInput({
+                    <%= ctx.makeTextInput({text: 'Suggestions'}) %>
-                        text: 'Suggestions',
-                        value: ctx.tag.suggestions.join(' '),
-                    }) %>
                 <% } %>
             </li>
             <li class='description'>

client/html/tag_merge.tpl

@@ -1,13 +1,15 @@
 <div class='tag-merge'>
     <form>
-        <ul>
+        <ul class='input'>
             <li class='target'>
-                <%= ctx.makeTextInput({required: true, text: 'Target tag', pattern: ctx.tagNamePattern}) %>
+                <%= ctx.makeTextInput({name: 'target-tag', required: true, text: 'Target tag', pattern: ctx.tagNamePattern}) %>
             </li>
 
             <li>
                 <p>Usages in posts, suggestions and implications will be
-                merged. Category and aliases need to be handled manually.</p>
+                merged. Category needs to be handled manually.</p>
+
+                <%= ctx.makeCheckbox({name: 'alias', text: 'Make this tag an alias of the target tag.'}) %>
 
                 <%= ctx.makeCheckbox({required: true, text: 'I confirm that I want to merge this tag.'}) %>
             </li>

client/html/tag_summary.tpl

@@ -9,7 +9,7 @@
         Aliases:<br/>
         <ul><!--
             --><% for (let name of ctx.tag.names.slice(1)) { %><!--
-                --><li><%= ctx.makeTagLink(name) %></li><!--
+                --><li><%= ctx.makeTagLink(name, false, false, ctx.tag) %></li><!--
             --><% } %><!--
         --></ul>
         </section>
@@ -18,7 +18,7 @@
         Implications:<br/>
         <ul><!--
             --><% for (let tag of ctx.tag.implications) { %><!--
-                --><li><%= ctx.makeTagLink(tag) %></li><!--
+                --><li><%= ctx.makeTagLink(tag.names[0], false, false, tag) %></li><!--
             --><% } %><!--
         --></ul>
         </section>
@@ -27,7 +27,7 @@
         Suggestions:<br/>
         <ul><!--
             --><% for (let tag of ctx.tag.suggestions) { %><!--
-                --><li><%= ctx.makeTagLink(tag) %></li><!--
+                --><li><%= ctx.makeTagLink(tag.names[0], false, false, tag) %></li><!--
             --><% } %><!--
         --></ul>
         </section>
@@ -36,6 +36,6 @@
     <section class='description'>
         <hr/>
         <%= ctx.makeMarkdown(ctx.tag.description || 'This tag has no description yet.') %>
-        <p>This tag has <a href='/posts/query=<%- encodeURIComponent(ctx.tag.names[0]) %>'><%- ctx.tag.postCount %> usage(s)</a>.</p>
+        <p>This tag has <a href='<%- ctx.formatClientLink('posts', {query: ctx.escapeTagName(ctx.tag.names[0])}) %>'><%- ctx.tag.postCount %> usage(s)</a>.</p>
     </section>
 </div>

client/html/tags_header.tpl

@@ -1,17 +1,16 @@
 <div class='tag-list-header'>
     <form class='horizontal'>
-        <div class='input'>
+        <ul class='input'>
-            <ul>
+            <li>
-                <li>
+                <%= ctx.makeTextInput({text: 'Search query', id: 'search-text', name: 'search-text', value: ctx.parameters.query}) %>
-                    <%= ctx.makeTextInput({text: 'Search query', id: 'search-text', name: 'search-text', value: ctx.parameters.query}) %>
+            </li>
-                </li>
+        </ul>
-            </ul>
+
-        </div>
         <div class='buttons'>
             <input type='submit' value='Search'/>
-            <a class='button append' href='/help/search/tags'>Syntax help</a>
+            <a class='button append' href='<%- ctx.formatClientLink('help', 'search', 'tags') %>'>Syntax help</a>
             <% if (ctx.canEditTagCategories) { %>
-                <a class='append' href='/tag-categories'>Tag categories</a>
+                <a class='append' href='<%- ctx.formatClientLink('tag-categories') %>'>Tag categories</a>
             <% } %>
         </div>
     </form>

client/html/tags_page.tpl

@@ -1,58 +1,58 @@
-<div class='tag-list'>
+<div class='tag-list table-wrap'>
-    <% if (ctx.results.length) { %>
+    <% if (ctx.response.results.length) { %>
         <table>
             <thead>
                 <th class='names'>
-                    <% if (ctx.query == 'sort:name' || !ctx.query) { %>
+                    <% if (ctx.parameters.query == 'sort:name' || !ctx.parameters.query) { %>
-                        <a href='/tags/query=-sort:name'>Tag name(s)</a>
+                        <a href='<%- ctx.formatClientLink('tags', {query: '-sort:name'}) %>'>Tag name(s)</a>
                     <% } else { %>
-                        <a href='/tags/query=sort:name'>Tag name(s)</a>
+                        <a href='<%- ctx.formatClientLink('tags', {query: 'sort:name'}) %>'>Tag name(s)</a>
                     <% } %>
                 </th>
                 <th class='implications'>
-                    <% if (ctx.query == 'sort:implication-count') { %>
+                    <% if (ctx.parameters.query == 'sort:implication-count') { %>
-                        <a href='/tags/query=-sort:implication-count'>Implications</a>
+                        <a href='<%- ctx.formatClientLink('tags', {query: '-sort:implication-count'}) %>'>Implications</a>
                     <% } else { %>
-                        <a href='/tags/query=sort:implication-count'>Implications</a>
+                        <a href='<%- ctx.formatClientLink('tags', {query: 'sort:implication-count'}) %>'>Implications</a>
                     <% } %>
                 </th>
                 <th class='suggestions'>
-                    <% if (ctx.query == 'sort:suggestion-count') { %>
+                    <% if (ctx.parameters.query == 'sort:suggestion-count') { %>
-                        <a href='/tags/query=-sort:suggestion-count'>Suggestions</a>
+                        <a href='<%- ctx.formatClientLink('tags', {query: '-sort:suggestion-count'}) %>'>Suggestions</a>
                     <% } else { %>
-                        <a href='/tags/query=sort:suggestion-count'>Suggestions</a>
+                        <a href='<%- ctx.formatClientLink('tags', {query: 'sort:suggestion-count'}) %>'>Suggestions</a>
                     <% } %>
                 </th>
                 <th class='usages'>
-                    <% if (ctx.query == 'sort:usages') { %>
+                    <% if (ctx.parameters.query == 'sort:usages') { %>
-                        <a href='/tags/query=-sort:usages'>Usages</a>
+                        <a href='<%- ctx.formatClientLink('tags', {query: '-sort:usages'}) %>'>Usages</a>
                     <% } else { %>
-                        <a href='/tags/query=sort:usages'>Usages</a>
+                        <a href='<%- ctx.formatClientLink('tags', {query: 'sort:usages'}) %>'>Usages</a>
                     <% } %>
                 </th>
                 <th class='creation-time'>
-                    <% if (ctx.query == 'sort:creation-time') { %>
+                    <% if (ctx.parameters.query == 'sort:creation-time') { %>
-                        <a href='/tags/query=-sort:creation-time'>Created on</a>
+                        <a href='<%- ctx.formatClientLink('tags', {query: '-sort:creation-time'}) %>'>Created on</a>
                     <% } else { %>
-                        <a href='/tags/query=sort:creation-time'>Created on</a>
+                        <a href='<%- ctx.formatClientLink('tags', {query: 'sort:creation-time'}) %>'>Created on</a>
                     <% } %>
                 </th>
             </thead>
             <tbody>
-                <% for (let tag of ctx.results) { %>
+                <% for (let tag of ctx.response.results) { %>
                     <tr>
                         <td class='names'>
                             <ul>
                                 <% for (let name of tag.names) { %>
-                                    <li><%= ctx.makeTagLink(name) %></li>
+                                    <li><%= ctx.makeTagLink(name, false, false, tag) %></li>
                                 <% } %>
                             </ul>
                         </td>
                         <td class='implications'>
                             <% if (tag.implications.length) { %>
                                 <ul>
-                                    <% for (let name of tag.implications) { %>
+                                    <% for (let relation of tag.implications) { %>
-                                        <li><%= ctx.makeTagLink(name) %></li>
+                                        <li><%= ctx.makeTagLink(relation.names[0], false, false, relation) %></li>
                                     <% } %>
                                 </ul>
                             <% } else { %>
@@ -62,8 +62,8 @@
                         <td class='suggestions'>
                             <% if (tag.suggestions.length) { %>
                                 <ul>
-                                    <% for (let name of tag.suggestions) { %>
+                                    <% for (let relation of tag.suggestions) { %>
-                                        <li><%= ctx.makeTagLink(name) %></li>
+                                        <li><%= ctx.makeTagLink(relation.names[0], false, false, relation) %></li>
                                     <% } %>
                                 </ul>
                             <% } else { %>

client/html/top_navigation.tpl

@@ -1,5 +1,9 @@
 <nav id='top-navigation' class='buttons'><!--
     --><ul><!--
+        --><button id="mobile-navigation-toggle"><!--
+            --><span class="site-name"><%- ctx.name %></span><!--
+            --><span class="toggle-icon"><i class="fa fa-bars"></i></span><!--
+        --></button><!--
         --><% for (let item of ctx.items) { %><!--
             --><% if (item.available) { %><!--
                 --><li data-name='<%- item.key %>'><!--

client/html/user.tpl

@@ -2,12 +2,15 @@
     <h1><%- ctx.user.name %></h1>
     <nav class='buttons'><!--
         --><ul><!--
-            --><li data-name='summary'><a href='/user/<%- encodeURIComponent(ctx.user.name) %>'>Summary</a></li><!--
+            --><li data-name='summary'><a href='<%- ctx.formatClientLink('user', ctx.user.name) %>'>Summary</a></li><!--
             --><% if (ctx.canEditAnything) { %><!--
-                --><li data-name='edit'><a href='/user/<%- encodeURIComponent(ctx.user.name) %>/edit'>Account settings</a></li><!--
+                --><li data-name='edit'><a href='<%- ctx.formatClientLink('user', ctx.user.name, 'edit') %>'>Settings</a></li><!--
+            --><% } %><!--
+            --><% if (ctx.canListTokens) { %><!--
+                --><li data-name='list-tokens'><a href='<%- ctx.formatClientLink('user', ctx.user.name, 'list-tokens') %>'>Login tokens</a></li><!--
             --><% } %><!--
             --><% if (ctx.canDelete) { %><!--
-                --><li data-name='delete'><a href='/user/<%- encodeURIComponent(ctx.user.name) %>/delete'>Account deletion</a></li><!--
+                --><li data-name='delete'><a href='<%- ctx.formatClientLink('user', ctx.user.name, 'delete') %>'>Delete</a></li><!--
             --><% } %><!--
         --></ul><!--
     --></nav>

client/html/user_delete.tpl

@@ -1,16 +1,15 @@
 <div id='user-delete'>
     <form>
-        <div class='input'>
+        <ul class='input'>
-            <ul>
+            <li>
-                <li>
+                <%= ctx.makeCheckbox({
-                    <%= ctx.makeCheckbox({
+                    name: 'confirm-deletion',
-                        name: 'confirm-deletion',
+                    text: 'I confirm that I want to delete this account.',
-                        text: 'I confirm that I want to delete this account.',
+                    required: true,
-                        required: true,
+                }) %>
-                    }) %>
+            </li>
-                </li>
+        </ul>
-            </ul>
+
-        </div>
         <div class='messages'></div>
         <div class='buttons'>
             <input type='submit' value='Delete account'/>

client/html/user_registration.tpl

@@ -4,44 +4,44 @@
         <input class='anticomplete' type='text' name='fakeuser'/>
         <input class='anticomplete' type='password' name='fakepass'/>
 
-        <div class='input'>
+        <ul class='input'>
-            <ul>
+            <li>
-                <li>
+                <%= ctx.makeTextInput({
-                    <%= ctx.makeTextInput({
+                    text: 'User name',
-                        text: 'User name',
+                    name: 'name',
-                        name: 'name',
+                    placeholder: 'letters, digits, _, -',
-                        placeholder: 'letters, digits, _, -',
+                    required: true,
-                        required: true,
+                    pattern: ctx.userNamePattern,
-                        pattern: ctx.userNamePattern,
+                }) %>
-                    }) %>
+            </li>
-                </li>
+            <li>
-                <li>
+                <%= ctx.makePasswordInput({
-                    <%= ctx.makePasswordInput({
+                    text: 'Password',
-                        text: 'Password',
+                    name: 'password',
-                        name: 'password',
+                    placeholder: '5+ characters',
-                        placeholder: '5+ characters',
+                    required: true,
-                        required: true,
+                    pattern: ctx.passwordPattern,
-                        pattern: ctx.passwordPattern,
+                }) %>
-                    }) %>
+            </li>
-                </li>
+            <li>
-                <li>
+                <%= ctx.makeEmailInput({
-                    <%= ctx.makeEmailInput({
+                    text: 'Email',
-                        text: 'Email',
+                    name: 'email',
-                        name: 'email',
+                    placeholder: 'optional',
-                        placeholder: 'optional',
+                }) %>
-                    }) %>
+                <p class='hint'>
-                    <p class='hint'>
+                    Used for password reminder and to show a <a href='http://gravatar.com/'>Gravatar</a>.
-                        Used for password reminder and to show a <a href='http://gravatar.com/'>Gravatar</a>.
+                    Leave blank for random Gravatar.
-                        Leave blank for random Gravatar.
+                </p>
-                    </p>
+            </li>
-                </li>
+        </ul>
-            </ul>
+
-        </div>
         <div class='messages'></div>
         <div class='buttons'>
             <input type='submit' value='Create an account'/>
         </div>
     </form>
+
     <div class='info'>
         <p>Registered users can:</p>
         <ul>
@@ -51,6 +51,6 @@
             <li><i class='fa fa-star-half-o'></i> vote up/down on posts and comments</li>
         </ul>
         <hr/>
-        <p>By creating an account, you are agreeing to the <a href='/help/tos'>Terms of Service</a>.</p>
+        <p>By creating an account, you are agreeing to the <a href='<%- ctx.formatClientLink('help', 'tos') %>'>Terms of Service</a>.</p>
     </div>
 </div>

client/html/user_summary.tpl

@@ -10,9 +10,9 @@
         <nav>
             <p><strong>Quick links</strong></p>
             <ul>
-                <li><a href='/posts/query=submit:<%- encodeURIComponent(ctx.user.name) %>'><%- ctx.user.uploadedPostCount %> uploads</a></li>
+                <li><a href='<%- ctx.formatClientLink('posts', {query: 'submit:' + ctx.user.name}) %>'><%- ctx.user.uploadedPostCount %> uploads</a></li>
-                <li><a href='/posts/query=fav:<%- encodeURIComponent(ctx.user.name) %>'><%- ctx.user.favoritePostCount %> favorites</a></li>
+                <li><a href='<%- ctx.formatClientLink('posts', {query: 'fav:' + ctx.user.name}) %>'><%- ctx.user.favoritePostCount %> favorites</a></li>
-                <li><a href='/posts/query=comment:<%- encodeURIComponent(ctx.user.name) %>'><%- ctx.user.commentCount %> comments</a></li>
+                <li><a href='<%- ctx.formatClientLink('posts', {query: 'comment:' + ctx.user.name}) %>'><%- ctx.user.commentCount %> comments</a></li>
             </ul>
         </nav>
 
@@ -20,8 +20,8 @@
             <nav>
                 <p><strong>Only visible to you</strong></p>
                 <ul>
-                    <li><a href='/posts/query=special:liked'><%- ctx.user.likedPostCount %> liked posts</a></li>
+                    <li><a href='<%- ctx.formatClientLink('posts', {query: 'special:liked'}) %>'><%- ctx.user.likedPostCount %> liked posts</a></li>
-                    <li><a href='/posts/query=special:disliked'><%- ctx.user.dislikedPostCount %> disliked posts</a></li>
+                    <li><a href='<%- ctx.formatClientLink('posts', {query: 'special:disliked'}) %>'><%- ctx.user.dislikedPostCount %> disliked posts</a></li>
                 </ul>
             </nav>
         <% } %>

client/html/user_tokens.tpl

@@ -0,0 +1,74 @@
+<div id='user-tokens'>
+    <div class='messages'></div>
+    <% if (ctx.tokens.length > 0) { %>
+    <div class='token-flex-container'>
+        <% _.each(ctx.tokens, function(token, index) { %>
+        <div class='token-flex-row'>
+            <div class='token-flex-column token-flex-labels'>
+                <div class='token-flex-row'>Token:</div>
+                <div class='token-flex-row'>Note:</div>
+                <div class='token-flex-row'>Created:</div>
+                <div class='token-flex-row'>Expires:</div>
+                <div class='token-flex-row no-wrap'>Last used:</div>
+            </div>
+            <div class='token-flex-column full-width'>
+                <div class='token-flex-row'><%= token.token %></div>
+                <div class='token-flex-row'>
+                    <% if (token.note !== null) { %>
+                        <%= token.note %>
+                    <% } else { %>
+                        No note
+                    <% } %>
+                    <a class='token-change-note' data-token-id='<%= index %>' href='#'>(change)</a>
+                </div>
+                <div class='token-flex-row'><%= ctx.makeRelativeTime(token.creationTime) %></div>
+                <div class='token-flex-row'>
+                    <% if (token.expirationTime) { %>
+                        <%= ctx.makeRelativeTime(token.expirationTime) %>
+                    <% } else { %>
+                        No expiration
+                    <% } %>
+                </div>
+                <div class='token-flex-row'><%= ctx.makeRelativeTime(token.lastUsageTime) %></div>
+            </div>
+        </div>
+        <div class='token-flex-row'>
+            <div class='token-flex-column full-width'>
+                <div class='token-flex-row'>
+                    <form class='token' data-token-id='<%= index %>'>
+                        <% if (token.isCurrentAuthToken) { %>
+                            <input type='submit' value='Delete and logout'
+                                title='This token is used to authenticate this client, deleting it will force a logout.'/>
+                        <% } else { %>
+                            <input type='submit' value='Delete'/>
+                        <% } %>
+                    </form>
+                </div>
+            </div>
+        </div>
+        <hr/>
+        <% }); %>
+    </div>
+    <% } else { %>
+        <h2>No Registered Tokens</h2>
+    <% } %>
+    <form id='create-token-form'>
+        <ul class='input'>
+            <li class='note'>
+                <%= ctx.makeTextInput({
+                    text: 'Note',
+                    id: 'note',
+                }) %>
+            </li>
+            <li class='expirationTime'>
+                <%= ctx.makeDateInput({
+                    text: 'Expires',
+                    id: 'expirationTime',
+                }) %>
+            </li>
+        </ul>
+        <div class='buttons'>
+            <input type='submit' value='Create token'/>
+        </div>
+    </form>
+</div>