diff --git a/js/old/admin/AdminApplication.js b/js/old/admin/AdminApplication.js
deleted file mode 100644
index e0d9464e4..000000000
--- a/js/old/admin/AdminApplication.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import HeaderPrimary from './components/HeaderPrimary';
-import HeaderSecondary from './components/HeaderSecondary';
-import routes from './routes';
-import Application from '../common/Application';
-import Navigation from '../common/components/Navigation';
-import AdminNav from './components/AdminNav';
-
-export default class AdminApplication extends Application {
-  extensionSettings = {};
-
-  history = {
-    canGoBack: () => true,
-    getPrevious: () => {},
-    backUrl: () => this.forum.attribute('baseUrl'),
-    back: function () {
-      window.location = this.backUrl();
-    },
-  };
-
-  constructor() {
-    super();
-
-    routes(this);
-  }
-
-  /**
-   * @inheritdoc
-   */
-  mount() {
-    m.mount(document.getElementById('app-navigation'), Navigation.component({ className: 'App-backControl', drawer: true }));
-    m.mount(document.getElementById('header-navigation'), Navigation.component());
-    m.mount(document.getElementById('header-primary'), HeaderPrimary.component());
-    m.mount(document.getElementById('header-secondary'), HeaderSecondary.component());
-    m.mount(document.getElementById('admin-navigation'), AdminNav.component());
-
-    m.route.mode = 'hash';
-    super.mount();
-
-    // If an extension has just been enabled, then we will run its settings
-    // callback.
-    const enabled = localStorage.getItem('enabledExtension');
-    if (enabled && this.extensionSettings[enabled]) {
-      this.extensionSettings[enabled]();
-      localStorage.removeItem('enabledExtension');
-    }
-  }
-
-  getRequiredPermissions(permission) {
-    const required = [];
-
-    if (permission === 'startDiscussion' || permission.indexOf('discussion.') === 0) {
-      required.push('viewDiscussions');
-    }
-    if (permission === 'discussion.delete') {
-      required.push('discussion.hide');
-    }
-    if (permission === 'discussion.deletePosts') {
-      required.push('discussion.hidePosts');
-    }
-
-    return required;
-  }
-}
diff --git a/js/old/admin/compat.js b/js/old/admin/compat.js
deleted file mode 100644
index 0b5706b04..000000000
--- a/js/old/admin/compat.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import compat from '../common/compat';
-
-import saveSettings from './utils/saveSettings';
-import SettingDropdown from './components/SettingDropdown';
-import EditCustomFooterModal from './components/EditCustomFooterModal';
-import SessionDropdown from './components/SessionDropdown';
-import HeaderPrimary from './components/HeaderPrimary';
-import AppearancePage from './components/AppearancePage';
-import Page from './components/Page';
-import StatusWidget from './components/StatusWidget';
-import HeaderSecondary from './components/HeaderSecondary';
-import SettingsModal from './components/SettingsModal';
-import DashboardWidget from './components/DashboardWidget';
-import AddExtensionModal from './components/AddExtensionModal';
-import ExtensionsPage from './components/ExtensionsPage';
-import AdminLinkButton from './components/AdminLinkButton';
-import PermissionGrid from './components/PermissionGrid';
-import Widget from './components/Widget';
-import MailPage from './components/MailPage';
-import UploadImageButton from './components/UploadImageButton';
-import LoadingModal from './components/LoadingModal';
-import DashboardPage from './components/DashboardPage';
-import BasicsPage from './components/BasicsPage';
-import EditCustomHeaderModal from './components/EditCustomHeaderModal';
-import PermissionsPage from './components/PermissionsPage';
-import PermissionDropdown from './components/PermissionDropdown';
-import AdminNav from './components/AdminNav';
-import EditCustomCssModal from './components/EditCustomCssModal';
-import EditGroupModal from './components/EditGroupModal';
-import routes from './routes';
-import AdminApplication from './AdminApplication';
-
-export default Object.assign(compat, {
-  'utils/saveSettings': saveSettings,
-  'components/SettingDropdown': SettingDropdown,
-  'components/EditCustomFooterModal': EditCustomFooterModal,
-  'components/SessionDropdown': SessionDropdown,
-  'components/HeaderPrimary': HeaderPrimary,
-  'components/AppearancePage': AppearancePage,
-  'components/Page': Page,
-  'components/StatusWidget': StatusWidget,
-  'components/HeaderSecondary': HeaderSecondary,
-  'components/SettingsModal': SettingsModal,
-  'components/DashboardWidget': DashboardWidget,
-  'components/AddExtensionModal': AddExtensionModal,
-  'components/ExtensionsPage': ExtensionsPage,
-  'components/AdminLinkButton': AdminLinkButton,
-  'components/PermissionGrid': PermissionGrid,
-  'components/Widget': Widget,
-  'components/MailPage': MailPage,
-  'components/UploadImageButton': UploadImageButton,
-  'components/LoadingModal': LoadingModal,
-  'components/DashboardPage': DashboardPage,
-  'components/BasicsPage': BasicsPage,
-  'components/EditCustomHeaderModal': EditCustomHeaderModal,
-  'components/PermissionsPage': PermissionsPage,
-  'components/PermissionDropdown': PermissionDropdown,
-  'components/AdminNav': AdminNav,
-  'components/EditCustomCssModal': EditCustomCssModal,
-  'components/EditGroupModal': EditGroupModal,
-  routes: routes,
-  AdminApplication: AdminApplication,
-});
diff --git a/js/old/admin/components/AddExtensionModal.js b/js/old/admin/components/AddExtensionModal.js
deleted file mode 100644
index d3428c9ac..000000000
--- a/js/old/admin/components/AddExtensionModal.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * This file is part of Flarum.
- *
- * (c) Toby Zerner <toby.zerner@gmail.com>
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-import Modal from '../../common/components/Modal';
-
-export default class AddExtensionModal extends Modal {
-  className() {
-    return 'AddExtensionModal Modal--small';
-  }
-
-  title() {
-    return app.translator.trans('core.admin.add_extension.title');
-  }
-
-  content() {
-    return (
-      <div className="Modal-body">
-        <p>{app.translator.trans('core.admin.add_extension.temporary_text')}</p>
-        <p>
-          {app.translator.trans('core.admin.add_extension.install_text', { a: <a href="https://discuss.flarum.org/t/extensions" target="_blank" /> })}
-        </p>
-        <p>{app.translator.trans('core.admin.add_extension.developer_text', { a: <a href="http://flarum.org/docs/extend" target="_blank" /> })}</p>
-      </div>
-    );
-  }
-}
diff --git a/js/old/admin/components/AdminLinkButton.js b/js/old/admin/components/AdminLinkButton.js
deleted file mode 100644
index 2602bc273..000000000
--- a/js/old/admin/components/AdminLinkButton.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- * This file is part of Flarum.
- *
- * (c) Toby Zerner <toby.zerner@gmail.com>
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-import LinkButton from '../../common/components/LinkButton';
-
-export default class AdminLinkButton extends LinkButton {
-  getButtonContent() {
-    const content = super.getButtonContent();
-
-    content.push(<div className="AdminLinkButton-description">{this.props.description}</div>);
-
-    return content;
-  }
-}
diff --git a/js/old/admin/components/AdminNav.js b/js/old/admin/components/AdminNav.js
deleted file mode 100644
index f96a4e162..000000000
--- a/js/old/admin/components/AdminNav.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/*
- * This file is part of Flarum.
- *
- * (c) Toby Zerner <toby.zerner@gmail.com>
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-import Component from '../../common/Component';
-import AdminLinkButton from './AdminLinkButton';
-import SelectDropdown from '../../common/components/SelectDropdown';
-import ItemList from '../../common/utils/ItemList';
-
-export default class AdminNav extends Component {
-  view() {
-    return (
-      <SelectDropdown className="AdminNav App-titleControl" buttonClassName="Button">
-        {this.items().toArray()}
-      </SelectDropdown>
-    );
-  }
-
-  /**
-   * Build an item list of links to show in the admin navigation.
-   *
-   * @return {ItemList}
-   */
-  items() {
-    const items = new ItemList();
-
-    items.add(
-      'dashboard',
-      AdminLinkButton.component({
-        href: app.route('dashboard'),
-        icon: 'far fa-chart-bar',
-        children: app.translator.trans('core.admin.nav.dashboard_button'),
-        description: app.translator.trans('core.admin.nav.dashboard_text'),
-      })
-    );
-
-    items.add(
-      'basics',
-      AdminLinkButton.component({
-        href: app.route('basics'),
-        icon: 'fas fa-pencil-alt',
-        children: app.translator.trans('core.admin.nav.basics_button'),
-        description: app.translator.trans('core.admin.nav.basics_text'),
-      })
-    );
-
-    items.add(
-      'mail',
-      AdminLinkButton.component({
-        href: app.route('mail'),
-        icon: 'fas fa-envelope',
-        children: app.translator.trans('core.admin.nav.email_button'),
-        description: app.translator.trans('core.admin.nav.email_text'),
-      })
-    );
-
-    items.add(
-      'permissions',
-      AdminLinkButton.component({
-        href: app.route('permissions'),
-        icon: 'fas fa-key',
-        children: app.translator.trans('core.admin.nav.permissions_button'),
-        description: app.translator.trans('core.admin.nav.permissions_text'),
-      })
-    );
-
-    items.add(
-      'appearance',
-      AdminLinkButton.component({
-        href: app.route('appearance'),
-        icon: 'fas fa-paint-brush',
-        children: app.translator.trans('core.admin.nav.appearance_button'),
-        description: app.translator.trans('core.admin.nav.appearance_text'),
-      })
-    );
-
-    items.add(
-      'extensions',
-      AdminLinkButton.component({
-        href: app.route('extensions'),
-        icon: 'fas fa-puzzle-piece',
-        children: app.translator.trans('core.admin.nav.extensions_button'),
-        description: app.translator.trans('core.admin.nav.extensions_text'),
-      })
-    );
-
-    return items;
-  }
-}
diff --git a/js/old/admin/components/AppearancePage.js b/js/old/admin/components/AppearancePage.js
deleted file mode 100644
index 98a1cc373..000000000
--- a/js/old/admin/components/AppearancePage.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import Page from './Page';
-import Button from '../../common/components/Button';
-import Switch from '../../common/components/Switch';
-import EditCustomCssModal from './EditCustomCssModal';
-import EditCustomHeaderModal from './EditCustomHeaderModal';
-import EditCustomFooterModal from './EditCustomFooterModal';
-import UploadImageButton from './UploadImageButton';
-import saveSettings from '../utils/saveSettings';
-
-export default class AppearancePage extends Page {
-  init() {
-    super.init();
-
-    this.primaryColor = m.prop(app.data.settings.theme_primary_color);
-    this.secondaryColor = m.prop(app.data.settings.theme_secondary_color);
-    this.darkMode = m.prop(app.data.settings.theme_dark_mode === '1');
-    this.coloredHeader = m.prop(app.data.settings.theme_colored_header === '1');
-  }
-
-  view() {
-    return (
-      <div className="AppearancePage">
-        <div className="container">
-          <form onsubmit={this.onsubmit.bind(this)}>
-            <fieldset className="AppearancePage-colors">
-              <legend>{app.translator.trans('core.admin.appearance.colors_heading')}</legend>
-              <div className="helpText">{app.translator.trans('core.admin.appearance.colors_text')}</div>
-
-              <div className="AppearancePage-colors-input">
-                <input
-                  className="FormControl"
-                  type="text"
-                  placeholder="#aaaaaa"
-                  value={this.primaryColor()}
-                  onchange={m.withAttr('value', this.primaryColor)}
-                />
-                <input
-                  className="FormControl"
-                  type="text"
-                  placeholder="#aaaaaa"
-                  value={this.secondaryColor()}
-                  onchange={m.withAttr('value', this.secondaryColor)}
-                />
-              </div>
-
-              {Switch.component({
-                state: this.darkMode(),
-                children: app.translator.trans('core.admin.appearance.dark_mode_label'),
-                onchange: this.darkMode,
-              })}
-
-              {Switch.component({
-                state: this.coloredHeader(),
-                children: app.translator.trans('core.admin.appearance.colored_header_label'),
-                onchange: this.coloredHeader,
-              })}
-
-              {Button.component({
-                className: 'Button Button--primary',
-                type: 'submit',
-                children: app.translator.trans('core.admin.appearance.submit_button'),
-                loading: this.loading,
-              })}
-            </fieldset>
-          </form>
-
-          <fieldset>
-            <legend>{app.translator.trans('core.admin.appearance.logo_heading')}</legend>
-            <div className="helpText">{app.translator.trans('core.admin.appearance.logo_text')}</div>
-            <UploadImageButton name="logo" />
-          </fieldset>
-
-          <fieldset>
-            <legend>{app.translator.trans('core.admin.appearance.favicon_heading')}</legend>
-            <div className="helpText">{app.translator.trans('core.admin.appearance.favicon_text')}</div>
-            <UploadImageButton name="favicon" />
-          </fieldset>
-
-          <fieldset>
-            <legend>{app.translator.trans('core.admin.appearance.custom_header_heading')}</legend>
-            <div className="helpText">{app.translator.trans('core.admin.appearance.custom_header_text')}</div>
-            {Button.component({
-              className: 'Button',
-              children: app.translator.trans('core.admin.appearance.edit_header_button'),
-              onclick: () => app.modal.show(new EditCustomHeaderModal()),
-            })}
-          </fieldset>
-
-          <fieldset>
-            <legend>{app.translator.trans('core.admin.appearance.custom_footer_heading')}</legend>
-            <div className="helpText">{app.translator.trans('core.admin.appearance.custom_footer_text')}</div>
-            {Button.component({
-              className: 'Button',
-              children: app.translator.trans('core.admin.appearance.edit_footer_button'),
-              onclick: () => app.modal.show(new EditCustomFooterModal()),
-            })}
-          </fieldset>
-
-          <fieldset>
-            <legend>{app.translator.trans('core.admin.appearance.custom_styles_heading')}</legend>
-            <div className="helpText">{app.translator.trans('core.admin.appearance.custom_styles_text')}</div>
-            {Button.component({
-              className: 'Button',
-              children: app.translator.trans('core.admin.appearance.edit_css_button'),
-              onclick: () => app.modal.show(new EditCustomCssModal()),
-            })}
-          </fieldset>
-        </div>
-      </div>
-    );
-  }
-
-  onsubmit(e) {
-    e.preventDefault();
-
-    const hex = /^#[0-9a-f]{3}([0-9a-f]{3})?$/i;
-
-    if (!hex.test(this.primaryColor()) || !hex.test(this.secondaryColor())) {
-      alert(app.translator.trans('core.admin.appearance.enter_hex_message'));
-      return;
-    }
-
-    this.loading = true;
-
-    saveSettings({
-      theme_primary_color: this.primaryColor(),
-      theme_secondary_color: this.secondaryColor(),
-      theme_dark_mode: this.darkMode(),
-      theme_colored_header: this.coloredHeader(),
-    }).then(() => window.location.reload());
-  }
-}
diff --git a/js/old/admin/components/BasicsPage.js b/js/old/admin/components/BasicsPage.js
deleted file mode 100644
index 746bcce8b..000000000
--- a/js/old/admin/components/BasicsPage.js
+++ /dev/null
@@ -1,174 +0,0 @@
-import Page from './Page';
-import FieldSet from '../../common/components/FieldSet';
-import Select from '../../common/components/Select';
-import Button from '../../common/components/Button';
-import Alert from '../../common/components/Alert';
-import saveSettings from '../utils/saveSettings';
-import ItemList from '../../common/utils/ItemList';
-import Switch from '../../common/components/Switch';
-
-export default class BasicsPage extends Page {
-  init() {
-    super.init();
-
-    this.loading = false;
-
-    this.fields = [
-      'forum_title',
-      'forum_description',
-      'default_locale',
-      'show_language_selector',
-      'default_route',
-      'welcome_title',
-      'welcome_message',
-    ];
-    this.values = {};
-
-    const settings = app.data.settings;
-    this.fields.forEach((key) => (this.values[key] = m.prop(settings[key])));
-
-    this.localeOptions = {};
-    const locales = app.data.locales;
-    for (const i in locales) {
-      this.localeOptions[i] = `${locales[i]} (${i})`;
-    }
-
-    if (typeof this.values.show_language_selector() !== 'number') this.values.show_language_selector(1);
-  }
-
-  view() {
-    return (
-      <div className="BasicsPage">
-        <div className="container">
-          <form onsubmit={this.onsubmit.bind(this)}>
-            {FieldSet.component({
-              label: app.translator.trans('core.admin.basics.forum_title_heading'),
-              children: [<input className="FormControl" value={this.values.forum_title()} oninput={m.withAttr('value', this.values.forum_title)} />],
-            })}
-
-            {FieldSet.component({
-              label: app.translator.trans('core.admin.basics.forum_description_heading'),
-              children: [
-                <div className="helpText">{app.translator.trans('core.admin.basics.forum_description_text')}</div>,
-                <textarea
-                  className="FormControl"
-                  value={this.values.forum_description()}
-                  oninput={m.withAttr('value', this.values.forum_description)}
-                />,
-              ],
-            })}
-
-            {Object.keys(this.localeOptions).length > 1
-              ? FieldSet.component({
-                  label: app.translator.trans('core.admin.basics.default_language_heading'),
-                  children: [
-                    Select.component({
-                      options: this.localeOptions,
-                      value: this.values.default_locale(),
-                      onchange: this.values.default_locale,
-                    }),
-                    Switch.component({
-                      state: this.values.show_language_selector(),
-                      onchange: this.values.show_language_selector,
-                      children: app.translator.trans('core.admin.basics.show_language_selector_label'),
-                    }),
-                  ],
-                })
-              : ''}
-
-            {FieldSet.component({
-              label: app.translator.trans('core.admin.basics.home_page_heading'),
-              className: 'BasicsPage-homePage',
-              children: [
-                <div className="helpText">{app.translator.trans('core.admin.basics.home_page_text')}</div>,
-                this.homePageItems()
-                  .toArray()
-                  .map(({ path, label }) => (
-                    <label className="checkbox">
-                      <input
-                        type="radio"
-                        name="homePage"
-                        value={path}
-                        checked={this.values.default_route() === path}
-                        onclick={m.withAttr('value', this.values.default_route)}
-                      />
-                      {label}
-                    </label>
-                  )),
-              ],
-            })}
-
-            {FieldSet.component({
-              label: app.translator.trans('core.admin.basics.welcome_banner_heading'),
-              className: 'BasicsPage-welcomeBanner',
-              children: [
-                <div className="helpText">{app.translator.trans('core.admin.basics.welcome_banner_text')}</div>,
-                <div className="BasicsPage-welcomeBanner-input">
-                  <input className="FormControl" value={this.values.welcome_title()} oninput={m.withAttr('value', this.values.welcome_title)} />
-                  <textarea
-                    className="FormControl"
-                    value={this.values.welcome_message()}
-                    oninput={m.withAttr('value', this.values.welcome_message)}
-                  />
-                </div>,
-              ],
-            })}
-
-            {Button.component({
-              type: 'submit',
-              className: 'Button Button--primary',
-              children: app.translator.trans('core.admin.basics.submit_button'),
-              loading: this.loading,
-              disabled: !this.changed(),
-            })}
-          </form>
-        </div>
-      </div>
-    );
-  }
-
-  changed() {
-    return this.fields.some((key) => this.values[key]() !== app.data.settings[key]);
-  }
-
-  /**
-   * Build a list of options for the default homepage. Each option must be an
-   * object with `path` and `label` properties.
-   *
-   * @return {ItemList}
-   * @public
-   */
-  homePageItems() {
-    const items = new ItemList();
-
-    items.add('allDiscussions', {
-      path: '/all',
-      label: app.translator.trans('core.admin.basics.all_discussions_label'),
-    });
-
-    return items;
-  }
-
-  onsubmit(e) {
-    e.preventDefault();
-
-    if (this.loading) return;
-
-    this.loading = true;
-    app.alerts.dismiss(this.successAlert);
-
-    const settings = {};
-
-    this.fields.forEach((key) => (settings[key] = this.values[key]()));
-
-    saveSettings(settings)
-      .then(() => {
-        app.alerts.show((this.successAlert = new Alert({ type: 'success', children: app.translator.trans('core.admin.basics.saved_message') })));
-      })
-      .catch(() => {})
-      .then(() => {
-        this.loading = false;
-        m.redraw();
-      });
-  }
-}
diff --git a/js/old/admin/components/DashboardPage.js b/js/old/admin/components/DashboardPage.js
deleted file mode 100644
index 2e4c0593e..000000000
--- a/js/old/admin/components/DashboardPage.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Page from './Page';
-import StatusWidget from './StatusWidget';
-
-export default class DashboardPage extends Page {
-  view() {
-    return (
-      <div className="DashboardPage">
-        <div className="container">{this.availableWidgets()}</div>
-      </div>
-    );
-  }
-
-  availableWidgets() {
-    return [<StatusWidget />];
-  }
-}
diff --git a/js/old/admin/components/DashboardWidget.js b/js/old/admin/components/DashboardWidget.js
deleted file mode 100644
index dd8bdb4e7..000000000
--- a/js/old/admin/components/DashboardWidget.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * This file is part of Flarum.
- *
- * (c) Toby Zerner <toby.zerner@gmail.com>
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-import Component from '../../common/Component';
-
-export default class Widget extends Component {
-  view() {
-    return <div className={'Widget ' + this.className()}>{this.content()}</div>;
-  }
-
-  /**
-   * Get the class name to apply to the widget.
-   *
-   * @return {String}
-   */
-  className() {
-    return '';
-  }
-
-  /**
-   * Get the content of the widget.
-   *
-   * @return {VirtualElement}
-   */
-  content() {
-    return [];
-  }
-}
diff --git a/js/old/admin/components/EditCustomCssModal.js b/js/old/admin/components/EditCustomCssModal.js
deleted file mode 100644
index c7686b085..000000000
--- a/js/old/admin/components/EditCustomCssModal.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import SettingsModal from './SettingsModal';
-
-export default class EditCustomCssModal extends SettingsModal {
-  className() {
-    return 'EditCustomCssModal Modal--large';
-  }
-
-  title() {
-    return app.translator.trans('core.admin.edit_css.title');
-  }
-
-  form() {
-    return [
-      <p>
-        {app.translator.trans('core.admin.edit_css.customize_text', {
-          a: <a href="https://github.com/flarum/core/tree/master/less" target="_blank" />,
-        })}
-      </p>,
-      <div className="Form-group">
-        <textarea className="FormControl" rows="30" bidi={this.setting('custom_less')} />
-      </div>,
-    ];
-  }
-
-  onsaved() {
-    window.location.reload();
-  }
-}
diff --git a/js/old/admin/components/EditCustomFooterModal.js b/js/old/admin/components/EditCustomFooterModal.js
deleted file mode 100644
index 88d97535e..000000000
--- a/js/old/admin/components/EditCustomFooterModal.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import SettingsModal from './SettingsModal';
-
-export default class EditCustomFooterModal extends SettingsModal {
-  className() {
-    return 'EditCustomFooterModal Modal--large';
-  }
-
-  title() {
-    return app.translator.trans('core.admin.edit_footer.title');
-  }
-
-  form() {
-    return [
-      <p>{app.translator.trans('core.admin.edit_footer.customize_text')}</p>,
-      <div className="Form-group">
-        <textarea className="FormControl" rows="30" bidi={this.setting('custom_footer')} />
-      </div>,
-    ];
-  }
-
-  onsaved() {
-    window.location.reload();
-  }
-}
diff --git a/js/old/admin/components/EditCustomHeaderModal.js b/js/old/admin/components/EditCustomHeaderModal.js
deleted file mode 100644
index 24625cbd7..000000000
--- a/js/old/admin/components/EditCustomHeaderModal.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import SettingsModal from './SettingsModal';
-
-export default class EditCustomHeaderModal extends SettingsModal {
-  className() {
-    return 'EditCustomHeaderModal Modal--large';
-  }
-
-  title() {
-    return app.translator.trans('core.admin.edit_header.title');
-  }
-
-  form() {
-    return [
-      <p>{app.translator.trans('core.admin.edit_header.customize_text')}</p>,
-      <div className="Form-group">
-        <textarea className="FormControl" rows="30" bidi={this.setting('custom_header')} />
-      </div>,
-    ];
-  }
-
-  onsaved() {
-    window.location.reload();
-  }
-}
diff --git a/js/old/admin/components/EditGroupModal.js b/js/old/admin/components/EditGroupModal.js
deleted file mode 100644
index 12d04c68d..000000000
--- a/js/old/admin/components/EditGroupModal.js
+++ /dev/null
@@ -1,144 +0,0 @@
-import Modal from '../../common/components/Modal';
-import Button from '../../common/components/Button';
-import Badge from '../../common/components/Badge';
-import Group from '../../common/models/Group';
-import ItemList from '../../common/utils/ItemList';
-
-/**
- * The `EditGroupModal` component shows a modal dialog which allows the user
- * to create or edit a group.
- */
-export default class EditGroupModal extends Modal {
-  init() {
-    this.group = this.props.group || app.store.createRecord('groups');
-
-    this.nameSingular = m.prop(this.group.nameSingular() || '');
-    this.namePlural = m.prop(this.group.namePlural() || '');
-    this.icon = m.prop(this.group.icon() || '');
-    this.color = m.prop(this.group.color() || '');
-  }
-
-  className() {
-    return 'EditGroupModal Modal--small';
-  }
-
-  title() {
-    return [
-      this.color() || this.icon()
-        ? Badge.component({
-            icon: this.icon(),
-            style: { backgroundColor: this.color() },
-          })
-        : '',
-      ' ',
-      this.namePlural() || app.translator.trans('core.admin.edit_group.title'),
-    ];
-  }
-
-  content() {
-    return (
-      <div className="Modal-body">
-        <div className="Form">{this.fields().toArray()}</div>
-      </div>
-    );
-  }
-
-  fields() {
-    const items = new ItemList();
-
-    items.add(
-      'name',
-      <div className="Form-group">
-        <label>{app.translator.trans('core.admin.edit_group.name_label')}</label>
-        <div className="EditGroupModal-name-input">
-          <input
-            className="FormControl"
-            placeholder={app.translator.trans('core.admin.edit_group.singular_placeholder')}
-            value={this.nameSingular()}
-            oninput={m.withAttr('value', this.nameSingular)}
-          />
-          <input
-            className="FormControl"
-            placeholder={app.translator.trans('core.admin.edit_group.plural_placeholder')}
-            value={this.namePlural()}
-            oninput={m.withAttr('value', this.namePlural)}
-          />
-        </div>
-      </div>,
-      30
-    );
-
-    items.add(
-      'color',
-      <div className="Form-group">
-        <label>{app.translator.trans('core.admin.edit_group.color_label')}</label>
-        <input className="FormControl" placeholder="#aaaaaa" value={this.color()} oninput={m.withAttr('value', this.color)} />
-      </div>,
-      20
-    );
-
-    items.add(
-      'icon',
-      <div className="Form-group">
-        <label>{app.translator.trans('core.admin.edit_group.icon_label')}</label>
-        <div className="helpText">
-          {app.translator.trans('core.admin.edit_group.icon_text', { a: <a href="https://fontawesome.com/icons?m=free" tabindex="-1" /> })}
-        </div>
-        <input className="FormControl" placeholder="fas fa-bolt" value={this.icon()} oninput={m.withAttr('value', this.icon)} />
-      </div>,
-      10
-    );
-
-    items.add(
-      'submit',
-      <div className="Form-group">
-        {Button.component({
-          type: 'submit',
-          className: 'Button Button--primary EditGroupModal-save',
-          loading: this.loading,
-          children: app.translator.trans('core.admin.edit_group.submit_button'),
-        })}
-        {this.group.exists && this.group.id() !== Group.ADMINISTRATOR_ID ? (
-          <button type="button" className="Button EditGroupModal-delete" onclick={this.deleteGroup.bind(this)}>
-            {app.translator.trans('core.admin.edit_group.delete_button')}
-          </button>
-        ) : (
-          ''
-        )}
-      </div>,
-      -10
-    );
-
-    return items;
-  }
-
-  submitData() {
-    return {
-      nameSingular: this.nameSingular(),
-      namePlural: this.namePlural(),
-      color: this.color(),
-      icon: this.icon(),
-    };
-  }
-
-  onsubmit(e) {
-    e.preventDefault();
-
-    this.loading = true;
-
-    this.group
-      .save(this.submitData(), { errorHandler: this.onerror.bind(this) })
-      .then(this.hide.bind(this))
-      .catch(() => {
-        this.loading = false;
-        m.redraw();
-      });
-  }
-
-  deleteGroup() {
-    if (confirm(app.translator.trans('core.admin.edit_group.delete_confirmation'))) {
-      this.group.delete().then(() => m.redraw());
-      this.hide();
-    }
-  }
-}
diff --git a/js/old/admin/components/ExtensionsPage.js b/js/old/admin/components/ExtensionsPage.js
deleted file mode 100644
index c3cb85b07..000000000
--- a/js/old/admin/components/ExtensionsPage.js
+++ /dev/null
@@ -1,131 +0,0 @@
-import Page from './Page';
-import LinkButton from '../../common/components/LinkButton';
-import Button from '../../common/components/Button';
-import Dropdown from '../../common/components/Dropdown';
-import Separator from '../../common/components/Separator';
-import AddExtensionModal from './AddExtensionModal';
-import LoadingModal from './LoadingModal';
-import ItemList from '../../common/utils/ItemList';
-import icon from '../../common/helpers/icon';
-import listItems from '../../common/helpers/listItems';
-
-export default class ExtensionsPage extends Page {
-  view() {
-    return (
-      <div className="ExtensionsPage">
-        <div className="ExtensionsPage-header">
-          <div className="container">
-            {Button.component({
-              children: app.translator.trans('core.admin.extensions.add_button'),
-              icon: 'fas fa-plus',
-              className: 'Button Button--primary',
-              onclick: () => app.modal.show(new AddExtensionModal()),
-            })}
-          </div>
-        </div>
-
-        <div className="ExtensionsPage-list">
-          <div className="container">
-            <ul className="ExtensionList">
-              {Object.keys(app.data.extensions).map((id) => {
-                const extension = app.data.extensions[id];
-                const controls = this.controlItems(extension.id).toArray();
-
-                return (
-                  <li className={'ExtensionListItem ' + (!this.isEnabled(extension.id) ? 'disabled' : '')}>
-                    <div className="ExtensionListItem-content">
-                      <span className="ExtensionListItem-icon ExtensionIcon" style={extension.icon}>
-                        {extension.icon ? icon(extension.icon.name) : ''}
-                      </span>
-                      {controls.length ? (
-                        <Dropdown
-                          className="ExtensionListItem-controls"
-                          buttonClassName="Button Button--icon Button--flat"
-                          menuClassName="Dropdown-menu--right"
-                          icon="fas fa-ellipsis-h"
-                        >
-                          {controls}
-                        </Dropdown>
-                      ) : (
-                        ''
-                      )}
-                      <div className="ExtensionListItem-main">
-                        <label className="ExtensionListItem-title">
-                          <input type="checkbox" checked={this.isEnabled(extension.id)} onclick={this.toggle.bind(this, extension.id)} />{' '}
-                          {extension.extra['flarum-extension'].title}
-                        </label>
-                        <div className="ExtensionListItem-version">{extension.version}</div>
-                        <div className="ExtensionListItem-description">{extension.description}</div>
-                      </div>
-                    </div>
-                  </li>
-                );
-              })}
-            </ul>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  controlItems(name) {
-    const items = new ItemList();
-    const enabled = this.isEnabled(name);
-
-    if (app.extensionSettings[name]) {
-      items.add(
-        'settings',
-        Button.component({
-          icon: 'fas fa-cog',
-          children: app.translator.trans('core.admin.extensions.settings_button'),
-          onclick: app.extensionSettings[name],
-        })
-      );
-    }
-
-    if (!enabled) {
-      items.add(
-        'uninstall',
-        Button.component({
-          icon: 'far fa-trash-alt',
-          children: app.translator.trans('core.admin.extensions.uninstall_button'),
-          onclick: () => {
-            app
-              .request({
-                url: app.forum.attribute('apiUrl') + '/extensions/' + name,
-                method: 'DELETE',
-              })
-              .then(() => window.location.reload());
-
-            app.modal.show(new LoadingModal());
-          },
-        })
-      );
-    }
-
-    return items;
-  }
-
-  isEnabled(name) {
-    const enabled = JSON.parse(app.data.settings.extensions_enabled);
-
-    return enabled.indexOf(name) !== -1;
-  }
-
-  toggle(id) {
-    const enabled = this.isEnabled(id);
-
-    app
-      .request({
-        url: app.forum.attribute('apiUrl') + '/extensions/' + id,
-        method: 'PATCH',
-        data: { enabled: !enabled },
-      })
-      .then(() => {
-        if (!enabled) localStorage.setItem('enabledExtension', id);
-        window.location.reload();
-      });
-
-    app.modal.show(new LoadingModal());
-  }
-}
diff --git a/js/old/admin/components/HeaderPrimary.js b/js/old/admin/components/HeaderPrimary.js
deleted file mode 100644
index 5a87ff6e0..000000000
--- a/js/old/admin/components/HeaderPrimary.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import Component from '../../common/Component';
-import ItemList from '../../common/utils/ItemList';
-import listItems from '../../common/helpers/listItems';
-
-/**
- * The `HeaderPrimary` component displays primary header controls. On the
- * default skin, these are shown just to the right of the forum title.
- */
-export default class HeaderPrimary extends Component {
-  view() {
-    return <ul className="Header-controls">{listItems(this.items().toArray())}</ul>;
-  }
-
-  config(isInitialized, context) {
-    // Since this component is 'above' the content of the page (that is, it is a
-    // part of the global UI that persists between routes), we will flag the DOM
-    // to be retained across route changes.
-    context.retain = true;
-  }
-
-  /**
-   * Build an item list for the controls.
-   *
-   * @return {ItemList}
-   */
-  items() {
-    return new ItemList();
-  }
-}
diff --git a/js/old/admin/components/HeaderSecondary.js b/js/old/admin/components/HeaderSecondary.js
deleted file mode 100644
index 11431f36f..000000000
--- a/js/old/admin/components/HeaderSecondary.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Component from '../../common/Component';
-import SessionDropdown from './SessionDropdown';
-import ItemList from '../../common/utils/ItemList';
-import listItems from '../../common/helpers/listItems';
-
-/**
- * The `HeaderSecondary` component displays secondary header controls.
- */
-export default class HeaderSecondary extends Component {
-  view() {
-    return <ul className="Header-controls">{listItems(this.items().toArray())}</ul>;
-  }
-
-  config(isInitialized, context) {
-    // Since this component is 'above' the content of the page (that is, it is a
-    // part of the global UI that persists between routes), we will flag the DOM
-    // to be retained across route changes.
-    context.retain = true;
-  }
-
-  /**
-   * Build an item list for the controls.
-   *
-   * @return {ItemList}
-   */
-  items() {
-    const items = new ItemList();
-
-    items.add('session', SessionDropdown.component());
-
-    return items;
-  }
-}
diff --git a/js/old/admin/components/LoadingModal.js b/js/old/admin/components/LoadingModal.js
deleted file mode 100644
index 53b59d721..000000000
--- a/js/old/admin/components/LoadingModal.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Modal from '../../common/components/Modal';
-
-export default class LoadingModal extends Modal {
-  isDismissible() {
-    return false;
-  }
-
-  className() {
-    return 'LoadingModal Modal--small';
-  }
-
-  title() {
-    return app.translator.trans('core.admin.loading.title');
-  }
-
-  content() {
-    return '';
-  }
-}
diff --git a/js/old/admin/components/MailPage.js b/js/old/admin/components/MailPage.js
deleted file mode 100644
index 127834309..000000000
--- a/js/old/admin/components/MailPage.js
+++ /dev/null
@@ -1,174 +0,0 @@
-import Page from './Page';
-import FieldSet from '../../common/components/FieldSet';
-import Button from '../../common/components/Button';
-import Alert from '../../common/components/Alert';
-import Select from '../../common/components/Select';
-import LoadingIndicator from '../../common/components/LoadingIndicator';
-import saveSettings from '../utils/saveSettings';
-
-export default class MailPage extends Page {
-  init() {
-    super.init();
-
-    this.saving = false;
-    this.refresh();
-  }
-
-  refresh() {
-    this.loading = true;
-
-    this.driverFields = {};
-    this.fields = ['mail_driver', 'mail_from'];
-    this.values = {};
-    this.status = { sending: false, errors: {} };
-
-    const settings = app.data.settings;
-    this.fields.forEach((key) => (this.values[key] = m.prop(settings[key])));
-
-    app
-      .request({
-        method: 'GET',
-        url: app.forum.attribute('apiUrl') + '/mail-settings',
-      })
-      .then((response) => {
-        this.driverFields = response['data']['attributes']['fields'];
-        this.status.sending = response['data']['attributes']['sending'];
-        this.status.errors = response['data']['attributes']['errors'];
-
-        for (const driver in this.driverFields) {
-          for (const field in this.driverFields[driver]) {
-            this.fields.push(field);
-            this.values[field] = m.prop(settings[field]);
-          }
-        }
-
-        this.loading = false;
-        m.redraw();
-      });
-  }
-
-  view() {
-    if (this.loading || this.saving) {
-      return (
-        <div className="MailPage">
-          <div className="container">
-            <LoadingIndicator />
-          </div>
-        </div>
-      );
-    }
-
-    const fields = this.driverFields[this.values.mail_driver()];
-    const fieldKeys = Object.keys(fields);
-
-    return (
-      <div className="MailPage">
-        <div className="container">
-          <form onsubmit={this.onsubmit.bind(this)}>
-            <h2>{app.translator.trans('core.admin.email.heading')}</h2>
-            <div className="helpText">{app.translator.trans('core.admin.email.text')}</div>
-
-            {FieldSet.component({
-              label: app.translator.trans('core.admin.email.addresses_heading'),
-              className: 'MailPage-MailSettings',
-              children: [
-                <div className="MailPage-MailSettings-input">
-                  <label>
-                    {app.translator.trans('core.admin.email.from_label')}
-                    <input className="FormControl" value={this.values.mail_from() || ''} oninput={m.withAttr('value', this.values.mail_from)} />
-                  </label>
-                </div>,
-              ],
-            })}
-
-            {FieldSet.component({
-              label: app.translator.trans('core.admin.email.driver_heading'),
-              className: 'MailPage-MailSettings',
-              children: [
-                <div className="MailPage-MailSettings-input">
-                  <label>
-                    {app.translator.trans('core.admin.email.driver_label')}
-                    <Select
-                      value={this.values.mail_driver()}
-                      options={Object.keys(this.driverFields).reduce((memo, val) => ({ ...memo, [val]: val }), {})}
-                      onchange={this.values.mail_driver}
-                    />
-                  </label>
-                </div>,
-              ],
-            })}
-
-            {this.status.sending ||
-              Alert.component({
-                children: app.translator.trans('core.admin.email.not_sending_message'),
-                dismissible: false,
-              })}
-
-            {fieldKeys.length > 0 &&
-              FieldSet.component({
-                label: app.translator.trans(`core.admin.email.${this.values.mail_driver()}_heading`),
-                className: 'MailPage-MailSettings',
-                children: [
-                  <div className="MailPage-MailSettings-input">
-                    {fieldKeys.map((field) => [
-                      <label>
-                        {app.translator.trans(`core.admin.email.${field}_label`)}
-                        {this.renderField(field)}
-                      </label>,
-                      this.status.errors[field] && <p className="ValidationError">{this.status.errors[field]}</p>,
-                    ])}
-                  </div>,
-                ],
-              })}
-
-            {Button.component({
-              type: 'submit',
-              className: 'Button Button--primary',
-              children: app.translator.trans('core.admin.email.submit_button'),
-              disabled: !this.changed(),
-            })}
-          </form>
-        </div>
-      </div>
-    );
-  }
-
-  renderField(name) {
-    const driver = this.values.mail_driver();
-    const field = this.driverFields[driver][name];
-    const prop = this.values[name];
-
-    if (typeof field === 'string') {
-      return <input className="FormControl" value={prop() || ''} oninput={m.withAttr('value', prop)} />;
-    } else {
-      return <Select value={prop()} options={field} onchange={prop} />;
-    }
-  }
-
-  changed() {
-    return this.fields.some((key) => this.values[key]() !== app.data.settings[key]);
-  }
-
-  onsubmit(e) {
-    e.preventDefault();
-
-    if (this.saving) return;
-
-    this.saving = true;
-    app.alerts.dismiss(this.successAlert);
-
-    const settings = {};
-
-    this.fields.forEach((key) => (settings[key] = this.values[key]()));
-
-    saveSettings(settings)
-      .then(() => {
-        app.alerts.show((this.successAlert = new Alert({ type: 'success', children: app.translator.trans('core.admin.basics.saved_message') })));
-      })
-      .catch(() => {})
-      .then(() => {
-        this.saving = false;
-        this.refresh();
-      });
-  }
-}
diff --git a/js/old/admin/components/Page.js b/js/old/admin/components/Page.js
deleted file mode 100644
index 5cf64c75d..000000000
--- a/js/old/admin/components/Page.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import Component from '../../common/Component';
-
-/**
- * The `Page` component
- *
- * @abstract
- */
-export default class Page extends Component {
-  init() {
-    app.previous = app.current;
-    app.current = this;
-
-    app.modal.close();
-
-    /**
-     * A class name to apply to the body while the route is active.
-     *
-     * @type {String}
-     */
-    this.bodyClass = '';
-  }
-
-  config(isInitialized, context) {
-    if (isInitialized) return;
-
-    if (this.bodyClass) {
-      $('#app').addClass(this.bodyClass);
-
-      context.onunload = () => $('#app').removeClass(this.bodyClass);
-    }
-  }
-}
diff --git a/js/old/admin/components/PermissionDropdown.js b/js/old/admin/components/PermissionDropdown.js
deleted file mode 100644
index 9a06ee5f1..000000000
--- a/js/old/admin/components/PermissionDropdown.js
+++ /dev/null
@@ -1,148 +0,0 @@
-import Dropdown from '../../common/components/Dropdown';
-import Button from '../../common/components/Button';
-import Separator from '../../common/components/Separator';
-import Group from '../../common/models/Group';
-import Badge from '../../common/components/Badge';
-import GroupBadge from '../../common/components/GroupBadge';
-
-function badgeForId(id) {
-  const group = app.store.getById('groups', id);
-
-  return group ? GroupBadge.component({ group, label: null }) : '';
-}
-
-function filterByRequiredPermissions(groupIds, permission) {
-  app.getRequiredPermissions(permission).forEach((required) => {
-    const restrictToGroupIds = app.data.permissions[required] || [];
-
-    if (restrictToGroupIds.indexOf(Group.GUEST_ID) !== -1) {
-      // do nothing
-    } else if (restrictToGroupIds.indexOf(Group.MEMBER_ID) !== -1) {
-      groupIds = groupIds.filter((id) => id !== Group.GUEST_ID);
-    } else if (groupIds.indexOf(Group.MEMBER_ID) !== -1) {
-      groupIds = restrictToGroupIds;
-    } else {
-      groupIds = restrictToGroupIds.filter((id) => groupIds.indexOf(id) !== -1);
-    }
-
-    groupIds = filterByRequiredPermissions(groupIds, required);
-  });
-
-  return groupIds;
-}
-
-export default class PermissionDropdown extends Dropdown {
-  static initProps(props) {
-    super.initProps(props);
-
-    props.className = 'PermissionDropdown';
-    props.buttonClassName = 'Button Button--text';
-  }
-
-  view() {
-    this.props.children = [];
-
-    let groupIds = app.data.permissions[this.props.permission] || [];
-
-    groupIds = filterByRequiredPermissions(groupIds, this.props.permission);
-
-    const everyone = groupIds.indexOf(Group.GUEST_ID) !== -1;
-    const members = groupIds.indexOf(Group.MEMBER_ID) !== -1;
-    const adminGroup = app.store.getById('groups', Group.ADMINISTRATOR_ID);
-
-    if (everyone) {
-      this.props.label = Badge.component({ icon: 'fas fa-globe' });
-    } else if (members) {
-      this.props.label = Badge.component({ icon: 'fas fa-user' });
-    } else {
-      this.props.label = [badgeForId(Group.ADMINISTRATOR_ID), groupIds.map(badgeForId)];
-    }
-
-    if (this.showing) {
-      if (this.props.allowGuest) {
-        this.props.children.push(
-          Button.component({
-            children: [Badge.component({ icon: 'fas fa-globe' }), ' ', app.translator.trans('core.admin.permissions_controls.everyone_button')],
-            icon: everyone ? 'fas fa-check' : true,
-            onclick: () => this.save([Group.GUEST_ID]),
-            disabled: this.isGroupDisabled(Group.GUEST_ID),
-          })
-        );
-      }
-
-      this.props.children.push(
-        Button.component({
-          children: [Badge.component({ icon: 'fas fa-user' }), ' ', app.translator.trans('core.admin.permissions_controls.members_button')],
-          icon: members ? 'fas fa-check' : true,
-          onclick: () => this.save([Group.MEMBER_ID]),
-          disabled: this.isGroupDisabled(Group.MEMBER_ID),
-        }),
-
-        Separator.component(),
-
-        Button.component({
-          children: [badgeForId(adminGroup.id()), ' ', adminGroup.namePlural()],
-          icon: !everyone && !members ? 'fas fa-check' : true,
-          disabled: !everyone && !members,
-          onclick: (e) => {
-            if (e.shiftKey) e.stopPropagation();
-            this.save([]);
-          },
-        })
-      );
-
-      [].push.apply(
-        this.props.children,
-        app.store
-          .all('groups')
-          .filter((group) => [Group.ADMINISTRATOR_ID, Group.GUEST_ID, Group.MEMBER_ID].indexOf(group.id()) === -1)
-          .map((group) =>
-            Button.component({
-              children: [badgeForId(group.id()), ' ', group.namePlural()],
-              icon: groupIds.indexOf(group.id()) !== -1 ? 'fas fa-check' : true,
-              onclick: (e) => {
-                if (e.shiftKey) e.stopPropagation();
-                this.toggle(group.id());
-              },
-              disabled: this.isGroupDisabled(group.id()) && this.isGroupDisabled(Group.MEMBER_ID) && this.isGroupDisabled(Group.GUEST_ID),
-            })
-          )
-      );
-    }
-
-    return super.view();
-  }
-
-  save(groupIds) {
-    const permission = this.props.permission;
-
-    app.data.permissions[permission] = groupIds;
-
-    app.request({
-      method: 'POST',
-      url: app.forum.attribute('apiUrl') + '/permission',
-      data: { permission, groupIds },
-    });
-  }
-
-  toggle(groupId) {
-    const permission = this.props.permission;
-
-    let groupIds = app.data.permissions[permission] || [];
-
-    const index = groupIds.indexOf(groupId);
-
-    if (index !== -1) {
-      groupIds.splice(index, 1);
-    } else {
-      groupIds.push(groupId);
-      groupIds = groupIds.filter((id) => [Group.GUEST_ID, Group.MEMBER_ID].indexOf(id) === -1);
-    }
-
-    this.save(groupIds);
-  }
-
-  isGroupDisabled(id) {
-    return filterByRequiredPermissions([id], this.props.permission).indexOf(id) === -1;
-  }
-}
diff --git a/js/old/admin/components/PermissionGrid.js b/js/old/admin/components/PermissionGrid.js
deleted file mode 100644
index b81d92faa..000000000
--- a/js/old/admin/components/PermissionGrid.js
+++ /dev/null
@@ -1,357 +0,0 @@
-import Component from '../../common/Component';
-import PermissionDropdown from './PermissionDropdown';
-import SettingDropdown from './SettingDropdown';
-import Button from '../../common/components/Button';
-import ItemList from '../../common/utils/ItemList';
-import icon from '../../common/helpers/icon';
-
-export default class PermissionGrid extends Component {
-  init() {
-    this.permissions = this.permissionItems().toArray();
-  }
-
-  view() {
-    const scopes = this.scopeItems().toArray();
-
-    const permissionCells = (permission) => {
-      return scopes.map((scope) => <td>{scope.render(permission)}</td>);
-    };
-
-    return (
-      <table className="PermissionGrid">
-        <thead>
-          <tr>
-            <td></td>
-            {scopes.map((scope) => (
-              <th>
-                {scope.label}{' '}
-                {scope.onremove
-                  ? Button.component({ icon: 'fas fa-times', className: 'Button Button--text PermissionGrid-removeScope', onclick: scope.onremove })
-                  : ''}
-              </th>
-            ))}
-            <th>{this.scopeControlItems().toArray()}</th>
-          </tr>
-        </thead>
-        {this.permissions.map((section) => (
-          <tbody>
-            <tr className="PermissionGrid-section">
-              <th>{section.label}</th>
-              {permissionCells(section)}
-              <td />
-            </tr>
-            {section.children.map((child) => (
-              <tr className="PermissionGrid-child">
-                <th>
-                  {icon(child.icon)}
-                  {child.label}
-                </th>
-                {permissionCells(child)}
-                <td />
-              </tr>
-            ))}
-          </tbody>
-        ))}
-      </table>
-    );
-  }
-
-  permissionItems() {
-    const items = new ItemList();
-
-    items.add(
-      'view',
-      {
-        label: app.translator.trans('core.admin.permissions.read_heading'),
-        children: this.viewItems().toArray(),
-      },
-      100
-    );
-
-    items.add(
-      'start',
-      {
-        label: app.translator.trans('core.admin.permissions.create_heading'),
-        children: this.startItems().toArray(),
-      },
-      90
-    );
-
-    items.add(
-      'reply',
-      {
-        label: app.translator.trans('core.admin.permissions.participate_heading'),
-        children: this.replyItems().toArray(),
-      },
-      80
-    );
-
-    items.add(
-      'moderate',
-      {
-        label: app.translator.trans('core.admin.permissions.moderate_heading'),
-        children: this.moderateItems().toArray(),
-      },
-      70
-    );
-
-    return items;
-  }
-
-  viewItems() {
-    const items = new ItemList();
-
-    items.add(
-      'viewDiscussions',
-      {
-        icon: 'fas fa-eye',
-        label: app.translator.trans('core.admin.permissions.view_discussions_label'),
-        permission: 'viewDiscussions',
-        allowGuest: true,
-      },
-      100
-    );
-
-    items.add(
-      'viewUserList',
-      {
-        icon: 'fas fa-users',
-        label: app.translator.trans('core.admin.permissions.view_user_list_label'),
-        permission: 'viewUserList',
-        allowGuest: true,
-      },
-      100
-    );
-
-    items.add(
-      'signUp',
-      {
-        icon: 'fas fa-user-plus',
-        label: app.translator.trans('core.admin.permissions.sign_up_label'),
-        setting: () =>
-          SettingDropdown.component({
-            key: 'allow_sign_up',
-            options: [
-              { value: '1', label: app.translator.trans('core.admin.permissions_controls.signup_open_button') },
-              { value: '0', label: app.translator.trans('core.admin.permissions_controls.signup_closed_button') },
-            ],
-          }),
-      },
-      90
-    );
-
-    items.add('viewLastSeenAt', {
-      icon: 'far fa-clock',
-      label: app.translator.trans('core.admin.permissions.view_last_seen_at_label'),
-      permission: 'user.viewLastSeenAt',
-    });
-
-    return items;
-  }
-
-  startItems() {
-    const items = new ItemList();
-
-    items.add(
-      'start',
-      {
-        icon: 'fas fa-edit',
-        label: app.translator.trans('core.admin.permissions.start_discussions_label'),
-        permission: 'startDiscussion',
-      },
-      100
-    );
-
-    items.add(
-      'allowRenaming',
-      {
-        icon: 'fas fa-i-cursor',
-        label: app.translator.trans('core.admin.permissions.allow_renaming_label'),
-        setting: () => {
-          const minutes = parseInt(app.data.settings.allow_renaming, 10);
-
-          return SettingDropdown.component({
-            defaultLabel: minutes
-              ? app.translator.transChoice('core.admin.permissions_controls.allow_some_minutes_button', minutes, { count: minutes })
-              : app.translator.trans('core.admin.permissions_controls.allow_indefinitely_button'),
-            key: 'allow_renaming',
-            options: [
-              { value: '-1', label: app.translator.trans('core.admin.permissions_controls.allow_indefinitely_button') },
-              { value: '10', label: app.translator.trans('core.admin.permissions_controls.allow_ten_minutes_button') },
-              { value: 'reply', label: app.translator.trans('core.admin.permissions_controls.allow_until_reply_button') },
-            ],
-          });
-        },
-      },
-      90
-    );
-
-    return items;
-  }
-
-  replyItems() {
-    const items = new ItemList();
-
-    items.add(
-      'reply',
-      {
-        icon: 'fas fa-reply',
-        label: app.translator.trans('core.admin.permissions.reply_to_discussions_label'),
-        permission: 'discussion.reply',
-      },
-      100
-    );
-
-    items.add(
-      'allowPostEditing',
-      {
-        icon: 'fas fa-pencil-alt',
-        label: app.translator.trans('core.admin.permissions.allow_post_editing_label'),
-        setting: () => {
-          const minutes = parseInt(app.data.settings.allow_post_editing, 10);
-
-          return SettingDropdown.component({
-            defaultLabel: minutes
-              ? app.translator.transChoice('core.admin.permissions_controls.allow_some_minutes_button', minutes, { count: minutes })
-              : app.translator.trans('core.admin.permissions_controls.allow_indefinitely_button'),
-            key: 'allow_post_editing',
-            options: [
-              { value: '-1', label: app.translator.trans('core.admin.permissions_controls.allow_indefinitely_button') },
-              { value: '10', label: app.translator.trans('core.admin.permissions_controls.allow_ten_minutes_button') },
-              { value: 'reply', label: app.translator.trans('core.admin.permissions_controls.allow_until_reply_button') },
-            ],
-          });
-        },
-      },
-      90
-    );
-
-    return items;
-  }
-
-  moderateItems() {
-    const items = new ItemList();
-
-    items.add(
-      'viewIpsPosts',
-      {
-        icon: 'fas fa-bullseye',
-        label: app.translator.trans('core.admin.permissions.view_post_ips_label'),
-        permission: 'discussion.viewIpsPosts',
-      },
-      110
-    );
-
-    items.add(
-      'renameDiscussions',
-      {
-        icon: 'fas fa-i-cursor',
-        label: app.translator.trans('core.admin.permissions.rename_discussions_label'),
-        permission: 'discussion.rename',
-      },
-      100
-    );
-
-    items.add(
-      'hideDiscussions',
-      {
-        icon: 'far fa-trash-alt',
-        label: app.translator.trans('core.admin.permissions.delete_discussions_label'),
-        permission: 'discussion.hide',
-      },
-      90
-    );
-
-    items.add(
-      'deleteDiscussions',
-      {
-        icon: 'fas fa-times',
-        label: app.translator.trans('core.admin.permissions.delete_discussions_forever_label'),
-        permission: 'discussion.delete',
-      },
-      80
-    );
-
-    items.add(
-      'postWithoutThrottle',
-      {
-        icon: 'fas fa-swimmer',
-        label: app.translator.trans('core.admin.permissions.post_without_throttle_label'),
-        permission: 'postWithoutThrottle',
-      },
-      70
-    );
-
-    items.add(
-      'editPosts',
-      {
-        icon: 'fas fa-pencil-alt',
-        label: app.translator.trans('core.admin.permissions.edit_posts_label'),
-        permission: 'discussion.editPosts',
-      },
-      70
-    );
-
-    items.add(
-      'hidePosts',
-      {
-        icon: 'far fa-trash-alt',
-        label: app.translator.trans('core.admin.permissions.delete_posts_label'),
-        permission: 'discussion.hidePosts',
-      },
-      60
-    );
-
-    items.add(
-      'deletePosts',
-      {
-        icon: 'fas fa-times',
-        label: app.translator.trans('core.admin.permissions.delete_posts_forever_label'),
-        permission: 'discussion.deletePosts',
-      },
-      60
-    );
-
-    items.add(
-      'userEdit',
-      {
-        icon: 'fas fa-user-cog',
-        label: app.translator.trans('core.admin.permissions.edit_users_label'),
-        permission: 'user.edit',
-      },
-      60
-    );
-
-    return items;
-  }
-
-  scopeItems() {
-    const items = new ItemList();
-
-    items.add(
-      'global',
-      {
-        label: app.translator.trans('core.admin.permissions.global_heading'),
-        render: (item) => {
-          if (item.setting) {
-            return item.setting();
-          } else if (item.permission) {
-            return PermissionDropdown.component({
-              permission: item.permission,
-              allowGuest: item.allowGuest,
-            });
-          }
-
-          return '';
-        },
-      },
-      100
-    );
-
-    return items;
-  }
-
-  scopeControlItems() {
-    return new ItemList();
-  }
-}
diff --git a/js/old/admin/components/PermissionsPage.js b/js/old/admin/components/PermissionsPage.js
deleted file mode 100644
index 3d540d0b1..000000000
--- a/js/old/admin/components/PermissionsPage.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import Page from './Page';
-import GroupBadge from '../../common/components/GroupBadge';
-import EditGroupModal from './EditGroupModal';
-import Group from '../../common/models/Group';
-import icon from '../../common/helpers/icon';
-import PermissionGrid from './PermissionGrid';
-
-export default class PermissionsPage extends Page {
-  view() {
-    return (
-      <div className="PermissionsPage">
-        <div className="PermissionsPage-groups">
-          <div className="container">
-            {app.store
-              .all('groups')
-              .filter((group) => [Group.GUEST_ID, Group.MEMBER_ID].indexOf(group.id()) === -1)
-              .map((group) => (
-                <button className="Button Group" onclick={() => app.modal.show(new EditGroupModal({ group }))}>
-                  {GroupBadge.component({
-                    group,
-                    className: 'Group-icon',
-                    label: null,
-                  })}
-                  <span className="Group-name">{group.namePlural()}</span>
-                </button>
-              ))}
-            <button className="Button Group Group--add" onclick={() => app.modal.show(new EditGroupModal())}>
-              {icon('fas fa-plus', { className: 'Group-icon' })}
-              <span className="Group-name">{app.translator.trans('core.admin.permissions.new_group_button')}</span>
-            </button>
-          </div>
-        </div>
-
-        <div className="PermissionsPage-permissions">
-          <div className="container">{PermissionGrid.component()}</div>
-        </div>
-      </div>
-    );
-  }
-}
diff --git a/js/old/admin/components/SessionDropdown.js b/js/old/admin/components/SessionDropdown.js
deleted file mode 100644
index 648f4eabc..000000000
--- a/js/old/admin/components/SessionDropdown.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import avatar from '../../common/helpers/avatar';
-import username from '../../common/helpers/username';
-import Dropdown from '../../common/components/Dropdown';
-import Button from '../../common/components/Button';
-import ItemList from '../../common/utils/ItemList';
-
-/**
- * The `SessionDropdown` component shows a button with the current user's
- * avatar/name, with a dropdown of session controls.
- */
-export default class SessionDropdown extends Dropdown {
-  static initProps(props) {
-    super.initProps(props);
-
-    props.className = 'SessionDropdown';
-    props.buttonClassName = 'Button Button--user Button--flat';
-    props.menuClassName = 'Dropdown-menu--right';
-  }
-
-  view() {
-    this.props.children = this.items().toArray();
-
-    return super.view();
-  }
-
-  getButtonContent() {
-    const user = app.session.user;
-
-    return [avatar(user), ' ', <span className="Button-label">{username(user)}</span>];
-  }
-
-  /**
-   * Build an item list for the contents of the dropdown menu.
-   *
-   * @return {ItemList}
-   */
-  items() {
-    const items = new ItemList();
-
-    items.add(
-      'logOut',
-      Button.component({
-        icon: 'fas fa-sign-out-alt',
-        children: app.translator.trans('core.admin.header.log_out_button'),
-        onclick: app.session.logout.bind(app.session),
-      }),
-      -100
-    );
-
-    return items;
-  }
-}
diff --git a/js/old/admin/components/SettingDropdown.js b/js/old/admin/components/SettingDropdown.js
deleted file mode 100644
index 3ecc70e1c..000000000
--- a/js/old/admin/components/SettingDropdown.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import SelectDropdown from '../../common/components/SelectDropdown';
-import Button from '../../common/components/Button';
-import saveSettings from '../utils/saveSettings';
-
-export default class SettingDropdown extends SelectDropdown {
-  static initProps(props) {
-    super.initProps(props);
-
-    props.className = 'SettingDropdown';
-    props.buttonClassName = 'Button Button--text';
-    props.caretIcon = 'fas fa-caret-down';
-    props.defaultLabel = 'Custom';
-
-    props.children = props.options.map(({ value, label }) => {
-      const active = app.data.settings[props.key] === value;
-
-      return Button.component({
-        children: label,
-        icon: active ? 'fas fa-check' : true,
-        onclick: saveSettings.bind(this, { [props.key]: value }),
-        active,
-      });
-    });
-  }
-}
diff --git a/js/old/admin/components/SettingsModal.js b/js/old/admin/components/SettingsModal.js
deleted file mode 100644
index 718c3911e..000000000
--- a/js/old/admin/components/SettingsModal.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import Modal from '../../common/components/Modal';
-import Button from '../../common/components/Button';
-import saveSettings from '../utils/saveSettings';
-
-export default class SettingsModal extends Modal {
-  init() {
-    this.settings = {};
-    this.loading = false;
-  }
-
-  form() {
-    return '';
-  }
-
-  content() {
-    return (
-      <div className="Modal-body">
-        <div className="Form">
-          {this.form()}
-
-          <div className="Form-group">{this.submitButton()}</div>
-        </div>
-      </div>
-    );
-  }
-
-  submitButton() {
-    return (
-      <Button type="submit" className="Button Button--primary" loading={this.loading} disabled={!this.changed()}>
-        {app.translator.trans('core.admin.settings.submit_button')}
-      </Button>
-    );
-  }
-
-  setting(key, fallback = '') {
-    this.settings[key] = this.settings[key] || m.prop(app.data.settings[key] || fallback);
-
-    return this.settings[key];
-  }
-
-  dirty() {
-    const dirty = {};
-
-    Object.keys(this.settings).forEach((key) => {
-      const value = this.settings[key]();
-
-      if (value !== app.data.settings[key]) {
-        dirty[key] = value;
-      }
-    });
-
-    return dirty;
-  }
-
-  changed() {
-    return Object.keys(this.dirty()).length;
-  }
-
-  onsubmit(e) {
-    e.preventDefault();
-
-    this.loading = true;
-
-    saveSettings(this.dirty()).then(this.onsaved.bind(this), this.loaded.bind(this));
-  }
-
-  onsaved() {
-    this.hide();
-  }
-}
diff --git a/js/old/admin/components/StatusWidget.js b/js/old/admin/components/StatusWidget.js
deleted file mode 100644
index c194f4d28..000000000
--- a/js/old/admin/components/StatusWidget.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
- * This file is part of Flarum.
- *
- * (c) Toby Zerner <toby.zerner@gmail.com>
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-import DashboardWidget from './DashboardWidget';
-import listItems from '../../common/helpers/listItems';
-import ItemList from '../../common/utils/ItemList';
-import Dropdown from '../../common/components/Dropdown';
-import Button from '../../common/components/Button';
-import LoadingModal from './LoadingModal';
-
-export default class StatusWidget extends DashboardWidget {
-  className() {
-    return 'StatusWidget';
-  }
-
-  content() {
-    return <ul>{listItems(this.items().toArray())}</ul>;
-  }
-
-  items() {
-    const items = new ItemList();
-
-    items.add(
-      'tools',
-      <Dropdown
-        label={app.translator.trans('core.admin.dashboard.tools_button')}
-        icon="fas fa-cog"
-        buttonClassName="Button"
-        menuClassName="Dropdown-menu--right"
-      >
-        <Button onclick={this.handleClearCache.bind(this)}>{app.translator.trans('core.admin.dashboard.clear_cache_button')}</Button>
-      </Dropdown>
-    );
-
-    items.add('version-flarum', [<strong>Flarum</strong>, <br />, app.forum.attribute('version')]);
-    items.add('version-php', [<strong>PHP</strong>, <br />, app.data.phpVersion]);
-    items.add('version-mysql', [<strong>MySQL</strong>, <br />, app.data.mysqlVersion]);
-
-    return items;
-  }
-
-  handleClearCache(e) {
-    app.modal.show(new LoadingModal());
-
-    app
-      .request({
-        method: 'DELETE',
-        url: app.forum.attribute('apiUrl') + '/cache',
-      })
-      .then(() => window.location.reload());
-  }
-}
diff --git a/js/old/admin/components/UploadImageButton.js b/js/old/admin/components/UploadImageButton.js
deleted file mode 100644
index 07bf8c008..000000000
--- a/js/old/admin/components/UploadImageButton.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import Button from '../../common/components/Button';
-
-export default class UploadImageButton extends Button {
-  init() {
-    this.loading = false;
-  }
-
-  view() {
-    this.props.loading = this.loading;
-    this.props.className = (this.props.className || '') + ' Button';
-
-    if (app.data.settings[this.props.name + '_path']) {
-      this.props.onclick = this.remove.bind(this);
-      this.props.children = app.translator.trans('core.admin.upload_image.remove_button');
-
-      return (
-        <div>
-          <p>
-            <img src={app.forum.attribute(this.props.name + 'Url')} alt="" />
-          </p>
-          <p>{super.view()}</p>
-        </div>
-      );
-    } else {
-      this.props.onclick = this.upload.bind(this);
-      this.props.children = app.translator.trans('core.admin.upload_image.upload_button');
-    }
-
-    return super.view();
-  }
-
-  /**
-   * Prompt the user to upload an image.
-   */
-  upload() {
-    if (this.loading) return;
-
-    const $input = $('<input type="file">');
-
-    $input
-      .appendTo('body')
-      .hide()
-      .click()
-      .on('change', (e) => {
-        const data = new FormData();
-        data.append(this.props.name, $(e.target)[0].files[0]);
-
-        this.loading = true;
-        m.redraw();
-
-        app
-          .request({
-            method: 'POST',
-            url: this.resourceUrl(),
-            serialize: (raw) => raw,
-            data,
-          })
-          .then(this.success.bind(this), this.failure.bind(this));
-      });
-  }
-
-  /**
-   * Remove the logo.
-   */
-  remove() {
-    this.loading = true;
-    m.redraw();
-
-    app
-      .request({
-        method: 'DELETE',
-        url: this.resourceUrl(),
-      })
-      .then(this.success.bind(this), this.failure.bind(this));
-  }
-
-  resourceUrl() {
-    return app.forum.attribute('apiUrl') + '/' + this.props.name;
-  }
-
-  /**
-   * After a successful upload/removal, reload the page.
-   *
-   * @param {Object} response
-   * @protected
-   */
-  success(response) {
-    window.location.reload();
-  }
-
-  /**
-   * If upload/removal fails, stop loading.
-   *
-   * @param {Object} response
-   * @protected
-   */
-  failure(response) {
-    this.loading = false;
-    m.redraw();
-  }
-}
diff --git a/js/old/admin/components/Widget.js b/js/old/admin/components/Widget.js
deleted file mode 100644
index 5a8809a1d..000000000
--- a/js/old/admin/components/Widget.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * This file is part of Flarum.
- *
- * (c) Toby Zerner <toby.zerner@gmail.com>
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-import Component from '../../common/Component';
-
-export default class DashboardWidget extends Component {
-  view() {
-    return <div className={'DashboardWidget ' + this.className()}>{this.content()}</div>;
-  }
-
-  /**
-   * Get the class name to apply to the widget.
-   *
-   * @return {String}
-   */
-  className() {
-    return '';
-  }
-
-  /**
-   * Get the content of the widget.
-   *
-   * @return {VirtualElement}
-   */
-  content() {
-    return [];
-  }
-}
diff --git a/js/old/admin/index.js b/js/old/admin/index.js
deleted file mode 100644
index b17a192ef..000000000
--- a/js/old/admin/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import AdminApplication from './AdminApplication';
-
-const app = new AdminApplication();
-
-// Backwards compatibility
-window.app = app;
-
-export { app };
-
-// Export public API
-
-
-// Export compat API
-import compat from './compat';
-
-compat.app = app;
-
-export { compat };
diff --git a/js/old/admin/routes.js b/js/old/admin/routes.js
deleted file mode 100644
index 89fa728cd..000000000
--- a/js/old/admin/routes.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import DashboardPage from './components/DashboardPage';
-import BasicsPage from './components/BasicsPage';
-import PermissionsPage from './components/PermissionsPage';
-import AppearancePage from './components/AppearancePage';
-import ExtensionsPage from './components/ExtensionsPage';
-import MailPage from './components/MailPage';
-
-/**
- * The `routes` initializer defines the forum app's routes.
- *
- * @param {App} app
- */
-export default function (app) {
-  app.routes = {
-    dashboard: { path: '/', component: DashboardPage.component() },
-    basics: { path: '/basics', component: BasicsPage.component() },
-    permissions: { path: '/permissions', component: PermissionsPage.component() },
-    appearance: { path: '/appearance', component: AppearancePage.component() },
-    extensions: { path: '/extensions', component: ExtensionsPage.component() },
-    mail: { path: '/mail', component: MailPage.component() },
-  };
-}
diff --git a/js/old/admin/utils/saveSettings.js b/js/old/admin/utils/saveSettings.js
deleted file mode 100644
index 57f81b2e8..000000000
--- a/js/old/admin/utils/saveSettings.js
+++ /dev/null
@@ -1,16 +0,0 @@
-export default function saveSettings(settings) {
-  const oldSettings = JSON.parse(JSON.stringify(app.data.settings));
-
-  Object.assign(app.data.settings, settings);
-
-  return app
-    .request({
-      method: 'POST',
-      url: app.forum.attribute('apiUrl') + '/settings',
-      data: settings,
-    })
-    .catch((error) => {
-      app.data.settings = oldSettings;
-      throw error;
-    });
-}
diff --git a/js/old/common/Application.js b/js/old/common/Application.js
deleted file mode 100644
index f54ce50cc..000000000
--- a/js/old/common/Application.js
+++ /dev/null
@@ -1,376 +0,0 @@
-import ItemList from './utils/ItemList';
-import Alert from './components/Alert';
-import Button from './components/Button';
-import ModalManager from './components/ModalManager';
-import AlertManager from './components/AlertManager';
-import RequestErrorModal from './components/RequestErrorModal';
-import Translator from './Translator';
-import Store from './Store';
-import Session from './Session';
-import extract from './utils/extract';
-import Drawer from './utils/Drawer';
-import mapRoutes from './utils/mapRoutes';
-import RequestError from './utils/RequestError';
-import ScrollListener from './utils/ScrollListener';
-import { extend } from './extend';
-
-import Forum from './models/Forum';
-import User from './models/User';
-import Discussion from './models/Discussion';
-import Post from './models/Post';
-import Group from './models/Group';
-import Notification from './models/Notification';
-import { flattenDeep } from 'lodash-es';
-
-/**
- * The `App` class provides a container for an application, as well as various
- * utilities for the rest of the app to use.
- */
-export default class Application {
-  /**
-   * The forum model for this application.
-   *
-   * @type {Forum}
-   * @public
-   */
-  forum = null;
-
-  /**
-   * A map of routes, keyed by a unique route name. Each route is an object
-   * containing the following properties:
-   *
-   * - `path` The path that the route is accessed at.
-   * - `component` The Mithril component to render when this route is active.
-   *
-   * @example
-   * app.routes.discussion = {path: '/d/:id', component: DiscussionPage.component()};
-   *
-   * @type {Object}
-   * @public
-   */
-  routes = {};
-
-  /**
-   * An ordered list of initializers to bootstrap the application.
-   *
-   * @type {ItemList}
-   * @public
-   */
-  initializers = new ItemList();
-
-  /**
-   * The app's session.
-   *
-   * @type {Session}
-   * @public
-   */
-  session = null;
-
-  /**
-   * The app's translator.
-   *
-   * @type {Translator}
-   * @public
-   */
-  translator = new Translator();
-
-  /**
-   * The app's data store.
-   *
-   * @type {Store}
-   * @public
-   */
-  store = new Store({
-    forums: Forum,
-    users: User,
-    discussions: Discussion,
-    posts: Post,
-    groups: Group,
-    notifications: Notification,
-  });
-
-  /**
-   * A local cache that can be used to store data at the application level, so
-   * that is persists between different routes.
-   *
-   * @type {Object}
-   * @public
-   */
-  cache = {};
-
-  /**
-   * Whether or not the app has been booted.
-   *
-   * @type {Boolean}
-   * @public
-   */
-  booted = false;
-
-  /**
-   * An Alert that was shown as a result of an AJAX request error. If present,
-   * it will be dismissed on the next successful request.
-   *
-   * @type {null|Alert}
-   * @private
-   */
-  requestError = null;
-
-  data;
-
-  title = '';
-  titleCount = 0;
-
-  load(payload) {
-    this.data = payload;
-    this.translator.locale = payload.locale;
-  }
-
-  boot() {
-    this.initializers.toArray().forEach((initializer) => initializer(this));
-
-    this.store.pushPayload({ data: this.data.resources });
-
-    this.forum = this.store.getById('forums', 1);
-
-    this.session = new Session(this.store.getById('users', this.data.session.userId), this.data.session.csrfToken);
-
-    this.mount();
-  }
-
-  bootExtensions(extensions) {
-    Object.keys(extensions).forEach((name) => {
-      const extension = extensions[name];
-
-      const extenders = flattenDeep(extension.extend);
-
-      for (const extender of extenders) {
-        extender.extend(this, { name, exports: extension });
-      }
-    });
-  }
-
-  mount(basePath = '') {
-    this.modal = m.mount(document.getElementById('modal'), <ModalManager />);
-    this.alerts = m.mount(document.getElementById('alerts'), <AlertManager />);
-
-    this.drawer = new Drawer();
-
-    m.route(document.getElementById('content'), basePath + '/', mapRoutes(this.routes, basePath));
-
-    // Add a class to the body which indicates that the page has been scrolled
-    // down.
-    new ScrollListener((top) => {
-      const $app = $('#app');
-      const offset = $app.offset().top;
-
-      $app.toggleClass('affix', top >= offset).toggleClass('scrolled', top > offset);
-    }).start();
-
-    $(() => {
-      $('body').addClass('ontouchstart' in window ? 'touch' : 'no-touch');
-    });
-  }
-
-  /**
-   * Get the API response document that has been preloaded into the application.
-   *
-   * @return {Object|null}
-   * @public
-   */
-  preloadedApiDocument() {
-    if (this.data.apiDocument) {
-      const results = this.store.pushPayload(this.data.apiDocument);
-
-      this.data.apiDocument = null;
-
-      return results;
-    }
-
-    return null;
-  }
-
-  /**
-   * Set the <title> of the page.
-   *
-   * @param {String} title
-   * @public
-   */
-  setTitle(title) {
-    this.title = title;
-    this.updateTitle();
-  }
-
-  /**
-   * Set a number to display in the <title> of the page.
-   *
-   * @param {Integer} count
-   */
-  setTitleCount(count) {
-    this.titleCount = count;
-    this.updateTitle();
-  }
-
-  updateTitle() {
-    document.title = (this.titleCount ? `(${this.titleCount}) ` : '') + (this.title ? this.title + ' - ' : '') + this.forum.attribute('title');
-  }
-
-  /**
-   * Make an AJAX request, handling any low-level errors that may occur.
-   *
-   * @see https://lhorie.github.io/mithril/mithril.request.html
-   * @param {Object} options
-   * @return {Promise}
-   * @public
-   */
-  request(originalOptions) {
-    const options = Object.assign({}, originalOptions);
-
-    // Set some default options if they haven't been overridden. We want to
-    // authenticate all requests with the session token. We also want all
-    // requests to run asynchronously in the background, so that they don't
-    // prevent redraws from occurring.
-    options.background = options.background || true;
-
-      extend(options, 'config', (result, xhr) => xhr.setRequestHeader('X-CSRF-Token', this.session.csrfToken));
-
-    // If the method is something like PATCH or DELETE, which not all servers
-    // and clients support, then we'll send it as a POST request with the
-    // intended method specified in the X-HTTP-Method-Override header.
-    if (options.method !== 'GET' && options.method !== 'POST') {
-      const method = options.method;
-      extend(options, 'config', (result, xhr) => xhr.setRequestHeader('X-HTTP-Method-Override', method));
-      options.method = 'POST';
-    }
-
-    // When we deserialize JSON data, if for some reason the server has provided
-    // a dud response, we don't want the application to crash. We'll show an
-    // error message to the user instead.
-    options.deserialize = options.deserialize || ((responseText) => responseText);
-
-    options.errorHandler =
-      options.errorHandler ||
-      ((error) => {
-        throw error;
-      });
-
-    // When extracting the data from the response, we can check the server
-    // response code and show an error message to the user if something's gone
-    // awry.
-    const original = options.extract;
-    options.extract = (xhr) => {
-      let responseText;
-
-      if (original) {
-        responseText = original(xhr.responseText);
-      } else {
-        responseText = xhr.responseText || null;
-      }
-
-      const status = xhr.status;
-
-      if (status < 200 || status > 299) {
-        throw new RequestError(status, responseText, options, xhr);
-      }
-
-      if (xhr.getResponseHeader) {
-        const csrfToken = xhr.getResponseHeader('X-CSRF-Token');
-        if (csrfToken) app.session.csrfToken = csrfToken;
-      }
-
-      try {
-        return JSON.parse(responseText);
-      } catch (e) {
-        throw new RequestError(500, responseText, options, xhr);
-      }
-    };
-
-    if (this.requestError) this.alerts.dismiss(this.requestError.alert);
-
-    // Now make the request. If it's a failure, inspect the error that was
-    // returned and show an alert containing its contents.
-    const deferred = m.deferred();
-
-    m.request(options).then(
-      (response) => deferred.resolve(response),
-      (error) => {
-        this.requestError = error;
-
-        let children;
-
-        switch (error.status) {
-          case 422:
-            children = error.response.errors
-              .map((error) => [error.detail, <br />])
-              .reduce((a, b) => a.concat(b), [])
-              .slice(0, -1);
-            break;
-
-          case 401:
-          case 403:
-            children = app.translator.trans('core.lib.error.permission_denied_message');
-            break;
-
-          case 404:
-          case 410:
-            children = app.translator.trans('core.lib.error.not_found_message');
-            break;
-
-          case 429:
-            children = app.translator.trans('core.lib.error.rate_limit_exceeded_message');
-            break;
-
-          default:
-            children = app.translator.trans('core.lib.error.generic_message');
-        }
-
-        const isDebug = app.forum.attribute('debug');
-
-        error.alert = new Alert({
-          type: 'error',
-          children,
-          controls: isDebug && [
-            <Button className="Button Button--link" onclick={this.showDebug.bind(this, error)}>
-              Debug
-            </Button>,
-          ],
-        });
-
-        try {
-          options.errorHandler(error);
-        } catch (error) {
-          this.alerts.show(error.alert);
-        }
-
-        deferred.reject(error);
-      }
-    );
-
-    return deferred.promise;
-  }
-
-  /**
-   * @param {RequestError} error
-   * @private
-   */
-  showDebug(error) {
-    this.alerts.dismiss(this.requestError.alert);
-
-    this.modal.show(new RequestErrorModal({ error }));
-  }
-
-  /**
-   * Construct a URL to the route with the given name.
-   *
-   * @param {String} name
-   * @param {Object} params
-   * @return {String}
-   * @public
-   */
-  route(name, params = {}) {
-    const url = this.routes[name].path.replace(/:([^\/]+)/g, (m, key) => extract(params, key));
-    const queryString = m.route.buildQueryString(params);
-    const prefix = m.route.mode === 'pathname' ? app.forum.attribute('basePath') : '';
-
-    return prefix + url + (queryString ? '?' + queryString : '');
-  }
-}
diff --git a/js/old/common/Component.js b/js/old/common/Component.js
deleted file mode 100644
index f9532f660..000000000
--- a/js/old/common/Component.js
+++ /dev/null
@@ -1,221 +0,0 @@
-/*
- * This file is part of Flarum.
- *
- * (c) Toby Zerner <toby.zerner@gmail.com>
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-/**
- * The `Component` class defines a user interface 'building block'. A component
- * can generate a virtual DOM to be rendered on each redraw.
- *
- * An instance's virtual DOM can be retrieved directly using the {@link
- * Component#render} method.
- *
- * @example
- * this.myComponentInstance = new MyComponent({foo: 'bar'});
- * return m('div', this.myComponentInstance.render());
- *
- * Alternatively, components can be nested, letting Mithril take care of
- * instance persistence. For this, the static {@link Component.component} method
- * can be used.
- *
- * @example
- * return m('div', MyComponent.component({foo: 'bar'));
- *
- * @see https://lhorie.github.io/mithril/mithril.component.html
- * @abstract
- */
-export default class Component {
-  /**
-   * @param {Object} props
-   * @param {Array|Object} children
-   * @public
-   */
-  constructor(props = {}, children = null) {
-    if (children) props.children = children;
-
-    this.constructor.initProps(props);
-
-    /**
-     * The properties passed into the component.
-     *
-     * @type {Object}
-     */
-    this.props = props;
-
-    /**
-     * The root DOM element for the component.
-     *
-     * @type DOMElement
-     * @public
-     */
-    this.element = null;
-
-    /**
-     * Whether or not to retain the component's subtree on redraw.
-     *
-     * @type {boolean}
-     * @public
-     */
-    this.retain = false;
-
-    this.init();
-  }
-
-  /**
-   * Called when the component is constructed.
-   *
-   * @protected
-   */
-  init() {}
-
-  /**
-   * Called when the component is destroyed, i.e. after a redraw where it is no
-   * longer a part of the view.
-   *
-   * @see https://lhorie.github.io/mithril/mithril.component.html#unloading-components
-   * @param {Object} e
-   * @public
-   */
-  onunload() {}
-
-  /**
-   * Get the renderable virtual DOM that represents the component's view.
-   *
-   * This should NOT be overridden by subclasses. Subclasses wishing to define
-   * their virtual DOM should override Component#view instead.
-   *
-   * @example
-   * this.myComponentInstance = new MyComponent({foo: 'bar'});
-   * return m('div', this.myComponentInstance.render());
-   *
-   * @returns {Object}
-   * @final
-   * @public
-   */
-  render() {
-    const vdom = this.retain ? { subtree: 'retain' } : this.view();
-
-    // Override the root element's config attribute with our own function, which
-    // will set the component instance's element property to the root DOM
-    // element, and then run the component class' config method.
-    vdom.attrs = vdom.attrs || {};
-
-    const originalConfig = vdom.attrs.config;
-
-    vdom.attrs.config = (...args) => {
-      this.element = args[0];
-      this.config.apply(this, args.slice(1));
-      if (originalConfig) originalConfig.apply(this, args);
-    };
-
-    return vdom;
-  }
-
-  /**
-   * Returns a jQuery object for this component's element. If you pass in a
-   * selector string, this method will return a jQuery object, using the current
-   * element as its buffer.
-   *
-   * For example, calling `component.$('li')` will return a jQuery object
-   * containing all of the `li` elements inside the DOM element of this
-   * component.
-   *
-   * @param {String} [selector] a jQuery-compatible selector string
-   * @returns {jQuery} the jQuery object for the DOM node
-   * @final
-   * @public
-   */
-  $(selector) {
-    const $element = $(this.element);
-
-    return selector ? $element.find(selector) : $element;
-  }
-
-  /**
-   * Called after the component's root element is redrawn. This hook can be used
-   * to perform any actions on the DOM, both on the initial draw and any
-   * subsequent redraws. See Mithril's documentation for more information.
-   *
-   * @see https://lhorie.github.io/mithril/mithril.html#the-config-attribute
-   * @param {Boolean} isInitialized
-   * @param {Object} context
-   * @param {Object} vdom
-   * @public
-   */
-  config() {}
-
-  /**
-   * Get the virtual DOM that represents the component's view.
-   *
-   * @return {Object} The virtual DOM
-   * @protected
-   */
-  view() {
-    throw new Error('Component#view must be implemented by subclass');
-  }
-
-  /**
-   * Get a Mithril component object for this component, preloaded with props.
-   *
-   * @see https://lhorie.github.io/mithril/mithril.component.html
-   * @param {Object} [props] Properties to set on the component
-   * @param children
-   * @return {Object} The Mithril component object
-   * @property {function} controller
-   * @property {function} view
-   * @property {Object} component The class of this component
-   * @property {Object} props The props that were passed to the component
-   * @public
-   */
-  static component(props = {}, children = null) {
-    const componentProps = Object.assign({}, props);
-
-    if (children) componentProps.children = children;
-
-    this.initProps(componentProps);
-
-    // Set up a function for Mithril to get the component's view. It will accept
-    // the component's controller (which happens to be the component itself, in
-    // our case), update its props with the ones supplied, and then render the view.
-    const view = (component) => {
-      component.props = componentProps;
-      return component.render();
-    };
-
-    // Mithril uses this property on the view function to cache component
-    // controllers between redraws, thus persisting component state.
-    view.$original = this.prototype.view;
-
-    // Our output object consists of a controller constructor + a view function
-    // which Mithril will use to instantiate and render the component. We also
-    // attach a reference to the props that were passed through and the
-    // component's class for reference.
-    const output = {
-      controller: this.bind(undefined, componentProps),
-      view: view,
-      props: componentProps,
-      component: this,
-    };
-
-    // If a `key` prop was set, then we'll assume that we want that to actually
-    // show up as an attribute on the component object so that Mithril's key
-    // algorithm can be applied.
-    if (componentProps.key) {
-      output.attrs = { key: componentProps.key };
-    }
-
-    return output;
-  }
-
-  /**
-   * Initialize the component's props.
-   *
-   * @param {Object} props
-   * @public
-   */
-  static initProps(props) {}
-}
diff --git a/js/old/common/Model.js b/js/old/common/Model.js
deleted file mode 100644
index c5ca1661b..000000000
--- a/js/old/common/Model.js
+++ /dev/null
@@ -1,319 +0,0 @@
-/**
- * The `Model` class represents a local data resource. It provides methods to
- * persist changes via the API.
- *
- * @abstract
- */
-export default class Model {
-  /**
-   * @param {Object} data A resource object from the API.
-   * @param {Store} store The data store that this model should be persisted to.
-   * @public
-   */
-  constructor(data = {}, store = null) {
-    /**
-     * The resource object from the API.
-     *
-     * @type {Object}
-     * @public
-     */
-    this.data = data;
-
-    /**
-     * The time at which the model's data was last updated. Watching the value
-     * of this property is a fast way to retain/cache a subtree if data hasn't
-     * changed.
-     *
-     * @type {Date}
-     * @public
-     */
-    this.freshness = new Date();
-
-    /**
-     * Whether or not the resource exists on the server.
-     *
-     * @type {Boolean}
-     * @public
-     */
-    this.exists = false;
-
-    /**
-     * The data store that this resource should be persisted to.
-     *
-     * @type {Store}
-     * @protected
-     */
-    this.store = store;
-  }
-
-  /**
-   * Get the model's ID.
-   *
-   * @return {Integer}
-   * @public
-   * @final
-   */
-  id() {
-    return this.data.id;
-  }
-
-  /**
-   * Get one of the model's attributes.
-   *
-   * @param {String} attribute
-   * @return {*}
-   * @public
-   * @final
-   */
-  attribute(attribute) {
-    return this.data.attributes[attribute];
-  }
-
-  /**
-   * Merge new data into this model locally.
-   *
-   * @param {Object} data A resource object to merge into this model
-   * @public
-   */
-  pushData(data) {
-    // Since most of the top-level items in a resource object are objects
-    // (e.g. relationships, attributes), we'll need to check and perform the
-    // merge at the second level if that's the case.
-    for (const key in data) {
-      if (typeof data[key] === 'object') {
-        this.data[key] = this.data[key] || {};
-
-        // For every item in a second-level object, we want to check if we've
-        // been handed a Model instance. If so, we will convert it to a
-        // relationship data object.
-        for (const innerKey in data[key]) {
-          if (data[key][innerKey] instanceof Model) {
-            data[key][innerKey] = { data: Model.getIdentifier(data[key][innerKey]) };
-          }
-          this.data[key][innerKey] = data[key][innerKey];
-        }
-      } else {
-        this.data[key] = data[key];
-      }
-    }
-
-    // Now that we've updated the data, we can say that the model is fresh.
-    // This is an easy way to invalidate retained subtrees etc.
-    this.freshness = new Date();
-  }
-
-  /**
-   * Merge new attributes into this model locally.
-   *
-   * @param {Object} attributes The attributes to merge.
-   * @public
-   */
-  pushAttributes(attributes) {
-    this.pushData({ attributes });
-  }
-
-  /**
-   * Merge new attributes into this model, both locally and with persistence.
-   *
-   * @param {Object} attributes The attributes to save. If a 'relationships' key
-   *     exists, it will be extracted and relationships will also be saved.
-   * @param {Object} [options]
-   * @return {Promise}
-   * @public
-   */
-  save(attributes, options = {}) {
-    const data = {
-      type: this.data.type,
-      id: this.data.id,
-      attributes,
-    };
-
-    // If a 'relationships' key exists, extract it from the attributes hash and
-    // set it on the top-level data object instead. We will be sending this data
-    // object to the API for persistence.
-    if (attributes.relationships) {
-      data.relationships = {};
-
-      for (const key in attributes.relationships) {
-        const model = attributes.relationships[key];
-
-        data.relationships[key] = {
-          data: model instanceof Array ? model.map(Model.getIdentifier) : Model.getIdentifier(model),
-        };
-      }
-
-      delete attributes.relationships;
-    }
-
-    // Before we update the model's data, we should make a copy of the model's
-    // old data so that we can revert back to it if something goes awry during
-    // persistence.
-    const oldData = this.copyData();
-
-    this.pushData(data);
-
-    const request = { data };
-    if (options.meta) request.meta = options.meta;
-
-    return app
-      .request(
-        Object.assign(
-          {
-            method: this.exists ? 'PATCH' : 'POST',
-            url: app.forum.attribute('apiUrl') + this.apiEndpoint(),
-            data: request,
-          },
-          options
-        )
-      )
-      .then(
-        // If everything went well, we'll make sure the store knows that this
-        // model exists now (if it didn't already), and we'll push the data that
-        // the API returned into the store.
-        (payload) => {
-          this.store.data[payload.data.type] = this.store.data[payload.data.type] || {};
-          this.store.data[payload.data.type][payload.data.id] = this;
-          return this.store.pushPayload(payload);
-        },
-
-        // If something went wrong, though... good thing we backed up our model's
-        // old data! We'll revert to that and let others handle the error.
-        (response) => {
-          this.pushData(oldData);
-          m.lazyRedraw();
-          throw response;
-        }
-      );
-  }
-
-  /**
-   * Send a request to delete the resource.
-   *
-   * @param {Object} data Data to send along with the DELETE request.
-   * @param {Object} [options]
-   * @return {Promise}
-   * @public
-   */
-  delete(data, options = {}) {
-    if (!this.exists) return m.deferred().resolve().promise;
-
-    return app
-      .request(
-        Object.assign(
-          {
-            method: 'DELETE',
-            url: app.forum.attribute('apiUrl') + this.apiEndpoint(),
-            data,
-          },
-          options
-        )
-      )
-      .then(() => {
-        this.exists = false;
-        this.store.remove(this);
-      });
-  }
-
-  /**
-   * Construct a path to the API endpoint for this resource.
-   *
-   * @return {String}
-   * @protected
-   */
-  apiEndpoint() {
-    return '/' + this.data.type + (this.exists ? '/' + this.data.id : '');
-  }
-
-  copyData() {
-    return JSON.parse(JSON.stringify(this.data));
-  }
-
-  /**
-   * Generate a function which returns the value of the given attribute.
-   *
-   * @param {String} name
-   * @param {function} [transform] A function to transform the attribute value
-   * @return {*}
-   * @public
-   */
-  static attribute(name, transform) {
-    return function () {
-      const value = this.data.attributes && this.data.attributes[name];
-
-      return transform ? transform(value) : value;
-    };
-  }
-
-  /**
-   * Generate a function which returns the value of the given has-one
-   * relationship.
-   *
-   * @param {String} name
-   * @return {Model|Boolean|undefined} false if no information about the
-   *     relationship exists; undefined if the relationship exists but the model
-   *     has not been loaded; or the model if it has been loaded.
-   * @public
-   */
-  static hasOne(name) {
-    return function () {
-      if (this.data.relationships) {
-        const relationship = this.data.relationships[name];
-
-        if (relationship) {
-          return app.store.getById(relationship.data.type, relationship.data.id);
-        }
-      }
-
-      return false;
-    };
-  }
-
-  /**
-   * Generate a function which returns the value of the given has-many
-   * relationship.
-   *
-   * @param {String} name
-   * @return {Array|Boolean} false if no information about the relationship
-   *     exists; an array if it does, containing models if they have been
-   *     loaded, and undefined for those that have not.
-   * @public
-   */
-  static hasMany(name) {
-    return function () {
-      if (this.data.relationships) {
-        const relationship = this.data.relationships[name];
-
-        if (relationship) {
-          return relationship.data.map((data) => app.store.getById(data.type, data.id));
-        }
-      }
-
-      return false;
-    };
-  }
-
-  /**
-   * Transform the given value into a Date object.
-   *
-   * @param {String} value
-   * @return {Date|null}
-   * @public
-   */
-  static transformDate(value) {
-    return value ? new Date(value) : null;
-  }
-
-  /**
-   * Get a resource identifier object for the given model.
-   *
-   * @param {Model} model
-   * @return {Object}
-   * @protected
-   */
-  static getIdentifier(model) {
-    return {
-      type: model.data.type,
-      id: model.data.id,
-    };
-  }
-}
diff --git a/js/old/common/Session.js b/js/old/common/Session.js
deleted file mode 100644
index 64f5b252a..000000000
--- a/js/old/common/Session.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * The `Session` class defines the current user session. It stores a reference
- * to the current authenticated user, and provides methods to log in/out.
- */
-export default class Session {
-  constructor(user, csrfToken) {
-    /**
-     * The current authenticated user.
-     *
-     * @type {User|null}
-     * @public
-     */
-    this.user = user;
-
-    /**
-     * The CSRF token.
-     *
-     * @type {String|null}
-     * @public
-     */
-    this.csrfToken = csrfToken;
-  }
-
-  /**
-   * Attempt to log in a user.
-   *
-   * @param {String} identification The username/email.
-   * @param {String} password
-   * @param {Object} [options]
-   * @return {Promise}
-   * @public
-   */
-  login(data, options = {}) {
-    return app.request(
-      Object.assign(
-        {
-          method: 'POST',
-          url: app.forum.attribute('baseUrl') + '/login',
-          data,
-        },
-        options
-      )
-    );
-  }
-
-  /**
-   * Log the user out.
-   *
-   * @public
-   */
-  logout() {
-    window.location = app.forum.attribute('baseUrl') + '/logout?token=' + this.csrfToken;
-  }
-}
diff --git a/js/old/common/Store.js b/js/old/common/Store.js
deleted file mode 100644
index ac9e243f7..000000000
--- a/js/old/common/Store.js
+++ /dev/null
@@ -1,170 +0,0 @@
-/**
- * The `Store` class defines a local data store, and provides methods to
- * retrieve data from the API.
- */
-export default class Store {
-  constructor(models) {
-    /**
-     * The local data store. A tree of resource types to IDs, such that
-     * accessing data[type][id] will return the model for that type/ID.
-     *
-     * @type {Object}
-     * @protected
-     */
-    this.data = {};
-
-    /**
-     * The model registry. A map of resource types to the model class that
-     * should be used to represent resources of that type.
-     *
-     * @type {Object}
-     * @public
-     */
-    this.models = models;
-  }
-
-  /**
-   * Push resources contained within an API payload into the store.
-   *
-   * @param {Object} payload
-   * @return {Model|Model[]} The model(s) representing the resource(s) contained
-   *     within the 'data' key of the payload.
-   * @public
-   */
-  pushPayload(payload) {
-    if (payload.included) payload.included.map(this.pushObject.bind(this));
-
-    const result = payload.data instanceof Array ? payload.data.map(this.pushObject.bind(this)) : this.pushObject(payload.data);
-
-    // Attach the original payload to the model that we give back. This is
-    // useful to consumers as it allows them to access meta information
-    // associated with their request.
-    result.payload = payload;
-
-    return result;
-  }
-
-  /**
-   * Create a model to represent a resource object (or update an existing one),
-   * and push it into the store.
-   *
-   * @param {Object} data The resource object
-   * @return {Model|null} The model, or null if no model class has been
-   *     registered for this resource type.
-   * @public
-   */
-  pushObject(data) {
-    if (!this.models[data.type]) return null;
-
-    const type = (this.data[data.type] = this.data[data.type] || {});
-
-    if (type[data.id]) {
-      type[data.id].pushData(data);
-    } else {
-      type[data.id] = this.createRecord(data.type, data);
-    }
-
-    type[data.id].exists = true;
-
-    return type[data.id];
-  }
-
-  /**
-   * Make a request to the API to find record(s) of a specific type.
-   *
-   * @param {String} type The resource type.
-   * @param {Integer|Integer[]|Object} [id] The ID(s) of the model(s) to retrieve.
-   *     Alternatively, if an object is passed, it will be handled as the
-   *     `query` parameter.
-   * @param {Object} [query]
-   * @param {Object} [options]
-   * @return {Promise}
-   * @public
-   */
-  find(type, id, query = {}, options = {}) {
-    let data = query;
-    let url = app.forum.attribute('apiUrl') + '/' + type;
-
-    if (id instanceof Array) {
-      url += '?filter[id]=' + id.join(',');
-    } else if (typeof id === 'object') {
-      data = id;
-    } else if (id) {
-      url += '/' + id;
-    }
-
-    return app
-      .request(
-        Object.assign(
-          {
-            method: 'GET',
-            url,
-            data,
-          },
-          options
-        )
-      )
-      .then(this.pushPayload.bind(this));
-  }
-
-  /**
-   * Get a record from the store by ID.
-   *
-   * @param {String} type The resource type.
-   * @param {Integer} id The resource ID.
-   * @return {Model}
-   * @public
-   */
-  getById(type, id) {
-    return this.data[type] && this.data[type][id];
-  }
-
-  /**
-   * Get a record from the store by the value of a model attribute.
-   *
-   * @param {String} type The resource type.
-   * @param {String} key The name of the method on the model.
-   * @param {*} value The value of the model attribute.
-   * @return {Model}
-   * @public
-   */
-  getBy(type, key, value) {
-    return this.all(type).filter((model) => model[key]() === value)[0];
-  }
-
-  /**
-   * Get all loaded records of a specific type.
-   *
-   * @param {String} type
-   * @return {Model[]}
-   * @public
-   */
-  all(type) {
-    const records = this.data[type];
-
-    return records ? Object.keys(records).map((id) => records[id]) : [];
-  }
-
-  /**
-   * Remove the given model from the store.
-   *
-   * @param {Model} model
-   */
-  remove(model) {
-    delete this.data[model.data.type][model.id()];
-  }
-
-  /**
-   * Create a new record of the given type.
-   *
-   * @param {String} type The resource type
-   * @param {Object} [data] Any data to initialize the model with
-   * @return {Model}
-   * @public
-   */
-  createRecord(type, data = {}) {
-    data.type = data.type || type;
-
-    return new this.models[type](data, this);
-  }
-}
diff --git a/js/old/common/Translator.js b/js/old/common/Translator.js
deleted file mode 100644
index 31ea0e2a4..000000000
--- a/js/old/common/Translator.js
+++ /dev/null
@@ -1,290 +0,0 @@
-import User from './models/User';
-import username from './helpers/username';
-import extract from './utils/extract';
-
-/**
- * Translator with the same API as Symfony's.
- *
- * Derived from https://github.com/willdurand/BazingaJsTranslationBundle
- * which is available under the MIT License.
- * Copyright (c) William Durand <william.durand1@gmail.com>
- */
-export default class Translator {
-  constructor() {
-    /**
-     * A map of translation keys to their translated values.
-     *
-     * @type {Object}
-     * @public
-     */
-    this.translations = {};
-
-    this.locale = null;
-  }
-
-  addTranslations(translations) {
-    Object.assign(this.translations, translations);
-  }
-
-  trans(id, parameters) {
-    const translation = this.translations[id];
-
-    if (translation) {
-      return this.apply(translation, parameters || {});
-    }
-
-    return id;
-  }
-
-  transChoice(id, number, parameters) {
-    let translation = this.translations[id];
-
-    if (translation) {
-      number = parseInt(number, 10);
-
-      translation = this.pluralize(translation, number);
-
-      return this.apply(translation, parameters || {});
-    }
-
-    return id;
-  }
-
-  apply(translation, input) {
-    // If we've been given a user model as one of the input parameters, then
-    // we'll extract the username and use that for the translation. In the
-    // future there should be a hook here to inspect the user and change the
-    // translation key. This will allow a gender property to determine which
-    // translation key is used.
-    if ('user' in input) {
-      const user = extract(input, 'user');
-
-      if (!input.username) input.username = username(user);
-    }
-
-    translation = translation.split(new RegExp('({[a-z0-9_]+}|</?[a-z0-9_]+>)', 'gi'));
-
-    const hydrated = [];
-    const open = [hydrated];
-
-    translation.forEach((part) => {
-      const match = part.match(new RegExp('{([a-z0-9_]+)}|<(/?)([a-z0-9_]+)>', 'i'));
-
-      if (match) {
-        if (match[1]) {
-          open[0].push(input[match[1]]);
-        } else if (match[3]) {
-          if (match[2]) {
-            open.shift();
-          } else {
-            let tag = input[match[3]] || { tag: match[3], children: [] };
-            open[0].push(tag);
-            open.unshift(tag.children || tag);
-          }
-        }
-      } else {
-        open[0].push(part);
-      }
-    });
-
-    return hydrated.filter((part) => part);
-  }
-
-  pluralize(translation, number) {
-    const sPluralRegex = new RegExp(/^\w+\: +(.+)$/),
-      cPluralRegex = new RegExp(/^\s*((\{\s*(\-?\d+[\s*,\s*\-?\d+]*)\s*\})|([\[\]])\s*(-Inf|\-?\d+)\s*,\s*(\+?Inf|\-?\d+)\s*([\[\]]))\s?(.+?)$/),
-      iPluralRegex = new RegExp(/^\s*(\{\s*(\-?\d+[\s*,\s*\-?\d+]*)\s*\})|([\[\]])\s*(-Inf|\-?\d+)\s*,\s*(\+?Inf|\-?\d+)\s*([\[\]])/),
-      standardRules = [],
-      explicitRules = [];
-
-    translation.split('|').forEach((part) => {
-      if (cPluralRegex.test(part)) {
-        const matches = part.match(cPluralRegex);
-        explicitRules[matches[0]] = matches[matches.length - 1];
-      } else if (sPluralRegex.test(part)) {
-        const matches = part.match(sPluralRegex);
-        standardRules.push(matches[1]);
-      } else {
-        standardRules.push(part);
-      }
-    });
-
-    explicitRules.forEach((rule, e) => {
-      if (iPluralRegex.test(e)) {
-        const matches = e.match(iPluralRegex);
-
-        if (matches[1]) {
-          const ns = matches[2].split(',');
-
-          for (let n in ns) {
-            if (number == ns[n]) {
-              return explicitRules[e];
-            }
-          }
-        } else {
-          var leftNumber = this.convertNumber(matches[4]);
-          var rightNumber = this.convertNumber(matches[5]);
-
-          if (
-            ('[' === matches[3] ? number >= leftNumber : number > leftNumber) &&
-            (']' === matches[6] ? number <= rightNumber : number < rightNumber)
-          ) {
-            return explicitRules[e];
-          }
-        }
-      }
-    });
-
-    return standardRules[this.pluralPosition(number, this.locale)] || standardRules[0] || undefined;
-  }
-
-  convertNumber(number) {
-    if ('-Inf' === number) {
-      return Number.NEGATIVE_INFINITY;
-    } else if ('+Inf' === number || 'Inf' === number) {
-      return Number.POSITIVE_INFINITY;
-    }
-
-    return parseInt(number, 10);
-  }
-
-  pluralPosition(number, locale) {
-    if ('pt_BR' === locale) {
-      locale = 'xbr';
-    }
-
-    if (locale.length > 3) {
-      locale = locale.split('_')[0];
-    }
-
-    switch (locale) {
-      case 'bo':
-      case 'dz':
-      case 'id':
-      case 'ja':
-      case 'jv':
-      case 'ka':
-      case 'km':
-      case 'kn':
-      case 'ko':
-      case 'ms':
-      case 'th':
-      case 'vi':
-      case 'zh':
-        return 0;
-
-      case 'af':
-      case 'az':
-      case 'bn':
-      case 'bg':
-      case 'ca':
-      case 'da':
-      case 'de':
-      case 'el':
-      case 'en':
-      case 'eo':
-      case 'es':
-      case 'et':
-      case 'eu':
-      case 'fa':
-      case 'fi':
-      case 'fo':
-      case 'fur':
-      case 'fy':
-      case 'gl':
-      case 'gu':
-      case 'ha':
-      case 'he':
-      case 'hu':
-      case 'is':
-      case 'it':
-      case 'ku':
-      case 'lb':
-      case 'ml':
-      case 'mn':
-      case 'mr':
-      case 'nah':
-      case 'nb':
-      case 'ne':
-      case 'nl':
-      case 'nn':
-      case 'no':
-      case 'om':
-      case 'or':
-      case 'pa':
-      case 'pap':
-      case 'ps':
-      case 'pt':
-      case 'so':
-      case 'sq':
-      case 'sv':
-      case 'sw':
-      case 'ta':
-      case 'te':
-      case 'tk':
-      case 'tr':
-      case 'ur':
-      case 'zu':
-        return number == 1 ? 0 : 1;
-
-      case 'am':
-      case 'bh':
-      case 'fil':
-      case 'fr':
-      case 'gun':
-      case 'hi':
-      case 'ln':
-      case 'mg':
-      case 'nso':
-      case 'xbr':
-      case 'ti':
-      case 'wa':
-        return number === 0 || number == 1 ? 0 : 1;
-
-      case 'be':
-      case 'bs':
-      case 'hr':
-      case 'ru':
-      case 'sr':
-      case 'uk':
-        return number % 10 == 1 && number % 100 != 11 ? 0 : number % 10 >= 2 && number % 10 <= 4 && (number % 100 < 10 || number % 100 >= 20) ? 1 : 2;
-
-      case 'cs':
-      case 'sk':
-        return number == 1 ? 0 : number >= 2 && number <= 4 ? 1 : 2;
-
-      case 'ga':
-        return number == 1 ? 0 : number == 2 ? 1 : 2;
-
-      case 'lt':
-        return number % 10 == 1 && number % 100 != 11 ? 0 : number % 10 >= 2 && (number % 100 < 10 || number % 100 >= 20) ? 1 : 2;
-
-      case 'sl':
-        return number % 100 == 1 ? 0 : number % 100 == 2 ? 1 : number % 100 == 3 || number % 100 == 4 ? 2 : 3;
-
-      case 'mk':
-        return number % 10 == 1 ? 0 : 1;
-
-      case 'mt':
-        return number == 1 ? 0 : number === 0 || (number % 100 > 1 && number % 100 < 11) ? 1 : number % 100 > 10 && number % 100 < 20 ? 2 : 3;
-
-      case 'lv':
-        return number === 0 ? 0 : number % 10 == 1 && number % 100 != 11 ? 1 : 2;
-
-      case 'pl':
-        return number == 1 ? 0 : number % 10 >= 2 && number % 10 <= 4 && (number % 100 < 12 || number % 100 > 14) ? 1 : 2;
-
-      case 'cy':
-        return number == 1 ? 0 : number == 2 ? 1 : number == 8 || number == 11 ? 2 : 3;
-
-      case 'ro':
-        return number == 1 ? 0 : number === 0 || (number % 100 > 0 && number % 100 < 20) ? 1 : 2;
-
-      case 'ar':
-        return number === 0 ? 0 : number == 1 ? 1 : number == 2 ? 2 : number >= 3 && number <= 10 ? 3 : number >= 11 && number <= 99 ? 4 : 5;
-
-      default:
-        return 0;
-    }
-  }
-}
diff --git a/js/old/common/compat.js b/js/old/common/compat.js
deleted file mode 100644
index 0541734a0..000000000
--- a/js/old/common/compat.js
+++ /dev/null
@@ -1,127 +0,0 @@
-import * as extend from './extend';
-import Session from './Session';
-import Store from './Store';
-import evented from './utils/evented';
-import liveHumanTimes from './utils/liveHumanTimes';
-import ItemList from './utils/ItemList';
-import mixin from './utils/mixin';
-import humanTime from './utils/humanTime';
-import computed from './utils/computed';
-import Drawer from './utils/Drawer';
-import anchorScroll from './utils/anchorScroll';
-import RequestError from './utils/RequestError';
-import abbreviateNumber from './utils/abbreviateNumber';
-import * as string from './utils/string';
-import SubtreeRetainer from './utils/SubtreeRetainer';
-import extract from './utils/extract';
-import ScrollListener from './utils/ScrollListener';
-import stringToColor from './utils/stringToColor';
-import patchMithril from './utils/patchMithril';
-import classList from './utils/classList';
-import extractText from './utils/extractText';
-import formatNumber from './utils/formatNumber';
-import mapRoutes from './utils/mapRoutes';
-import Notification from './models/Notification';
-import User from './models/User';
-import Post from './models/Post';
-import Discussion from './models/Discussion';
-import Group from './models/Group';
-import Forum from './models/Forum';
-import Component from './Component';
-import Translator from './Translator';
-import AlertManager from './components/AlertManager';
-import Switch from './components/Switch';
-import Badge from './components/Badge';
-import LoadingIndicator from './components/LoadingIndicator';
-import Placeholder from './components/Placeholder';
-import Separator from './components/Separator';
-import Dropdown from './components/Dropdown';
-import SplitDropdown from './components/SplitDropdown';
-import RequestErrorModal from './components/RequestErrorModal';
-import FieldSet from './components/FieldSet';
-import Select from './components/Select';
-import Navigation from './components/Navigation';
-import Alert from './components/Alert';
-import LinkButton from './components/LinkButton';
-import Checkbox from './components/Checkbox';
-import SelectDropdown from './components/SelectDropdown';
-import ModalManager from './components/ModalManager';
-import Button from './components/Button';
-import Modal from './components/Modal';
-import GroupBadge from './components/GroupBadge';
-import Model from './Model';
-import Application from './Application';
-import fullTime from './helpers/fullTime';
-import avatar from './helpers/avatar';
-import icon from './helpers/icon';
-import humanTimeHelper from './helpers/humanTime';
-import punctuateSeries from './helpers/punctuateSeries';
-import highlight from './helpers/highlight';
-import username from './helpers/username';
-import userOnline from './helpers/userOnline';
-import listItems from './helpers/listItems';
-
-export default {
-  extend: extend,
-  Session: Session,
-  Store: Store,
-  'utils/evented': evented,
-  'utils/liveHumanTimes': liveHumanTimes,
-  'utils/ItemList': ItemList,
-  'utils/mixin': mixin,
-  'utils/humanTime': humanTime,
-  'utils/computed': computed,
-  'utils/Drawer': Drawer,
-  'utils/anchorScroll': anchorScroll,
-  'utils/RequestError': RequestError,
-  'utils/abbreviateNumber': abbreviateNumber,
-  'utils/string': string,
-  'utils/SubtreeRetainer': SubtreeRetainer,
-  'utils/extract': extract,
-  'utils/ScrollListener': ScrollListener,
-  'utils/stringToColor': stringToColor,
-  'utils/patchMithril': patchMithril,
-  'utils/classList': classList,
-  'utils/extractText': extractText,
-  'utils/formatNumber': formatNumber,
-  'utils/mapRoutes': mapRoutes,
-  'models/Notification': Notification,
-  'models/User': User,
-  'models/Post': Post,
-  'models/Discussion': Discussion,
-  'models/Group': Group,
-  'models/Forum': Forum,
-  Component: Component,
-  Translator: Translator,
-  'components/AlertManager': AlertManager,
-  'components/Switch': Switch,
-  'components/Badge': Badge,
-  'components/LoadingIndicator': LoadingIndicator,
-  'components/Placeholder': Placeholder,
-  'components/Separator': Separator,
-  'components/Dropdown': Dropdown,
-  'components/SplitDropdown': SplitDropdown,
-  'components/RequestErrorModal': RequestErrorModal,
-  'components/FieldSet': FieldSet,
-  'components/Select': Select,
-  'components/Navigation': Navigation,
-  'components/Alert': Alert,
-  'components/LinkButton': LinkButton,
-  'components/Checkbox': Checkbox,
-  'components/SelectDropdown': SelectDropdown,
-  'components/ModalManager': ModalManager,
-  'components/Button': Button,
-  'components/Modal': Modal,
-  'components/GroupBadge': GroupBadge,
-  Model: Model,
-  Application: Application,
-  'helpers/fullTime': fullTime,
-  'helpers/avatar': avatar,
-  'helpers/icon': icon,
-  'helpers/humanTime': humanTimeHelper,
-  'helpers/punctuateSeries': punctuateSeries,
-  'helpers/highlight': highlight,
-  'helpers/username': username,
-  'helpers/userOnline': userOnline,
-  'helpers/listItems': listItems,
-};
diff --git a/js/old/common/components/Alert.js b/js/old/common/components/Alert.js
deleted file mode 100644
index f26cf4a92..000000000
--- a/js/old/common/components/Alert.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import Component from '../Component';
-import Button from './Button';
-import listItems from '../helpers/listItems';
-import extract from '../utils/extract';
-
-/**
- * The `Alert` component represents an alert box, which contains a message,
- * some controls, and may be dismissible.
- *
- * The alert may have the following special props:
- *
- * - `type` The type of alert this is. Will be used to give the alert a class
- *   name of `Alert--{type}`.
- * - `controls` An array of controls to show in the alert.
- * - `dismissible` Whether or not the alert can be dismissed.
- * - `ondismiss` A callback to run when the alert is dismissed.
- *
- * All other props will be assigned as attributes on the alert element.
- */
-export default class Alert extends Component {
-  view() {
-    const attrs = Object.assign({}, this.props);
-
-    const type = extract(attrs, 'type');
-    attrs.className = 'Alert Alert--' + type + ' ' + (attrs.className || '');
-
-    const children = extract(attrs, 'children');
-    const controls = extract(attrs, 'controls') || [];
-
-    // If the alert is meant to be dismissible (which is the case by default),
-    // then we will create a dismiss button to append as the final control in
-    // the alert.
-    const dismissible = extract(attrs, 'dismissible');
-    const ondismiss = extract(attrs, 'ondismiss');
-    const dismissControl = [];
-
-    if (dismissible || dismissible === undefined) {
-      dismissControl.push(<Button icon="fas fa-times" className="Button Button--link Button--icon Alert-dismiss" onclick={ondismiss} />);
-    }
-
-    return (
-      <div {...attrs}>
-        <span className="Alert-body">{children}</span>
-        <ul className="Alert-controls">{listItems(controls.concat(dismissControl))}</ul>
-      </div>
-    );
-  }
-}
diff --git a/js/old/common/components/AlertManager.js b/js/old/common/components/AlertManager.js
deleted file mode 100644
index 1592e57fc..000000000
--- a/js/old/common/components/AlertManager.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import Component from '../Component';
-import Alert from './Alert';
-
-/**
- * The `AlertManager` component provides an area in which `Alert` components can
- * be shown and dismissed.
- */
-export default class AlertManager extends Component {
-  init() {
-    /**
-     * An array of Alert components which are currently showing.
-     *
-     * @type {Alert[]}
-     * @protected
-     */
-    this.components = [];
-  }
-
-  view() {
-    return (
-      <div className="AlertManager">
-        {this.components.map((component) => (
-          <div className="AlertManager-alert">{component}</div>
-        ))}
-      </div>
-    );
-  }
-
-  config(isInitialized, context) {
-    // Since this component is 'above' the content of the page (that is, it is a
-    // part of the global UI that persists between routes), we will flag the DOM
-    // to be retained across route changes.
-    context.retain = true;
-  }
-
-  /**
-   * Show an Alert in the alerts area.
-   *
-   * @param {Alert} component
-   * @public
-   */
-  show(component) {
-    if (!(component instanceof Alert)) {
-      throw new Error('The AlertManager component can only show Alert components');
-    }
-
-    component.props.ondismiss = this.dismiss.bind(this, component);
-
-    this.components.push(component);
-    m.redraw();
-  }
-
-  /**
-   * Dismiss an alert.
-   *
-   * @param {Alert} component
-   * @public
-   */
-  dismiss(component) {
-    const index = this.components.indexOf(component);
-
-    if (index !== -1) {
-      this.components.splice(index, 1);
-      m.redraw();
-    }
-  }
-
-  /**
-   * Clear all alerts.
-   *
-   * @public
-   */
-  clear() {
-    this.components = [];
-    m.redraw();
-  }
-}
diff --git a/js/old/common/components/Badge.js b/js/old/common/components/Badge.js
deleted file mode 100644
index 9e73e584d..000000000
--- a/js/old/common/components/Badge.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import Component from '../Component';
-import icon from '../helpers/icon';
-import extract from '../utils/extract';
-
-/**
- * The `Badge` component represents a user/discussion badge, indicating some
- * status (e.g. a discussion is stickied, a user is an admin).
- *
- * A badge may have the following special props:
- *
- * - `type` The type of badge this is. This will be used to give the badge a
- *   class name of `Badge--{type}`.
- * - `icon` The name of an icon to show inside the badge.
- * - `label`
- *
- * All other props will be assigned as attributes on the badge element.
- */
-export default class Badge extends Component {
-  view() {
-    const attrs = Object.assign({}, this.props);
-    const type = extract(attrs, 'type');
-    const iconName = extract(attrs, 'icon');
-
-    attrs.className = 'Badge ' + (type ? 'Badge--' + type : '') + ' ' + (attrs.className || '');
-    attrs.title = extract(attrs, 'label') || '';
-
-    return <span {...attrs}>{iconName ? icon(iconName, { className: 'Badge-icon' }) : m.trust('&nbsp;')}</span>;
-  }
-
-  config(isInitialized) {
-    if (isInitialized) return;
-
-    if (this.props.label) this.$().tooltip({ container: 'body' });
-  }
-}
diff --git a/js/old/common/components/Button.js b/js/old/common/components/Button.js
deleted file mode 100644
index 1fb9c0712..000000000
--- a/js/old/common/components/Button.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import Component from '../Component';
-import icon from '../helpers/icon';
-import extract from '../utils/extract';
-import extractText from '../utils/extractText';
-import LoadingIndicator from './LoadingIndicator';
-
-/**
- * The `Button` component defines an element which, when clicked, performs an
- * action. The button may have the following special props:
- *
- * - `icon` The name of the icon class. If specified, the button will be given a
- *   'has-icon' class name.
- * - `disabled` Whether or not the button is disabled. If truthy, the button
- *   will be given a 'disabled' class name, and any `onclick` handler will be
- *   removed.
- * - `loading` Whether or not the button should be in a disabled loading state.
- *
- * All other props will be assigned as attributes on the button element.
- *
- * Note that a Button has no default class names. This is because a Button can
- * be used to represent any generic clickable control, like a menu item.
- */
-export default class Button extends Component {
-  view() {
-    const attrs = Object.assign({}, this.props);
-
-    delete attrs.children;
-
-    attrs.className = attrs.className || '';
-    attrs.type = attrs.type || 'button';
-
-    // If a tooltip was provided for buttons without additional content, we also
-    // use this tooltip as text for screen readers
-    if (attrs.title && !this.props.children) {
-      attrs['aria-label'] = attrs.title;
-    }
-
-    // If nothing else is provided, we use the textual button content as tooltip
-    if (!attrs.title && this.props.children) {
-      attrs.title = extractText(this.props.children);
-    }
-
-    const iconName = extract(attrs, 'icon');
-    if (iconName) attrs.className += ' hasIcon';
-
-    const loading = extract(attrs, 'loading');
-    if (attrs.disabled || loading) {
-      attrs.className += ' disabled' + (loading ? ' loading' : '');
-      delete attrs.onclick;
-    }
-
-    return <button {...attrs}>{this.getButtonContent()}</button>;
-  }
-
-  /**
-   * Get the template for the button's content.
-   *
-   * @return {*}
-   * @protected
-   */
-  getButtonContent() {
-    const iconName = this.props.icon;
-
-    return [
-      iconName && iconName !== true ? icon(iconName, { className: 'Button-icon' }) : '',
-      this.props.children ? <span className="Button-label">{this.props.children}</span> : '',
-      this.props.loading ? LoadingIndicator.component({ size: 'tiny', className: 'LoadingIndicator--inline' }) : '',
-    ];
-  }
-}
diff --git a/js/old/common/components/Checkbox.js b/js/old/common/components/Checkbox.js
deleted file mode 100644
index ce4b0ef8b..000000000
--- a/js/old/common/components/Checkbox.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import Component from '../Component';
-import LoadingIndicator from './LoadingIndicator';
-import icon from '../helpers/icon';
-
-/**
- * The `Checkbox` component defines a checkbox input.
- *
- * ### Props
- *
- * - `state` Whether or not the checkbox is checked.
- * - `className` The class name for the root element.
- * - `disabled` Whether or not the checkbox is disabled.
- * - `onchange` A callback to run when the checkbox is checked/unchecked.
- * - `children` A text label to display next to the checkbox.
- */
-export default class Checkbox extends Component {
-  init() {
-    /**
-     * Whether or not the checkbox's value is in the process of being saved.
-     *
-     * @type {Boolean}
-     * @public
-     */
-    this.loading = false;
-  }
-
-  view() {
-    let className = 'Checkbox ' + (this.props.state ? 'on' : 'off') + ' ' + (this.props.className || '');
-    if (this.loading) className += ' loading';
-    if (this.props.disabled) className += ' disabled';
-
-    return (
-      <label className={className}>
-        <input type="checkbox" checked={this.props.state} disabled={this.props.disabled} onchange={m.withAttr('checked', this.onchange.bind(this))} />
-        <div className="Checkbox-display">{this.getDisplay()}</div>
-        {this.props.children}
-      </label>
-    );
-  }
-
-  /**
-   * Get the template for the checkbox's display (tick/cross icon).
-   *
-   * @return {*}
-   * @protected
-   */
-  getDisplay() {
-    return this.loading ? LoadingIndicator.component({ size: 'tiny' }) : icon(this.props.state ? 'fas fa-check' : 'fas fa-times');
-  }
-
-  /**
-   * Run a callback when the state of the checkbox is changed.
-   *
-   * @param {Boolean} checked
-   * @protected
-   */
-  onchange(checked) {
-    if (this.props.onchange) this.props.onchange(checked, this);
-  }
-}
diff --git a/js/old/common/components/Dropdown.js b/js/old/common/components/Dropdown.js
deleted file mode 100644
index 17e0b1d89..000000000
--- a/js/old/common/components/Dropdown.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import Component from '../Component';
-import icon from '../helpers/icon';
-import listItems from '../helpers/listItems';
-
-/**
- * The `Dropdown` component displays a button which, when clicked, shows a
- * dropdown menu beneath it.
- *
- * ### Props
- *
- * - `buttonClassName` A class name to apply to the dropdown toggle button.
- * - `menuClassName` A class name to apply to the dropdown menu.
- * - `icon` The name of an icon to show in the dropdown toggle button.
- * - `caretIcon` The name of an icon to show on the right of the button.
- * - `label` The label of the dropdown toggle button. Defaults to 'Controls'.
- * - `onhide`
- * - `onshow`
- *
- * The children will be displayed as a list inside of the dropdown menu.
- */
-export default class Dropdown extends Component {
-  protected showing = false;
-
-  static initProps(props) {
-    super.initProps(props);
-
-    props.className = props.className || '';
-    props.buttonClassName = props.buttonClassName || '';
-    props.menuClassName = props.menuClassName || '';
-    props.label = props.label || '';
-    props.caretIcon = typeof props.caretIcon !== 'undefined' ? props.caretIcon : 'fas fa-caret-down';
-  }
-
-  init() {
-    super.oninit();
-
-    this.showing = false;
-  }
-
-  view() {
-    const items = this.props.children ? listItems(this.props.children) : [];
-
-    return (
-      <div className={'ButtonGroup Dropdown dropdown ' + this.props.className + ' itemCount' + items.length + (this.showing ? ' open' : '')}>
-        {this.getButton()}
-        {this.getMenu(items)}
-      </div>
-    );
-  }
-
-  config(isInitialized) {
-    if (isInitialized) return;
-
-    // When opening the dropdown menu, work out if the menu goes beyond the
-    // bottom of the viewport. If it does, we will apply class to make it show
-    // above the toggle button instead of below it.
-    this.$().on('shown.bs.dropdown', () => {
-      this.showing = true;
-
-      if (this.props.onshow) {
-        this.props.onshow();
-      }
-
-      m.redraw();
-
-      const $menu = this.$('.Dropdown-menu');
-      const isRight = $menu.hasClass('Dropdown-menu--right');
-
-      $menu.removeClass('Dropdown-menu--top Dropdown-menu--right');
-
-      $menu.toggleClass('Dropdown-menu--top', $menu.offset().top + $menu.height() > $(window).scrollTop() + $(window).height());
-
-      if ($menu.offset().top < 0) {
-        $menu.removeClass('Dropdown-menu--top');
-      }
-
-      $menu.toggleClass('Dropdown-menu--right', isRight || $menu.offset().left + $menu.width() > $(window).scrollLeft() + $(window).width());
-    });
-
-    this.$().on('hidden.bs.dropdown', () => {
-      this.showing = false;
-
-      if (this.props.onhide) {
-        this.props.onhide();
-      }
-
-      m.redraw();
-    });
-  }
-
-  /**
-   * Get the template for the button.
-   *
-   * @return {*}
-   * @protected
-   */
-  getButton() {
-    return (
-      <button className={'Dropdown-toggle ' + this.props.buttonClassName} data-toggle="dropdown" onclick={this.props.onclick}>
-        {this.getButtonContent()}
-      </button>
-    );
-  }
-
-  /**
-   * Get the template for the button's content.
-   *
-   * @return {*}
-   * @protected
-   */
-  getButtonContent() {
-    return [
-      this.props.icon ? icon(this.props.icon, { className: 'Button-icon' }) : '',
-      <span className="Button-label">{this.props.label}</span>,
-      this.props.caretIcon ? icon(this.props.caretIcon, { className: 'Button-caret' }) : '',
-    ];
-  }
-
-  getMenu(items) {
-    return <ul className={'Dropdown-menu dropdown-menu ' + this.props.menuClassName}>{items}</ul>;
-  }
-}
diff --git a/js/old/common/components/FieldSet.js b/js/old/common/components/FieldSet.js
deleted file mode 100644
index 450034a19..000000000
--- a/js/old/common/components/FieldSet.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import Component from '../Component';
-import listItems from '../helpers/listItems';
-
-/**
- * The `FieldSet` component defines a collection of fields, displayed in a list
- * underneath a title. Accepted properties are:
- *
- * - `className` The class name for the fieldset.
- * - `label` The title of this group of fields.
- *
- * The children should be an array of items to show in the fieldset.
- */
-export default class FieldSet extends Component {
-  view() {
-    return (
-      <fieldset className={this.props.className}>
-        <legend>{this.props.label}</legend>
-        <ul>{listItems(this.props.children)}</ul>
-      </fieldset>
-    );
-  }
-}
diff --git a/js/old/common/components/GroupBadge.js b/js/old/common/components/GroupBadge.js
deleted file mode 100644
index 07667dd7b..000000000
--- a/js/old/common/components/GroupBadge.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Badge from './Badge';
-
-export default class GroupBadge extends Badge {
-  static initProps(props) {
-    super.initProps(props);
-
-    if (props.group) {
-      props.icon = props.group.icon();
-      props.style = { backgroundColor: props.group.color() };
-      props.label = typeof props.label === 'undefined' ? props.group.nameSingular() : props.label;
-      props.type = 'group--' + props.group.id();
-
-      delete props.group;
-    }
-  }
-}
diff --git a/js/old/common/components/LinkButton.js b/js/old/common/components/LinkButton.js
deleted file mode 100644
index 9a34b0211..000000000
--- a/js/old/common/components/LinkButton.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import Button from './Button';
-
-/**
- * The `LinkButton` component defines a `Button` which links to a route.
- *
- * ### Props
- *
- * All of the props accepted by `Button`, plus:
- *
- * - `active` Whether or not the page that this button links to is currently
- *   active.
- * - `href` The URL to link to. If the current URL `m.route()` matches this,
- *   the `active` prop will automatically be set to true.
- */
-export default class LinkButton extends Button {
-  static initProps(props) {
-    props.active = this.isActive(props);
-    props.config = props.config || m.route;
-  }
-
-  view() {
-    const vdom = super.view();
-
-    vdom.tag = 'a';
-
-    return vdom;
-  }
-
-  /**
-   * Determine whether a component with the given props is 'active'.
-   *
-   * @param {Object} props
-   * @return {Boolean}
-   */
-  static isActive(props) {
-    return typeof props.active !== 'undefined' ? props.active : m.route() === props.href;
-  }
-}
diff --git a/js/old/common/components/LoadingIndicator.js b/js/old/common/components/LoadingIndicator.js
deleted file mode 100644
index e77228510..000000000
--- a/js/old/common/components/LoadingIndicator.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import Component from '../Component';
-import { Spinner } from 'spin.js';
-
-/**
- * The `LoadingIndicator` component displays a loading spinner with spin.js. It
- * may have the following special props:
- *
- * - `size` The spin.js size preset to use. Defaults to 'small'.
- *
- * All other props will be assigned as attributes on the element.
- */
-export default class LoadingIndicator extends Component {
-  view() {
-    const attrs = Object.assign({}, this.props);
-
-    attrs.className = 'LoadingIndicator ' + (attrs.className || '');
-    delete attrs.size;
-
-    return <div {...attrs}>{m.trust('&nbsp;')}</div>;
-  }
-
-  config(isInitialized) {
-    if (isInitialized) return;
-
-    const options = { zIndex: 'auto', color: this.$().css('color') };
-
-    switch (this.props.size) {
-      case 'large':
-        Object.assign(options, { lines: 10, length: 8, width: 4, radius: 8 });
-        break;
-
-      case 'tiny':
-        Object.assign(options, { lines: 8, length: 2, width: 2, radius: 3 });
-        break;
-
-      default:
-        Object.assign(options, { lines: 8, length: 4, width: 3, radius: 5 });
-    }
-
-    new Spinner(options).spin(this.element);
-  }
-}
diff --git a/js/old/common/components/Modal.js b/js/old/common/components/Modal.js
deleted file mode 100644
index 872bb1b6a..000000000
--- a/js/old/common/components/Modal.js
+++ /dev/null
@@ -1,136 +0,0 @@
-import Component from '../Component';
-import Alert from './Alert';
-import Button from './Button';
-
-/**
- * The `Modal` component displays a modal dialog, wrapped in a form. Subclasses
- * should implement the `className`, `title`, and `content` methods.
- *
- * @abstract
- */
-export default class Modal extends Component {
-  init() {
-    /**
-     * An alert component to show below the header.
-     *
-     * @type {Alert}
-     */
-    this.alert = null;
-  }
-
-  view() {
-    if (this.alert) {
-      this.alert.props.dismissible = false;
-    }
-
-    return (
-      <div className={'Modal modal-dialog ' + this.className()}>
-        <div className="Modal-content">
-          {this.isDismissible() ? (
-            <div className="Modal-close App-backControl">
-              {Button.component({
-                icon: 'fas fa-times',
-                onclick: this.hide.bind(this),
-                className: 'Button Button--icon Button--link',
-              })}
-            </div>
-          ) : (
-            ''
-          )}
-
-          <form onsubmit={this.onsubmit.bind(this)}>
-            <div className="Modal-header">
-              <h3 className="App-titleControl App-titleControl--text">{this.title()}</h3>
-            </div>
-
-            {alert ? <div className="Modal-alert">{this.alert}</div> : ''}
-
-            {this.content()}
-          </form>
-        </div>
-      </div>
-    );
-  }
-
-  /**
-   * Determine whether or not the modal should be dismissible via an 'x' button.
-   *
-   * @return {Boolean}
-   */
-  isDismissible() {
-    return true;
-  }
-
-  /**
-   * Get the class name to apply to the modal.
-   *
-   * @return {String}
-   * @abstract
-   */
-  className() {}
-
-  /**
-   * Get the title of the modal dialog.
-   *
-   * @return {String}
-   * @abstract
-   */
-  title() {}
-
-  /**
-   * Get the content of the modal.
-   *
-   * @return {VirtualElement}
-   * @abstract
-   */
-  content() {}
-
-  /**
-   * Handle the modal form's submit event.
-   *
-   * @param {Event} e
-   */
-  onsubmit() {}
-
-  /**
-   * Focus on the first input when the modal is ready to be used.
-   */
-  onready() {
-    this.$('form').find('input, select, textarea').first().focus().select();
-  }
-
-  onhide() {}
-
-  /**
-   * Hide the modal.
-   */
-  hide() {
-    app.modal.close();
-  }
-
-  /**
-   * Stop loading.
-   */
-  loaded() {
-    this.loading = false;
-    m.redraw();
-  }
-
-  /**
-   * Show an alert describing an error returned from the API, and give focus to
-   * the first relevant field.
-   *
-   * @param {RequestError} error
-   */
-  onerror(error) {
-    this.alert = error.alert;
-
-    m.redraw();
-
-    if (error.status === 422 && error.response.errors) {
-      this.$('form [name=' + error.response.errors[0].source.pointer.replace('/data/attributes/', '') + ']').select();
-    } else {
-      this.onready();
-    }
-  }
-}
diff --git a/js/old/common/components/ModalManager.js b/js/old/common/components/ModalManager.js
deleted file mode 100644
index 4b3a99266..000000000
--- a/js/old/common/components/ModalManager.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import Component from '../Component';
-import Modal from './Modal';
-
-/**
- * The `ModalManager` component manages a modal dialog. Only one modal dialog
- * can be shown at once; loading a new component into the ModalManager will
- * overwrite the previous one.
- */
-export default class ModalManager extends Component {
-  init() {
-    this.showing = false;
-    this.component = null;
-  }
-
-  view() {
-    return <div className="ModalManager modal fade">{this.component && this.component.render()}</div>;
-  }
-
-  config(isInitialized, context) {
-    if (isInitialized) return;
-
-    // Since this component is 'above' the content of the page (that is, it is a
-    // part of the global UI that persists between routes), we will flag the DOM
-    // to be retained across route changes.
-    context.retain = true;
-
-    this.$().on('hidden.bs.modal', this.clear.bind(this)).on('shown.bs.modal', this.onready.bind(this));
-  }
-
-  /**
-   * Show a modal dialog.
-   *
-   * @param {Modal} component
-   * @public
-   */
-  show(component) {
-    if (!(component instanceof Modal)) {
-      throw new Error('The ModalManager component can only show Modal components');
-    }
-
-    clearTimeout(this.hideTimeout);
-
-    this.showing = true;
-    this.component = component;
-
-    if (app.current) app.current.retain = true;
-
-    m.redraw(true);
-
-    const dismissible = !!this.component.isDismissible();
-    this.$()
-      .modal({
-        backdrop: dismissible || 'static',
-        keyboard: dismissible,
-      })
-      .modal('show');
-  }
-
-  /**
-   * Close the modal dialog.
-   *
-   * @public
-   */
-  close() {
-    if (!this.showing) return;
-
-    // Don't hide the modal immediately, because if the consumer happens to call
-    // the `show` method straight after to show another modal dialog, it will
-    // cause Bootstrap's modal JS to misbehave. Instead we will wait for a tiny
-    // bit to give the `show` method the opportunity to prevent this from going
-    // ahead.
-    this.hideTimeout = setTimeout(() => {
-      this.$().modal('hide');
-      this.showing = false;
-    });
-  }
-
-  /**
-   * Clear content from the modal area.
-   *
-   * @protected
-   */
-  clear() {
-    if (this.component) {
-      this.component.onhide();
-    }
-
-    this.component = null;
-
-    app.current.retain = false;
-
-    m.lazyRedraw();
-  }
-
-  /**
-   * When the modal dialog is ready to be used, tell it!
-   *
-   * @protected
-   */
-  onready() {
-    if (this.component && this.component.onready) {
-      this.component.onready(this.$());
-    }
-  }
-}
diff --git a/js/old/common/components/Navigation.js b/js/old/common/components/Navigation.js
deleted file mode 100644
index 5de2671d0..000000000
--- a/js/old/common/components/Navigation.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import Component from '../Component';
-import Button from './Button';
-import LinkButton from './LinkButton';
-
-/**
- * The `Navigation` component displays a set of navigation buttons. Typically
- * this is just a back button which pops the app's History. If the user is on
- * the root page and there is no history to pop, then in some instances it may
- * show a button that toggles the app's drawer.
- *
- * If the app has a pane, it will also include a 'pin' button which toggles the
- * pinned state of the pane.
- *
- * Accepts the following props:
- *
- * - `className` The name of a class to set on the root element.
- * - `drawer` Whether or not to show a button to toggle the app's drawer if
- *   there is no more history to pop.
- */
-export default class Navigation extends Component {
-  view() {
-    const { history, pane } = app;
-
-    return (
-      <div
-        className={'Navigation ButtonGroup ' + (this.props.className || '')}
-        onmouseenter={pane && pane.show.bind(pane)}
-        onmouseleave={pane && pane.onmouseleave.bind(pane)}
-      >
-        {history.canGoBack() ? [this.getBackButton(), this.getPaneButton()] : this.getDrawerButton()}
-      </div>
-    );
-  }
-
-  config(isInitialized, context) {
-    // Since this component is 'above' the content of the page (that is, it is a
-    // part of the global UI that persists between routes), we will flag the DOM
-    // to be retained across route changes.
-    context.retain = true;
-  }
-
-  /**
-   * Get the back button.
-   *
-   * @return {Object}
-   * @protected
-   */
-  getBackButton() {
-    const { history } = app;
-    const previous = history.getPrevious() || {};
-
-    return LinkButton.component({
-      className: 'Button Navigation-back Button--icon',
-      href: history.backUrl(),
-      icon: 'fas fa-chevron-left',
-      title: previous.title,
-      config: () => {},
-      onclick: (e) => {
-        if (e.shiftKey || e.ctrlKey || e.metaKey || e.which === 2) return;
-        e.preventDefault();
-        history.back();
-      },
-    });
-  }
-
-  /**
-   * Get the pane pinned toggle button.
-   *
-   * @return {Object|String}
-   * @protected
-   */
-  getPaneButton() {
-    const { pane } = app;
-
-    if (!pane || !pane.active) return '';
-
-    return Button.component({
-      className: 'Button Button--icon Navigation-pin' + (pane.pinned ? ' active' : ''),
-      onclick: pane.togglePinned.bind(pane),
-      icon: 'fas fa-thumbtack',
-    });
-  }
-
-  /**
-   * Get the drawer toggle button.
-   *
-   * @return {Object|String}
-   * @protected
-   */
-  getDrawerButton() {
-    if (!this.props.drawer) return '';
-
-    const { drawer } = app;
-    const user = app.session.user;
-
-    return Button.component({
-      className: 'Button Button--icon Navigation-drawer' + (user && user.newNotificationCount() ? ' new' : ''),
-      onclick: (e) => {
-        e.stopPropagation();
-        drawer.show();
-      },
-      icon: 'fas fa-bars',
-    });
-  }
-}
diff --git a/js/old/common/components/Placeholder.js b/js/old/common/components/Placeholder.js
deleted file mode 100644
index 28673a08c..000000000
--- a/js/old/common/components/Placeholder.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Component from '../Component';
-
-/**
- * The `Placeholder` component displays a muted text with some call to action,
- * usually used as an empty state.
- *
- * ### Props
- *
- * - `text`
- */
-export default class Placeholder extends Component {
-  view() {
-    return (
-      <div className="Placeholder">
-        <p>{this.props.text}</p>
-      </div>
-    );
-  }
-}
diff --git a/js/old/common/components/Select.js b/js/old/common/components/Select.js
deleted file mode 100644
index fee8c1a96..000000000
--- a/js/old/common/components/Select.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Component from '../Component';
-import icon from '../helpers/icon';
-
-/**
- * The `Select` component displays a <select> input, surrounded with some extra
- * elements for styling. It accepts the following props:
- *
- * - `options` A map of option values to labels.
- * - `onchange` A callback to run when the selected value is changed.
- * - `value` The value of the selected option.
- * - `disabled` Disabled state for the input.
- */
-export default class Select extends Component {
-  view() {
-    const { options, onchange, value, disabled } = this.props;
-
-    return (
-      <span className="Select">
-        <select
-          className="Select-input FormControl"
-          onchange={onchange ? m.withAttr('value', onchange.bind(this)) : undefined}
-          value={value}
-          disabled={disabled}
-        >
-          {Object.keys(options).map((key) => (
-            <option value={key}>{options[key]}</option>
-          ))}
-        </select>
-        {icon('fas fa-sort', { className: 'Select-caret' })}
-      </span>
-    );
-  }
-}
diff --git a/js/old/common/components/SelectDropdown.js b/js/old/common/components/SelectDropdown.js
deleted file mode 100644
index 9c60539b2..000000000
--- a/js/old/common/components/SelectDropdown.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import Dropdown from './Dropdown';
-import icon from '../helpers/icon';
-
-/**
- * The `SelectDropdown` component is the same as a `Dropdown`, except the toggle
- * button's label is set as the label of the first child which has a truthy
- * `active` prop.
- *
- * ### Props
- *
- * - `caretIcon`
- * - `defaultLabel`
- */
-export default class SelectDropdown extends Dropdown {
-  static initProps(props) {
-    props.caretIcon = typeof props.caretIcon !== 'undefined' ? props.caretIcon : 'fas fa-sort';
-
-    super.initProps(props);
-
-    props.className += ' Dropdown--select';
-  }
-
-  getButtonContent() {
-    const activeChild = this.props.children.filter((child) => child.props.active)[0];
-    let label = (activeChild && activeChild.props.children) || this.props.defaultLabel;
-
-    if (label instanceof Array) label = label[0];
-
-    return [<span className="Button-label">{label}</span>, icon(this.props.caretIcon, { className: 'Button-caret' })];
-  }
-}
diff --git a/js/old/common/components/Separator.js b/js/old/common/components/Separator.js
deleted file mode 100644
index 1b5ca4911..000000000
--- a/js/old/common/components/Separator.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import Component from '../Component';
-
-/**
- * The `Separator` component defines a menu separator item.
- */
-class Separator extends Component {
-  view() {
-    return <li className="Dropdown-separator" />;
-  }
-}
-
-Separator.isListItem = true;
-
-export default Separator;
diff --git a/js/old/common/components/SplitDropdown.js b/js/old/common/components/SplitDropdown.js
deleted file mode 100644
index 94d3235c5..000000000
--- a/js/old/common/components/SplitDropdown.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import Dropdown from './Dropdown';
-import Button from './Button';
-import icon from '../helpers/icon';
-
-/**
- * The `SplitDropdown` component is similar to `Dropdown`, but the first child
- * is displayed as its own button prior to the toggle button.
- */
-export default class SplitDropdown extends Dropdown {
-  static initProps(props) {
-    super.initProps(props);
-
-    props.className += ' Dropdown--split';
-    props.menuClassName += ' Dropdown-menu--right';
-  }
-
-  getButton() {
-    // Make a copy of the props of the first child component. We will assign
-    // these props to a new button, so that it has exactly the same behaviour as
-    // the first child.
-    const firstChild = this.getFirstChild();
-    const buttonProps = Object.assign({}, firstChild.props);
-    buttonProps.className = (buttonProps.className || '') + ' SplitDropdown-button Button ' + this.props.buttonClassName;
-
-    return [
-      Button.component(buttonProps),
-      <button className={'Dropdown-toggle Button Button--icon ' + this.props.buttonClassName} data-toggle="dropdown">
-        {icon(this.props.icon, { className: 'Button-icon' })}
-        {icon('fas fa-caret-down', { className: 'Button-caret' })}
-      </button>,
-    ];
-  }
-
-  /**
-   * Get the first child. If the first child is an array, the first item in that
-   * array will be returned.
-   *
-   * @return {*}
-   * @protected
-   */
-  getFirstChild() {
-    let firstChild = this.props.children;
-
-    while (firstChild instanceof Array) firstChild = firstChild[0];
-
-    return firstChild;
-  }
-}
diff --git a/js/old/common/components/Switch.js b/js/old/common/components/Switch.js
deleted file mode 100644
index 13eba730a..000000000
--- a/js/old/common/components/Switch.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import Checkbox from './Checkbox';
-
-/**
- * The `Switch` component is a `Checkbox`, but with a switch display instead of
- * a tick/cross one.
- */
-export default class Switch extends Checkbox {
-  static initProps(props) {
-    super.initProps(props);
-
-    props.className = (props.className || '') + ' Checkbox--switch';
-  }
-
-  getDisplay() {
-    return this.loading ? super.getDisplay() : '';
-  }
-}
diff --git a/js/old/common/extend.js b/js/old/common/extend.js
deleted file mode 100644
index 7c8694f87..000000000
--- a/js/old/common/extend.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * Extend an object's method by running its output through a mutating callback
- * every time it is called.
- *
- * The callback accepts the method's return value and should perform any
- * mutations directly on this value. For this reason, this function will not be
- * effective on methods which return scalar values (numbers, strings, booleans).
- *
- * Care should be taken to extend the correct object – in most cases, a class'
- * prototype will be the desired target of extension, not the class itself.
- *
- * @example
- * extend(Discussion.prototype, 'badges', function(badges) {
- *   // do something with `badges`
- * });
- *
- * @param {Object} object The object that owns the method
- * @param {String} method The name of the method to extend
- * @param {function} callback A callback which mutates the method's output
- */
-export function extend(object, method, callback) {
-  const original = object[method];
-
-  object[method] = function (...args) {
-    const value = original ? original.apply(this, args) : undefined;
-
-    callback.apply(this, [value].concat(args));
-
-    return value;
-  };
-
-  Object.assign(object[method], original);
-}
-
-/**
- * Override an object's method by replacing it with a new function, so that the
- * new function will be run every time the object's method is called.
- *
- * The replacement function accepts the original method as its first argument,
- * which is like a call to 'super'. Any arguments passed to the original method
- * are also passed to the replacement.
- *
- * Care should be taken to extend the correct object – in most cases, a class'
- * prototype will be the desired target of extension, not the class itself.
- *
- * @example
- * override(Discussion.prototype, 'badges', function(original) {
- *   const badges = original();
- *   // do something with badges
- *   return badges;
- * });
- *
- * @param {Object} object The object that owns the method
- * @param {String} method The name of the method to override
- * @param {function} newMethod The method to replace it with
- */
-export function override(object, method, newMethod) {
-  const original = object[method];
-
-  object[method] = function (...args) {
-    return newMethod.apply(this, [original.bind(this)].concat(args));
-  };
-
-  Object.assign(object[method], original);
-}
diff --git a/js/old/common/extend/Model.js b/js/old/common/extend/Model.js
deleted file mode 100644
index d391310c6..000000000
--- a/js/old/common/extend/Model.js
+++ /dev/null
@@ -1,41 +0,0 @@
-export default class Routes {
-  type;
-  attributes = [];
-  hasOnes = [];
-  hasManys = [];
-
-  constructor(type, model = null) {
-    this.type = type;
-    this.model = model;
-  }
-
-  attribute(name) {
-    this.attributes.push(name);
-
-    return this;
-  }
-
-  hasOne(type) {
-    this.hasOnes.push(type);
-
-    return this;
-  }
-
-  hasMany(type) {
-    this.hasManys.push(type);
-
-    return this;
-  }
-
-  extend(app, extension) {
-    if (this.model) {
-      app.store.models[this.type] = this.model;
-    }
-
-    const model = app.store.models[this.type];
-
-    this.attributes.forEach((name) => (model.prototype[name] = model.attribute(name)));
-    this.hasOnes.forEach((name) => (model.prototype[name] = model.hasOne(name)));
-    this.hasManys.forEach((name) => (model.prototype[name] = model.hasMany(name)));
-  }
-}
diff --git a/js/old/common/extend/PostTypes.js b/js/old/common/extend/PostTypes.js
deleted file mode 100644
index dc7475d56..000000000
--- a/js/old/common/extend/PostTypes.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export default class PostTypes {
-  postComponents = {};
-
-  add(name, component) {
-    this.postComponents[name] = component;
-
-    return this;
-  }
-
-  extend(app, extension) {
-    Object.assign(app.postComponents, this.postComponents);
-  }
-}
diff --git a/js/old/common/extend/Routes.js b/js/old/common/extend/Routes.js
deleted file mode 100644
index 3d4603a1f..000000000
--- a/js/old/common/extend/Routes.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export default class Routes {
-  routes = {};
-
-  add(name, path, component) {
-    this.routes[name] = { path, component };
-
-    return this;
-  }
-
-  extend(app, extension) {
-    Object.assign(app.routes, this.routes);
-  }
-}
diff --git a/js/old/common/extend/index.js b/js/old/common/extend/index.js
deleted file mode 100644
index c84faef74..000000000
--- a/js/old/common/extend/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as Model } from './Model';
-export { default as PostTypes } from './PostTypes';
-export { default as Routes } from './R  outes';
diff --git a/js/old/common/helpers/avatar.js b/js/old/common/helpers/avatar.js
deleted file mode 100644
index a93c11df8..000000000
--- a/js/old/common/helpers/avatar.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * The `avatar` helper displays a user's avatar.
- *
- * @param {User} user
- * @param {Object} attrs Attributes to apply to the avatar element
- * @return {Object}
- */
-export default function avatar(user, attrs = {}) {
-  attrs.className = 'Avatar ' + (attrs.className || '');
-  let content = '';
-
-  // If the `title` attribute is set to null or false, we don't want to give the
-  // avatar a title. On the other hand, if it hasn't been given at all, we can
-  // safely default it to the user's username.
-  const hasTitle = attrs.title === 'undefined' || attrs.title;
-  if (!hasTitle) delete attrs.title;
-
-  // If a user has been passed, then we will set up an avatar using their
-  // uploaded image, or the first letter of their username if they haven't
-  // uploaded one.
-  if (user) {
-    const username = user.displayName() || '?';
-    const avatarUrl = user.avatarUrl();
-
-    if (hasTitle) attrs.title = attrs.title || username;
-
-    if (avatarUrl) {
-      return <img {...attrs} src={avatarUrl} />;
-    }
-
-    content = username.charAt(0).toUpperCase();
-    attrs.style = { background: user.color() };
-  }
-
-  return <span {...attrs}>{content}</span>;
-}
diff --git a/js/old/common/helpers/fullTime.js b/js/old/common/helpers/fullTime.js
deleted file mode 100644
index 9cf995db5..000000000
--- a/js/old/common/helpers/fullTime.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * The `fullTime` helper displays a formatted time string wrapped in a <time>
- * tag.
- *
- * @param {Date} time
- * @return {Object}
- */
-export default function fullTime(time) {
-  const mo = moment(time);
-
-  const datetime = mo.format();
-  const full = mo.format('LLLL');
-
-  return (
-    <time pubdate datetime={datetime}>
-      {full}
-    </time>
-  );
-}
diff --git a/js/old/common/helpers/highlight.js b/js/old/common/helpers/highlight.js
deleted file mode 100644
index 0674bed0b..000000000
--- a/js/old/common/helpers/highlight.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { truncate } from '../utils/string';
-
-/**
- * The `highlight` helper searches for a word phrase in a string, and wraps
- * matches with the <mark> tag.
- *
- * @param {String} string The string to highlight.
- * @param {String|RegExp} phrase The word or words to highlight.
- * @param {Integer} [length] The number of characters to truncate the string to.
- *     The string will be truncated surrounding the first match.
- * @return {Object}
- */
-export default function highlight(string, phrase, length) {
-  if (!phrase && !length) return string;
-
-  // Convert the word phrase into a global regular expression (if it isn't
-  // already) so we can search the string for matched.
-  const regexp = phrase instanceof RegExp ? phrase : new RegExp(phrase, 'gi');
-
-  let highlighted = string;
-  let start = 0;
-
-  // If a length was given, the truncate the string surrounding the first match.
-  if (length) {
-    if (phrase) start = Math.max(0, string.search(regexp) - length / 2);
-
-    highlighted = truncate(highlighted, length, start);
-  }
-
-  // Convert the string into HTML entities, then highlight all matches with
-  // <mark> tags. Then we will return the result as a trusted HTML string.
-  highlighted = $('<div/>').text(highlighted).html();
-
-  if (phrase) highlighted = highlighted.replace(regexp, '<mark>$&</mark>');
-
-  return m.trust(highlighted);
-}
diff --git a/js/old/common/helpers/humanTime.js b/js/old/common/helpers/humanTime.js
deleted file mode 100644
index 294f3ca02..000000000
--- a/js/old/common/helpers/humanTime.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import humanTimeUtil from '../utils/humanTime';
-
-/**
- * The `humanTime` helper displays a time in a human-friendly time-ago format
- * (e.g. '12 days ago'), wrapped in a <time> tag with other information about
- * the time.
- *
- * @param {Date} time
- * @return {Object}
- */
-export default function humanTime(time) {
-  const mo = moment(time);
-
-  const datetime = mo.format();
-  const full = mo.format('LLLL');
-  const ago = humanTimeUtil(time);
-
-  return (
-    <time pubdate datetime={datetime} title={full} data-humantime>
-      {ago}
-    </time>
-  );
-}
diff --git a/js/old/common/helpers/icon.js b/js/old/common/helpers/icon.js
deleted file mode 100644
index c69a5d6c4..000000000
--- a/js/old/common/helpers/icon.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * The `icon` helper displays an icon.
- *
- * @param {String} fontClass The full icon class, prefix and the icon’s name.
- * @param {Object} attrs Any other attributes to apply.
- * @return {Object}
- */
-export default function icon(fontClass, attrs = {}) {
-  attrs.className = 'icon ' + fontClass + ' ' + (attrs.className || '');
-
-  return <i {...attrs} />;
-}
diff --git a/js/old/common/helpers/listItems.js b/js/old/common/helpers/listItems.js
deleted file mode 100644
index 2f16c8d62..000000000
--- a/js/old/common/helpers/listItems.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import Separator from '../components/Separator';
-import classList from '../utils/classList';
-
-function isSeparator(item) {
-  return item && item.component === Separator;
-}
-
-function withoutUnnecessarySeparators(items) {
-  const newItems = [];
-  let prevItem;
-
-  items.forEach((item, i) => {
-    if (!isSeparator(item) || (prevItem && !isSeparator(prevItem) && i !== items.length - 1)) {
-      prevItem = item;
-      newItems.push(item);
-    }
-  });
-
-  return newItems;
-}
-
-/**
- * The `listItems` helper wraps a collection of components in <li> tags,
- * stripping out any unnecessary `Separator` components.
- *
- * @param {*} items
- * @return {Array}
- */
-export default function listItems(items) {
-  if (!(items instanceof Array)) items = [items];
-
-  return withoutUnnecessarySeparators(items).map((item) => {
-    const isListItem = item.component && item.component.isListItem;
-    const active = item.component && item.component.isActive && item.component.isActive(item.props);
-    const className = item.props ? item.props.itemClassName : item.itemClassName;
-
-    if (isListItem) {
-      item.attrs = item.attrs || {};
-      item.attrs.key = item.attrs.key || item.itemName;
-    }
-
-    return isListItem ? (
-      item
-    ) : (
-      <li className={classList([item.itemName ? 'item-' + item.itemName : '', className, active ? 'active' : ''])} key={item.itemName}>
-        {item}
-      </li>
-    );
-  });
-}
diff --git a/js/old/common/helpers/punctuateSeries.js b/js/old/common/helpers/punctuateSeries.js
deleted file mode 100644
index f5fa774d5..000000000
--- a/js/old/common/helpers/punctuateSeries.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * The `punctuateSeries` helper formats a list of strings (e.g. names) to read
- * fluently in the application's locale.
- *
- * ```js
- * punctuateSeries(['Toby', 'Franz', 'Dominion']) // Toby, Franz, and Dominion
- * ```
- *
- * @param {Array} items
- * @return {VirtualElement}
- */
-export default function punctuateSeries(items) {
-  if (items.length === 2) {
-    return app.translator.trans('core.lib.series.two_text', {
-      first: items[0],
-      second: items[1],
-    });
-  } else if (items.length >= 3) {
-    // If there are three or more items, we will join all but the first and
-    // last items with the equivalent of a comma, and then we will feed that
-    // into the translator along with the first and last item.
-    const second = items
-      .slice(1, items.length - 1)
-      .reduce((list, item) => list.concat([item, app.translator.trans('core.lib.series.glue_text')]), [])
-      .slice(0, -1);
-
-    return app.translator.trans('core.lib.series.three_text', {
-      first: items[0],
-      second,
-      third: items[items.length - 1],
-    });
-  }
-
-  return items;
-}
diff --git a/js/old/common/helpers/userOnline.js b/js/old/common/helpers/userOnline.js
deleted file mode 100644
index 91ffbe7b6..000000000
--- a/js/old/common/helpers/userOnline.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import icon from './icon';
-
-/**
- * The `useronline` helper displays a green circle if the user is online
- *
- * @param {User} user
- * @return {Object}
- */
-export default function userOnline(user) {
-  if (user.lastSeenAt() && user.isOnline()) {
-    return <span className="UserOnline">{icon('fas fa-circle')}</span>;
-  }
-}
diff --git a/js/old/common/helpers/username.js b/js/old/common/helpers/username.js
deleted file mode 100644
index 7e05ca4d6..000000000
--- a/js/old/common/helpers/username.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * The `username` helper displays a user's username in a <span class="username">
- * tag. If the user doesn't exist, the username will be displayed as [deleted].
- *
- * @param {User} user
- * @return {Object}
- */
-export default function username(user) {
-  const name = (user && user.displayName()) || app.translator.trans('core.lib.username.deleted_text');
-
-  return <span className="username">{name}</span>;
-}
diff --git a/js/old/common/index.js b/js/old/common/index.js
deleted file mode 100644
index 00bc255bd..000000000
--- a/js/old/common/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import 'expose-loader?$!expose-loader?jQuery!jquery';
-import 'expose-loader?m!mithril';
-import 'expose-loader?moment!moment';
-import 'expose-loader?m.bidi!m.attrs.bidi';
-import 'bootstrap/js/affix';
-import 'bootstrap/js/dropdown';
-import 'bootstrap/js/modal';
-import 'bootstrap/js/tooltip';
-import 'bootstrap/js/transition';
-import 'jquery.hotkeys/jquery.hotkeys';
-
-import patchMithril from './utils/patchMithril';
-
-patchMithril(window);
-
-import * as Extend from './extend/index';
-
-export { Extend };
diff --git a/js/old/common/models/Discussion.js b/js/old/common/models/Discussion.js
deleted file mode 100644
index faf0dda86..000000000
--- a/js/old/common/models/Discussion.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import Model from '../Model';
-import computed from '../utils/computed';
-import ItemList from '../utils/ItemList';
-import Badge from '../components/Badge';
-
-export default class Discussion extends Model {}
-
-Object.assign(Discussion.prototype, {
-  title: Model.attribute('title'),
-  slug: Model.attribute('slug'),
-
-  createdAt: Model.attribute('createdAt', Model.transformDate),
-  user: Model.hasOne('user'),
-  firstPost: Model.hasOne('firstPost'),
-
-  lastPostedAt: Model.attribute('lastPostedAt', Model.transformDate),
-  lastPostedUser: Model.hasOne('lastPostedUser'),
-  lastPost: Model.hasOne('lastPost'),
-  lastPostNumber: Model.attribute('lastPostNumber'),
-
-  commentCount: Model.attribute('commentCount'),
-  replyCount: computed('commentCount', (commentCount) => Math.max(0, commentCount - 1)),
-  posts: Model.hasMany('posts'),
-  mostRelevantPost: Model.hasOne('mostRelevantPost'),
-
-  lastReadAt: Model.attribute('lastReadAt', Model.transformDate),
-  lastReadPostNumber: Model.attribute('lastReadPostNumber'),
-  isUnread: computed('unreadCount', (unreadCount) => !!unreadCount),
-  isRead: computed('unreadCount', (unreadCount) => app.session.user && !unreadCount),
-
-  hiddenAt: Model.attribute('hiddenAt', Model.transformDate),
-  hiddenUser: Model.hasOne('hiddenUser'),
-  isHidden: computed('hiddenAt', (hiddenAt) => !!hiddenAt),
-
-  canReply: Model.attribute('canReply'),
-  canRename: Model.attribute('canRename'),
-  canHide: Model.attribute('canHide'),
-  canDelete: Model.attribute('canDelete'),
-
-  /**
-   * Remove a post from the discussion's posts relationship.
-   *
-   * @param {Integer} id The ID of the post to remove.
-   * @public
-   */
-  removePost(id) {
-    const relationships = this.data.relationships;
-    const posts = relationships && relationships.posts;
-
-    if (posts) {
-      posts.data.some((data, i) => {
-        if (id === data.id) {
-          posts.data.splice(i, 1);
-          return true;
-        }
-      });
-    }
-  },
-
-  /**
-   * Get the estimated number of unread posts in this discussion for the current
-   * user.
-   *
-   * @return {Integer}
-   * @public
-   */
-  unreadCount() {
-    const user = app.session.user;
-
-    if (user && user.markedAllAsReadAt() < this.lastPostedAt()) {
-      return Math.max(0, this.lastPostNumber() - (this.lastReadPostNumber() || 0));
-    }
-
-    return 0;
-  },
-
-  /**
-   * Get the Badge components that apply to this discussion.
-   *
-   * @return {ItemList}
-   * @public
-   */
-  badges() {
-    const items = new ItemList();
-
-    if (this.isHidden()) {
-      items.add('hidden', <Badge type="hidden" icon="fas fa-trash" label={app.translator.trans('core.lib.badge.hidden_tooltip')} />);
-    }
-
-    return items;
-  },
-
-  /**
-   * Get a list of all of the post IDs in this discussion.
-   *
-   * @return {Array}
-   * @public
-   */
-  postIds() {
-    const posts = this.data.relationships.posts;
-
-    return posts ? posts.data.map((link) => link.id) : [];
-  },
-});
diff --git a/js/old/common/models/Forum.js b/js/old/common/models/Forum.js
deleted file mode 100644
index adeec5c44..000000000
--- a/js/old/common/models/Forum.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Model from '../Model';
-
-export default class Forum extends Model {
-  apiEndpoint() {
-    return '/';
-  }
-}
diff --git a/js/old/common/models/Group.js b/js/old/common/models/Group.js
deleted file mode 100644
index ad3017ff8..000000000
--- a/js/old/common/models/Group.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Model from '../Model';
-
-class Group extends Model {}
-
-Object.assign(Group.prototype, {
-  nameSingular: Model.attribute('nameSingular'),
-  namePlural: Model.attribute('namePlural'),
-  color: Model.attribute('color'),
-  icon: Model.attribute('icon'),
-});
-
-Group.ADMINISTRATOR_ID = '1';
-Group.GUEST_ID = '2';
-Group.MEMBER_ID = '3';
-
-export default Group;
diff --git a/js/old/common/models/Notification.js b/js/old/common/models/Notification.js
deleted file mode 100644
index fb849ec5e..000000000
--- a/js/old/common/models/Notification.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import Model from '../Model';
-
-export default class Notification extends Model {}
-
-Object.assign(Notification.prototype, {
-  contentType: Model.attribute('contentType'),
-  content: Model.attribute('content'),
-  createdAt: Model.attribute('createdAt', Model.transformDate),
-
-  isRead: Model.attribute('isRead'),
-
-  user: Model.hasOne('user'),
-  fromUser: Model.hasOne('fromUser'),
-  subject: Model.hasOne('subject'),
-});
diff --git a/js/old/common/models/Post.js b/js/old/common/models/Post.js
deleted file mode 100644
index 5941ffe5e..000000000
--- a/js/old/common/models/Post.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import Model from '../Model';
-import computed from '../utils/computed';
-import { getPlainContent } from '../utils/string';
-
-export default class Post extends Model {}
-
-Object.assign(Post.prototype, {
-  number: Model.attribute('number'),
-  discussion: Model.hasOne('discussion'),
-
-  createdAt: Model.attribute('createdAt', Model.transformDate),
-  user: Model.hasOne('user'),
-  contentType: Model.attribute('contentType'),
-  content: Model.attribute('content'),
-  contentHtml: Model.attribute('contentHtml'),
-  contentPlain: computed('contentHtml', getPlainContent),
-
-  editedAt: Model.attribute('editedAt', Model.transformDate),
-  editedUser: Model.hasOne('editedUser'),
-  isEdited: computed('editedAt', (editedAt) => !!editedAt),
-
-  hiddenAt: Model.attribute('hiddenAt', Model.transformDate),
-  hiddenUser: Model.hasOne('hiddenUser'),
-  isHidden: computed('hiddenAt', (hiddenAt) => !!hiddenAt),
-
-  canEdit: Model.attribute('canEdit'),
-  canHide: Model.attribute('canHide'),
-  canDelete: Model.attribute('canDelete'),
-});
diff --git a/js/old/common/models/User.js b/js/old/common/models/User.js
deleted file mode 100644
index ec0995cc1..000000000
--- a/js/old/common/models/User.js
+++ /dev/null
@@ -1,111 +0,0 @@
-/*global ColorThief*/
-
-import Model from '../Model';
-import stringToColor from '../utils/stringToColor';
-import ItemList from '../utils/ItemList';
-import computed from '../utils/computed';
-import GroupBadge from '../components/GroupBadge';
-
-export default class User extends Model {}
-
-Object.assign(User.prototype, {
-  username: Model.attribute('username'),
-  displayName: Model.attribute('displayName'),
-  email: Model.attribute('email'),
-  isEmailConfirmed: Model.attribute('isEmailConfirmed'),
-  password: Model.attribute('password'),
-
-  avatarUrl: Model.attribute('avatarUrl'),
-  preferences: Model.attribute('preferences'),
-  groups: Model.hasMany('groups'),
-
-  joinTime: Model.attribute('joinTime', Model.transformDate),
-  lastSeenAt: Model.attribute('lastSeenAt', Model.transformDate),
-  markedAllAsReadAt: Model.attribute('markedAllAsReadAt', Model.transformDate),
-  unreadNotificationCount: Model.attribute('unreadNotificationCount'),
-  newNotificationCount: Model.attribute('newNotificationCount'),
-
-  discussionCount: Model.attribute('discussionCount'),
-  commentCount: Model.attribute('commentCount'),
-
-  canEdit: Model.attribute('canEdit'),
-  canDelete: Model.attribute('canDelete'),
-
-  avatarColor: null,
-  color: computed('username', 'avatarUrl', 'avatarColor', function (username, avatarUrl, avatarColor) {
-    // If we've already calculated and cached the dominant color of the user's
-    // avatar, then we can return that in RGB format. If we haven't, we'll want
-    // to calculate it. Unless the user doesn't have an avatar, in which case
-    // we generate a color from their username.
-    if (avatarColor) {
-      return 'rgb(' + avatarColor.join(', ') + ')';
-    } else if (avatarUrl) {
-      this.calculateAvatarColor();
-      return '';
-    }
-
-    return '#' + stringToColor(username);
-  }),
-
-  /**
-   * Check whether or not the user has been seen in the last 5 minutes.
-   *
-   * @return {Boolean}
-   * @public
-   */
-  isOnline() {
-    return this.lastSeenAt() > moment().subtract(5, 'minutes').toDate();
-  },
-
-  /**
-   * Get the Badge components that apply to this user.
-   *
-   * @return {ItemList}
-   */
-  badges() {
-    const items = new ItemList();
-    const groups = this.groups();
-
-    if (groups) {
-      groups.forEach((group) => {
-        items.add('group' + group.id(), GroupBadge.component({ group }));
-      });
-    }
-
-    return items;
-  },
-
-  /**
-   * Calculate the dominant color of the user's avatar. The dominant color will
-   * be set to the `avatarColor` property once it has been calculated.
-   *
-   * @protected
-   */
-  calculateAvatarColor() {
-    const image = new Image();
-    const user = this;
-
-    image.onload = function () {
-      const colorThief = new ColorThief();
-      user.avatarColor = colorThief.getColor(this);
-      user.freshness = new Date();
-      m.redraw();
-    };
-    image.crossOrigin = 'anonymous';
-    image.src = this.avatarUrl();
-  },
-
-  /**
-   * Update the user's preferences.
-   *
-   * @param {Object} newPreferences
-   * @return {Promise}
-   */
-  savePreferences(newPreferences) {
-    const preferences = this.preferences();
-
-    Object.assign(preferences, newPreferences);
-
-    return this.save({ preferences });
-  },
-});
diff --git a/js/old/common/utils/Drawer.js b/js/old/common/utils/Drawer.js
deleted file mode 100644
index 0d0efb46e..000000000
--- a/js/old/common/utils/Drawer.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * The `Drawer` class controls the page's drawer. The drawer is the area the
- * slides out from the left on mobile devices; it contains the header and the
- * footer.
- */
-export default class Drawer {
-  constructor() {
-    // Set up an event handler so that whenever the content area is tapped,
-    // the drawer will close.
-    $('#content').click((e) => {
-      if (this.isOpen()) {
-        e.preventDefault();
-        this.hide();
-      }
-    });
-  }
-
-  /**
-   * Check whether or not the drawer is currently open.
-   *
-   * @return {Boolean}
-   * @public
-   */
-  isOpen() {
-    return $('#app').hasClass('drawerOpen');
-  }
-
-  /**
-   * Hide the drawer.
-   *
-   * @public
-   */
-  hide() {
-    $('#app').removeClass('drawerOpen');
-
-    if (this.$backdrop) this.$backdrop.remove();
-  }
-
-  /**
-   * Show the drawer.
-   *
-   * @public
-   */
-  show() {
-    $('#app').addClass('drawerOpen');
-
-    this.$backdrop = $('<div/>')
-      .addClass('drawer-backdrop fade')
-      .appendTo('body')
-      .click(() => this.hide());
-
-    setTimeout(() => this.$backdrop.addClass('in'));
-  }
-}
diff --git a/js/old/common/utils/ItemList.js b/js/old/common/utils/ItemList.js
deleted file mode 100644
index 880167b77..000000000
--- a/js/old/common/utils/ItemList.js
+++ /dev/null
@@ -1,161 +0,0 @@
-class Item {
-  constructor(content, priority) {
-    this.content = content;
-    this.priority = priority;
-  }
-}
-
-/**
- * The `ItemList` class collects items and then arranges them into an array
- * by priority.
- */
-export default class ItemList {
-  constructor() {
-    /**
-     * The items in the list.
-     *
-     * @type {Object}
-     * @public
-     */
-    this.items = {};
-  }
-
-  /**
-   * Check whether the list is empty.
-   *
-   * @returns {boolean}
-   * @public
-   */
-  isEmpty() {
-    for (const i in this.items) {
-      if (this.items.hasOwnProperty(i)) {
-        return false;
-      }
-    }
-
-    return true;
-  }
-
-  /**
-   * Check whether an item is present in the list.
-   *
-   * @param key
-   * @returns {boolean}
-   */
-  has(key) {
-    return !!this.items[key];
-  }
-
-  /**
-   * Get the content of an item.
-   *
-   * @param {String} key
-   * @return {*}
-   * @public
-   */
-  get(key) {
-    return this.items[key].content;
-  }
-
-  /**
-   * Add an item to the list.
-   *
-   * @param {String} key A unique key for the item.
-   * @param {*} content The item's content.
-   * @param {Integer} [priority] The priority of the item. Items with a higher
-   *     priority will be positioned before items with a lower priority.
-   * @return {ItemList}
-   * @public
-   */
-  add(key, content, priority = 0) {
-    this.items[key] = new Item(content, priority);
-
-    return this;
-  }
-
-  /**
-   * Replace an item in the list, only if it is already present.
-   *
-   * @param {String} key
-   * @param {*} [content]
-   * @param {Integer} [priority]
-   * @return {ItemList}
-   * @public
-   */
-  replace(key, content = null, priority = null) {
-    if (this.items[key]) {
-      if (content !== null) {
-        this.items[key].content = content;
-      }
-
-      if (priority !== null) {
-        this.items[key].priority = priority;
-      }
-    }
-
-    return this;
-  }
-
-  /**
-   * Remove an item from the list.
-   *
-   * @param {String} key
-   * @return {ItemList}
-   * @public
-   */
-  remove(key) {
-    delete this.items[key];
-
-    return this;
-  }
-
-  /**
-   * Merge another list's items into this one.
-   *
-   * @param {ItemList} items
-   * @return {ItemList}
-   * @public
-   */
-  merge(items) {
-    for (const i in items.items) {
-      if (items.items.hasOwnProperty(i) && items.items[i] instanceof Item) {
-        this.items[i] = items.items[i];
-      }
-    }
-
-    return this;
-  }
-
-  /**
-   * Convert the list into an array of item content arranged by priority. Each
-   * item's content will be assigned an `itemName` property equal to the item's
-   * unique key.
-   *
-   * @return {Array}
-   * @public
-   */
-  toArray() {
-    const items = [];
-
-    for (const i in this.items) {
-      if (this.items.hasOwnProperty(i) && this.items[i] instanceof Item) {
-        this.items[i].content = Object(this.items[i].content);
-
-        this.items[i].content.itemName = i;
-        items.push(this.items[i]);
-        this.items[i].key = items.length;
-      }
-    }
-
-    return items
-      .sort((a, b) => {
-        if (a.priority === b.priority) {
-          return a.key - b.key;
-        } else if (a.priority > b.priority) {
-          return -1;
-        }
-        return 1;
-      })
-      .map((item) => item.content);
-  }
-}
diff --git a/js/old/common/utils/RequestError.js b/js/old/common/utils/RequestError.js
deleted file mode 100644
index 3346e673f..000000000
--- a/js/old/common/utils/RequestError.js
+++ /dev/null
@@ -1,16 +0,0 @@
-export default class RequestError {
-  constructor(status, responseText, options, xhr) {
-    this.status = status;
-    this.responseText = responseText;
-    this.options = options;
-    this.xhr = xhr;
-
-    try {
-      this.response = JSON.parse(responseText);
-    } catch (e) {
-      this.response = null;
-    }
-
-    this.alert = null;
-  }
-}
diff --git a/js/old/common/utils/ScrollListener.js b/js/old/common/utils/ScrollListener.js
deleted file mode 100644
index 316ac4d7a..000000000
--- a/js/old/common/utils/ScrollListener.js
+++ /dev/null
@@ -1,75 +0,0 @@
-const later =
-  window.requestAnimationFrame ||
-  window.webkitRequestAnimationFrame ||
-  window.mozRequestAnimationFrame ||
-  window.msRequestAnimationFrame ||
-  window.oRequestAnimationFrame ||
-  ((callback) => window.setTimeout(callback, 1000 / 60));
-
-/**
- * The `ScrollListener` class sets up a listener that handles window scroll
- * events.
- */
-export default class ScrollListener {
-  /**
-   * @param {Function} callback The callback to run when the scroll position
-   *     changes.
-   * @public
-   */
-  constructor(callback) {
-    this.callback = callback;
-    this.ticking = false;
-  }
-
-  /**
-   * On each animation frame, as long as the listener is active, run the
-   * `update` method.
-   *
-   * @protected
-   */
-  loop() {
-    // THROTTLE: If the callback is still running (or hasn't yet run), we ignore
-    // further scroll events.
-    if (this.ticking) return;
-
-    // Schedule the callback to be executed soon (TM), and stop throttling once
-    // the callback is done.
-    later(() => {
-      this.update();
-      this.ticking = false;
-    });
-
-    this.ticking = true;
-  }
-
-  /**
-   * Run the callback, whether there was a scroll event or not.
-   *
-   * @public
-   */
-  update() {
-    this.callback(window.pageYOffset);
-  }
-
-  /**
-   * Start listening to and handling the window's scroll position.
-   *
-   * @public
-   */
-  start() {
-    if (!this.active) {
-      window.addEventListener('scroll', (this.active = this.loop.bind(this)));
-    }
-  }
-
-  /**
-   * Stop listening to and handling the window's scroll position.
-   *
-   * @public
-   */
-  stop() {
-    window.removeEventListener('scroll', this.active);
-
-    this.active = null;
-  }
-}
diff --git a/js/old/common/utils/SubtreeRetainer.js b/js/old/common/utils/SubtreeRetainer.js
deleted file mode 100644
index 4ac9ef125..000000000
--- a/js/old/common/utils/SubtreeRetainer.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * The `SubtreeRetainer` class represents a Mithril virtual DOM subtree. It
- * keeps track of a number of pieces of data, allowing the subtree to be
- * retained if none of them have changed.
- *
- * @example
- * // constructor
- * this.subtree = new SubtreeRetainer(
- *   () => this.props.post.freshness,
- *   () => this.showing
- * );
- * this.subtree.check(() => this.props.user.freshness);
- *
- * // view
- * this.subtree.retain() || 'expensive expression'
- *
- * @see https://lhorie.github.io/mithril/mithril.html#persisting-dom-elements-across-route-changes
- */
-export default class SubtreeRetainer {
-  /**
-   * @param {...callbacks} callbacks Functions returning data to keep track of.
-   */
-  constructor(...callbacks) {
-    this.callbacks = callbacks;
-    this.data = {};
-  }
-
-  /**
-   * Return a virtual DOM directive that will retain a subtree if no data has
-   * changed since the last check.
-   *
-   * @return {Object|false}
-   * @public
-   */
-  retain() {
-    let needsRebuild = false;
-
-    this.callbacks.forEach((callback, i) => {
-      const result = callback();
-
-      if (result !== this.data[i]) {
-        this.data[i] = result;
-        needsRebuild = true;
-      }
-    });
-
-    return needsRebuild ? false : { subtree: 'retain' };
-  }
-
-  /**
-   * Add another callback to be checked.
-   *
-   * @param {...Function} callbacks
-   * @public
-   */
-  check(...callbacks) {
-    this.callbacks = this.callbacks.concat(callbacks);
-  }
-
-  /**
-   * Invalidate the subtree, forcing it to be rerendered.
-   *
-   * @public
-   */
-  invalidate() {
-    this.data = {};
-  }
-}
diff --git a/js/old/common/utils/abbreviateNumber.js b/js/old/common/utils/abbreviateNumber.js
deleted file mode 100644
index 360c6b82d..000000000
--- a/js/old/common/utils/abbreviateNumber.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * The `abbreviateNumber` utility converts a number to a shorter localized form.
- *
- * @example
- * abbreviateNumber(1234);
- * // "1.2K"
- *
- * @param {Integer} number
- * @return {String}
- */
-export default function abbreviateNumber(number) {
-  // TODO: translation
-  if (number >= 1000000) {
-    return Math.floor(number / 1000000) + app.translator.trans('core.lib.number_suffix.mega_text');
-  } else if (number >= 1000) {
-    return Math.floor(number / 1000) + app.translator.trans('core.lib.number_suffix.kilo_text');
-  } else {
-    return number.toString();
-  }
-}
diff --git a/js/old/common/utils/anchorScroll.js b/js/old/common/utils/anchorScroll.js
deleted file mode 100644
index 7e836cb90..000000000
--- a/js/old/common/utils/anchorScroll.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * The `anchorScroll` utility saves the scroll position relative to an element,
- * and then restores it after a callback has been run.
- *
- * This is useful if a redraw will change the page's content above the viewport.
- * Normally doing this will result in the content in the viewport being pushed
- * down or pulled up. By wrapping the redraw with this utility, the scroll
- * position can be anchor to an element that is in or below the viewport, so
- * the content in the viewport will stay the same.
- *
- * @param {DOMElement} element The element to anchor the scroll position to.
- * @param {Function} callback The callback to run that will change page content.
- */
-export default function anchorScroll(element, callback) {
-  const $window = $(window);
-  const relativeScroll = $(element).offset().top - $window.scrollTop();
-
-  callback();
-
-  $window.scrollTop($(element).offset().top - relativeScroll);
-}
diff --git a/js/old/common/utils/classList.js b/js/old/common/utils/classList.js
deleted file mode 100644
index 81568634f..000000000
--- a/js/old/common/utils/classList.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * The `classList` utility creates a list of class names by joining an object's
- * keys, but only for values which are truthy.
- *
- * @example
- * classList({ foo: true, bar: false, qux: 'qaz' });
- * // "foo qux"
- *
- * @param {Object} classes
- * @return {String}
- */
-export default function classList(classes) {
-  let classNames;
-
-  if (classes instanceof Array) {
-    classNames = classes.filter((name) => name);
-  } else {
-    classNames = [];
-
-    for (const i in classes) {
-      if (classes[i]) classNames.push(i);
-    }
-  }
-
-  return classNames.join(' ');
-}
diff --git a/js/old/common/utils/computed.js b/js/old/common/utils/computed.js
deleted file mode 100644
index 261f7b30b..000000000
--- a/js/old/common/utils/computed.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * The `computed` utility creates a function that will cache its output until
- * any of the dependent values are dirty.
- *
- * @param {...String} dependentKeys The keys of the dependent values.
- * @param {function} compute The function which computes the value using the
- *     dependent values.
- * @return {Function}
- */
-export default function computed(...dependentKeys) {
-  const keys = dependentKeys.slice(0, -1);
-  const compute = dependentKeys.slice(-1)[0];
-
-  const dependentValues = {};
-  let computedValue;
-
-  return function () {
-    let recompute = false;
-
-    // Read all of the dependent values. If any of them have changed since last
-    // time, then we'll want to recompute our output.
-    keys.forEach((key) => {
-      const value = typeof this[key] === 'function' ? this[key]() : this[key];
-
-      if (dependentValues[key] !== value) {
-        recompute = true;
-        dependentValues[key] = value;
-      }
-    });
-
-    if (recompute) {
-      computedValue = compute.apply(
-        this,
-        keys.map((key) => dependentValues[key])
-      );
-    }
-
-    return computedValue;
-  };
-}
diff --git a/js/old/common/utils/evented.js b/js/old/common/utils/evented.js
deleted file mode 100644
index 5fd91a919..000000000
--- a/js/old/common/utils/evented.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * The `evented` mixin provides methods allowing an object to trigger events,
- * running externally registered event handlers.
- */
-export default {
-  /**
-   * Arrays of registered event handlers, grouped by the event name.
-   *
-   * @type {Object}
-   * @protected
-   */
-  handlers: null,
-
-  /**
-   * Get all of the registered handlers for an event.
-   *
-   * @param {String} event The name of the event.
-   * @return {Array}
-   * @protected
-   */
-  getHandlers(event) {
-    this.handlers = this.handlers || {};
-
-    this.handlers[event] = this.handlers[event] || [];
-
-    return this.handlers[event];
-  },
-
-  /**
-   * Trigger an event.
-   *
-   * @param {String} event The name of the event.
-   * @param {...*} args Arguments to pass to event handlers.
-   * @public
-   */
-  trigger(event, ...args) {
-    this.getHandlers(event).forEach((handler) => handler.apply(this, args));
-  },
-
-  /**
-   * Register an event handler.
-   *
-   * @param {String} event The name of the event.
-   * @param {function} handler The function to handle the event.
-   */
-  on(event, handler) {
-    this.getHandlers(event).push(handler);
-  },
-
-  /**
-   * Register an event handler so that it will run only once, and then
-   * unregister itself.
-   *
-   * @param {String} event The name of the event.
-   * @param {function} handler The function to handle the event.
-   */
-  one(event, handler) {
-    const wrapper = function () {
-      handler.apply(this, arguments);
-
-      this.off(event, wrapper);
-    };
-
-    this.getHandlers(event).push(wrapper);
-  },
-
-  /**
-   * Unregister an event handler.
-   *
-   * @param {String} event The name of the event.
-   * @param {function} handler The function that handles the event.
-   */
-  off(event, handler) {
-    const handlers = this.getHandlers(event);
-    const index = handlers.indexOf(handler);
-
-    if (index !== -1) {
-      handlers.splice(index, 1);
-    }
-  },
-};
diff --git a/js/old/common/utils/extract.js b/js/old/common/utils/extract.js
deleted file mode 100644
index a6b748210..000000000
--- a/js/old/common/utils/extract.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * The `extract` utility deletes a property from an object and returns its
- * value.
- *
- * @param {Object} object The object that owns the property
- * @param {String} property The name of the property to extract
- * @return {*} The value of the property
- */
-export default function extract(object, property) {
-  const value = object[property];
-
-  delete object[property];
-
-  return value;
-}
diff --git a/js/old/common/utils/extractText.js b/js/old/common/utils/extractText.js
deleted file mode 100644
index 4586cc6e5..000000000
--- a/js/old/common/utils/extractText.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Extract the text nodes from a virtual element.
- *
- * @param {VirtualElement} vdom
- * @return {String}
- */
-export default function extractText(vdom) {
-  if (vdom instanceof Array) {
-    return vdom.map((element) => extractText(element)).join('');
-  } else if (typeof vdom === 'object' && vdom !== null) {
-    return extractText(vdom.children);
-  } else {
-    return vdom;
-  }
-}
diff --git a/js/old/common/utils/formatNumber.js b/js/old/common/utils/formatNumber.js
deleted file mode 100644
index 939391029..000000000
--- a/js/old/common/utils/formatNumber.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * The `formatNumber` utility localizes a number into a string with the
- * appropriate punctuation.
- *
- * @example
- * formatNumber(1234);
- * // 1,234
- *
- * @param {Number} number
- * @return {String}
- */
-export default function formatNumber(number) {
-  return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-}
diff --git a/js/old/common/utils/humanTime.js b/js/old/common/utils/humanTime.js
deleted file mode 100644
index a06e16afb..000000000
--- a/js/old/common/utils/humanTime.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * The `humanTime` utility converts a date to a localized, human-readable time-
- * ago string.
- *
- * @param {Date} time
- * @return {String}
- */
-export default function humanTime(time) {
-  let m = moment(time);
-  const now = moment();
-
-  // To prevent showing things like "in a few seconds" due to small offsets
-  // between client and server time, we always reset future dates to the
-  // current time. This will result in "just now" being shown instead.
-  if (m.isAfter(now)) {
-    m = now;
-  }
-
-  const day = 864e5;
-  const diff = m.diff(moment());
-  let ago = null;
-
-  // If this date was more than a month ago, we'll show the name of the month
-  // in the string. If it wasn't this year, we'll show the year as well.
-  if (diff < -30 * day) {
-    if (m.year() === moment().year()) {
-      ago = m.format('D MMM');
-    } else {
-      ago = m.format('ll');
-    }
-  } else {
-    ago = m.fromNow();
-  }
-
-  return ago;
-}
diff --git a/js/old/common/utils/liveHumanTimes.js b/js/old/common/utils/liveHumanTimes.js
deleted file mode 100644
index 2eac7ef9d..000000000
--- a/js/old/common/utils/liveHumanTimes.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import humanTimeUtil from './humanTime';
-
-function updateHumanTimes() {
-  $('[data-humantime]').each(function () {
-    const $this = $(this);
-    const ago = humanTimeUtil($this.attr('datetime'));
-
-    $this.html(ago);
-  });
-}
-
-/**
- * The `humanTime` initializer sets up a loop every 1 second to update
- * timestamps rendered with the `humanTime` helper.
- */
-export default function humanTime() {
-  setInterval(updateHumanTimes, 10000);
-}
diff --git a/js/old/common/utils/mapRoutes.js b/js/old/common/utils/mapRoutes.js
deleted file mode 100644
index 0ebebce15..000000000
--- a/js/old/common/utils/mapRoutes.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * The `mapRoutes` utility converts a map of named application routes into a
- * format that can be understood by Mithril.
- *
- * @see https://lhorie.github.io/mithril/mithril.route.html#defining-routes
- * @param {Object} routes
- * @param {String} [basePath]
- * @return {Object}
- */
-export default function mapRoutes(routes, basePath = '') {
-  const map = {};
-
-  for (const key in routes) {
-    const route = routes[key];
-
-    if (route.component) route.component.props.routeName = key;
-
-    map[basePath + route.path] = route.component;
-  }
-
-  return map;
-}
diff --git a/js/old/common/utils/mixin.js b/js/old/common/utils/mixin.js
deleted file mode 100644
index da73f0116..000000000
--- a/js/old/common/utils/mixin.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * The `mixin` utility assigns the properties of a set of 'mixin' objects to
- * the prototype of a parent object.
- *
- * @example
- * class MyClass extends mixin(ExistingClass, evented, etc) {}
- *
- * @param {Class} Parent The class to extend the new class from.
- * @param {...Object} mixins The objects to mix in.
- * @return {Class} A new class that extends Parent and contains the mixins.
- */
-export default function mixin(Parent, ...mixins) {
-  class Mixed extends Parent {}
-
-  mixins.forEach((object) => {
-    Object.assign(Mixed.prototype, object);
-  });
-
-  return Mixed;
-}
diff --git a/js/old/common/utils/patchMithril.js b/js/old/common/utils/patchMithril.js
deleted file mode 100644
index a0d1615cd..000000000
--- a/js/old/common/utils/patchMithril.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import Component from '../Component';
-
-export default function patchMithril(global) {
-  const mo = global.m;
-
-  const m = function (comp, ...args) {
-    if (comp.prototype && comp.prototype instanceof Component) {
-      let children = args.slice(1);
-      if (children.length === 1 && Array.isArray(children[0])) {
-        children = children[0];
-      }
-
-      return comp.component(args[0], children);
-    }
-
-    const node = mo.apply(this, arguments);
-
-    if (node.attrs.bidi) {
-      m.bidi(node, node.attrs.bidi);
-    }
-
-    if (node.attrs.route) {
-      node.attrs.href = node.attrs.route;
-      node.attrs.config = m.route;
-
-      delete node.attrs.route;
-    }
-
-    return node;
-  };
-
-  Object.keys(mo).forEach((key) => (m[key] = mo[key]));
-
-  /**
-   * Redraw only if not in the middle of a computation (e.g. a route change).
-   *
-   * @return {void}
-   */
-  m.lazyRedraw = function () {
-    m.startComputation();
-    m.endComputation();
-  };
-
-  global.m = m;
-}
diff --git a/js/old/common/utils/patchZepto.js b/js/old/common/utils/patchZepto.js
deleted file mode 100644
index cc6376e39..000000000
--- a/js/old/common/utils/patchZepto.js
+++ /dev/null
@@ -1,134 +0,0 @@
-import jump from 'jump.js';
-import Tooltip from 'tooltip.js';
-
-// add $.fn.tooltip
-$.fn.tooltip = function (option) {
-  return this.each(function () {
-    const $this = $(this);
-    let data = $this.data('bs.tooltip');
-    const options = typeof option === 'object' && option || {};
-
-    if ($this.attr('title')) {
-      options.title = $this.attr('title');
-      $this.removeAttr('title');
-      $this.attr('data-original-title', options.title);
-    }
-
-    if (option === 'destroy') option = 'dispose';
-
-    if (!data && ['dispose', 'hide'].includes(option)) return;
-
-    if (!data) $this.data('bs.tooltip', (data = new Tooltip(this, options)));
-    if (typeof option === 'string' && data[option]) data[option]();
-  });
-};
-
-// add $.fn.outerWidth and $.fn.outerHeight
-['width', 'height'].forEach(function(dimension) {
-  const Dimension = dimension.replace(/./, function (m) {
-    return m[0].toUpperCase()
-  });
-
-  $.fn[`outer${Dimension}`] = function(margin) {
-    const elem = this;
-
-    if (elem) {
-      const sides = {'width': ['left', 'right'], 'height': ['top', 'bottom']};
-      let size = elem[dimension]();
-
-      sides[dimension].forEach(function(side) {
-        if (margin) size += parseInt(elem.css('margin-' + side), 10);
-      });
-
-      return size;
-    } else {
-      return null;
-    }
-  };
-});
-
-// allow use of $(':input')
-$.expr[':']['input'] = function() {
-  if (('disabled' in this) || ['INPUT', 'SELECT', 'TEXTAREA', 'BUTTON'].includes(this.tagName)) return this;
-};
-
-// add $().hover() method
-$.fn.hover = function(hover, leave) {
-  return this
-    .on('mouseenter', hover)
-    .on('mouseleave', leave || hover);
-};
-
-// add animated scroll
-$.fn.animatedScrollTop = function (to, duration = $.fx.speeds._default, callback) {
-  if (typeof to === 'number') to -= (window.scrollY || window.pageYOffset);
-
-  jump(to, {
-    duration: $.fx.speeds[duration] || duration,
-    callback
-  });
-
-  return this;
-};
-
-// required for compatibility with jquery plugins
-// ex: bootstrap plugins
-$.fn.extend = $.extend.bind($);
-
-/**
- * Enable special events on Zepto
- * @license Original Copyright 2013 Enideo. Released under dual MIT and GPL licenses.
- */
-$.event.special = $.event.special || {};
-
-const bindBeforeSpecialEvents = $.fn.bind;
-
-$.fn.bind = function(eventName, data, callback) {
-  const el = this;
-
-  if (!callback){
-    callback = data;
-    data = null;
-  }
-
-  $.each(eventName.split(/\s/), function(i, eventName) {
-    eventName = eventName.split(/\./)[0];
-
-    if(eventName in $.event.special){
-      let specialEvent = $.event.special[eventName];
-
-      /// init enable special events on Zepto
-      if(!specialEvent._init) {
-        specialEvent._init = true;
-
-        /// intercept and replace the special event handler to add functionality
-        specialEvent.originalHandler = specialEvent.handler;
-        specialEvent.handler = function(){
-
-          /// make event argument writable, like on jQuery
-          const args = Array.prototype.slice.call(arguments);
-
-          args[0] = $.extend({},args[0]);
-
-          /// define the event handle, $.event.dispatch is only for newer versions of jQuery
-          $.event.handle = function(){
-
-            /// make context of trigger the event element
-            const args = Array.prototype.slice.call(arguments);
-            const event = args[0];
-            const $target = $(event.target);
-
-            $target.trigger.apply( $target, arguments );
-          };
-
-          specialEvent.originalHandler.apply(this,args);
-        }
-      }
-
-      /// setup special events on Zepto
-      specialEvent.setup.apply(el, [data]);
-    }
-  });
-
-  return bindBeforeSpecialEvents.apply(this, [eventName, callback]);
-};
diff --git a/js/old/common/utils/string.js b/js/old/common/utils/string.js
deleted file mode 100644
index 73623d8a2..000000000
--- a/js/old/common/utils/string.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * Truncate a string to the given length, appending ellipses if necessary.
- *
- * @param {String} string
- * @param {Number} length
- * @param {Number} [start=0]
- * @return {String}
- */
-export function truncate(string, length, start = 0) {
-  return (start > 0 ? '...' : '') + string.substring(start, start + length) + (string.length > start + length ? '...' : '');
-}
-
-/**
- * Create a slug out of the given string. Non-alphanumeric characters are
- * converted to hyphens.
- *
- * NOTE: This method does not use the comparably sophisticated transliteration
- * mechanism that is employed in the backend. Therefore, it should only be used
- * to *suggest* slugs that can be overridden by the user.
- *
- * @param {String} string
- * @return {String}
- */
-export function slug(string) {
-  return string
-    .toLowerCase()
-    .replace(/[^a-z0-9]/gi, '-')
-    .replace(/-+/g, '-')
-    .replace(/-$|^-/g, '');
-}
-
-/**
- * Strip HTML tags and quotes out of the given string, replacing them with
- * meaningful punctuation.
- *
- * @param {String} string
- * @return {String}
- */
-export function getPlainContent(string) {
-  const html = string.replace(/(<\/p>|<br>)/g, '$1 &nbsp;').replace(/<img\b[^>]*>/gi, ' ');
-
-  const dom = $('<div/>').html(html);
-
-  dom.find(getPlainContent.removeSelectors.join(',')).remove();
-
-  return dom.text().replace(/\s+/g, ' ').trim();
-}
-
-/**
- * An array of DOM selectors to remove when getting plain content.
- *
- * @type {Array}
- */
-getPlainContent.removeSelectors = ['blockquote', 'script'];
-
-/**
- * Make a string's first character uppercase.
- *
- * @param {String} string
- * @return {String}
- */
-export function ucfirst(string) {
-  return string.substr(0, 1).toUpperCase() + string.substr(1);
-}
diff --git a/js/old/common/utils/stringToColor.js b/js/old/common/utils/stringToColor.js
deleted file mode 100644
index 2cb178898..000000000
--- a/js/old/common/utils/stringToColor.js
+++ /dev/null
@@ -1,73 +0,0 @@
-function hsvToRgb(h, s, v) {
-  let r;
-  let g;
-  let b;
-
-  const i = Math.floor(h * 6);
-  const f = h * 6 - i;
-  const p = v * (1 - s);
-  const q = v * (1 - f * s);
-  const t = v * (1 - (1 - f) * s);
-
-  switch (i % 6) {
-    case 0:
-      r = v;
-      g = t;
-      b = p;
-      break;
-    case 1:
-      r = q;
-      g = v;
-      b = p;
-      break;
-    case 2:
-      r = p;
-      g = v;
-      b = t;
-      break;
-    case 3:
-      r = p;
-      g = q;
-      b = v;
-      break;
-    case 4:
-      r = t;
-      g = p;
-      b = v;
-      break;
-    case 5:
-      r = v;
-      g = p;
-      b = q;
-      break;
-  }
-
-  return {
-    r: Math.floor(r * 255),
-    g: Math.floor(g * 255),
-    b: Math.floor(b * 255),
-  };
-}
-
-/**
- * Convert the given string to a unique color.
- *
- * @param {String} string
- * @return {String}
- */
-export default function stringToColor(string) {
-  let num = 0;
-
-  // Convert the username into a number based on the ASCII value of each
-  // character.
-  for (let i = 0; i < string.length; i++) {
-    num += string.charCodeAt(i);
-  }
-
-  // Construct a color using the remainder of that number divided by 360, and
-  // some predefined saturation and value values.
-  const hue = num % 360;
-  const rgb = hsvToRgb(hue / 360, 0.3, 0.9);
-
-  return '' + rgb.r.toString(16) + rgb.g.toString(16) + rgb.b.toString(16);
-}
diff --git a/js/old/forum/ForumApplication.js b/js/old/forum/ForumApplication.js
deleted file mode 100644
index 8bd447f2d..000000000
--- a/js/old/forum/ForumApplication.js
+++ /dev/null
@@ -1,164 +0,0 @@
-import History from './utils/History';
-import Pane from './utils/Pane';
-import Search from './components/Search';
-import ReplyComposer from './components/ReplyComposer';
-import DiscussionPage from './components/DiscussionPage';
-import SignUpModal from './components/SignUpModal';
-import HeaderPrimary from './components/HeaderPrimary';
-import HeaderSecondary from './components/HeaderSecondary';
-import Composer from './components/Composer';
-import DiscussionRenamedNotification from './components/DiscussionRenamedNotification';
-import CommentPost from './components/CommentPost';
-import DiscussionRenamedPost from './components/DiscussionRenamedPost';
-import routes from './routes';
-import alertEmailConfirmation from './utils/alertEmailConfirmation';
-import Application from '../common/Application';
-import Navigation from '../common/components/Navigation';
-
-export default class ForumApplication extends Application {
-  /**
-   * A map of notification types to their components.
-   *
-   * @type {Object}
-   */
-  notificationComponents = {
-    discussionRenamed: DiscussionRenamedNotification,
-  };
-  /**
-   * A map of post types to their components.
-   *
-   * @type {Object}
-   */
-  postComponents = {
-    comment: CommentPost,
-    discussionRenamed: DiscussionRenamedPost,
-  };
-
-  /**
-   * The page's search component instance.
-   *
-   * @type {Search}
-   */
-  search = new Search();
-
-  /**
-   * An object which controls the state of the page's side pane.
-   *
-   * @type {Pane}
-   */
-  pane = null;
-
-  /**
-   * An object which controls the state of the page's drawer.
-   *
-   * @type {Drawer}
-   */
-  drawer = null;
-
-  /**
-   * The app's history stack, which keeps track of which routes the user visits
-   * so that they can easily navigate back to the previous route.
-   *
-   * @type {History}
-   */
-  history = new History();
-
-  constructor() {
-    super();
-
-    routes(this);
-  }
-
-  /**
-   * @inheritdoc
-   */
-  mount() {
-    // Get the configured default route and update that route's path to be '/'.
-    // Push the homepage as the first route, so that the user will always be
-    // able to click on the 'back' button to go home, regardless of which page
-    // they started on.
-    const defaultRoute = this.forum.attribute('defaultRoute');
-    let defaultAction = 'index';
-
-    for (const i in this.routes) {
-      if (this.routes[i].path === defaultRoute) defaultAction = i;
-    }
-
-    this.routes[defaultAction].path = '/';
-    this.history.push(defaultAction, this.translator.trans('core.forum.header.back_to_index_tooltip'), '/');
-
-    m.mount(document.getElementById('app-navigation'), Navigation.component({ className: 'App-backControl', drawer: true }));
-    m.mount(document.getElementById('header-navigation'), Navigation.component());
-    m.mount(document.getElementById('header-primary'), HeaderPrimary.component());
-    m.mount(document.getElementById('header-secondary'), HeaderSecondary.component());
-
-    this.pane = new Pane(document.getElementById('app'));
-    this.composer = m.mount(document.getElementById('composer'), Composer.component());
-
-    m.route.mode = 'pathname';
-    super.mount(this.forum.attribute('basePath'));
-
-    alertEmailConfirmation(this);
-
-    // Route the home link back home when clicked. We do not want it to register
-    // if the user is opening it in a new tab, however.
-    $('#home-link').click((e) => {
-      if (e.ctrlKey || e.metaKey || e.which === 2) return;
-      e.preventDefault();
-      app.history.home();
-
-      // Reload the current user so that their unread notification count is refreshed.
-      if (app.session.user) {
-        app.store.find('users', app.session.user.id());
-        m.redraw();
-      }
-    });
-  }
-
-  /**
-   * Check whether or not the user is currently composing a reply to a
-   * discussion.
-   *
-   * @param {Discussion} discussion
-   * @return {Boolean}
-   */
-  composingReplyTo(discussion) {
-    return (
-      this.composer.component instanceof ReplyComposer &&
-      this.composer.component.props.discussion === discussion &&
-      this.composer.position !== Composer.PositionEnum.HIDDEN
-    );
-  }
-
-  /**
-   * Check whether or not the user is currently viewing a discussion.
-   *
-   * @param {Discussion} discussion
-   * @return {Boolean}
-   */
-  viewingDiscussion(discussion) {
-    return this.current instanceof DiscussionPage && this.current.discussion === discussion;
-  }
-
-  /**
-   * Callback for when an external authenticator (social login) action has
-   * completed.
-   *
-   * If the payload indicates that the user has been logged in, then the page
-   * will be reloaded. Otherwise, a SignUpModal will be opened, prefilled
-   * with the provided details.
-   *
-   * @param {Object} payload A dictionary of props to pass into the sign up
-   *     modal. A truthy `loggedIn` prop indicates that the user has logged
-   *     in, and thus the page is reloaded.
-   * @public
-   */
-  authenticationComplete(payload) {
-    if (payload.loggedIn) {
-      window.location.reload();
-    } else {
-      const modal = new SignUpModal(payload);
-      this.modal.show(modal);
-    }
-  }
-}
diff --git a/js/old/forum/compat.js b/js/old/forum/compat.js
deleted file mode 100644
index ec5c559c7..000000000
--- a/js/old/forum/compat.js
+++ /dev/null
@@ -1,139 +0,0 @@
-import compat from '../common/compat';
-
-import PostControls from './utils/PostControls';
-import KeyboardNavigatable from './utils/KeyboardNavigatable';
-import slidable from './utils/slidable';
-import affixSidebar from './utils/affixSidebar';
-import History from './utils/History';
-import DiscussionControls from './utils/DiscussionControls';
-import alertEmailConfirmation from './utils/alertEmailConfirmation';
-import UserControls from './utils/UserControls';
-import Pane from './utils/Pane';
-import DiscussionPage from './components/DiscussionPage';
-import LogInModal from './components/LogInModal';
-import ComposerBody from './components/ComposerBody';
-import ForgotPasswordModal from './components/ForgotPasswordModal';
-import Notification from './components/Notification';
-import LogInButton from './components/LogInButton';
-import DiscussionsUserPage from './components/DiscussionsUserPage';
-import Composer from './components/Composer';
-import SessionDropdown from './components/SessionDropdown';
-import HeaderPrimary from './components/HeaderPrimary';
-import PostEdited from './components/PostEdited';
-import PostStream from './components/PostStream';
-import ChangePasswordModal from './components/ChangePasswordModal';
-import IndexPage from './components/IndexPage';
-import Page from './components/Page';
-import DiscussionRenamedNotification from './components/DiscussionRenamedNotification';
-import DiscussionsSearchSource from './components/DiscussionsSearchSource';
-import HeaderSecondary from './components/HeaderSecondary';
-import ComposerButton from './components/ComposerButton';
-import DiscussionList from './components/DiscussionList';
-import ReplyPlaceholder from './components/ReplyPlaceholder';
-import TextEditor from './components/TextEditor';
-import TextEditorButton from './components/TextEditorButton';
-import AvatarEditor from './components/AvatarEditor';
-import Post from './components/Post';
-import SettingsPage from './components/SettingsPage';
-import TerminalPost from './components/TerminalPost';
-import ChangeEmailModal from './components/ChangeEmailModal';
-import NotificationsDropdown from './components/NotificationsDropdown';
-import UserPage from './components/UserPage';
-import PostUser from './components/PostUser';
-import UserCard from './components/UserCard';
-import UsersSearchSource from './components/UsersSearchSource';
-import NotificationGrid from './components/NotificationGrid';
-import PostPreview from './components/PostPreview';
-import EventPost from './components/EventPost';
-import DiscussionHero from './components/DiscussionHero';
-import PostMeta from './components/PostMeta';
-import EditUserModal from './components/EditUserModal';
-import SearchSource from './components/SearchSource';
-import DiscussionRenamedPost from './components/DiscussionRenamedPost';
-import DiscussionComposer from './components/DiscussionComposer';
-import LogInButtons from './components/LogInButtons';
-import NotificationList from './components/NotificationList';
-import WelcomeHero from './components/WelcomeHero';
-import SignUpModal from './components/SignUpModal';
-import CommentPost from './components/CommentPost';
-import ReplyComposer from './components/ReplyComposer';
-import NotificationsPage from './components/NotificationsPage';
-import PostStreamScrubber from './components/PostStreamScrubber';
-import EditPostComposer from './components/EditPostComposer';
-import RenameDiscussionModal from './components/RenameDiscussionModal';
-import Search from './components/Search';
-import DiscussionListItem from './components/DiscussionListItem';
-import LoadingPost from './components/LoadingPost';
-import PostsUserPage from './components/PostsUserPage';
-import routes from './routes';
-import ForumApplication from './ForumApplication';
-
-export default Object.assign(compat, {
-  'utils/PostControls': PostControls,
-  'utils/KeyboardNavigatable': KeyboardNavigatable,
-  'utils/slidable': slidable,
-  'utils/affixSidebar': affixSidebar,
-  'utils/History': History,
-  'utils/DiscussionControls': DiscussionControls,
-  'utils/alertEmailConfirmation': alertEmailConfirmation,
-  'utils/UserControls': UserControls,
-  'utils/Pane': Pane,
-  'components/DiscussionPage': DiscussionPage,
-  'components/LogInModal': LogInModal,
-  'components/ComposerBody': ComposerBody,
-  'components/ForgotPasswordModal': ForgotPasswordModal,
-  'components/Notification': Notification,
-  'components/LogInButton': LogInButton,
-  'components/DiscussionsUserPage': DiscussionsUserPage,
-  'components/Composer': Composer,
-  'components/SessionDropdown': SessionDropdown,
-  'components/HeaderPrimary': HeaderPrimary,
-  'components/PostEdited': PostEdited,
-  'components/PostStream': PostStream,
-  'components/ChangePasswordModal': ChangePasswordModal,
-  'components/IndexPage': IndexPage,
-  'components/Page': Page,
-  'components/DiscussionRenamedNotification': DiscussionRenamedNotification,
-  'components/DiscussionsSearchSource': DiscussionsSearchSource,
-  'components/HeaderSecondary': HeaderSecondary,
-  'components/ComposerButton': ComposerButton,
-  'components/DiscussionList': DiscussionList,
-  'components/ReplyPlaceholder': ReplyPlaceholder,
-  'components/TextEditor': TextEditor,
-  'components/TextEditorButton': TextEditorButton,
-  'components/AvatarEditor': AvatarEditor,
-  'components/Post': Post,
-  'components/SettingsPage': SettingsPage,
-  'components/TerminalPost': TerminalPost,
-  'components/ChangeEmailModal': ChangeEmailModal,
-  'components/NotificationsDropdown': NotificationsDropdown,
-  'components/UserPage': UserPage,
-  'components/PostUser': PostUser,
-  'components/UserCard': UserCard,
-  'components/UsersSearchSource': UsersSearchSource,
-  'components/NotificationGrid': NotificationGrid,
-  'components/PostPreview': PostPreview,
-  'components/EventPost': EventPost,
-  'components/DiscussionHero': DiscussionHero,
-  'components/PostMeta': PostMeta,
-  'components/EditUserModal': EditUserModal,
-  'components/SearchSource': SearchSource,
-  'components/DiscussionRenamedPost': DiscussionRenamedPost,
-  'components/DiscussionComposer': DiscussionComposer,
-  'components/LogInButtons': LogInButtons,
-  'components/NotificationList': NotificationList,
-  'components/WelcomeHero': WelcomeHero,
-  'components/SignUpModal': SignUpModal,
-  'components/CommentPost': CommentPost,
-  'components/ReplyComposer': ReplyComposer,
-  'components/NotificationsPage': NotificationsPage,
-  'components/PostStreamScrubber': PostStreamScrubber,
-  'components/EditPostComposer': EditPostComposer,
-  'components/RenameDiscussionModal': RenameDiscussionModal,
-  'components/Search': Search,
-  'components/DiscussionListItem': DiscussionListItem,
-  'components/LoadingPost': LoadingPost,
-  'components/PostsUserPage': PostsUserPage,
-  routes: routes,
-  ForumApplication: ForumApplication,
-});
diff --git a/js/old/forum/components/AvatarEditor.js b/js/old/forum/components/AvatarEditor.js
deleted file mode 100644
index 71a9030c2..000000000
--- a/js/old/forum/components/AvatarEditor.js
+++ /dev/null
@@ -1,231 +0,0 @@
-import Component from '../../common/Component';
-import avatar from '../../common/helpers/avatar';
-import icon from '../../common/helpers/icon';
-import listItems from '../../common/helpers/listItems';
-import ItemList from '../../common/utils/ItemList';
-import Button from '../../common/components/Button';
-import LoadingIndicator from '../../common/components/LoadingIndicator';
-
-/**
- * The `AvatarEditor` component displays a user's avatar along with a dropdown
- * menu which allows the user to upload/remove the avatar.
- *
- * ### Props
- *
- * - `className`
- * - `user`
- */
-export default class AvatarEditor extends Component {
-  init() {
-    /**
-     * Whether or not an avatar upload is in progress.
-     *
-     * @type {Boolean}
-     */
-    this.loading = false;
-
-    /**
-     * Whether or not an image has been dragged over the dropzone.
-     *
-     * @type {Boolean}
-     */
-    this.isDraggedOver = false;
-  }
-
-  static initProps(props) {
-    super.initProps(props);
-
-    props.className = props.className || '';
-  }
-
-  view() {
-    const user = this.props.user;
-
-    return (
-      <div className={'AvatarEditor Dropdown ' + this.props.className + (this.loading ? ' loading' : '') + (this.isDraggedOver ? ' dragover' : '')}>
-        {avatar(user)}
-        <a
-          className={user.avatarUrl() ? 'Dropdown-toggle' : 'Dropdown-toggle AvatarEditor--noAvatar'}
-          title={app.translator.trans('core.forum.user.avatar_upload_tooltip')}
-          data-toggle="dropdown"
-          onclick={this.quickUpload.bind(this)}
-          ondragover={this.enableDragover.bind(this)}
-          ondragenter={this.enableDragover.bind(this)}
-          ondragleave={this.disableDragover.bind(this)}
-          ondragend={this.disableDragover.bind(this)}
-          ondrop={this.dropUpload.bind(this)}
-        >
-          {this.loading ? LoadingIndicator.component() : user.avatarUrl() ? icon('fas fa-pencil-alt') : icon('fas fa-plus-circle')}
-        </a>
-        <ul className="Dropdown-menu Menu">{listItems(this.controlItems().toArray())}</ul>
-      </div>
-    );
-  }
-
-  /**
-   * Get the items in the edit avatar dropdown menu.
-   *
-   * @return {ItemList}
-   */
-  controlItems() {
-    const items = new ItemList();
-
-    items.add(
-      'upload',
-      Button.component({
-        icon: 'fas fa-upload',
-        children: app.translator.trans('core.forum.user.avatar_upload_button'),
-        onclick: this.openPicker.bind(this),
-      })
-    );
-
-    items.add(
-      'remove',
-      Button.component({
-        icon: 'fas fa-times',
-        children: app.translator.trans('core.forum.user.avatar_remove_button'),
-        onclick: this.remove.bind(this),
-      })
-    );
-
-    return items;
-  }
-
-  /**
-   * Enable dragover style
-   *
-   * @param {Event} e
-   */
-  enableDragover(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    this.isDraggedOver = true;
-  }
-
-  /**
-   * Disable dragover style
-   *
-   * @param {Event} e
-   */
-  disableDragover(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    this.isDraggedOver = false;
-  }
-
-  /**
-   * Upload avatar when file is dropped into dropzone.
-   *
-   * @param {Event} e
-   */
-  dropUpload(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    this.isDraggedOver = false;
-    this.upload(e.dataTransfer.files[0]);
-  }
-
-  /**
-   * If the user doesn't have an avatar, there's no point in showing the
-   * controls dropdown, because only one option would be viable: uploading.
-   * Thus, when the avatar editor's dropdown toggle button is clicked, we prompt
-   * the user to upload an avatar immediately.
-   *
-   * @param {Event} e
-   */
-  quickUpload(e) {
-    if (!this.props.user.avatarUrl()) {
-      e.preventDefault();
-      e.stopPropagation();
-      this.openPicker();
-    }
-  }
-
-  /**
-   * Upload avatar using file picker
-   */
-  openPicker() {
-    if (this.loading) return;
-
-    // Create a hidden HTML input element and click on it so the user can select
-    // an avatar file. Once they have, we will upload it via the API.
-    const user = this.props.user;
-    const $input = $('<input type="file">');
-
-    $input
-      .appendTo('body')
-      .hide()
-      .click()
-      .on('input', (e) => {
-        this.upload($(e.target)[0].files[0]);
-      });
-  }
-
-  /**
-   * Upload avatar
-   *
-   * @param {File} file
-   */
-  upload(file) {
-    if (this.loading) return;
-
-    const user = this.props.user;
-    const data = new FormData();
-    data.append('avatar', file);
-
-    this.loading = true;
-    m.redraw();
-
-    app
-      .request({
-        method: 'POST',
-        url: app.forum.attribute('apiUrl') + '/users/' + user.id() + '/avatar',
-        serialize: (raw) => raw,
-        data,
-      })
-      .then(this.success.bind(this), this.failure.bind(this));
-  }
-
-  /**
-   * Remove the user's avatar.
-   */
-  remove() {
-    const user = this.props.user;
-
-    this.loading = true;
-    m.redraw();
-
-    app
-      .request({
-        method: 'DELETE',
-        url: app.forum.attribute('apiUrl') + '/users/' + user.id() + '/avatar',
-      })
-      .then(this.success.bind(this), this.failure.bind(this));
-  }
-
-  /**
-   * After a successful upload/removal, push the updated user data into the
-   * store, and force a recomputation of the user's avatar color.
-   *
-   * @param {Object} response
-   * @protected
-   */
-  success(response) {
-    app.store.pushPayload(response);
-    delete this.props.user.avatarColor;
-
-    this.loading = false;
-    m.redraw();
-  }
-
-  /**
-   * If avatar upload/removal fails, stop loading.
-   *
-   * @param {Object} response
-   * @protected
-   */
-  failure(response) {
-    this.loading = false;
-    m.redraw();
-  }
-}
diff --git a/js/old/forum/components/ChangeEmailModal.js b/js/old/forum/components/ChangeEmailModal.js
deleted file mode 100644
index ce1b1592a..000000000
--- a/js/old/forum/components/ChangeEmailModal.js
+++ /dev/null
@@ -1,130 +0,0 @@
-import Modal from '../../common/components/Modal';
-import Button from '../../common/components/Button';
-
-/**
- * The `ChangeEmailModal` component shows a modal dialog which allows the user
- * to change their email address.
- */
-export default class ChangeEmailModal extends Modal {
-  init() {
-    super.init();
-
-    /**
-     * Whether or not the email has been changed successfully.
-     *
-     * @type {Boolean}
-     */
-    this.success = false;
-
-    /**
-     * The value of the email input.
-     *
-     * @type {function}
-     */
-    this.email = m.prop(app.session.user.email());
-
-    /**
-     * The value of the password input.
-     *
-     * @type {function}
-     */
-    this.password = m.prop('');
-  }
-
-  className() {
-    return 'ChangeEmailModal Modal--small';
-  }
-
-  title() {
-    return app.translator.trans('core.forum.change_email.title');
-  }
-
-  content() {
-    if (this.success) {
-      return (
-        <div className="Modal-body">
-          <div className="Form Form--centered">
-            <p className="helpText">
-              {app.translator.trans('core.forum.change_email.confirmation_message', { email: <strong>{this.email()}</strong> })}
-            </p>
-            <div className="Form-group">
-              <Button className="Button Button--primary Button--block" onclick={this.hide.bind(this)}>
-                {app.translator.trans('core.forum.change_email.dismiss_button')}
-              </Button>
-            </div>
-          </div>
-        </div>
-      );
-    }
-
-    return (
-      <div className="Modal-body">
-        <div className="Form Form--centered">
-          <div className="Form-group">
-            <input
-              type="email"
-              name="email"
-              className="FormControl"
-              placeholder={app.session.user.email()}
-              bidi={this.email}
-              disabled={this.loading}
-            />
-          </div>
-          <div className="Form-group">
-            <input
-              type="password"
-              name="password"
-              className="FormControl"
-              placeholder={app.translator.trans('core.forum.change_email.confirm_password_placeholder')}
-              bidi={this.password}
-              disabled={this.loading}
-            />
-          </div>
-          <div className="Form-group">
-            {Button.component({
-              className: 'Button Button--primary Button--block',
-              type: 'submit',
-              loading: this.loading,
-              children: app.translator.trans('core.forum.change_email.submit_button'),
-            })}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  onsubmit(e) {
-    e.preventDefault();
-
-    // If the user hasn't actually entered a different email address, we don't
-    // need to do anything. Woot!
-    if (this.email() === app.session.user.email()) {
-      this.hide();
-      return;
-    }
-
-    const oldEmail = app.session.user.email();
-
-    this.loading = true;
-
-    app.session.user
-      .save(
-        { email: this.email() },
-        {
-          errorHandler: this.onerror.bind(this),
-          meta: { password: this.password() },
-        }
-      )
-      .then(() => (this.success = true))
-      .catch(() => {})
-      .then(this.loaded.bind(this));
-  }
-
-  onerror(error) {
-    if (error.status === 401) {
-      error.alert.props.children = app.translator.trans('core.forum.change_email.incorrect_password_message');
-    }
-
-    super.onerror(error);
-  }
-}
diff --git a/js/old/forum/components/ChangePasswordModal.js b/js/old/forum/components/ChangePasswordModal.js
deleted file mode 100644
index 03ac84933..000000000
--- a/js/old/forum/components/ChangePasswordModal.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import Modal from '../../common/components/Modal';
-import Button from '../../common/components/Button';
-
-/**
- * The `ChangePasswordModal` component shows a modal dialog which allows the
- * user to send themself a password reset email.
- */
-export default class ChangePasswordModal extends Modal {
-  className() {
-    return 'ChangePasswordModal Modal--small';
-  }
-
-  title() {
-    return app.translator.trans('core.forum.change_password.title');
-  }
-
-  content() {
-    return (
-      <div className="Modal-body">
-        <div className="Form Form--centered">
-          <p className="helpText">{app.translator.trans('core.forum.change_password.text')}</p>
-          <div className="Form-group">
-            {Button.component({
-              className: 'Button Button--primary Button--block',
-              type: 'submit',
-              loading: this.loading,
-              children: app.translator.trans('core.forum.change_password.send_button'),
-            })}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  onsubmit(e) {
-    e.preventDefault();
-
-    this.loading = true;
-
-    app
-      .request({
-        method: 'POST',
-        url: app.forum.attribute('apiUrl') + '/forgot',
-        data: { email: app.session.user.email() },
-      })
-      .then(this.hide.bind(this), this.loaded.bind(this));
-  }
-}
diff --git a/js/old/forum/components/CommentPost.js b/js/old/forum/components/CommentPost.js
deleted file mode 100644
index 0ca868b09..000000000
--- a/js/old/forum/components/CommentPost.js
+++ /dev/null
@@ -1,156 +0,0 @@
-/*global s9e, hljs*/
-
-import Post from './Post';
-import classList from '../../common/utils/classList';
-import PostUser from './PostUser';
-import PostMeta from './PostMeta';
-import PostEdited from './PostEdited';
-import EditPostComposer from './EditPostComposer';
-import ItemList from '../../common/utils/ItemList';
-import listItems from '../../common/helpers/listItems';
-import Button from '../../common/components/Button';
-
-/**
- * The `CommentPost` component displays a standard `comment`-typed post. This
- * includes a number of item lists (controls, header, and footer) surrounding
- * the post's HTML content.
- *
- * ### Props
- *
- * - `post`
- */
-export default class CommentPost extends Post {
-  init() {
-    super.init();
-
-    /**
-     * If the post has been hidden, then this flag determines whether or not its
-     * content has been expanded.
-     *
-     * @type {Boolean}
-     */
-    this.revealContent = false;
-
-    // Create an instance of the component that displays the post's author so
-    // that we can force the post to rerender when the user card is shown.
-    this.postUser = new PostUser({ post: this.props.post });
-    this.subtree.check(
-      () => this.postUser.cardVisible,
-      () => this.isEditing()
-    );
-  }
-
-  content() {
-    // Note: we avoid using JSX for the <ul> below because it results in some
-    // weirdness in Mithril.js 0.1.x (see flarum/core#975). This workaround can
-    // be reverted when we upgrade to Mithril 1.0.
-    return super
-      .content()
-      .concat([
-        <header className="Post-header">{m('ul', listItems(this.headerItems().toArray()))}</header>,
-        <div className="Post-body">
-          {this.isEditing() ? <div className="Post-preview" config={this.configPreview.bind(this)} /> : m.trust(this.props.post.contentHtml())}
-        </div>,
-      ]);
-  }
-
-  config(isInitialized, context) {
-    super.config(...arguments);
-
-    const contentHtml = this.isEditing() ? '' : this.props.post.contentHtml();
-
-    // If the post content has changed since the last render, we'll run through
-    // all of the <script> tags in the content and evaluate them. This is
-    // necessary because TextFormatter outputs them for e.g. syntax highlighting.
-    if (context.contentHtml !== contentHtml) {
-      this.$('.Post-body script').each(function () {
-        eval.call(window, $(this).text());
-      });
-    }
-
-    context.contentHtml = contentHtml;
-  }
-
-  isEditing() {
-    return app.composer.component instanceof EditPostComposer && app.composer.component.props.post === this.props.post;
-  }
-
-  attrs() {
-    const post = this.props.post;
-    const attrs = super.attrs();
-
-    attrs.className =
-      (attrs.className || '') +
-      ' ' +
-      classList({
-        CommentPost: true,
-        'Post--hidden': post.isHidden(),
-        'Post--edited': post.isEdited(),
-        revealContent: this.revealContent,
-        editing: this.isEditing(),
-      });
-
-    return attrs;
-  }
-
-  configPreview(element, isInitialized, context) {
-    if (isInitialized) return;
-
-    // Every 50ms, if the composer content has changed, then update the post's
-    // body with a preview.
-    let preview;
-    const updatePreview = () => {
-      const content = app.composer.component.content();
-
-      if (preview === content) return;
-
-      preview = content;
-
-      s9e.TextFormatter.preview(preview || '', element);
-    };
-    updatePreview();
-
-    const updateInterval = setInterval(updatePreview, 50);
-    context.onunload = () => clearInterval(updateInterval);
-  }
-
-  /**
-   * Toggle the visibility of a hidden post's content.
-   */
-  toggleContent() {
-    this.revealContent = !this.revealContent;
-  }
-
-  /**
-   * Build an item list for the post's header.
-   *
-   * @return {ItemList}
-   */
-  headerItems() {
-    const items = new ItemList();
-    const post = this.props.post;
-    const props = { post };
-
-    items.add('user', this.postUser.render(), 100);
-    items.add('meta', PostMeta.component(props));
-
-    if (post.isEdited() && !post.isHidden()) {
-      items.add('edited', PostEdited.component(props));
-    }
-
-    // If the post is hidden, add a button that allows toggling the visibility
-    // of the post's content.
-    if (post.isHidden()) {
-      items.add(
-        'toggle',
-        Button.component({
-          className: 'Button Button--default Button--more',
-          icon: 'fas fa-ellipsis-h',
-          onclick: this.toggleContent.bind(this),
-        })
-      );
-    }
-
-    return items;
-  }
-}
diff --git a/js/old/forum/components/Composer.js b/js/old/forum/components/Composer.js
deleted file mode 100644
index 1f9b5e91a..000000000
--- a/js/old/forum/components/Composer.js
+++ /dev/null
@@ -1,538 +0,0 @@
-import Component from '../../common/Component';
-import ItemList from '../../common/utils/ItemList';
-import ComposerButton from './ComposerButton';
-import listItems from '../../common/helpers/listItems';
-import classList from '../../common/utils/classList';
-
-/**
- * The `Composer` component displays the composer. It can be loaded with a
- * content component with `load` and then its position/state can be altered with
- * `show`, `hide`, `close`, `minimize`, `fullScreen`, and `exitFullScreen`.
- */
-class Composer extends Component {
-  init() {
-    /**
-     * The composer's current position.
-     *
-     * @type {Composer.PositionEnum}
-     */
-    this.position = Composer.PositionEnum.HIDDEN;
-
-    /**
-     * The composer's intended height, which can be modified by the user
-     * (by dragging the composer handle).
-     *
-     * @type {Integer}
-     */
-    this.height = null;
-
-    /**
-     * Whether or not the composer currently has focus.
-     *
-     * @type {Boolean}
-     */
-    this.active = false;
-  }
-
-  view() {
-    const classes = {
-      normal: this.position === Composer.PositionEnum.NORMAL,
-      minimized: this.position === Composer.PositionEnum.MINIMIZED,
-      fullScreen: this.position === Composer.PositionEnum.FULLSCREEN,
-      active: this.active,
-    };
-    classes.visible = classes.normal || classes.minimized || classes.fullScreen;
-
-    // If the composer is minimized, tell the composer's content component that
-    // it shouldn't let the user interact with it. Set up a handler so that if
-    // the content IS clicked, the composer will be shown.
-    if (this.component) this.component.props.disabled = classes.minimized;
-
-    const showIfMinimized = this.position === Composer.PositionEnum.MINIMIZED ? this.show.bind(this) : undefined;
-
-    return (
-      <div className={'Composer ' + classList(classes)}>
-        <div className="Composer-handle" config={this.configHandle.bind(this)} />
-        <ul className="Composer-controls">{listItems(this.controlItems().toArray())}</ul>
-        <div className="Composer-content" onclick={showIfMinimized}>
-          {this.component ? this.component.render() : ''}
-        </div>
-      </div>
-    );
-  }
-
-  config(isInitialized, context) {
-    // Set the height of the Composer element and its contents on each redraw,
-    // so that they do not lose it if their DOM elements are recreated.
-    this.updateHeight();
-
-    if (isInitialized) return;
-
-    // Since this component is a part of the global UI that persists between
-    // routes, we will flag the DOM to be retained across route changes.
-    context.retain = true;
-
-    this.initializeHeight();
-    this.$().hide().css('bottom', -this.computedHeight());
-
-    // Whenever any of the inputs inside the composer are have focus, we want to
-    // add a class to the composer to draw attention to it.
-    this.$().on('focus blur', ':input', (e) => {
-      this.active = e.type === 'focusin';
-      m.redraw();
-    });
-
-    // When the escape key is pressed on any inputs, close the composer.
-    this.$().on('keydown', ':input', 'esc', () => this.close());
-
-    // Don't let the user leave the page without first giving the composer's
-    // component a chance to scream at the user to make sure they don't
-    // unintentionally lose any contnet.
-    window.onbeforeunload = () => {
-      return (this.component && this.component.preventExit()) || undefined;
-    };
-
-    const handlers = {};
-
-    $(window)
-      .on('resize', (handlers.onresize = this.updateHeight.bind(this)))
-      .resize();
-
-    $(document)
-      .on('mousemove', (handlers.onmousemove = this.onmousemove.bind(this)))
-      .on('mouseup', (handlers.onmouseup = this.onmouseup.bind(this)));
-
-    context.onunload = () => {
-      $(window).off('resize', handlers.onresize);
-
-      $(document).off('mousemove', handlers.onmousemove).off('mouseup', handlers.onmouseup);
-    };
-  }
-
-  /**
-   * Add the necessary event handlers to the composer's handle so that it can
-   * be used to resize the composer.
-   *
-   * @param {DOMElement} element
-   * @param {Boolean} isInitialized
-   */
-  configHandle(element, isInitialized) {
-    if (isInitialized) return;
-
-    const composer = this;
-
-    $(element)
-      .css('cursor', 'row-resize')
-      .bind('dragstart mousedown', (e) => e.preventDefault())
-      .mousedown(function (e) {
-        composer.mouseStart = e.clientY;
-        composer.heightStart = composer.$().height();
-        composer.handle = $(this);
-        $('body').css('cursor', 'row-resize');
-      });
-  }
-
-  /**
-   * Resize the composer according to mouse movement.
-   *
-   * @param {Event} e
-   */
-  onmousemove(e) {
-    if (!this.handle) return;
-
-    // Work out how much the mouse has been moved, and set the height
-    // relative to the old one based on that. Then update the content's
-    // height so that it fills the height of the composer, and update the
-    // body's padding.
-    const deltaPixels = this.mouseStart - e.clientY;
-    this.changeHeight(this.heightStart + deltaPixels);
-
-    // Update the body's padding-bottom so that no content on the page will ever
-    // get permanently hidden behind the composer. If the user is already
-    // scrolled to the bottom of the page, then we will keep them scrolled to
-    // the bottom after the padding has been updated.
-    const scrollTop = $(window).scrollTop();
-    const anchorToBottom = scrollTop > 0 && scrollTop + $(window).height() >= $(document).height();
-    this.updateBodyPadding(anchorToBottom);
-  }
-
-  /**
-   * Finish resizing the composer when the mouse is released.
-   */
-  onmouseup() {
-    if (!this.handle) return;
-
-    this.handle = null;
-    $('body').css('cursor', '');
-  }
-
-  /**
-   * Update the DOM to reflect the composer's current height. This involves
-   * setting the height of the composer's root element, and adjusting the height
-   * of any flexible elements inside the composer's body.
-   */
-  updateHeight() {
-    const height = this.computedHeight();
-    const $flexible = this.$('.Composer-flexible');
-
-    this.$().height(height);
-
-    if ($flexible.length) {
-      const headerHeight = $flexible.offset().top - this.$().offset().top;
-      const paddingBottom = parseInt($flexible.css('padding-bottom'), 10);
-      const footerHeight = this.$('.Composer-footer').outerHeight(true);
-
-      $flexible.height(this.$().outerHeight() - headerHeight - paddingBottom - footerHeight);
-    }
-  }
-
-  /**
-   * Update the amount of padding-bottom on the body so that the page's
-   * content will still be visible above the composer when the page is
-   * scrolled right to the bottom.
-   */
-  updateBodyPadding() {
-    const visible =
-      this.position !== Composer.PositionEnum.HIDDEN && this.position !== Composer.PositionEnum.MINIMIZED && this.$().css('position') !== 'absolute';
-
-    const paddingBottom = visible ? this.computedHeight() - parseInt($('#app').css('padding-bottom'), 10) : 0;
-
-    $('#content').css({ paddingBottom });
-  }
-
-  /**
-   * Determine whether or not the Composer is covering the screen.
-   *
-   * This will be true if the Composer is in full-screen mode on desktop, or
-   * if the Composer is positioned absolutely as on mobile devices.
-   *
-   * @return {Boolean}
-   * @public
-   */
-  isFullScreen() {
-    return this.position === Composer.PositionEnum.FULLSCREEN || this.$().css('position') === 'absolute';
-  }
-
-  /**
-   * Confirm with the user that they want to close the composer and lose their
-   * content.
-   *
-   * @return {Boolean} Whether or not the exit was cancelled.
-   */
-  preventExit() {
-    if (this.component) {
-      const preventExit = this.component.preventExit();
-
-      if (preventExit) {
-        return !confirm(preventExit);
-      }
-    }
-  }
-
-  /**
-   * Load a content component into the composer.
-   *
-   * @param {Component} component
-   * @public
-   */
-  load(component) {
-    if (this.preventExit()) return;
-
-    // If we load a similar component into the composer, then Mithril will be
-    // able to diff the old/new contents and some DOM-related state from the
-    // old composer will remain. To prevent this from happening, we clear the
-    // component and force a redraw, so that the new component will be working
-    // on a blank slate.
-    if (this.component) {
-      this.clear();
-      m.redraw(true);
-    }
-
-    this.component = component;
-  }
-
-  /**
-   * Clear the composer's content component.
-   *
-   * @public
-   */
-  clear() {
-    this.component = null;
-  }
-
-  /**
-   * Animate the Composer into the given position.
-   *
-   * @param {Composer.PositionEnum} position
-   */
-  animateToPosition(position) {
-    // Before we redraw the composer to its new state, we need to save the
-    // current height of the composer, as well as the page's scroll position, so
-    // that we can smoothly transition from the old to the new state.
-    const oldPosition = this.position;
-    const $composer = this.$().stop(true);
-    const oldHeight = $composer.outerHeight();
-    const scrollTop = $(window).scrollTop();
-
-    this.position = position;
-
-    m.redraw(true);
-
-    // Now that we've redrawn and the composer's DOM has been updated, we want
-    // to update the composer's height. Once we've done that, we'll capture the
-    // real value to use as the end point for our animation later on.
-    $composer.show();
-    this.updateHeight();
-
-    const newHeight = $composer.outerHeight();
-
-    if (oldPosition === Composer.PositionEnum.HIDDEN) {
-      $composer.css({ bottom: -newHeight, height: newHeight });
-    } else {
-      $composer.css({ height: oldHeight });
-    }
-
-    $composer.animate({ bottom: 0, height: newHeight }, 'fast', () => this.component.focus());
-
-    this.updateBodyPadding();
-    $(window).scrollTop(scrollTop);
-  }
-
-  /**
-   * Show the Composer backdrop.
-   */
-  showBackdrop() {
-    this.$backdrop = $('<div/>').addClass('composer-backdrop').appendTo('body');
-  }
-
-  /**
-   * Hide the Composer backdrop.
-   */
-  hideBackdrop() {
-    if (this.$backdrop) this.$backdrop.remove();
-  }
-
-  /**
-   * Show the composer.
-   *
-   * @public
-   */
-  show() {
-    if (this.position === Composer.PositionEnum.NORMAL || this.position === Composer.PositionEnum.FULLSCREEN) {
-      return;
-    }
-
-    this.animateToPosition(Composer.PositionEnum.NORMAL);
-
-    if (this.isFullScreen()) {
-      this.$().css('top', $(window).scrollTop());
-      this.showBackdrop();
-      this.component.focus();
-    }
-  }
-
-  /**
-   * Close the composer.
-   *
-   * @public
-   */
-  hide() {
-    const $composer = this.$();
-
-    // Animate the composer sliding down off the bottom edge of the viewport.
-    // Only when the animation is completed, update the Composer state flag and
-    // other elements on the page.
-    $composer.stop(true).animate({ bottom: -$composer.height() }, 'fast', () => {
-      this.position = Composer.PositionEnum.HIDDEN;
-      this.clear();
-      m.redraw();
-
-      $composer.hide();
-      this.hideBackdrop();
-      this.updateBodyPadding();
-    });
-  }
-
-  /**
-   * Confirm with the user so they don't lose their content, then close the
-   * composer.
-   *
-   * @public
-   */
-  close() {
-    if (!this.preventExit()) {
-      this.hide();
-    }
-  }
-
-  /**
-   * Minimize the composer. Has no effect if the composer is hidden.
-   *
-   * @public
-   */
-  minimize() {
-    if (this.position === Composer.PositionEnum.HIDDEN) return;
-
-    this.animateToPosition(Composer.PositionEnum.MINIMIZED);
-
-    this.$().css('top', 'auto');
-    this.hideBackdrop();
-  }
-
-  /**
-   * Take the composer into fullscreen mode. Has no effect if the composer is
-   * hidden.
-   *
-   * @public
-   */
-  fullScreen() {
-    if (this.position !== Composer.PositionEnum.HIDDEN) {
-      this.position = Composer.PositionEnum.FULLSCREEN;
-      m.redraw();
-      this.updateHeight();
-      this.component.focus();
-    }
-  }
-
-  /**
-   * Exit fullscreen mode.
-   *
-   * @public
-   */
-  exitFullScreen() {
-    if (this.position === Composer.PositionEnum.FULLSCREEN) {
-      this.position = Composer.PositionEnum.NORMAL;
-      m.redraw();
-      this.updateHeight();
-      this.component.focus();
-    }
-  }
-
-  /**
-   * Build an item list for the composer's controls.
-   *
-   * @return {ItemList}
-   */
-  controlItems() {
-    const items = new ItemList();
-
-    if (this.position === Composer.PositionEnum.FULLSCREEN) {
-      items.add(
-        'exitFullScreen',
-        ComposerButton.component({
-          icon: 'fas fa-compress',
-          title: app.translator.trans('core.forum.composer.exit_full_screen_tooltip'),
-          onclick: this.exitFullScreen.bind(this),
-        })
-      );
-    } else {
-      if (this.position !== Composer.PositionEnum.MINIMIZED) {
-        items.add(
-          'minimize',
-          ComposerButton.component({
-            icon: 'fas fa-minus minimize',
-            title: app.translator.trans('core.forum.composer.minimize_tooltip'),
-            onclick: this.minimize.bind(this),
-            itemClassName: 'App-backControl',
-          })
-        );
-
-        items.add(
-          'fullScreen',
-          ComposerButton.component({
-            icon: 'fas fa-expand',
-            title: app.translator.trans('core.forum.composer.full_screen_tooltip'),
-            onclick: this.fullScreen.bind(this),
-          })
-        );
-      }
-
-      items.add(
-        'close',
-        ComposerButton.component({
-          icon: 'fas fa-times',
-          title: app.translator.trans('core.forum.composer.close_tooltip'),
-          onclick: this.close.bind(this),
-        })
-      );
-    }
-
-    return items;
-  }
-
-  /**
-   * Initialize default Composer height.
-   */
-  initializeHeight() {
-    this.height = localStorage.getItem('composerHeight');
-
-    if (!this.height) {
-      this.height = this.defaultHeight();
-    }
-  }
-
-  /**
-   * Default height of the Composer in case none is saved.
-   * @returns {Integer}
-   */
-  defaultHeight() {
-    return this.$().height();
-  }
-
-  /**
-   * Minimum height of the Composer.
-   * @returns {Integer}
-   */
-  minimumHeight() {
-    return 200;
-  }
-
-  /**
-   * Maxmimum height of the Composer.
-   * @returns {Integer}
-   */
-  maximumHeight() {
-    return $(window).height() - $('#header').outerHeight();
-  }
-
-  /**
-   * Computed the composer's current height, based on the intended height, and
-   * the composer's current state. This will be applied to the composer's
-   * content's DOM element.
-   * @returns {Integer|String}
-   */
-  computedHeight() {
-    // If the composer is minimized, then we don't want to set a height; we'll
-    // let the CSS decide how high it is. If it's fullscreen, then we need to
-    // make it as high as the window.
-    if (this.position === Composer.PositionEnum.MINIMIZED) {
-      return '';
-    } else if (this.position === Composer.PositionEnum.FULLSCREEN) {
-      return $(window).height();
-    }
-
-    // Otherwise, if it's normal or hidden, then we use the intended height.
-    // We don't let the composer get too small or too big, though.
-    return Math.max(this.minimumHeight(), Math.min(this.height, this.maximumHeight()));
-  }
-
-  /**
-   * Save a new Composer height and update the DOM.
-   * @param {Integer} height
-   */
-  changeHeight(height) {
-    this.height = height;
-    this.updateHeight();
-
-    localStorage.setItem('composerHeight', this.height);
-  }
-}
-
-Composer.PositionEnum = {
-  HIDDEN: 'hidden',
-  NORMAL: 'normal',
-  MINIMIZED: 'minimized',
-  FULLSCREEN: 'fullScreen',
-};
-
-export default Composer;
diff --git a/js/old/forum/components/ComposerBody.js b/js/old/forum/components/ComposerBody.js
deleted file mode 100644
index 670785228..000000000
--- a/js/old/forum/components/ComposerBody.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import Component from '../../common/Component';
-import LoadingIndicator from '../../common/components/LoadingIndicator';
-import TextEditor from './TextEditor';
-import avatar from '../../common/helpers/avatar';
-import listItems from '../../common/helpers/listItems';
-import ItemList from '../../common/utils/ItemList';
-
-/**
- * The `ComposerBody` component handles the body, or the content, of the
- * composer. Subclasses should implement the `onsubmit` method and override
- * `headerTimes`.
- *
- * ### Props
- *
- * - `originalContent`
- * - `submitLabel`
- * - `placeholder`
- * - `user`
- * - `confirmExit`
- * - `disabled`
- *
- * @abstract
- */
-export default class ComposerBody extends Component {
-  init() {
-    /**
-     * Whether or not the component is loading.
-     *
-     * @type {Boolean}
-     */
-    this.loading = false;
-
-    /**
-     * The content of the text editor.
-     *
-     * @type {Function}
-     */
-    this.content = m.prop(this.props.originalContent);
-
-    /**
-     * The text editor component instance.
-     *
-     * @type {TextEditor}
-     */
-    this.editor = new TextEditor({
-      submitLabel: this.props.submitLabel,
-      placeholder: this.props.placeholder,
-      onchange: this.content,
-      onsubmit: this.onsubmit.bind(this),
-      value: this.content(),
-    });
-  }
-
-  view() {
-    // If the component is loading, we should disable the text editor.
-    this.editor.props.disabled = this.loading;
-
-    return (
-      <div className={'ComposerBody ' + (this.props.className || '')}>
-        {avatar(this.props.user, { className: 'ComposerBody-avatar' })}
-        <div className="ComposerBody-content">
-          <ul className="ComposerBody-header">{listItems(this.headerItems().toArray())}</ul>
-          <div className="ComposerBody-editor">{this.editor.render()}</div>
-        </div>
-        {LoadingIndicator.component({ className: 'ComposerBody-loading' + (this.loading ? ' active' : '') })}
-      </div>
-    );
-  }
-
-  /**
-   * Draw focus to the text editor.
-   */
-  focus() {
-    this.$(':input:enabled:visible:first').focus();
-  }
-
-  /**
-   * Check if there is any unsaved data – if there is, return a confirmation
-   * message to prompt the user with.
-   *
-   * @return {String}
-   */
-  preventExit() {
-    const content = this.content();
-
-    return content && content !== this.props.originalContent && this.props.confirmExit;
-  }
-
-  /**
-   * Build an item list for the composer's header.
-   *
-   * @return {ItemList}
-   */
-  headerItems() {
-    return new ItemList();
-  }
-
-  /**
-   * Handle the submit event of the text editor.
-   *
-   * @abstract
-   */
-  onsubmit() {}
-
-  /**
-   * Stop loading.
-   */
-  loaded() {
-    this.loading = false;
-    m.redraw();
-  }
-}
diff --git a/js/old/forum/components/ComposerButton.js b/js/old/forum/components/ComposerButton.js
deleted file mode 100644
index 643dd3f51..000000000
--- a/js/old/forum/components/ComposerButton.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import Button from '../../common/components/Button';
-
-/**
- * The `ComposerButton` component displays a button suitable for the composer
- * controls.
- */
-export default class ComposerButton extends Button {
-  static initProps(props) {
-    super.initProps(props);
-
-    props.className = props.className || 'Button Button--icon Button--link';
-  }
-}
diff --git a/js/old/forum/components/DiscussionComposer.js b/js/old/forum/components/DiscussionComposer.js
deleted file mode 100644
index 76c4155de..000000000
--- a/js/old/forum/components/DiscussionComposer.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import ComposerBody from './ComposerBody';
-import extractText from '../../common/utils/extractText';
-
-/**
- * The `DiscussionComposer` component displays the composer content for starting
- * a new discussion. It adds a text field as a header control so the user can
- * enter the title of their discussion. It also overrides the `submit` and
- * `willExit` actions to account for the title.
- *
- * ### Props
- *
- * - All of the props for ComposerBody
- * - `titlePlaceholder`
- */
-export default class DiscussionComposer extends ComposerBody {
-  init() {
-    super.init();
-
-    /**
-     * The value of the title input.
-     *
-     * @type {Function}
-     */
-    this.title = m.prop('');
-  }
-
-  static initProps(props) {
-    super.initProps(props);
-
-    props.placeholder = props.placeholder || extractText(app.translator.trans('core.forum.composer_discussion.body_placeholder'));
-    props.submitLabel = props.submitLabel || app.translator.trans('core.forum.composer_discussion.submit_button');
-    props.confirmExit = props.confirmExit || extractText(app.translator.trans('core.forum.composer_discussion.discard_confirmation'));
-    props.titlePlaceholder = props.titlePlaceholder || extractText(app.translator.trans('core.forum.composer_discussion.title_placeholder'));
-    props.className = 'ComposerBody--discussion';
-  }
-
-  headerItems() {
-    const items = super.headerItems();
-
-    items.add('title', <h3>{app.translator.trans('core.forum.composer_discussion.title')}</h3>, 100);
-
-    items.add(
-      'discussionTitle',
-      <h3>
-        <input
-          className="FormControl"
-          value={this.title()}
-          oninput={m.withAttr('value', this.title)}
-          placeholder={this.props.titlePlaceholder}
-          disabled={!!this.props.disabled}
-          onkeydown={this.onkeydown.bind(this)}
-        />
-      </h3>
-    );
-
-    return items;
-  }
-
-  /**
-   * Handle the title input's keydown event. When the return key is pressed,
-   * move the focus to the start of the text editor.
-   *
-   * @param {Event} e
-   */
-  onkeydown(e) {
-    if (e.which === 13) {
-      // Return
-      e.preventDefault();
-      this.editor.setSelectionRange(0, 0);
-    }
-
-    m.redraw.strategy('none');
-  }
-
-  preventExit() {
-    return (this.title() || this.content()) && this.props.confirmExit;
-  }
-
-  /**
-   * Get the data to submit to the server when the discussion is saved.
-   *
-   * @return {Object}
-   */
-  data() {
-    return {
-      title: this.title(),
-      content: this.content(),
-    };
-  }
-
-  onsubmit() {
-    this.loading = true;
-
-    const data = this.data();
-
-    app.store
-      .createRecord('discussions')
-      .save(data)
-      .then((discussion) => {
-        app.composer.hide();
-        app.cache.discussionList.refresh();
-        m.route(app.route.discussion(discussion));
-      }, this.loaded.bind(this));
-  }
-}
diff --git a/js/old/forum/components/DiscussionHero.js b/js/old/forum/components/DiscussionHero.js
deleted file mode 100644
index d088cdb53..000000000
--- a/js/old/forum/components/DiscussionHero.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import Component from '../../common/Component';
-import ItemList from '../../common/utils/ItemList';
-import listItems from '../../common/helpers/listItems';
-
-/**
- * The `DiscussionHero` component displays the hero on a discussion page.
- *
- * ### Props
- *
- * - `discussion`
- */
-export default class DiscussionHero extends Component {
-  view() {
-    return (
-      <header className="Hero DiscussionHero">
-        <div className="container">
-          <ul className="DiscussionHero-items">{listItems(this.items().toArray())}</ul>
-        </div>
-      </header>
-    );
-  }
-
-  /**
-   * Build an item list for the contents of the discussion hero.
-   *
-   * @return {ItemList}
-   */
-  items() {
-    const items = new ItemList();
-    const discussion = this.props.discussion;
-    const badges = discussion.badges().toArray();
-
-    if (badges.length) {
-      items.add('badges', <ul className="DiscussionHero-badges badges">{listItems(badges)}</ul>, 10);
-    }
-
-    items.add('title', <h2 className="DiscussionHero-title">{discussion.title()}</h2>);
-
-    return items;
-  }
-}
diff --git a/js/old/forum/components/DiscussionList.js b/js/old/forum/components/DiscussionList.js
deleted file mode 100644
index 6c065c417..000000000
--- a/js/old/forum/components/DiscussionList.js
+++ /dev/null
@@ -1,211 +0,0 @@
-import Component from '../../common/Component';
-import DiscussionListItem from './DiscussionListItem';
-import Button from '../../common/components/Button';
-import LoadingIndicator from '../../common/components/LoadingIndicator';
-import Placeholder from '../../common/components/Placeholder';
-
-/**
- * The `DiscussionList` component displays a list of discussions.
- *
- * ### Props
- *
- * - `params` A map of parameters used to construct a refined parameter object
- *   to send along in the API request to get discussion results.
- */
-export default class DiscussionList extends Component {
-  init() {
-    /**
-     * Whether or not discussion results are loading.
-     *
-     * @type {Boolean}
-     */
-    this.loading = true;
-
-    /**
-     * Whether or not there are more results that can be loaded.
-     *
-     * @type {Boolean}
-     */
-    this.moreResults = false;
-
-    /**
-     * The discussions in the discussion list.
-     *
-     * @type {Discussion[]}
-     */
-    this.discussions = [];
-
-    this.refresh();
-  }
-
-  view() {
-    const params = this.props.params;
-    let loading;
-
-    if (this.loading) {
-      loading = LoadingIndicator.component();
-    } else if (this.moreResults) {
-      loading = Button.component({
-        children: app.translator.trans('core.forum.discussion_list.load_more_button'),
-        className: 'Button',
-        onclick: this.loadMore.bind(this),
-      });
-    }
-
-    if (this.discussions.length === 0 && !this.loading) {
-      const text = app.translator.trans('core.forum.discussion_list.empty_text');
-      return <div className="DiscussionList">{Placeholder.component({ text })}</div>;
-    }
-
-    return (
-      <div className={'DiscussionList' + (this.props.params.q ? ' DiscussionList--searchResults' : '')}>
-        <ul className="DiscussionList-discussions">
-          {this.discussions.map((discussion) => {
-            return (
-              <li key={discussion.id()} data-id={discussion.id()}>
-                {DiscussionListItem.component({ discussion, params })}
-              </li>
-            );
-          })}
-        </ul>
-        <div className="DiscussionList-loadMore">{loading}</div>
-      </div>
-    );
-  }
-
-  /**
-   * Get the parameters that should be passed in the API request to get
-   * discussion results.
-   *
-   * @return {Object}
-   * @api
-   */
-  requestParams() {
-    const params = { include: ['user', 'lastPostedUser'], filter: {} };
-
-    params.sort = this.sortMap()[this.props.params.sort];
-
-    if (this.props.params.q) {
-      params.filter.q = this.props.params.q;
-
-      params.include.push('mostRelevantPost', 'mostRelevantPost.user');
-    }
-
-    return params;
-  }
-
-  /**
-   * Get a map of sort keys (which appear in the URL, and are used for
-   * translation) to the API sort value that they represent.
-   *
-   * @return {Object}
-   */
-  sortMap() {
-    const map = {};
-
-    if (this.props.params.q) {
-      map.relevance = '';
-    }
-    map.latest = '-lastPostedAt';
-    map.top = '-commentCount';
-    map.newest = '-createdAt';
-    map.oldest = 'createdAt';
-
-    return map;
-  }
-
-  /**
-   * Clear and reload the discussion list.
-   *
-   * @public
-   */
-  refresh(clear = true) {
-    if (clear) {
-      this.loading = true;
-      this.discussions = [];
-    }
-
-    return this.loadResults().then(
-      (results) => {
-        this.discussions = [];
-        this.parseResults(results);
-      },
-      () => {
-        this.loading = false;
-        m.redraw();
-      }
-    );
-  }
-
-  /**
-   * Load a new page of discussion results.
-   *
-   * @param {Integer} offset The index to start the page at.
-   * @return {Promise}
-   */
-  loadResults(offset) {
-    const preloadedDiscussions = app.preloadedApiDocument();
-
-    if (preloadedDiscussions) {
-      return m.deferred().resolve(preloadedDiscussions).promise;
-    }
-
-    const params = this.requestParams();
-    params.page = { offset };
-    params.include = params.include.join(',');
-
-    return app.store.find('discussions', params);
-  }
-
-  /**
-   * Load the next page of discussion results.
-   *
-   * @public
-   */
-  loadMore() {
-    this.loading = true;
-
-    this.loadResults(this.discussions.length).then(this.parseResults.bind(this));
-  }
-
-  /**
-   * Parse results and append them to the discussion list.
-   *
-   * @param {Discussion[]} results
-   * @return {Discussion[]}
-   */
-  parseResults(results) {
-    [].push.apply(this.discussions, results);
-
-    this.loading = false;
-    this.moreResults = !!results.payload.links.next;
-
-    m.lazyRedraw();
-
-    return results;
-  }
-
-  /**
-   * Remove a discussion from the list if it is present.
-   *
-   * @param {Discussion} discussion
-   * @public
-   */
-  removeDiscussion(discussion) {
-    const index = this.discussions.indexOf(discussion);
-
-    if (index !== -1) {
-      this.discussions.splice(index, 1);
-    }
-  }
-
-  /**
-   * Add a discussion to the top of the list.
-   *
-   * @param {Discussion} discussion
-   * @public
-   */
-  addDiscussion(discussion) {
-    this.discussions.unshift(discussion);
-  }
-}
diff --git a/js/old/forum/components/DiscussionListItem.js b/js/old/forum/components/DiscussionListItem.js
deleted file mode 100644
index 5468cad88..000000000
--- a/js/old/forum/components/DiscussionListItem.js
+++ /dev/null
@@ -1,218 +0,0 @@
-import Component from '../../common/Component';
-import avatar from '../../common/helpers/avatar';
-import listItems from '../../common/helpers/listItems';
-import highlight from '../../common/helpers/highlight';
-import icon from '../../common/helpers/icon';
-import humanTime from '../../common/utils/humanTime';
-import ItemList from '../../common/utils/ItemList';
-import abbreviateNumber from '../../common/utils/abbreviateNumber';
-import Dropdown from '../../common/components/Dropdown';
-import TerminalPost from './TerminalPost';
-import PostPreview from './PostPreview';
-import SubtreeRetainer from '../../common/utils/SubtreeRetainer';
-import DiscussionControls from '../utils/DiscussionControls';
-import slidable from '../utils/slidable';
-import extractText from '../../common/utils/extractText';
-import classList from '../../common/utils/classList';
-
-/**
- * The `DiscussionListItem` component shows a single discussion in the
- * discussion list.
- *
- * ### Props
- *
- * - `discussion`
- * - `params`
- */
-export default class DiscussionListItem extends Component {
-  init() {
-    /**
-     * Set up a subtree retainer so that the discussion will not be redrawn
-     * unless new data comes in.
-     *
-     * @type {SubtreeRetainer}
-     */
-    this.subtree = new SubtreeRetainer(
-      () => this.props.discussion.freshness,
-      () => {
-        const time = app.session.user && app.session.user.markedAllAsReadAt();
-        return time && time.getTime();
-      },
-      () => this.active()
-    );
-  }
-
-  attrs() {
-    return {
-      className: classList([
-        'DiscussionListItem',
-        this.active() ? 'active' : '',
-        this.props.discussion.isHidden() ? 'DiscussionListItem--hidden' : '',
-      ]),
-    };
-  }
-
-  view() {
-    const retain = this.subtree.retain();
-
-    if (retain) return retain;
-
-    const discussion = this.props.discussion;
-    const user = discussion.user();
-    const isUnread = discussion.isUnread();
-    const isRead = discussion.isRead();
-    const showUnread = !this.showRepliesCount() && isUnread;
-    let jumpTo = 0;
-    const controls = DiscussionControls.controls(discussion, this).toArray();
-    const attrs = this.attrs();
-
-    if (this.props.params.q) {
-      const post = discussion.mostRelevantPost();
-      if (post) {
-        jumpTo = post.number();
-      }
-
-      const phrase = this.props.params.q;
-      this.highlightRegExp = new RegExp(phrase + '|' + phrase.trim().replace(/\s+/g, '|'), 'gi');
-    } else {
-      jumpTo = Math.min(discussion.lastPostNumber(), (discussion.lastReadPostNumber() || 0) + 1);
-    }
-
-    return (
-      <div {...attrs}>
-        {controls.length
-          ? Dropdown.component({
-              icon: 'fas fa-ellipsis-v',
-              children: controls,
-              className: 'DiscussionListItem-controls',
-              buttonClassName: 'Button Button--icon Button--flat Slidable-underneath Slidable-underneath--right',
-            })
-          : ''}
-
-        <a
-          className={'Slidable-underneath Slidable-underneath--left Slidable-underneath--elastic' + (isUnread ? '' : ' disabled')}
-          onclick={this.markAsRead.bind(this)}
-        >
-          {icon('fas fa-check')}
-        </a>
-
-        <div className={'DiscussionListItem-content Slidable-content' + (isUnread ? ' unread' : '') + (isRead ? ' read' : '')}>
-          <a
-            href={user ? app.route.user(user) : '#'}
-            className="DiscussionListItem-author"
-            title={extractText(
-              app.translator.trans('core.forum.discussion_list.started_text', { user: user, ago: humanTime(discussion.createdAt()) })
-            )}
-            config={function (element) {
-              $(element).tooltip({ placement: 'right' });
-              m.route.apply(this, arguments);
-            }}
-          >
-            {avatar(user, { title: '' })}
-          </a>
-
-          <ul className="DiscussionListItem-badges badges">{listItems(discussion.badges().toArray())}</ul>
-
-          <a href={app.route.discussion(discussion, jumpTo)} config={m.route} className="DiscussionListItem-main">
-            <h3 className="DiscussionListItem-title">{highlight(discussion.title(), this.highlightRegExp)}</h3>
-            <ul className="DiscussionListItem-info">{listItems(this.infoItems().toArray())}</ul>
-          </a>
-
-          <span
-            className="DiscussionListItem-count"
-            onclick={this.markAsRead.bind(this)}
-            title={showUnread ? app.translator.trans('core.forum.discussion_list.mark_as_read_tooltip') : ''}
-          >
-            {abbreviateNumber(discussion[showUnread ? 'unreadCount' : 'replyCount']())}
-          </span>
-        </div>
-      </div>
-    );
-  }
-
-  config(isInitialized) {
-    if (isInitialized) return;
-
-    // If we're on a touch device, set up the discussion row to be slidable.
-    // This allows the user to drag the row to either side of the screen to
-    // reveal controls.
-    if ('ontouchstart' in window) {
-      const slidableInstance = slidable(this.$().addClass('Slidable'));
-
-      this.$('.DiscussionListItem-controls').on('hidden.bs.dropdown', () => slidableInstance.reset());
-    }
-  }
-
-  /**
-   * Determine whether or not the discussion is currently being viewed.
-   *
-   * @return {Boolean}
-   */
-  active() {
-    const idParam = m.route.param('id');
-
-    return idParam && idParam.split('-')[0] === this.props.discussion.id();
-  }
-
-  /**
-   * Determine whether or not information about who started the discussion
-   * should be displayed instead of information about the most recent reply to
-   * the discussion.
-   *
-   * @return {Boolean}
-   */
-  showFirstPost() {
-    return ['newest', 'oldest'].indexOf(this.props.params.sort) !== -1;
-  }
-
-  /**
-   * Determine whether or not the number of replies should be shown instead of
-   * the number of unread posts.
-   *
-   * @return {Boolean}
-   */
-  showRepliesCount() {
-    return this.props.params.sort === 'replies';
-  }
-
-  /**
-   * Mark the discussion as read.
-   */
-  markAsRead() {
-    const discussion = this.props.discussion;
-
-    if (discussion.isUnread()) {
-      discussion.save({ lastReadPostNumber: discussion.lastPostNumber() });
-      m.redraw();
-    }
-  }
-
-  /**
-   * Build an item list of info for a discussion listing. By default this is
-   * just the first/last post indicator.
-   *
-   * @return {ItemList}
-   */
-  infoItems() {
-    const items = new ItemList();
-
-    if (this.props.params.q) {
-      const post = this.props.discussion.mostRelevantPost() || this.props.discussion.firstPost();
-
-      if (post && post.contentType() === 'comment') {
-        const excerpt = highlight(post.contentPlain(), this.highlightRegExp, 175);
-        items.add('excerpt', excerpt, -100);
-      }
-    } else {
-      items.add(
-        'terminalPost',
-        TerminalPost.component({
-          discussion: this.props.discussion,
-          lastPost: !this.showFirstPost(),
-        })
-      );
-    }
-
-    return items;
-  }
-}
diff --git a/js/old/forum/components/DiscussionPage.js b/js/old/forum/components/DiscussionPage.js
deleted file mode 100644
index aa686f7c9..000000000
--- a/js/old/forum/components/DiscussionPage.js
+++ /dev/null
@@ -1,302 +0,0 @@
-import Page from './Page';
-import ItemList from '../../common/utils/ItemList';
-import DiscussionHero from './DiscussionHero';
-import PostStream from './PostStream';
-import PostStreamScrubber from './PostStreamScrubber';
-import LoadingIndicator from '../../common/components/LoadingIndicator';
-import SplitDropdown from '../../common/components/SplitDropdown';
-import listItems from '../../common/helpers/listItems';
-import DiscussionControls from '../utils/DiscussionControls';
-
-/**
- * The `DiscussionPage` component displays a whole discussion page, including
- * the discussion list pane, the hero, the posts, and the sidebar.
- */
-export default class DiscussionPage extends Page {
-  init() {
-    super.init();
-
-    /**
-     * The discussion that is being viewed.
-     *
-     * @type {Discussion}
-     */
-    this.discussion = null;
-
-    /**
-     * The number of the first post that is currently visible in the viewport.
-     *
-     * @type {Integer}
-     */
-    this.near = null;
-
-    this.refresh();
-
-    // If the discussion list has been loaded, then we'll enable the pane (and
-    // hide it by default). Also, if we've just come from another discussion
-    // page, then we don't want Mithril to redraw the whole page – if it did,
-    // then the pane would which would be slow and would cause problems with
-    // event handlers.
-    if (app.cache.discussionList) {
-      app.pane.enable();
-      app.pane.hide();
-
-      if (app.previous instanceof DiscussionPage) {
-        m.redraw.strategy('diff');
-      }
-    }
-
-    app.history.push('discussion');
-
-    this.bodyClass = 'App--discussion';
-  }
-
-  onunload(e) {
-    // If we have routed to the same discussion as we were viewing previously,
-    // cancel the unloading of this controller and instead prompt the post
-    // stream to jump to the new 'near' param.
-    if (this.discussion) {
-      const idParam = m.route.param('id');
-
-      if (idParam && idParam.split('-')[0] === this.discussion.id()) {
-        e.preventDefault();
-
-        const near = m.route.param('near') || '1';
-
-        if (near !== String(this.near)) {
-          this.stream.goToNumber(near);
-        }
-
-        this.near = null;
-        return;
-      }
-    }
-
-    // If we are indeed navigating away from this discussion, then disable the
-    // discussion list pane. Also, if we're composing a reply to this
-    // discussion, minimize the composer – unless it's empty, in which case
-    // we'll just close it.
-    app.pane.disable();
-
-    if (app.composingReplyTo(this.discussion) && !app.composer.component.content()) {
-      app.composer.hide();
-    } else {
-      app.composer.minimize();
-    }
-  }
-
-  view() {
-    const discussion = this.discussion;
-
-    return (
-      <div className="DiscussionPage">
-        {app.cache.discussionList ? (
-          <div className="DiscussionPage-list" config={this.configPane.bind(this)}>
-            {!$('.App-navigation').is(':visible') ? app.cache.discussionList.render() : ''}
-          </div>
-        ) : (
-          ''
-        )}
-
-        <div className="DiscussionPage-discussion">
-          {discussion
-            ? [
-                DiscussionHero.component({ discussion }),
-                <div className="container">
-                  <nav className="DiscussionPage-nav">
-                    <ul>{listItems(this.sidebarItems().toArray())}</ul>
-                  </nav>
-                  <div className="DiscussionPage-stream">{this.stream.render()}</div>
-                </div>,
-              ]
-            : LoadingIndicator.component({ className: 'LoadingIndicator--block' })}
-        </div>
-      </div>
-    );
-  }
-
-  config(...args) {
-    super.config(...args);
-
-    if (this.discussion) {
-      app.setTitle(this.discussion.title());
-    }
-  }
-
-  /**
-   * Clear and reload the discussion.
-   */
-  refresh() {
-    this.near = m.route.param('near') || 0;
-    this.discussion = null;
-
-    const preloadedDiscussion = app.preloadedApiDocument();
-    if (preloadedDiscussion) {
-      // We must wrap this in a setTimeout because if we are mounting this
-      // component for the first time on page load, then any calls to m.redraw
-      // will be ineffective and thus any configs (scroll code) will be run
-      // before stuff is drawn to the page.
-      setTimeout(this.show.bind(this, preloadedDiscussion), 0);
-    } else {
-      const params = this.requestParams();
-
-      app.store.find('discussions', m.route.param('id').split('-')[0], params).then(this.show.bind(this));
-    }
-
-    m.lazyRedraw();
-  }
-
-  /**
-   * Get the parameters that should be passed in the API request to get the
-   * discussion.
-   *
-   * @return {Object}
-   */
-  requestParams() {
-    return {
-      page: { near: this.near },
-    };
-  }
-
-  /**
-   * Initialize the component to display the given discussion.
-   *
-   * @param {Discussion} discussion
-   */
-  show(discussion) {
-    this.discussion = discussion;
-
-    app.history.push('discussion', discussion.title());
-    app.setTitleCount(0);
-
-    // When the API responds with a discussion, it will also include a number of
-    // posts. Some of these posts are included because they are on the first
-    // page of posts we want to display (determined by the `near` parameter) –
-    // others may be included because due to other relationships introduced by
-    // extensions. We need to distinguish the two so we don't end up displaying
-    // the wrong posts. We do so by filtering out the posts that don't have
-    // the 'discussion' relationship linked, then sorting and splicing.
-    let includedPosts = [];
-    if (discussion.payload && discussion.payload.included) {
-      const discussionId = discussion.id();
-
-      includedPosts = discussion.payload.included
-        .filter(
-          (record) =>
-            record.type === 'posts' &&
-            record.relationships &&
-            record.relationships.discussion &&
-            record.relationships.discussion.data.id === discussionId
-        )
-        .map((record) => app.store.getById('posts', record.id))
-        .sort((a, b) => a.id() - b.id())
-        .slice(0, 20);
-    }
-
-    // Set up the post stream for this discussion, along with the first page of
-    // posts we want to display. Tell the stream to scroll down and highlight
-    // the specific post that was routed to.
-    this.stream = new PostStream({ discussion, includedPosts });
-    this.stream.on('positionChanged', this.positionChanged.bind(this));
-    this.stream.goToNumber(m.route.param('near') || (includedPosts[0] && includedPosts[0].number()), true);
-  }
-
-  /**
-   * Configure the discussion list pane.
-   *
-   * @param {DOMElement} element
-   * @param {Boolean} isInitialized
-   * @param {Object} context
-   */
-  configPane(element, isInitialized, context) {
-    if (isInitialized) return;
-
-    context.retain = true;
-
-    const $list = $(element);
-
-    // When the mouse enters and leaves the discussions pane, we want to show
-    // and hide the pane respectively. We also create a 10px 'hot edge' on the
-    // left of the screen to activate the pane.
-    const pane = app.pane;
-    $list.hover(pane.show.bind(pane), pane.onmouseleave.bind(pane));
-
-    const hotEdge = (e) => {
-      if (e.pageX < 10) pane.show();
-    };
-    $(document).on('mousemove', hotEdge);
-    context.onunload = () => $(document).off('mousemove', hotEdge);
-
-    // If the discussion we are viewing is listed in the discussion list, then
-    // we will make sure it is visible in the viewport – if it is not we will
-    // scroll the list down to it.
-    const $discussion = $list.find('.DiscussionListItem.active');
-    if ($discussion.length) {
-      const listTop = $list.offset().top;
-      const listBottom = listTop + $list.outerHeight();
-      const discussionTop = $discussion.offset().top;
-      const discussionBottom = discussionTop + $discussion.outerHeight();
-
-      if (discussionTop < listTop || discussionBottom > listBottom) {
-        $list.scrollTop($list.scrollTop() - listTop + discussionTop);
-      }
-    }
-  }
-
-  /**
-   * Build an item list for the contents of the sidebar.
-   *
-   * @return {ItemList}
-   */
-  sidebarItems() {
-    const items = new ItemList();
-
-    items.add(
-      'controls',
-      SplitDropdown.component({
-        children: DiscussionControls.controls(this.discussion, this).toArray(),
-        icon: 'fas fa-ellipsis-v',
-        className: 'App-primaryControl',
-        buttonClassName: 'Button--primary',
-      })
-    );
-
-    items.add(
-      'scrubber',
-      PostStreamScrubber.component({
-        stream: this.stream,
-        className: 'App-titleControl',
-      }),
-      -100
-    );
-
-    return items;
-  }
-
-  /**
-   * When the posts that are visible in the post stream change (i.e. the user
-   * scrolls up or down), then we update the URL and mark the posts as read.
-   *
-   * @param {Integer} startNumber
-   * @param {Integer} endNumber
-   */
-  positionChanged(startNumber, endNumber) {
-    const discussion = this.discussion;
-
-    // Construct a URL to this discussion with the updated position, then
-    // replace it into the window's history and our own history stack.
-    const url = app.route.discussion(discussion, (this.near = startNumber));
-
-    m.route(url, true);
-    window.history.replaceState(null, document.title, url);
-
-    app.history.push('discussion', discussion.title());
-
-    // If the user hasn't read past here before, then we'll update their read
-    // state and redraw.
-    if (app.session.user && endNumber > (discussion.lastReadPostNumber() || 0)) {
-      discussion.save({ lastReadPostNumber: endNumber });
-      m.redraw();
-    }
-  }
-}
diff --git a/js/old/forum/components/DiscussionRenamedNotification.js b/js/old/forum/components/DiscussionRenamedNotification.js
deleted file mode 100644
index 02900fbcd..000000000
--- a/js/old/forum/components/DiscussionRenamedNotification.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import Notification from './Notification';
-
-/**
- * The `DiscussionRenamedNotification` component displays a notification which
- * indicates that a discussion has had its title changed.
- *
- * ### Props
- *
- * - All of the props for Notification
- */
-export default class DiscussionRenamedNotification extends Notification {
-  icon() {
-    return 'fas fa-pencil-alt';
-  }
-
-  href() {
-    const notification = this.props.notification;
-
-    return app.route.discussion(notification.subject(), notification.content().postNumber);
-  }
-
-  content() {
-    return app.translator.trans('core.forum.notifications.discussion_renamed_text', { user: this.props.notification.fromUser() });
-  }
-}
diff --git a/js/old/forum/components/DiscussionRenamedPost.js b/js/old/forum/components/DiscussionRenamedPost.js
deleted file mode 100644
index 56cdb1545..000000000
--- a/js/old/forum/components/DiscussionRenamedPost.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import EventPost from './EventPost';
-import extractText from '../../common/utils/extractText';
-
-/**
- * The `DiscussionRenamedPost` component displays a discussion event post
- * indicating that the discussion has been renamed.
- *
- * ### Props
- *
- * - All of the props for EventPost
- */
-export default class DiscussionRenamedPost extends EventPost {
-  icon() {
-    return 'fas fa-pencil-alt';
-  }
-
-  description(data) {
-    const renamed = app.translator.trans('core.forum.post_stream.discussion_renamed_text', data);
-    const oldName = app.translator.trans('core.forum.post_stream.discussion_renamed_old_tooltip', data);
-
-    return <span title={extractText(oldName)}>{renamed}</span>;
-  }
-
-  descriptionData() {
-    const post = this.props.post;
-    const oldTitle = post.content()[0];
-    const newTitle = post.content()[1];
-
-    return {
-      old: oldTitle,
-      new: <strong className="DiscussionRenamedPost-new">{newTitle}</strong>,
-    };
-  }
-}
diff --git a/js/old/forum/components/DiscussionsSearchSource.js b/js/old/forum/components/DiscussionsSearchSource.js
deleted file mode 100644
index 8939ae775..000000000
--- a/js/old/forum/components/DiscussionsSearchSource.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import highlight from '../../common/helpers/highlight';
-import LinkButton from '../../common/components/LinkButton';
-
-/**
- * The `DiscussionsSearchSource` finds and displays discussion search results in
- * the search dropdown.
- *
- * @implements SearchSource
- */
-export default class DiscussionsSearchSource {
-  constructor() {
-    this.results = {};
-  }
-
-  search(query) {
-    query = query.toLowerCase();
-
-    this.results[query] = [];
-
-    const params = {
-      filter: { q: query },
-      page: { limit: 3 },
-      include: 'mostRelevantPost',
-    };
-
-    return app.store.find('discussions', params).then((results) => (this.results[query] = results));
-  }
-
-  view(query) {
-    query = query.toLowerCase();
-
-    const results = this.results[query] || [];
-
-    return [
-      <li className="Dropdown-header">{app.translator.trans('core.forum.search.discussions_heading')}</li>,
-      <li>
-        {LinkButton.component({
-          icon: 'fas fa-search',
-          children: app.translator.trans('core.forum.search.all_discussions_button', { query }),
-          href: app.route('index', { q: query }),
-        })}
-      </li>,
-      results.map((discussion) => {
-        const mostRelevantPost = discussion.mostRelevantPost();
-
-        return (
-          <li className="DiscussionSearchResult" data-index={'discussions' + discussion.id()}>
-            <a href={app.route.discussion(discussion, mostRelevantPost && mostRelevantPost.number())} config={m.route}>
-              <div className="DiscussionSearchResult-title">{highlight(discussion.title(), query)}</div>
-              {mostRelevantPost ? <div className="DiscussionSearchResult-excerpt">{highlight(mostRelevantPost.contentPlain(), query, 100)}</div> : ''}
-            </a>
-          </li>
-        );
-      }),
-    ];
-  }
-}
diff --git a/js/old/forum/components/DiscussionsUserPage.js b/js/old/forum/components/DiscussionsUserPage.js
deleted file mode 100644
index 616f01ea9..000000000
--- a/js/old/forum/components/DiscussionsUserPage.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import UserPage from './UserPage';
-import DiscussionList from './DiscussionList';
-
-/**
- * The `DiscussionsUserPage` component shows a discussion list inside of a user
- * page.
- */
-export default class DiscussionsUserPage extends UserPage {
-  init() {
-    super.init();
-
-    this.loadUser(m.route.param('username'));
-  }
-
-  content() {
-    return (
-      <div className="DiscussionsUserPage">
-        {DiscussionList.component({
-          params: {
-            q: 'author:' + this.user.username(),
-            sort: 'newest',
-          },
-        })}
-      </div>
-    );
-  }
-}
diff --git a/js/old/forum/components/EditPostComposer.js b/js/old/forum/components/EditPostComposer.js
deleted file mode 100644
index ba6c71107..000000000
--- a/js/old/forum/components/EditPostComposer.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import ComposerBody from './ComposerBody';
-import icon from '../../common/helpers/icon';
-
-function minimizeComposerIfFullScreen(e) {
-  if (app.composer.isFullScreen()) {
-    app.composer.minimize();
-    e.stopPropagation();
-  }
-}
-
-/**
- * The `EditPostComposer` component displays the composer content for editing a
- * post. It sets the initial content to the content of the post that is being
- * edited, and adds a header control to indicate which post is being edited.
- *
- * ### Props
- *
- * - All of the props for ComposerBody
- * - `post`
- */
-export default class EditPostComposer extends ComposerBody {
-  init() {
-    super.init();
-
-    this.editor.props.preview = (e) => {
-      minimizeComposerIfFullScreen(e);
-
-      m.route(app.route.post(this.props.post));
-    };
-  }
-
-  static initProps(props) {
-    super.initProps(props);
-
-    props.submitLabel = props.submitLabel || app.translator.trans('core.forum.composer_edit.submit_button');
-    props.confirmExit = props.confirmExit || app.translator.trans('core.forum.composer_edit.discard_confirmation');
-    props.originalContent = props.originalContent || props.post.content();
-    props.user = props.user || props.post.user();
-
-    props.post.editedContent = props.originalContent;
-  }
-
-  headerItems() {
-    const items = super.headerItems();
-    const post = this.props.post;
-
-    const routeAndMinimize = function (element, isInitialized) {
-      if (isInitialized) return;
-      $(element).on('click', minimizeComposerIfFullScreen);
-      m.route.apply(this, arguments);
-    };
-
-    items.add(
-      'title',
-      <h3>
-        {icon('fas fa-pencil-alt')}{' '}
-        <a href={app.route.discussion(post.discussion(), post.number())} config={routeAndMinimize}>
-          {app.translator.trans('core.forum.composer_edit.post_link', { number: post.number(), discussion: post.discussion().title() })}
-        </a>
-      </h3>
-    );
-
-    return items;
-  }
-
-  /**
-   * Get the data to submit to the server when the post is saved.
-   *
-   * @return {Object}
-   */
-  data() {
-    return {
-      content: this.content(),
-    };
-  }
-
-  onsubmit() {
-    this.loading = true;
-
-    const data = this.data();
-
-    this.props.post.save(data).then(() => app.composer.hide(), this.loaded.bind(this));
-  }
-}
diff --git a/js/old/forum/components/EditUserModal.js b/js/old/forum/components/EditUserModal.js
deleted file mode 100644
index 3ad31b059..000000000
--- a/js/old/forum/components/EditUserModal.js
+++ /dev/null
@@ -1,207 +0,0 @@
-import Modal from '../../common/components/Modal';
-import Button from '../../common/components/Button';
-import GroupBadge from '../../common/components/GroupBadge';
-import Group from '../../common/models/Group';
-import extractText from '../../common/utils/extractText';
-import ItemList from '../../common/utils/ItemList';
-
-/**
- * The `EditUserModal` component displays a modal dialog with a login form.
- */
-export default class EditUserModal extends Modal {
-  init() {
-    super.init();
-
-    const user = this.props.user;
-
-    this.username = m.prop(user.username() || '');
-    this.email = m.prop(user.email() || '');
-    this.isEmailConfirmed = m.prop(user.isEmailConfirmed() || false);
-    this.setPassword = m.prop(false);
-    this.password = m.prop(user.password() || '');
-    this.groups = {};
-
-    app.store
-      .all('groups')
-      .filter((group) => [Group.GUEST_ID, Group.MEMBER_ID].indexOf(group.id()) === -1)
-      .forEach((group) => (this.groups[group.id()] = m.prop(user.groups().indexOf(group) !== -1)));
-  }
-
-  className() {
-    return 'EditUserModal Modal--small';
-  }
-
-  title() {
-    return app.translator.trans('core.forum.edit_user.title');
-  }
-
-  content() {
-    return (
-      <div className="Modal-body">
-        <div className="Form">{this.fields().toArray()}</div>
-      </div>
-    );
-  }
-
-  fields() {
-    const items = new ItemList();
-
-    items.add(
-      'username',
-      <div className="Form-group">
-        <label>{app.translator.trans('core.forum.edit_user.username_heading')}</label>
-        <input className="FormControl" placeholder={extractText(app.translator.trans('core.forum.edit_user.username_label'))} bidi={this.username} />
-      </div>,
-      40
-    );
-
-    if (app.session.user !== this.props.user) {
-      items.add(
-        'email',
-        <div className="Form-group">
-          <label>{app.translator.trans('core.forum.edit_user.email_heading')}</label>
-          <div>
-            <input className="FormControl" placeholder={extractText(app.translator.trans('core.forum.edit_user.email_label'))} bidi={this.email} />
-          </div>
-          {!this.isEmailConfirmed() ? (
-            <div>
-              {Button.component({
-                className: 'Button Button--block',
-                children: app.translator.trans('core.forum.edit_user.activate_button'),
-                loading: this.loading,
-                onclick: this.activate.bind(this),
-              })}
-            </div>
-          ) : (
-            ''
-          )}
-        </div>,
-        30
-      );
-
-      items.add(
-        'password',
-        <div className="Form-group">
-          <label>{app.translator.trans('core.forum.edit_user.password_heading')}</label>
-          <div>
-            <label className="checkbox">
-              <input
-                type="checkbox"
-                onchange={(e) => {
-                  this.setPassword(e.target.checked);
-                  m.redraw(true);
-                  if (e.target.checked) this.$('[name=password]').select();
-                  m.redraw.strategy('none');
-                }}
-              />
-              {app.translator.trans('core.forum.edit_user.set_password_label')}
-            </label>
-            {this.setPassword() ? (
-              <input
-                className="FormControl"
-                type="password"
-                name="password"
-                placeholder={extractText(app.translator.trans('core.forum.edit_user.password_label'))}
-                bidi={this.password}
-              />
-            ) : (
-              ''
-            )}
-          </div>
-        </div>,
-        20
-      );
-    }
-
-    items.add(
-      'groups',
-      <div className="Form-group EditUserModal-groups">
-        <label>{app.translator.trans('core.forum.edit_user.groups_heading')}</label>
-        <div>
-          {Object.keys(this.groups)
-            .map((id) => app.store.getById('groups', id))
-            .map((group) => (
-              <label className="checkbox">
-                <input
-                  type="checkbox"
-                  bidi={this.groups[group.id()]}
-                  disabled={this.props.user.id() === '1' && group.id() === Group.ADMINISTRATOR_ID}
-                />
-                {GroupBadge.component({ group, label: '' })} {group.nameSingular()}
-              </label>
-            ))}
-        </div>
-      </div>,
-      10
-    );
-
-    items.add(
-      'submit',
-      <div className="Form-group">
-        {Button.component({
-          className: 'Button Button--primary',
-          type: 'submit',
-          loading: this.loading,
-          children: app.translator.trans('core.forum.edit_user.submit_button'),
-        })}
-      </div>,
-      -10
-    );
-
-    return items;
-  }
-
-  activate() {
-    this.loading = true;
-    const data = {
-      username: this.username(),
-      isEmailConfirmed: true,
-    };
-    this.props.user
-      .save(data, { errorHandler: this.onerror.bind(this) })
-      .then(() => {
-        this.isEmailConfirmed(true);
-        this.loading = false;
-        m.redraw();
-      })
-      .catch(() => {
-        this.loading = false;
-        m.redraw();
-      });
-  }
-
-  data() {
-    const groups = Object.keys(this.groups)
-      .filter((id) => this.groups[id]())
-      .map((id) => app.store.getById('groups', id));
-
-    const data = {
-      username: this.username(),
-      relationships: { groups },
-    };
-
-    if (app.session.user !== this.props.user) {
-      data.email = this.email();
-    }
-
-    if (this.setPassword()) {
-      data.password = this.password();
-    }
-
-    return data;
-  }
-
-  onsubmit(e) {
-    e.preventDefault();
-
-    this.loading = true;
-
-    this.props.user
-      .save(this.data(), { errorHandler: this.onerror.bind(this) })
-      .then(this.hide.bind(this))
-      .catch(() => {
-        this.loading = false;
-        m.redraw();
-      });
-  }
-}
diff --git a/js/old/forum/components/EventPost.js b/js/old/forum/components/EventPost.js
deleted file mode 100644
index a39ec4065..000000000
--- a/js/old/forum/components/EventPost.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import Post from './Post';
-import { ucfirst } from '../../common/utils/string';
-import usernameHelper from '../../common/helpers/username';
-import icon from '../../common/helpers/icon';
-
-/**
- * The `EventPost` component displays a post which indicating a discussion
- * event, like a discussion being renamed or stickied. Subclasses must implement
- * the `icon` and `description` methods.
- *
- * ### Props
- *
- * - All of the props for `Post`
- *
- * @abstract
- */
-export default class EventPost extends Post {
-  attrs() {
-    const attrs = super.attrs();
-
-    attrs.className = (attrs.className || '') + ' EventPost ' + ucfirst(this.props.post.contentType()) + 'Post';
-
-    return attrs;
-  }
-
-  content() {
-    const user = this.props.post.user();
-    const username = usernameHelper(user);
-    const data = Object.assign(this.descriptionData(), {
-      user,
-      username: user ? (
-        <a className="EventPost-user" href={app.route.user(user)} config={m.route}>
-          {username}
-        </a>
-      ) : (
-        username
-      ),
-    });
-
-    return super.content().concat([icon(this.icon(), { className: 'EventPost-icon' }), <div class="EventPost-info">{this.description(data)}</div>]);
-  }
-
-  /**
-   * Get the name of the event icon.
-   *
-   * @return {String}
-   */
-  icon() {
-    return '';
-  }
-
-  /**
-   * Get the description text for the event.
-   *
-   * @param {Object} data
-   * @return {String|Object} The description to render in the DOM
-   */
-  description(data) {
-    return app.translator.transChoice(this.descriptionKey(), data.count, data);
-  }
-
-  /**
-   * Get the translation key for the description of the event.
-   *
-   * @return {String}
-   */
-  descriptionKey() {
-    return '';
-  }
-
-  /**
-   * Get the translation data for the description of the event.
-   *
-   * @return {Object}
-   */
-  descriptionData() {
-    return {};
-  }
-}
diff --git a/js/old/forum/components/ForgotPasswordModal.js b/js/old/forum/components/ForgotPasswordModal.js
deleted file mode 100644
index 4b443e92e..000000000
--- a/js/old/forum/components/ForgotPasswordModal.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import Modal from '../../common/components/Modal';
-import Alert from '../../common/components/Alert';
-import Button from '../../common/components/Button';
-import extractText from '../../common/utils/extractText';
-
-/**
- * The `ForgotPasswordModal` component displays a modal which allows the user to
- * enter their email address and request a link to reset their password.
- *
- * ### Props
- *
- * - `email`
- */
-export default class ForgotPasswordModal extends Modal {
-  init() {
-    super.init();
-
-    /**
-     * The value of the email input.
-     *
-     * @type {Function}
-     */
-    this.email = m.prop(this.props.email || '');
-
-    /**
-     * Whether or not the password reset email was sent successfully.
-     *
-     * @type {Boolean}
-     */
-    this.success = false;
-  }
-
-  className() {
-    return 'ForgotPasswordModal Modal--small';
-  }
-
-  title() {
-    return app.translator.trans('core.forum.forgot_password.title');
-  }
-
-  content() {
-    if (this.success) {
-      return (
-        <div className="Modal-body">
-          <div className="Form Form--centered">
-            <p className="helpText">{app.translator.trans('core.forum.forgot_password.email_sent_message')}</p>
-            <div className="Form-group">
-              <Button className="Button Button--primary Button--block" onclick={this.hide.bind(this)}>
-                {app.translator.trans('core.forum.forgot_password.dismiss_button')}
-              </Button>
-            </div>
-          </div>
-        </div>
-      );
-    }
-
-    return (
-      <div className="Modal-body">
-        <div className="Form Form--centered">
-          <p className="helpText">{app.translator.trans('core.forum.forgot_password.text')}</p>
-          <div className="Form-group">
-            <input
-              className="FormControl"
-              name="email"
-              type="email"
-              placeholder={extractText(app.translator.trans('core.forum.forgot_password.email_placeholder'))}
-              value={this.email()}
-              onchange={m.withAttr('value', this.email)}
-              disabled={this.loading}
-            />
-          </div>
-          <div className="Form-group">
-            {Button.component({
-              className: 'Button Button--primary Button--block',
-              type: 'submit',
-              loading: this.loading,
-              children: app.translator.trans('core.forum.forgot_password.submit_button'),
-            })}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  onsubmit(e) {
-    e.preventDefault();
-
-    this.loading = true;
-
-    app
-      .request({
-        method: 'POST',
-        url: app.forum.attribute('apiUrl') + '/forgot',
-        data: { email: this.email() },
-        errorHandler: this.onerror.bind(this),
-      })
-      .then(() => {
-        this.success = true;
-        this.alert = null;
-      })
-      .catch(() => {})
-      .then(this.loaded.bind(this));
-  }
-
-  onerror(error) {
-    if (error.status === 404) {
-      error.alert.props.children = app.translator.trans('core.forum.forgot_password.not_found_message');
-    }
-
-    super.onerror(error);
-  }
-}
diff --git a/js/old/forum/components/HeaderPrimary.js b/js/old/forum/components/HeaderPrimary.js
deleted file mode 100644
index 5a87ff6e0..000000000
--- a/js/old/forum/components/HeaderPrimary.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import Component from '../../common/Component';
-import ItemList from '../../common/utils/ItemList';
-import listItems from '../../common/helpers/listItems';
-
-/**
- * The `HeaderPrimary` component displays primary header controls. On the
- * default skin, these are shown just to the right of the forum title.
- */
-export default class HeaderPrimary extends Component {
-  view() {
-    return <ul className="Header-controls">{listItems(this.items().toArray())}</ul>;
-  }
-
-  config(isInitialized, context) {
-    // Since this component is 'above' the content of the page (that is, it is a
-    // part of the global UI that persists between routes), we will flag the DOM
-    // to be retained across route changes.
-    context.retain = true;
-  }
-
-  /**
-   * Build an item list for the controls.
-   *
-   * @return {ItemList}
-   */
-  items() {
-    return new ItemList();
-  }
-}
diff --git a/js/old/forum/components/HeaderSecondary.js b/js/old/forum/components/HeaderSecondary.js
deleted file mode 100644
index 93dd3c6b0..000000000
--- a/js/old/forum/components/HeaderSecondary.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import Component from '../../common/Component';
-import Button from '../../common/components/Button';
-import LogInModal from './LogInModal';
-import SignUpModal from './SignUpModal';
-import SessionDropdown from './SessionDropdown';
-import SelectDropdown from '../../common/components/SelectDropdown';
-import NotificationsDropdown from './NotificationsDropdown';
-import ItemList from '../../common/utils/ItemList';
-import listItems from '../../common/helpers/listItems';
-
-/**
- * The `HeaderSecondary` component displays secondary header controls, such as
- * the search box and the user menu. On the default skin, these are shown on the
- * right side of the header.
- */
-export default class HeaderSecondary extends Component {
-  view() {
-    return <ul className="Header-controls">{listItems(this.items().toArray())}</ul>;
-  }
-
-  config(isInitialized, context) {
-    // Since this component is 'above' the content of the page (that is, it is a
-    // part of the global UI that persists between routes), we will flag the DOM
-    // to be retained across route changes.
-    context.retain = true;
-  }
-
-  /**
-   * Build an item list for the controls.
-   *
-   * @return {ItemList}
-   */
-  items() {
-    const items = new ItemList();
-
-    items.add('search', app.search, 30);
-
-    if (app.forum.attribute('showLanguageSelector') && Object.keys(app.data.locales).length > 1) {
-      const locales = [];
-
-      for (const locale in app.data.locales) {
-        locales.push(
-          Button.component({
-            active: app.data.locale === locale,
-            children: app.data.locales[locale],
-            icon: app.data.locale === locale ? 'fas fa-check' : true,
-            onclick: () => {
-              if (app.session.user) {
-                app.session.user.savePreferences({ locale }).then(() => window.location.reload());
-              } else {
-                document.cookie = `locale=${locale}; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT`;
-                window.location.reload();
-              }
-            },
-          })
-        );
-      }
-
-      items.add(
-        'locale',
-        SelectDropdown.component({
-          children: locales,
-          buttonClassName: 'Button Button--link',
-        }),
-        20
-      );
-    }
-
-    if (app.session.user) {
-      items.add('notifications', NotificationsDropdown.component(), 10);
-      items.add('session', SessionDropdown.component(), 0);
-    } else {
-      if (app.forum.attribute('allowSignUp')) {
-        items.add(
-          'signUp',
-          Button.component({
-            children: app.translator.trans('core.forum.header.sign_up_link'),
-            className: 'Button Button--link',
-            onclick: () => app.modal.show(new SignUpModal()),
-          }),
-          10
-        );
-      }
-
-      items.add(
-        'logIn',
-        Button.component({
-          children: app.translator.trans('core.forum.header.log_in_link'),
-          className: 'Button Button--link',
-          onclick: () => app.modal.show(new LogInModal()),
-        }),
-        0
-      );
-    }
-
-    return items;
-  }
-}
diff --git a/js/old/forum/components/IndexPage.js b/js/old/forum/components/IndexPage.js
deleted file mode 100644
index 9e399a8c8..000000000
--- a/js/old/forum/components/IndexPage.js
+++ /dev/null
@@ -1,385 +0,0 @@
-import { extend } from '../../common/extend';
-import Page from './Page';
-import ItemList from '../../common/utils/ItemList';
-import listItems from '../../common/helpers/listItems';
-import icon from '../../common/helpers/icon';
-import DiscussionList from './DiscussionList';
-import WelcomeHero from './WelcomeHero';
-import DiscussionComposer from './DiscussionComposer';
-import LogInModal from './LogInModal';
-import DiscussionPage from './DiscussionPage';
-import Dropdown from '../../common/components/Dropdown';
-import Button from '../../common/components/Button';
-import LinkButton from '../../common/components/LinkButton';
-import SelectDropdown from '../../common/components/SelectDropdown';
-
-/**
- * The `IndexPage` component displays the index page, including the welcome
- * hero, the sidebar, and the discussion list.
- */
-export default class IndexPage extends Page {
-  init() {
-    super.init();
-
-    // If the user is returning from a discussion page, then take note of which
-    // discussion they have just visited. After the view is rendered, we will
-    // scroll down so that this discussion is in view.
-    if (app.previous instanceof DiscussionPage) {
-      this.lastDiscussion = app.previous.discussion;
-    }
-
-    // If the user is coming from the discussion list, then they have either
-    // just switched one of the parameters (filter, sort, search) or they
-    // probably want to refresh the results. We will clear the discussion list
-    // cache so that results are reloaded.
-    if (app.previous instanceof IndexPage) {
-      app.cache.discussionList = null;
-    }
-
-    const params = this.params();
-
-    if (app.cache.discussionList) {
-      // Compare the requested parameters (sort, search query) to the ones that
-      // are currently present in the cached discussion list. If they differ, we
-      // will clear the cache and set up a new discussion list component with
-      // the new parameters.
-      Object.keys(params).some((key) => {
-        if (app.cache.discussionList.props.params[key] !== params[key]) {
-          app.cache.discussionList = null;
-          return true;
-        }
-      });
-    }
-
-    if (!app.cache.discussionList) {
-      app.cache.discussionList = new DiscussionList({ params });
-    }
-
-    app.history.push('index', app.translator.trans('core.forum.header.back_to_index_tooltip'));
-
-    this.bodyClass = 'App--index';
-  }
-
-  onunload() {
-    // Save the scroll position so we can restore it when we return to the
-    // discussion list.
-    app.cache.scrollTop = $(window).scrollTop();
-  }
-
-  view() {
-    return (
-      <div className="IndexPage">
-        {this.hero()}
-        <div className="container">
-          <div className="sideNavContainer">
-            <nav className="IndexPage-nav sideNav">
-              <ul>{listItems(this.sidebarItems().toArray())}</ul>
-            </nav>
-            <div className="IndexPage-results sideNavOffset">
-              <div className="IndexPage-toolbar">
-                <ul className="IndexPage-toolbar-view">{listItems(this.viewItems().toArray())}</ul>
-                <ul className="IndexPage-toolbar-action">{listItems(this.actionItems().toArray())}</ul>
-              </div>
-              {app.cache.discussionList.render()}
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  config(isInitialized, context) {
-    super.config(...arguments);
-
-    if (isInitialized) return;
-
-    extend(context, 'onunload', () => $('#app').css('min-height', ''));
-
-    app.setTitle('');
-    app.setTitleCount(0);
-
-    // Work out the difference between the height of this hero and that of the
-    // previous hero. Maintain the same scroll position relative to the bottom
-    // of the hero so that the sidebar doesn't jump around.
-    const oldHeroHeight = app.cache.heroHeight;
-    const heroHeight = (app.cache.heroHeight = this.$('.Hero').outerHeight() || 0);
-    const scrollTop = app.cache.scrollTop;
-
-    $('#app').css('min-height', $(window).height() + heroHeight);
-
-    // Scroll to the remembered position. We do this after a short delay so that
-    // it happens after the browser has done its own "back button" scrolling,
-    // which isn't right. https://github.com/flarum/core/issues/835
-    const scroll = () => $(window).scrollTop(scrollTop - oldHeroHeight + heroHeight);
-    scroll();
-    setTimeout(scroll, 1);
-
-    // If we've just returned from a discussion page, then the constructor will
-    // have set the `lastDiscussion` property. If this is the case, we want to
-    // scroll down to that discussion so that it's in view.
-    if (this.lastDiscussion) {
-      const $discussion = this.$(`.DiscussionListItem[data-id="${this.lastDiscussion.id()}"]`);
-
-      if ($discussion.length) {
-        const indexTop = $('#header').outerHeight();
-        const indexBottom = $(window).height();
-        const discussionTop = $discussion.offset().top;
-        const discussionBottom = discussionTop + $discussion.outerHeight();
-
-        if (discussionTop < scrollTop + indexTop || discussionBottom > scrollTop + indexBottom) {
-          $(window).scrollTop(discussionTop - indexTop);
-        }
-      }
-    }
-  }
-
-  /**
-   * Get the component to display as the hero.
-   *
-   * @return {MithrilComponent}
-   */
-  hero() {
-    return WelcomeHero.component();
-  }
-
-  /**
-   * Build an item list for the sidebar of the index page. By default this is a
-   * "New Discussion" button, and then a DropdownSelect component containing a
-   * list of navigation items.
-   *
-   * @return {ItemList}
-   */
-  sidebarItems() {
-    const items = new ItemList();
-    const canStartDiscussion = app.forum.attribute('canStartDiscussion') || !app.session.user;
-
-    items.add(
-      'newDiscussion',
-      Button.component({
-        children: app.translator.trans(
-          canStartDiscussion ? 'core.forum.index.start_discussion_button' : 'core.forum.index.cannot_start_discussion_button'
-        ),
-        icon: 'fas fa-edit',
-        className: 'Button Button--primary IndexPage-newDiscussion',
-        itemClassName: 'App-primaryControl',
-        onclick: this.newDiscussionAction.bind(this),
-        disabled: !canStartDiscussion,
-      })
-    );
-
-    items.add(
-      'nav',
-      SelectDropdown.component({
-        children: this.navItems(this).toArray(),
-        buttonClassName: 'Button',
-        className: 'App-titleControl',
-      })
-    );
-
-    return items;
-  }
-
-  /**
-   * Build an item list for the navigation in the sidebar of the index page. By
-   * default this is just the 'All Discussions' link.
-   *
-   * @return {ItemList}
-   */
-  navItems() {
-    const items = new ItemList();
-    const params = this.stickyParams();
-
-    items.add(
-      'allDiscussions',
-      LinkButton.component({
-        href: app.route('index', params),
-        children: app.translator.trans('core.forum.index.all_discussions_link'),
-        icon: 'far fa-comments',
-      }),
-      100
-    );
-
-    return items;
-  }
-
-  /**
-   * Build an item list for the part of the toolbar which is concerned with how
-   * the results are displayed. By default this is just a select box to change
-   * the way discussions are sorted.
-   *
-   * @return {ItemList}
-   */
-  viewItems() {
-    const items = new ItemList();
-    const sortMap = app.cache.discussionList.sortMap();
-
-    const sortOptions = {};
-    for (const i in sortMap) {
-      sortOptions[i] = app.translator.trans('core.forum.index_sort.' + i + '_button');
-    }
-
-    items.add(
-      'sort',
-      Dropdown.component({
-        buttonClassName: 'Button',
-        label: sortOptions[this.params().sort] || Object.keys(sortMap).map((key) => sortOptions[key])[0],
-        children: Object.keys(sortOptions).map((value) => {
-          const label = sortOptions[value];
-          const active = (this.params().sort || Object.keys(sortMap)[0]) === value;
-
-          return Button.component({
-            children: label,
-            icon: active ? 'fas fa-check' : true,
-            onclick: this.changeSort.bind(this, value),
-            active: active,
-          });
-        }),
-      })
-    );
-
-    return items;
-  }
-
-  /**
-   * Build an item list for the part of the toolbar which is about taking action
-   * on the results. By default this is just a "mark all as read" button.
-   *
-   * @return {ItemList}
-   */
-  actionItems() {
-    const items = new ItemList();
-
-    items.add(
-      'refresh',
-      Button.component({
-        title: app.translator.trans('core.forum.index.refresh_tooltip'),
-        icon: 'fas fa-sync',
-        className: 'Button Button--icon',
-        onclick: () => {
-          app.cache.discussionList.refresh();
-          if (app.session.user) {
-            app.store.find('users', app.session.user.id());
-            m.redraw();
-          }
-        },
-      })
-    );
-
-    if (app.session.user) {
-      items.add(
-        'markAllAsRead',
-        Button.component({
-          title: app.translator.trans('core.forum.index.mark_all_as_read_tooltip'),
-          icon: 'fas fa-check',
-          className: 'Button Button--icon',
-          onclick: this.markAllAsRead.bind(this),
-        })
-      );
-    }
-
-    return items;
-  }
-
-  /**
-   * Return the current search query, if any. This is implemented to activate
-   * the search box in the header.
-   *
-   * @see Search
-   * @return {String}
-   */
-  searching() {
-    return this.params().q;
-  }
-
-  /**
-   * Redirect to the index page without a search filter. This is called when the
-   * 'x' is clicked in the search box in the header.
-   *
-   * @see Search
-   */
-  clearSearch() {
-    const params = this.params();
-    delete params.q;
-
-    m.route(app.route(this.props.routeName, params));
-  }
-
-  /**
-   * Redirect to the index page using the given sort parameter.
-   *
-   * @param {String} sort
-   */
-  changeSort(sort) {
-    const params = this.params();
-
-    if (sort === Object.keys(app.cache.discussionList.sortMap())[0]) {
-      delete params.sort;
-    } else {
-      params.sort = sort;
-    }
-
-    m.route(app.route(this.props.routeName, params));
-  }
-
-  /**
-   * Get URL parameters that stick between filter changes.
-   *
-   * @return {Object}
-   */
-  stickyParams() {
-    return {
-      sort: m.route.param('sort'),
-      q: m.route.param('q'),
-    };
-  }
-
-  /**
-   * Get parameters to pass to the DiscussionList component.
-   *
-   * @return {Object}
-   */
-  params() {
-    const params = this.stickyParams();
-
-    params.filter = m.route.param('filter');
-
-    return params;
-  }
-
-  /**
-   * Open the composer for a new discussion or prompt the user to login.
-   *
-   * @return {Promise}
-   */
-  newDiscussionAction() {
-    const deferred = m.deferred();
-
-    if (app.session.user) {
-      const component = new DiscussionComposer({ user: app.session.user });
-
-      app.composer.load(component);
-      app.composer.show();
-
-      deferred.resolve(component);
-    } else {
-      deferred.reject();
-
-      app.modal.show(new LogInModal());
-    }
-
-    return deferred.promise;
-  }
-
-  /**
-   * Mark all discussions as read.
-   *
-   * @return void
-   */
-  markAllAsRead() {
-    const confirmation = confirm(app.translator.trans('core.forum.index.mark_all_as_read_confirmation'));
-
-    if (confirmation) {
-      app.session.user.save({ markedAllAsReadAt: new Date() });
-    }
-  }
-}
diff --git a/js/old/forum/components/LoadingPost.js b/js/old/forum/components/LoadingPost.js
deleted file mode 100644
index c902ec883..000000000
--- a/js/old/forum/components/LoadingPost.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import Component from '../../common/Component';
-import avatar from '../../common/helpers/avatar';
-
-/**
- * The `LoadingPost` component shows a placeholder that looks like a post,
- * indicating that the post is loading.
- */
-export default class LoadingPost extends Component {
-  view() {
-    return (
-      <div className="Post CommentPost LoadingPost">
-        <header className="Post-header">
-          {avatar(null, { className: 'PostUser-avatar' })}
-          <div className="fakeText" />
-        </header>
-
-        <div className="Post-body">
-          <div className="fakeText" />
-          <div className="fakeText" />
-          <div className="fakeText" />
-        </div>
-      </div>
-    );
-  }
-}
diff --git a/js/old/forum/components/LogInButton.js b/js/old/forum/components/LogInButton.js
deleted file mode 100644
index dfbcaedd6..000000000
--- a/js/old/forum/components/LogInButton.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Button from '../../common/components/Button';
-
-/**
- * The `LogInButton` component displays a social login button which will open
- * a popup window containing the specified path.
- *
- * ### Props
- *
- * - `path`
- */
-export default class LogInButton extends Button {
-  static initProps(props) {
-    props.className = (props.className || '') + ' LogInButton';
-
-    props.onclick = function () {
-      const width = 580;
-      const height = 400;
-      const $window = $(window);
-
-      window.open(
-        app.forum.attribute('baseUrl') + props.path,
-        'logInPopup',
-        `width=${width},` +
-          `height=${height},` +
-          `top=${$window.height() / 2 - height / 2},` +
-          `left=${$window.width() / 2 - width / 2},` +
-          'status=no,scrollbars=yes,resizable=no'
-      );
-    };
-
-    super.initProps(props);
-  }
-}
diff --git a/js/old/forum/components/LogInButtons.js b/js/old/forum/components/LogInButtons.js
deleted file mode 100644
index 60f4b4d17..000000000
--- a/js/old/forum/components/LogInButtons.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import Component from '../../common/Component';
-import ItemList from '../../common/utils/ItemList';
-
-/**
- * The `LogInButtons` component displays a collection of social login buttons.
- */
-export default class LogInButtons extends Component {
-  view() {
-    return <div className="LogInButtons">{this.items().toArray()}</div>;
-  }
-
-  /**
-   * Build a list of LogInButton components.
-   *
-   * @return {ItemList}
-   * @public
-   */
-  items() {
-    return new ItemList();
-  }
-}
diff --git a/js/old/forum/components/LogInModal.js b/js/old/forum/components/LogInModal.js
deleted file mode 100644
index a6d87230e..000000000
--- a/js/old/forum/components/LogInModal.js
+++ /dev/null
@@ -1,187 +0,0 @@
-import Modal from '../../common/components/Modal';
-import ForgotPasswordModal from './ForgotPasswordModal';
-import SignUpModal from './SignUpModal';
-import Button from '../../common/components/Button';
-import LogInButtons from './LogInButtons';
-import extractText from '../../common/utils/extractText';
-import ItemList from '../../common/utils/ItemList';
-
-/**
- * The `LogInModal` component displays a modal dialog with a login form.
- *
- * ### Props
- *
- * - `identification`
- * - `password`
- */
-export default class LogInModal extends Modal {
-  init() {
-    super.init();
-
-    /**
-     * The value of the identification input.
-     *
-     * @type {Function}
-     */
-    this.identification = m.prop(this.props.identification || '');
-
-    /**
-     * The value of the password input.
-     *
-     * @type {Function}
-     */
-    this.password = m.prop(this.props.password || '');
-
-    /**
-     * The value of the remember me input.
-     *
-     * @type {Function}
-     */
-    this.remember = m.prop(!!this.props.remember);
-  }
-
-  className() {
-    return 'LogInModal Modal--small';
-  }
-
-  title() {
-    return app.translator.trans('core.forum.log_in.title');
-  }
-
-  content() {
-    return [<div className="Modal-body">{this.body()}</div>, <div className="Modal-footer">{this.footer()}</div>];
-  }
-
-  body() {
-    return [<LogInButtons />, <div className="Form Form--centered">{this.fields().toArray()}</div>];
-  }
-
-  fields() {
-    const items = new ItemList();
-
-    items.add(
-      'identification',
-      <div className="Form-group">
-        <input
-          className="FormControl"
-          name="identification"
-          type="text"
-          placeholder={extractText(app.translator.trans('core.forum.log_in.username_or_email_placeholder'))}
-          bidi={this.identification}
-          disabled={this.loading}
-        />
-      </div>,
-      30
-    );
-
-    items.add(
-      'password',
-      <div className="Form-group">
-        <input
-          className="FormControl"
-          name="password"
-          type="password"
-          placeholder={extractText(app.translator.trans('core.forum.log_in.password_placeholder'))}
-          bidi={this.password}
-          disabled={this.loading}
-        />
-      </div>,
-      20
-    );
-
-    items.add(
-      'remember',
-      <div className="Form-group">
-        <div>
-          <label className="checkbox">
-            <input type="checkbox" bidi={this.remember} disabled={this.loading} />
-            {app.translator.trans('core.forum.log_in.remember_me_label')}
-          </label>
-        </div>
-      </div>,
-      10
-    );
-
-    items.add(
-      'submit',
-      <div className="Form-group">
-        {Button.component({
-          className: 'Button Button--primary Button--block',
-          type: 'submit',
-          loading: this.loading,
-          children: app.translator.trans('core.forum.log_in.submit_button'),
-        })}
-      </div>,
-      -10
-    );
-
-    return items;
-  }
-
-  footer() {
-    return [
-      <p className="LogInModal-forgotPassword">
-        <a onclick={this.forgotPassword.bind(this)}>{app.translator.trans('core.forum.log_in.forgot_password_link')}</a>
-      </p>,
-
-      app.forum.attribute('allowSignUp') ? (
-        <p className="LogInModal-signUp">{app.translator.trans('core.forum.log_in.sign_up_text', { a: <a onclick={this.signUp.bind(this)} /> })}</p>
-      ) : (
-        ''
-      ),
-    ];
-  }
-
-  /**
-   * Open the forgot password modal, prefilling it with an email if the user has
-   * entered one.
-   *
-   * @public
-   */
-  forgotPassword() {
-    const email = this.identification();
-    const props = email.indexOf('@') !== -1 ? { email } : undefined;
-
-    app.modal.show(new ForgotPasswordModal(props));
-  }
-
-  /**
-   * Open the sign up modal, prefilling it with an email/username/password if
-   * the user has entered one.
-   *
-   * @public
-   */
-  signUp() {
-    const props = { password: this.password() };
-    const identification = this.identification();
-    props[identification.indexOf('@') !== -1 ? 'email' : 'username'] = identification;
-
-    app.modal.show(new SignUpModal(props));
-  }
-
-  onready() {
-    this.$('[name=' + (this.identification() ? 'password' : 'identification') + ']').select();
-  }
-
-  onsubmit(e) {
-    e.preventDefault();
-
-    this.loading = true;
-
-    const identification = this.identification();
-    const password = this.password();
-    const remember = this.remember();
-
-    app.session
-      .login({ identification, password, remember }, { errorHandler: this.onerror.bind(this) })
-      .then(() => window.location.reload(), this.loaded.bind(this));
-  }
-
-  onerror(error) {
-    if (error.status === 401) {
-      error.alert.props.children = app.translator.trans('core.forum.log_in.invalid_login_message');
-    }
-
-    super.onerror(error);
-  }
-}
diff --git a/js/old/forum/components/Notification.js b/js/old/forum/components/Notification.js
deleted file mode 100644
index 771550dea..000000000
--- a/js/old/forum/components/Notification.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import Component from '../../common/Component';
-import avatar from '../../common/helpers/avatar';
-import icon from '../../common/helpers/icon';
-import humanTime from '../../common/helpers/humanTime';
-import Button from '../../common/components/Button';
-
-/**
- * The `Notification` component abstract displays a single notification.
- * Subclasses should implement the `icon`, `href`, and `content` methods.
- *
- * ### Props
- *
- * - `notification`
- *
- * @abstract
- */
-export default class Notification extends Component {
-  view() {
-    const notification = this.props.notification;
-    const href = this.href();
-
-    return (
-      <a
-        className={'Notification Notification--' + notification.contentType() + ' ' + (!notification.isRead() ? 'unread' : '')}
-        href={href}
-        config={function (element, isInitialized) {
-          if (href.indexOf('://') === -1) m.route.apply(this, arguments);
-
-          if (!isInitialized) $(element).click(this.markAsRead.bind(this));
-        }}
-      >
-        {!notification.isRead() &&
-          Button.component({
-            className: 'Notification-action Button Button--icon Button--link',
-            icon: 'fas fa-check',
-            title: app.translator.trans('core.forum.notifications.mark_as_read_tooltip'),
-            onclick: (e) => {
-              e.preventDefault();
-              e.stopPropagation();
-
-              this.markAsRead();
-            },
-          })}
-        {avatar(notification.fromUser())}
-        {icon(this.icon(), { className: 'Notification-icon' })}
-        <span className="Notification-content">{this.content()}</span>
-        {humanTime(notification.createdAt())}
-        <div className="Notification-excerpt">{this.excerpt()}</div>
-      </a>
-    );
-  }
-
-  /**
-   * Get the name of the icon that should be displayed in the notification.
-   *
-   * @return {String}
-   * @abstract
-   */
-  icon() {}
-
-  /**
-   * Get the URL that the notification should link to.
-   *
-   * @return {String}
-   * @abstract
-   */
-  href() {}
-
-  /**
-   * Get the content of the notification.
-   *
-   * @return {VirtualElement}
-   * @abstract
-   */
-  content() {}
-
-  /**
-   * Get the excerpt of the notification.
-   *
-   * @return {VirtualElement}
-   * @abstract
-   */
-  excerpt() {}
-
-  /**
-   * Mark the notification as read.
-   */
-  markAsRead() {
-    if (this.props.notification.isRead()) return;
-
-    app.session.user.pushAttributes({ unreadNotificationCount: app.session.user.unreadNotificationCount() - 1 });
-
-    this.props.notification.save({ isRead: true });
-  }
-}
diff --git a/js/old/forum/components/NotificationGrid.js b/js/old/forum/components/NotificationGrid.js
deleted file mode 100644
index 5ff9047af..000000000
--- a/js/old/forum/components/NotificationGrid.js
+++ /dev/null
@@ -1,215 +0,0 @@
-import Component from '../../common/Component';
-import Checkbox from '../../common/components/Checkbox';
-import icon from '../../common/helpers/icon';
-import ItemList from '../../common/utils/ItemList';
-
-/**
- * The `NotificationGrid` component displays a table of notification types and
- * methods, allowing the user to toggle each combination.
- *
- * ### Props
- *
- * - `user`
- */
-export default class NotificationGrid extends Component {
-  init() {
-    /**
-     * Information about the available notification methods.
-     *
-     * @type {Array}
-     */
-    this.methods = this.notificationMethods().toArray();
-
-    /**
-     * A map of notification type-method combinations to the checkbox instances
-     * that represent them.
-     *
-     * @type {Object}
-     */
-    this.inputs = {};
-
-    /**
-     * Information about the available notification types.
-     *
-     * @type {Array}
-     */
-    this.types = this.notificationTypes().toArray();
-
-    // For each of the notification type-method combinations, create and store a
-    // new checkbox component instance, which we will render in the view.
-    this.types.forEach((type) => {
-      this.methods.forEach((method) => {
-        const key = this.preferenceKey(type.name, method.name);
-        const preference = this.props.user.preferences()[key];
-
-        this.inputs[key] = new Checkbox({
-          state: !!preference,
-          disabled: typeof preference === 'undefined',
-          onchange: () => this.toggle([key]),
-        });
-      });
-    });
-  }
-
-  view() {
-    return (
-      <table className="NotificationGrid">
-        <thead>
-          <tr>
-            <td />
-            {this.methods.map((method) => (
-              <th className="NotificationGrid-groupToggle" onclick={this.toggleMethod.bind(this, method.name)}>
-                {icon(method.icon)} {method.label}
-              </th>
-            ))}
-          </tr>
-        </thead>
-
-        <tbody>
-          {this.types.map((type) => (
-            <tr>
-              <td className="NotificationGrid-groupToggle" onclick={this.toggleType.bind(this, type.name)}>
-                {icon(type.icon)} {type.label}
-              </td>
-              {this.methods.map((method) => (
-                <td className="NotificationGrid-checkbox">{this.inputs[this.preferenceKey(type.name, method.name)].render()}</td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    );
-  }
-
-  config(isInitialized) {
-    if (isInitialized) return;
-
-    this.$('thead .NotificationGrid-groupToggle').bind('mouseenter mouseleave', function (e) {
-      const i = parseInt($(this).index(), 10) + 1;
-      $(this)
-        .parents('table')
-        .find('td:nth-child(' + i + ')')
-        .toggleClass('highlighted', e.type === 'mouseenter');
-    });
-
-    this.$('tbody .NotificationGrid-groupToggle').bind('mouseenter mouseleave', function (e) {
-      $(this)
-        .parent()
-        .find('td')
-        .toggleClass('highlighted', e.type === 'mouseenter');
-    });
-  }
-
-  /**
-   * Toggle the state of the given preferences, based on the value of the first
-   * one.
-   *
-   * @param {Array} keys
-   */
-  toggle(keys) {
-    const user = this.props.user;
-    const preferences = user.preferences();
-    const enabled = !preferences[keys[0]];
-
-    keys.forEach((key) => {
-      const control = this.inputs[key];
-
-      control.loading = true;
-      preferences[key] = control.props.state = enabled;
-    });
-
-    m.redraw();
-
-    user.save({ preferences }).then(() => {
-      keys.forEach((key) => (this.inputs[key].loading = false));
-
-      m.redraw();
-    });
-  }
-
-  /**
-   * Toggle all notification types for the given method.
-   *
-   * @param {String} method
-   */
-  toggleMethod(method) {
-    const keys = this.types.map((type) => this.preferenceKey(type.name, method)).filter((key) => !this.inputs[key].props.disabled);
-
-    this.toggle(keys);
-  }
-
-  /**
-   * Toggle all notification methods for the given type.
-   *
-   * @param {String} type
-   */
-  toggleType(type) {
-    const keys = this.methods.map((method) => this.preferenceKey(type, method.name)).filter((key) => !this.inputs[key].props.disabled);
-
-    this.toggle(keys);
-  }
-
-  /**
-   * Get the name of the preference key for the given notification type-method
-   * combination.
-   *
-   * @param {String} type
-   * @param {String} method
-   * @return {String}
-   */
-  preferenceKey(type, method) {
-    return 'notify_' + type + '_' + method;
-  }
-
-  /**
-   * Build an item list for the notification methods to display in the grid.
-   *
-   * Each notification method is an object which has the following properties:
-   *
-   * - `name` The name of the notification method.
-   * - `icon` The icon to display in the column header.
-   * - `label` The label to display in the column header.
-   *
-   * @return {ItemList}
-   */
-  notificationMethods() {
-    const items = new ItemList();
-
-    items.add('alert', {
-      name: 'alert',
-      icon: 'fas fa-bell',
-      label: app.translator.trans('core.forum.settings.notify_by_web_heading'),
-    });
-
-    items.add('email', {
-      name: 'email',
-      icon: 'far fa-envelope',
-      label: app.translator.trans('core.forum.settings.notify_by_email_heading'),
-    });
-
-    return items;
-  }
-
-  /**
-   * Build an item list for the notification types to display in the grid.
-   *
-   * Each notification type is an object which has the following properties:
-   *
-   * - `name` The name of the notification type.
-   * - `icon` The icon to display in the notification grid row.
-   * - `label` The label to display in the notification grid row.
-   *
-   * @return {ItemList}
-   */
-  notificationTypes() {
-    const items = new ItemList();
-
-    items.add('discussionRenamed', {
-      name: 'discussionRenamed',
-      icon: 'fas fa-pencil-alt',
-      label: app.translator.trans('core.forum.settings.notify_discussion_renamed_label'),
-    });
-
-    return items;
-  }
-}
diff --git a/js/old/forum/components/NotificationList.js b/js/old/forum/components/NotificationList.js
deleted file mode 100644
index 81a961ee4..000000000
--- a/js/old/forum/components/NotificationList.js
+++ /dev/null
@@ -1,208 +0,0 @@
-import Component from '../../common/Component';
-import listItems from '../../common/helpers/listItems';
-import Button from '../../common/components/Button';
-import LoadingIndicator from '../../common/components/LoadingIndicator';
-import Discussion from '../../common/models/Discussion';
-
-/**
- * The `NotificationList` component displays a list of the logged-in user's
- * notifications, grouped by discussion.
- */
-export default class NotificationList extends Component {
-  init() {
-    /**
-     * Whether or not the notifications are loading.
-     *
-     * @type {Boolean}
-     */
-    this.loading = false;
-
-    /**
-     * Whether or not there are more results that can be loaded.
-     *
-     * @type {Boolean}
-     */
-    this.moreResults = false;
-  }
-
-  view() {
-    const pages = app.cache.notifications || [];
-
-    return (
-      <div className="NotificationList">
-        <div className="NotificationList-header">
-          <div className="App-primaryControl">
-            {Button.component({
-              className: 'Button Button--icon Button--link',
-              icon: 'fas fa-check',
-              title: app.translator.trans('core.forum.notifications.mark_all_as_read_tooltip'),
-              onclick: this.markAllAsRead.bind(this),
-            })}
-          </div>
-
-          <h4 className="App-titleControl App-titleControl--text">{app.translator.trans('core.forum.notifications.title')}</h4>
-        </div>
-
-        <div className="NotificationList-content">
-          {pages.length
-            ? pages.map((notifications) => {
-                const groups = [];
-                const discussions = {};
-
-                notifications.forEach((notification) => {
-                  const subject = notification.subject();
-
-                  if (typeof subject === 'undefined') return;
-
-                  // Get the discussion that this notification is related to. If it's not
-                  // directly related to a discussion, it may be related to a post or
-                  // other entity which is related to a discussion.
-                  let discussion = false;
-                  if (subject instanceof Discussion) discussion = subject;
-                  else if (subject && subject.discussion) discussion = subject.discussion();
-
-                  // If the notification is not related to a discussion directly or
-                  // indirectly, then we will assign it to a neutral group.
-                  const key = discussion ? discussion.id() : 0;
-                  discussions[key] = discussions[key] || { discussion: discussion, notifications: [] };
-                  discussions[key].notifications.push(notification);
-
-                  if (groups.indexOf(discussions[key]) === -1) {
-                    groups.push(discussions[key]);
-                  }
-                });
-
-                return groups.map((group) => {
-                  const badges = group.discussion && group.discussion.badges().toArray();
-
-                  return (
-                    <div className="NotificationGroup">
-                      {group.discussion ? (
-                        <a className="NotificationGroup-header" href={app.route.discussion(group.discussion)} config={m.route}>
-                          {badges && badges.length ? <ul className="NotificationGroup-badges badges">{listItems(badges)}</ul> : ''}
-                          {group.discussion.title()}
-                        </a>
-                      ) : (
-                        <div className="NotificationGroup-header">{app.forum.attribute('title')}</div>
-                      )}
-
-                      <ul className="NotificationGroup-content">
-                        {group.notifications.map((notification) => {
-                          const NotificationComponent = app.notificationComponents[notification.contentType()];
-                          return NotificationComponent ? <li>{NotificationComponent.component({ notification })}</li> : '';
-                        })}
-                      </ul>
-                    </div>
-                  );
-                });
-              })
-            : ''}
-          {this.loading ? (
-            <LoadingIndicator className="LoadingIndicator--block" />
-          ) : pages.length ? (
-            ''
-          ) : (
-            <div className="NotificationList-empty">{app.translator.trans('core.forum.notifications.empty_text')}</div>
-          )}
-        </div>
-      </div>
-    );
-  }
-
-  config(isInitialized, context) {
-    if (isInitialized) return;
-
-    const $notifications = this.$('.NotificationList-content');
-    const $scrollParent = $notifications.css('overflow') === 'auto' ? $notifications : $(window);
-
-    const scrollHandler = () => {
-      const scrollTop = $scrollParent.scrollTop();
-      const viewportHeight = $scrollParent.height();
-      const contentTop = $scrollParent === $notifications ? 0 : $notifications.offset().top;
-      const contentHeight = $notifications[0].scrollHeight;
-
-      if (this.moreResults && !this.loading && scrollTop + viewportHeight >= contentTop + contentHeight) {
-        this.loadMore();
-      }
-    };
-
-    $scrollParent.on('scroll', scrollHandler);
-
-    context.onunload = () => {
-      $scrollParent.off('scroll', scrollHandler);
-    };
-  }
-
-  /**
-   * Load notifications into the application's cache if they haven't already
-   * been loaded.
-   */
-  load() {
-    if (app.session.user.newNotificationCount()) {
-      delete app.cache.notifications;
-    }
-
-    if (app.cache.notifications) {
-      return;
-    }
-
-    app.session.user.pushAttributes({ newNotificationCount: 0 });
-
-    this.loadMore();
-  }
-
-  /**
-   * Load the next page of notification results.
-   *
-   * @public
-   */
-  loadMore() {
-    this.loading = true;
-    m.redraw();
-
-    const params = app.cache.notifications ? { page: { offset: app.cache.notifications.length * 10 } } : null;
-
-    return app.store
-      .find('notifications', params)
-      .then(this.parseResults.bind(this))
-      .catch(() => {})
-      .then(() => {
-        this.loading = false;
-        m.redraw();
-      });
-  }
-
-  /**
-   * Parse results and append them to the notification list.
-   *
-   * @param {Notification[]} results
-   * @return {Notification[]}
-   */
-  parseResults(results) {
-    app.cache.notifications = app.cache.notifications || [];
-
-    if (results.length) app.cache.notifications.push(results);
-
-    this.moreResults = !!results.payload.links.next;
-
-    return results;
-  }
-
-  /**
-   * Mark all of the notifications as read.
-   */
-  markAllAsRead() {
-    if (!app.cache.notifications) return;
-
-    app.session.user.pushAttributes({ unreadNotificationCount: 0 });
-
-    app.cache.notifications.forEach((notifications) => {
-      notifications.forEach((notification) => notification.pushAttributes({ isRead: true }));
-    });
-
-    app.request({
-      url: app.forum.attribute('apiUrl') + '/notifications/read',
-      method: 'POST',
-    });
-  }
-}
diff --git a/js/old/forum/components/NotificationsDropdown.js b/js/old/forum/components/NotificationsDropdown.js
deleted file mode 100644
index de25ce397..000000000
--- a/js/old/forum/components/NotificationsDropdown.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import Dropdown from '../../common/components/Dropdown';
-import icon from '../../common/helpers/icon';
-import NotificationList from './NotificationList';
-
-export default class NotificationsDropdown extends Dropdown {
-  static initProps(props) {
-    props.className = props.className || 'NotificationsDropdown';
-    props.buttonClassName = props.buttonClassName || 'Button Button--flat';
-    props.menuClassName = props.menuClassName || 'Dropdown-menu--right';
-    props.label = props.label || app.translator.trans('core.forum.notifications.tooltip');
-    props.icon = props.icon || 'fas fa-bell';
-
-    super.initProps(props);
-  }
-
-  init() {
-    super.init();
-
-    this.list = new NotificationList();
-  }
-
-  getButton() {
-    const newNotifications = this.getNewCount();
-    const vdom = super.getButton();
-
-    vdom.attrs.title = this.props.label;
-
-    vdom.attrs.className += newNotifications ? ' new' : '';
-    vdom.attrs.onclick = this.onclick.bind(this);
-
-    return vdom;
-  }
-
-  getButtonContent() {
-    const unread = this.getUnreadCount();
-
-    return [
-      icon(this.props.icon, { className: 'Button-icon' }),
-      unread ? <span className="NotificationsDropdown-unread">{unread}</span> : '',
-      <span className="Button-label">{this.props.label}</span>,
-    ];
-  }
-
-  getMenu() {
-    return (
-      <div className={'Dropdown-menu ' + this.props.menuClassName} onclick={this.menuClick.bind(this)}>
-        {this.showing ? this.list.render() : ''}
-      </div>
-    );
-  }
-
-  onclick() {
-    if (app.drawer.isOpen()) {
-      this.goToRoute();
-    } else {
-      this.list.load();
-    }
-  }
-
-  goToRoute() {
-    m.route(app.route('notifications'));
-  }
-
-  getUnreadCount() {
-    return app.session.user.unreadNotificationCount();
-  }
-
-  getNewCount() {
-    return app.session.user.newNotificationCount();
-  }
-
-  menuClick(e) {
-    // Don't close the notifications dropdown if the user is opening a link in a
-    // new tab or window.
-    if (e.shiftKey || e.metaKey || e.ctrlKey || e.which === 2) e.stopPropagation();
-  }
-}
diff --git a/js/old/forum/components/NotificationsPage.js b/js/old/forum/components/NotificationsPage.js
deleted file mode 100644
index c32e24865..000000000
--- a/js/old/forum/components/NotificationsPage.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import Page from './Page';
-import NotificationList from './NotificationList';
-
-/**
- * The `NotificationsPage` component shows the notifications list. It is only
- * used on mobile devices where the notifications dropdown is within the drawer.
- */
-export default class NotificationsPage extends Page {
-  init() {
-    super.init();
-
-    app.history.push('notifications');
-
-    this.list = new NotificationList();
-    this.list.load();
-
-    this.bodyClass = 'App--notifications';
-  }
-
-  view() {
-    return <div className="NotificationsPage">{this.list.render()}</div>;
-  }
-}
diff --git a/js/old/forum/components/Page.js b/js/old/forum/components/Page.js
deleted file mode 100644
index 7ef2956cd..000000000
--- a/js/old/forum/components/Page.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Component from '../../common/Component';
-
-/**
- * The `Page` component
- *
- * @abstract
- */
-export default class Page extends Component {
-  init() {
-    app.previous = app.current;
-    app.current = this;
-
-    app.drawer.hide();
-    app.modal.close();
-
-    /**
-     * A class name to apply to the body while the route is active.
-     *
-     * @type {String}
-     */
-    this.bodyClass = '';
-  }
-
-  config(isInitialized, context) {
-    if (isInitialized) return;
-
-    if (this.bodyClass) {
-      $('#app').addClass(this.bodyClass);
-
-      context.onunload = () => $('#app').removeClass(this.bodyClass);
-    }
-  }
-}
diff --git a/js/old/forum/components/Post.js b/js/old/forum/components/Post.js
deleted file mode 100644
index 4843072c9..000000000
--- a/js/old/forum/components/Post.js
+++ /dev/null
@@ -1,152 +0,0 @@
-import Component from '../../common/Component';
-import SubtreeRetainer from '../../common/utils/SubtreeRetainer';
-import Dropdown from '../../common/components/Dropdown';
-import PostControls from '../utils/PostControls';
-import listItems from '../../common/helpers/listItems';
-import ItemList from '../../common/utils/ItemList';
-
-/**
- * The `Post` component displays a single post. The basic post template just
- * includes a controls dropdown; subclasses must implement `content` and `attrs`
- * methods.
- *
- * ### Props
- *
- * - `post`
- *
- * @abstract
- */
-export default class Post extends Component {
-  init() {
-    this.loading = false;
-
-    /**
-     * Set up a subtree retainer so that the post will not be redrawn
-     * unless new data comes in.
-     *
-     * @type {SubtreeRetainer}
-     */
-    this.subtree = new SubtreeRetainer(
-      () => this.props.post.freshness,
-      () => {
-        const user = this.props.post.user();
-        return user && user.freshness;
-      },
-      () => this.controlsOpen
-    );
-  }
-
-  view() {
-    const attrs = this.attrs();
-
-    attrs.className = this.classes(attrs.className).join(' ');
-
-    return (
-      <article {...attrs}>
-        {this.subtree.retain() ||
-          (() => {
-            const controls = PostControls.controls(this.props.post, this).toArray();
-
-            return (
-              <div>
-                {this.content()}
-                <aside className="Post-actions">
-                  <ul>
-                    {listItems(this.actionItems().toArray())}
-                    {controls.length ? (
-                      <li>
-                        <Dropdown
-                          className="Post-controls"
-                          buttonClassName="Button Button--icon Button--flat"
-                          menuClassName="Dropdown-menu--right"
-                          icon="fas fa-ellipsis-h"
-                          onshow={() => this.$('.Post-actions').addClass('open')}
-                          onhide={() => this.$('.Post-actions').removeClass('open')}
-                        >
-                          {controls}
-                        </Dropdown>
-                      </li>
-                    ) : (
-                      ''
-                    )}
-                  </ul>
-                </aside>
-                <footer className="Post-footer">
-                  <ul>{listItems(this.footerItems().toArray())}</ul>
-                </footer>
-              </div>
-            );
-          })()}
-      </article>
-    );
-  }
-
-  config(isInitialized) {
-    const $actions = this.$('.Post-actions');
-    const $controls = this.$('.Post-controls');
-
-    $actions.toggleClass('open', $controls.hasClass('open'));
-  }
-
-  /**
-   * Get attributes for the post element.
-   *
-   * @return {Object}
-   */
-  attrs() {
-    return {};
-  }
-
-  /**
-   * Get the post's content.
-   *
-   * @return {Array}
-   */
-  content() {
-    return [];
-  }
-
-  /**
-   * Get the post's classes.
-   *
-   * @param string classes
-   * @returns {string[]}
-   */
-  classes(existing) {
-    let classes = (existing || '').split(' ').concat(['Post']);
-
-    const user = this.props.post.user();
-
-    if (this.loading) {
-      classes.push('Post--loading');
-    }
-
-    if (user && user === app.session.user) {
-      classes.push('Post--by-actor');
-    }
-
-    if (user && app.current.discussion && app.current.discussion.attribute('startUserId') == user.id()) {
-      classes.push('Post--by-start-user');
-    }
-
-    return classes;
-  }
-
-  /**
-   * Build an item list for the post's actions.
-   *
-   * @return {ItemList}
-   */
-  actionItems() {
-    return new ItemList();
-  }
-
-  /**
-   * Build an item list for the post's footer.
-   *
-   * @return {ItemList}
-   */
-  footerItems() {
-    return new ItemList();
-  }
-}
diff --git a/js/old/forum/components/PostEdited.js b/js/old/forum/components/PostEdited.js
deleted file mode 100644
index fbe1208e9..000000000
--- a/js/old/forum/components/PostEdited.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import Component from '../../common/Component';
-import humanTime from '../../common/utils/humanTime';
-import extractText from '../../common/utils/extractText';
-
-/**
- * The `PostEdited` component displays information about when and by whom a post
- * was edited.
- *
- * ### Props
- *
- * - `post`
- */
-export default class PostEdited extends Component {
-  init() {
-    this.shouldUpdateTooltip = false;
-    this.oldEditedInfo = null;
-  }
-
-  view() {
-    const post = this.props.post;
-    const editedUser = post.editedUser();
-    const editedInfo = extractText(app.translator.trans('core.forum.post.edited_tooltip', { user: editedUser, ago: humanTime(post.editedAt()) }));
-    if (editedInfo !== this.oldEditedInfo) {
-      this.shouldUpdateTooltip = true;
-      this.oldEditedInfo = editedInfo;
-    }
-
-    return (
-      <span className="PostEdited" title={editedInfo}>
-        {app.translator.trans('core.forum.post.edited_text')}
-      </span>
-    );
-  }
-
-  config(isInitialized) {
-    if (this.shouldUpdateTooltip) {
-      this.$().tooltip('destroy').tooltip();
-      this.shouldUpdateTooltip = false;
-    }
-  }
-}
diff --git a/js/old/forum/components/PostMeta.js b/js/old/forum/components/PostMeta.js
deleted file mode 100644
index 6c0f4cf6e..000000000
--- a/js/old/forum/components/PostMeta.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import Component from '../../common/Component';
-import humanTime from '../../common/helpers/humanTime';
-import fullTime from '../../common/helpers/fullTime';
-
-/**
- * The `PostMeta` component displays the time of a post, and when clicked, shows
- * a dropdown containing more information about the post (number, full time,
- * permalink).
- *
- * ### Props
- *
- * - `post`
- */
-export default class PostMeta extends Component {
-  view() {
-    const post = this.props.post;
-    const time = post.createdAt();
-    const permalink = this.getPermalink(post);
-    const touch = 'ontouchstart' in document.documentElement;
-
-    // When the dropdown menu is shown, select the contents of the permalink
-    // input so that the user can quickly copy the URL.
-    const selectPermalink = function () {
-      setTimeout(() => $(this).parent().find('.PostMeta-permalink').select());
-
-      m.redraw.strategy('none');
-    };
-
-    return (
-      <div className="Dropdown PostMeta">
-        <a className="Dropdown-toggle" onclick={selectPermalink} data-toggle="dropdown">
-          {humanTime(time)}
-        </a>
-
-        <div className="Dropdown-menu dropdown-menu">
-          <span className="PostMeta-number">{app.translator.trans('core.forum.post.number_tooltip', { number: post.number() })}</span>{' '}
-          <span className="PostMeta-time">{fullTime(time)}</span> <span className="PostMeta-ip">{post.data.attributes.ipAddress}</span>
-          {touch ? (
-            <a className="Button PostMeta-permalink" href={permalink}>
-              {permalink}
-            </a>
-          ) : (
-            <input className="FormControl PostMeta-permalink" value={permalink} onclick={(e) => e.stopPropagation()} />
-          )}
-        </div>
-      </div>
-    );
-  }
-
-  /**
-   * Get the permalink for the given post.
-   *
-   * @param {Post} post
-   * @returns {String}
-   */
-  getPermalink(post) {
-    return window.location.origin + app.route.post(post);
-  }
-}
diff --git a/js/old/forum/components/PostPreview.js b/js/old/forum/components/PostPreview.js
deleted file mode 100644
index 08c9544af..000000000
--- a/js/old/forum/components/PostPreview.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import Component from '../../common/Component';
-import avatar from '../../common/helpers/avatar';
-import username from '../../common/helpers/username';
-import highlight from '../../common/helpers/highlight';
-
-/**
- * The `PostPreview` component shows a link to a post containing the avatar and
- * username of the author, and a short excerpt of the post's content.
- *
- * ### Props
- *
- * - `post`
- */
-export default class PostPreview extends Component {
-  view() {
-    const post = this.props.post;
-    const user = post.user();
-    const excerpt = highlight(post.contentPlain(), this.props.highlight, 300);
-
-    return (
-      <a className="PostPreview" href={app.route.post(post)} config={m.route} onclick={this.props.onclick}>
-        <span className="PostPreview-content">
-          {avatar(user)}
-          {username(user)} <span className="PostPreview-excerpt">{excerpt}</span>
-        </span>
-      </a>
-    );
-  }
-}
diff --git a/js/old/forum/components/PostStream.js b/js/old/forum/components/PostStream.js
deleted file mode 100644
index 8a6850e01..000000000
--- a/js/old/forum/components/PostStream.js
+++ /dev/null
@@ -1,613 +0,0 @@
-import Component from '../../common/Component';
-import ScrollListener from '../../common/utils/ScrollListener';
-import PostLoading from './LoadingPost';
-import anchorScroll from '../../common/utils/anchorScroll';
-import evented from '../../common/utils/evented';
-import ReplyPlaceholder from './ReplyPlaceholder';
-import Button from '../../common/components/Button';
-
-/**
- * The `PostStream` component displays an infinitely-scrollable wall of posts in
- * a discussion. Posts that have not loaded will be displayed as placeholders.
- *
- * ### Props
- *
- * - `discussion`
- * - `includedPosts`
- */
-class PostStream extends Component {
-  init() {
-    /**
-     * The discussion to display the post stream for.
-     *
-     * @type {Discussion}
-     */
-    this.discussion = this.props.discussion;
-
-    /**
-     * Whether or not the infinite-scrolling auto-load functionality is
-     * disabled.
-     *
-     * @type {Boolean}
-     */
-    this.paused = false;
-
-    this.scrollListener = new ScrollListener(this.onscroll.bind(this));
-    this.loadPageTimeouts = {};
-    this.pagesLoading = 0;
-
-    this.show(this.props.includedPosts);
-  }
-
-  /**
-   * Load and scroll to a post with a certain number.
-   *
-   * @param {Integer|String} number The post number to go to. If 'reply', go to
-   *     the last post and scroll the reply preview into view.
-   * @param {Boolean} noAnimation
-   * @return {Promise}
-   */
-  goToNumber(number, noAnimation) {
-    // If we want to go to the reply preview, then we will go to the end of the
-    // discussion and then scroll to the very bottom of the page.
-    if (number === 'reply') {
-      return this.goToLast().then(() => {
-        $('html,body')
-          .stop(true)
-          .animate(
-            {
-              scrollTop: $(document).height() - $(window).height(),
-            },
-            'fast',
-            () => {
-              this.flashItem(this.$('.PostStream-item:last-child'));
-            }
-          );
-      });
-    }
-
-    this.paused = true;
-
-    const promise = this.loadNearNumber(number);
-
-    m.redraw(true);
-
-    return promise.then(() => {
-      m.redraw(true);
-
-      this.scrollToNumber(number, noAnimation).done(this.unpause.bind(this));
-    });
-  }
-
-  /**
-   * Load and scroll to a certain index within the discussion.
-   *
-   * @param {Integer} index
-   * @param {Boolean} backwards Whether or not to load backwards from the given
-   *     index.
-   * @param {Boolean} noAnimation
-   * @return {Promise}
-   */
-  goToIndex(index, backwards, noAnimation) {
-    this.paused = true;
-
-    const promise = this.loadNearIndex(index);
-
-    m.redraw(true);
-
-    return promise.then(() => {
-      anchorScroll(this.$('.PostStream-item:' + (backwards ? 'last' : 'first')), () => m.redraw(true));
-
-      this.scrollToIndex(index, noAnimation, backwards).done(this.unpause.bind(this));
-    });
-  }
-
-  /**
-   * Load and scroll up to the first post in the discussion.
-   *
-   * @return {Promise}
-   */
-  goToFirst() {
-    return this.goToIndex(0);
-  }
-
-  /**
-   * Load and scroll down to the last post in the discussion.
-   *
-   * @return {Promise}
-   */
-  goToLast() {
-    return this.goToIndex(this.count() - 1, true);
-  }
-
-  /**
-   * Update the stream so that it loads and includes the latest posts in the
-   * discussion, if the end is being viewed.
-   *
-   * @public
-   */
-  update() {
-    if (!this.viewingEnd) return m.deferred().resolve().promise;
-
-    this.visibleEnd = this.count();
-
-    return this.loadRange(this.visibleStart, this.visibleEnd).then(() => m.redraw());
-  }
-
-  /**
-   * Get the total number of posts in the discussion.
-   *
-   * @return {Integer}
-   */
-  count() {
-    return this.discussion.postIds().length;
-  }
-
-  /**
-   * Make sure that the given index is not outside of the possible range of
-   * indexes in the discussion.
-   *
-   * @param {Integer} index
-   * @protected
-   */
-  sanitizeIndex(index) {
-    return Math.max(0, Math.min(this.count(), index));
-  }
-
-  /**
-   * Set up the stream with the given array of posts.
-   *
-   * @param {Post[]} posts
-   */
-  show(posts) {
-    this.visibleStart = posts.length ? this.discussion.postIds().indexOf(posts[0].id()) : 0;
-    this.visibleEnd = this.visibleStart + posts.length;
-  }
-
-  /**
-   * Reset the stream so that a specific range of posts is displayed. If a range
-   * is not specified, the first page of posts will be displayed.
-   *
-   * @param {Integer} [start]
-   * @param {Integer} [end]
-   */
-  reset(start, end) {
-    this.visibleStart = start || 0;
-    this.visibleEnd = this.sanitizeIndex(end || this.constructor.loadCount);
-  }
-
-  /**
-   * Get the visible page of posts.
-   *
-   * @return {Post[]}
-   */
-  posts() {
-    return this.discussion
-      .postIds()
-      .slice(this.visibleStart, this.visibleEnd)
-      .map((id) => {
-        const post = app.store.getById('posts', id);
-
-        return post && post.discussion() && typeof post.canEdit() !== 'undefined' ? post : null;
-      });
-  }
-
-  view() {
-    function fadeIn(element, isInitialized, context) {
-      if (!context.fadedIn) $(element).hide().fadeIn();
-      context.fadedIn = true;
-    }
-
-    let lastTime;
-
-    this.visibleEnd = this.sanitizeIndex(this.visibleEnd);
-    this.viewingEnd = this.visibleEnd === this.count();
-
-    const posts = this.posts();
-    const postIds = this.discussion.postIds();
-
-    const items = posts.map((post, i) => {
-      let content;
-      const attrs = { 'data-index': this.visibleStart + i };
-
-      if (post) {
-        const time = post.createdAt();
-        const PostComponent = app.postComponents[post.contentType()];
-        content = PostComponent ? PostComponent.component({ post }) : '';
-
-        attrs.key = 'post' + post.id();
-        attrs.config = fadeIn;
-        attrs['data-time'] = time.toISOString();
-        attrs['data-number'] = post.number();
-        attrs['data-id'] = post.id();
-        attrs['data-type'] = post.contentType();
-
-        // If the post before this one was more than 4 hours ago, we will
-        // display a 'time gap' indicating how long it has been in between
-        // the posts.
-        const dt = time - lastTime;
-
-        if (dt > 1000 * 60 * 60 * 24 * 4) {
-          content = [
-            <div className="PostStream-timeGap">
-              <span>{app.translator.trans('core.forum.post_stream.time_lapsed_text', { period: moment.duration(dt).humanize() })}</span>
-            </div>,
-            content,
-          ];
-        }
-
-        lastTime = time;
-      } else {
-        attrs.key = 'post' + postIds[this.visibleStart + i];
-
-        content = PostLoading.component();
-      }
-
-      return (
-        <div className="PostStream-item" {...attrs}>
-          {content}
-        </div>
-      );
-    });
-
-    if (!this.viewingEnd && posts[this.visibleEnd - this.visibleStart - 1]) {
-      items.push(
-        <div className="PostStream-loadMore" key="loadMore">
-          <Button className="Button" onclick={this.loadNext.bind(this)}>
-            {app.translator.trans('core.forum.post_stream.load_more_button')}
-          </Button>
-        </div>
-      );
-    }
-
-    // If we're viewing the end of the discussion, the user can reply, and
-    // is not already doing so, then show a 'write a reply' placeholder.
-    if (this.viewingEnd && (!app.session.user || this.discussion.canReply())) {
-      items.push(
-        <div className="PostStream-item" key="reply">
-          {ReplyPlaceholder.component({ discussion: this.discussion })}
-        </div>
-      );
-    }
-
-    return <div className="PostStream">{items}</div>;
-  }
-
-  config(isInitialized, context) {
-    if (isInitialized) return;
-
-    // This is wrapped in setTimeout due to the following Mithril issue:
-    // https://github.com/lhorie/mithril.js/issues/637
-    setTimeout(() => this.scrollListener.start());
-
-    context.onunload = () => {
-      this.scrollListener.stop();
-      clearTimeout(this.calculatePositionTimeout);
-    };
-  }
-
-  /**
-   * When the window is scrolled, check if either extreme of the post stream is
-   * in the viewport, and if so, trigger loading the next/previous page.
-   *
-   * @param {Integer} top
-   */
-  onscroll(top) {
-    if (this.paused) return;
-
-    const marginTop = this.getMarginTop();
-    const viewportHeight = $(window).height() - marginTop;
-    const viewportTop = top + marginTop;
-    const loadAheadDistance = 300;
-
-    if (this.visibleStart > 0) {
-      const $item = this.$('.PostStream-item[data-index=' + this.visibleStart + ']');
-
-      if ($item.length && $item.offset().top > viewportTop - loadAheadDistance) {
-        this.loadPrevious();
-      }
-    }
-
-    if (this.visibleEnd < this.count()) {
-      const $item = this.$('.PostStream-item[data-index=' + (this.visibleEnd - 1) + ']');
-
-      if ($item.length && $item.offset().top + $item.outerHeight(true) < viewportTop + viewportHeight + loadAheadDistance) {
-        this.loadNext();
-      }
-    }
-
-    // Throttle calculation of our position (start/end numbers of posts in the
-    // viewport) to 100ms.
-    clearTimeout(this.calculatePositionTimeout);
-    this.calculatePositionTimeout = setTimeout(this.calculatePosition.bind(this), 100);
-  }
-
-  /**
-   * Load the next page of posts.
-   */
-  loadNext() {
-    const start = this.visibleEnd;
-    const end = (this.visibleEnd = this.sanitizeIndex(this.visibleEnd + this.constructor.loadCount));
-
-    // Unload the posts which are two pages back from the page we're currently
-    // loading.
-    const twoPagesAway = start - this.constructor.loadCount * 2;
-    if (twoPagesAway > this.visibleStart && twoPagesAway >= 0) {
-      this.visibleStart = twoPagesAway + this.constructor.loadCount + 1;
-
-      if (this.loadPageTimeouts[twoPagesAway]) {
-        clearTimeout(this.loadPageTimeouts[twoPagesAway]);
-        this.loadPageTimeouts[twoPagesAway] = null;
-        this.pagesLoading--;
-      }
-    }
-
-    this.loadPage(start, end);
-  }
-
-  /**
-   * Load the previous page of posts.
-   */
-  loadPrevious() {
-    const end = this.visibleStart;
-    const start = (this.visibleStart = this.sanitizeIndex(this.visibleStart - this.constructor.loadCount));
-
-    // Unload the posts which are two pages back from the page we're currently
-    // loading.
-    const twoPagesAway = start + this.constructor.loadCount * 2;
-    if (twoPagesAway < this.visibleEnd && twoPagesAway <= this.count()) {
-      this.visibleEnd = twoPagesAway;
-
-      if (this.loadPageTimeouts[twoPagesAway]) {
-        clearTimeout(this.loadPageTimeouts[twoPagesAway]);
-        this.loadPageTimeouts[twoPagesAway] = null;
-        this.pagesLoading--;
-      }
-    }
-
-    this.loadPage(start, end, true);
-  }
-
-  /**
-   * Load a page of posts into the stream and redraw.
-   *
-   * @param {Integer} start
-   * @param {Integer} end
-   * @param {Boolean} backwards
-   */
-  loadPage(start, end, backwards) {
-    const redraw = () => {
-      if (start < this.visibleStart || end > this.visibleEnd) return;
-
-      const anchorIndex = backwards ? this.visibleEnd - 1 : this.visibleStart;
-      anchorScroll(`.PostStream-item[data-index="${anchorIndex}"]`, () => m.redraw(true));
-
-      this.unpause();
-    };
-    redraw();
-
-    this.loadPageTimeouts[start] = setTimeout(
-      () => {
-        this.loadRange(start, end).then(() => {
-          redraw();
-          this.pagesLoading--;
-        });
-        this.loadPageTimeouts[start] = null;
-      },
-      this.pagesLoading ? 1000 : 0
-    );
-
-    this.pagesLoading++;
-  }
-
-  /**
-   * Load and inject the specified range of posts into the stream, without
-   * clearing it.
-   *
-   * @param {Integer} start
-   * @param {Integer} end
-   * @return {Promise}
-   */
-  loadRange(start, end) {
-    const loadIds = [];
-    const loaded = [];
-
-    this.discussion
-      .postIds()
-      .slice(start, end)
-      .forEach((id) => {
-        const post = app.store.getById('posts', id);
-
-        if (post && post.discussion() && typeof post.canEdit() !== 'undefined') {
-          loaded.push(post);
-        } else {
-          loadIds.push(id);
-        }
-      });
-
-    return loadIds.length ? app.store.find('posts', loadIds) : m.deferred().resolve(loaded).promise;
-  }
-
-  /**
-   * Clear the stream and load posts near a certain number. Returns a promise.
-   * If the post with the given number is already loaded, the promise will be
-   * resolved immediately.
-   *
-   * @param {Integer} number
-   * @return {Promise}
-   */
-  loadNearNumber(number) {
-    if (this.posts().some((post) => post && Number(post.number()) === Number(number))) {
-      return m.deferred().resolve().promise;
-    }
-
-    this.reset();
-
-    return app.store
-      .find('posts', {
-        filter: { discussion: this.discussion.id() },
-        page: { near: number },
-      })
-      .then(this.show.bind(this));
-  }
-
-  /**
-   * Clear the stream and load posts near a certain index. A page of posts
-   * surrounding the given index will be loaded. Returns a promise. If the given
-   * index is already loaded, the promise will be resolved immediately.
-   *
-   * @param {Integer} index
-   * @return {Promise}
-   */
-  loadNearIndex(index) {
-    if (index >= this.visibleStart && index <= this.visibleEnd) {
-      return m.deferred().resolve().promise;
-    }
-
-    const start = this.sanitizeIndex(index - this.constructor.loadCount / 2);
-    const end = start + this.constructor.loadCount;
-
-    this.reset(start, end);
-
-    return this.loadRange(start, end).then(this.show.bind(this));
-  }
-
-  /**
-   * Work out which posts (by number) are currently visible in the viewport, and
-   * fire an event with the information.
-   */
-  calculatePosition() {
-    const marginTop = this.getMarginTop();
-    const $window = $(window);
-    const viewportHeight = $window.height() - marginTop;
-    const scrollTop = $window.scrollTop() + marginTop;
-    let startNumber;
-    let endNumber;
-
-    this.$('.PostStream-item').each(function () {
-      const $item = $(this);
-      const top = $item.offset().top;
-      const height = $item.outerHeight(true);
-
-      if (top + height > scrollTop) {
-        if (!startNumber) {
-          startNumber = endNumber = $item.data('number');
-        }
-
-        if (top + height < scrollTop + viewportHeight) {
-          if ($item.data('number')) {
-            endNumber = $item.data('number');
-          }
-        } else return false;
-      }
-    });
-
-    if (startNumber) {
-      this.trigger('positionChanged', startNumber || 1, endNumber);
-    }
-  }
-
-  /**
-   * Get the distance from the top of the viewport to the point at which we
-   * would consider a post to be the first one visible.
-   *
-   * @return {Integer}
-   */
-  getMarginTop() {
-    return this.$() && $('#header').outerHeight() + parseInt(this.$().css('margin-top'), 10);
-  }
-
-  /**
-   * Scroll down to a certain post by number and 'flash' it.
-   *
-   * @param {Integer} number
-   * @param {Boolean} noAnimation
-   * @return {jQuery.Deferred}
-   */
-  scrollToNumber(number, noAnimation) {
-    const $item = this.$(`.PostStream-item[data-number=${number}]`);
-
-    return this.scrollToItem($item, noAnimation).done(this.flashItem.bind(this, $item));
-  }
-
-  /**
-   * Scroll down to a certain post by index.
-   *
-   * @param {Integer} index
-   * @param {Boolean} noAnimation
-   * @param {Boolean} bottom Whether or not to scroll to the bottom of the post
-   *     at the given index, instead of the top of it.
-   * @return {jQuery.Deferred}
-   */
-  scrollToIndex(index, noAnimation, bottom) {
-    const $item = this.$(`.PostStream-item[data-index=${index}]`);
-
-    return this.scrollToItem($item, noAnimation, true, bottom);
-  }
-
-  /**
-   * Scroll down to the given post.
-   *
-   * @param {jQuery} $item
-   * @param {Boolean} noAnimation
-   * @param {Boolean} force Whether or not to force scrolling to the item, even
-   *     if it is already in the viewport.
-   * @param {Boolean} bottom Whether or not to scroll to the bottom of the post
-   *     at the given index, instead of the top of it.
-   * @return {jQuery.Deferred}
-   */
-  scrollToItem($item, noAnimation, force, bottom) {
-    const $container = $('html, body').stop(true);
-
-    if ($item.length) {
-      const itemTop = $item.offset().top - this.getMarginTop();
-      const itemBottom = $item.offset().top + $item.height();
-      const scrollTop = $(document).scrollTop();
-      const scrollBottom = scrollTop + $(window).height();
-
-      // If the item is already in the viewport, we may not need to scroll.
-      // If we're scrolling to the bottom of an item, then we'll make sure the
-      // bottom will line up with the top of the composer.
-      if (force || itemTop < scrollTop || itemBottom > scrollBottom) {
-        const top = bottom ? itemBottom - $(window).height() + app.composer.computedHeight() : $item.is(':first-child') ? 0 : itemTop;
-
-        if (noAnimation) {
-          $container.scrollTop(top);
-        } else if (top !== scrollTop) {
-          $container.animate({ scrollTop: top }, 'fast');
-        }
-      }
-    }
-
-    return $container.promise();
-  }
-
-  /**
-   * 'Flash' the given post, drawing the user's attention to it.
-   *
-   * @param {jQuery} $item
-   */
-  flashItem($item) {
-    $item.addClass('flash').one('animationend webkitAnimationEnd', () => $item.removeClass('flash'));
-  }
-
-  /**
-   * Resume the stream's ability to auto-load posts on scroll.
-   */
-  unpause() {
-    this.paused = false;
-    this.scrollListener.update();
-    this.trigger('unpaused');
-  }
-}
-
-/**
- * The number of posts to load per page.
- *
- * @type {Integer}
- */
-PostStream.loadCount = 20;
-
-Object.assign(PostStream.prototype, evented);
-
-export default PostStream;
diff --git a/js/old/forum/components/PostStreamScrubber.js b/js/old/forum/components/PostStreamScrubber.js
deleted file mode 100644
index af47373a8..000000000
--- a/js/old/forum/components/PostStreamScrubber.js
+++ /dev/null
@@ -1,448 +0,0 @@
-import Component from '../../common/Component';
-import icon from '../../common/helpers/icon';
-import ScrollListener from '../../common/utils/ScrollListener';
-import SubtreeRetainer from '../../common/utils/SubtreeRetainer';
-import formatNumber from '../../common/utils/formatNumber';
-
-/**
- * The `PostStreamScrubber` component displays a scrubber which can be used to
- * navigate/scrub through a post stream.
- *
- * ### Props
- *
- * - `stream`
- * - `className`
- */
-export default class PostStreamScrubber extends Component {
-  init() {
-    this.handlers = {};
-
-    /**
-     * The index of the post that is currently at the top of the viewport.
-     *
-     * @type {Number}
-     */
-    this.index = 0;
-
-    /**
-     * The number of posts that are currently visible in the viewport.
-     *
-     * @type {Number}
-     */
-    this.visible = 1;
-
-    /**
-     * The description to render on the scrubber.
-     *
-     * @type {String}
-     */
-    this.description = '';
-
-    // When the post stream begins loading posts at a certain index, we want our
-    // scrubber scrollbar to jump to that position.
-    this.props.stream.on('unpaused', (this.handlers.streamWasUnpaused = this.streamWasUnpaused.bind(this)));
-
-    // Define a handler to update the state of the scrollbar to reflect the
-    // current scroll position of the page.
-    this.scrollListener = new ScrollListener(this.onscroll.bind(this));
-
-    // Create a subtree retainer that will always cache the subtree after the
-    // initial draw. We render parts of the scrubber using this because we
-    // modify their DOM directly, and do not want Mithril messing around with
-    // our changes.
-    this.subtree = new SubtreeRetainer(() => true);
-  }
-
-  view() {
-    const retain = this.subtree.retain();
-    const count = this.count();
-    const unreadCount = this.props.stream.discussion.unreadCount();
-    const unreadPercent = count ? Math.min(count - this.index, unreadCount) / count : 0;
-
-    const viewing = app.translator.transChoice('core.forum.post_scrubber.viewing_text', count, {
-      index: <span className="Scrubber-index">{retain || formatNumber(Math.min(Math.ceil(this.index + this.visible), count))}</span>,
-      count: <span className="Scrubber-count">{formatNumber(count)}</span>,
-    });
-
-    function styleUnread(element, isInitialized, context) {
-      const $element = $(element);
-      const newStyle = {
-        top: 100 - unreadPercent * 100 + '%',
-        height: unreadPercent * 100 + '%',
-      };
-
-      if (context.oldStyle) {
-        $element.stop(true).css(context.oldStyle).animate(newStyle);
-      } else {
-        $element.css(newStyle);
-      }
-
-      context.oldStyle = newStyle;
-    }
-
-    return (
-      <div className={'PostStreamScrubber Dropdown ' + (this.disabled() ? 'disabled ' : '') + (this.props.className || '')}>
-        <button className="Button Dropdown-toggle" data-toggle="dropdown">
-          {viewing} {icon('fas fa-sort')}
-        </button>
-
-        <div className="Dropdown-menu dropdown-menu">
-          <div className="Scrubber">
-            <a className="Scrubber-first" onclick={this.goToFirst.bind(this)}>
-              {icon('fas fa-angle-double-up')} {app.translator.trans('core.forum.post_scrubber.original_post_link')}
-            </a>
-
-            <div className="Scrubber-scrollbar">
-              <div className="Scrubber-before" />
-              <div className="Scrubber-handle">
-                <div className="Scrubber-bar" />
-                <div className="Scrubber-info">
-                  <strong>{viewing}</strong>
-                  <span className="Scrubber-description">{retain || this.description}</span>
-                </div>
-              </div>
-              <div className="Scrubber-after" />
-
-              <div className="Scrubber-unread" config={styleUnread}>
-                {app.translator.trans('core.forum.post_scrubber.unread_text', { count: unreadCount })}
-              </div>
-            </div>
-
-            <a className="Scrubber-last" onclick={this.goToLast.bind(this)}>
-              {icon('fas fa-angle-double-down')} {app.translator.trans('core.forum.post_scrubber.now_link')}
-            </a>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  /**
-   * Go to the first post in the discussion.
-   */
-  goToFirst() {
-    this.props.stream.goToFirst();
-    this.index = 0;
-    this.renderScrollbar(true);
-  }
-
-  /**
-   * Go to the last post in the discussion.
-   */
-  goToLast() {
-    this.props.stream.goToLast();
-    this.index = this.count();
-    this.renderScrollbar(true);
-  }
-
-  /**
-   * Get the number of posts in the discussion.
-   *
-   * @return {Integer}
-   */
-  count() {
-    return this.props.stream.count();
-  }
-
-  /**
-   * When the stream is unpaused, update the scrubber to reflect its position.
-   */
-  streamWasUnpaused() {
-    this.update(window.pageYOffset);
-    this.renderScrollbar(true);
-  }
-
-  /**
-   * Check whether or not the scrubber should be disabled, i.e. if all of the
-   * posts are visible in the viewport.
-   *
-   * @return {Boolean}
-   */
-  disabled() {
-    return this.visible >= this.count();
-  }
-
-  /**
-   * When the page is scrolled, update the scrollbar to reflect the visible
-   * posts.
-   *
-   * @param {Integer} top
-   */
-  onscroll(top) {
-    const stream = this.props.stream;
-
-    if (stream.paused || !stream.$()) return;
-
-    this.update(top);
-    this.renderScrollbar();
-  }
-
-  /**
-   * Update the index/visible/description properties according to the window's
-   * current scroll position.
-   *
-   * @param {Integer} scrollTop
-   */
-  update(scrollTop) {
-    const stream = this.props.stream;
-
-    const marginTop = stream.getMarginTop();
-    const viewportTop = scrollTop + marginTop;
-    const viewportHeight = $(window).height() - marginTop;
-
-    // Before looping through all of the posts, we reset the scrollbar
-    // properties to a 'default' state. These values reflect what would be
-    // seen if the browser were scrolled right up to the top of the page,
-    // and the viewport had a height of 0.
-    const $items = stream.$('> .PostStream-item[data-index]');
-    let index = $items.first().data('index') || 0;
-    let visible = 0;
-    let period = '';
-
-    // Now loop through each of the items in the discussion. An 'item' is
-    // either a single post or a 'gap' of one or more posts that haven't
-    // been loaded yet.
-    $items.each(function () {
-      const $this = $(this);
-      const top = $this.offset().top;
-      const height = $this.outerHeight(true);
-
-      // If this item is above the top of the viewport, skip to the next
-      // one. If it's below the bottom of the viewport, break out of the
-      // loop.
-      if (top + height < viewportTop) {
-        return true;
-      }
-      if (top > viewportTop + viewportHeight) {
-        return false;
-      }
-
-      // Work out how many pixels of this item are visible inside the viewport.
-      // Then add the proportion of this item's total height to the index.
-      const visibleTop = Math.max(0, viewportTop - top);
-      const visibleBottom = Math.min(height, viewportTop + viewportHeight - top);
-      const visiblePost = visibleBottom - visibleTop;
-
-      if (top <= viewportTop) {
-        index = parseFloat($this.data('index')) + visibleTop / height;
-      }
-
-      if (visiblePost > 0) {
-        visible += visiblePost / height;
-      }
-
-      // If this item has a time associated with it, then set the
-      // scrollbar's current period to a formatted version of this time.
-      const time = $this.data('time');
-      if (time) period = time;
-    });
-
-    this.index = index;
-    this.visible = visible;
-    this.description = period ? moment(period).format('MMMM YYYY') : '';
-  }
-
-  config(isInitialized, context) {
-    if (isInitialized) return;
-
-    context.onunload = this.ondestroy.bind(this);
-
-    this.scrollListener.start();
-
-    // Whenever the window is resized, adjust the height of the scrollbar
-    // so that it fills the height of the sidebar.
-    $(window)
-      .on('resize', (this.handlers.onresize = this.onresize.bind(this)))
-      .resize();
-
-    // When any part of the whole scrollbar is clicked, we want to jump to
-    // that position.
-    this.$('.Scrubber-scrollbar')
-      .bind('click', this.onclick.bind(this))
-
-      // Now we want to make the scrollbar handle draggable. Let's start by
-      // preventing default browser events from messing things up.
-      .css({ cursor: 'pointer', 'user-select': 'none' })
-      .bind('dragstart mousedown touchstart', (e) => e.preventDefault());
-
-    // When the mouse is pressed on the scrollbar handle, we capture some
-    // information about its current position. We will store this
-    // information in an object and pass it on to the document's
-    // mousemove/mouseup events later.
-    this.dragging = false;
-    this.mouseStart = 0;
-    this.indexStart = 0;
-
-    this.$('.Scrubber-handle')
-      .css('cursor', 'move')
-      .bind('mousedown touchstart', this.onmousedown.bind(this))
-
-      // Exempt the scrollbar handle from the 'jump to' click event.
-      .click((e) => e.stopPropagation());
-
-    // When the mouse moves and when it is released, we pass the
-    // information that we captured when the mouse was first pressed onto
-    // some event handlers. These handlers will move the scrollbar/stream-
-    // content as appropriate.
-    $(document)
-      .on('mousemove touchmove', (this.handlers.onmousemove = this.onmousemove.bind(this)))
-      .on('mouseup touchend', (this.handlers.onmouseup = this.onmouseup.bind(this)));
-  }
-
-  ondestroy() {
-    this.scrollListener.stop();
-
-    this.props.stream.off('unpaused', this.handlers.streamWasUnpaused);
-
-    $(window).off('resize', this.handlers.onresize);
-
-    $(document).off('mousemove touchmove', this.handlers.onmousemove).off('mouseup touchend', this.handlers.onmouseup);
-  }
-
-  /**
-   * Update the scrollbar's position to reflect the current values of the
-   * index/visible properties.
-   *
-   * @param {Boolean} animate
-   */
-  renderScrollbar(animate) {
-    const percentPerPost = this.percentPerPost();
-    const index = this.index;
-    const count = this.count();
-    const visible = this.visible || 1;
-
-    const $scrubber = this.$();
-    $scrubber.find('.Scrubber-index').text(formatNumber(Math.min(Math.ceil(index + visible), count)));
-    $scrubber.find('.Scrubber-description').text(this.description);
-    $scrubber.toggleClass('disabled', this.disabled());
-
-    const heights = {};
-    heights.before = Math.max(0, percentPerPost.index * Math.min(index, count - visible));
-    heights.handle = Math.min(100 - heights.before, percentPerPost.visible * visible);
-    heights.after = 100 - heights.before - heights.handle;
-
-    const func = animate ? 'animate' : 'css';
-    for (const part in heights) {
-      const $part = $scrubber.find(`.Scrubber-${part}`);
-      $part.stop(true, true)[func]({ height: heights[part] + '%' }, 'fast');
-
-      // jQuery likes to put overflow:hidden, but because the scrollbar handle
-      // has a negative margin-left, we need to override.
-      if (func === 'animate') $part.css('overflow', 'visible');
-    }
-  }
-
-  /**
-   * Get the percentage of the height of the scrubber that should be allocated
-   * to each post.
-   *
-   * @return {Object}
-   * @property {Number} index The percent per post for posts on either side of
-   *     the visible part of the scrubber.
-   * @property {Number} visible The percent per post for the visible part of the
-   *     scrubber.
-   */
-  percentPerPost() {
-    const count = this.count() || 1;
-    const visible = this.visible || 1;
-
-    // To stop the handle of the scrollbar from getting too small when there
-    // are many posts, we define a minimum percentage height for the handle
-    // calculated from a 50 pixel limit. From this, we can calculate the
-    // minimum percentage per visible post. If this is greater than the actual
-    // percentage per post, then we need to adjust the 'before' percentage to
-    // account for it.
-    const minPercentVisible = (50 / this.$('.Scrubber-scrollbar').outerHeight()) * 100;
-    const percentPerVisiblePost = Math.max(100 / count, minPercentVisible / visible);
-    const percentPerPost = count === visible ? 0 : (100 - percentPerVisiblePost * visible) / (count - visible);
-
-    return {
-      index: percentPerPost,
-      visible: percentPerVisiblePost,
-    };
-  }
-
-  onresize() {
-    this.scrollListener.update();
-
-    // Adjust the height of the scrollbar so that it fills the height of
-    // the sidebar and doesn't overlap the footer.
-    const scrubber = this.$();
-    const scrollbar = this.$('.Scrubber-scrollbar');
-
-    scrollbar.css(
-      'max-height',
-      $(window).height() -
-        scrubber.offset().top +
-        $(window).scrollTop() -
-        parseInt($('#app').css('padding-bottom'), 10) -
-        (scrubber.outerHeight() - scrollbar.outerHeight())
-    );
-  }
-
-  onmousedown(e) {
-    this.mouseStart = e.clientY || e.originalEvent.touches[0].clientY;
-    this.indexStart = this.index;
-    this.dragging = true;
-    this.props.stream.paused = true;
-    $('body').css('cursor', 'move');
-  }
-
-  onmousemove(e) {
-    if (!this.dragging) return;
-
-    // Work out how much the mouse has moved by - first in pixels, then
-    // convert it to a percentage of the scrollbar's height, and then
-    // finally convert it into an index. Add this delta index onto
-    // the index at which the drag was started, and then scroll there.
-    const deltaPixels = (e.clientY || e.originalEvent.touches[0].clientY) - this.mouseStart;
-    const deltaPercent = (deltaPixels / this.$('.Scrubber-scrollbar').outerHeight()) * 100;
-    const deltaIndex = deltaPercent / this.percentPerPost().index || 0;
-    const newIndex = Math.min(this.indexStart + deltaIndex, this.count() - 1);
-
-    this.index = Math.max(0, newIndex);
-    this.renderScrollbar();
-  }
-
-  onmouseup() {
-    if (!this.dragging) return;
-
-    this.mouseStart = 0;
-    this.indexStart = 0;
-    this.dragging = false;
-    $('body').css('cursor', '');
-
-    this.$().removeClass('open');
-
-    // If the index we've landed on is in a gap, then tell the stream-
-    // content that we want to load those posts.
-    const intIndex = Math.floor(this.index);
-    this.props.stream.goToIndex(intIndex);
-    this.renderScrollbar(true);
-  }
-
-  onclick(e) {
-    // Calculate the index which we want to jump to based on the click position.
-
-    // 1. Get the offset of the click from the top of the scrollbar, as a
-    //    percentage of the scrollbar's height.
-    const $scrollbar = this.$('.Scrubber-scrollbar');
-    const offsetPixels = (e.pageY || e.originalEvent.touches[0].pageY) - $scrollbar.offset().top + $('body').scrollTop();
-    let offsetPercent = (offsetPixels / $scrollbar.outerHeight()) * 100;
-
-    // 2. We want the handle of the scrollbar to end up centered on the click
-    //    position. Thus, we calculate the height of the handle in percent and
-    //    use that to find a new offset percentage.
-    offsetPercent = offsetPercent - parseFloat($scrollbar.find('.Scrubber-handle')[0].style.height) / 2;
-
-    // 3. Now we can convert the percentage into an index, and tell the stream-
-    //    content component to jump to that index.
-    let offsetIndex = offsetPercent / this.percentPerPost().index;
-    offsetIndex = Math.max(0, Math.min(this.count() - 1, offsetIndex));
-    this.props.stream.goToIndex(Math.floor(offsetIndex));
-    this.index = offsetIndex;
-    this.renderScrollbar(true);
-
-    this.$().removeClass('open');
-  }
-}
diff --git a/js/old/forum/components/PostUser.js b/js/old/forum/components/PostUser.js
deleted file mode 100644
index bbceea424..000000000
--- a/js/old/forum/components/PostUser.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import Component from '../../common/Component';
-import UserCard from './UserCard';
-import avatar from '../../common/helpers/avatar';
-import username from '../../common/helpers/username';
-import userOnline from '../../common/helpers/userOnline';
-import listItems from '../../common/helpers/listItems';
-
-/**
- * The `PostUser` component shows the avatar and username of a post's author.
- *
- * ### Props
- *
- * - `post`
- */
-export default class PostUser extends Component {
-  init() {
-    /**
-     * Whether or not the user hover card is visible.
-     *
-     * @type {Boolean}
-     */
-    this.cardVisible = false;
-  }
-
-  view() {
-    const post = this.props.post;
-    const user = post.user();
-
-    if (!user) {
-      return (
-        <div className="PostUser">
-          <h3>
-            {avatar(user, { className: 'PostUser-avatar' })} {username(user)}
-          </h3>
-        </div>
-      );
-    }
-
-    let card = '';
-
-    if (!post.isHidden() && this.cardVisible) {
-      card = UserCard.component({
-        user,
-        className: 'UserCard--popover',
-        controlsButtonClassName: 'Button Button--icon Button--flat',
-      });
-    }
-
-    return (
-      <div className="PostUser">
-        <h3>
-          <a href={app.route.user(user)} config={m.route}>
-            {avatar(user, { className: 'PostUser-avatar' })}
-            {userOnline(user)}
-            {username(user)}
-          </a>
-        </h3>
-        <ul className="PostUser-badges badges">{listItems(user.badges().toArray())}</ul>
-        {card}
-      </div>
-    );
-  }
-
-  config(isInitialized) {
-    if (isInitialized) return;
-
-    let timeout;
-
-    this.$()
-      .on('mouseover', 'h3 a, .UserCard', () => {
-        clearTimeout(timeout);
-        timeout = setTimeout(this.showCard.bind(this), 500);
-      })
-      .on('mouseout', 'h3 a, .UserCard', () => {
-        clearTimeout(timeout);
-        timeout = setTimeout(this.hideCard.bind(this), 250);
-      });
-  }
-
-  /**
-   * Show the user card.
-   */
-  showCard() {
-    this.cardVisible = true;
-
-    m.redraw();
-
-    setTimeout(() => this.$('.UserCard').addClass('in'));
-  }
-
-  /**
-   * Hide the user card.
-   */
-  hideCard() {
-    this.$('.UserCard')
-      .removeClass('in')
-      .one('transitionend webkitTransitionEnd oTransitionEnd', () => {
-        this.cardVisible = false;
-        m.redraw();
-      });
-  }
-}
diff --git a/js/old/forum/components/PostsUserPage.js b/js/old/forum/components/PostsUserPage.js
deleted file mode 100644
index 1272f4153..000000000
--- a/js/old/forum/components/PostsUserPage.js
+++ /dev/null
@@ -1,162 +0,0 @@
-import UserPage from './UserPage';
-import LoadingIndicator from '../../common/components/LoadingIndicator';
-import Button from '../../common/components/Button';
-import Placeholder from '../../common/components/Placeholder';
-import CommentPost from './CommentPost';
-
-/**
- * The `PostsUserPage` component shows a user's activity feed inside of their
- * profile.
- */
-export default class PostsUserPage extends UserPage {
-  init() {
-    super.init();
-
-    /**
-     * Whether or not the activity feed is currently loading.
-     *
-     * @type {Boolean}
-     */
-    this.loading = true;
-
-    /**
-     * Whether or not there are any more activity items that can be loaded.
-     *
-     * @type {Boolean}
-     */
-    this.moreResults = false;
-
-    /**
-     * The Post models in the feed.
-     *
-     * @type {Post[]}
-     */
-    this.posts = [];
-
-    /**
-     * The number of activity items to load per request.
-     *
-     * @type {Integer}
-     */
-    this.loadLimit = 20;
-
-    this.loadUser(m.route.param('username'));
-  }
-
-  content() {
-    if (this.posts.length === 0 && !this.loading) {
-      return (
-        <div className="PostsUserPage">
-          <Placeholder text={app.translator.trans('core.forum.user.posts_empty_text')} />
-        </div>
-      );
-    }
-
-    let footer;
-
-    if (this.loading) {
-      footer = LoadingIndicator.component();
-    } else if (this.moreResults) {
-      footer = (
-        <div className="PostsUserPage-loadMore">
-          {Button.component({
-            children: app.translator.trans('core.forum.user.posts_load_more_button'),
-            className: 'Button',
-            onclick: this.loadMore.bind(this),
-          })}
-        </div>
-      );
-    }
-
-    return (
-      <div className="PostsUserPage">
-        <ul className="PostsUserPage-list">
-          {this.posts.map((post) => (
-            <li>
-              <div className="PostsUserPage-discussion">
-                {app.translator.trans('core.forum.user.in_discussion_text', {
-                  discussion: (
-                    <a href={app.route.post(post)} config={m.route}>
-                      {post.discussion().title()}
-                    </a>
-                  ),
-                })}
-              </div>
-              {CommentPost.component({ post })}
-            </li>
-          ))}
-        </ul>
-        <div className="PostsUserPage-loadMore">{footer}</div>
-      </div>
-    );
-  }
-
-  /**
-   * Initialize the component with a user, and trigger the loading of their
-   * activity feed.
-   */
-  show(user) {
-    super.show(user);
-
-    this.refresh();
-  }
-
-  /**
-   * Clear and reload the user's activity feed.
-   *
-   * @public
-   */
-  refresh() {
-    this.loading = true;
-    this.posts = [];
-
-    m.lazyRedraw();
-
-    this.loadResults().then(this.parseResults.bind(this));
-  }
-
-  /**
-   * Load a new page of the user's activity feed.
-   *
-   * @param {Integer} [offset] The position to start getting results from.
-   * @return {Promise}
-   * @protected
-   */
-  loadResults(offset) {
-    return app.store.find('posts', {
-      filter: {
-        user: this.user.id(),
-        type: 'comment',
-      },
-      page: { offset, limit: this.loadLimit },
-      sort: '-createdAt',
-    });
-  }
-
-  /**
-   * Load the next page of results.
-   *
-   * @public
-   */
-  loadMore() {
-    this.loading = true;
-    this.loadResults(this.posts.length).then(this.parseResults.bind(this));
-  }
-
-  /**
-   * Parse results and append them to the activity feed.
-   *
-   * @param {Post[]} results
-   * @return {Post[]}
-   */
-  parseResults(results) {
-    this.loading = false;
-
-    [].push.apply(this.posts, results);
-
-    this.moreResults = results.length >= this.loadLimit;
-    m.redraw();
-
-    return results;
-  }
-}
diff --git a/js/old/forum/components/RenameDiscussionModal.js b/js/old/forum/components/RenameDiscussionModal.js
deleted file mode 100644
index 5e48f7c57..000000000
--- a/js/old/forum/components/RenameDiscussionModal.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import Modal from '../../common/components/Modal';
-import Button from '../../common/components/Button';
-
-/**
- * The 'RenameDiscussionModal' displays a modal dialog with an input to rename a discussion
- */
-export default class RenameDiscussionModal extends Modal {
-  init() {
-    super.init();
-
-    this.discussion = this.props.discussion;
-    this.currentTitle = this.props.currentTitle;
-    this.newTitle = m.prop(this.currentTitle);
-  }
-
-  className() {
-    return 'RenameDiscussionModal Modal--small';
-  }
-
-  title() {
-    return app.translator.trans('core.forum.rename_discussion.title');
-  }
-
-  content() {
-    return (
-      <div className="Modal-body">
-        <div className="Form Form--centered">
-          <div className="Form-group">
-            <input className="FormControl" bidi={this.newTitle} type="text" />
-          </div>
-          <div className="Form-group">
-            {Button.component({
-              className: 'Button Button--primary Button--block',
-              type: 'submit',
-              loading: this.loading,
-              children: app.translator.trans('core.forum.rename_discussion.submit_button'),
-            })}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  onsubmit(e) {
-    e.preventDefault();
-
-    this.loading = true;
-
-    const title = this.newTitle;
-    const currentTitle = this.currentTitle;
-
-    // If the title is different to what it was before, then save it. After the
-    // save has completed, update the post stream as there will be a new post
-    // indicating that the discussion was renamed.
-    if (title && title !== currentTitle) {
-      return this.discussion
-        .save({ title })
-        .then(() => {
-          if (app.viewingDiscussion(this.discussion)) {
-            app.current.stream.update();
-          }
-          m.redraw();
-          this.hide();
-        })
-        .catch(() => {
-          this.loading = false;
-          m.redraw();
-        });
-    } else {
-      this.hide();
-    }
-  }
-}
diff --git a/js/old/forum/components/ReplyComposer.js b/js/old/forum/components/ReplyComposer.js
deleted file mode 100644
index ded948182..000000000
--- a/js/old/forum/components/ReplyComposer.js
+++ /dev/null
@@ -1,118 +0,0 @@
-import ComposerBody from './ComposerBody';
-import Alert from '../../common/components/Alert';
-import Button from '../../common/components/Button';
-import icon from '../../common/helpers/icon';
-import extractText from '../../common/utils/extractText';
-
-function minimizeComposerIfFullScreen(e) {
-  if (app.composer.isFullScreen()) {
-    app.composer.minimize();
-    e.stopPropagation();
-  }
-}
-
-/**
- * The `ReplyComposer` component displays the composer content for replying to a
- * discussion.
- *
- * ### Props
- *
- * - All of the props of ComposerBody
- * - `discussion`
- */
-export default class ReplyComposer extends ComposerBody {
-  init() {
-    super.init();
-
-    this.editor.props.preview = (e) => {
-      minimizeComposerIfFullScreen(e);
-
-      m.route(app.route.discussion(this.props.discussion, 'reply'));
-    };
-  }
-
-  static initProps(props) {
-    super.initProps(props);
-
-    props.placeholder = props.placeholder || extractText(app.translator.trans('core.forum.composer_reply.body_placeholder'));
-    props.submitLabel = props.submitLabel || app.translator.trans('core.forum.composer_reply.submit_button');
-    props.confirmExit = props.confirmExit || extractText(app.translator.trans('core.forum.composer_reply.discard_confirmation'));
-  }
-
-  headerItems() {
-    const items = super.headerItems();
-    const discussion = this.props.discussion;
-
-    const routeAndMinimize = function (element, isInitialized) {
-      if (isInitialized) return;
-      $(element).on('click', minimizeComposerIfFullScreen);
-      m.route.apply(this, arguments);
-    };
-
-    items.add(
-      'title',
-      <h3>
-        {icon('fas fa-reply')}{' '}
-        <a href={app.route.discussion(discussion)} config={routeAndMinimize}>
-          {discussion.title()}
-        </a>
-      </h3>
-    );
-
-    return items;
-  }
-
-  /**
-   * Get the data to submit to the server when the reply is saved.
-   *
-   * @return {Object}
-   */
-  data() {
-    return {
-      content: this.content(),
-      relationships: { discussion: this.props.discussion },
-    };
-  }
-
-  onsubmit() {
-    const discussion = this.props.discussion;
-
-    this.loading = true;
-    m.redraw();
-
-    const data = this.data();
-
-    app.store
-      .createRecord('posts')
-      .save(data)
-      .then((post) => {
-        // If we're currently viewing the discussion which this reply was made
-        // in, then we can update the post stream and scroll to the post.
-        if (app.viewingDiscussion(discussion)) {
-          app.current.stream.update().then(() => app.current.stream.goToNumber(post.number()));
-        } else {
-          // Otherwise, we'll create an alert message to inform the user that
-          // their reply has been posted, containing a button which will
-          // transition to their new post when clicked.
-          let alert;
-          const viewButton = Button.component({
-            className: 'Button Button--link',
-            children: app.translator.trans('core.forum.composer_reply.view_button'),
-            onclick: () => {
-              m.route(app.route.post(post));
-              app.alerts.dismiss(alert);
-            },
-          });
-          app.alerts.show(
-            (alert = new Alert({
-              type: 'success',
-              children: app.translator.trans('core.forum.composer_reply.posted_message'),
-              controls: [viewButton],
-            }))
-          );
-        }
-
-        app.composer.hide();
-      }, this.loaded.bind(this));
-  }
-}
diff --git a/js/old/forum/components/ReplyPlaceholder.js b/js/old/forum/components/ReplyPlaceholder.js
deleted file mode 100644
index fba927d00..000000000
--- a/js/old/forum/components/ReplyPlaceholder.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/*global s9e*/
-
-import Component from '../../common/Component';
-import avatar from '../../common/helpers/avatar';
-import username from '../../common/helpers/username';
-import DiscussionControls from '../utils/DiscussionControls';
-
-/**
- * The `ReplyPlaceholder` component displays a placeholder for a reply, which,
- * when clicked, opens the reply composer.
- *
- * ### Props
- *
- * - `discussion`
- */
-export default class ReplyPlaceholder extends Component {
-  view() {
-    if (app.composingReplyTo(this.props.discussion)) {
-      return (
-        <article className="Post CommentPost editing">
-          <header className="Post-header">
-            <div className="PostUser">
-              <h3>
-                {avatar(app.session.user, { className: 'PostUser-avatar' })}
-                {username(app.session.user)}
-              </h3>
-            </div>
-          </header>
-          <div className="Post-body" config={this.configPreview.bind(this)} />
-        </article>
-      );
-    }
-
-    const reply = () => {
-      DiscussionControls.replyAction.call(this.props.discussion, true);
-    };
-
-    return (
-      <article className="Post ReplyPlaceholder" onclick={reply}>
-        <header className="Post-header">
-          {avatar(app.session.user, { className: 'PostUser-avatar' })} {app.translator.trans('core.forum.post_stream.reply_placeholder')}
-        </header>
-      </article>
-    );
-  }
-
-  configPreview(element, isInitialized, context) {
-    if (isInitialized) return;
-
-    // Every 50ms, if the composer content has changed, then update the post's
-    // body with a preview.
-    let preview;
-    const updateInterval = setInterval(() => {
-      // Since we're polling, the composer may have been closed in the meantime,
-      // so we bail in that case.
-      if (!app.composer.component) return;
-
-      const content = app.composer.component.content();
-
-      if (preview === content) return;
-
-      preview = content;
-
-      const anchorToBottom = $(window).scrollTop() + $(window).height() >= $(document).height();
-
-      s9e.TextFormatter.preview(preview || '', element);
-
-      if (anchorToBottom) {
-        $(window).scrollTop($(document).height());
-      }
-    }, 50);
-
-    context.onunload = () => clearInterval(updateInterval);
-  }
-}
diff --git a/js/old/forum/components/Search.js b/js/old/forum/components/Search.js
deleted file mode 100644
index d2d6f4d69..000000000
--- a/js/old/forum/components/Search.js
+++ /dev/null
@@ -1,317 +0,0 @@
-import Component from '../../common/Component';
-import LoadingIndicator from '../../common/components/LoadingIndicator';
-import ItemList from '../../common/utils/ItemList';
-import classList from '../../common/utils/classList';
-import extractText from '../../common/utils/extractText';
-import KeyboardNavigatable from '../utils/KeyboardNavigatable';
-import icon from '../../common/helpers/icon';
-import DiscussionsSearchSource from './DiscussionsSearchSource';
-import UsersSearchSource from './UsersSearchSource';
-
-/**
- * The `Search` component displays a menu of as-you-type results from a variety
- * of sources.
- *
- * The search box will be 'activated' if the app's current controller implements
- * a `searching` method that returns a truthy value. If this is the case, an 'x'
- * button will be shown next to the search field, and clicking it will call the
- * `clearSearch` method on the controller.
- */
-export default class Search extends Component {
-  init() {
-    /**
-     * The value of the search input.
-     *
-     * @type {Function}
-     */
-    this.value = m.prop('');
-
-    /**
-     * Whether or not the search input has focus.
-     *
-     * @type {Boolean}
-     */
-    this.hasFocus = false;
-
-    /**
-     * An array of SearchSources.
-     *
-     * @type {SearchSource[]}
-     */
-    this.sources = null;
-
-    /**
-     * The number of sources that are still loading results.
-     *
-     * @type {Integer}
-     */
-    this.loadingSources = 0;
-
-    /**
-     * A list of queries that have been searched for.
-     *
-     * @type {Array}
-     */
-    this.searched = [];
-
-    /**
-     * The index of the currently-selected <li> in the results list. This can be
-     * a unique string (to account for the fact that an item's position may jump
-     * around as new results load), but otherwise it will be numeric (the
-     * sequential position within the list).
-     *
-     * @type {String|Integer}
-     */
-    this.index = 0;
-  }
-
-  view() {
-    const currentSearch = this.getCurrentSearch();
-
-    // Initialize search input value in the view rather than the constructor so
-    // that we have access to app.current.
-    if (typeof this.value() === 'undefined') {
-      this.value(currentSearch || '');
-    }
-
-    // Initialize search sources in the view rather than the constructor so
-    // that we have access to app.forum.
-    if (!this.sources) {
-      this.sources = this.sourceItems().toArray();
-    }
-
-    // Hide the search view if no sources were loaded
-    if (!this.sources.length) return <div/>;
-
-    return (
-      <div
-        className={
-          'Search ' +
-          classList({
-            open: this.value() && this.hasFocus,
-            focused: this.hasFocus,
-            active: !!currentSearch,
-            loading: !!this.loadingSources,
-          })
-        }
-      >
-        <div className="Search-input">
-          <input
-            className="FormControl"
-            type="search"
-            placeholder={extractText(app.translator.trans('core.forum.header.search_placeholder'))}
-            value={this.value()}
-            oninput={m.withAttr('value', this.value)}
-            onfocus={() => (this.hasFocus = true)}
-            onblur={() => (this.hasFocus = false)}
-          />
-          {this.loadingSources ? (
-            LoadingIndicator.component({ size: 'tiny', className: 'Button Button--icon Button--link' })
-          ) : currentSearch ? (
-            <button className="Search-clear Button Button--icon Button--link" onclick={this.clear.bind(this)}>
-              {icon('fas fa-times-circle')}
-            </button>
-          ) : (
-            ''
-          )}
-        </div>
-        <ul className="Dropdown-menu Search-results">
-          {this.value() && this.hasFocus ? this.sources.map((source) => source.view(this.value())) : ''}
-        </ul>
-      </div>
-    );
-  }
-
-  config(isInitialized) {
-    // Highlight the item that is currently selected.
-    this.setIndex(this.getCurrentNumericIndex());
-
-    if (isInitialized) return;
-
-    const search = this;
-
-    this.$('.Search-results')
-      .on('mousedown', (e) => e.preventDefault())
-      .on('click', () => this.$('input').blur())
-
-      // Whenever the mouse is hovered over a search result, highlight it.
-      .on('mouseenter', '> li:not(.Dropdown-header)', function () {
-        search.setIndex(search.selectableItems().index(this));
-      });
-
-    const $input = this.$('input');
-
-    this.navigator = new KeyboardNavigatable();
-    this.navigator
-      .onUp(() => this.setIndex(this.getCurrentNumericIndex() - 1, true))
-      .onDown(() => this.setIndex(this.getCurrentNumericIndex() + 1, true))
-      .onSelect(this.selectResult.bind(this))
-      .onCancel(this.clear.bind(this))
-      .bindTo($input);
-
-    // Handle input key events on the search input, triggering results to load.
-    $input
-      .on('input focus', function () {
-        const query = this.value.toLowerCase();
-
-        if (!query) return;
-
-        clearTimeout(search.searchTimeout);
-        search.searchTimeout = setTimeout(() => {
-          if (search.searched.indexOf(query) !== -1) return;
-
-          if (query.length >= 3) {
-            search.sources.map((source) => {
-              if (!source.search) return;
-
-              search.loadingSources++;
-
-              source.search(query).then(() => {
-                search.loadingSources = Math.max(0, search.loadingSources - 1);
-                m.redraw();
-              });
-            });
-          }
-
-          search.searched.push(query);
-          m.redraw();
-        }, 250);
-      })
-
-      .on('focus', function () {
-        $(this)
-          .one('mouseup', (e) => e.preventDefault())
-          .select();
-      });
-  }
-
-  /**
-   * Get the active search in the app's current controller.
-   *
-   * @return {String}
-   */
-  getCurrentSearch() {
-    return app.current && typeof app.current.searching === 'function' && app.current.searching();
-  }
-
-  /**
-   * Navigate to the currently selected search result and close the list.
-   */
-  selectResult() {
-    clearTimeout(this.searchTimeout);
-    this.loadingSources = 0;
-
-    if (this.value()) {
-      m.route(this.getItem(this.index).find('a').attr('href'));
-    } else {
-      this.clear();
-    }
-
-    this.$('input').blur();
-  }
-
-  /**
-   * Clear the search input and the current controller's active search.
-   */
-  clear() {
-    this.value('');
-
-    if (this.getCurrentSearch()) {
-      app.current.clearSearch();
-    } else {
-      m.redraw();
-    }
-  }
-
-  /**
-   * Build an item list of SearchSources.
-   *
-   * @return {ItemList}
-   */
-  sourceItems() {
-    const items = new ItemList();
-
-    if (app.forum.attribute('canViewDiscussions')) items.add('discussions', new DiscussionsSearchSource());
-    if (app.forum.attribute('canViewUserList')) items.add('users', new UsersSearchSource());
-
-    return items;
-  }
-
-  /**
-   * Get all of the search result items that are selectable.
-   *
-   * @return {jQuery}
-   */
-  selectableItems() {
-    return this.$('.Search-results > li:not(.Dropdown-header)');
-  }
-
-  /**
-   * Get the position of the currently selected search result item.
-   *
-   * @return {Integer}
-   */
-  getCurrentNumericIndex() {
-    return this.selectableItems().index(this.getItem(this.index));
-  }
-
-  /**
-   * Get the <li> in the search results with the given index (numeric or named).
-   *
-   * @param {String} index
-   * @return {DOMElement}
-   */
-  getItem(index) {
-    const $items = this.selectableItems();
-    let $item = $items.filter(`[data-index="${index}"]`);
-
-    if (!$item.length) {
-      $item = $items.eq(index);
-    }
-
-    return $item;
-  }
-
-  /**
-   * Set the currently-selected search result item to the one with the given
-   * index.
-   *
-   * @param {Integer} index
-   * @param {Boolean} scrollToItem Whether or not to scroll the dropdown so that
-   *     the item is in view.
-   */
-  setIndex(index, scrollToItem) {
-    const $items = this.selectableItems();
-    const $dropdown = $items.parent();
-
-    let fixedIndex = index;
-    if (index < 0) {
-      fixedIndex = $items.length - 1;
-    } else if (index >= $items.length) {
-      fixedIndex = 0;
-    }
-
-    const $item = $items.removeClass('active').eq(fixedIndex).addClass('active');
-
-    this.index = $item.attr('data-index') || fixedIndex;
-
-    if (scrollToItem) {
-      const dropdownScroll = $dropdown.scrollTop();
-      const dropdownTop = $dropdown.offset().top;
-      const dropdownBottom = dropdownTop + $dropdown.outerHeight();
-      const itemTop = $item.offset().top;
-      const itemBottom = itemTop + $item.outerHeight();
-
-      let scrollTop;
-      if (itemTop < dropdownTop) {
-        scrollTop = dropdownScroll - dropdownTop + itemTop - parseInt($dropdown.css('padding-top'), 10);
-      } else if (itemBottom > dropdownBottom) {
-        scrollTop = dropdownScroll - dropdownBottom + itemBottom + parseInt($dropdown.css('padding-bottom'), 10);
-      }
-
-      if (typeof scrollTop !== 'undefined') {
-        $dropdown.stop(true).animate({ scrollTop }, 100);
-      }
-    }
-  }
-}
diff --git a/js/old/forum/components/SearchSource.js b/js/old/forum/components/SearchSource.js
deleted file mode 100644
index 38947a180..000000000
--- a/js/old/forum/components/SearchSource.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * The `SearchSource` interface defines a section of search results in the
- * search dropdown.
- *
- * Search sources should be registered with the `Search` component instance
- * (app.search) by extending the `sourceItems` method. When the user types a
- * query, each search source will be prompted to load search results via the
- * `search` method. When the dropdown is redrawn, it will be constructed by
- * putting together the output from the `view` method of each source.
- *
- * @interface
- */
-export default class SearchSource {
-  /**
-   * Make a request to get results for the given query.
-   *
-   * @param {String} query
-   * @return {Promise}
-   */
-  search() {}
-
-  /**
-   * Get an array of virtual <li>s that list the search results for the given
-   * query.
-   *
-   * @param {String} query
-   * @return {Object}
-   */
-  view() {}
-}
diff --git a/js/old/forum/components/SessionDropdown.js b/js/old/forum/components/SessionDropdown.js
deleted file mode 100644
index 1f6c431c8..000000000
--- a/js/old/forum/components/SessionDropdown.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import avatar from '../../common/helpers/avatar';
-import username from '../../common/helpers/username';
-import Dropdown from '../../common/components/Dropdown';
-import LinkButton from '../../common/components/LinkButton';
-import Button from '../../common/components/Button';
-import ItemList from '../../common/utils/ItemList';
-import Separator from '../../common/components/Separator';
-import Group from '../../common/models/Group';
-
-/**
- * The `SessionDropdown` component shows a button with the current user's
- * avatar/name, with a dropdown of session controls.
- */
-export default class SessionDropdown extends Dropdown {
-  static initProps(props) {
-    super.initProps(props);
-
-    props.className = 'SessionDropdown';
-    props.buttonClassName = 'Button Button--user Button--flat';
-    props.menuClassName = 'Dropdown-menu--right';
-  }
-
-  view() {
-    this.props.children = this.items().toArray();
-
-    return super.view();
-  }
-
-  getButtonContent() {
-    const user = app.session.user;
-
-    return [avatar(user), ' ', <span className="Button-label">{username(user)}</span>];
-  }
-
-  /**
-   * Build an item list for the contents of the dropdown menu.
-   *
-   * @return {ItemList}
-   */
-  items() {
-    const items = new ItemList();
-    const user = app.session.user;
-
-    items.add(
-      'profile',
-      LinkButton.component({
-        icon: 'fas fa-user',
-        children: app.translator.trans('core.forum.header.profile_button'),
-        href: app.route.user(user),
-      }),
-      100
-    );
-
-    items.add(
-      'settings',
-      LinkButton.component({
-        icon: 'fas fa-cog',
-        children: app.translator.trans('core.forum.header.settings_button'),
-        href: app.route('settings'),
-      }),
-      50
-    );
-
-    if (app.forum.attribute('adminUrl')) {
-      items.add(
-        'administration',
-        LinkButton.component({
-          icon: 'fas fa-wrench',
-          children: app.translator.trans('core.forum.header.admin_button'),
-          href: app.forum.attribute('adminUrl'),
-          target: '_blank',
-          config: () => {},
-        }),
-        0
-      );
-    }
-
-    items.add('separator', Separator.component(), -90);
-
-    items.add(
-      'logOut',
-      Button.component({
-        icon: 'fas fa-sign-out-alt',
-        children: app.translator.trans('core.forum.header.log_out_button'),
-        onclick: app.session.logout.bind(app.session),
-      }),
-      -100
-    );
-
-    return items;
-  }
-}
diff --git a/js/old/forum/components/SettingsPage.js b/js/old/forum/components/SettingsPage.js
deleted file mode 100644
index 439e40753..000000000
--- a/js/old/forum/components/SettingsPage.js
+++ /dev/null
@@ -1,151 +0,0 @@
-import UserPage from './UserPage';
-import ItemList from '../../common/utils/ItemList';
-import Switch from '../../common/components/Switch';
-import Button from '../../common/components/Button';
-import FieldSet from '../../common/components/FieldSet';
-import NotificationGrid from './NotificationGrid';
-import ChangePasswordModal from './ChangePasswordModal';
-import ChangeEmailModal from './ChangeEmailModal';
-import listItems from '../../common/helpers/listItems';
-
-/**
- * The `SettingsPage` component displays the user's settings control panel, in
- * the context of their user profile.
- */
-export default class SettingsPage extends UserPage {
-  init() {
-    super.init();
-
-    this.show(app.session.user);
-    app.setTitle(app.translator.trans('core.forum.settings.title'));
-  }
-
-  content() {
-    return (
-      <div className="SettingsPage">
-        <ul>{listItems(this.settingsItems().toArray())}</ul>
-      </div>
-    );
-  }
-
-  /**
-   * Build an item list for the user's settings controls.
-   *
-   * @return {ItemList}
-   */
-  settingsItems() {
-    const items = new ItemList();
-
-    items.add(
-      'account',
-      FieldSet.component({
-        label: app.translator.trans('core.forum.settings.account_heading'),
-        className: 'Settings-account',
-        children: this.accountItems().toArray(),
-      })
-    );
-
-    items.add(
-      'notifications',
-      FieldSet.component({
-        label: app.translator.trans('core.forum.settings.notifications_heading'),
-        className: 'Settings-notifications',
-        children: this.notificationsItems().toArray(),
-      })
-    );
-
-    items.add(
-      'privacy',
-      FieldSet.component({
-        label: app.translator.trans('core.forum.settings.privacy_heading'),
-        className: 'Settings-privacy',
-        children: this.privacyItems().toArray(),
-      })
-    );
-
-    return items;
-  }
-
-  /**
-   * Build an item list for the user's account settings.
-   *
-   * @return {ItemList}
-   */
-  accountItems() {
-    const items = new ItemList();
-
-    items.add(
-      'changePassword',
-      Button.component({
-        children: app.translator.trans('core.forum.settings.change_password_button'),
-        className: 'Button',
-        onclick: () => app.modal.show(new ChangePasswordModal()),
-      })
-    );
-
-    items.add(
-      'changeEmail',
-      Button.component({
-        children: app.translator.trans('core.forum.settings.change_email_button'),
-        className: 'Button',
-        onclick: () => app.modal.show(new ChangeEmailModal()),
-      })
-    );
-
-    return items;
-  }
-
-  /**
-   * Build an item list for the user's notification settings.
-   *
-   * @return {ItemList}
-   */
-  notificationsItems() {
-    const items = new ItemList();
-
-    items.add('notificationGrid', NotificationGrid.component({ user: this.user }));
-
-    return items;
-  }
-
-  /**
-   * Generate a callback that will save a value to the given preference.
-   *
-   * @param {String} key
-   * @return {Function}
-   */
-  preferenceSaver(key) {
-    return (value, component) => {
-      if (component) component.loading = true;
-      m.redraw();
-
-      this.user.savePreferences({ [key]: value }).then(() => {
-        if (component) component.loading = false;
-        m.redraw();
-      });
-    };
-  }
-
-  /**
-   * Build an item list for the user's privacy settings.
-   *
-   * @return {ItemList}
-   */
-  privacyItems() {
-    const items = new ItemList();
-
-    items.add(
-      'discloseOnline',
-      Switch.component({
-        children: app.translator.trans('core.forum.settings.privacy_disclose_online_label'),
-        state: this.user.preferences().discloseOnline,
-        onchange: (value, component) => {
-          this.user.pushAttributes({ lastSeenAt: null });
-          this.preferenceSaver('discloseOnline')(value, component);
-        },
-      })
-    );
-
-    return items;
-  }
-}
diff --git a/js/old/forum/components/SignUpModal.js b/js/old/forum/components/SignUpModal.js
deleted file mode 100644
index ab584c29c..000000000
--- a/js/old/forum/components/SignUpModal.js
+++ /dev/null
@@ -1,196 +0,0 @@
-import Modal from '../../common/components/Modal';
-import LogInModal from './LogInModal';
-import Button from '../../common/components/Button';
-import LogInButtons from './LogInButtons';
-import extractText from '../../common/utils/extractText';
-import ItemList from '../../common/utils/ItemList';
-
-/**
- * The `SignUpModal` component displays a modal dialog with a singup form.
- *
- * ### Props
- *
- * - `username`
- * - `email`
- * - `password`
- * - `token` An email token to sign up with.
- */
-export default class SignUpModal extends Modal {
-  init() {
-    super.init();
-
-    /**
-     * The value of the username input.
-     *
-     * @type {Function}
-     */
-    this.username = m.prop(this.props.username || '');
-
-    /**
-     * The value of the email input.
-     *
-     * @type {Function}
-     */
-    this.email = m.prop(this.props.email || '');
-
-    /**
-     * The value of the password input.
-     *
-     * @type {Function}
-     */
-    this.password = m.prop(this.props.password || '');
-  }
-
-  className() {
-    return 'Modal--small SignUpModal';
-  }
-
-  title() {
-    return app.translator.trans('core.forum.sign_up.title');
-  }
-
-  content() {
-    return [<div className="Modal-body">{this.body()}</div>, <div className="Modal-footer">{this.footer()}</div>];
-  }
-
-  isProvided(field) {
-    return this.props.provided && this.props.provided.indexOf(field) !== -1;
-  }
-
-  body() {
-    return [this.props.token ? '' : <LogInButtons />, <div className="Form Form--centered">{this.fields().toArray()}</div>];
-  }
-
-  fields() {
-    const items = new ItemList();
-
-    items.add(
-      'username',
-      <div className="Form-group">
-        <input
-          className="FormControl"
-          name="username"
-          type="text"
-          placeholder={extractText(app.translator.trans('core.forum.sign_up.username_placeholder'))}
-          value={this.username()}
-          onchange={m.withAttr('value', this.username)}
-          disabled={this.loading || this.isProvided('username')}
-        />
-      </div>,
-      30
-    );
-
-    items.add(
-      'email',
-      <div className="Form-group">
-        <input
-          className="FormControl"
-          name="email"
-          type="email"
-          placeholder={extractText(app.translator.trans('core.forum.sign_up.email_placeholder'))}
-          value={this.email()}
-          onchange={m.withAttr('value', this.email)}
-          disabled={this.loading || this.isProvided('email')}
-        />
-      </div>,
-      20
-    );
-
-    if (!this.props.token) {
-      items.add(
-        'password',
-        <div className="Form-group">
-          <input
-            className="FormControl"
-            name="password"
-            type="password"
-            placeholder={extractText(app.translator.trans('core.forum.sign_up.password_placeholder'))}
-            value={this.password()}
-            onchange={m.withAttr('value', this.password)}
-            disabled={this.loading}
-          />
-        </div>,
-        10
-      );
-    }
-
-    items.add(
-      'submit',
-      <div className="Form-group">
-        <Button className="Button Button--primary Button--block" type="submit" loading={this.loading}>
-          {app.translator.trans('core.forum.sign_up.submit_button')}
-        </Button>
-      </div>,
-      -10
-    );
-
-    return items;
-  }
-
-  footer() {
-    return [
-      <p className="SignUpModal-logIn">{app.translator.trans('core.forum.sign_up.log_in_text', { a: <a onclick={this.logIn.bind(this)} /> })}</p>,
-    ];
-  }
-
-  /**
-   * Open the log in modal, prefilling it with an email/username/password if
-   * the user has entered one.
-   *
-   * @public
-   */
-  logIn() {
-    const props = {
-      identification: this.email() || this.username(),
-      password: this.password(),
-    };
-
-    app.modal.show(new LogInModal(props));
-  }
-
-  onready() {
-    if (this.props.username && !this.props.email) {
-      this.$('[name=email]').select();
-    } else {
-      this.$('[name=username]').select();
-    }
-  }
-
-  onsubmit(e) {
-    e.preventDefault();
-
-    this.loading = true;
-
-    const data = this.submitData();
-
-    app
-      .request({
-        url: app.forum.attribute('baseUrl') + '/register',
-        method: 'POST',
-        data,
-        errorHandler: this.onerror.bind(this),
-      })
-      .then(() => window.location.reload(), this.loaded.bind(this));
-  }
-
-  /**
-   * Get the data that should be submitted in the sign-up request.
-   *
-   * @return {Object}
-   * @public
-   */
-  submitData() {
-    const data = {
-      username: this.username(),
-      email: this.email(),
-    };
-
-    if (this.props.token) {
-      data.token = this.props.token;
-    } else {
-      data.password = this.password();
-    }
-
-    return data;
-  }
-}
diff --git a/js/old/forum/components/TerminalPost.js b/js/old/forum/components/TerminalPost.js
deleted file mode 100644
index 8213cb5a8..000000000
--- a/js/old/forum/components/TerminalPost.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import Component from '../../common/Component';
-import humanTime from '../../common/helpers/humanTime';
-import icon from '../../common/helpers/icon';
-
-/**
- * Displays information about a the first or last post in a discussion.
- *
- * ### Props
- *
- * - `discussion`
- * - `lastPost`
- */
-export default class TerminalPost extends Component {
-  view() {
-    const discussion = this.props.discussion;
-    const lastPost = this.props.lastPost && discussion.replyCount();
-
-    const user = discussion[lastPost ? 'lastPostedUser' : 'user']();
-    const time = discussion[lastPost ? 'lastPostedAt' : 'createdAt']();
-
-    return (
-      <span>
-        {lastPost ? icon('fas fa-reply') : ''}{' '}
-        {app.translator.trans('core.forum.discussion_list.' + (lastPost ? 'replied' : 'started') + '_text', {
-          user,
-          ago: humanTime(time),
-        })}
-      </span>
-    );
-  }
-}
diff --git a/js/old/forum/components/TextEditor.js b/js/old/forum/components/TextEditor.js
deleted file mode 100644
index 1f3e971de..000000000
--- a/js/old/forum/components/TextEditor.js
+++ /dev/null
@@ -1,186 +0,0 @@
-import Component from '../../common/Component';
-import ItemList from '../../common/utils/ItemList';
-import listItems from '../../common/helpers/listItems';
-import Button from '../../common/components/Button';
-
-/**
- * The `TextEditor` component displays a textarea with controls, including a
- * submit button.
- *
- * ### Props
- *
- * - `submitLabel`
- * - `value`
- * - `placeholder`
- * - `disabled`
- */
-export default class TextEditor extends Component {
-  init() {
-    /**
-     * The value of the textarea.
-     *
-     * @type {String}
-     */
-    this.value = m.prop(this.props.value || '');
-  }
-
-  view() {
-    return (
-      <div className="TextEditor">
-        <textarea
-          className="FormControl Composer-flexible"
-          config={this.configTextarea.bind(this)}
-          oninput={m.withAttr('value', this.oninput.bind(this))}
-          placeholder={this.props.placeholder || ''}
-          disabled={!!this.props.disabled}
-          value={this.value()}
-        />
-
-        <ul className="TextEditor-controls Composer-footer">
-          {listItems(this.controlItems().toArray())}
-          <li className="TextEditor-toolbar">{this.toolbarItems().toArray()}</li>
-        </ul>
-      </div>
-    );
-  }
-
-  /**
-   * Configure the textarea element.
-   *
-   * @param {DOMElement} element
-   * @param {Boolean} isInitialized
-   */
-  configTextarea(element, isInitialized) {
-    if (isInitialized) return;
-
-    const handler = () => {
-      this.onsubmit();
-      m.redraw();
-    };
-
-    $(element).bind('keydown', 'meta+return', handler);
-    $(element).bind('keydown', 'ctrl+return', handler);
-  }
-
-  /**
-   * Build an item list for the text editor controls.
-   *
-   * @return {ItemList}
-   */
-  controlItems() {
-    const items = new ItemList();
-
-    items.add(
-      'submit',
-      Button.component({
-        children: this.props.submitLabel,
-        icon: 'fas fa-paper-plane',
-        className: 'Button Button--primary',
-        itemClassName: 'App-primaryControl',
-        onclick: this.onsubmit.bind(this),
-      })
-    );
-
-    if (this.props.preview) {
-      items.add(
-        'preview',
-        Button.component({
-          icon: 'far fa-eye',
-          className: 'Button Button--icon',
-          onclick: this.props.preview,
-          title: app.translator.trans('core.forum.composer.preview_tooltip'),
-          config: (elm) => $(elm).tooltip(),
-        })
-      );
-    }
-
-    return items;
-  }
-
-  /**
-   * Build an item list for the toolbar controls.
-   *
-   * @return {ItemList}
-   */
-  toolbarItems() {
-    return new ItemList();
-  }
-
-  /**
-   * Set the value of the text editor.
-   *
-   * @param {String} value
-   */
-  setValue(value) {
-    this.$('textarea').val(value).trigger('input');
-  }
-
-  /**
-   * Set the selected range of the textarea.
-   *
-   * @param {Integer} start
-   * @param {Integer} end
-   */
-  setSelectionRange(start, end) {
-    const $textarea = this.$('textarea');
-
-    if (!$textarea.length) return;
-
-    $textarea[0].setSelectionRange(start, end);
-    $textarea.focus();
-  }
-
-  /**
-   * Get the selected range of the textarea.
-   *
-   * @return {Array}
-   */
-  getSelectionRange() {
-    const $textarea = this.$('textarea');
-
-    if (!$textarea.length) return [0, 0];
-
-    return [$textarea[0].selectionStart, $textarea[0].selectionEnd];
-  }
-
-  /**
-   * Insert content into the textarea at the position of the cursor.
-   *
-   * @param {String} insert
-   */
-  insertAtCursor(insert) {
-    const textarea = this.$('textarea')[0];
-    const value = this.value();
-    const index = textarea ? textarea.selectionStart : value.length;
-
-    this.setValue(value.slice(0, index) + insert + value.slice(index));
-
-    // Move the textarea cursor to the end of the content we just inserted.
-    if (textarea) {
-      const pos = index + insert.length;
-      this.setSelectionRange(pos, pos);
-    }
-
-    textarea.dispatchEvent(new CustomEvent('input', { bubbles: true, cancelable: true }));
-  }
-
-  /**
-   * Handle input into the textarea.
-   *
-   * @param {String} value
-   */
-  oninput(value) {
-    this.value(value);
-
-    this.props.onchange(this.value());
-
-    m.redraw.strategy('none');
-  }
-
-  /**
-   * Handle the submit button being clicked.
-   */
-  onsubmit() {
-    this.props.onsubmit(this.value());
-  }
-}
diff --git a/js/old/forum/components/TextEditorButton.js b/js/old/forum/components/TextEditorButton.js
deleted file mode 100644
index 4baf8050b..000000000
--- a/js/old/forum/components/TextEditorButton.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import Button from '../../common/components/Button';
-
-/**
- * The `TextEditorButton` component displays a button suitable for the text
- * editor toolbar.
- */
-export default class TextEditorButton extends Button {
-  static initProps(props) {
-    super.initProps(props);
-
-    props.className = props.className || 'Button Button--icon Button--link';
-  }
-
-  config(isInitialized, context) {
-    super.config(isInitialized, context);
-
-    if (isInitialized) return;
-
-    this.$().tooltip();
-  }
-}
diff --git a/js/old/forum/components/UserCard.js b/js/old/forum/components/UserCard.js
deleted file mode 100644
index 8c0314f6a..000000000
--- a/js/old/forum/components/UserCard.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import Component from '../../common/Component';
-import humanTime from '../../common/utils/humanTime';
-import ItemList from '../../common/utils/ItemList';
-import UserControls from '../utils/UserControls';
-import avatar from '../../common/helpers/avatar';
-import username from '../../common/helpers/username';
-import icon from '../../common/helpers/icon';
-import Dropdown from '../../common/components/Dropdown';
-import AvatarEditor from './AvatarEditor';
-import listItems from '../../common/helpers/listItems';
-
-/**
- * The `UserCard` component displays a user's profile card. This is used both on
- * the `UserPage` (in the hero) and in discussions, shown when hovering over a
- * post author.
- *
- * ### Props
- *
- * - `user`
- * - `className`
- * - `editable`
- * - `controlsButtonClassName`
- */
-export default class UserCard extends Component {
-  view() {
-    const user = this.props.user;
-    const controls = UserControls.controls(user, this).toArray();
-    const color = user.color();
-    const badges = user.badges().toArray();
-
-    return (
-      <div className={'UserCard ' + (this.props.className || '')} style={color ? { backgroundColor: color } : ''}>
-        <div className="darkenBackground">
-          <div className="container">
-            {controls.length
-              ? Dropdown.component({
-                  children: controls,
-                  className: 'UserCard-controls App-primaryControl',
-                  menuClassName: 'Dropdown-menu--right',
-                  buttonClassName: this.props.controlsButtonClassName,
-                  label: app.translator.trans('core.forum.user_controls.button'),
-                  icon: 'fas fa-ellipsis-v',
-                })
-              : ''}
-
-            <div className="UserCard-profile">
-              <h2 className="UserCard-identity">
-                {this.props.editable ? (
-                  [AvatarEditor.component({ user, className: 'UserCard-avatar' }), username(user)]
-                ) : (
-                  <a href={app.route.user(user)} config={m.route}>
-                    <div className="UserCard-avatar">{avatar(user)}</div>
-                    {username(user)}
-                  </a>
-                )}
-              </h2>
-
-              {badges.length ? <ul className="UserCard-badges badges">{listItems(badges)}</ul> : ''}
-
-              <ul className="UserCard-info">{listItems(this.infoItems().toArray())}</ul>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  /**
-   * Build an item list of tidbits of info to show on this user's profile.
-   *
-   * @return {ItemList}
-   */
-  infoItems() {
-    const items = new ItemList();
-    const user = this.props.user;
-    const lastSeenAt = user.lastSeenAt();
-
-    if (lastSeenAt) {
-      const online = user.isOnline();
-
-      items.add(
-        'lastSeen',
-        <span className={'UserCard-lastSeen' + (online ? ' online' : '')}>
-          {online
-            ? [icon('fas fa-circle'), ' ', app.translator.trans('core.forum.user.online_text')]
-            : [icon('far fa-clock'), ' ', humanTime(lastSeenAt)]}
-        </span>
-      );
-    }
-
-    items.add('joined', app.translator.trans('core.forum.user.joined_date_text', { ago: humanTime(user.joinTime()) }));
-
-    return items;
-  }
-}
diff --git a/js/old/forum/components/UserPage.js b/js/old/forum/components/UserPage.js
deleted file mode 100644
index 5569459c8..000000000
--- a/js/old/forum/components/UserPage.js
+++ /dev/null
@@ -1,169 +0,0 @@
-import Page from './Page';
-import ItemList from '../../common/utils/ItemList';
-import affixSidebar from '../utils/affixSidebar';
-import UserCard from './UserCard';
-import LoadingIndicator from '../../common/components/LoadingIndicator';
-import SelectDropdown from '../../common/components/SelectDropdown';
-import LinkButton from '../../common/components/LinkButton';
-import Separator from '../../common/components/Separator';
-import listItems from '../../common/helpers/listItems';
-
-/**
- * The `UserPage` component shows a user's profile. It can be extended to show
- * content inside of the content area. See `ActivityPage` and `SettingsPage` for
- * examples.
- *
- * @abstract
- */
-export default class UserPage extends Page {
-  init() {
-    super.init();
-
-    /**
-     * The user this page is for.
-     *
-     * @type {User}
-     */
-    this.user = null;
-
-    this.bodyClass = 'App--user';
-  }
-
-  view() {
-    return (
-      <div className="UserPage">
-        {this.user
-          ? [
-              UserCard.component({
-                user: this.user,
-                className: 'Hero UserHero',
-                editable: this.user.canEdit() || this.user === app.session.user,
-                controlsButtonClassName: 'Button',
-              }),
-              <div className="container">
-                <div className="sideNavContainer">
-                  <nav className="sideNav UserPage-nav" config={affixSidebar}>
-                    <ul>{listItems(this.sidebarItems().toArray())}</ul>
-                  </nav>
-                  <div className="sideNavOffset UserPage-content">{this.content()}</div>
-                </div>
-              </div>,
-            ]
-          : [LoadingIndicator.component({ className: 'LoadingIndicator--block' })]}
-      </div>
-    );
-  }
-
-  /**
-   * Get the content to display in the user page.
-   *
-   * @return {VirtualElement}
-   */
-  content() {}
-
-  /**
-   * Initialize the component with a user, and trigger the loading of their
-   * activity feed.
-   *
-   * @param {User} user
-   * @protected
-   */
-  show(user) {
-    this.user = user;
-
-    app.setTitle(user.displayName());
-
-    m.redraw();
-  }
-
-  /**
-   * Given a username, load the user's profile from the store, or make a request
-   * if we don't have it yet. Then initialize the profile page with that user.
-   *
-   * @param {String} username
-   */
-  loadUser(username) {
-    const lowercaseUsername = username.toLowerCase();
-
-    // Load the preloaded user object, if any, into the global app store
-    // We don't use the output of the method because it returns raw JSON
-    // instead of the parsed models
-    app.preloadedApiDocument();
-
-    app.store.all('users').some((user) => {
-      if ((user.username().toLowerCase() === lowercaseUsername || user.id() === username) && user.joinTime()) {
-        this.show(user);
-        return true;
-      }
-    });
-
-    if (!this.user) {
-      app.store.find('users', username).then(this.show.bind(this));
-    }
-  }
-
-  /**
-   * Build an item list for the content of the sidebar.
-   *
-   * @return {ItemList}
-   */
-  sidebarItems() {
-    const items = new ItemList();
-
-    items.add(
-      'nav',
-      SelectDropdown.component({
-        children: this.navItems().toArray(),
-        className: 'App-titleControl',
-        buttonClassName: 'Button',
-      })
-    );
-
-    return items;
-  }
-
-  /**
-   * Build an item list for the navigation in the sidebar.
-   *
-   * @return {ItemList}
-   */
-  navItems() {
-    const items = new ItemList();
-    const user = this.user;
-
-    items.add(
-      'posts',
-      LinkButton.component({
-        href: app.route('user.posts', { username: user.username() }),
-        children: [app.translator.trans('core.forum.user.posts_link'), <span className="Button-badge">{user.commentCount()}</span>],
-        icon: 'far fa-comment',
-      }),
-      100
-    );
-
-    items.add(
-      'discussions',
-      LinkButton.component({
-        href: app.route('user.discussions', { username: user.username() }),
-        children: [app.translator.trans('core.forum.user.discussions_link'), <span className="Button-badge">{user.discussionCount()}</span>],
-        icon: 'fas fa-bars',
-      }),
-      90
-    );
-
-    if (app.session.user === user) {
-      items.add('separator', Separator.component(), -90);
-      items.add(
-        'settings',
-        LinkButton.component({
-          href: app.route('settings'),
-          children: app.translator.trans('core.forum.user.settings_link'),
-          icon: 'fas fa-cog',
-        }),
-        -100
-      );
-    }
-
-    return items;
-  }
-}
diff --git a/js/old/forum/components/UsersSearchSource.js b/js/old/forum/components/UsersSearchSource.js
deleted file mode 100644
index 9cd6b589c..000000000
--- a/js/old/forum/components/UsersSearchSource.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import highlight from '../../common/helpers/highlight';
-import avatar from '../../common/helpers/avatar';
-import username from '../../common/helpers/username';
-
-/**
- * The `UsersSearchSource` finds and displays user search results in the search
- * dropdown.
- *
- * @implements SearchSource
- */
-export default class UsersSearchResults {
-  constructor() {
-    this.results = {};
-  }
-
-  search(query) {
-    return app.store
-      .find('users', {
-        filter: { q: query },
-        page: { limit: 5 },
-      })
-      .then((results) => {
-        this.results[query] = results;
-        m.redraw();
-      });
-  }
-
-  view(query) {
-    query = query.toLowerCase();
-
-    const results = (this.results[query] || [])
-      .concat(
-        app.store
-          .all('users')
-          .filter((user) => [user.username(), user.displayName()].some((value) => value.toLowerCase().substr(0, query.length) === query))
-      )
-      .filter((e, i, arr) => arr.lastIndexOf(e) === i)
-      .sort((a, b) => a.displayName().localeCompare(b.displayName()));
-
-    if (!results.length) return '';
-
-    return [
-      <li className="Dropdown-header">{app.translator.trans('core.forum.search.users_heading')}</li>,
-      results.map((user) => {
-        const name = username(user);
-        name.children[0] = highlight(name.children[0], query);
-
-        return (
-          <li className="UserSearchResult" data-index={'users' + user.id()}>
-            <a href={app.route.user(user)} config={m.route}>
-              {avatar(user)}
-              {name}
-            </a>
-          </li>
-        );
-      }),
-    ];
-  }
-}
diff --git a/js/old/forum/components/WelcomeHero.js b/js/old/forum/components/WelcomeHero.js
deleted file mode 100644
index 95f76c148..000000000
--- a/js/old/forum/components/WelcomeHero.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import Component from '../../common/Component';
-import Button from '../../common/components/Button';
-
-/**
- * The `WelcomeHero` component displays a hero that welcomes the user to the
- * forum.
- */
-export default class WelcomeHero extends Component {
-  init() {
-    this.hidden = localStorage.getItem('welcomeHidden');
-  }
-
-  view() {
-    if (this.hidden) return <div />;
-
-    const slideUp = () => {
-      this.$().slideUp(this.hide.bind(this));
-    };
-
-    return (
-      <header className="Hero WelcomeHero">
-        <div class="container">
-          {Button.component({
-            icon: 'fas fa-times',
-            onclick: slideUp,
-            className: 'Hero-close Button Button--icon Button--link',
-          })}
-
-          <div className="containerNarrow">
-            <h2 className="Hero-title">{app.forum.attribute('welcomeTitle')}</h2>
-            <div className="Hero-subtitle">{m.trust(app.forum.attribute('welcomeMessage'))}</div>
-          </div>
-        </div>
-      </header>
-    );
-  }
-
-  /**
-   * Hide the welcome hero.
-   */
-  hide() {
-    localStorage.setItem('welcomeHidden', 'true');
-
-    this.hidden = true;
-  }
-}
diff --git a/js/old/forum/index.js b/js/old/forum/index.js
deleted file mode 100644
index 2a5e26fbd..000000000
--- a/js/old/forum/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import 'expose-loader?punycode!punycode';
-import 'expose-loader?ColorThief!color-thief-browser';
-
-import ForumApplication from './ForumApplication';
-
-const app = new ForumApplication();
-
-// Backwards compatibility
-window.app = app;
-
-export { app };
-
-// Export public API
-// export { default as Extend } from './Extend';
-// export { IndexPage, DicsussionList } from './components';
-
-// Export compat API
-import compat from './compat';
-
-compat.app = app;
-
-export { compat };
diff --git a/js/old/forum/routes.js b/js/old/forum/routes.js
deleted file mode 100644
index 43ad3efcf..000000000
--- a/js/old/forum/routes.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import IndexPage from './components/IndexPage';
-import DiscussionPage from './components/DiscussionPage';
-import PostsUserPage from './components/PostsUserPage';
-import DiscussionsUserPage from './components/DiscussionsUserPage';
-import SettingsPage from './components/SettingsPage';
-import NotificationsPage from './components/NotificationsPage';
-
-/**
- * The `routes` initializer defines the forum app's routes.
- *
- * @param {App} app
- */
-export default function (app) {
-  app.routes = {
-    index: { path: '/all', component: IndexPage.component() },
-    'index.filter': { path: '/:filter', component: IndexPage.component() },
-
-    discussion: { path: '/d/:id', component: DiscussionPage.component() },
-    'discussion.near': { path: '/d/:id/:near', component: DiscussionPage.component() },
-
-    user: { path: '/u/:username', component: PostsUserPage.component() },
-    'user.posts': { path: '/u/:username', component: PostsUserPage.component() },
-    'user.discussions': { path: '/u/:username/discussions', component: DiscussionsUserPage.component() },
-
-    settings: { path: '/settings', component: SettingsPage.component() },
-    notifications: { path: '/notifications', component: NotificationsPage.component() },
-  };
-
-  /**
-   * Generate a URL to a discussion.
-   *
-   * @param {Discussion} discussion
-   * @param {Integer} [near]
-   * @return {String}
-   */
-  app.route.discussion = (discussion, near) => {
-    const slug = discussion.slug();
-    return app.route(near && near !== 1 ? 'discussion.near' : 'discussion', {
-      id: discussion.id() + (slug.trim() ? '-' + slug : ''),
-      near: near && near !== 1 ? near : undefined,
-    });
-  };
-
-  /**
-   * Generate a URL to a post.
-   *
-   * @param {Post} post
-   * @return {String}
-   */
-  app.route.post = (post) => {
-    return app.route.discussion(post.discussion(), post.number());
-  };
-
-  /**
-   * Generate a URL to a user.
-   *
-   * @param {User} user
-   * @return {String}
-   */
-  app.route.user = (user) => {
-    return app.route('user', {
-      username: user.username(),
-    });
-  };
-}
diff --git a/js/old/forum/utils/DiscussionControls.js b/js/old/forum/utils/DiscussionControls.js
deleted file mode 100644
index a29a09213..000000000
--- a/js/old/forum/utils/DiscussionControls.js
+++ /dev/null
@@ -1,255 +0,0 @@
-import DiscussionPage from '../components/DiscussionPage';
-import ReplyComposer from '../components/ReplyComposer';
-import LogInModal from '../components/LogInModal';
-import Button from '../../common/components/Button';
-import Separator from '../../common/components/Separator';
-import RenameDiscussionModal from '../components/RenameDiscussionModal';
-import ItemList from '../../common/utils/ItemList';
-import extractText from '../../common/utils/extractText';
-
-/**
- * The `DiscussionControls` utility constructs a list of buttons for a
- * discussion which perform actions on it.
- */
-export default {
-  /**
-   * Get a list of controls for a discussion.
-   *
-   * @param {Discussion} discussion
-   * @param {*} context The parent component under which the controls menu will
-   *     be displayed.
-   * @return {ItemList}
-   * @public
-   */
-  controls(discussion, context) {
-    const items = new ItemList();
-
-    ['user', 'moderation', 'destructive'].forEach((section) => {
-      const controls = this[section + 'Controls'](discussion, context).toArray();
-      if (controls.length) {
-        controls.forEach((item) => items.add(item.itemName, item));
-        items.add(section + 'Separator', Separator.component());
-      }
-    });
-
-    return items;
-  },
-
-  /**
-   * Get controls for a discussion pertaining to the current user (e.g. reply,
-   * follow).
-   *
-   * @param {Discussion} discussion
-   * @param {*} context The parent component under which the controls menu will
-   *     be displayed.
-   * @return {ItemList}
-   * @protected
-   */
-  userControls(discussion, context) {
-    const items = new ItemList();
-
-    // Only add a reply control if this is the discussion's controls dropdown
-    // for the discussion page itself. We don't want it to show up for
-    // discussions in the discussion list, etc.
-    if (context instanceof DiscussionPage) {
-      items.add(
-        'reply',
-        !app.session.user || discussion.canReply()
-          ? Button.component({
-              icon: 'fas fa-reply',
-              children: app.translator.trans(
-                app.session.user ? 'core.forum.discussion_controls.reply_button' : 'core.forum.discussion_controls.log_in_to_reply_button'
-              ),
-              onclick: this.replyAction.bind(discussion, true, false),
-            })
-          : Button.component({
-              icon: 'fas fa-reply',
-              children: app.translator.trans('core.forum.discussion_controls.cannot_reply_button'),
-              className: 'disabled',
-              title: app.translator.trans('core.forum.discussion_controls.cannot_reply_text'),
-            })
-      );
-    }
-
-    return items;
-  },
-
-  /**
-   * Get controls for a discussion pertaining to moderation (e.g. rename, lock).
-   *
-   * @param {Discussion} discussion
-   * @param {*} context The parent component under which the controls menu will
-   *     be displayed.
-   * @return {ItemList}
-   * @protected
-   */
-  moderationControls(discussion) {
-    const items = new ItemList();
-
-    if (discussion.canRename()) {
-      items.add(
-        'rename',
-        Button.component({
-          icon: 'fas fa-pencil-alt',
-          children: app.translator.trans('core.forum.discussion_controls.rename_button'),
-          onclick: this.renameAction.bind(discussion),
-        })
-      );
-    }
-
-    return items;
-  },
-
-  /**
-   * Get controls for a discussion which are destructive (e.g. delete).
-   *
-   * @param {Discussion} discussion
-   * @param {*} context The parent component under which the controls menu will
-   *     be displayed.
-   * @return {ItemList}
-   * @protected
-   */
-  destructiveControls(discussion) {
-    const items = new ItemList();
-
-    if (!discussion.isHidden()) {
-      if (discussion.canHide()) {
-        items.add(
-          'hide',
-          Button.component({
-            icon: 'far fa-trash-alt',
-            children: app.translator.trans('core.forum.discussion_controls.delete_button'),
-            onclick: this.hideAction.bind(discussion),
-          })
-        );
-      }
-    } else {
-      if (discussion.canHide()) {
-        items.add(
-          'restore',
-          Button.component({
-            icon: 'fas fa-reply',
-            children: app.translator.trans('core.forum.discussion_controls.restore_button'),
-            onclick: this.restoreAction.bind(discussion),
-          })
-        );
-      }
-
-      if (discussion.canDelete()) {
-        items.add(
-          'delete',
-          Button.component({
-            icon: 'fas fa-times',
-            children: app.translator.trans('core.forum.discussion_controls.delete_forever_button'),
-            onclick: this.deleteAction.bind(discussion),
-          })
-        );
-      }
-    }
-
-    return items;
-  },
-
-  /**
-   * Open the reply composer for the discussion. A promise will be returned,
-   * which resolves when the composer opens successfully. If the user is not
-   * logged in, they will be prompted. If they don't have permission to
-   * reply, the promise will be rejected.
-   *
-   * @param {Boolean} goToLast Whether or not to scroll down to the last post if
-   *     the discussion is being viewed.
-   * @param {Boolean} forceRefresh Whether or not to force a reload of the
-   *     composer component, even if it is already open for this discussion.
-   * @return {Promise}
-   */
-  replyAction(goToLast, forceRefresh) {
-    const deferred = m.deferred();
-
-    if (app.session.user) {
-      if (this.canReply()) {
-        let component = app.composer.component;
-        if (!app.composingReplyTo(this) || forceRefresh) {
-          component = new ReplyComposer({
-            user: app.session.user,
-            discussion: this,
-          });
-          app.composer.load(component);
-        }
-        app.composer.show();
-
-        if (goToLast && app.viewingDiscussion(this) && !app.composer.isFullScreen()) {
-          app.current.stream.goToNumber('reply');
-        }
-
-        deferred.resolve(component);
-      } else {
-        deferred.reject();
-      }
-    } else {
-      deferred.reject();
-
-      app.modal.show(new LogInModal());
-    }
-
-    return deferred.promise;
-  },
-
-  /**
-   * Hide a discussion.
-   *
-   * @return {Promise}
-   */
-  hideAction() {
-    this.pushAttributes({ hiddenAt: new Date(), hiddenUser: app.session.user });
-
-    return this.save({ isHidden: true });
-  },
-
-  /**
-   * Restore a discussion.
-   *
-   * @return {Promise}
-   */
-  restoreAction() {
-    this.pushAttributes({ hiddenAt: null, hiddenUser: null });
-
-    return this.save({ isHidden: false });
-  },
-
-  /**
-   * Delete the discussion after confirming with the user.
-   *
-   * @return {Promise}
-   */
-  deleteAction() {
-    if (confirm(extractText(app.translator.trans('core.forum.discussion_controls.delete_confirmation')))) {
-      // If we're currently viewing the discussion that was deleted, go back
-      // to the previous page.
-      if (app.viewingDiscussion(this)) {
-        app.history.back();
-      }
-
-      return this.delete().then(() => {
-        // If there is a discussion list in the cache, remove this discussion.
-        if (app.cache.discussionList) {
-          app.cache.discussionList.removeDiscussion(this);
-          m.redraw();
-        }
-      });
-    }
-  },
-
-  /**
-   * Rename the discussion.
-   *
-   * @return {Promise}
-   */
-  renameAction() {
-    return app.modal.show(
-      new RenameDiscussionModal({
-        currentTitle: this.title(),
-        discussion: this,
-      })
-    );
-  },
-};
diff --git a/js/old/forum/utils/History.js b/js/old/forum/utils/History.js
deleted file mode 100644
index 003e9b96c..000000000
--- a/js/old/forum/utils/History.js
+++ /dev/null
@@ -1,119 +0,0 @@
-/**
- * The `History` class keeps track and manages a stack of routes that the user
- * has navigated to in their session.
- *
- * An item can be pushed to the top of the stack using the `push` method. An
- * item in the stack has a name and a URL. The name need not be unique; if it is
- * the same as the item before it, that will be overwritten with the new URL. In
- * this way, if a user visits a discussion, and then visits another discussion,
- * popping the history stack will still take them back to the discussion list
- * rather than the previous discussion.
- */
-export default class History {
-  constructor(defaultRoute) {
-    /**
-     * The stack of routes that have been navigated to.
-     *
-     * @type {Array}
-     * @protected
-     */
-    this.stack = [];
-  }
-
-  /**
-   * Get the item on the top of the stack.
-   *
-   * @return {Object}
-   * @public
-   */
-  getCurrent() {
-    return this.stack[this.stack.length - 1];
-  }
-
-  /**
-   * Get the previous item on the stack.
-   *
-   * @return {Object}
-   * @public
-   */
-  getPrevious() {
-    return this.stack[this.stack.length - 2];
-  }
-
-  /**
-   * Push an item to the top of the stack.
-   *
-   * @param {String} name The name of the route.
-   * @param {String} title The title of the route.
-   * @param {String} [url] The URL of the route. The current URL will be used if
-   *     not provided.
-   * @public
-   */
-  push(name, title, url = m.route()) {
-    // If we're pushing an item with the same name as second-to-top item in the
-    // stack, we will assume that the user has clicked the 'back' button in
-    // their browser. In this case, we don't want to push a new item, so we will
-    // pop off the top item, and then the second-to-top item will be overwritten
-    // below.
-    const secondTop = this.stack[this.stack.length - 2];
-    if (secondTop && secondTop.name === name) {
-      this.stack.pop();
-    }
-
-    // If we're pushing an item with the same name as the top item in the stack,
-    // then we'll overwrite it with the new URL.
-    const top = this.getCurrent();
-    if (top && top.name === name) {
-      Object.assign(top, { url, title });
-    } else {
-      this.stack.push({ name, url, title });
-    }
-  }
-
-  /**
-   * Check whether or not the history stack is able to be popped.
-   *
-   * @return {Boolean}
-   * @public
-   */
-  canGoBack() {
-    return this.stack.length > 1;
-  }
-
-  /**
-   * Go back to the previous route in the history stack.
-   *
-   * @public
-   */
-  back() {
-    if (!this.canGoBack()) {
-      return this.home();
-    }
-
-    this.stack.pop();
-
-    m.route(this.getCurrent().url);
-  }
-
-  /**
-   * Get the URL of the previous page.
-   *
-   * @public
-   */
-  backUrl() {
-    const secondTop = this.stack[this.stack.length - 2];
-
-    return secondTop.url;
-  }
-
-  /**
-   * Go to the first route in the history stack.
-   *
-   * @public
-   */
-  home() {
-    this.stack.splice(0);
-
-    m.route('/');
-  }
-}
diff --git a/js/old/forum/utils/KeyboardNavigatable.js b/js/old/forum/utils/KeyboardNavigatable.js
deleted file mode 100644
index 28f0ce709..000000000
--- a/js/old/forum/utils/KeyboardNavigatable.js
+++ /dev/null
@@ -1,162 +0,0 @@
-/**
- * The `KeyboardNavigatable` class manages lists that can be navigated with the
- * keyboard, calling callbacks for each actions.
- *
- * This helper encapsulates the key binding logic, providing a simple fluent
- * API for use.
- */
-export default class KeyboardNavigatable {
-  constructor() {
-    /**
-     * Callback to be executed for a specified input.
-     *
-     * @callback KeyboardNavigatable~keyCallback
-     * @param {KeyboardEvent} event
-     * @returns {boolean}
-     */
-    this.callbacks = {};
-
-    /**
-     * Callback that determines whether keyboard input should be handled.
-     * By default, always handle keyboard navigation.
-     *
-     * @callback whenCallback
-     * @param {KeyboardEvent} event
-     * @returns {boolean}
-     */
-    this.whenCallback = (event) => true;
-  }
-
-  /**
-   * Provide a callback to be executed when navigating upwards.
-   *
-   * This will be triggered by the Up key.
-   *
-   * @public
-   * @param {KeyboardNavigatable~keyCallback} callback
-   * @return {KeyboardNavigatable}
-   */
-  onUp(callback) {
-    this.callbacks[38] = (e) => {
-      e.preventDefault();
-      callback(e);
-    };
-
-    return this;
-  }
-
-  /**
-   * Provide a callback to be executed when navigating downwards.
-   *
-   * This will be triggered by the Down key.
-   *
-   * @public
-   * @param {KeyboardNavigatable~keyCallback} callback
-   * @return {KeyboardNavigatable}
-   */
-  onDown(callback) {
-    this.callbacks[40] = (e) => {
-      e.preventDefault();
-      callback(e);
-    };
-
-    return this;
-  }
-
-  /**
-   * Provide a callback to be executed when the current item is selected..
-   *
-   * This will be triggered by the Return and Tab keys..
-   *
-   * @public
-   * @param {KeyboardNavigatable~keyCallback} callback
-   * @return {KeyboardNavigatable}
-   */
-  onSelect(callback) {
-    this.callbacks[9] = this.callbacks[13] = (e) => {
-      e.preventDefault();
-      callback(e);
-    };
-
-    return this;
-  }
-
-  /**
-   * Provide a callback to be executed when the navigation is canceled.
-   *
-   * This will be triggered by the Escape key.
-   *
-   * @public
-   * @param {KeyboardNavigatable~keyCallback} callback
-   * @return {KeyboardNavigatable}
-   */
-  onCancel(callback) {
-    this.callbacks[27] = (e) => {
-      e.stopPropagation();
-      e.preventDefault();
-      callback(e);
-    };
-
-    return this;
-  }
-
-  /**
-   * Provide a callback to be executed when previous input is removed.
-   *
-   * This will be triggered by the Backspace key.
-   *
-   * @public
-   * @param {KeyboardNavigatable~keyCallback} callback
-   * @return {KeyboardNavigatable}
-   */
-  onRemove(callback) {
-    this.callbacks[8] = (e) => {
-      if (e.target.selectionStart === 0 && e.target.selectionEnd === 0) {
-        callback(e);
-        e.preventDefault();
-      }
-    };
-
-    return this;
-  }
-
-  /**
-   * Provide a callback that determines whether keyboard input should be handled.
-   *
-   * @public
-   * @param {KeyboardNavigatable~whenCallback} callback
-   * @return {KeyboardNavigatable}
-   */
-  when(callback) {
-    this.whenCallback = callback;
-
-    return this;
-  }
-
-  /**
-   * Set up the navigation key bindings on the given jQuery element.
-   *
-   * @public
-   * @param {jQuery} $element
-   */
-  bindTo($element) {
-    // Handle navigation key events on the navigatable element.
-    $element.on('keydown', this.navigate.bind(this));
-  }
-
-  /**
-   * Interpret the given keyboard event as navigation commands.
-   *
-   * @public
-   * @param {KeyboardEvent} event
-   */
-  navigate(event) {
-    // This callback determines whether keyboard should be handled or ignored.
-    if (!this.whenCallback(event)) return;
-
-    const keyCallback = this.callbacks[event.which];
-    if (keyCallback) {
-      keyCallback(event);
-    }
-  }
-}
diff --git a/js/old/forum/utils/Pane.js b/js/old/forum/utils/Pane.js
deleted file mode 100644
index 34ab447d7..000000000
--- a/js/old/forum/utils/Pane.js
+++ /dev/null
@@ -1,126 +0,0 @@
-/**
- * The `Pane` class manages the page's discussion list sidepane. The pane is a
- * part of the content view (DiscussionPage component), but its visibility is
- * determined by CSS classes applied to the outer page element. This class
- * manages the application of those CSS classes.
- */
-export default class Pane {
-  constructor(element) {
-    /**
-     * The localStorage key to store the pane's pinned state with.
-     *
-     * @type {String}
-     * @protected
-     */
-    this.pinnedKey = 'panePinned';
-
-    /**
-     * The page element.
-     *
-     * @type {jQuery}
-     * @protected
-     */
-    this.$element = $(element);
-
-    /**
-     * Whether or not the pane is currently pinned.
-     *
-     * @type {Boolean}
-     * @protected
-     */
-    this.pinned = localStorage.getItem(this.pinnedKey) === 'true';
-
-    /**
-     * Whether or not the pane is currently exists.
-     *
-     * @type {Boolean}
-     * @protected
-     */
-    this.active = false;
-
-    /**
-     * Whether or not the pane is currently showing, or is hidden off the edge
-     * of the screen.
-     *
-     * @type {Boolean}
-     * @protected
-     */
-    this.showing = false;
-
-    this.render();
-  }
-
-  /**
-   * Enable the pane.
-   *
-   * @public
-   */
-  enable() {
-    this.active = true;
-    this.render();
-  }
-
-  /**
-   * Disable the pane.
-   *
-   * @public
-   */
-  disable() {
-    this.active = false;
-    this.showing = false;
-    this.render();
-  }
-
-  /**
-   * Show the pane.
-   *
-   * @public
-   */
-  show() {
-    clearTimeout(this.hideTimeout);
-    this.showing = true;
-    this.render();
-  }
-
-  /**
-   * Hide the pane.
-   *
-   * @public
-   */
-  hide() {
-    this.showing = false;
-    this.render();
-  }
-
-  /**
-   * Begin a timeout to hide the pane, which can be cancelled by showing the
-   * pane.
-   *
-   * @public
-   */
-  onmouseleave() {
-    this.hideTimeout = setTimeout(this.hide.bind(this), 250);
-  }
-
-  /**
-   * Toggle whether or not the pane is pinned.
-   *
-   * @public
-   */
-  togglePinned() {
-    this.pinned = !this.pinned;
-
-    localStorage.setItem(this.pinnedKey, this.pinned ? 'true' : 'false');
-
-    this.render();
-  }
-
-  /**
-   * Apply the appropriate CSS classes to the page element.
-   *
-   * @protected
-   */
-  render() {
-    this.$element.toggleClass('panePinned', this.pinned).toggleClass('hasPane', this.active).toggleClass('paneShowing', this.showing);
-  }
-}
diff --git a/js/old/forum/utils/PostControls.js b/js/old/forum/utils/PostControls.js
deleted file mode 100644
index e96b7ab09..000000000
--- a/js/old/forum/utils/PostControls.js
+++ /dev/null
@@ -1,197 +0,0 @@
-import EditPostComposer from '../components/EditPostComposer';
-import Button from '../../common/components/Button';
-import Separator from '../../common/components/Separator';
-import ItemList from '../../common/utils/ItemList';
-
-/**
- * The `PostControls` utility constructs a list of buttons for a post which
- * perform actions on it.
- */
-export default {
-  /**
-   * Get a list of controls for a post.
-   *
-   * @param {Post} post
-   * @param {*} context The parent component under which the controls menu will
-   *     be displayed.
-   * @return {ItemList}
-   * @public
-   */
-  controls(post, context) {
-    const items = new ItemList();
-
-    ['user', 'moderation', 'destructive'].forEach((section) => {
-      const controls = this[section + 'Controls'](post, context).toArray();
-      if (controls.length) {
-        controls.forEach((item) => items.add(item.itemName, item));
-        items.add(section + 'Separator', Separator.component());
-      }
-    });
-
-    return items;
-  },
-
-  /**
-   * Get controls for a post pertaining to the current user (e.g. report).
-   *
-   * @param {Post} post
-   * @param {*} context The parent component under which the controls menu will
-   *     be displayed.
-   * @return {ItemList}
-   * @protected
-   */
-  userControls(post, context) {
-    return new ItemList();
-  },
-
-  /**
-   * Get controls for a post pertaining to moderation (e.g. edit).
-   *
-   * @param {Post} post
-   * @param {*} context The parent component under which the controls menu will
-   *     be displayed.
-   * @return {ItemList}
-   * @protected
-   */
-  moderationControls(post, context) {
-    const items = new ItemList();
-
-    if (post.contentType() === 'comment' && post.canEdit()) {
-      if (!post.isHidden()) {
-        items.add(
-          'edit',
-          Button.component({
-            icon: 'fas fa-pencil-alt',
-            children: app.translator.trans('core.forum.post_controls.edit_button'),
-            onclick: this.editAction.bind(post),
-          })
-        );
-      }
-    }
-
-    return items;
-  },
-
-  /**
-   * Get controls for a post that are destructive (e.g. delete).
-   *
-   * @param {Post} post
-   * @param {*} context The parent component under which the controls menu will
-   *     be displayed.
-   * @return {ItemList}
-   * @protected
-   */
-  destructiveControls(post, context) {
-    const items = new ItemList();
-
-    if (post.contentType() === 'comment' && !post.isHidden()) {
-      if (post.canHide()) {
-        items.add(
-          'hide',
-          Button.component({
-            icon: 'far fa-trash-alt',
-            children: app.translator.trans('core.forum.post_controls.delete_button'),
-            onclick: this.hideAction.bind(post),
-          })
-        );
-      }
-    } else {
-      if (post.contentType() === 'comment' && post.canHide()) {
-        items.add(
-          'restore',
-          Button.component({
-            icon: 'fas fa-reply',
-            children: app.translator.trans('core.forum.post_controls.restore_button'),
-            onclick: this.restoreAction.bind(post),
-          })
-        );
-      }
-      if (post.canDelete()) {
-        items.add(
-          'delete',
-          Button.component({
-            icon: 'fas fa-times',
-            children: app.translator.trans('core.forum.post_controls.delete_forever_button'),
-            onclick: this.deleteAction.bind(post, context),
-          })
-        );
-      }
-    }
-
-    return items;
-  },
-
-  /**
-   * Open the composer to edit a post.
-   *
-   * @return {Promise}
-   */
-  editAction() {
-    const deferred = m.deferred();
-
-    const component = new EditPostComposer({ post: this });
-
-    app.composer.load(component);
-    app.composer.show();
-
-    deferred.resolve(component);
-
-    return deferred.promise;
-  },
-
-  /**
-   * Hide a post.
-   *
-   * @return {Promise}
-   */
-  hideAction() {
-    this.pushAttributes({ hiddenAt: new Date(), hiddenUser: app.session.user });
-
-    return this.save({ isHidden: true }).then(() => m.redraw());
-  },
-
-  /**
-   * Restore a post.
-   *
-   * @return {Promise}
-   */
-  restoreAction() {
-    this.pushAttributes({ hiddenAt: null, hiddenUser: null });
-
-    return this.save({ isHidden: false }).then(() => m.redraw());
-  },
-
-  /**
-   * Delete a post.
-   *
-   * @return {Promise}
-   */
-  deleteAction(context) {
-    if (context) context.loading = true;
-
-    return this.delete()
-      .then(() => {
-        const discussion = this.discussion();
-
-        discussion.removePost(this.id());
-
-        // If this was the last post in the discussion, then we will assume that
-        // the whole discussion was deleted too.
-        if (!discussion.postIds().length) {
-          // If there is a discussion list in the cache, remove this discussion.
-          if (app.cache.discussionList) {
-            app.cache.discussionList.removeDiscussion(discussion);
-          }
-
-          if (app.viewingDiscussion(discussion)) {
-            app.history.back();
-          }
-        }
-      })
-      .catch(() => {})
-      .then(() => {
-        if (context) context.loading = false;
-        m.redraw();
-      });
-  },
-};
diff --git a/js/old/forum/utils/UserControls.js b/js/old/forum/utils/UserControls.js
deleted file mode 100644
index 772f127bd..000000000
--- a/js/old/forum/utils/UserControls.js
+++ /dev/null
@@ -1,153 +0,0 @@
-import Alert from '../../common/components/Alert';
-import Button from '../../common/components/Button';
-import Separator from '../../common/components/Separator';
-import EditUserModal from '../components/EditUserModal';
-import UserPage from '../components/UserPage';
-import ItemList from '../../common/utils/ItemList';
-
-/**
- * The `UserControls` utility constructs a list of buttons for a user which
- * perform actions on it.
- */
-export default {
-  /**
-   * Get a list of controls for a user.
-   *
-   * @param {User} user
-   * @param {*} context The parent component under which the controls menu will
-   *     be displayed.
-   * @return {ItemList}
-   * @public
-   */
-  controls(user, context) {
-    const items = new ItemList();
-
-    ['user', 'moderation', 'destructive'].forEach((section) => {
-      const controls = this[section + 'Controls'](user, context).toArray();
-      if (controls.length) {
-        controls.forEach((item) => items.add(item.itemName, item));
-        items.add(section + 'Separator', Separator.component());
-      }
-    });
-
-    return items;
-  },
-
-  /**
-   * Get controls for a user pertaining to the current user (e.g. poke, follow).
-   *
-   * @param {User} user
-   * @param {*} context The parent component under which the controls menu will
-   *     be displayed.
-   * @return {ItemList}
-   * @protected
-   */
-  userControls() {
-    return new ItemList();
-  },
-
-  /**
-   * Get controls for a user pertaining to moderation (e.g. suspend, edit).
-   *
-   * @param {User} user
-   * @param {*} context The parent component under which the controls menu will
-   *     be displayed.
-   * @return {ItemList}
-   * @protected
-   */
-  moderationControls(user) {
-    const items = new ItemList();
-
-    if (user.canEdit()) {
-      items.add(
-        'edit',
-        Button.component({
-          icon: 'fas fa-pencil-alt',
-          children: app.translator.trans('core.forum.user_controls.edit_button'),
-          onclick: this.editAction.bind(this, user),
-        })
-      );
-    }
-
-    return items;
-  },
-
-  /**
-   * Get controls for a user which are destructive (e.g. delete).
-   *
-   * @param {User} user
-   * @param {*} context The parent component under which the controls menu will
-   *     be displayed.
-   * @return {ItemList}
-   * @protected
-   */
-  destructiveControls(user) {
-    const items = new ItemList();
-
-    if (user.id() !== '1' && user.canDelete()) {
-      items.add(
-        'delete',
-        Button.component({
-          icon: 'fas fa-times',
-          children: app.translator.trans('core.forum.user_controls.delete_button'),
-          onclick: this.deleteAction.bind(this, user),
-        })
-      );
-    }
-
-    return items;
-  },
-
-  /**
-   * Delete the user.
-   *
-   * @param {User} user
-   */
-  deleteAction(user) {
-    if (!confirm(app.translator.trans('core.forum.user_controls.delete_confirmation'))) {
-      return;
-    }
-
-    user
-      .delete()
-      .then(() => {
-        this.showDeletionAlert(user, 'success');
-        if (app.current instanceof UserPage && app.current.user === user) {
-          app.history.back();
-        } else {
-          window.location.reload();
-        }
-      })
-      .catch(() => this.showDeletionAlert(user, 'error'));
-  },
-
-  /**
-   * Show deletion alert of user.
-   *
-   * @param {User} user
-   * @param {string} type
-   */
-  showDeletionAlert(user, type) {
-    const { username, email } = user.data.attributes;
-    const message = {
-      success: 'core.forum.user_controls.delete_success_message',
-      error: 'core.forum.user_controls.delete_error_message',
-    }[type];
-
-    app.alerts.show(
-      new Alert({
-        type,
-        children: app.translator.trans(message, { username, email }),
-      })
-    );
-  },
-
-  /**
-   * Edit the user.
-   *
-   * @param {User} user
-   */
-  editAction(user) {
-    app.modal.show(new EditUserModal({ user }));
-  },
-};
diff --git a/js/old/forum/utils/affixSidebar.js b/js/old/forum/utils/affixSidebar.js
deleted file mode 100644
index 7faca12f0..000000000
--- a/js/old/forum/utils/affixSidebar.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Setup the sidebar DOM element to be affixed to the top of the viewport
- * using Bootstrap's affix plugin.
- *
- * @param {DOMElement} element
- * @param {Boolean} isInitialized
- * @param {Object} context
- */
-export default function affixSidebar(element, isInitialized, context) {
-  if (isInitialized) return;
-
-  const onresize = () => {
-    const $sidebar = $(element);
-    const $header = $('#header');
-    const $footer = $('#footer');
-    const $affixElement = $sidebar.find('> ul');
-
-    $(window).off('.affix');
-    $affixElement.removeClass('affix affix-top affix-bottom').removeData('bs.affix');
-
-    // Don't affix the sidebar if it is taller than the viewport (otherwise
-    // there would be no way to scroll through its content).
-    if ($sidebar.outerHeight(true) > $(window).height() - $header.outerHeight(true)) return;
-
-    $affixElement.affix({
-      offset: {
-        top: () => $sidebar.offset().top - $header.outerHeight(true) - parseInt($sidebar.css('margin-top'), 10),
-        bottom: () => (this.bottom = $footer.outerHeight(true)),
-      },
-    });
-  };
-
-  // Register the affix plugin to execute on every window resize (and trigger)
-  $(window).on('resize', onresize).resize();
-
-  context.onunload = () => {
-    $(window).off('resize', onresize);
-  };
-}
diff --git a/js/old/forum/utils/alertEmailConfirmation.js b/js/old/forum/utils/alertEmailConfirmation.js
deleted file mode 100644
index b8ceaa7cd..000000000
--- a/js/old/forum/utils/alertEmailConfirmation.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import Alert from '../../common/components/Alert';
-import Button from '../../common/components/Button';
-import icon from '../../common/helpers/icon';
-
-/**
- * Shows an alert if the user has not yet confirmed their email address.
- *
- * @param {ForumApp} app
- */
-export default function alertEmailConfirmation(app) {
-  const user = app.session.user;
-
-  if (!user || user.isEmailConfirmed()) return;
-
-  const resendButton = Button.component({
-    className: 'Button Button--link',
-    children: app.translator.trans('core.forum.user_email_confirmation.resend_button'),
-    onclick: function () {
-      resendButton.props.loading = true;
-      m.redraw();
-
-      app
-        .request({
-          method: 'POST',
-          url: app.forum.attribute('apiUrl') + '/users/' + user.id() + '/send-confirmation',
-        })
-        .then(() => {
-          resendButton.props.loading = false;
-          resendButton.props.children = [icon('fas fa-check'), ' ', app.translator.trans('core.forum.user_email_confirmation.sent_message')];
-          resendButton.props.disabled = true;
-          m.redraw();
-        })
-        .catch(() => {
-          resendButton.props.loading = false;
-          m.redraw();
-        });
-    },
-  });
-
-  class ContainedAlert extends Alert {
-    view() {
-      const vdom = super.view();
-
-      vdom.children = [<div className="container">{vdom.children}</div>];
-
-      return vdom;
-    }
-  }
-
-  m.mount(
-    $('<div/>').insertBefore('#content')[0],
-    ContainedAlert.component({
-      dismissible: false,
-      children: app.translator.trans('core.forum.user_email_confirmation.alert_message', { email: <strong>{user.email()}</strong> }),
-      controls: [resendButton],
-    })
-  );
-}
diff --git a/js/old/forum/utils/slidable.js b/js/old/forum/utils/slidable.js
deleted file mode 100644
index cb4ccc953..000000000
--- a/js/old/forum/utils/slidable.js
+++ /dev/null
@@ -1,151 +0,0 @@
-/**
- * The `slidable` utility adds touch gestures to an element so that it can be
- * slid away to reveal controls underneath, and then released to activate those
- * controls.
- *
- * It relies on the element having children with particular CSS classes.
- * TODO: document
- *
- * @param {DOMElement} element
- * @return {Object}
- * @property {function} reset Revert the slider to its original position. This
- *     should be called, for example, when a controls dropdown is closed.
- */
-export default function slidable(element) {
-  const $element = $(element);
-  const threshold = 50;
-
-  let $underneathLeft;
-  let $underneathRight;
-
-  let startX;
-  let startY;
-  let couldBeSliding = false;
-  let isSliding = false;
-  let pos = 0;
-
-  /**
-   * Animate the slider to a new position.
-   *
-   * @param {Integer} newPos
-   * @param {Object} [options]
-   */
-  const animatePos = (newPos, options = {}) => {
-    // Since we can't animate the transform property with jQuery, we'll use a
-    // bit of a workaround. We set up the animation with a step function that
-    // will set the transform property, but then we animate an unused property
-    // (background-position-x) with jQuery.
-    options.duration = options.duration || 'fast';
-    options.step = function (x) {
-      $(this).css('transform', 'translate(' + x + 'px, 0)');
-    };
-
-    $element.find('.Slidable-content').animate({ 'background-position-x': newPos }, options);
-  };
-
-  /**
-   * Revert the slider to its original position.
-   */
-  const reset = () => {
-    animatePos(0, {
-      complete: function () {
-        $element.removeClass('sliding');
-        $underneathLeft.hide();
-        $underneathRight.hide();
-        isSliding = false;
-      },
-    });
-  };
-
-  $element
-    .find('.Slidable-content')
-    .on('touchstart', function (e) {
-      // Update the references to the elements underneath the slider, provided
-      // they're not disabled.
-      $underneathLeft = $element.find('.Slidable-underneath--left:not(.disabled)');
-      $underneathRight = $element.find('.Slidable-underneath--right:not(.disabled)');
-
-      startX = e.originalEvent.targetTouches[0].clientX;
-      startY = e.originalEvent.targetTouches[0].clientY;
-
-      couldBeSliding = true;
-      pos = 0;
-    })
-
-    .on('touchmove', function (e) {
-      const newX = e.originalEvent.targetTouches[0].clientX;
-      const newY = e.originalEvent.targetTouches[0].clientY;
-
-      // Once the user moves their touch in a direction that's more up/down than
-      // left/right, we'll assume they're scrolling the page. But if they do
-      // move in a horizontal direction at first, then we'll lock their touch
-      // into the slider.
-      if (couldBeSliding && Math.abs(newX - startX) > Math.abs(newY - startY)) {
-        isSliding = true;
-      }
-      couldBeSliding = false;
-
-      if (isSliding) {
-        pos = newX - startX;
-
-        // If there are controls underneath the either side, then we'll show/hide
-        // them depending on the slider's position. We also make the controls
-        // icon get a bit bigger the further they slide.
-        const toggle = ($underneath, side) => {
-          if ($underneath.length) {
-            const active = side === 'left' ? pos > 0 : pos < 0;
-
-            if (active && $underneath.hasClass('Slidable-underneath--elastic')) {
-              pos -= pos * 0.5;
-            }
-            $underneath.toggle(active);
-
-            const scale = Math.max(0, Math.min(1, (Math.abs(pos) - 25) / threshold));
-            $underneath.find('.icon').css('transform', 'scale(' + scale + ')');
-          } else {
-            pos = Math[side === 'left' ? 'min' : 'max'](0, pos);
-          }
-        };
-
-        toggle($underneathLeft, 'left');
-        toggle($underneathRight, 'right');
-
-        $(this).css('transform', 'translate(' + pos + 'px, 0)');
-        $(this).css('background-position-x', pos + 'px');
-
-        $element.toggleClass('sliding', !!pos);
-
-        e.preventDefault();
-      }
-    })
-
-    .on('touchend', function () {
-      // If the user releases the touch and the slider is past the threshold
-      // position on either side, then we will activate the control for that
-      // side. We will also animate the slider's position all the way to the
-      // other side, or back to its original position, depending on whether or
-      // not the side is 'elastic'.
-      const activate = ($underneath) => {
-        $underneath.click();
-
-        if ($underneath.hasClass('Slidable-underneath--elastic')) {
-          reset();
-        } else {
-          animatePos((pos > 0 ? 1 : -1) * $element.width());
-        }
-      };
-
-      if ($underneathRight.length && pos < -threshold) {
-        activate($underneathRight);
-      } else if ($underneathLeft.length && pos > threshold) {
-        activate($underneathLeft);
-      } else {
-        reset();
-      }
-
-      couldBeSliding = false;
-      isSliding = false;
-    });
-
-  return { reset };
-}