server/docker: include setuptools in installation

Furthermore, an update to Pillow has improved the floating-point
precision of the image hash algorithm, requiring minor updates to
the respective unit tests.

See https://github.com/python-pillow/Pillow/pull/4320

.gitignore

@@ -1,4 +1,15 @@
+# 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__/

README.md

@@ -8,9 +8,11 @@ scrubbing](http://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 [youtube-dl](https://github.com/ytdl-org/youtube-dl)
 - 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
@@ -24,14 +26,12 @@ scrubbing](http://sjp.pwn.pl/sjp/;2527372). It is pronounced as *shoorubooru*.
 - Browser configurable endless paging
 - Browser configurable backdrop grid for transparent images
 
-## Requirements
+## Installation
 
-- Python
-- Postgres
-- FFmpeg
-- node.js
+It is recommended that you use Docker for deployment.
+[See installation instructions.](doc/INSTALL.md)
 
-[See installation instructions.](https://github.com/rr-/szurubooru/blob/master/INSTALL.md)
+Users who wish to avoid using Docker may find the [old installation instructions](doc/LEGACY_INSTALL.md) helpful.
 
 ## Screenshots
 
@@ -45,4 +45,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/Dockerfile

@@ -0,0 +1,44 @@
+FROM node:9 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 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
+
+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,314 @@
+#!/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 = [
+    'underscore',
+    'superagent',
+    'mousetrap',
+    'js-cookie',
+    'nprogress',
+];
+
+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');
-
-function convertKeysToCamelCase(input) {
-    let result = {};
-    Object.keys(input).map((key, _) => {
-        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) {
-    return fs.writeFileSync(path, content);
+function gzipFile(file) {
+    file = path.normalize(file);
+    execSync('gzip -6 -k ' + file);
 }
 
-function getVersion() {
-    return execSync('git describe --always --dirty --long --tags')
-        .toString()
-        .trim();
+function baseUrl() {
+    return process.env.BASE_URL ? process.env.BASE_URL : '/';
 }
 
-function getConfig() {
-    const yaml = require('js-yaml');
-    const merge = require('merge');
-    const camelcaseKeys = require('camelcase-keys');
+// -------------------------------------------------
 
-    function parseConfigFile(path) {
-        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) {
+function bundleHtml() {
     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) => {
-        let compiledTemplateJs = '\'use strict\'\n';
-        compiledTemplateJs += 'let _ = require(\'underscore\');';
-        compiledTemplateJs += 'let templates = {};';
-        for (const file of files) {
-            const name = path.basename(file, '.tpl').replace(/_/g, '-');
-            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]; });
+    function minifyHtml(html) {
+        return require('html-minifier').minify(html, {
+            removeComments: true,
+            collapseWhitespace: true,
+            conservativeCollapse: true,
+        }).trim();
+    }
 
-            const functionText = underscore.template(
-                templateText, {variable: 'ctx'}).source;
-            compiledTemplateJs += `templates['${name}'] = ${functionText};`;
-        }
-        compiledTemplateJs += 'module.exports = templates;';
-        writeFile('./js/.templates.autogen.js', compiledTemplateJs);
-        console.info('Bundled HTML');
-    });
+    const baseHtml = readTextFile('./html/index.htm')
+        .replace('<!-- Base HTML Placeholder -->', `<base href="${baseUrl()}"/>`);
+    fs.writeFileSync('./public/index.htm', minifyHtml(baseHtml));
+
+    let compiledTemplateJs = [
+        `'use strict';`,
+        `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(
-            './node_modules/font-awesome/css/font-awesome.min.css',
-            './public/css/vendor.min.css');
+    function minifyCss(css) {
+        return require('csso').minify(css).css;
+    }
 
-        console.info('Bundled CSS');
-    });
+    let css = '';
+    for (const file of glob.sync('./css/**/*.styl')) {
+        css += stylus.render(readTextFile(file), {filename: file});
+    }
+    fs.writeFileSync('./public/css/app.min.css', minifyCss(css));
+    if (process.argv.includes('--gzip')) {
+        gzipFile('./public/css/app.min.css');
+    }
+
+    fs.copyFileSync(
+        './node_modules/font-awesome/css/font-awesome.min.css',
+        './public/css/vendor.min.css');
+    if (process.argv.includes('--gzip')) {
+        gzipFile('./public/css/vendor.min.css');
+    }
+
+    console.info('Bundled CSS');
 }
 
-function bundleJs(config) {
+function bundleJs() {
     const browserify = require('browserify');
-    const external = [
-        'underscore',
-        'superagent',
-        'mousetrap',
-        'js-cookie',
-        'nprogress',
-    ];
 
-    function writeJsBundle(b, path, message, compress) {
+    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().pipe(outputFile);
-        outputFile.on('finish', function() {
+        outputFile.on('finish', () => {
             if (compress) {
-                writeFile(path, minifyJs(path));
+                fs.writeFileSync(path, minifyJs(path));
             }
-            console.info(message);
+            callback();
         });
     }
 
-    glob('./js/**/*.js', {}, (er, files) => {
-        if (!process.argv.includes('--no-vendor-js')) {
-            let b = browserify();
-            for (let lib of external) {
-                b.require(lib);
-            }
-            if (config.transpile) {
-                b.add(require.resolve('babel-polyfill'));
-            }
-            writeJsBundle(
-                b, './public/js/vendor.min.js', 'Bundled vendor JS', true);
+    if (!process.argv.includes('--no-vendor-js')) {
+        let b = browserify();
+        for (let lib of external_js) {
+            b.require(lib);
         }
+        if (!process.argv.includes('--no-transpile')) {
+            b.add(require.resolve('babel-polyfill'));
+        }
+        const file = './public/js/vendor.min.js';
+        writeJsBundle(b, file, true, () => {
+            if (process.argv.includes('--gzip')) {
+                gzipFile(file);
+            }
+            console.info('Bundled vendor JS');
+        });
+    }
 
-        if (!process.argv.includes('--no-app-js')) {
-            let outputFile = fs.createWriteStream('./public/js/app.min.js');
-            let b = browserify({debug: config.debug});
-            if (config.transpile) {
-                b = b.transform('babelify');
-            }
-            writeJsBundle(
-                b.external(external).add(files),
-                './public/js/app.min.js',
-                'Bundled app JS',
-                !config.debug);
+    if (!process.argv.includes('--no-app-js')) {
+        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');
+        const file = './public/js/app.min.js';
+        writeJsBundle(b, file, compress, () => {
+            if (process.argv.includes('--gzip')) {
+                gzipFile(file);
+            }
+            console.info('Bundled app JS');
+        });
+    }
 }
 
-function bundleConfig(config) {
-    writeFile(
-        './js/.config.autogen.json', JSON.stringify(config));
-    glob('./node_modules/font-awesome/fonts/*.*', {}, (er, files) => {
-        for (let file of files) {
-            if (fs.lstatSync(file).isDirectory()) {
-                continue;
+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';
             }
-            copyFile(file, path.join('./public/fonts/', path.basename(file)));
         }
-    });
+        return build_info.trim();
+    }
+    const config = {
+        meta: {
+          version: getVersion(),
+          buildDate: new Date().toUTCString()
+        }
+    };
+
+    fs.writeFileSync('./js/.config.autogen.json', JSON.stringify(config));
+    console.info('Generated config file');
 }
 
 function bundleBinaryAssets() {
-    glob('./img/*.png', {}, (er, files) => {
-        for (let file of files) {
-            copyFile(file, path.join('./public/img/', path.basename(file)));
+    fs.copyFileSync('./img/favicon.png', './public/img/favicon.png');
+    fs.copyFileSync('./img/transparency_grid.png', './public/img/transparency_grid.png');
+    console.info('Copied images');
+
+    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');
     });
 }
 
-process.on('uncaughtException', (error) => {
-    const stack = error.stack;
-    delete error.stack;
-    console.log(error);
-    console.log(stack);
-});
+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);
+        }
+    }
+}
 
-const config = getConfig();
-bundleConfig(config);
+// -------------------------------------------------
+
+makeOutputDirs();
+bundleConfig();
 bundleBinaryAssets();
+bundleWebAppFiles();
 if (!process.argv.includes('--no-html')) {
-    bundleHtml(config);
+    bundleHtml();
 }
 if (!process.argv.includes('--no-css')) {
     bundleCss();
 }
 if (!process.argv.includes('--no-js')) {
-    bundleJs(config);
+    bundleJs();
 }

client/css/colors.styl

@@ -55,3 +55,5 @@ $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

client/css/comment-control.styl

@@ -1,60 +1,13 @@
 @import colors
+$comment-header-background-color = $top-navigation-color
+$comment-border-color = #DDD
 
-.comment-form-container
-    &: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
-        width: auto
-        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
+.comment-container
+    padding: 0 0 0 60px
 
     .avatar
-        margin-right: 1em
-        -webkit-flex-shrink: 0
-        flex-shrink: 0
+        float: left
+        margin-left: -60px
         vertical-align: top
 
         .thumbnail
@@ -63,25 +16,72 @@
         a
             display: inline-block
 
-    .body
-        flex-grow: 1
+    nav:not(.active), .tab:not(.active)
+        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
-            background: $top-navigation-color
-            padding: 0.2em 0.5em
+            position: relative
+            background: $comment-header-background-color
+            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)
-            .edit, .delete
-                font-size: 80%
 
             i
                 margin-right: 0.3em
@@ -96,21 +96,34 @@
                 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
 
 
 .comment-content
-    ul
+    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 +131,6 @@
         white-space: pre
         word-wrap: normal
 
-    p:first-child
-        margin-top: 0
-
     .spoiler
         background: #eee
         color: #eee
@@ -140,5 +150,7 @@
         background: #fafafa
         color: #444
 
-    blockquote :last-child
-        margin-bottom: 0
+        :first-child
+            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,24 @@
+@import colors
+$comment-border-color = $top-navigation-color
+
 .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 +27,17 @@
 
         @media (min-width: 700px)
             &>li
-                display: flex
-                margin-bottom: 2em
+                padding-left: 13em
             .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

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
@@ -31,13 +31,22 @@ form.horizontal
     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 +137,38 @@ 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
+
+
+
 /*
  * Regular inputs
  */
@@ -172,13 +213,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
-    input[type=color]
-        position: absolute
-        opacity: 0
+        padding: 0 0.5em
+        border: 2px solid black
+        &:after
+            content: 'A'
+    .background-preview
+        border-right: 0
+        color: transparent
+    .text-preview
+        border-left: 0
+
 
 form.show-validation .input
     input:invalid
@@ -201,10 +254,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 +289,26 @@ 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
-        flex: 1
-    button
-        margin-top: 0.5em
-        width: 8em
+        input, button
+            min-width: 0 /* firefox being sassy */
+            width: auto !important /* don't inherit anything weird */
+        input
+            flex: 1
+        button
+            margin-left: 0.5em
 
 input[type=file]:disabled+.file-dropper
     cursor: default

client/css/core-general.styl

@@ -6,7 +6,7 @@
     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 +21,28 @@ body
     margin: 0
     color: $text-color
     font-family: 'Open Sans', sans-serif
-    font-size: 12pt
-    line-height: 18pt
+    font-size: 1em
+    line-height: 1.4
     @media (max-width: 800px)
-        font-size: 10pt
-        line-height: 15pt
+        font-size: 0.875em
     @media (max-width: 1200px)
-        font-size: 11pt
-        line-height: 16.5pt
+        font-size: 0.95em
 
 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
 
@@ -61,8 +70,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 +81,26 @@ 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
 
 hr
     border: 0
@@ -125,6 +153,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 +202,8 @@ nav
             margin-right: 0.6em
             margin-left: calc(0.6em - 1.2em)
             float: left
+            @media (max-width: 1000px)
+                display: none
 
 a .access-key
     text-decoration: underline
@@ -176,7 +239,7 @@ a .access-key
     width: 20px
     height: 20px
     &.empty
-        background-image: url('/img/transparency_grid.png')
+        background-image: url('../img/transparency_grid.png')
         background-repeat: repeat
         background-size: initial
     img
@@ -194,6 +257,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,7 +16,7 @@
             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

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
-        margin-bottom: 2em
+    .messages
+        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

client/css/password-reset.styl

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

client/css/post-content-control.styl

@@ -1,6 +1,6 @@
 .post-container
     .post-content.transparency-grid img
-        background: url('/img/transparency_grid.png')
+        background: url('../img/transparency_grid.png')
 
     text-align: center
     .post-content
@@ -8,20 +8,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>*
-            position: absolute
-            left: 0
-            right: 0
-            top: 0
-            bottom: 0
-            width: 100%
-            height: 100%
+        img
+            image-orientation: from-image

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,33 +54,66 @@
                     .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
-                box-sizing: border-box
-                border: 0
-                &:after
+
+                .tag-flipper
                     display: inline-block
-                    width: 1em
-                    height: 1em
+                    padding: 0.5em
+                    box-sizing: border-box
+                    border: 0
+                    &:after
+                        display: inline-block
+                        width: 1em
+                        height: 1em
+                        text-align: center
+                        line-height: 1em
+                        font-size: 1.6em
+                    &.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
-                &.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)
+                    font-size: 1.6em
+                    border: 3px solid
+                    &.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)
+
 
             .thumbnail
                 background-position: 50% 30%
@@ -106,35 +139,65 @@
     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
     input
         margin-bottom: 0.25em
         margin-right: 0.25em
     input[name=search-text]
         width: 25em
-    input[name=masstag]
-        width: 12em
-    .masstag-hint, .open-masstag
-        margin-right: 1em
+        @media (max-width: 1000px)
+            display: block
+            width: 100%
+            margin-bottom: 0.5em
     .append
+        vertical-align: middle
         font-size: 0.95em
         color: $inactive-link-color
-    .masstag
-        &:not(.active)
+    .bulk-edit
+        &: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,
-            .stop-tagging
+            .start
                 display: none
-            .masstag-hint
-                display: none
-        &.active
-            .open-masstag
+            .hint
                 display: none
+        input[name=tag]
+            width: 12em
+            @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
 
     .safety
         margin-right: 0.25em

client/css/post-main-view.styl

@@ -33,6 +33,8 @@
                 i
                     font-size: 140%
                 text-align: center
+            @media (max-width: 800px)
+                margin-top: 2em
 
     >.content
         width: 100%
@@ -50,6 +52,7 @@
             order: 2
             min-width: 100%
             max-width: 0
+            margin-right: 0
         >.content
             order: 1
 
@@ -130,10 +133,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,6 @@
 @import colors
-
+$upload-header-background-color = $top-navigation-color
+$upload-border-color = #DDD
 $cancel-button-color = tomato
 
 #post-upload
@@ -21,6 +22,8 @@ $cancel-button-color = tomato
         .file-dropper
             font-size: 150%
             padding: 2em
+            small
+                font-size: 60%
 
     input[type=submit]
         margin-top: 1em
@@ -35,42 +38,114 @@ $cancel-button-color = tomato
     .skip-duplicates
         margin-left: 1em
 
-    .messages
+    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
-            .file
-                margin: 0.3em 0
-                overflow: hidden
-                white-space: nowrap
-                text-align: left
-                text-overflow: ellipsis
-
-            .anonymous
-                margin: 0.3em 0
-
-            .safety
-                margin: 0.3em 0
-                label
-                    display: inline-block
-                    margin-right: 1em
-
-            .thumbnail-wrapper
+            &>.thumbnail-wrapper
                 float: left
-                width: 12.5em
-                height: 7em
-                margin: 0.2em 1em 0 0
-
+                width: 12em
+                height: 8em
+                margin: 0 0 0 -13em
                 .thumbnail
                     width: 100%
                     height: 100%
 
-            .controls
-                float: right
-                a
-                    color: $inactive-link-color
-                    margin-left: 0.5em
+            .uploadable
+                border: 1px solid $upload-border-color
+                min-height: 8em
+                box-sizing: border-box
+
+                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

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
 
@@ -39,6 +44,3 @@ $snapshot-merged-background-color = #FEC
                 background: $snapshot-merged-background-color
                 &+.details
                     background: lighten($snapshot-merged-background-color, 50%)
-
-            div.details
-                margin-bottom: 2em

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,11 +11,18 @@
         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

client/css/tag-input-control.styl

@@ -55,6 +55,7 @@ div.tag-input
                 padding: 0.2em 1em
                 margin: 0
             ul
+                list-style-type: none
                 margin: 0
                 overflow-y: auto
                 overflow-x: none
@@ -87,7 +88,8 @@ div.tag-input
 
 ul.compact-tags
     width: 100%
-    margin-top: 0.5em
+    margin: 0.5em 0 0 0
+    padding: 0
     li
         margin: 0
         width: 100%

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%
@@ -41,12 +42,15 @@
 
 .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

client/css/user-list-view.styl

@@ -28,12 +28,15 @@
 
 .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

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/hooks/build

@@ -0,0 +1,16 @@
+#!/bin/sh
+
+CLOSEST_VER=$(git describe --tags --abbrev=0 ${SOURCE_COMMIT})
+if git describe --exact-match --abbrev=0 ${SOURCE_COMMIT} 2> /dev/null; then
+	BUILD_INFO="v${CLOSEST_VER}"
+else
+	BUILD_INFO="v${CLOSEST_VER}-edge-$(git rev-parse --short ${SOURCE_COMMIT})"
+fi
+
+echo "Using BUILD_INFO=${BUILD_INFO}"
+docker build \
+	--build-arg BUILD_INFO=${BUILD_INFO} \
+	--build-arg BUILD_DATE=$(date -u +'%Y-%m-%dT%H:%M:%SZ') \
+	--build-arg SOURCE_COMMIT \
+	--build-arg DOCKER_REPO \
+	-f $DOCKERFILE_PATH -t $IMAGE_NAME .

client/hooks/post_push

@@ -0,0 +1,19 @@
+#!/bin/sh
+
+add_tag() {
+    echo "Also tagging image as ${DOCKER_REPO}:${1}"
+    docker tag $IMAGE_NAME $DOCKER_REPO:$1
+    docker push $DOCKER_REPO:$1
+}
+
+CLOSEST_VER=$(git describe --tags --abbrev=0)
+CLOSEST_MAJOR_VER=$(echo ${CLOSEST_VER} | cut -d'.' -f1)
+CLOSEST_MINOR_VER=$(echo ${CLOSEST_VER} | cut -d'.' -f2)
+
+add_tag "${CLOSEST_MAJOR_VER}-edge"
+add_tag "${CLOSEST_MAJOR_VER}.${CLOSEST_MINOR_VER}-edge"
+
+if git describe --exact-match --abbrev=0 2> /dev/null; then
+	add_tag "${CLOSEST_MAJOR_VER}"
+	add_tag "${CLOSEST_MAJOR_VER}.${CLOSEST_MINOR_VER}"
+fi

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) { %>
-            <a href='/user/<%- encodeURIComponent(ctx.comment.user.name) %>'>
+        <% if (ctx.user && ctx.user.name && ctx.canViewUsers) { %>
+            <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'>
-        <header><%
-            %><span class='nickname'><%
-                %><% if (ctx.comment.user && ctx.comment.user.name && ctx.canViewUsers) { %><%
-                    %><a href='/user/<%- encodeURIComponent(ctx.comment.user.name) %>'><%
+    <div class='comment'>
+        <header>
+            <nav class='edit tabs'>
+                <ul>
+                    <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><%
                 %><% } %><%
-
-                %><%- 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><%
-            %><% } %><%
+            %></nav><%
         %></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.'/>
-        <button>Add URL</button>
+        <div class='url-holder'>
+            <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='keyboard'><a href='/help/keyboard'>Keyboard</a></li><!--
-            --><li data-name='search'><a href='/help/search'>Search syntax</a></li><!--
-            --><li data-name='comments'><a href='/help/comments'>Comments</a></li><!--
-            --><li data-name='tos'><a href='/help/tos'>Terms of service</a></li><!--
+            --><li data-name='about'><a href='<%- ctx.formatClientLink('help', 'about') %>'>About</a></li><!--
+            --><li data-name='keyboard'><a href='<%- ctx.formatClientLink('help', 'keyboard') %>'>Keyboard</a></li><!--
+            --><li data-name='search'><a href='<%- ctx.formatClientLink('help', 'search') %>'>Search syntax</a></li><!--
+            --><li data-name='comments'><a href='<%- ctx.formatClientLink('help', 'comments') %>'>Comments</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
-called &ldquo;access keys&rdquo;. Pressing underlined letter while holding
-Shfit or Alt+Shift (depending on your browser) will go to the desired page
-(most browsers) or focus the link (IE).</p>
+<p>Additionally, each item in the top navigation can be accessed using a
+feature called &ldquo;access keys&rdquo;. Pressing the underlined letter while
+holding Shift or Alt+Shift (depending on your browser) will go to the desired
+page (most browsers) or focus the link (IE).</p>

client/html/help_search.tpl

@@ -1,9 +1,9 @@
 <nav class='buttons secondary'><!--
     --><ul><!--
-        --><li data-name='default'><a href='/help/search'>General</a></li><!--
-        --><li data-name='posts'><a href='/help/search/posts'>Posts</a></li><!--
-        --><li data-name='users'><a href='/help/search/users'>Users</a></li><!--
-        --><li data-name='tags'><a href='/help/search/tags'>Tags</a></li><!--
+        --><li data-name='default'><a href='<%- ctx.formatClientLink('help', 'search') %>'>General</a></li><!--
+        --><li data-name='posts'><a href='<%- ctx.formatClientLink('help', 'search', 'posts') %>'>Posts</a></li><!--
+        --><li data-name='users'><a href='<%- ctx.formatClientLink('help', 'search', 'users') %>'>Users</a></li><!--
+        --><li data-name='tags'><a href='<%- ctx.formatClientLink('help', 'search', 'tags') %>'>Tags</a></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_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,7 +20,7 @@
         </tr>
         <tr>
             <td><code>uploader</code></td>
-            <td>uploaded by given user</td>
+            <td>uploaded by given use (accepts wildcards)r</td>
         </tr>
         <tr>
             <td><code>upload</code></td>
@@ -32,11 +32,15 @@
         </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>tag-count</code></td>
@@ -54,6 +58,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>
@@ -66,6 +74,10 @@
             <td><code>type</code></td>
             <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>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>content-checksum</code></td>
             <td>having given SHA1 checksum</td>
@@ -86,6 +98,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 +118,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

@@ -2,6 +2,6 @@
     <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><% 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'>
-    <title><!-- configured in the config file --></title>
-    <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'/>
+    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'/>
+    <meta name='theme-color' content='#24aadd'/>
+    <meta name='apple-mobile-web-app-capable' content='yes'/>
+    <meta name='apple-mobile-web-app-status-bar-style' content='black'/>
+    <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/app.min.js'></script>
+    <script type='text/javascript' src='js/vendor.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>
-                <li>
-                    <%= ctx.makeTextInput({
-                        text: 'User name',
-                        name: 'name',
-                        required: true,
-                        pattern: ctx.userNamePattern,
-                    }) %>
-                </li>
-                <li>
-                    <%= ctx.makePasswordInput({
-                        text: 'Password',
-                        name: 'password',
-                        required: true,
-                        pattern: ctx.passwordPattern,
-                    }) %>
-                </li>
-                <li>
-                    <%= ctx.makeCheckbox({
-                        text: 'Remember me',
-                        name: 'remember-user',
-                    }) %>
-                </li>
-            </ul>
-        </div>
+        <ul class='input'>
+            <li>
+                <%= ctx.makeTextInput({
+                    text: 'User name',
+                    name: 'name',
+                    required: true,
+                    pattern: ctx.userNamePattern,
+                }) %>
+            </li>
+            <li>
+                <%= ctx.makePasswordInput({
+                    text: 'Password',
+                    name: 'password',
+                    required: true,
+                    pattern: ctx.passwordPattern,
+                }) %>
+            </li>
+            <li>
+                <%= ctx.makeCheckbox({
+                    text: 'Remember me',
+                    name: 'remember-user',
+                }) %>
+            </li>
+        </ul>
+
         <div class='messages'></div>
+
         <div class='buttons'>
             <input type='submit' value='Log in'/>
-            <% if (ctx.canSendMails) { %>
-                <a class='append' href='/password-reset'>Forgot the password?</a>
-            <% } %>
+            <a class='append' href='<%- ctx.formatClientLink('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) { %>
-                <a class='prev' href='<%- ctx.prevLink %>'>
+            <% if (ctx.prevPage !== ctx.currentPage) { %>
+                <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) { %>
-                <a class='next' href='<%- ctx.nextLink %>'>
+            <% if (ctx.nextPage !== ctx.currentPage) { %>
+                <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'>
-        <div class='input'>
-            <ul>
+    <% if (ctx.canSendMails) { %>
+        <form autocomplete='off'>
+            <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
-        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>
-        <div class='messages'></div>
-        <div class='buttons'>
-            <input type='submit' value='Proceed'/>
-        </div>
-    </form>
+
+            <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.
+            It is recommended to change that password to something else.</small></p>
+
+            <div class='messages'></div>
+            <div class='buttons'>
+                <input type='submit' value='Proceed'/>
+            </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/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')) { %>
-            <video id='video' controls loop='loop'>
-        <% } else { %>
-            <video id='video' controls>
-        <% } %>
-
-            <source type='<%- ctx.post.mimeType %>' src='<%- ctx.post.contentUrl %>'/>
-
-            Your browser doesn't support HTML5 videos.
-        </video>
+        <%= ctx.makeElement(
+            'video', {
+                class: 'resize-listener',
+                controls: true,
+                loop: (ctx.post.flags || []).includes('loop'),
+                playsinline: true,
+                autoplay: ctx.autoplay,
+            },
+            ctx.makeElement('source', {
+                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,26 @@
                     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({
-                    value: ctx.post.tags.join(' '),
-                }) %>
+                <%= ctx.makeTextInput({}) %>
             </section>
         <% } %>
 
@@ -66,6 +78,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,12 +18,12 @@
             <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>

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) { %>
-    <p>Post # <input type='text' pattern='^[0-9]+$' value='<%- ctx.post ? ctx.post.id : '' %>'/></p>
-<% } else { %>
-    <p>Post # <input type='text' pattern='^[0-9]+$' value='<%- ctx.post ? ctx.post.id : '' %>' readonly/></p>
-<% } %>
+<header>
+    <label for='merge-id-<%- ctx.name %>'>Post #</label>
+    <% if (ctx.editable) { %>
+        <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,9 @@
                     'image/gif': 'GIF',
                     'image/jpeg': 'JPEG',
                     'image/png': 'PNG',
+                    'image/webp': 'WEBP',
                     'video/webm': 'WEBM',
+                    'video/mp4': 'MPEG-4',
                     'application/x-shockwave-flash': 'SWF',
                 }[ctx.post.mimeType] +
                 ' (' +

client/html/post_readonly_sidebar.tpl

@@ -8,11 +8,17 @@
                     'image/gif': 'GIF',
                     'image/jpeg': 'JPEG',
                     'image/png': 'PNG',
+                    'image/webp': 'WEBP',
                     'video/webm': 'WEBM',
+                    'video/mp4': 'MPEG-4',
                     'application/x-shockwave-flash': 'SWF',
                 }[ctx.post.mimeType] %>
             </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 +26,12 @@
             <%= ctx.makeRelativeTime(ctx.post.creationTime) %>
         </section>
 
-        <section class='safety'>
-            <i class='fa fa-circle safety-<%- ctx.post.safety %>'></i><!--
-            --><%- ctx.post.safety[0].toUpperCase() + ctx.post.safety.slice(1) %>
-        </section>
+        <% if (ctx.enableSafety) { %>
+            <section class='safety'>
+                <i class='fa fa-circle safety-<%- ctx.post.safety %>'></i><!--
+                --><%- 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 +40,19 @@
             <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='https://www.google.com/searchbyimage?&image_url=<%- encodeURIComponent(ctx.post.contentUrl) %>'>Google Images</a>
+            <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.fullContentUrl) %>'>Google Images</a>
         </section>
 
         <section class='social'>
@@ -67,20 +84,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.escapeColons(tag.names[0])}) %>' class='<%= ctx.makeCssName(tag.category, 'tag') %>'><!--
                         --><% } %><!--
-                            --><%- tag %>&#32;<!--
+                            --><%- ctx.getPrettyTagName(tag.names[0]) %>&#32;<!--
                         --><% if (ctx.canListPosts) { %><!--
                             --></a><!--
                         --><% } %><!--
-                        --><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_row.tpl

@@ -1,10 +1,4 @@
-<li class='uploadable'>
-    <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>
-
+<li class='uploadable-container'>
     <div class='thumbnail-wrapper'>
         <% if (['image'].includes(ctx.uploadable.type)) { %>
 
@@ -29,28 +23,73 @@
         <% } %>
     </div>
 
-    <div class='file'>
-        <strong><%= ctx.uploadable.name %></strong>
-    </div>
+    <div class='uploadable'>
+        <header>
+            <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'>
-        <% for (let safety of ['safe', 'sketchy', 'unsafe']) { %>
-            <%= ctx.makeRadio({
-                name: 'safety-' + ctx.uploadable.key,
-                value: safety,
-                text: safety[0].toUpperCase() + safety.substr(1),
-                selectedValue: ctx.uploadable.safety,
-            }) %>
-        <% } %>
-    </div>
+            <span class='filename'><%= ctx.uploadable.name %></span>
+        </header>
 
-    <% if (ctx.canUploadAnonymously) { %>
-        <div class='anonymous'>
-            <%= ctx.makeCheckbox({
-                text: 'Upload anonymously',
-                name: 'anonymous',
-                checked: ctx.uploadable.anonymous,
-            }) %>
+        <div class='body'>
+            <% if (ctx.enableSafety) { %>
+                <div class='safety'>
+                    <% for (let safety of ['safe', 'sketchy', 'unsafe']) { %>
+                        <%= ctx.makeRadio({
+                            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,
+                        }) %>
+                    </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,31 @@
 <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' %>'/><%
-        %><input data-safety=sketchy type='button' class='mousetrap safety safety-sketchy <%- ctx.settings.listPosts.sketchy ? '' : 'disabled' %>'/><%
-        %><input data-safety=unsafe type='button' class='mousetrap safety safety-unsafe <%- ctx.settings.listPosts.unsafe ? '' : 'disabled' %>'/><%
-        %><wbr/><%
-        %><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><%
+        %><% if (ctx.enableSafety) { %><%
+            %><input data-safety=safe type='button' class='mousetrap safety safety-safe <%- ctx.settings.listPosts.safe ? '' : 'disabled' %>'/><%
+            %><input data-safety=sketchy type='button' class='mousetrap safety safety-sketchy <%- ctx.settings.listPosts.sketchy ? '' : 'disabled' %>'/><%
+            %><input data-safety=unsafe type='button' class='mousetrap safety safety-unsafe <%- ctx.settings.listPosts.unsafe ? '' : 'disabled' %>'/><%
         %><% } %><%
+        %><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><%
+            %><wbr/><%
+            %><%= 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><%
+    %><% } %><%
 %></div>

client/html/posts_page.tpl

@@ -1,14 +1,18 @@
 <div class='post-list'>
-    <% if (ctx.results.length) { %>
+    <% if (ctx.response.results.length) { %>
         <ul>
-            <% for (let post of ctx.results) { %>
-                <li>
+            <% for (let post of ctx.response.results) { %>
+                <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' %>'
-                            href='<%= ctx.canViewPosts ? ctx.getPostUrl(post.id, ctx.parameters) : "" %>'>
+                            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) : '' %>'>
                         <%= 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,20 @@
                             </span>
                         <% } %>
                     </a>
-                    <% if (ctx.canMassTag && ctx.parameters && ctx.parameters.tag) { %>
-                        <a href data-post-id='<%= post.id %>' class='masstag'>
-                        </a>
-                    <% } %>
+                    <span class='edit-overlay'>
+                        <% if (ctx.canBulkEditTags && ctx.parameters && ctx.parameters.tag) { %>
+                            <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>
+                        <% } %>
+                    </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>
@@ -56,6 +55,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 in tags',
+                    name: 'tag-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.getPrettyTagName(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,19 @@
 <div class='content-wrapper tag-categories'>
     <form>
         <h1>Tag categories</h1>
-        <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 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>

client/html/tag_category_row.tpl

@@ -19,7 +19,7 @@
     </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.escapeColons(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({
-                        text: 'Implications',
-                        value: ctx.tag.implications.join(' '),
-                    }) %>
+                    <%= ctx.makeTextInput({text: 'Implications'}) %>
                 <% } %>
             </li>
             <li class='suggestions'>
                 <% if (ctx.canEditSuggestions) { %>
-                    <%= ctx.makeTextInput({
-                        text: 'Suggestions',
-                        value: ctx.tag.suggestions.join(' '),
-                    }) %>
+                    <%= ctx.makeTextInput({text: 'Suggestions'}) %>
                 <% } %>
             </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.escapeColons(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>
-                <li>
-                    <%= ctx.makeTextInput({text: 'Search query', id: 'search-text', name: 'search-text', value: ctx.parameters.query}) %>
-                </li>
-            </ul>
-        </div>
+        <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='/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'>
-    <% if (ctx.results.length) { %>
+<div class='tag-list table-wrap'>
+    <% if (ctx.response.results.length) { %>
         <table>
             <thead>
                 <th class='names'>
                     <% if (ctx.query == 'sort:name' || !ctx.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') { %>
-                        <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') { %>
-                        <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') { %>
-                        <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') { %>
-                        <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) { %>
-                                        <li><%= ctx.makeTagLink(name) %></li>
+                                    <% for (let relation of tag.implications) { %>
+                                        <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) { %>
-                                        <li><%= ctx.makeTagLink(name) %></li>
+                                    <% for (let relation of tag.suggestions) { %>
+                                        <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>
-                <li>
-                    <%= ctx.makeCheckbox({
-                        name: 'confirm-deletion',
-                        text: 'I confirm that I want to delete this account.',
-                        required: true,
-                    }) %>
-                </li>
-            </ul>
-        </div>
+        <ul class='input'>
+            <li>
+                <%= ctx.makeCheckbox({
+                    name: 'confirm-deletion',
+                    text: 'I confirm that I want to delete this account.',
+                    required: true,
+                }) %>
+            </li>
+        </ul>
+
         <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>
-                <li>
-                    <%= ctx.makeTextInput({
-                        text: 'User name',
-                        name: 'name',
-                        placeholder: 'letters, digits, _, -',
-                        required: true,
-                        pattern: ctx.userNamePattern,
-                    }) %>
-                </li>
-                <li>
-                    <%= ctx.makePasswordInput({
-                        text: 'Password',
-                        name: 'password',
-                        placeholder: '5+ characters',
-                        required: true,
-                        pattern: ctx.passwordPattern,
-                    }) %>
-                </li>
-                <li>
-                    <%= ctx.makeEmailInput({
-                        text: 'Email',
-                        name: 'email',
-                        placeholder: 'optional',
-                    }) %>
-                    <p class='hint'>
-                        Used for password reminder and to show a <a href='http://gravatar.com/'>Gravatar</a>.
-                        Leave blank for random Gravatar.
-                    </p>
-                </li>
-            </ul>
-        </div>
+        <ul class='input'>
+            <li>
+                <%= ctx.makeTextInput({
+                    text: 'User name',
+                    name: 'name',
+                    placeholder: 'letters, digits, _, -',
+                    required: true,
+                    pattern: ctx.userNamePattern,
+                }) %>
+            </li>
+            <li>
+                <%= ctx.makePasswordInput({
+                    text: 'Password',
+                    name: 'password',
+                    placeholder: '5+ characters',
+                    required: true,
+                    pattern: ctx.passwordPattern,
+                }) %>
+            </li>
+            <li>
+                <%= ctx.makeEmailInput({
+                    text: 'Email',
+                    name: 'email',
+                    placeholder: 'optional',
+                }) %>
+                <p class='hint'>
+                    Used for password reminder and to show a <a href='http://gravatar.com/'>Gravatar</a>.
+                    Leave blank for random Gravatar.
+                </p>
+            </li>
+        </ul>
+
         <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='/posts/query=fav:<%- encodeURIComponent(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: 'submit:' + ctx.user.name}) %>'><%- ctx.user.uploadedPostCount %> uploads</a></li>
+                <li><a href='<%- ctx.formatClientLink('posts', {query: 'fav:' + ctx.user.name}) %>'><%- ctx.user.favoritePostCount %> favorites</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='/posts/query=special:disliked'><%- ctx.user.dislikedPostCount %> disliked posts</a></li>
+                    <li><a href='<%- ctx.formatClientLink('posts', {query: 'special:liked'}) %>'><%- ctx.user.likedPostCount %> liked 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>

client/html/users_header.tpl

@@ -1,15 +1,14 @@
 <div class='user-list-header'>
     <form class='horizontal'>
-        <div class='input'>
-            <ul>
-                <li>
-                    <%= ctx.makeTextInput({text: 'Search query', id: 'search-text', name: 'search-text', value: ctx.parameters.query}) %>
-                </li>
-            </ul>
-        </div>
+        <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='append' href='/help/search/users'>Syntax help</a>
+            <a class='append' href='<%- ctx.formatClientLink('help', 'search', 'users') %>'>Syntax help</a>
         </div>
     </form>
 </div>

client/html/users_page.tpl

@@ -1,10 +1,10 @@
 <div class='user-list'>
     <ul><!--
-        --><% for (let user of ctx.results) { %><!--
+        --><% for (let user of ctx.response.results) { %><!--
             --><li>
                 <div class='wrapper'>
                     <% if (ctx.canViewUsers) { %>
-                        <a class='image' href='/user/<%- encodeURIComponent(user.name) %>'>
+                        <a class='image' href='<%- ctx.formatClientLink('user', user.name) %>'>
                     <% } %>
                         <%= ctx.makeThumbnail(user.avatarUrl) %>
                     <% if (ctx.canViewUsers) { %>
@@ -12,7 +12,7 @@
                     <% } %>
                     <div class='details'>
                         <% if (ctx.canViewUsers) { %>
-                            <a href='/user/<%- encodeURIComponent(user.name) %>'>
+                            <a href='<%- ctx.formatClientLink('user', user.name) %>'>
                         <% } %>
                             <%- user.name %>
                         <% if (ctx.canViewUsers) { %>

client/js/api.js

@@ -1,10 +1,13 @@
 'use strict';
 
-const nprogress = require('nprogress');
 const cookies = require('js-cookie');
 const request = require('superagent');
-const config = require('./config.js');
 const events = require('./events.js');
+const progress = require('./util/progress.js');
+const uri = require('./util/uri.js');
+
+let fileTokens = {};
+let remoteConfig = null;
 
 class Api extends events.EventTarget {
     constructor() {
@@ -12,6 +15,7 @@ class Api extends events.EventTarget {
         this.user = null;
         this.userName = null;
         this.userPassword = null;
+        this.token = null;
         this.cache = {};
         this.allRanks = [
             'anonymous',
@@ -39,7 +43,7 @@ class Api extends events.EventTarget {
                 resolve(this.cache[url]);
             });
         }
-        return this._process(url, request.get, {}, {}, options)
+        return this._wrappedRequest(url, request.get, {}, {}, options)
             .then(response => {
                 this.cache[url] = response;
                 return Promise.resolve(response);
@@ -48,93 +52,66 @@ class Api extends events.EventTarget {
 
     post(url, data, files, options) {
         this.cache = {};
-        return this._process(url, request.post, data, files, options);
+        return this._wrappedRequest(url, request.post, data, files, options);
     }
 
     put(url, data, files, options) {
         this.cache = {};
-        return this._process(url, request.put, data, files, options);
+        return this._wrappedRequest(url, request.put, data, files, options);
     }
 
     delete(url, data, options) {
         this.cache = {};
-        return this._process(url, request.delete, data, {}, options);
+        return this._wrappedRequest(url, request.delete, data, {}, options);
     }
 
-    _process(url, requestFactory, data, files, options) {
-        options = options || {};
-        const [fullUrl, query] = this._getFullUrl(url);
+    fetchConfig() {
+        if (remoteConfig === null) {
+            return this.get(uri.formatApiLink('info'))
+                .then(response => {
+                    remoteConfig = response.config;
+                });
+        } else {
+            return Promise.resolve();
+        }
+    }
 
-        let abortFunction = null;
+    getName() {
+        return remoteConfig.name;
+    }
 
-        let promise = new Promise((resolve, reject) => {
-            let req = requestFactory(fullUrl);
+    getTagNameRegex() {
+        return remoteConfig.tagNameRegex;
+    }
 
-            req.set('Accept', 'application/json');
-            if (query) {
-                req.query(query);
-            }
-            if (data) {
-                req.attach('metadata', new Blob([JSON.stringify(data)]));
-            }
-            if (files) {
-                for (let key of Object.keys(files)) {
-                    req.attach(key, files[key] || new Blob());
-                }
-            }
-            try {
-                if (this.userName && this.userPassword) {
-                    req.auth(
-                        this.userName,
-                        encodeURIComponent(this.userPassword)
-                            .replace(/%([0-9A-F]{2})/g, (match, p1) => {
-                                return String.fromCharCode('0x' + p1);
-                            }));
-                }
-            } catch (e) {
-                reject({
-                    title: 'Authentication error',
-                    description: 'Malformed credentials'});
-            }
+    getPasswordRegex() {
+        return remoteConfig.passwordRegex;
+    }
 
-            if (!options.noProgress) {
-                nprogress.start();
-            }
+    getUserNameRegex() {
+        return remoteConfig.userNameRegex;
+    }
 
-            abortFunction = () => {
-                req.abort();  // does *NOT* call the callback passed in .end()
-                nprogress.done();
-                reject({
-                    title: 'Cancelled',
-                    description:
-                        'The request was aborted due to user cancel.'});
-            };
+    getContactEmail() {
+        return remoteConfig.contactEmail;
+    }
 
-            req.end((error, response) => {
-                nprogress.done();
-                if (error) {
-                    reject(response && response.body ? response.body : {
-                        title: 'Networking error',
-                        description: error.message});
-                } else {
-                    resolve(response.body);
-                }
-            });
-        });
+    canSendMails() {
+        return !!remoteConfig.canSendMails;
+    }
 
-        promise.abort = () => abortFunction();
-
-        return promise;
+    safetyEnabled() {
+        return !!remoteConfig.enableSafety;
     }
 
     hasPrivilege(lookup) {
         let minViableRank = null;
-        for (let privilege of Object.keys(config.privileges)) {
-            if (!privilege.startsWith(lookup)) {
+        for (let p of Object.keys(remoteConfig.privileges)) {
+            if (!p.startsWith(lookup)) {
                 continue;
             }
-            const rankName = config.privileges[privilege];
-            const rankIndex = this.allRanks.indexOf(rankName);
+            const rankIndex = this.allRanks.indexOf(
+                remoteConfig.privileges[p]);
             if (minViableRank === null || rankIndex < minViableRank) {
                 minViableRank = rankIndex;
             }
@@ -149,17 +126,74 @@ class Api extends events.EventTarget {
     }
 
     loginFromCookies() {
+        const auth = cookies.getJSON('auth');
+        return auth && auth.user && auth.token ?
+            this.loginWithToken(auth.user, auth.token, true) :
+            Promise.resolve();
+    }
+
+    loginWithToken(userName, token, doRemember) {
+        this.cache = {};
         return new Promise((resolve, reject) => {
-            const auth = cookies.getJSON('auth');
-            if (auth && auth.user && auth.password) {
-                this.login(auth.user, auth.password, true)
-                    .then(resolve)
-                    .catch(errorMessage => {
-                        reject(errorMessage);
-                    });
-            } else {
-                resolve();
-            }
+            this.userName = userName;
+            this.token = token;
+            this.get('/user/' + userName + '?bump-login=true')
+                .then(response => {
+                    const options = {};
+                    if (doRemember) {
+                        options.expires = 365;
+                    }
+                    cookies.set(
+                        'auth',
+                        {'user': userName, 'token': token},
+                        options);
+                    this.user = response;
+                    resolve();
+                    this.dispatchEvent(new CustomEvent('login'));
+                }, error => {
+                    reject(error);
+                    this.logout();
+                });
+        });
+    }
+
+    createToken(userName, options) {
+        let userTokenRequest = {
+            enabled: true,
+            note: 'Web Login Token'
+        };
+        if (typeof options.expires !== 'undefined') {
+            userTokenRequest.expirationTime = new Date().addDays(options.expires).toISOString()
+        }
+        return new Promise((resolve, reject) => {
+            this.post('/user-token/' + userName, userTokenRequest)
+                .then(response => {
+                    cookies.set(
+                        'auth',
+                        {'user': userName, 'token': response.token},
+                        options);
+                    this.userName = userName;
+                    this.token = response.token;
+                    this.userPassword = null;
+                }, error => {
+                    reject(error);
+                });
+        });
+    }
+
+    deleteToken(userName, userToken) {
+        return new Promise((resolve, reject) => {
+            this.delete('/user-token/' + userName + '/' + userToken, {})
+                .then(response => {
+                    const options = {};
+                    cookies.set(
+                        'auth',
+                        {'user': userName, 'token': null},
+                        options);
+                    resolve();
+                }, error => {
+                    reject(error);
+                });
         });
     }
 
@@ -174,24 +208,32 @@ class Api extends events.EventTarget {
                     if (doRemember) {
                         options.expires = 365;
                     }
-                    cookies.set(
-                        'auth',
-                        {'user': userName, 'password': userPassword},
-                        options);
+                    this.createToken(this.userName, options);
                     this.user = response;
                     resolve();
                     this.dispatchEvent(new CustomEvent('login'));
-                }, response => {
-                    reject(response.description || response || 'Unknown error');
+                }, error => {
+                    reject(error);
                     this.logout();
                 });
         });
     }
 
     logout() {
+        let self = this;
+        this.deleteToken(this.userName, this.token)
+            .then(response => {
+                self._logout();
+            }, error => {
+                self._logout();
+            });
+    }
+
+    _logout() {
         this.user = null;
         this.userName = null;
         this.userPassword = null;
+        this.token = null;
         this.dispatchEvent(new CustomEvent('logout'));
     }
 
@@ -208,14 +250,177 @@ class Api extends events.EventTarget {
         }
     }
 
+    isCurrentAuthToken(userToken) {
+        return userToken.token === this.token;
+    }
+
     _getFullUrl(url) {
         const fullUrl =
-            (config.apiUrl + '/' + url).replace(/([^:])\/+/g, '$1/');
+            ('api/' + url).replace(/([^:])\/+/g, '$1/');
         const matches = fullUrl.match(/^([^?]*)\??(.*)$/);
         const baseUrl = matches[1];
         const request = matches[2];
         return [baseUrl, request];
     }
+
+    _getFileId(file) {
+        if (file.constructor === String) {
+            return file;
+        }
+        return file.name + file.size;
+    }
+
+    _wrappedRequest(url, requestFactory, data, files, options) {
+        // transform the request: upload each file, then make the request use
+        // its tokens.
+        data = Object.assign({}, data);
+        let abortFunction = () => {};
+        let promise = Promise.resolve();
+        if (files) {
+            for (let key of Object.keys(files)) {
+                const file = files[key];
+                const fileId = this._getFileId(file);
+                if (fileTokens[fileId]) {
+                    data[key + 'Token'] = fileTokens[fileId];
+                } else {
+                    promise = promise
+                        .then(() => {
+                            let uploadPromise = this._upload(file);
+                            abortFunction = () => uploadPromise.abort();
+                            return uploadPromise;
+                        })
+                        .then(token => {
+                            abortFunction = () => {};
+                            fileTokens[fileId] = token;
+                            data[key + 'Token'] = token;
+                            return Promise.resolve();
+                        });
+                }
+            }
+        }
+        promise = promise.then(
+            () => {
+                let requestPromise = this._rawRequest(
+                    url, requestFactory, data, {}, options);
+                abortFunction = () => requestPromise.abort();
+                return requestPromise;
+            })
+            .catch(error => {
+                if (error.response && error.response.name ===
+                        'MissingOrExpiredRequiredFileError') {
+                    for (let key of Object.keys(files)) {
+                        const file = files[key];
+                        const fileId = this._getFileId(file);
+                        fileTokens[fileId] = null;
+                    }
+                    error.message =
+                        'The uploaded file has expired; ' +
+                        'please resend the form to reupload.';
+                }
+                return Promise.reject(error);
+            });
+        promise.abort = () => abortFunction();
+        return promise;
+    }
+
+    _upload(file, options) {
+        let abortFunction = () => {};
+        let returnedPromise = new Promise((resolve, reject) => {
+            let uploadPromise = this._rawRequest(
+                'uploads', request.post, {}, {content: file}, options);
+            abortFunction = () => uploadPromise.abort();
+            return uploadPromise.then(
+                response => {
+                    abortFunction = () => {};
+                    return resolve(response.token);
+                }, reject);
+        });
+        returnedPromise.abort = () => abortFunction();
+        return returnedPromise;
+    }
+
+    _rawRequest(url, requestFactory, data, files, options) {
+        options = options || {};
+        data = Object.assign({}, data);
+        const [fullUrl, query] = this._getFullUrl(url);
+
+        let abortFunction = () => {};
+        let returnedPromise = new Promise((resolve, reject) => {
+            let req = requestFactory(fullUrl);
+
+            req.set('Accept', 'application/json');
+
+            if (query) {
+                req.query(query);
+            }
+
+            if (files) {
+                for (let key of Object.keys(files)) {
+                    const value = files[key];
+                    if (value.constructor === String) {
+                        data[key + 'Url'] = value;
+                    } else {
+                        req.attach(key, value || new Blob());
+                    }
+                }
+            }
+
+            if (data) {
+                if (files && Object.keys(files).length) {
+                    req.attach('metadata', new Blob([JSON.stringify(data)]));
+                } else {
+                    req.set('Content-Type', 'application/json');
+                    req.send(data);
+                }
+            }
+
+            try {
+                if (this.userName && this.token) {
+                    req.auth = null;
+                    req.set('Authorization', 'Token '
+                        + new Buffer(this.userName + ":" + this.token).toString('base64'))
+                } else if (this.userName && this.userPassword) {
+                    req.auth(
+                        this.userName,
+                        encodeURIComponent(this.userPassword)
+                            .replace(/%([0-9A-F]{2})/g, (match, p1) => {
+                                return String.fromCharCode('0x' + p1);
+                            }));
+                }
+            } catch (e) {
+                reject(
+                    new Error('Authentication error (malformed credentials)'));
+            }
+
+            if (!options.noProgress) {
+                progress.start();
+            }
+
+            abortFunction = () => {
+                req.abort();  // does *NOT* call the callback passed in .end()
+                progress.done();
+                reject(
+                    new Error('The request was aborted due to user cancel.'));
+            };
+
+            req.end((error, response) => {
+                progress.done();
+                abortFunction = () => {};
+                if (error) {
+                    if (response && response.body) {
+                        error = new Error(
+                            response.body.description || 'Unknown error');
+                        error.response = response.body;
+                    }
+                    reject(error);
+                } else {
+                    resolve(response.body);
+                }
+            });
+        });
+        returnedPromise.abort = () => abortFunction();
+        return returnedPromise;
+    }
 }
 
 module.exports = new Api();

client/js/controllers/auth_controller.js

@@ -2,6 +2,8 @@
 
 const router = require('../router.js');
 const api = require('../api.js');
+const tags = require('../tags.js');
+const uri = require('../util/uri.js');
 const topNavigation = require('../models/top_navigation.js');
 const LoginView = require('../views/login_view.js');
 
@@ -21,10 +23,12 @@ class LoginController {
         api.forget();
         api.login(e.detail.name, e.detail.password, e.detail.remember)
             .then(() => {
-                const ctx = router.show('/');
+                const ctx = router.show(uri.formatClientLink());
                 ctx.controller.showSuccess('Logged in');
-            }, errorMessage => {
-                this._loginView.showError(errorMessage);
+                // reload tag category color map, this is required when `tag_categories:list` has a permission other than anonymous
+                tags.refreshCategoryColorMap();
+            }, error => {
+                this._loginView.showError(error.message);
                 this._loginView.enableForm();
             });
     }
@@ -34,16 +38,16 @@ class LogoutController {
     constructor() {
         api.forget();
         api.logout();
-        const ctx = router.show('/');
+        const ctx = router.show(uri.formatClientLink());
         ctx.controller.showSuccess('Logged out');
     }
 }
 
 module.exports = router => {
-    router.enter('/login', (ctx, next) => {
+    router.enter(['login'], (ctx, next) => {
         ctx.controller = new LoginController();
     });
-    router.enter('/logout', (ctx, next) => {
+    router.enter(['logout'], (ctx, next) => {
         ctx.controller = new LogoutController();
     });
 };

client/js/controllers/comments_controller.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const api = require('../api.js');
-const misc = require('../util/misc.js');
+const uri = require('../util/uri.js');
 const PostList = require('../models/post_list.js');
 const topNavigation = require('../models/top_navigation.js');
 const PageController = require('../controllers/page_controller.js');
@@ -25,14 +25,16 @@ class CommentsController {
         this._pageController = new PageController();
         this._pageController.run({
             parameters: ctx.parameters,
-            getClientUrlForPage: page => {
+            defaultLimit: 10,
+            getClientUrlForPage: (offset, limit) => {
                 const parameters = Object.assign(
-                    {}, ctx.parameters, {page: page});
-                return '/comments/' + misc.formatUrlParameters(parameters);
+                    {}, ctx.parameters, {offset: offset, limit: limit});
+                return uri.formatClientLink('comments', parameters);
             },
-            requestPage: page => {
+            requestPage: (offset, limit) => {
                 return PostList.search(
-                    'sort:comment-date comment-count-min:1', page, 10, fields);
+                    'sort:comment-date comment-count-min:1',
+                    offset, limit, fields);
             },
             pageRenderer: pageCtx => {
                 Object.assign(pageCtx, {
@@ -51,29 +53,24 @@ class CommentsController {
         // TODO: disable form
         e.detail.comment.text = e.detail.text;
         e.detail.comment.save()
-            .catch(errorMessage => {
-                e.detail.target.showError(errorMessage);
+            .catch(error => {
+                e.detail.target.showError(error.message);
                 // TODO: enable form
             });
     }
 
     _evtScore(e) {
         e.detail.comment.setScore(e.detail.score)
-            .catch(errorMessage => {
-                window.alert(errorMessage);
-            });
+            .catch(error => window.alert(error.message));
     }
 
     _evtDelete(e) {
         e.detail.comment.delete()
-            .catch(errorMessage => {
-                window.alert(errorMessage);
-            });
+            .catch(error => window.alert(error.message));
     }
 };
 
 module.exports = router => {
-    router.enter('/comments/:parameters?',
-        (ctx, next) => { misc.parseUrlParametersRoute(ctx, next); },
+    router.enter(['comments'],
         (ctx, next) => { new CommentsController(ctx); });
 };

client/js/controllers/help_controller.js

@@ -12,13 +12,13 @@ class HelpController {
 }
 
 module.exports = router => {
-    router.enter('/help', (ctx, next) => {
+    router.enter(['help'], (ctx, next) => {
         new HelpController();
     });
-    router.enter('/help/:section', (ctx, next) => {
+    router.enter(['help', ':section'], (ctx, next) => {
         new HelpController(ctx.parameters.section);
     });
-    router.enter('/help/:section/:subsection', (ctx, next) => {
+    router.enter(['help', ':section', ':subsection'], (ctx, next) => {
         new HelpController(ctx.parameters.section, ctx.parameters.subsection);
     });
 };

client/js/controllers/home_controller.js

@@ -12,7 +12,7 @@ class HomeController {
         topNavigation.setTitle('Home');
 
         this._homeView = new HomeView({
-            name: config.name,
+            name: api.getName(),
             version: config.meta.version,
             buildDate: config.meta.buildDate,
             canListSnapshots: api.hasPrivilege('snapshots:list'),
@@ -31,9 +31,7 @@ class HomeController {
                     featuringTime: info.featuringTime,
                 });
             },
-            errorMessage => {
-                this._homeView.showError(errorMessage);
-            });
+            error => this._homeView.showError(error.message));
     }
 
     showSuccess(message) {
@@ -46,7 +44,7 @@ class HomeController {
 };
 
 module.exports = router => {
-    router.enter('/', (ctx, next) => {
+    router.enter([], (ctx, next) => {
         ctx.controller = new HomeController();
     });
 };

client/js/controllers/not_found_controller.js

@@ -12,7 +12,7 @@ class NotFoundController {
 };
 
 module.exports = router => {
-    router.enter('*', (ctx, next) => {
+    router.enter(null, (ctx, next) => {
         ctx.controller = new NotFoundController(ctx.canonicalPath);
     });
 };

client/js/controllers/page_controller.js

@@ -18,12 +18,6 @@ class PageController {
     }
 
     run(ctx) {
-        const extendedContext = {
-            getClientUrlForPage: ctx.getClientUrlForPage,
-            parameters: ctx.parameters,
-        };
-
-        ctx.pageContext = Object.assign({}, extendedContext);
         this._view.run(ctx);
     }
 

client/js/controllers/password_reset_controller.js

@@ -2,6 +2,7 @@
 
 const router = require('../router.js');
 const api = require('../api.js');
+const uri = require('../util/uri.js');
 const topNavigation = require('../models/top_navigation.js');
 const PasswordResetView = require('../views/password_reset_view.js');
 
@@ -20,13 +21,13 @@ class PasswordResetController {
         this._passwordResetView.disableForm();
         api.forget();
         api.logout();
-        api.get('/password-reset/' + e.detail.userNameOrEmail)
+        api.get(uri.formatApiLink('password-reset', e.detail.userNameOrEmail))
             .then(() => {
                 this._passwordResetView.showSuccess(
                     'E-mail has been sent. To finish the procedure, ' +
                     'please click the link it contains.');
-            }, response => {
-                this._passwordResetView.showError(response.description);
+            }, error => {
+                this._passwordResetView.showError(error.message);
                 this._passwordResetView.enableForm();
             });
     }
@@ -37,28 +38,26 @@ class PasswordResetFinishController {
         api.forget();
         api.logout();
         let password = null;
-        api.post('/password-reset/' + name, {token: token})
+        api.post(uri.formatApiLink('password-reset', name), {token: token})
             .then(response => {
                 password = response.password;
                 return api.login(name, password, false);
-            }, response => {
-                return Promise.reject(response.description);
             }).then(() => {
-                const ctx = router.show('/');
+                const ctx = router.show(uri.formatClientLink());
                 ctx.controller.showSuccess('New password: ' + password);
-            }, errorMessage => {
-                const ctx = router.show('/');
-                ctx.controller.showError(errorMessage);
+            }, error => {
+                const ctx = router.show(uri.formatClientLink());
+                ctx.controller.showError(error.message);
             });
     }
 }
 
 module.exports = router => {
-    router.enter('/password-reset', (ctx, next) => {
+    router.enter(['password-reset'], (ctx, next) => {
         ctx.controller = new PasswordResetController();
     });
-    router.enter(/\/password-reset\/([^:]+):([^:]+)$/, (ctx, next) => {
-        ctx.controller = new PasswordResetFinishController(
-            ctx.parameters[0], ctx.parameters[1]);
+    router.enter(['password-reset', ':descriptor'], (ctx, next) => {
+        const [name, token] = ctx.parameters.descriptor.split(':', 2);
+        ctx.controller = new PasswordResetFinishController(name, token);
     });
 };

client/js/controllers/post_detail_controller.js

@@ -3,8 +3,8 @@
 const router = require('../router.js');
 const api = require('../api.js');
 const misc = require('../util/misc.js');
+const uri = require('../util/uri.js');
 const settings = require('../models/settings.js');
-const Comment = require('../models/comment.js');
 const Post = require('../models/post.js');
 const PostList = require('../models/post_list.js');
 const PostDetailView = require('../views/post_detail_view.js');
@@ -18,18 +18,10 @@ class PostDetailController extends BasePostController {
         Post.get(ctx.parameters.id).then(post => {
             this._id = ctx.parameters.id;
             post.addEventListener('change', e => this._evtSaved(e, section));
-
-            this._view = new PostDetailView({
-                post: post,
-                section: section,
-                canMerge: api.hasPrivilege('posts:merge'),
-            });
-
-            this._view.addEventListener('select', e => this._evtSelect(e));
-            this._view.addEventListener('merge', e => this._evtMerge(e));
-        }, errorMessage => {
+            this._installView(post, section);
+        }, error => {
             this._view = new EmptyView();
-            this._view.showError(errorMessage);
+            this._view.showError(error.message);
         });
     }
 
@@ -37,14 +29,25 @@ class PostDetailController extends BasePostController {
         this._view.showSuccess(message);
     }
 
+    _installView(post, section) {
+        this._view = new PostDetailView({
+            post: post,
+            section: section,
+            canMerge: api.hasPrivilege('posts:merge'),
+        });
+
+        this._view.addEventListener('select', e => this._evtSelect(e));
+        this._view.addEventListener('merge', e => this._evtMerge(e));
+    }
+
     _evtSelect(e) {
         this._view.clearMessages();
         this._view.disableForm();
         Post.get(e.detail.postId).then(post => {
             this._view.selectPost(post);
             this._view.enableForm();
-        }, errorMessage => {
-            this._view.showError(errorMessage);
+        }, error => {
+            this._view.showError(error.message);
             this._view.enableForm();
         });
     }
@@ -53,7 +56,8 @@ class PostDetailController extends BasePostController {
         misc.disableExitConfirmation();
         if (this._id !== e.detail.post.id) {
             router.replace(
-                '/post/' + e.detail.post.id + '/' + section, null, false);
+                uri.formatClientLink('post', e.detail.post.id, section),
+                null, false);
         }
     }
 
@@ -62,16 +66,14 @@ class PostDetailController extends BasePostController {
         this._view.disableForm();
         e.detail.post.merge(e.detail.targetPost.id, e.detail.useOldContent)
             .then(() => {
-                this._view = new PostDetailView({
-                    post: e.detail.targetPost,
-                    section: 'merge',
-                    canMerge: api.hasPrivilege('posts:merge'),
-                });
+                this._installView(e.detail.post, 'merge');
                 this._view.showSuccess('Post merged.');
                 router.replace(
-                    '/post/' + e.detail.targetPost.id + '/merge', null, false);
-            }, errorMessage => {
-                this._view.showError(errorMessage);
+                    uri.formatClientLink(
+                        'post', e.detail.targetPost.id, 'merge'),
+                    null, false);
+            }, error => {
+                this._view.showError(error.message);
                 this._view.enableForm();
             });
     }
@@ -79,7 +81,7 @@ class PostDetailController extends BasePostController {
 
 module.exports = router => {
     router.enter(
-        '/post/:id/merge',
+        ['post', ':id', 'merge'],
         (ctx, next) => {
             ctx.controller = new PostDetailController(ctx, 'merge');
         });

client/js/controllers/post_list_controller.js

@@ -1,8 +1,9 @@
 'use strict';
 
+const router = require('../router.js');
 const api = require('../api.js');
 const settings = require('../models/settings.js');
-const misc = require('../util/misc.js');
+const uri = require('../util/uri.js');
 const PostList = require('../models/post_list.js');
 const topNavigation = require('../models/top_navigation.js');
 const PageController = require('../controllers/page_controller.js');
@@ -11,7 +12,7 @@ const PostsPageView = require('../views/posts_page_view.js');
 const EmptyView = require('../views/empty_view.js');
 
 const fields = [
-    'id', 'thumbnailUrl', 'type',
+    'id', 'thumbnailUrl', 'type', 'safety',
     'score', 'favoriteCount', 'commentCount', 'tags', 'version'];
 
 class PostListController {
@@ -31,8 +32,12 @@ class PostListController {
         this._headerView = new PostsHeaderView({
             hostNode: this._pageController.view.pageHeaderHolderNode,
             parameters: ctx.parameters,
-            canMassTag: api.hasPrivilege('tags:masstag'),
-            massTagTags: this._massTagTags,
+            enableSafety: api.safetyEnabled(),
+            canBulkEditTags: api.hasPrivilege('posts:bulk-edit:tags'),
+            canBulkEditSafety: api.hasPrivilege('posts:bulk-edit:safety'),
+            bulkEdit: {
+                tags: this._bulkEditTags
+            },
         });
         this._headerView.addEventListener(
             'navigate', e => this._evtNavigate(e));
@@ -44,74 +49,65 @@ class PostListController {
         this._pageController.showSuccess(message);
     }
 
-    get _massTagTags() {
+    get _bulkEditTags() {
         return (this._ctx.parameters.tag || '').split(/\s+/).filter(s => s);
     }
 
     _evtNavigate(e) {
-        history.pushState(
-            null,
-            window.title,
-            '/posts/' + misc.formatUrlParameters(e.detail.parameters));
+        router.showNoDispatch(
+            uri.formatClientLink('posts', e.detail.parameters));
         Object.assign(this._ctx.parameters, e.detail.parameters);
         this._syncPageController();
     }
 
     _evtTag(e) {
-        for (let tag of this._massTagTags) {
-            e.detail.post.addTag(tag);
-        }
-        e.detail.post.save()
-            .catch(errorMessage => {
-                window.alert(errorMessage);
-            });
+        Promise.all(
+            this._bulkEditTags.map(tag =>
+                e.detail.post.tags.addByName(tag)))
+            .then(e.detail.post.save())
+            .catch(error => window.alert(error.message));
     }
 
     _evtUntag(e) {
-        for (let tag of this._massTagTags) {
-            e.detail.post.removeTag(tag);
+        for (let tag of this._bulkEditTags) {
+            e.detail.post.tags.removeByName(tag);
         }
-        e.detail.post.save()
-            .catch(errorMessage => {
-                window.alert(errorMessage);
-            });
+        e.detail.post.save().catch(error => window.alert(error.message));
     }
 
-    _decorateSearchQuery(text) {
-        const browsingSettings = settings.get();
-        let disabledSafety = [];
-        for (let key of Object.keys(browsingSettings.listPosts)) {
-            if (browsingSettings.listPosts[key] === false) {
-                disabledSafety.push(key);
-            }
-        }
-        if (disabledSafety.length) {
-            text = `-rating:${disabledSafety.join(',')} ${text}`;
-        }
-        return text.trim();
+    _evtChangeSafety(e) {
+        e.detail.post.safety = e.detail.safety;
+        e.detail.post.save().catch(error => window.alert(error.message));
     }
 
     _syncPageController() {
         this._pageController.run({
             parameters: this._ctx.parameters,
-            getClientUrlForPage: page => {
-                return '/posts/' + misc.formatUrlParameters(
-                    Object.assign({}, this._ctx.parameters, {page: page}));
+            defaultLimit: parseInt(settings.get().postsPerPage),
+            getClientUrlForPage: (offset, limit) => {
+                const parameters = Object.assign(
+                    {}, this._ctx.parameters, {offset: offset, limit: limit});
+                return uri.formatClientLink('posts', parameters);
             },
-            requestPage: page => {
+            requestPage: (offset, limit) => {
                 return PostList.search(
-                    this._decorateSearchQuery(this._ctx.parameters.query),
-                    page, settings.get().postsPerPage, fields);
+                    this._ctx.parameters.query, offset, limit, fields);
             },
             pageRenderer: pageCtx => {
                 Object.assign(pageCtx, {
                     canViewPosts: api.hasPrivilege('posts:view'),
-                    canMassTag: api.hasPrivilege('tags:masstag'),
-                    massTagTags: this._massTagTags,
+                    canBulkEditTags: api.hasPrivilege('posts:bulk-edit:tags'),
+                    canBulkEditSafety:
+                        api.hasPrivilege('posts:bulk-edit:safety'),
+                    bulkEdit: {
+                        tags: this._bulkEditTags,
+                    },
                 });
                 const view = new PostsPageView(pageCtx);
                 view.addEventListener('tag', e => this._evtTag(e));
                 view.addEventListener('untag', e => this._evtUntag(e));
+                view.addEventListener(
+                    'changeSafety', e => this._evtChangeSafety(e));
                 return view;
             },
         });
@@ -120,7 +116,6 @@ class PostListController {
 
 module.exports = router => {
     router.enter(
-        '/posts/:parameters(.*)?',
-        (ctx, next) => { misc.parseUrlParametersRoute(ctx, next); },
+        ['posts'],
         (ctx, next) => { ctx.controller = new PostListController(ctx); });
 };

client/js/controllers/post_main_controller.js

@@ -2,6 +2,7 @@
 
 const router = require('../router.js');
 const api = require('../api.js');
+const uri = require('../util/uri.js');
 const misc = require('../util/misc.js');
 const settings = require('../models/settings.js');
 const Comment = require('../models/comment.js');
@@ -19,8 +20,8 @@ class PostMainController extends BasePostController {
         Promise.all([
                 Post.get(ctx.parameters.id),
                 PostList.getAround(
-                    ctx.parameters.id, this._decorateSearchQuery(
-                        parameters ? parameters.query : '')),
+                    ctx.parameters.id,
+                    parameters ? parameters.query : null),
         ]).then(responses => {
             const [post, aroundResponse] = responses;
 
@@ -29,8 +30,8 @@ class PostMainController extends BasePostController {
             if (parameters.query) {
                 ctx.state.parameters = parameters;
                 const url = editMode ?
-                    '/post/' + ctx.parameters.id + '/edit' :
-                    '/post/' + ctx.parameters.id;
+                    uri.formatClientLink('post', ctx.parameters.id, 'edit') :
+                    uri.formatClientLink('post', ctx.parameters.id);
                 router.replace(url, ctx.state, false);
             }
 
@@ -69,10 +70,10 @@ class PostMainController extends BasePostController {
                     'merge', e => this._evtMergePost(e));
             }
 
-            if (this._view.commentFormControl) {
-                this._view.commentFormControl.addEventListener(
+            if (this._view.commentControl) {
+                this._view.commentControl.addEventListener(
                     'change', e => this._evtCommentChange(e));
-                this._view.commentFormControl.addEventListener(
+                this._view.commentControl.addEventListener(
                     'submit', e => this._evtCreateComment(e));
             }
 
@@ -84,26 +85,12 @@ class PostMainController extends BasePostController {
                 this._view.commentListControl.addEventListener(
                     'delete', e => this._evtDeleteComment(e));
             }
-        }, errorMessage => {
+        }, error => {
             this._view = new EmptyView();
-            this._view.showError(errorMessage);
+            this._view.showError(error.message);
         });
     }
 
-    _decorateSearchQuery(text) {
-        const browsingSettings = settings.get();
-        let disabledSafety = [];
-        for (let key of Object.keys(browsingSettings.listPosts)) {
-            if (browsingSettings.listPosts[key] === false) {
-                disabledSafety.push(key);
-            }
-        }
-        if (disabledSafety.length) {
-            text = `-rating:${disabledSafety.join(',')} ${text}`;
-        }
-        return text.trim();
-    }
-
     _evtFitModeChange(e) {
         const browsingSettings = settings.get();
         browsingSettings.fitMode = e.detail.mode;
@@ -117,14 +104,14 @@ class PostMainController extends BasePostController {
             .then(() => {
                 this._view.sidebarControl.showSuccess('Post featured.');
                 this._view.sidebarControl.enableForm();
-            }, errorMessage => {
-                this._view.sidebarControl.showError(errorMessage);
+            }, error => {
+                this._view.sidebarControl.showError(error.message);
                 this._view.sidebarControl.enableForm();
             });
     }
 
     _evtMergePost(e) {
-        router.show('/post/' + e.detail.post.id + '/merge');
+        router.show(uri.formatClientLink('post', e.detail.post.id, 'merge'));
     }
 
     _evtDeletePost(e) {
@@ -133,10 +120,10 @@ class PostMainController extends BasePostController {
         e.detail.post.delete()
             .then(() => {
                 misc.disableExitConfirmation();
-                const ctx = router.show('/posts');
+                const ctx = router.show(uri.formatClientLink('posts'));
                 ctx.controller.showSuccess('Post deleted.');
-            }, errorMessage => {
-                this._view.sidebarControl.showError(errorMessage);
+            }, error => {
+                this._view.sidebarControl.showError(error.message);
                 this._view.sidebarControl.enableForm();
             });
     }
@@ -145,9 +132,6 @@ class PostMainController extends BasePostController {
         this._view.sidebarControl.disableForm();
         this._view.sidebarControl.clearMessages();
         const post = e.detail.post;
-        if (e.detail.tags !== undefined) {
-            post.tags = e.detail.tags;
-        }
         if (e.detail.safety !== undefined) {
             post.safety = e.detail.safety;
         }
@@ -163,13 +147,16 @@ class PostMainController extends BasePostController {
         if (e.detail.thumbnail !== undefined) {
             post.newThumbnail = e.detail.thumbnail;
         }
+        if (e.detail.source !== undefined) {
+            post.source = e.detail.source;
+        }
         post.save()
             .then(() => {
                 this._view.sidebarControl.showSuccess('Post saved.');
                 this._view.sidebarControl.enableForm();
                 misc.disableExitConfirmation();
-            }, errorMessage => {
-                this._view.sidebarControl.showError(errorMessage);
+            }, error => {
+                this._view.sidebarControl.showError(error.message);
                 this._view.sidebarControl.enableForm();
             });
     }
@@ -183,18 +170,18 @@ class PostMainController extends BasePostController {
     }
 
     _evtCreateComment(e) {
-        // TODO: disable form
+        this._view.commentControl.disableForm();
         const comment = Comment.create(this._post.id);
         comment.text = e.detail.text;
         comment.save()
             .then(() => {
                 this._post.comments.add(comment);
-                this._view.commentFormControl.setText('');
-                // TODO: enable form
+                this._view.commentControl.exitEditMode();
+                this._view.commentControl.enableForm();
                 misc.disableExitConfirmation();
-            }, errorMessage => {
-                this._view.commentFormControl.showError(errorMessage);
-                // TODO: enable form
+            }, error => {
+                this._view.commentControl.showError(error.message);
+                this._view.commentControl.enableForm();
             });
     }
 
@@ -202,24 +189,20 @@ class PostMainController extends BasePostController {
         // TODO: disable form
         e.detail.comment.text = e.detail.text;
         e.detail.comment.save()
-            .catch(errorMessage => {
-                e.detail.target.showError(errorMessage);
+            .catch(error => {
+                e.detail.target.showError(error.message);
                 // TODO: enable form
             });
     }
 
     _evtScoreComment(e) {
         e.detail.comment.setScore(e.detail.score)
-            .catch(errorMessage => {
-                window.alert(errorMessage);
-            });
+            .catch(error => window.alert(error.message));
     }
 
     _evtDeleteComment(e) {
         e.detail.comment.delete()
-            .catch(errorMessage => {
-                window.alert(errorMessage);
-            });
+            .catch(error => window.alert(error.message));
     }
 
     _evtScorePost(e) {
@@ -227,9 +210,7 @@ class PostMainController extends BasePostController {
             return;
         }
         e.detail.post.setScore(e.detail.score)
-            .catch(errorMessage => {
-                window.alert(errorMessage);
-            });
+            .catch(error => window.alert(error.message));
     }
 
     _evtFavoritePost(e) {
@@ -237,9 +218,7 @@ class PostMainController extends BasePostController {
             return;
         }
         e.detail.post.addToFavorites()
-            .catch(errorMessage => {
-                window.alert(errorMessage);
-            });
+            .catch(error => window.alert(error.message));
     }
 
     _evtUnfavoritePost(e) {
@@ -247,15 +226,12 @@ class PostMainController extends BasePostController {
             return;
         }
         e.detail.post.removeFromFavorites()
-            .catch(errorMessage => {
-                window.alert(errorMessage);
-            });
+            .catch(error => window.alert(error.message));
     }
 }
 
 module.exports = router => {
-    router.enter('/post/:id/edit/:parameters(.*)?',
-        (ctx, next) => { misc.parseUrlParametersRoute(ctx, next); },
+    router.enter(['post', ':id', 'edit'],
         (ctx, next) => {
             // restore parameters from history state
             if (ctx.state.parameters) {
@@ -264,8 +240,7 @@ module.exports = router => {
             ctx.controller = new PostMainController(ctx, true);
         });
     router.enter(
-        '/post/:id/:parameters(.*)?',
-        (ctx, next) => { misc.parseUrlParametersRoute(ctx, next); },
+        ['post', ':id'],
         (ctx, next) => {
             // restore parameters from history state
             if (ctx.state.parameters) {

client/js/controllers/post_upload_controller.js

@@ -2,15 +2,22 @@
 
 const api = require('../api.js');
 const router = require('../router.js');
+const uri = require('../util/uri.js');
 const misc = require('../util/misc.js');
+const progress = require('../util/progress.js');
 const topNavigation = require('../models/top_navigation.js');
 const Post = require('../models/post.js');
+const Tag = require('../models/tag.js');
 const PostUploadView = require('../views/post_upload_view.js');
 const EmptyView = require('../views/empty_view.js');
 
+const genericErrorMessage =
+    'One of the posts needs your attention; ' +
+    'click "resume upload" when you\'re ready.';
+
 class PostUploadController {
     constructor() {
-        this._lastPromise = null;
+        this._lastCancellablePromise = null;
 
         if (!api.hasPrivilege('posts:create')) {
             this._view = new EmptyView();
@@ -22,6 +29,8 @@ class PostUploadController {
         topNavigation.setTitle('Upload');
         this._view = new PostUploadView({
             canUploadAnonymously: api.hasPrivilege('posts:create:anonymous'),
+            canViewPosts: api.hasPrivilege('posts:view'),
+            enableSafety: api.safetyEnabled(),
         });
         this._view.addEventListener('change', e => this._evtChange(e));
         this._view.addEventListener('submit', e => this._evtSubmit(e));
@@ -33,13 +42,13 @@ class PostUploadController {
             misc.enableExitConfirmation();
         } else {
             misc.disableExitConfirmation();
+            this._view.clearMessages();
         }
-        this._view.clearMessages();
     }
 
     _evtCancel(e) {
-        if (this._lastPromise) {
-            this._lastPromise.abort();
+        if (this._lastCancellablePromise) {
+            this._lastCancellablePromise.abort();
         }
     }
 
@@ -47,50 +56,110 @@ class PostUploadController {
         this._view.disableForm();
         this._view.clearMessages();
 
-        e.detail.uploadables.reduce((promise, uploadable) => {
-            return promise.then(() => {
-                let post = new Post();
-                post.safety = uploadable.safety;
-                if (uploadable.url) {
-                    post.newContentUrl = uploadable.url;
-                } else {
-                    post.newContent = uploadable.file;
-                }
+        e.detail.uploadables.reduce(
+            (promise, uploadable) =>
+                promise.then(() => this._uploadSinglePost(
+                    uploadable, e.detail.skipDuplicates)),
+            Promise.resolve())
+                .then(() => {
+                    this._view.clearMessages();
+                    misc.disableExitConfirmation();
+                    const ctx = router.show(uri.formatClientLink('posts'));
+                    ctx.controller.showSuccess('Posts uploaded.');
+                }, error => {
+                    if (error.uploadable) {
+                        if (error.similarPosts) {
+                            error.uploadable.lookalikes = error.similarPosts;
+                            this._view.updateUploadable(error.uploadable);
+                            this._view.showInfo(genericErrorMessage);
+                            this._view.showInfo(
+                                error.message, error.uploadable);
+                        } else {
+                            this._view.showError(genericErrorMessage);
+                            this._view.showError(
+                                error.message, error.uploadable);
+                        }
+                    } else {
+                        this._view.showError(error.message);
+                    }
+                    this._view.enableForm();
+                });
+    }
 
-                let modelPromise = post.save(uploadable.anonymous);
-                this._lastPromise = modelPromise;
+    _uploadSinglePost(uploadable, skipDuplicates) {
+        progress.start();
+        let reverseSearchPromise = Promise.resolve();
+        if (!uploadable.lookalikesConfirmed) {
+            reverseSearchPromise =
+                Post.reverseSearch(uploadable.url || uploadable.file);
+        }
+        this._lastCancellablePromise = reverseSearchPromise;
 
-                return modelPromise
-                    .then(() => {
+        return reverseSearchPromise.then(searchResult => {
+            if (searchResult) {
+                // notify about exact duplicate
+                if (searchResult.exactPost) {
+                    if (skipDuplicates) {
                         this._view.removeUploadable(uploadable);
                         return Promise.resolve();
-                    }).catch(errorMessage => {
-                        // XXX:
-                        // lame, API eats error codes so we need to match
-                        // messages instead
-                        if (e.detail.skipDuplicates &&
-                                errorMessage.match(/already uploaded/)) {
-                            return Promise.resolve();
-                        }
-                        return Promise.reject(errorMessage);
-                    });
-            });
-        }, Promise.resolve())
+                    } else {
+                        let error = new Error('Post already uploaded ' +
+                            `(@${searchResult.exactPost.id})`);
+                        error.uploadable = uploadable;
+                        return Promise.reject(error);
+                    }
+                }
 
-            .then(() => {
-                misc.disableExitConfirmation();
-                const ctx = router.show('/posts');
-                ctx.controller.showSuccess('Posts uploaded.');
-            }, errorMessage => {
-                this._view.showError(errorMessage);
-                this._view.enableForm();
-                return Promise.reject();
-            });
+                // notify about similar posts
+                if (searchResult.similarPosts.length) {
+                    let error = new Error(
+                        `Found ${searchResult.similarPosts.length} similar ` +
+                        'posts.\nYou can resume or discard this upload.');
+                    error.uploadable = uploadable;
+                    error.similarPosts = searchResult.similarPosts;
+                    return Promise.reject(error);
+                }
+            }
+
+            // no duplicates, proceed with saving
+            let post = this._uploadableToPost(uploadable);
+            let savePromise = post.save(uploadable.anonymous)
+                .then(() => {
+                    this._view.removeUploadable(uploadable);
+                    return Promise.resolve();
+                });
+            this._lastCancellablePromise = savePromise;
+            return savePromise;
+        }).then(result => {
+            progress.done();
+            return Promise.resolve(result);
+        }, error => {
+            error.uploadable = uploadable;
+            progress.done();
+            return Promise.reject(error);
+        });
+    }
+
+    _uploadableToPost(uploadable) {
+        let post = new Post();
+        post.safety = uploadable.safety;
+        post.flags = uploadable.flags;
+        for (let tagName of uploadable.tags) {
+            const tag = new Tag();
+            tag.names = [tagName];
+            post.tags.add(tag);
+        }
+        post.relations = uploadable.relations;
+        post.newContent = uploadable.url || uploadable.file;
+        // if uploadable.source is ever going to be a valid field (e.g when setting source directly in the upload window)
+        // you'll need to change the line below to `post.source = uploadable.source || uploadable.url;`
+        if (uploadable.url) post.source = uploadable.url;
+        return post;
     }
 }
 
 module.exports = router => {
-    router.enter('/upload', (ctx, next) => {
+    router.enter(['upload'], (ctx, next) => {
         ctx.controller = new PostUploadController();
     });
 };

client/js/controllers/settings_controller.js

@@ -22,7 +22,7 @@ class SettingsController {
 };
 
 module.exports = router => {
-    router.enter('/settings', (ctx, next) => {
+    router.enter(['settings'], (ctx, next) => {
         ctx.controller = new SettingsController();
     });
 };

client/js/controllers/snapshots_controller.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const api = require('../api.js');
-const misc = require('../util/misc.js');
+const uri = require('../util/uri.js');
 const SnapshotList = require('../models/snapshot_list.js');
 const PageController = require('../controllers/page_controller.js');
 const topNavigation = require('../models/top_navigation.js');
@@ -22,13 +22,14 @@ class SnapshotsController {
         this._pageController = new PageController();
         this._pageController.run({
             parameters: ctx.parameters,
-            getClientUrlForPage: page => {
+            defaultLimit: 25,
+            getClientUrlForPage: (offset, limit) => {
                 const parameters = Object.assign(
-                    {}, ctx.parameters, {page: page});
-                return '/history/' + misc.formatUrlParameters(parameters);
+                    {}, ctx.parameters, {offset: offset, limit: limit});
+                return uri.formatClientLink('history', parameters);
             },
-            requestPage: page => {
-                return SnapshotList.search('', page, 25);
+            requestPage: (offset, limit) => {
+                return SnapshotList.search('', offset, limit);
             },
             pageRenderer: pageCtx => {
                 Object.assign(pageCtx, {
@@ -43,7 +44,6 @@ class SnapshotsController {
 }
 
 module.exports = router => {
-    router.enter('/history/:parameters?',
-        (ctx, next) => { misc.parseUrlParametersRoute(ctx, next); },
+    router.enter(['history'],
         (ctx, next) => { ctx.controller = new SnapshotsController(ctx); });
 };

client/js/controllers/tag_categories_controller.js

@@ -29,9 +29,9 @@ class TagCategoriesController {
                 canSetDefault: api.hasPrivilege('tagCategories:setDefault'),
             });
             this._view.addEventListener('submit', e => this._evtSubmit(e));
-        }, errorMessage => {
+        }, error => {
             this._view = new EmptyView();
-            this._view.showError(errorMessage);
+            this._view.showError(error.message);
         });
     }
 
@@ -40,18 +40,18 @@ class TagCategoriesController {
         this._view.disableForm();
         this._tagCategories.save()
             .then(() => {
-                tags.refreshExport();
+                tags.refreshCategoryColorMap();
                 this._view.enableForm();
                 this._view.showSuccess('Changes saved.');
-            }, errorMessage => {
+            }, error => {
                 this._view.enableForm();
-                this._view.showError(errorMessage);
+                this._view.showError(error.message);
             });
     }
 }
 
 module.exports = router => {
-    router.enter('/tag-categories', (ctx, next) => {
+    router.enter(['tag-categories'], (ctx, next) => {
         ctx.controller = new TagCategoriesController(ctx, next);
     });
 };

client/js/controllers/tag_controller.js

@@ -3,8 +3,9 @@
 const router = require('../router.js');
 const api = require('../api.js');
 const misc = require('../util/misc.js');
-const tags = require('../tags.js');
+const uri = require('../util/uri.js');
 const Tag = require('../models/tag.js');
+const TagCategoryList = require('../models/tag_category_list.js');
 const topNavigation = require('../models/top_navigation.js');
 const TagView = require('../views/tag_view.js');
 const EmptyView = require('../views/empty_view.js');
@@ -17,7 +18,12 @@ class TagController {
             return;
         }
 
-        Tag.get(ctx.parameters.name).then(tag => {
+        Promise.all([
+            TagCategoryList.get(),
+            Tag.get(ctx.parameters.name),
+        ]).then(responses => {
+            const [tagCategoriesResponse, tag] = responses;
+
             topNavigation.activate('tags');
             topNavigation.setTitle('Tag #' + tag.names[0]);
 
@@ -25,7 +31,7 @@ class TagController {
             tag.addEventListener('change', e => this._evtSaved(e, section));
 
             const categories = {};
-            for (let category of tags.getAllCategories()) {
+            for (let category of tagCategoriesResponse.results) {
                 categories[category.name] = category.name;
             }
 
@@ -41,15 +47,16 @@ class TagController {
                 canMerge: api.hasPrivilege('tags:merge'),
                 canDelete: api.hasPrivilege('tags:delete'),
                 categories: categories,
+                escapeColons: uri.escapeColons,
             });
 
             this._view.addEventListener('change', e => this._evtChange(e));
             this._view.addEventListener('submit', e => this._evtUpdate(e));
             this._view.addEventListener('merge', e => this._evtMerge(e));
             this._view.addEventListener('delete', e => this._evtDelete(e));
-        }, errorMessage => {
+        }, error => {
             this._view = new EmptyView();
-            this._view.showError(errorMessage);
+            this._view.showError(error.message);
         });
     }
 
@@ -61,7 +68,8 @@ class TagController {
         misc.disableExitConfirmation();
         if (this._name !== e.detail.tag.names[0]) {
             router.replace(
-                '/tag/' + e.detail.tag.names[0] + '/' + section, null, false);
+                uri.formatClientLink('tag', e.detail.tag.names[0], section),
+                null, false);
         }
     }
 
@@ -74,20 +82,14 @@ class TagController {
         if (e.detail.category !== undefined) {
             e.detail.tag.category = e.detail.category;
         }
-        if (e.detail.implications !== undefined) {
-            e.detail.tag.implications = e.detail.implications;
-        }
-        if (e.detail.suggestions !== undefined) {
-            e.detail.tag.suggestions = e.detail.suggestions;
-        }
         if (e.detail.description !== undefined) {
             e.detail.tag.description = e.detail.description;
         }
         e.detail.tag.save().then(() => {
             this._view.showSuccess('Tag saved.');
             this._view.enableForm();
-        }, errorMessage => {
-            this._view.showError(errorMessage);
+        }, error => {
+            this._view.showError(error.message);
             this._view.enableForm();
         });
     }
@@ -95,15 +97,19 @@ class TagController {
     _evtMerge(e) {
         this._view.clearMessages();
         this._view.disableForm();
-        e.detail.tag.merge(e.detail.targetTagName).then(() => {
-            this._view.showSuccess('Tag merged.');
-            this._view.enableForm();
-            router.replace(
-                '/tag/' + e.detail.targetTagName + '/merge', null, false);
-        }, errorMessage => {
-            this._view.showError(errorMessage);
-            this._view.enableForm();
-        });
+        e.detail.tag
+            .merge(e.detail.targetTagName, e.detail.addAlias)
+            .then(() => {
+                this._view.showSuccess('Tag merged.');
+                this._view.enableForm();
+                router.replace(
+                    uri.formatClientLink(
+                        'tag', e.detail.targetTagName, 'merge'),
+                    null, false);
+            }, error => {
+                this._view.showError(error.message);
+                this._view.enableForm();
+            });
     }
 
     _evtDelete(e) {
@@ -111,26 +117,26 @@ class TagController {
         this._view.disableForm();
         e.detail.tag.delete()
             .then(() => {
-                const ctx = router.show('/tags/');
+                const ctx = router.show(uri.formatClientLink('tags'));
                 ctx.controller.showSuccess('Tag deleted.');
-            }, errorMessage => {
-                this._view.showError(errorMessage);
+            }, error => {
+                this._view.showError(error.message);
                 this._view.enableForm();
             });
     }
 }
 
 module.exports = router => {
-    router.enter('/tag/:name(.+?)/edit', (ctx, next) => {
+    router.enter(['tag', ':name', 'edit'], (ctx, next) => {
         ctx.controller = new TagController(ctx, 'edit');
     });
-    router.enter('/tag/:name(.+?)/merge', (ctx, next) => {
+    router.enter(['tag', ':name', 'merge'], (ctx, next) => {
         ctx.controller = new TagController(ctx, 'merge');
     });
-    router.enter('/tag/:name(.+?)/delete', (ctx, next) => {
+    router.enter(['tag', ':name', 'delete'], (ctx, next) => {
         ctx.controller = new TagController(ctx, 'delete');
     });
-    router.enter('/tag/:name(.+)', (ctx, next) => {
+    router.enter(['tag', ':name'], (ctx, next) => {
         ctx.controller = new TagController(ctx, 'summary');
     });
 };

client/js/controllers/tag_list_controller.js

@@ -1,7 +1,8 @@
 'use strict';
 
+const router = require('../router.js');
 const api = require('../api.js');
-const misc = require('../util/misc.js');
+const uri = require('../util/uri.js');
 const TagList = require('../models/tag_list.js');
 const topNavigation = require('../models/top_navigation.js');
 const PageController = require('../controllers/page_controller.js');
@@ -10,7 +11,12 @@ const TagsPageView = require('../views/tags_page_view.js');
 const EmptyView = require('../views/empty_view.js');
 
 const fields = [
-    'names', 'suggestions', 'implications', 'creationTime', 'usages'];
+    'names',
+    'suggestions',
+    'implications',
+    'creationTime',
+    'usages',
+    'category'];
 
 class TagListController {
     constructor(ctx) {
@@ -46,10 +52,8 @@ class TagListController {
     }
 
     _evtNavigate(e) {
-        history.pushState(
-            null,
-            window.title,
-            '/tags/' + misc.formatUrlParameters(e.detail.parameters));
+        router.showNoDispatch(
+            uri.formatClientLink('tags', e.detail.parameters));
         Object.assign(this._ctx.parameters, e.detail.parameters);
         this._syncPageController();
     }
@@ -57,14 +61,15 @@ class TagListController {
     _syncPageController() {
         this._pageController.run({
             parameters: this._ctx.parameters,
-            getClientUrlForPage: page => {
+            defaultLimit: 50,
+            getClientUrlForPage: (offset, limit) => {
                 const parameters = Object.assign(
-                    {}, this._ctx.parameters, {page: page});
-                return '/tags/' + misc.formatUrlParameters(parameters);
+                    {}, this._ctx.parameters, {offset: offset, limit: limit});
+                return uri.formatClientLink('tags', parameters);
             },
-            requestPage: page => {
+            requestPage: (offset, limit) => {
                 return TagList.search(
-                    this._ctx.parameters.query, page, 50, fields);
+                    this._ctx.parameters.query, offset, limit, fields);
             },
             pageRenderer: pageCtx => {
                 return new TagsPageView(pageCtx);
@@ -75,7 +80,6 @@ class TagListController {
 
 module.exports = router => {
     router.enter(
-        '/tags/:parameters(.*)?',
-        (ctx, next) => { misc.parseUrlParametersRoute(ctx, next); },
+        ['tags'],
         (ctx, next) => { ctx.controller = new TagListController(ctx); });
 };

client/js/controllers/top_navigation_controller.js

@@ -6,15 +6,17 @@ const TopNavigationView = require('../views/top_navigation_view.js');
 
 class TopNavigationController {
     constructor() {
-        this._topNavigationView = new TopNavigationView();
+        api.fetchConfig().then(() => {
+            this._topNavigationView = new TopNavigationView();
 
-        topNavigation.addEventListener(
-            'activate', e => this._evtActivate(e));
+            topNavigation.addEventListener(
+                'activate', e => this._evtActivate(e));
 
-        api.addEventListener('login', e => this._evtAuthChange(e));
-        api.addEventListener('logout', e => this._evtAuthChange(e));
+            api.addEventListener('login', e => this._evtAuthChange(e));
+            api.addEventListener('logout', e => this._evtAuthChange(e));
 
-        this._render();
+            this._render();
+        });
     }
 
     _evtAuthChange(e) {
@@ -26,7 +28,7 @@ class TopNavigationController {
     }
 
     _updateNavigationFromPrivileges() {
-        topNavigation.get('account').url = '/user/' + api.userName;
+        topNavigation.get('account').url = 'user/' + api.userName;
         topNavigation.get('account').imageUrl =
             api.user ? api.user.avatarUrl : null;
 
@@ -47,10 +49,12 @@ class TopNavigationController {
             topNavigation.hide('users');
         }
         if (api.isLoggedIn()) {
-            topNavigation.hide('register');
+            if (!api.hasPrivilege('users:create:any')) {
+                topNavigation.hide('register');
+            }
             topNavigation.hide('login');
         } else {
-            if (!api.hasPrivilege('users:create')) {
+            if (!api.hasPrivilege('users:create:self')) {
                 topNavigation.hide('register');
             }
             topNavigation.hide('account');
@@ -62,6 +66,7 @@ class TopNavigationController {
         this._updateNavigationFromPrivileges();
         this._topNavigationView.render({
             items: topNavigation.getAll(),
+            name: api.getName()
         });
         this._topNavigationView.activate(
             topNavigation.activeItem ? topNavigation.activeItem.key : '');