npm audit fix

Due to a commit by @fabpot in october, the mimetypes symfony class
now re-orders the shortened mimetypes that are returned when looking
up based on header mimetype. Our validator uses the first key, pops
the prefix off and then matches against our hardcoded array.

I've added a constraint to symfony/mime ^5.2.0 which ships with this change.
This constraint is fully compatible with our current lineup. In addition
I changed the hardcoded array to use the first entry from symfony mime types
now `jpg` instead of `jpeg`.

CHANGELOG.md

@@ -1,5 +1,170 @@
 # Changelog
 
+## [0.1.0-beta.15](https://github.com/flarum/core/compare/v0.1.0-beta.14.1...v0.1.0-beta.15)
+
+### Added
+
+- Slug drivers support (https://github.com/flarum/core/pull/2456).
+- Notification type extender (https://github.com/flarum/core/pull/2424).
+- Validation extender (https://github.com/flarum/core/pull/2102).
+- Post extender (https://github.com/flarum/core/pull/2101).
+- Notification channel extender (https://github.com/flarum/core/pull/2432).
+- Service provider extender (https://github.com/flarum/core/pull/2437).
+- API serializer extender (https://github.com/flarum/core/pull/2438).
+- User preferences extender (https://github.com/flarum/core/pull/2463).
+- Settings extender (https://github.com/flarum/core/pull/2452).
+- ApiController extender (https://github.com/flarum/core/pull/2451).
+- Model visibility extender (https://github.com/flarum/core/pull/2460).
+- Policy extender (https://github.com/flarum/core/pull/2461).
+
+### Changed
+
+- Time helpers converted to Typescript (https://github.com/flarum/core/pull/2391).
+- Improved the formatter extender (https://github.com/flarum/core/pull/2098).
+- Improve wording on installer when facing file permission issues (https://github.com/flarum/core/pull/2435).
+- Background color of checkbox toggles improved for better usability (https://github.com/flarum/core/pull/2443).
+- Route resolving refactored (https://github.com/flarum/core/pull/2425).
+- Administration panel UX refactored (https://github.com/flarum/core/pull/2409).
+- Floodgate moved to middleware and extender added (https://github.com/flarum/core/pull/2170).
+- DRY up image uploading logic (https://github.com/flarum/core/pull/2477).
+- Process isolation on testing (https://github.com/flarum/core/commit/984f751c718c89501cc09857bc271efa2c7eea8c).
+- Forum and admin javascript exports namespaced (https://github.com/flarum/core/pull/2488).
+
+### Fixed
+
+- Web updater does not take into account subfolder installations (https://github.com/flarum/core/pull/2426).
+- Callables handling in extenders failed (https://github.com/flarum/core/pull/2423).
+- Scrolling on mobile from PostSteam changes didn't work correctly (https://github.com/flarum/core/pull/2385).
+- Side pane covers part of the discussion page due to `app.discussions` being empty (https://github.com/flarum/core/commit/102e76b084bf47fdfb4c73f95e1fbb322537f7aa).
+- Change email modal keeps showing the previous error message even on success (https://github.com/flarum/core/pull/2467).
+- Comment count not updated when discussions are deleted (https://github.com/flarum/core/pull/2472).
+- `goToIndex` in PostStream does not trigger an xhr to retrieve new data (https://github.com/flarum/core/commit/09e2736cbcc267594b660beabbd001d9030f9880).
+- On refresh the post number is reduced by one (https://github.com/flarum/core/pull/2476).
+- Queue worker would instantiate a new Queue factory, not the bound one (https://github.com/flarum/core/pull/2481).
+- Header accidentally has a border bottom (https://github.com/flarum/core/pull/2489).
+- Namespace mentioned in docblock is incorrect (https://github.com/flarum/core/pull/2494).
+- Scrolling inside longer discussions (especially Firefox) skips posts (https://github.com/flarum/core/commit/210a6b3e253d7917bd1eacd3ed8d2f95073ae99d).
+- Uploading avatars that are jpg/jpeg fails with a validation error (https://github.com/flarum/core/pull/2497).
+
+### Removed
+
+- MomentJS alias (https://github.com/flarum/core/pull/2428).
+- Deprecated user events `GetDisplayName` and `PrepareUserGroups` (https://github.com/flarum/core/pull/2428).
+- AssertPermissionTrait (https://github.com/flarum/core/pull/2428).
+- Path related helpers and methods in Application (https://github.com/flarum/core/pull/2428).
+- Backward compatibility layers from the frontend rewrite (https://github.com/flarum/core/pull/2428).
+
+### Deprecated
+
+- `CheckingForFlooding` (https://github.com/flarum/core/commit/8e25bcb68f86cc992c46dfa70368419fe9f936ac).
+
+## [0.1.0-beta.14.1](https://github.com/flarum/core/compare/v0.1.0-beta.14...v0.1.0-beta.14.1)
+
+### Fixed
+
+- SuperTextarea component is not exported.
+- Symfony dependencies do not match those depended on by Laravel (https://github.com/flarum/core/pull/2407).
+- Scripts from textformatter aren't executed (https://github.com/flarum/core/pull/2415)
+- Sub path installations have no page title.
+- Losing focus of Composer area when coming from fullscreen.
+
+## [0.1.0-beta.14](https://github.com/flarum/core/compare/v0.1.0-beta.13...v0.1.0-beta.14)
+
+### Added
+
+- Check dependencies before enabling / disabling extensions (https://github.com/flarum/core/pull/2188)
+- Set up temporary infrastructure for TypeScript in core (https://github.com/flarum/core/pull/2206)
+- Better UI for request error modals (https://github.com/flarum/core/pull/1929)
+- Display name extender, tests, frontend UI (https://github.com/flarum/core/pull/2174)
+- Scroll to post or show alert when editing a post from another page (https://github.com/flarum/core/pull/2108)
+- Feature to test email config by sending an email to the current user (https://github.com/flarum/core/pull/2023)
+- Allow searching users by group ID using the group gambit (https://github.com/flarum/core/pull/2192)
+- Use `liveHumanTimes` helper to update times without reload/rerender (https://github.com/flarum/core/pull/2208)
+- View extender, tests (https://github.com/flarum/core/pull/2134)
+- User extender to replace `PrepareUserGroups` (https://github.com/flarum/core/pull/2110)
+- Increase extensibility of skeleton PHP (https://github.com/flarum/core/pull/2308, https://github.com/flarum/core/pull/2318)
+- Pass a translator instance to `getEmailSubject` in `MailableInterface` (https://github.com/flarum/core/pull/2244)
+- Force LF line endings on windows (https://github.com/flarum/core/pull/2321)
+- Add a `Link` component for internal and external links (https://github.com/flarum/core/pull/2315)
+- `ConfirmDocumentUnload` component
+- Error handler middleware can now be manipulated by the middleware extender
+
+### Changed
+
+- Update to Mithril 2 (https://github.com/flarum/core/pull/2255)
+- Stop storing component instances (https://github.com/flarum/core/issues/1821, https://github.com/flarum/core/issues/2144)
+- Update to Laravel 6.x (https://github.com/flarum/core/issues/2055)
+- `Flarum\Foundation\Application` no longer implements `Illuminate\Contracts\Foundation\Application` (#2142)
+- `Flarum\Foundation\Application` no longer inherits `Illuminate\Container\Container` (#2142)
+- `paths` have been split off from `Flarum\Foundation\Application` into `Flarum\Foundation\Paths`, which can be injected where needed  (#2142)
+- `Flarum\User\Gate` no longer implements `Illuminate\Contracts\Auth\Access\Gate` (https://github.com/flarum/core/pull/2181)
+- Improve Group Gambit performance (https://github.com/flarum/core/pull/2192)
+- Switch to `dayjs` from `momentjs` (https://github.com/flarum/core/pull/2219)
+- Don't create a `bio` column in `users` for new installations (https://github.com/flarum/core/pull/2215)
+- Start converting core JS to TypeScript (https://github.com/flarum/core/pull/2207)
+- Make Carbon an explicit dependency (https://github.com/flarum/core/commit/3b39c212e0fef7522e7d541a9214ff3817138d5d)
+- Use Symfony's translator interface instead of Laravel's (https://github.com/flarum/core/pull/2243)
+- Use newer versions of fontawesome (https://github.com/flarum/core/pull/2274)
+- Use URL generator instead of `app()->url()` where possible (https://github.com/flarum/core/pull/2302)
+- Move config from `config.php` into an injectable helper class (https://github.com/flarum/core/pull/2271)
+- Use reserved TLD for bogus and test urls (https://github.com/flarum/core/commit/6860b24b70bd04544dde90e537ce021a5fc5a689)
+- Replace `m.stream` with `flarum/utils/Stream` (https://github.com/flarum/core/pull/2316)
+- Replace `affixedSidebar` util with `AffixedSidebar` component
+- Replace `m.withAttr` with `flarum/utils/withAttr`
+- Scroll Listener is now passive, performance improvement (https://github.com/flarum/core/pull/2387)
+
+### Fixed
+
+- `generate:migration` command for extensions (https://github.com/flarum/core/commit/443949f7b9d7558dbc1e0994cb898cbac59bec87)
+- Container config for `UninstalledSite` (https://github.com/flarum/core/commit/ecdce44d555dd36a365fd472b2916e677ef173cf)
+- Tooltip glitch on page chang (https://github.com/flarum/core/issues/2118)
+- Using multiple extenders in tests (https://github.com/flarum/core/commit/c4f4f218bf4b175a30880b807f9ccb1a37a25330)
+- Header glitch when opening modals (https://github.com/flarum/core/pull/2131)
+- Ensure `SameSite` is explicitly set for cookies (https://github.com/flarum/core/pull/2159)
+- Ensure `Flarum\User\Event\AvatarChanged` event is properly dispatched (https://github.com/flarum/core/pull/2197)
+- Show correct error message on wrong password when changing email (https://github.com/flarum/core/pull/2171)
+- Discussion unreadCount could be higher than commentCount if posts deleted (https://github.com/flarum/core/pull/2195)
+- Don't show page title on the default route (https://github.com/flarum/core/pull/2047)
+- Add page title to `All Discussions` page when it isn't the default route (https://github.com/flarum/core/pull/2047)
+- Accept `'0'` as `false` for `flarum/components/Checkbox` (https://github.com/flarum/core/pull/2210)
+- Fix PostStreamScrubber background (https://github.com/flarum/core/pull/2222)
+- Test port on BaseUrl tests (https://github.com/flarum/core/pull/2226)
+- `UrlGenerator` can now generate urls with optional parameters (https://github.com/flarum/core/pull/2246)
+- Allow `less` to be compiled independently of Flarum (https://github.com/flarum/core/pull/2252)
+- Use correct number abbreviation (https://github.com/flarum/core/pull/2261)
+- Ensure avatar html uses alt tags for accessibility (https://github.com/flarum/core/pull/2269)
+- Escape regex when searching (https://github.com/flarum/core/pull/2273)
+- Remove unneeded semicolons inserted during JS compilation (https://github.com/flarum/core/pull/2280)
+- Don't require a username/password for SMTP (https://github.com/flarum/core/pull/2287)
+- Allow uppercase entries for SMTP encryption validation (https://github.com/flarum/core/pull/2289)
+- Ensure that the right number of posts is returned from list posts API (https://github.com/flarum/core/pull/2291)
+- Fix a variety of PostStream bugs (https://github.com/flarum/core/pull/2160, https://github.com/flarum/core/pull/2160)
+- Sliding discussion glitch on mobile (https://github.com/flarum/core/pull/2324)
+- Sliding discussion button in wrong place (https://github.com/flarum/core/pull/2330, https://github.com/flarum/core/pull/2383)
+- Sliding discussion glitch on mobile (https://github.com/flarum/core/pull/2381)
+- Fix PostStream for posts with top margins, and scrubber position when scrolling below posts (https://github.com/flarum/core/pull/2369)
+
+### Removed
+
+- `Flarum\Event\AbstractConfigureRoutes` event class
+- `Flarum\Event\ConfigureApiRoutes` event class
+- `Flarum\Event\ConfigureForumRoutes` event class
+- `Flarum\Console\Event\Configuring` event class
+- `Flarum\Event\ConfigureModelDates` event class
+- `Flarum\Event\ConfigureLocales` event class
+- `Flarum\Event\ConfigureModelDefaultAttributes` event class
+- `Flarum\Event\GetModelRelationship` event class
+- `Flarum\User\Event\BioChanged` event class
+- `Flarum\Database\MigrationServiceProvider` moved into `Flarum\Database\DatabaseServiceProvider`
+- Unused `admin/components/Widget` component (`admin/component/DashboardWidget` should be used instead)
+- Mandrill mail driver (https://github.com/flarum/core/commit/bca833d3f1c34d45d95bf905902368a2753b8908)
+
+### Deprecated
+
+- `Flarum\User\Event\GetDisplayName` event class
+- Global path helpers, `Flarum\Foundation\Application` path methods (https://github.com/flarum/core/pull/2155)
+- `Flarum\User\AssertPermissionTrait` (https://github.com/flarum/core/pull/2044)
+
 ## [0.1.0-beta.13](https://github.com/flarum/core/compare/v0.1.0-beta.12...v0.1.0-beta.13)
 
 ### Added

composer.json

@@ -10,7 +10,7 @@
             "email": "franz@develophp.org"
         },
         {
-            "name": "Daniel Klabbers",
+            "name": "Daniël Klabbers",
             "email": "daniel@klabbers.email",
             "homepage": "https://luceos.com"
         },
@@ -27,6 +27,10 @@
         {
             "name": "Matthew Kilgore",
             "email": "matthew@kilgore.dev"
+        },
+        {
+          "name": "Alexander (Sasha) Skvortsov",
+          "email": "askvortsov@flarum.org"
         }
     ],
     "support": {
@@ -72,11 +76,12 @@
         "psr/http-server-handler": "^1.0",
         "psr/http-server-middleware": "^1.0",
         "s9e/text-formatter": "^2.3.6",
-        "symfony/config": "^3.3",
-        "symfony/console": "^4.2",
-        "symfony/event-dispatcher": "^4.3.2",
-        "symfony/translation": "^3.3",
-        "symfony/yaml": "^3.3",
+        "symfony/config": "^4.3.4",
+        "symfony/console": "^4.3.4",
+        "symfony/event-dispatcher": "^4.3.4",
+        "symfony/mime": "^5.2.0",
+        "symfony/translation": "^4.3.4",
+        "symfony/yaml": "^4.3.4",
         "tobscure/json-api": "^0.3.0",
         "wikimedia/less.php": "^3.0"
     },

js/package-lock.json

@@ -3382,9 +3382,9 @@
       "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
     },
     "ini": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
-      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
     },
     "interpret": {
       "version": "1.2.0",
@@ -3556,9 +3556,9 @@
       "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
     },
     "jquery": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
-      "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
+      "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
     },
     "jquery.hotkeys": {
       "version": "0.1.0",
@@ -4546,11 +4546,6 @@
       "integrity": "sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw==",
       "dev": true
     },
-    "serialize-javascript": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz",
-      "integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ=="
-    },
     "set-blocking": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
@@ -4900,21 +4895,29 @@
       }
     },
     "terser-webpack-plugin": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.3.tgz",
-      "integrity": "sha512-QMxecFz/gHQwteWwSo5nTc6UaICqN1bMedC5sMtUc7y3Ha3Q8y6ZO0iCR8pq4RJC8Hjf0FEPEHZqcMB/+DFCrA==",
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
+      "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
       "requires": {
         "cacache": "^12.0.2",
         "find-cache-dir": "^2.1.0",
         "is-wsl": "^1.1.0",
         "schema-utils": "^1.0.0",
-        "serialize-javascript": "^2.1.2",
+        "serialize-javascript": "^4.0.0",
         "source-map": "^0.6.1",
         "terser": "^4.1.2",
         "webpack-sources": "^1.4.0",
         "worker-farm": "^1.7.0"
       },
       "dependencies": {
+        "serialize-javascript": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
+          "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+          "requires": {
+            "randombytes": "^2.1.0"
+          }
+        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",

js/package.json

@@ -10,7 +10,7 @@
     "dayjs": "^1.8.28",
     "expose-loader": "^0.7.5",
     "flarum-webpack-config": "0.1.0-beta.10",
-    "jquery": "^3.4.1",
+    "jquery": "^3.5.1",
     "jquery.hotkeys": "^0.1.0",
     "lodash-es": "^4.17.14",
     "m.attrs.bidi": "github:tobscure/m.attrs.bidi",

js/src/admin/AdminApplication.js

@@ -1,13 +1,29 @@
 import HeaderPrimary from './components/HeaderPrimary';
 import HeaderSecondary from './components/HeaderSecondary';
 import routes from './routes';
+import ExtensionPage from './components/ExtensionPage';
 import Application from '../common/Application';
 import Navigation from '../common/components/Navigation';
 import AdminNav from './components/AdminNav';
+import ExtensionData from './utils/ExtensionData';
 
 export default class AdminApplication extends Application {
+  // Deprecated as of beta 15
   extensionSettings = {};
 
+  extensionData = new ExtensionData();
+
+  extensionCategories = {
+    discussion: 70,
+    moderation: 60,
+    feature: 50,
+    formatting: 40,
+    theme: 30,
+    authentication: 20,
+    language: 10,
+    other: 0,
+  };
+
   history = {
     canGoBack: () => true,
     getPrevious: () => {},
@@ -27,24 +43,29 @@ export default class AdminApplication extends Application {
    * @inheritdoc
    */
   mount() {
-    m.mount(document.getElementById('app-navigation'), { view: () => Navigation.component({ className: 'App-backControl', drawer: true }) });
-    m.mount(document.getElementById('header-navigation'), Navigation);
-    m.mount(document.getElementById('header-primary'), HeaderPrimary);
-    m.mount(document.getElementById('header-secondary'), HeaderSecondary);
-    m.mount(document.getElementById('admin-navigation'), AdminNav);
-
     // Mithril does not render the home route on https://example.com/admin, so
     // we need to go to https://example.com/admin#/ explicitly.
     if (!document.location.hash) document.location.hash = '#/';
 
     m.route.prefix = '#';
-
     super.mount();
 
+    m.mount(document.getElementById('app-navigation'), {
+      view: () =>
+        Navigation.component({
+          className: 'App-backControl',
+          drawer: true,
+        }),
+    });
+    m.mount(document.getElementById('header-navigation'), Navigation);
+    m.mount(document.getElementById('header-primary'), HeaderPrimary);
+    m.mount(document.getElementById('header-secondary'), HeaderSecondary);
+    m.mount(document.getElementById('admin-navigation'), AdminNav);
+
     // If an extension has just been enabled, then we will run its settings
     // callback.
     const enabled = localStorage.getItem('enabledExtension');
-    if (enabled && this.extensionSettings[enabled]) {
+    if (enabled && this.extensionSettings[enabled] && typeof this.extensionSettings[enabled] === 'function') {
       this.extensionSettings[enabled]();
       localStorage.removeItem('enabledExtension');
     }

js/src/admin/compat.js

@@ -1,19 +1,24 @@
 import compat from '../common/compat';
 
 import saveSettings from './utils/saveSettings';
+import ExtensionData from './utils/ExtensionData';
+import isExtensionEnabled from './utils/isExtensionEnabled';
+import getCategorizedExtensions from './utils/getCategorizedExtensions';
 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 StatusWidget from './components/StatusWidget';
+import ExtensionsWidget from './components/ExtensionsWidget';
 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 ExtensionPage from './components/ExtensionPage';
+import ExtensionLinkButton from './components/ExtensionLinkButton';
 import AdminLinkButton from './components/AdminLinkButton';
 import PermissionGrid from './components/PermissionGrid';
+import ExtensionPermissionGrid from './components/ExtensionPermissionGrid';
 import MailPage from './components/MailPage';
 import UploadImageButton from './components/UploadImageButton';
 import LoadingModal from './components/LoadingModal';
@@ -23,6 +28,7 @@ import EditCustomHeaderModal from './components/EditCustomHeaderModal';
 import PermissionsPage from './components/PermissionsPage';
 import PermissionDropdown from './components/PermissionDropdown';
 import AdminNav from './components/AdminNav';
+import AdminHeader from './components/AdminHeader';
 import EditCustomCssModal from './components/EditCustomCssModal';
 import EditGroupModal from './components/EditGroupModal';
 import routes from './routes';
@@ -30,19 +36,24 @@ import AdminApplication from './AdminApplication';
 
 export default Object.assign(compat, {
   'utils/saveSettings': saveSettings,
+  'utils/ExtensionData': ExtensionData,
+  'utils/isExtensionEnabled': isExtensionEnabled,
+  'utils/getCategorizedExtensions': getCategorizedExtensions,
   'components/SettingDropdown': SettingDropdown,
   'components/EditCustomFooterModal': EditCustomFooterModal,
   'components/SessionDropdown': SessionDropdown,
   'components/HeaderPrimary': HeaderPrimary,
   'components/AppearancePage': AppearancePage,
   'components/StatusWidget': StatusWidget,
+  'components/ExtensionsWidget': ExtensionsWidget,
   'components/HeaderSecondary': HeaderSecondary,
   'components/SettingsModal': SettingsModal,
   'components/DashboardWidget': DashboardWidget,
-  'components/AddExtensionModal': AddExtensionModal,
-  'components/ExtensionsPage': ExtensionsPage,
+  'components/ExtensionPage': ExtensionPage,
+  'components/ExtensionLinkButton': ExtensionLinkButton,
   'components/AdminLinkButton': AdminLinkButton,
   'components/PermissionGrid': PermissionGrid,
+  'components/ExtensionPermissionGrid': ExtensionPermissionGrid,
   'components/MailPage': MailPage,
   'components/UploadImageButton': UploadImageButton,
   'components/LoadingModal': LoadingModal,
@@ -52,6 +63,7 @@ export default Object.assign(compat, {
   'components/PermissionsPage': PermissionsPage,
   'components/PermissionDropdown': PermissionDropdown,
   'components/AdminNav': AdminNav,
+  'components/AdminHeader': AdminHeader,
   'components/EditCustomCssModal': EditCustomCssModal,
   'components/EditGroupModal': EditGroupModal,
   routes: routes,

js/src/admin/components/AdminHeader.js

@@ -0,0 +1,19 @@
+import Component from '../../common/Component';
+import classList from '../../common/utils/classList';
+import icon from '../../common/helpers/icon';
+
+export default class AdminHeader extends Component {
+  view(vnode) {
+    return [
+      <div className={classList(['AdminHeader', this.attrs.className])}>
+        <div className="container">
+          <h2>
+            {icon(this.attrs.icon)}
+            {vnode.children}
+          </h2>
+          <div className="AdminHeader-description">{this.attrs.description}</div>
+        </div>
+      </div>,
+    ];
+  }
+}

js/src/admin/components/AdminNav.js

@@ -1,106 +1,150 @@
-/*
- * 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 ExtensionLinkButton from './ExtensionLinkButton';
 import Component from '../../common/Component';
-import AdminLinkButton from './AdminLinkButton';
+import LinkButton from '../../common/components/LinkButton';
 import SelectDropdown from '../../common/components/SelectDropdown';
+import getCategorizedExtensions from '../utils/getCategorizedExtensions';
 import ItemList from '../../common/utils/ItemList';
+import Stream from '../../common/utils/Stream';
 
 export default class AdminNav extends Component {
+  oninit(vnode) {
+    super.oninit(vnode);
+
+    this.query = Stream('');
+  }
+
   view() {
     return (
-      <SelectDropdown className="AdminNav App-titleControl" buttonClassName="Button">
-        {this.items().toArray()}
+      <SelectDropdown className="AdminNav App-titleControl AdminNav-Main" buttonClassName="Button">
+        {this.items().toArray().concat(this.extensionItems().toArray())}
       </SelectDropdown>
     );
   }
 
+  oncreate(vnode) {
+    super.oncreate(vnode);
+
+    this.scrollToActive();
+  }
+
+  onupdate() {
+    this.scrollToActive();
+  }
+
+  scrollToActive() {
+    const children = $('.Dropdown-menu').children('.active');
+    const nav = $('#admin-navigation');
+    const time = app.previous.type ? 250 : 0;
+
+    if (
+      children.length > 0 &&
+      (children[0].offsetTop > nav.scrollTop() + nav.outerHeight() || children[0].offsetTop + children[0].offsetHeight < nav.scrollTop())
+    ) {
+      nav.animate(
+        {
+          scrollTop: children[0].offsetTop - nav.height() / 2,
+        },
+        time
+      );
+    }
+  }
+
   /**
-   * Build an item list of links to show in the admin navigation.
+   * Build an item list of main links to show in the admin navigation.
    *
    * @return {ItemList}
    */
   items() {
     const items = new ItemList();
 
+    items.add('category-core', <h4 className="ExtensionListTitle">{app.translator.trans('core.admin.nav.categories.core')}</h4>);
+
     items.add(
       'dashboard',
-      AdminLinkButton.component(
-        {
-          href: app.route('dashboard'),
-          icon: 'far fa-chart-bar',
-          description: app.translator.trans('core.admin.nav.dashboard_text'),
-        },
-        app.translator.trans('core.admin.nav.dashboard_button')
-      )
+      <LinkButton href={app.route('dashboard')} icon="far fa-chart-bar" title={app.translator.trans('core.admin.nav.dashboard_title')}>
+        {app.translator.trans('core.admin.nav.dashboard_button')}
+      </LinkButton>
     );
 
     items.add(
       'basics',
-      AdminLinkButton.component(
-        {
-          href: app.route('basics'),
-          icon: 'fas fa-pencil-alt',
-          description: app.translator.trans('core.admin.nav.basics_text'),
-        },
-        app.translator.trans('core.admin.nav.basics_button')
-      )
+      <LinkButton href={app.route('basics')} icon="fas fa-pencil-alt" title={app.translator.trans('core.admin.nav.basics_title')}>
+        {app.translator.trans('core.admin.nav.basics_button')}
+      </LinkButton>
     );
 
     items.add(
       'mail',
-      AdminLinkButton.component(
-        {
-          href: app.route('mail'),
-          icon: 'fas fa-envelope',
-          description: app.translator.trans('core.admin.nav.email_text'),
-        },
-        app.translator.trans('core.admin.nav.email_button')
-      )
+      <LinkButton href={app.route('mail')} icon="fas fa-envelope" title={app.translator.trans('core.admin.nav.email_title')}>
+        {app.translator.trans('core.admin.nav.email_button')}
+      </LinkButton>
     );
 
     items.add(
       'permissions',
-      AdminLinkButton.component(
-        {
-          href: app.route('permissions'),
-          icon: 'fas fa-key',
-          description: app.translator.trans('core.admin.nav.permissions_text'),
-        },
-        app.translator.trans('core.admin.nav.permissions_button')
-      )
+      <LinkButton href={app.route('permissions')} icon="fas fa-key" title={app.translator.trans('core.admin.nav.permissions_title')}>
+        {app.translator.trans('core.admin.nav.permissions_button')}
+      </LinkButton>
     );
 
     items.add(
       'appearance',
-      AdminLinkButton.component(
-        {
-          href: app.route('appearance'),
-          icon: 'fas fa-paint-brush',
-          description: app.translator.trans('core.admin.nav.appearance_text'),
-        },
-        app.translator.trans('core.admin.nav.appearance_button')
-      )
+      <LinkButton href={app.route('appearance')} icon="fas fa-paint-brush" title={app.translator.trans('core.admin.nav.appearance_title')}>
+        {app.translator.trans('core.admin.nav.appearance_button')}
+      </LinkButton>
     );
 
     items.add(
-      'extensions',
-      AdminLinkButton.component(
-        {
-          href: app.route('extensions'),
-          icon: 'fas fa-puzzle-piece',
-          description: app.translator.trans('core.admin.nav.extensions_text'),
-        },
-        app.translator.trans('core.admin.nav.extensions_button')
-      )
+      'search',
+      <div className="Search-input">
+        <input
+          className="FormControl SearchBar"
+          bidi={this.query}
+          type="search"
+          placeholder={app.translator.trans('core.admin.nav.search_placeholder')}
+        />
+      </div>
     );
 
     return items;
   }
+
+  extensionItems() {
+    const items = new ItemList();
+
+    const categorizedExtensions = getCategorizedExtensions();
+    const categories = app.extensionCategories;
+
+    Object.keys(categorizedExtensions).map((category) => {
+      if (!this.query()) {
+        items.add(
+          `category-${category}`,
+          <h4 className="ExtensionListTitle">{app.translator.trans(`core.admin.nav.categories.${category}`)}</h4>,
+          categories[category]
+        );
+      }
+
+      categorizedExtensions[category].map((extension) => {
+        const query = this.query().toUpperCase();
+        const title = extension.extra['flarum-extension'].title;
+
+        if (!query || title.toUpperCase().includes(query) || extension.description.toUpperCase().includes(query)) {
+          items.add(
+            `extension-${extension.id}`,
+            <ExtensionLinkButton
+              href={app.route('extension', { id: extension.id })}
+              extensionId={extension.id}
+              className="ExtensionNavButton"
+              title={extension.description}
+            >
+              {title}
+            </ExtensionLinkButton>,
+            categories[category]
+          );
+        }
+      });
+    });
+
+    return items;
+  }
 }

js/src/admin/components/AppearancePage.js

@@ -7,6 +7,7 @@ import EditCustomHeaderModal from './EditCustomHeaderModal';
 import EditCustomFooterModal from './EditCustomFooterModal';
 import UploadImageButton from './UploadImageButton';
 import saveSettings from '../utils/saveSettings';
+import AdminHeader from './AdminHeader';
 
 export default class AppearancePage extends Page {
   oninit(vnode) {
@@ -21,6 +22,13 @@ export default class AppearancePage extends Page {
   view() {
     return (
       <div className="AppearancePage">
+        <AdminHeader
+          icon="fas fa-paint-brush"
+          description={app.translator.trans('core.admin.appearance.description')}
+          className="AppearancePage-header"
+        >
+          {app.translator.trans('core.admin.appearance.title')}
+        </AdminHeader>
         <div className="container">
           <form onsubmit={this.onsubmit.bind(this)}>
             <fieldset className="AppearancePage-colors">

js/src/admin/components/BasicsPage.js

@@ -7,6 +7,7 @@ import ItemList from '../../common/utils/ItemList';
 import Switch from '../../common/components/Switch';
 import Stream from '../../common/utils/Stream';
 import withAttr from '../../common/utils/withAttr';
+import AdminHeader from './AdminHeader';
 
 export default class BasicsPage extends Page {
   oninit(vnode) {
@@ -24,10 +25,6 @@ export default class BasicsPage extends Page {
       'welcome_message',
       'display_name_driver',
     ];
-    this.values = {};
-
-    const settings = app.data.settings;
-    this.fields.forEach((key) => (this.values[key] = Stream(settings[key])));
 
     this.localeOptions = {};
     const locales = app.data.locales;
@@ -41,14 +38,38 @@ export default class BasicsPage extends Page {
       this.displayNameOptions[identifier] = identifier;
     }, this);
 
+    this.slugDriverOptions = {};
+    Object.keys(app.data.slugDrivers).forEach((model) => {
+      this.fields.push(`slug_driver_${model}`);
+      this.slugDriverOptions[model] = {};
+
+      app.data.slugDrivers[model].forEach((option) => {
+        this.slugDriverOptions[model][option] = option;
+      });
+    });
+
+    this.values = {};
+
+    const settings = app.data.settings;
+    this.fields.forEach((key) => (this.values[key] = Stream(settings[key])));
+
     if (!this.values.display_name_driver() && displayNameDrivers.includes('username')) this.values.display_name_driver('username');
 
+    Object.keys(app.data.slugDrivers).forEach((model) => {
+      if (!this.values[`slug_driver_${model}`]() && 'default' in this.slugDriverOptions[model]) {
+        this.values[`slug_driver_${model}`]('default');
+      }
+    });
+
     if (typeof this.values.show_language_selector() !== 'number') this.values.show_language_selector(1);
   }
 
   view() {
     return (
       <div className="BasicsPage">
+        <AdminHeader icon="fas fa-pencil-alt" description={app.translator.trans('core.admin.basics.description')} className="BasicsPage-header">
+          {app.translator.trans('core.admin.basics.title')}
+        </AdminHeader>
         <div className="container">
           <form onsubmit={this.onsubmit.bind(this)}>
             {FieldSet.component(
@@ -128,20 +149,30 @@ export default class BasicsPage extends Page {
               ]
             )}
 
-            {Object.keys(this.displayNameOptions).length > 1
-              ? FieldSet.component(
-                  {
-                    label: app.translator.trans('core.admin.basics.display_name_heading'),
-                  },
-                  [
-                    <div className="helpText">{app.translator.trans('core.admin.basics.display_name_text')}</div>,
-                    Select.component({
-                      options: this.displayNameOptions,
-                      bidi: this.values.display_name_driver,
-                    }),
-                  ]
-                )
-              : ''}
+            {Object.keys(this.displayNameOptions).length > 1 ? (
+              <FieldSet label={app.translator.trans('core.admin.basics.display_name_heading')}>
+                <div className="helpText">{app.translator.trans('core.admin.basics.display_name_text')}</div>
+                <Select
+                  options={this.displayNameOptions}
+                  value={this.values.display_name_driver()}
+                  onchange={this.values.display_name_driver}
+                ></Select>
+              </FieldSet>
+            ) : (
+              ''
+            )}
+
+            {Object.keys(this.slugDriverOptions).map((model) => {
+              const options = this.slugDriverOptions[model];
+              if (Object.keys(options).length > 1) {
+                return (
+                  <FieldSet label={app.translator.trans('core.admin.basics.slug_driver_heading', { model })}>
+                    <div className="helpText">{app.translator.trans('core.admin.basics.slug_driver_text', { model })}</div>
+                    <Select options={options} value={this.values[`slug_driver_${model}`]()} onchange={this.values[`slug_driver_${model}`]}></Select>
+                  </FieldSet>
+                );
+              }
+            })}
 
             {Button.component(
               {

js/src/admin/components/DashboardPage.js

@@ -1,16 +1,29 @@
 import Page from '../../common/components/Page';
 import StatusWidget from './StatusWidget';
+import ExtensionsWidget from './ExtensionsWidget';
+import AdminHeader from './AdminHeader';
+import ItemList from '../../common/utils/ItemList';
+import listItems from '../../common/helpers/listItems';
 
 export default class DashboardPage extends Page {
   view() {
     return (
       <div className="DashboardPage">
-        <div className="container">{this.availableWidgets()}</div>
+        <AdminHeader icon="fas fa-chart-bar" description={app.translator.trans('core.admin.dashboard.description')} className="DashboardPage-header">
+          {app.translator.trans('core.admin.dashboard.title')}
+        </AdminHeader>
+        <div className="container">{this.availableWidgets().toArray()}</div>
       </div>
     );
   }
 
   availableWidgets() {
-    return [<StatusWidget />];
+    const items = new ItemList();
+
+    items.add('status', <StatusWidget />, 30);
+
+    items.add('extensions', <ExtensionsWidget />, 10);
+
+    return items;
   }
 }

js/src/admin/components/ExtensionLinkButton.js

@@ -0,0 +1,29 @@
+import isExtensionEnabled from '../utils/isExtensionEnabled';
+import LinkButton from '../../common/components/LinkButton';
+import icon from '../../common/helpers/icon';
+import ItemList from '../../common/utils/ItemList';
+
+export default class ExtensionLinkButton extends LinkButton {
+  getButtonContent(children) {
+    const content = super.getButtonContent(children);
+    const extension = app.data.extensions[this.attrs.extensionId];
+    const statuses = this.statusItems(extension.id).toArray();
+
+    content.unshift(
+      <span className="ExtensionListItem-icon ExtensionIcon" style={extension.icon}>
+        {extension.icon ? icon(extension.icon.name) : ''}
+      </span>
+    );
+    content.push(statuses);
+
+    return content;
+  }
+
+  statusItems(name) {
+    const items = new ItemList();
+
+    items.add('enabled', <span class={'ExtensionListItem-Dot ' + (isExtensionEnabled(name) ? 'enabled' : 'disabled')} />);
+
+    return items;
+  }
+}

js/src/admin/components/ExtensionPage.js

@@ -0,0 +1,363 @@
+import Button from '../../common/components/Button';
+import Link from '../../common/components/Link';
+import LinkButton from '../../common/components/LinkButton';
+import Page from '../../common/components/Page';
+import Select from '../../common/components/Select';
+import Switch from '../../common/components/Switch';
+import icon from '../../common/helpers/icon';
+import punctuateSeries from '../../common/helpers/punctuateSeries';
+import listItems from '../../common/helpers/listItems';
+import ItemList from '../../common/utils/ItemList';
+import Stream from '../../common/utils/Stream';
+import LoadingModal from './LoadingModal';
+import ExtensionPermissionGrid from './ExtensionPermissionGrid';
+import saveSettings from '../utils/saveSettings';
+import isExtensionEnabled from '../utils/isExtensionEnabled';
+
+export default class ExtensionPage extends Page {
+  oninit(vnode) {
+    super.oninit(vnode);
+
+    this.loading = false;
+    this.extension = app.data.extensions[this.attrs.id];
+    this.changingState = false;
+    this.settings = {};
+
+    this.infoFields = {
+      discuss: 'fas fa-comment-alt',
+      documentation: 'fas fa-book',
+      support: 'fas fa-life-ring',
+      website: 'fas fa-link',
+      donate: 'fas fa-donate',
+      source: 'fas fa-code',
+    };
+
+    // Backwards compatibility layer will be removed in
+    // Beta 16
+    if (app.extensionSettings[this.extension.id]) {
+      app.extensionData[this.extension.id] = app.extensionSettings[this.extension.id];
+    }
+  }
+
+  className() {
+    return this.extension.id + '-Page';
+  }
+
+  view() {
+    return (
+      <div className={'ExtensionPage ' + this.className()}>
+        {this.header()}
+        {!this.isEnabled() ? (
+          <div className="container">
+            <h3 className="ExtensionPage-subHeader">{app.translator.trans('core.admin.extension.enable_to_see')}</h3>
+          </div>
+        ) : (
+          <div className="ExtensionPage-body">{this.sections().toArray()}</div>
+        )}
+      </div>
+    );
+  }
+
+  header() {
+    return [
+      <div className="ExtensionPage-header">
+        <div className="container">
+          <div className="ExtensionTitle">
+            <span className="ExtensionIcon" style={this.extension.icon}>
+              {this.extension.icon ? icon(this.extension.icon.name) : ''}
+            </span>
+            <div className="ExtensionName">
+              <h2>{this.extension.extra['flarum-extension'].title}</h2>
+            </div>
+            <div className="ExtensionPage-headerTopItems">
+              <ul>{listItems(this.topItems().toArray())}</ul>
+            </div>
+          </div>
+          <div className="helpText">{this.extension.description}</div>
+          <div className="ExtensionPage-headerItems">
+            <Switch state={this.isEnabled()} onchange={this.toggle.bind(this, this.extension.id)}>
+              {this.isEnabled(this.extension.id)
+                ? app.translator.trans('core.admin.extension.enabled')
+                : app.translator.trans('core.admin.extension.disabled')}
+            </Switch>
+            <aside className="ExtensionInfo">
+              <ul>{listItems(this.infoItems().toArray())}</ul>
+            </aside>
+          </div>
+        </div>
+      </div>,
+    ];
+  }
+
+  sections() {
+    const items = new ItemList();
+
+    items.add('content', this.content());
+
+    items.add('permissions', [
+      <div className="ExtensionPage-permissions">
+        <div className="ExtensionPage-permissions-header">
+          <div className="container">
+            <h2 className="ExtensionTitle">{app.translator.trans('core.admin.extension.permissions_title')}</h2>
+          </div>
+        </div>
+        <div className="container">
+          {app.extensionData.extensionHasPermissions(this.extension.id) ? (
+            ExtensionPermissionGrid.component({ extensionId: this.extension.id })
+          ) : (
+            <h3 className="ExtensionPage-subHeader">{app.translator.trans('core.admin.extension.no_permissions')}</h3>
+          )}
+        </div>
+      </div>,
+    ]);
+
+    return items;
+  }
+
+  content() {
+    const settings = app.extensionData.getSettings(this.extension.id);
+
+    return (
+      <div className="ExtensionPage-settings">
+        <div className="container">
+          {typeof app.extensionData[this.extension.id] === 'function' ? (
+            <Button onclick={app.extensionData[this.extension.id].bind(this)} className="Button Button--primary">
+              {app.translator.trans('core.admin.extension.open_modal')}
+            </Button>
+          ) : settings ? (
+            <div className="Form">
+              {settings.map(this.buildSettingComponent.bind(this))}
+              <div className="Form-group">{this.submitButton()}</div>
+            </div>
+          ) : (
+            <h3 className="ExtensionPage-subHeader">{app.translator.trans('core.admin.extension.no_settings')}</h3>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  topItems() {
+    const items = new ItemList();
+
+    items.add('version', <span className="ExtensionVersion">{this.extension.version}</span>);
+
+    if (!this.isEnabled()) {
+      const uninstall = () => {
+        if (confirm(app.translator.trans('core.admin.extension.confirm_uninstall'))) {
+          app
+            .request({
+              url: app.forum.attribute('apiUrl') + '/extensions/' + this.extension.id,
+              method: 'DELETE',
+            })
+            .then(() => window.location.reload());
+
+          app.modal.show(LoadingModal);
+        }
+      };
+
+      items.add(
+        'uninstall',
+        <Button icon="fas fa-trash-alt" className="Button Button--primary" onclick={uninstall.bind(this)}>
+          {app.translator.trans('core.admin.extension.uninstall_button')}
+        </Button>
+      );
+    }
+
+    return items;
+  }
+
+  infoItems() {
+    const items = new ItemList();
+
+    const links = this.extension.links;
+
+    if (links.authors.length) {
+      let authors = [];
+
+      links.authors.map((author) => {
+        authors.push(
+          <Link href={author.link} external={true} target="_blank">
+            {author.name}
+          </Link>
+        );
+      });
+
+      items.add('authors', [icon('fas fa-user'), <span>{punctuateSeries(authors)}</span>]);
+    }
+
+    Object.keys(this.infoFields).map((field) => {
+      if (links[field]) {
+        items.add(
+          field,
+          <LinkButton href={links[field]} icon={this.infoFields[field]} external={true} target="_blank">
+            {app.translator.trans(`core.admin.extension.info_links.${field}`)}
+          </LinkButton>
+        );
+      }
+    });
+
+    return items;
+  }
+
+  submitButton() {
+    return (
+      <Button onclick={this.saveSettings.bind(this)} className="Button Button--primary" loading={this.loading} disabled={!this.isChanged()}>
+        {app.translator.trans('core.admin.settings.submit_button')}
+      </Button>
+    );
+  }
+
+  /**
+   * getSetting takes a settings object and turns it into a component.
+   * Depending on the type of input, you can set the type to 'bool', 'select', or
+   * any standard <input> type.
+   *
+   * Alternatively, you can pass a callback that will be executed in ExtensionPage's
+   * context to include custom JSX elements.
+   *
+   * @example
+   *
+   * {
+   *    setting: 'acme.checkbox',
+   *    label: app.translator.trans('acme.admin.setting_label'),
+   *    type: 'bool'
+   * }
+   *
+   * @example
+   *
+   * {
+   *    setting: 'acme.select',
+   *    label: app.translator.trans('acme.admin.setting_label'),
+   *    type: 'select',
+   *    options: {
+   *      'option1': 'Option 1 label',
+   *      'option2': 'Option 2 label',
+   *    },
+   *    default: 'option1',
+   * }
+   *
+   * @param setting
+   * @returns {JSX.Element}
+   */
+  buildSettingComponent(entry) {
+    if (typeof entry === 'function') {
+      return entry.call(this);
+    }
+
+    const setting = entry.setting;
+    const value = this.setting([setting])();
+    if (['bool', 'checkbox', 'switch', 'boolean'].includes(entry.type)) {
+      return (
+        <div className="Form-group">
+          <Switch state={!!value && value !== '0'} onchange={this.settings[setting]}>
+            {entry.label}
+          </Switch>
+        </div>
+      );
+    } else if (['select', 'dropdown', 'selectdropdown'].includes(entry.type)) {
+      return (
+        <div className="Form-group">
+          <label>{entry.label}</label>
+          <Select value={value || entry.default} options={entry.options} buttonClassName="Button" onchange={this.settings[setting]} />
+        </div>
+      );
+    } else {
+      return (
+        <div className="Form-group">
+          <label>{entry.label}</label>
+          <input type={entry.type} className="FormControl" bidi={this.setting(setting)} />
+        </div>
+      );
+    }
+  }
+
+  toggle() {
+    const enabled = this.isEnabled();
+
+    this.changingState = true;
+
+    app
+      .request({
+        url: app.forum.attribute('apiUrl') + '/extensions/' + this.extension.id,
+        method: 'PATCH',
+        body: { enabled: !enabled },
+        errorHandler: this.onerror.bind(this),
+      })
+      .then(() => {
+        if (!enabled) localStorage.setItem('enabledExtension', this.extension.id);
+        window.location.reload();
+      });
+
+    app.modal.show(LoadingModal);
+  }
+
+  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;
+  }
+
+  isChanged() {
+    return Object.keys(this.dirty()).length;
+  }
+
+  saveSettings(e) {
+    e.preventDefault();
+
+    app.alerts.clear();
+
+    this.loading = true;
+
+    saveSettings(this.dirty()).then(this.onsaved.bind(this));
+  }
+
+  onsaved() {
+    this.loading = false;
+
+    app.alerts.show({ type: 'success' }, app.translator.trans('core.admin.extension.saved_message'));
+  }
+
+  setting(key, fallback = '') {
+    this.settings[key] = this.settings[key] || Stream(app.data.settings[key] || fallback);
+
+    return this.settings[key];
+  }
+
+  isEnabled() {
+    let isEnabled = isExtensionEnabled(this.extension.id);
+
+    return this.changingState ? !isEnabled : isEnabled;
+  }
+
+  onerror(e) {
+    // We need to give the modal animation time to start; if we close the modal too early,
+    // it breaks the bootstrap modal library.
+    // TODO: This workaround should be removed when we move away from bootstrap JS for modals.
+    setTimeout(() => {
+      app.modal.close();
+    }, 300); // Bootstrap's Modal.TRANSITION_DURATION is 300 ms.
+
+    if (e.status !== 409) {
+      throw e;
+    }
+
+    const error = e.response.errors[0];
+
+    app.alerts.show(
+      { type: 'error' },
+      app.translator.trans(`core.lib.error.${error.code}_message`, {
+        extension: error.extension,
+        extensions: error.extensions.join(', '),
+      })
+    );
+  }
+}

js/src/admin/components/ExtensionPermissionGrid.js

@@ -0,0 +1,39 @@
+import PermissionGrid from './PermissionGrid';
+import ItemList from '../../common/utils/ItemList';
+
+export default class ExtensionPermissionGrid extends PermissionGrid {
+  oninit(vnode) {
+    super.oninit(vnode);
+
+    this.extensionId = this.attrs.extensionId;
+  }
+
+  permissionItems() {
+    const permissionCategories = super.permissionItems();
+
+    permissionCategories.items = Object.entries(permissionCategories.items)
+      .filter(([category, info]) => info.content.children.length > 0)
+      .reduce((obj, [category, info]) => {
+        obj[category] = info;
+        return obj;
+      }, {});
+
+    return permissionCategories;
+  }
+
+  viewItems() {
+    return app.extensionData.getExtensionPermissions(this.extensionId, 'view') || new ItemList();
+  }
+
+  startItems() {
+    return app.extensionData.getExtensionPermissions(this.extensionId, 'start') || new ItemList();
+  }
+
+  replyItems() {
+    return app.extensionData.getExtensionPermissions(this.extensionId, 'reply') || new ItemList();
+  }
+
+  moderateItems() {
+    return app.extensionData.getExtensionPermissions(this.extensionId, 'moderate') || new ItemList();
+  }
+}

js/src/admin/components/ExtensionsPage.js

@@ -1,154 +0,0 @@
-import Page from '../../common/components/Page';
-import Button from '../../common/components/Button';
-import Dropdown from '../../common/components/Dropdown';
-import AddExtensionModal from './AddExtensionModal';
-import LoadingModal from './LoadingModal';
-import ItemList from '../../common/utils/ItemList';
-import icon from '../../common/helpers/icon';
-
-export default class ExtensionsPage extends Page {
-  view() {
-    return (
-      <div className="ExtensionsPage">
-        <div className="ExtensionsPage-header">
-          <div className="container">
-            {Button.component(
-              {
-                icon: 'fas fa-plus',
-                className: 'Button Button--primary',
-                onclick: () => app.modal.show(AddExtensionModal),
-              },
-              app.translator.trans('core.admin.extensions.add_button')
-            )}
-          </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',
-            onclick: app.extensionSettings[name],
-          },
-          app.translator.trans('core.admin.extensions.settings_button')
-        )
-      );
-    }
-
-    if (!enabled) {
-      items.add(
-        'uninstall',
-        Button.component(
-          {
-            icon: 'far fa-trash-alt',
-            onclick: () => {
-              app
-                .request({
-                  url: app.forum.attribute('apiUrl') + '/extensions/' + name,
-                  method: 'DELETE',
-                })
-                .then(() => window.location.reload());
-
-              app.modal.show(LoadingModal);
-            },
-          },
-          app.translator.trans('core.admin.extensions.uninstall_button')
-        )
-      );
-    }
-
-    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',
-        body: { enabled: !enabled },
-        errorHandler: this.onerror.bind(this),
-      })
-      .then(() => {
-        if (!enabled) localStorage.setItem('enabledExtension', id);
-        window.location.reload();
-      });
-
-    app.modal.show(LoadingModal);
-  }
-
-  onerror(e) {
-    // We need to give the modal animation time to start; if we close the modal too early,
-    // it breaks the bootstrap modal library.
-    // TODO: This workaround should be removed when we move away from bootstrap JS for modals.
-    setTimeout(() => {
-      app.modal.close();
-
-      const error = JSON.parse(e.responseText).errors[0];
-
-      app.alerts.show(
-        { type: 'error' },
-        app.translator.trans(`core.lib.error.${error.code}_message`, {
-          extension: error.extension,
-          extensions: error.extensions.join(', '),
-        })
-      );
-    }, 250);
-  }
-}

js/src/admin/components/ExtensionsWidget.js

@@ -0,0 +1,46 @@
+import DashboardWidget from './DashboardWidget';
+import isExtensionEnabled from '../utils/isExtensionEnabled';
+import getCategorizedExtensions from '../utils/getCategorizedExtensions';
+import Link from '../../common/components/Link';
+import icon from '../../common/helpers/icon';
+
+export default class ExtensionsWidget extends DashboardWidget {
+  className() {
+    return 'ExtensionsWidget';
+  }
+
+  content() {
+    const categorizedExtensions = getCategorizedExtensions();
+    const categories = app.extensionCategories;
+
+    return (
+      <div className="ExtensionsWidget-list">
+        {Object.keys(categories).map((category) => {
+          if (categorizedExtensions[category]) {
+            return (
+              <div className="ExtensionList-Category">
+                <h4 className="ExtensionList-Label">{app.translator.trans(`core.admin.nav.categories.${category}`)}</h4>
+                <ul className="ExtensionList">
+                  {categorizedExtensions[category].map((extension) => {
+                    return (
+                      <li className={'ExtensionListItem ' + (!isExtensionEnabled(extension.id) ? 'disabled' : '')}>
+                        <Link href={app.route('extension', { id: extension.id })}>
+                          <div className="ExtensionListItem-content">
+                            <span className="ExtensionListItem-icon ExtensionIcon" style={extension.icon}>
+                              {extension.icon ? icon(extension.icon.name) : ''}
+                            </span>
+                            <span className="ExtensionListItem-title">{extension.extra['flarum-extension'].title}</span>
+                          </div>
+                        </Link>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+            );
+          }
+        })}
+      </div>
+    );
+  }
+}

js/src/admin/components/HeaderSecondary.js

@@ -1,4 +1,5 @@
 import Component from '../../common/Component';
+import LinkButton from '../../common/components/LinkButton';
 import SessionDropdown from './SessionDropdown';
 import ItemList from '../../common/utils/ItemList';
 import listItems from '../../common/helpers/listItems';
@@ -19,6 +20,13 @@ export default class HeaderSecondary extends Component {
   items() {
     const items = new ItemList();
 
+    items.add(
+      'help',
+      <LinkButton href="https://docs.flarum.org/troubleshoot.html" icon="fas fa-question-circle" external={true} target="_blank">
+        {app.translator.trans('core.admin.header.get_help')}
+      </LinkButton>
+    );
+
     items.add('session', SessionDropdown.component());
 
     return items;

js/src/admin/components/MailPage.js

@@ -6,6 +6,8 @@ import Select from '../../common/components/Select';
 import LoadingIndicator from '../../common/components/LoadingIndicator';
 import saveSettings from '../utils/saveSettings';
 import Stream from '../../common/utils/Stream';
+import icon from '../../common/helpers/icon';
+import AdminHeader from './AdminHeader';
 
 export default class MailPage extends Page {
   oninit(vnode) {
@@ -65,11 +67,11 @@ export default class MailPage extends Page {
 
     return (
       <div className="MailPage">
+        <AdminHeader icon="fas fa-envelope" description={app.translator.trans('core.admin.email.description')} className="MailPage-header">
+          {app.translator.trans('core.admin.email.title')}
+        </AdminHeader>
         <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'),

js/src/admin/components/PermissionGrid.js

@@ -6,12 +6,6 @@ import ItemList from '../../common/utils/ItemList';
 import icon from '../../common/helpers/icon';
 
 export default class PermissionGrid extends Component {
-  oninit(vnode) {
-    super.oninit(vnode);
-
-    this.permissions = this.permissionItems().toArray();
-  }
-
   view() {
     const scopes = this.scopeItems().toArray();
 
@@ -35,25 +29,27 @@ export default class PermissionGrid extends Component {
             <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)}
+        {this.permissionItems()
+          .toArray()
+          .map((section) => (
+            <tbody>
+              <tr className="PermissionGrid-section">
+                <th>{section.label}</th>
+                {permissionCells(section)}
                 <td />
               </tr>
-            ))}
-          </tbody>
-        ))}
+              {section.children.map((child) => (
+                <tr className="PermissionGrid-child">
+                  <th>
+                    {icon(child.icon)}
+                    {child.label}
+                  </th>
+                  {permissionCells(child)}
+                  <td />
+                </tr>
+              ))}
+            </tbody>
+          ))}
       </table>
     );
   }
@@ -158,6 +154,8 @@ export default class PermissionGrid extends Component {
       permission: 'user.viewLastSeenAt',
     });
 
+    items.merge(app.extensionData.getAllExtensionPermissions('view'));
+
     return items;
   }
 
@@ -198,6 +196,8 @@ export default class PermissionGrid extends Component {
       90
     );
 
+    items.merge(app.extensionData.getAllExtensionPermissions('start'));
+
     return items;
   }
 
@@ -238,6 +238,8 @@ export default class PermissionGrid extends Component {
       90
     );
 
+    items.merge(app.extensionData.getAllExtensionPermissions('reply'));
+
     return items;
   }
 
@@ -334,6 +336,8 @@ export default class PermissionGrid extends Component {
       60
     );
 
+    items.merge(app.extensionData.getAllExtensionPermissions('moderate'));
+
     return items;
   }
 

js/src/admin/components/PermissionsPage.js

@@ -4,11 +4,15 @@ import EditGroupModal from './EditGroupModal';
 import Group from '../../common/models/Group';
 import icon from '../../common/helpers/icon';
 import PermissionGrid from './PermissionGrid';
+import AdminHeader from './AdminHeader';
 
 export default class PermissionsPage extends Page {
   view() {
     return (
       <div className="PermissionsPage">
+        <AdminHeader icon="fas fa-key" description={app.translator.trans('core.admin.permissions.description')} className="PermissionsPage-header">
+          {app.translator.trans('core.admin.permissions.title')}
+        </AdminHeader>
         <div className="PermissionsPage-groups">
           <div className="container">
             {app.store

js/src/admin/index.js

@@ -10,8 +10,9 @@ export { app };
 // Export public API
 
 // Export compat API
-import compat from './compat';
+import compatObj from './compat';
+import proxifyCompat from '../common/utils/proxifyCompat';
 
-compat.app = app;
+compatObj.app = app;
 
-export { compat };
+export const compat = proxifyCompat(compatObj, 'admin');

js/src/admin/resolvers/ExtensionPageResolver.ts

@@ -0,0 +1,19 @@
+import DefaultResolver from '../../common/resolvers/DefaultResolver';
+
+/**
+ * A custom route resolver for ExtensionPage that generates handles routes
+ * to default extension pages or a page provided by an extension.
+ */
+export default class ExtensionPageResolver extends DefaultResolver {
+  static extension: string | null = null;
+
+  onmatch(args, requestedPath, route) {
+    const extensionPage = app.extensionData.getPage(args.id);
+
+    if (extensionPage) {
+      return extensionPage;
+    }
+
+    return super.onmatch(args, requestedPath, route);
+  }
+}

js/src/admin/routes.js

@@ -2,8 +2,9 @@ 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';
+import ExtensionPage from './components/ExtensionPage';
+import ExtensionPageResolver from './resolvers/ExtensionPageResolver';
 
 /**
  * The `routes` initializer defines the forum app's routes.
@@ -16,7 +17,7 @@ export default function (app) {
     basics: { path: '/basics', component: BasicsPage },
     permissions: { path: '/permissions', component: PermissionsPage },
     appearance: { path: '/appearance', component: AppearancePage },
-    extensions: { path: '/extensions', component: ExtensionsPage },
     mail: { path: '/mail', component: MailPage },
+    extension: { path: '/extension/:id', component: ExtensionPage, resolverClass: ExtensionPageResolver },
   };
 }

js/src/admin/utils/ExtensionData.js

@@ -0,0 +1,177 @@
+import ItemList from '../../common/utils/ItemList';
+
+export default class ExtensionData {
+  constructor() {
+    this.data = {};
+    this.currentExtension = null;
+  }
+
+  /**
+   * This function simply takes the extension id
+   *
+   * @example
+   * app.extensionData.load('flarum-tags')
+   *
+   * flarum/flags -> flarum-flags | acme/extension -> acme-extension
+   *
+   * @param extension
+   */
+  for(extension) {
+    this.currentExtension = extension;
+    this.data[extension] = this.data[extension] || {};
+
+    return this;
+  }
+
+  /**
+   * This function registers your settings with Flarum
+   *
+   * It takes either a settings object or a callback.
+   *
+   * @example
+   *
+   * .registerSetting({
+   *   setting: 'flarum-flags.guidelines_url',
+   *   type: 'text', // This will be inputted into the input tag for the setting (text/number/etc)
+   *   label: app.translator.trans('flarum-flags.admin.settings.guidelines_url_label')
+   * }, 15) // priority is optional (ItemList)
+   *
+   *
+   * @param content
+   * @param priority
+   * @returns {ExtensionData}
+   */
+  registerSetting(content, priority = 0) {
+    this.data[this.currentExtension].settings = this.data[this.currentExtension].settings || new ItemList();
+
+    // Callbacks can be passed in instead of settings to display custom content.
+    // By default, they will be added with the `null` key, since they don't have a `.setting` attr.
+    // To support multiple such items for one extension, we assign a random ID.
+    // 36 is arbitrary length, but makes collisions very unlikely.
+    if (typeof content === 'function') {
+      content.setting = Math.random().toString(36);
+    }
+
+    this.data[this.currentExtension].settings.add(content.setting, content, priority);
+
+    return this;
+  }
+
+  /**
+   * This function registers your permission with Flarum
+   *
+   * @example
+   *
+   * .registerPermission('permissions', {
+   *     icon: 'fas fa-flag',
+   *     label: app.translator.trans('flarum-flags.admin.permissions.view_flags_label'),
+   *     permission: 'discussion.viewFlags'
+   * }, 'moderate', 65)
+   *
+   * @param content
+   * @param permissionType
+   * @param priority
+   * @returns {ExtensionData}
+   */
+  registerPermission(content, permissionType = null, priority = 0) {
+    this.data[this.currentExtension].permissions = this.data[this.currentExtension].permissions || {};
+
+    if (!this.data[this.currentExtension].permissions[permissionType]) {
+      this.data[this.currentExtension].permissions[permissionType] = new ItemList();
+    }
+
+    this.data[this.currentExtension].permissions[permissionType].add(content.permission, content, priority);
+
+    return this;
+  }
+
+  /**
+   * Replace the default extension page with a custom component.
+   * This component would typically extend ExtensionPage
+   *
+   * @param component
+   * @returns {ExtensionData}
+   */
+  registerPage(component) {
+    this.data[this.currentExtension].page = component;
+
+    return this;
+  }
+
+  /**
+   * Get an extension's registered settings
+   *
+   * @param extensionId
+   * @returns {boolean|*}
+   */
+  getSettings(extensionId) {
+    if (this.data[extensionId] && this.data[extensionId].settings) {
+      return this.data[extensionId].settings.toArray();
+    }
+
+    return false;
+  }
+
+  /**
+   *
+   * Get an ItemList of all extensions' registered permissions
+   *
+   * @param extension
+   * @param type
+   * @returns {ItemList}
+   */
+  getAllExtensionPermissions(type) {
+    const items = new ItemList();
+
+    Object.keys(this.data).map((extension) => {
+      if (this.extensionHasPermissions(extension) && this.data[extension].permissions[type]) {
+        items.merge(this.data[extension].permissions[type]);
+      }
+    });
+
+    return items;
+  }
+
+  /**
+   * Get a singular extension's registered permissions
+   *
+   * @param extension
+   * @param type
+   * @returns {boolean|*}
+   */
+  getExtensionPermissions(extension, type) {
+    if (this.extensionHasPermissions(extension) && this.data[extension].permissions[type]) {
+      return this.data[extension].permissions[type];
+    }
+
+    return new ItemList();
+  }
+
+  /**
+   * Checks whether a given extension has registered permissions.
+   *
+   * @param extension
+   * @returns {boolean}
+   */
+  extensionHasPermissions(extension) {
+    if (this.data[extension] && this.data[extension].permissions) {
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Returns an extension's custom page component if it exists.
+   *
+   * @param extension
+   * @returns {boolean|*}
+   */
+  getPage(extension) {
+    if (this.data[extension]) {
+      return this.data[extension].page;
+    }
+
+    return false;
+  }
+}

js/src/admin/utils/getCategorizedExtensions.js

@@ -0,0 +1,25 @@
+export default function getCategorizedExtensions() {
+  let extensions = {};
+
+  Object.keys(app.data.extensions).map((id) => {
+    const extension = app.data.extensions[id];
+    let category = extension.extra['flarum-extension'].category;
+
+    // Wrap languages packs into new system
+    if (extension.extra['flarum-locale']) {
+      category = 'language';
+    }
+
+    if (category in app.extensionCategories) {
+      extensions[category] = extensions[category] || [];
+
+      extensions[category].push(extension);
+    } else {
+      extensions.other = extensions.other || [];
+
+      extensions.other.push(extension);
+    }
+  });
+
+  return extensions;
+}

js/src/admin/utils/isExtensionEnabled.js

@@ -0,0 +1,5 @@
+export default function isExtensionEnabled(name) {
+  const enabled = JSON.parse(app.data.settings.extensions_enabled);
+
+  return enabled.includes(name);
+}

js/src/common/Application.js

@@ -198,13 +198,19 @@ export default class Application {
     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) => {
+    // down. When this happens, we'll add classes to the header and app body
+    // which will set the navbar's position to fixed. We don't want to always
+    // have it fixed, as that could overlap with custom headers.
+    const scrollListener = new ScrollListener((top) => {
       const $app = $('#app');
       const offset = $app.offset().top;
 
       $app.toggleClass('affix', top >= offset).toggleClass('scrolled', top > offset);
-    }).start();
+      $('.App-header').toggleClass('navbar-fixed-top', top >= offset);
+    });
+
+    scrollListener.start();
+    scrollListener.update();
 
     $(() => {
       $('body').addClass('ontouchstart' in window ? 'touch' : 'no-touch');
@@ -264,7 +270,7 @@ export default class Application {
 
   updateTitle() {
     const count = this.titleCount ? `(${this.titleCount}) ` : '';
-    const pageTitleWithSeparator = this.title && m.route.get() !== '/' ? this.title + ' - ' : '';
+    const pageTitleWithSeparator = this.title && m.route.get() !== this.forum.attribute('basePath') + '/' ? this.title + ' - ' : '';
     const title = this.forum.attribute('title');
     document.title = count + pageTitleWithSeparator + title;
   }
@@ -272,7 +278,7 @@ export default class Application {
   /**
    * Make an AJAX request, handling any low-level errors that may occur.
    *
-   * @see https://lhorie.github.io/mithril/mithril.request.html
+   * @see https://mithril.js.org/request.html
    * @param {Object} options
    * @return {Promise}
    * @public

js/src/common/Component.ts

@@ -1,8 +1,5 @@
 import * as Mithril from 'mithril';
 
-let deprecatedPropsWarned = false;
-let deprecatedInitPropsWarned = false;
-
 export interface ComponentAttrs extends Mithril.Attributes {}
 
 /**
@@ -131,38 +128,5 @@ export default abstract class Component<T extends ComponentAttrs = ComponentAttr
    *
    * This can be used to assign default values for missing, optional attrs.
    */
-  protected static initAttrs<T>(attrs: T): void {
-    // Deprecated, part of Mithril 2 BC layer
-    if ('initProps' in this && !deprecatedInitPropsWarned) {
-      deprecatedInitPropsWarned = true;
-      console.warn('initProps is deprecated, please use initAttrs instead.');
-      (this as any).initProps(attrs);
-    }
-  }
-
-  // BEGIN DEPRECATED MITHRIL 2 BC LAYER
-
-  /**
-   * The attributes passed into the component.
-   *
-   * @see https://mithril.js.org/components.html#passing-data-to-components
-   *
-   * @deprecated, use attrs instead.
-   */
-  get props() {
-    if (!deprecatedPropsWarned) {
-      deprecatedPropsWarned = true;
-      console.warn('this.props is deprecated, please use this.attrs instead.');
-    }
-    return this.attrs;
-  }
-  set props(props) {
-    if (!deprecatedPropsWarned) {
-      deprecatedPropsWarned = true;
-      console.warn('this.props is deprecated, please use this.attrs instead.');
-    }
-    this.attrs = props;
-  }
-
-  // END DEPRECATED MITHRIL 2 BC LAYER
+  protected static initAttrs<T>(attrs: T): void {}
 }

js/src/common/compat.js

@@ -19,7 +19,9 @@ import extract from './utils/extract';
 import ScrollListener from './utils/ScrollListener';
 import stringToColor from './utils/stringToColor';
 import subclassOf from './utils/subclassOf';
+import SuperTextarea from './utils/SuperTextarea';
 import patchMithril from './utils/patchMithril';
+import proxifyCompat from './utils/proxifyCompat';
 import classList from './utils/classList';
 import extractText from './utils/extractText';
 import formatNumber from './utils/formatNumber';
@@ -67,6 +69,7 @@ import username from './helpers/username';
 import userOnline from './helpers/userOnline';
 import listItems from './helpers/listItems';
 import Fragment from './Fragment';
+import DefaultResolver from './resolvers/DefaultResolver';
 
 export default {
   extend: extend,
@@ -89,8 +92,10 @@ export default {
   'utils/stringToColor': stringToColor,
   'utils/Stream': Stream,
   'utils/subclassOf': subclassOf,
+  'utils/SuperTextarea': SuperTextarea,
   'utils/setRouteWithForcedRefresh': setRouteWithForcedRefresh,
   'utils/patchMithril': patchMithril,
+  'utils/proxifyCompat': proxifyCompat,
   'utils/classList': classList,
   'utils/extractText': extractText,
   'utils/formatNumber': formatNumber,
@@ -138,4 +143,5 @@ export default {
   'helpers/username': username,
   'helpers/userOnline': userOnline,
   'helpers/listItems': listItems,
+  'resolvers/DefaultResolver': DefaultResolver,
 };

js/src/common/components/Button.js

@@ -35,6 +35,11 @@ export default class Button extends Component {
       attrs['aria-label'] = attrs.title;
     }
 
+    // If given a translation object, extract the text.
+    if (typeof attrs.title === 'object') {
+      attrs.title = extractText(attrs.title);
+    }
+
     // If nothing else is provided, we use the textual button content as tooltip
     if (!attrs.title && vnode.children) {
       attrs.title = extractText(vnode.children);

js/src/common/components/LinkButton.js

@@ -12,12 +12,14 @@ import Link from './Link';
  *   active.
  * - `href` The URL to link to. If the current URL `m.route()` matches this,
  *   the `active` prop will automatically be set to true.
+ * - `force` Whether the page should be fully rerendered. Defaults to `true`.
  */
 export default class LinkButton extends Button {
   static initAttrs(attrs) {
     super.initAttrs(attrs);
 
     attrs.active = this.isActive(attrs);
+    if (attrs.force === undefined) attrs.force = true;
   }
 
   view(vnode) {

js/src/common/components/Modal.js

@@ -35,7 +35,8 @@ export default class Modal extends Component {
       this.attrs.animateHide();
       // Here, we ensure that the animation has time to complete.
       // See https://mithril.js.org/lifecycle-methods.html#onbeforeremove
-      return new Promise((resolve) => setTimeout(resolve, 1000));
+      // Bootstrap's Modal.TRANSITION_DURATION is 300 ms.
+      return new Promise((resolve) => setTimeout(resolve, 300));
     }
   }
 

js/src/common/components/Page.js

@@ -10,7 +10,8 @@ export default class Page extends Component {
   oninit(vnode) {
     super.oninit(vnode);
 
-    this.onNewRoute();
+    app.previous = app.current;
+    app.current = new PageState(this.constructor, { routeName: this.attrs.routeName });
 
     app.drawer.hide();
     app.modal.close();
@@ -21,17 +22,20 @@ export default class Page extends Component {
      * @type {String}
      */
     this.bodyClass = '';
-  }
 
-  /**
-   * A collections of actions to run when the route changes.
-   * This is extracted here, and not hardcoded in oninit, as oninit is not called
-   * when a different route is handled by the same component, but we still need to
-   * adjust the current route name.
-   */
-  onNewRoute() {
-    app.previous = app.current;
-    app.current = new PageState(this.constructor, { routeName: this.attrs.routeName });
+    /**
+     * Whether we should scroll to the top of the page when its rendered.
+     *
+     * @type {Boolean}
+     */
+    this.scrollTopOnCreate = true;
+
+    /**
+     * Whether the browser should restore scroll state on refreshes.
+     *
+     * @type {Boolean}
+     */
+    this.useBrowserScrollRestoration = true;
   }
 
   oncreate(vnode) {
@@ -40,6 +44,14 @@ export default class Page extends Component {
     if (this.bodyClass) {
       $('#app').addClass(this.bodyClass);
     }
+
+    if (this.scrollTopOnCreate) {
+      $(window).scrollTop(0);
+    }
+
+    if ('scrollRestoration' in history) {
+      history.scrollRestoration = this.useBrowserScrollRestoration ? 'auto' : 'manual';
+    }
   }
 
   onremove() {

js/src/common/components/SelectDropdown.js

@@ -12,6 +12,9 @@ import icon from '../helpers/icon';
 function isActive(vnode) {
   const tag = vnode.tag;
 
+  // Allow non-selectable dividers/headers to be added.
+  if (typeof tag === 'string' && tag !== 'a' && tag !== 'button') return false;
+
   if ('initAttrs' in tag) {
     tag.initAttrs(vnode.attrs);
   }

js/src/common/helpers/fullTime.tsx

@@ -1,11 +1,11 @@
+import dayjs from 'dayjs';
+import * as Mithril from 'mithril';
+
 /**
  * The `fullTime` helper displays a formatted time string wrapped in a <time>
  * tag.
- *
- * @param {Date} time
- * @return {Object}
  */
-export default function fullTime(time) {
+export default function fullTime(time: Date): Mithril.Vnode {
   const d = dayjs(time);
 
   const datetime = d.format();

js/src/common/helpers/humanTime.tsx

@@ -1,14 +1,13 @@
+import dayjs from 'dayjs';
+import * as Mithril from 'mithril';
 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) {
+export default function humanTime(time: Date): Mithril.Vnode {
   const d = dayjs(time);
 
   const datetime = d.format();

js/src/common/helpers/icon.js

@@ -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} />;
-}

js/src/common/helpers/icon.tsx

@@ -0,0 +1,13 @@
+import * as Mithril from 'mithril';
+
+/**
+ * The `icon` helper displays an icon.
+ *
+ * @param fontClass The full icon class, prefix and the icon’s name.
+ * @param attrs Any other attributes to apply.
+ */
+export default function icon(fontClass: string, attrs: Mithril.Attributes = {}): Mithril.Vnode {
+  attrs.className = 'icon ' + fontClass + ' ' + (attrs.className || '');
+
+  return <i {...attrs} />;
+}

js/src/common/index.js

@@ -1,6 +1,6 @@
 import 'expose-loader?$!expose-loader?jQuery!jquery';
 import 'expose-loader?m!mithril';
-import 'expose-loader?moment!expose-loader?dayjs!dayjs';
+import 'expose-loader?dayjs!dayjs';
 import 'expose-loader?m.bidi!m.attrs.bidi';
 import 'bootstrap/js/affix';
 import 'bootstrap/js/dropdown';

js/src/common/models/User.js

@@ -10,6 +10,7 @@ export default class User extends Model {}
 
 Object.assign(User.prototype, {
   username: Model.attribute('username'),
+  slug: Model.attribute('slug'),
   displayName: Model.attribute('displayName'),
   email: Model.attribute('email'),
   isEmailConfirmed: Model.attribute('isEmailConfirmed'),

js/src/common/resolvers/DefaultResolver.ts

@@ -0,0 +1,41 @@
+import Mithril from 'mithril';
+
+/**
+ * Generates a route resolver for a given component.
+ * In addition to regular route resolver functionality:
+ * - It provide the current route name as an attr
+ * - It sets a key on the component so a rerender will be triggered on route change.
+ */
+export default class DefaultResolver {
+  component: Mithril.Component;
+  routeName: string;
+
+  constructor(component, routeName) {
+    this.component = component;
+    this.routeName = routeName;
+  }
+
+  /**
+   * When a route change results in a changed key, a full page
+   * rerender occurs. This method can be overriden in subclasses
+   * to prevent rerenders on some route changes.
+   */
+  makeKey() {
+    return this.routeName + JSON.stringify(m.route.param());
+  }
+
+  makeAttrs(vnode) {
+    return {
+      ...vnode.attrs,
+      routeName: this.routeName,
+    };
+  }
+
+  onmatch(args, requestedPath, route) {
+    return this.component;
+  }
+
+  render(vnode) {
+    return [{ ...vnode, attrs: this.makeAttrs(vnode), key: this.makeKey() }];
+  }
+}

js/src/common/utils/ScrollListener.js

@@ -58,7 +58,7 @@ export default class ScrollListener {
    */
   start() {
     if (!this.active) {
-      window.addEventListener('scroll', (this.active = this.loop.bind(this)));
+      window.addEventListener('scroll', (this.active = this.loop.bind(this)), { passive: true });
     }
   }
 

js/src/common/utils/SubtreeRetainer.js

@@ -28,6 +28,9 @@ export default class SubtreeRetainer {
   constructor(...callbacks) {
     this.callbacks = callbacks;
     this.data = {};
+    // Build the initial data, so it is available when calling
+    // needsRebuild from the onbeforeupdate hook.
+    this.needsRebuild();
   }
 
   /**
@@ -60,6 +63,8 @@ export default class SubtreeRetainer {
    */
   check(...callbacks) {
     this.callbacks = this.callbacks.concat(callbacks);
+    // Update the data cache when new checks are added.
+    this.needsRebuild();
   }
 
   /**

js/src/common/utils/humanTime.ts

@@ -1,3 +1,6 @@
+import dayjs from 'dayjs';
+import 'dayjs/plugin/relativeTime';
+
 /**
  * The `humanTime` utility converts a date to a localized, human-readable time-
  * ago string.

js/src/common/utils/mapRoutes.js

@@ -1,6 +1,9 @@
+import DefaultResolver from '../resolvers/DefaultResolver';
+
 /**
  * The `mapRoutes` utility converts a map of named application routes into a
- * format that can be understood by Mithril.
+ * format that can be understood by Mithril, and wraps them in route resolvers
+ * to provide each route with the current route name.
  *
  * @see https://mithril.js.org/route.html#signature
  * @param {Object} routes
@@ -10,14 +13,17 @@
 export default function mapRoutes(routes, basePath = '') {
   const map = {};
 
-  for (const key in routes) {
-    const route = routes[key];
+  for (const routeName in routes) {
+    const route = routes[routeName];
 
-    map[basePath + route.path] = {
-      render() {
-        return m(route.component, { routeName: key });
-      },
-    };
+    if ('resolver' in route) {
+      map[basePath + route.path] = route.resolver;
+    } else if ('component' in route) {
+      const resolverClass = 'resolverClass' in route ? route.resolverClass : DefaultResolver;
+      map[basePath + route.path] = new resolverClass(route.component, routeName);
+    } else {
+      throw new Error(`Either a resolver or a component must be provided for the route [${routeName}]`);
+    }
   }
 
   return map;

js/src/common/utils/patchMithril.js

@@ -1,9 +1,3 @@
-import withAttr from './withAttr';
-import Stream from './Stream';
-
-let deprecatedMPropWarned = false;
-let deprecatedMWithAttrWarned = false;
-
 export default function patchMithril(global) {
   const defaultMithril = global.m;
 
@@ -22,23 +16,5 @@ export default function patchMithril(global) {
 
   Object.keys(defaultMithril).forEach((key) => (modifiedMithril[key] = defaultMithril[key]));
 
-  // BEGIN DEPRECATED MITHRIL 2 BC LAYER
-  modifiedMithril.prop = function (...args) {
-    if (!deprecatedMPropWarned) {
-      deprecatedMPropWarned = true;
-      console.warn('m.prop() is deprecated, please use the Stream util (flarum/utils/Streams) instead.');
-    }
-    return Stream.bind(this)(...args);
-  };
-
-  modifiedMithril.withAttr = function (...args) {
-    if (!deprecatedMWithAttrWarned) {
-      deprecatedMWithAttrWarned = true;
-      console.warn("m.withAttr() is deprecated, please use flarum's withAttr util (flarum/utils/withAttr) instead.");
-    }
-    return withAttr.bind(this)(...args);
-  };
-  // END DEPRECATED MITHRIL 2 BC LAYER
-
   global.m = modifiedMithril;
 }

js/src/common/utils/proxifyCompat.ts

@@ -0,0 +1,10 @@
+export default (compat: { [key: string]: any }, namespace: string) => {
+  // regex to replace common/ and NAMESPACE/ for core & core extensions
+  // e.g. admin/utils/extract --> utils/extract
+  // e.g. tags/common/utils/sortTags --> tags/utils/sortTags
+  const regex = new RegExp(`(\\w+\\/)?(${namespace}|common)\\/`);
+
+  return new Proxy(compat, {
+    get: (obj, prop: string) => obj[prop] || obj[prop.replace(regex, '$1')],
+  });
+};

js/src/forum/ForumApplication.js

@@ -90,11 +90,6 @@ export default class ForumApplication extends Application {
      * @type {DiscussionListState}
      */
     this.discussions = new DiscussionListState({}, this);
-
-    /**
-     * @deprecated beta 14, remove in beta 15.
-     */
-    this.cache.discussionList = this.discussions;
   }
 
   /**
@@ -115,17 +110,19 @@ export default class ForumApplication extends Application {
     this.routes[defaultAction].path = '/';
     this.history.push(defaultAction, this.translator.trans('core.forum.header.back_to_index_tooltip'), '/');
 
+    this.pane = new Pane(document.getElementById('app'));
+
+    m.route.prefix = '';
+    super.mount(this.forum.attribute('basePath'));
+
+    // We mount navigation and header components after the page, so components
+    // like the back button can access the updated state when rendering.
     m.mount(document.getElementById('app-navigation'), { view: () => Navigation.component({ className: 'App-backControl', drawer: true }) });
     m.mount(document.getElementById('header-navigation'), Navigation);
     m.mount(document.getElementById('header-primary'), HeaderPrimary);
     m.mount(document.getElementById('header-secondary'), HeaderSecondary);
     m.mount(document.getElementById('composer'), { view: () => Composer.component({ state: this.composer }) });
 
-    this.pane = new Pane(document.getElementById('app'));
-
-    m.route.prefix = '';
-    super.mount(this.forum.attribute('basePath'));
-
     alertEmailConfirmation(this);
 
     // Route the home link back home when clicked. We do not want it to register

js/src/forum/compat.js

@@ -71,6 +71,7 @@ import Search from './components/Search';
 import DiscussionListItem from './components/DiscussionListItem';
 import LoadingPost from './components/LoadingPost';
 import PostsUserPage from './components/PostsUserPage';
+import DiscussionPageResolver from './resolvers/DiscussionPageResolver';
 import routes from './routes';
 import ForumApplication from './ForumApplication';
 
@@ -146,6 +147,7 @@ export default Object.assign(compat, {
   'components/DiscussionListItem': DiscussionListItem,
   'components/LoadingPost': LoadingPost,
   'components/PostsUserPage': PostsUserPage,
+  'resolvers/DiscussionPageResolver': DiscussionPageResolver,
   routes: routes,
   ForumApplication: ForumApplication,
 });

js/src/forum/components/ChangeEmailModal.js

@@ -118,7 +118,10 @@ export default class ChangeEmailModal extends Modal {
           meta: { password: this.password() },
         }
       )
-      .then(() => (this.success = true))
+      .then(() => {
+        this.success = true;
+        this.alertAttrs = null;
+      })
       .catch(() => {})
       .then(this.loaded.bind(this));
   }

js/src/forum/components/CommentPost.js

@@ -56,9 +56,7 @@ export default class CommentPost extends Post {
     ]);
   }
 
-  onupdate(vnode) {
-    super.onupdate();
-
+  refreshContent() {
     const contentHtml = this.isEditing() ? '' : this.attrs.post.contentHtml();
 
     // If the post content has changed since the last render, we'll run through
@@ -66,13 +64,28 @@ export default class CommentPost extends Post {
     // necessary because TextFormatter outputs them for e.g. syntax highlighting.
     if (this.contentHtml !== contentHtml) {
       this.$('.Post-body script').each(function () {
-        eval.call(window, $(this).text());
+        const script = document.createElement('script');
+        script.textContent = this.textContent;
+        Array.from(this.attributes).forEach((attr) => script.setAttribute(attr.name, attr.value));
+        this.parentNode.replaceChild(script, this);
       });
     }
 
     this.contentHtml = contentHtml;
   }
 
+  oncreate(vnode) {
+    super.oncreate(vnode);
+
+    this.refreshContent();
+  }
+
+  onupdate(vnode) {
+    super.onupdate(vnode);
+
+    this.refreshContent();
+  }
+
   isEditing() {
     return app.composer.bodyMatches(EditPostComposer, { post: this.attrs.post });
   }

js/src/forum/components/Composer.js

@@ -199,7 +199,7 @@ export default class Composer extends Component {
    */
   animatePositionChange() {
     // When exiting full-screen mode: focus content
-    if (this.prevPosition === ComposerState.Position.FULLSCREEN) {
+    if (this.prevPosition === ComposerState.Position.FULLSCREEN && this.state.position === ComposerState.Position.NORMAL) {
       this.focus();
       return;
     }

js/src/forum/components/ComposerBody.js

@@ -44,12 +44,6 @@ export default class ComposerBody extends Component {
     }
 
     this.composer.fields.content(this.attrs.originalContent || '');
-
-    /**
-     * @deprecated BC layer, remove in Beta 15.
-     */
-    this.content = this.composer.fields.content;
-    this.editor = this.composer;
   }
 
   view() {

js/src/forum/components/DiscussionComposer.js

@@ -100,7 +100,7 @@ export default class DiscussionComposer extends ComposerBody {
       .save(data)
       .then((discussion) => {
         this.composer.hide();
-        app.discussions.refresh();
+        app.discussions.refresh({ deferClear: true });
         m.route.set(app.route.discussion(discussion));
       }, this.loaded.bind(this));
   }

js/src/forum/components/DiscussionListItem.js

@@ -14,6 +14,7 @@ import DiscussionControls from '../utils/DiscussionControls';
 import slidable from '../utils/slidable';
 import extractText from '../../common/utils/extractText';
 import classList from '../../common/utils/classList';
+import DiscussionPage from './DiscussionPage';
 
 import { escapeRegExp } from 'lodash-es';
 /**
@@ -91,12 +92,12 @@ export default class DiscussionListItem extends Component {
             )
           : ''}
 
-        <a
+        <span
           className={'Slidable-underneath Slidable-underneath--left Slidable-underneath--elastic' + (isUnread ? '' : ' disabled')}
           onclick={this.markAsRead.bind(this)}
         >
           {icon('fas fa-check')}
-        </a>
+        </span>
 
         <div className={'DiscussionListItem-content Slidable-content' + (isUnread ? ' unread' : '') + (isRead ? ' read' : '')}>
           <Link
@@ -156,9 +157,7 @@ export default class DiscussionListItem extends Component {
    * @return {Boolean}
    */
   active() {
-    const idParam = m.route.param('id');
-
-    return idParam && idParam.split('-')[0] === this.attrs.discussion.id();
+    return app.current.matches(DiscussionPage, { discussion: this.attrs.discussion });
   }
 
   /**

js/src/forum/components/DiscussionPage.js

@@ -18,6 +18,8 @@ export default class DiscussionPage extends Page {
   oninit(vnode) {
     super.oninit(vnode);
 
+    this.useBrowserScrollRestoration = false;
+
     /**
      * The discussion that is being viewed.
      *
@@ -47,11 +49,10 @@ export default class DiscussionPage extends Page {
     app.history.push('discussion');
 
     this.bodyClass = 'App--discussion';
-
-    this.prevRoute = m.route.get();
   }
 
   onremove() {
+    super.onremove();
     // 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
@@ -83,7 +84,6 @@ export default class DiscussionPage extends Page {
                     {PostStream.component({
                       discussion,
                       stream: this.stream,
-                      targetPost: this.stream.targetPost,
                       onPositionChange: this.positionChanged.bind(this),
                     })}
                   </div>
@@ -95,34 +95,6 @@ export default class DiscussionPage extends Page {
     );
   }
 
-  onbeforeupdate(vnode) {
-    super.onbeforeupdate(vnode);
-
-    if (m.route.get() !== this.prevRoute) {
-      this.onNewRoute();
-      this.prevRoute = m.route.get();
-
-      // 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()) {
-          const near = m.route.param('near') || '1';
-
-          if (near !== String(this.near)) {
-            this.stream.goToNumber(near);
-          }
-
-          this.near = near;
-        } else {
-          this.oninit(vnode);
-        }
-      }
-    }
-  }
-
   /**
    * Load the discussion from the API or use the preloaded one.
    */
@@ -137,7 +109,7 @@ export default class DiscussionPage extends Page {
     } else {
       const params = this.requestParams();
 
-      app.store.find('discussions', m.route.param('id').split('-')[0], params).then(this.show.bind(this));
+      app.store.find('discussions', m.route.param('id'), params).then(this.show.bind(this));
     }
 
     m.redraw();
@@ -151,6 +123,7 @@ export default class DiscussionPage extends Page {
    */
   requestParams() {
     return {
+      bySlug: true,
       page: { near: this.near },
     };
   }
@@ -185,7 +158,7 @@ export default class DiscussionPage extends Page {
             record.relationships.discussion.data.id === discussionId
         )
         .map((record) => app.store.getById('posts', record.id))
-        .sort((a, b) => a.id() - b.id())
+        .sort((a, b) => a.createdAt() - b.createdAt())
         .slice(0, 20);
     }
 
@@ -247,10 +220,7 @@ export default class DiscussionPage extends Page {
     // replace it into the window's history and our own history stack.
     const url = app.route.discussion(discussion, (this.near = startNumber));
 
-    this.prevRoute = url;
-    m.route.set(url, null, { replace: 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

js/src/forum/components/IndexPage.js

@@ -42,26 +42,7 @@ export default class IndexPage extends Page {
     app.history.push('index', app.translator.trans('core.forum.header.back_to_index_tooltip'));
 
     this.bodyClass = 'App--index';
-
-    this.currentPath = m.route.get();
-  }
-
-  onbeforeupdate(vnode) {
-    super.onbeforeupdate(vnode);
-
-    const curPath = m.route.get();
-
-    if (this.currentPath !== curPath) {
-      this.onNewRoute();
-
-      app.discussions.clear();
-
-      app.discussions.refreshParams(app.search.params());
-
-      this.currentPath = curPath;
-
-      this.setTitle();
-    }
+    this.scrollTopOnCreate = false;
   }
 
   view() {
@@ -105,18 +86,22 @@ export default class IndexPage extends Page {
 
     $('#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);
+    // Let browser handle scrolling on page reload.
+    if (app.previous.type == null) return;
+
+    // When on mobile, only retain scroll if we're coming from a discussion page.
+    // Otherwise, we've just changed the filter, so we should go to the top of the page.
+    if (app.screen() == 'desktop' || app.screen() == 'desktop-hd' || this.lastDiscussion) {
+      $(window).scrollTop(scrollTop - oldHeroHeight + heroHeight);
+    } else {
+      $(window).scrollTop(0);
+    }
 
     // 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()}"]`);
+      const $discussion = this.$(`li[data-id="${this.lastDiscussion.id()}"] .DiscussionListItem`);
 
       if ($discussion.length) {
         const indexTop = $('#header').outerHeight();
@@ -131,14 +116,16 @@ export default class IndexPage extends Page {
     }
   }
 
+  onbeforeremove() {
+    // Save the scroll position so we can restore it when we return to the
+    // discussion list.
+    app.cache.scrollTop = $(window).scrollTop();
+  }
+
   onremove() {
     super.onremove();
 
     $('#app').css('min-height', '');
-
-    // Save the scroll position so we can restore it when we return to the
-    // discussion list.
-    app.cache.scrollTop = $(window).scrollTop();
   }
 
   /**

js/src/forum/components/Notification.js

@@ -24,7 +24,7 @@ export default class Notification extends Component {
       <Link
         className={'Notification Notification--' + notification.contentType() + ' ' + (!notification.isRead() ? 'unread' : '')}
         href={href}
-        external={href.indexOf('://') === -1}
+        external={href.includes('://')}
         onclick={this.markAsRead.bind(this)}
       >
         {!notification.isRead() &&

js/src/forum/components/PostStream.js

@@ -32,6 +32,13 @@ export default class PostStream extends Component {
     const posts = this.stream.posts();
     const postIds = this.discussion.postIds();
 
+    const postFadeIn = (vnode) => {
+      $(vnode.dom).addClass('fadeIn');
+      // 500 is the duration of the fadeIn CSS animation + 100ms,
+      // so the animation has time to complete
+      setTimeout(() => $(vnode.dom).removeClass('fadeIn'), 500);
+    };
+
     const items = posts.map((post, i) => {
       let content;
       const attrs = { 'data-index': this.stream.visibleStart + i };
@@ -42,6 +49,7 @@ export default class PostStream extends Component {
         content = PostComponent ? PostComponent.component({ post }) : '';
 
         attrs.key = 'post' + post.id();
+        attrs.oncreate = postFadeIn;
         attrs['data-time'] = time.toISOString();
         attrs['data-number'] = post.number();
         attrs['data-id'] = post.id();
@@ -89,7 +97,7 @@ export default class PostStream extends Component {
     // is not already doing so, then show a 'write a reply' placeholder.
     if (viewingEnd && (!app.session.user || this.discussion.canReply())) {
       items.push(
-        <div className="PostStream-item" key="reply">
+        <div className="PostStream-item" key="reply" data-index={this.stream.count()} oncreate={postFadeIn}>
           {ReplyPlaceholder.component({ discussion: this.discussion })}
         </div>
       );
@@ -121,16 +129,15 @@ export default class PostStream extends Component {
    * Start scrolling, if appropriate, to a newly-targeted post.
    */
   triggerScroll() {
-    if (!this.attrs.targetPost || !this.stream.needsScroll) return;
+    if (!this.stream.needsScroll) return;
 
-    const newTarget = this.attrs.targetPost;
+    const target = this.stream.targetPost;
     this.stream.needsScroll = false;
 
-    if ('number' in newTarget) {
-      this.scrollToNumber(newTarget.number, this.stream.animateScroll);
-    } else if ('index' in newTarget) {
-      const backwards = newTarget.index === this.stream.count() - 1;
-      this.scrollToIndex(newTarget.index, this.stream.animateScroll, backwards);
+    if ('number' in target) {
+      this.scrollToNumber(target.number, this.stream.animateScroll);
+    } else if ('index' in target) {
+      this.scrollToIndex(target.index, this.stream.animateScroll, target.reply);
     }
   }
 
@@ -142,6 +149,11 @@ export default class PostStream extends Component {
    */
   onscroll(top = window.pageYOffset) {
     if (this.stream.paused) return;
+
+    this.updateScrubber(top);
+
+    if (this.stream.pagesLoading) return;
+
     const marginTop = this.getMarginTop();
     const viewportHeight = $(window).height() - marginTop;
     const viewportTop = top + marginTop;
@@ -167,8 +179,6 @@ export default class PostStream extends Component {
     // viewport) to 100ms.
     clearTimeout(this.calculatePositionTimeout);
     this.calculatePositionTimeout = setTimeout(this.calculatePosition.bind(this, top), 100);
-
-    this.updateScrubber(top);
   }
 
   updateScrubber(top = window.pageYOffset) {
@@ -181,9 +191,9 @@ export default class PostStream extends Component {
     // seen if the browser were scrolled right up to the top of the page,
     // and the viewport had a height of 0.
     const $items = this.$('.PostStream-item[data-index]');
-    let index = $items.first().data('index') || 0;
     let visible = 0;
     let period = '';
+    let indexFromViewPort = null;
 
     // 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
@@ -209,8 +219,10 @@ export default class PostStream extends Component {
       const visibleBottom = Math.min(height, viewportTop + viewportHeight - top);
       const visiblePost = visibleBottom - visibleTop;
 
-      if (top <= viewportTop) {
-        index = parseFloat($this.data('index')) + visibleTop / height;
+      // We take the index of the first item that passed the previous checks.
+      // It is the item that is first visible in the viewport.
+      if (indexFromViewPort === null) {
+        indexFromViewPort = parseFloat($this.data('index')) + visibleTop / height;
       }
 
       if (visiblePost > 0) {
@@ -223,7 +235,10 @@ export default class PostStream extends Component {
       if (time) period = time;
     });
 
-    this.stream.index = index + 1;
+    // If indexFromViewPort is null, it means no posts are visible in the
+    // viewport. This can happen, when drafting a long reply post. In that case
+    // set the index to the last post.
+    this.stream.index = indexFromViewPort !== null ? indexFromViewPort + 1 : this.stream.count();
     this.stream.visible = visible;
     if (period) this.stream.description = dayjs(period).format('MMMM YYYY');
   }
@@ -275,7 +290,9 @@ export default class PostStream extends Component {
    * @return {Integer}
    */
   getMarginTop() {
-    return this.$() && $('#header').outerHeight() + parseInt(this.$().css('margin-top'), 10);
+    const headerId = app.screen() === 'phone' ? '#app-navigation' : '#header';
+
+    return this.$() && $(headerId).outerHeight() + parseInt(this.$().css('margin-top'), 10);
   }
 
   /**
@@ -296,18 +313,17 @@ export default class PostStream extends Component {
    *
    * @param {Integer} index
    * @param {Boolean} animate
-   * @param {Boolean} bottom Whether or not to scroll to the bottom of the post
-   *     at the given index, instead of the top of it.
+   * @param {Boolean} reply Whether or not to scroll to the reply placeholder.
    * @return {jQuery.Deferred}
    */
-  scrollToIndex(index, animate, bottom) {
-    const $item = this.$(`.PostStream-item[data-index=${index}]`);
+  scrollToIndex(index, animate, reply) {
+    const $item = reply ? $('.PostStream-item:last-child') : this.$(`.PostStream-item[data-index=${index}]`);
 
-    return this.scrollToItem($item, animate, true, bottom).then(() => {
-      if (index == this.stream.count() - 1) {
-        this.flashItem(this.$('.PostStream-item:last-child'));
-      }
-    });
+    this.scrollToItem($item, animate, true, reply);
+
+    if (reply) {
+      this.flashItem($item);
+    }
   }
 
   /**
@@ -317,11 +333,10 @@ export default class PostStream extends Component {
    * @param {Boolean} animate
    * @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.
+   * @param {Boolean} reply Whether or not to scroll to the reply placeholder.
    * @return {jQuery.Deferred}
    */
-  scrollToItem($item, animate, force, bottom) {
+  scrollToItem($item, animate, force, reply) {
     const $container = $('html, body').stop(true);
     const index = $item.data('index');
 
@@ -332,10 +347,10 @@ export default class PostStream extends Component {
       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
+      // If we're scrolling to the reply placeholder, we'll make sure its
       // 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;
+        const top = reply ? itemBottom - $(window).height() + app.composer.computedHeight() : $item.is(':first-child') ? 0 : itemTop;
 
         if (!animate) {
           $container.scrollTop(top);
@@ -349,7 +364,7 @@ export default class PostStream extends Component {
       // We manually set the index because we want to display the index of the
       // exact post we've scrolled to, not just that of the first post within viewport.
       this.updateScrubber();
-      this.stream.index = index;
+      if (index !== undefined) this.stream.index = index + 1;
     };
 
     // If we don't update this before the scroll, the scrubber will start
@@ -359,24 +374,29 @@ export default class PostStream extends Component {
 
     return Promise.all([$container.promise(), this.stream.loadPromise]).then(() => {
       m.redraw.sync();
-      // We want to adjust this again after posts have been loaded in so that
-      // the height of the scrubber is accurate.
-      updateScrubberHeight();
 
-      // After post data has been loaded in, we will attempt to scroll back
-      // to the top of the requested post (or to the top of the page if the
-      // first post was requested). In some cases, we may have scrolled to
-      // the end of the available post range, in which case, the next range
-      // of posts will be loaded in. However, in those cases, the post we
-      // requested won't exist, so scrolling to it would cause an error.
-      // Accordingly, we start by checking that it's offset is defined.
-      const offset = $(`.PostStream-item[data-index=${index}]`).offset();
-      if (index === 0) {
+      // Rendering post contents will probably throw off our position.
+      // To counter this, we'll scroll either:
+      //   - To the reply placeholder (aligned with composer top)
+      //   - To the top of the page if we're on the first post
+      //   - To the top of a post (if that post exists)
+      // If the post does not currently exist, it's probably
+      // outside of the range we loaded in, so we won't adjust anything,
+      // as it will soon be rendered by the "load more" system.
+      let itemOffset;
+      if (reply) {
+        const $placeholder = $('.PostStream-item:last-child');
+        $(window).scrollTop($placeholder.offset().top + $placeholder.height() - $(window).height() + app.composer.computedHeight());
+      } else if (index === 0) {
         $(window).scrollTop(0);
-      } else if (offset) {
-        $(window).scrollTop($(`.PostStream-item[data-index=${index}]`).offset().top - this.getMarginTop());
+      } else if ((itemOffset = $(`.PostStream-item[data-index=${index}]`).offset())) {
+        $(window).scrollTop(itemOffset.top - this.getMarginTop());
       }
 
+      // We want to adjust this again after posts have been loaded in
+      // and position adjusted so that the scrubber's height is accurate.
+      updateScrubberHeight();
+
       this.calculatePosition();
       this.stream.paused = false;
     });
@@ -388,10 +408,11 @@ export default class PostStream extends Component {
    * @param {jQuery} $item
    */
   flashItem($item) {
+    // This might execute before the fadeIn class has been removed in PostStreamItem's
+    // oncreate, so we remove it just to be safe and avoid a double animation.
+    $item.removeClass('fadeIn');
     $item.addClass('flash').on('animationend webkitAnimationEnd', (e) => {
-      if (e.animationName === 'fadeIn') {
-        $item.removeClass('flash');
-      }
+      $item.removeClass('flash');
     });
   }
 }

js/src/forum/components/ReplyPlaceholder.js

@@ -33,7 +33,7 @@ export default class ReplyPlaceholder extends Component {
     }
 
     const reply = () => {
-      DiscussionControls.replyAction.call(this.attrs.discussion, true);
+      DiscussionControls.replyAction.call(this.attrs.discussion, true).catch(() => {});
     };
 
     return (

js/src/forum/components/Search.js

@@ -21,6 +21,8 @@ import UsersSearchSource from './UsersSearchSource';
  * - state: SearchState instance.
  */
 export default class Search extends Component {
+  static MIN_SEARCH_LEN = 3;
+
   oninit(vnode) {
     super.oninit(vnode);
     this.state = this.attrs.state;
@@ -152,7 +154,7 @@ export default class Search extends Component {
         search.searchTimeout = setTimeout(() => {
           if (state.isCached(query)) return;
 
-          if (query.length >= 3) {
+          if (query.length >= Search.MIN_SEARCH_LEN) {
             search.sources.map((source) => {
               if (!source.search) return;
 

js/src/forum/components/UserPage.js

@@ -27,19 +27,6 @@ export default class UserPage extends Page {
     this.user = null;
 
     this.bodyClass = 'App--user';
-
-    this.prevUsername = m.route.param('username');
-  }
-
-  onbeforeupdate() {
-    const currUsername = m.route.param('username');
-    if (currUsername !== this.prevUsername) {
-      this.onNewRoute();
-
-      this.prevUsername = currUsername;
-
-      this.loadUser(currUsername);
-    }
   }
 
   view() {
@@ -115,7 +102,7 @@ export default class UserPage extends Page {
     });
 
     if (!this.user) {
-      app.store.find('users', username).then(this.show.bind(this));
+      app.store.find('users', username, { bySlug: true }).then(this.show.bind(this));
     }
   }
 
@@ -148,7 +135,7 @@ export default class UserPage extends Page {
 
     items.add(
       'posts',
-      <LinkButton href={app.route('user.posts', { username: user.username() })} force icon="far fa-comment">
+      <LinkButton href={app.route('user.posts', { username: user.username() })} icon="far fa-comment">
         {app.translator.trans('core.forum.user.posts_link')} <span className="Button-badge">{user.commentCount()}</span>
       </LinkButton>,
       100
@@ -156,7 +143,7 @@ export default class UserPage extends Page {
 
     items.add(
       'discussions',
-      <LinkButton href={app.route('user.discussions', { username: user.username() })} force icon="fas fa-bars">
+      <LinkButton href={app.route('user.discussions', { username: user.username() })} icon="fas fa-bars">
         {app.translator.trans('core.forum.user.discussions_link')} <span className="Button-badge">{user.discussionCount()}</span>
       </LinkButton>,
       90

js/src/forum/index.js

@@ -15,8 +15,9 @@ export { app };
 // export { IndexPage, DicsussionList } from './components';
 
 // Export compat API
-import compat from './compat';
+import compatObj from './compat';
+import proxifyCompat from '../common/utils/proxifyCompat';
 
-compat.app = app;
+compatObj.app = app;
 
-export { compat };
+export const compat = proxifyCompat(compatObj, 'forum');

js/src/forum/resolvers/DiscussionPageResolver.ts

@@ -0,0 +1,55 @@
+import DefaultResolver from '../../common/resolvers/DefaultResolver';
+import DiscussionPage from '../components/DiscussionPage';
+
+/**
+ * A custom route resolver for DiscussionPage that generates the same key to all posts
+ * on the same discussion. It triggers a scroll when going from one post to another
+ * in the same discussion.
+ */
+export default class DiscussionPageResolver extends DefaultResolver {
+  static scrollToPostNumber: string | null = null;
+
+  /**
+   * Remove optional parts of a discussion's slug to keep the substring
+   * that bijectively maps to a discussion object. By default this just
+   * extracts the numerical ID from the slug. If a custom discussion
+   * slugging driver is used, this may need to be overriden.
+   * @param slug
+   */
+  canonicalizeDiscussionSlug(slug: string | undefined) {
+    if (!slug) return;
+    return slug.split('-')[0];
+  }
+
+  /**
+   * @inheritdoc
+   */
+  makeKey() {
+    const params = { ...m.route.param() };
+    if ('near' in params) {
+      delete params.near;
+    }
+    params.id = this.canonicalizeDiscussionSlug(params.id);
+    return this.routeName.replace('.near', '') + JSON.stringify(params);
+  }
+
+  onmatch(args, requestedPath, route) {
+    if (app.current.matches(DiscussionPage) && this.canonicalizeDiscussionSlug(args.id) === this.canonicalizeDiscussionSlug(m.route.param('id'))) {
+      // By default, the first post number of any discussion is 1
+      DiscussionPageResolver.scrollToPostNumber = args.near || '1';
+    }
+
+    return super.onmatch(args, requestedPath, route);
+  }
+
+  render(vnode) {
+    if (DiscussionPageResolver.scrollToPostNumber !== null) {
+      const number = DiscussionPageResolver.scrollToPostNumber;
+      // Scroll after a timeout to avoid clashes with the render.
+      setTimeout(() => app.current.get('stream').goToNumber(number));
+      DiscussionPageResolver.scrollToPostNumber = null;
+    }
+
+    return super.render(vnode);
+  }
+}

js/src/forum/routes.js

@@ -4,6 +4,7 @@ import PostsUserPage from './components/PostsUserPage';
 import DiscussionsUserPage from './components/DiscussionsUserPage';
 import SettingsPage from './components/SettingsPage';
 import NotificationsPage from './components/NotificationsPage';
+import DiscussionPageResolver from './resolvers/DiscussionPageResolver';
 
 /**
  * The `routes` initializer defines the forum app's routes.
@@ -14,8 +15,8 @@ export default function (app) {
   app.routes = {
     index: { path: '/all', component: IndexPage },
 
-    discussion: { path: '/d/:id', component: DiscussionPage },
-    'discussion.near': { path: '/d/:id/:near', component: DiscussionPage },
+    discussion: { path: '/d/:id', component: DiscussionPage, resolverClass: DiscussionPageResolver },
+    'discussion.near': { path: '/d/:id/:near', component: DiscussionPage, resolverClass: DiscussionPageResolver },
 
     user: { path: '/u/:username', component: PostsUserPage },
     'user.posts': { path: '/u/:username', component: PostsUserPage },
@@ -33,9 +34,8 @@ export default function (app) {
    * @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 : ''),
+      id: discussion.slug(),
       near: near && near !== 1 ? near : undefined,
     });
   };
@@ -58,7 +58,7 @@ export default function (app) {
    */
   app.route.user = (user) => {
     return app.route('user', {
-      username: user.username(),
+      username: user.slug(),
     });
   };
 }

js/src/forum/states/ComposerState.js

@@ -34,11 +34,6 @@ class ComposerState {
     this.editor = null;
 
     this.clear();
-
-    /**
-     * @deprecated BC layer, remove in Beta 15.
-     */
-    this.component = this;
   }
 
   /**
@@ -77,12 +72,6 @@ class ComposerState {
     this.fields = {
       content: Stream(''),
     };
-
-    /**
-     * @deprecated BC layer, remove in Beta 15.
-     */
-    this.content = this.fields.content;
-    this.value = this.fields.content;
   }
 
   /**

js/src/forum/states/PostStreamState.js

@@ -96,7 +96,9 @@ class PostStreamState {
     // 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();
+      const resultPromise = this.goToLast();
+      this.targetPost.reply = true;
+      return resultPromise;
     }
 
     this.paused = true;
@@ -170,7 +172,7 @@ class PostStreamState {
    * @return {Promise}
    */
   loadNearIndex(index) {
-    if (index >= this.visibleStart && index <= this.visibleEnd) {
+    if (index >= this.visibleStart && index < this.visibleEnd) {
       return Promise.resolve();
     }
 
@@ -236,23 +238,26 @@ class PostStreamState {
    * @param {Boolean} backwards
    */
   loadPage(start, end, backwards = false) {
-    m.redraw();
+    this.pagesLoading++;
+
+    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.sync);
+    };
+    redraw();
 
     this.loadPageTimeouts[start] = setTimeout(
       () => {
         this.loadRange(start, end).then(() => {
-          if (start >= this.visibleStart && end <= this.visibleEnd) {
-            const anchorIndex = backwards ? this.visibleEnd - 1 : this.visibleStart;
-            anchorScroll(`.PostStream-item[data-index="${anchorIndex}"]`, () => m.redraw.sync());
-          }
+          redraw();
           this.pagesLoading--;
         });
         this.loadPageTimeouts[start] = null;
       },
-      this.pagesLoading ? 1000 : 0
+      this.pagesLoading - 1 ? 1000 : 0
     );
-
-    this.pagesLoading++;
   }
 
   /**
@@ -280,7 +285,13 @@ class PostStreamState {
         }
       });
 
-    return loadIds.length ? app.store.find('posts', loadIds) : Promise.resolve(loaded);
+    if (loadIds.length) {
+      return app.store.find('posts', loadIds).then((newPosts) => {
+        return loaded.concat(newPosts).sort((a, b) => a.createdAt() - b.createdAt());
+      });
+    }
+
+    return Promise.resolve(loaded);
   }
 
   /**

js/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "include": ["src/**/*.ts"],
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
   "files": ["shims.d.ts"],
   "compilerOptions": {
     "allowUmdGlobalAccess": true,

less/admin.less

@@ -1,10 +1,12 @@
 @import "common/common";
 
+@import "admin/AdminHeader";
 @import "admin/AdminNav";
 @import "admin/DashboardPage";
 @import "admin/BasicsPage";
 @import "admin/PermissionsPage";
 @import "admin/EditGroupModal";
-@import "admin/ExtensionsPage";
+@import "admin/ExtensionPage";
+@import "admin/ExtensionWidget";
 @import "admin/AppearancePage";
 @import "admin/MailPage";

less/admin/AdminHeader.less

@@ -0,0 +1,20 @@
+.AdminHeader {
+  background: @control-bg;
+  margin-bottom: 20px;
+  padding: 20px 0;
+
+  h2 {
+    margin-top: 0;
+    margin-bottom: 10px;
+    color: @muted-color;
+  }
+
+  .AdminHeader-description {
+    margin: 0;
+    color: @control-color;
+  }
+
+  .icon {
+    margin-right: 15px;
+  }
+}

less/admin/AdminNav.less

@@ -1,18 +1,83 @@
-@admin-pane-width: 300px;
+@admin-pane-width: 250px;
 
 .App {
   padding-bottom: 0;
 }
-.AdminLinkButton-description {
-  display: none;
-}
+
 .AdminContent {
   padding: 20px 0;
 }
 .App-content .sideNavOffset {
   margin-top: 0;
 }
-@media @desktop, @desktop-hd {
+
+.Header-controls {
+  > li {
+    margin-left: 10px;
+  }
+}
+
+@media @phone {
+  .Dropdown-menu {
+    height: 70vh;
+
+    .item-search {
+      margin: 10px;
+
+      .SearchBar {
+        width: 100%
+      }
+    }
+  }
+
+  .ExtensionNavButton {
+    .Button-label {
+      margin-left: 30px;
+    }
+    .ExtensionIcon {
+      margin: 0 0 0 -4px !important;
+    }
+  }
+}
+
+@media @tablet {
+  .AdminNav {
+    .item-search,
+    li[class^="item-category"],
+    li[class^="item-extension"],
+    .AdminLinkButton-description {
+      display: none !important;
+    }
+  }
+}
+
+@media @phone, @tablet {
+  .App-nav .AdminNav {
+    .Dropdown-menu {
+      > li {
+        .ExtensionListTitle {
+          color: @muted-color;
+          text-transform: uppercase;
+          margin: 25px 0 10px 15px;
+        }
+
+        .ExtensionIcon {
+          margin: -2px -29px;
+          width: 25px;
+          height: 25px;
+          font-size: 12.5px;
+
+          .icon {
+            margin: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+@media @desktop-up {
   .App-nav {
     position: absolute;
     top: @header-height;
@@ -20,60 +85,95 @@
     width: @admin-pane-width;
     .box-shadow(0 6px 6px @shadow-color);
     background: @body-bg;
-    border-top: 1px solid @control-bg;
     z-index: @zindex-pane;
-    overflow: auto;
+    overflow-y: scroll;
+    padding-bottom: 40px;
 
     .affix & {
       position: fixed;
       bottom: 0;
-      height: auto;
     }
   }
   .App-content .sideNavOffset {
     margin-left: @admin-pane-width;
   }
   .App-nav .AdminNav {
-    .Dropdown-menu > li {
-      > a {
-        padding: 15px 15px 15px 45px;
-        display: block;
-        text-decoration: none;
-        white-space: normal;
+    .Dropdown-menu {
+      .item-search {
+        margin-top: 10px;
+        margin-bottom: 20px;
       }
-      > a, > a:hover, &.active > a {
-        color: @muted-color;
-      }
-      > a:hover {
-        background: @control-bg;
-      }
-      &.active > a {
-        background: @control-bg;
-        font-weight: normal;
 
-        .Button-label, .Button-icon {
+      .item-category-core {
+        > .ExtensionListTitle {
+          margin-top: 10px;
+        }
+      }
+
+      > li {
+        > a {
+          padding: 10px 10px 10px 45px;
+          display: block;
+          text-decoration: none;
+        }
+
+        > a,
+        > a:hover,
+        &.active > a {
           color: @text-color;
-          font-weight: bold;
+        }
+
+        > a:hover {
+          background: @control-bg;
+        }
+
+        &.active > a {
+          background: @control-color;
+          font-weight: normal;
+          color: @body-bg;
+
+          .Button-label,
+          .Button-icon {
+            font-weight: bold;
+          }
+        }
+
+        .Button-icon {
+          float: left;
+          font-size: 13px !important;
+          margin-left: -25px !important;
+          margin-top: 4px !important;
+        }
+
+        .Button-label {
+          padding-left: 5px;
+          font-size: 14px;
+          font-weight: normal;
+        }
+
+        .Search-input,
+        .SearchBar {
+          max-width: 215px;
+          margin: 0 auto;
+        }
+
+        .ExtensionListTitle {
+          color: @muted-color;
+          text-transform: uppercase;
+          margin: 25px 0 8px 15px;
+        }
+
+        .ExtensionIcon {
+          width: 25px;
+          height: 25px;
+          font-size: 15px;
+          margin-left: -29px;
+          vertical-align: middle;
         }
       }
     }
-    .Button-icon {
-      float: left;
-      margin-left: -30px;
-      font-size: 14px;
-      margin-top: 4px !important;
-    }
-    .Button-label {
-      display: block;
-      font-size: 15px;
-      font-weight: normal;
-      margin: 0 0 5px;
-    }
-    .AdminLinkButton-description {
-      display: block;
-      font-size: 12px;
-    }
   }
+
   .container {
     width: 100%;
     margin: 0;
@@ -85,4 +185,38 @@
       padding: 0;
     }
   }
+
+}
+
+.AdminLinkButton-description {
+  white-space: normal;
+  padding-left: 5px;
+}
+
+.ExtensionListItem-Dot {
+  height: 10px;
+  width: 10px;
+  border-radius: 50%;
+  display: inline-block;
+  right: 13px;
+  margin: 6px 5px;
+  position: absolute;
+}
+
+.ExtensionNavButton {
+  .Button-label {
+    display: inline-block;
+    max-width: calc(100% - 18px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    margin-left: 5px;
+  }
+}
+
+.ExtensionListItem-Dot.enabled {
+  background-color: #2ECC40;
+}
+.ExtensionListItem-Dot.disabled {
+  background-color: #FF4136;
 }

less/admin/AppearancePage.less

@@ -1,8 +1,8 @@
 .AppearancePage {
+
   @media @desktop-up {
     .container {
       max-width: 600px;
-      padding: 30px;
       margin: 0;
     }
   }

less/admin/BasicsPage.less

@@ -1,5 +1,4 @@
 .BasicsPage {
-  padding: 20px 0;
 
   @media @desktop-up {
     .container {

less/admin/DashboardPage.less

@@ -1,33 +1,30 @@
 .DashboardPage {
-  background: @control-bg;
+  background: @body-bg;
   color: @control-color;
   min-height: 100vh;
-
-  @media @desktop-up {
-    .container {
-      padding: 30px;
-      margin: 0;
-    }
-  }
 }
 
-.DashboardWidget {
-  background: @body-bg;
+.Widget {
+  background: @control-bg;
   color: @text-color;
   border-radius: @border-radius;
   padding: 20px;
   margin-bottom: 20px;
+
+  .Button {
+    .Button--color(@control-color, @body-bg)
+  }
 }
 
 .StatusWidget {
   color: @muted-color;
 
-  > ul {
+  >ul {
     margin: 0;
     padding: 0;
     list-style-type: none;
 
-    > li {
+    >li {
       display: inline-block;
       margin-right: 30px;
       vertical-align: middle;
@@ -38,6 +35,7 @@
         overflow: hidden;
         text-overflow: ellipsis;
       }
+
       &.item-tools {
         float: right;
         margin-right: 0;

less/admin/ExtensionPage.less

@@ -0,0 +1,157 @@
+.ExtensionPage {
+  min-height: 110vh;
+
+  .ExtensionPage-header {
+    .ExtensionTitle {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      margin: 20px 0 15px;
+    }
+
+    .helpText {
+      margin-bottom: 5px;
+    }
+
+    h2 {
+      display: inline-block;
+      margin: 0;
+      vertical-align: middle;
+    }
+  }
+
+  .ExtensionPage-header,
+  .ExtensionPage-permissions-header {
+    background: @control-bg;
+
+    h2 {
+      color: @muted-color;
+
+      span {
+        font-size: 13px;
+        color: @muted-color;
+        font-weight: normal;
+      }
+    }
+
+    .Button-icon {
+      display: unset;
+    }
+
+    ul {
+      display: flex;
+      align-items: center;
+      list-style-type: none;
+      padding: 0;
+      margin: 0;
+
+      > li {
+        display: inline;
+        color: @muted-color;
+        margin-left: 13px;
+
+
+        > a {
+          color: @muted-color;
+        }
+
+        > .icon {
+          margin-right: 5px;
+        }
+      }
+    }
+
+    .ExtensionPage-headerItems {
+      padding: 15px 0;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+
+      .Checkbox {
+        margin: 5px 0 0 0;
+        display: inline-block;
+      }
+    }
+
+    .Checkbox.off {
+      .Checkbox-display {
+        background: @muted-more-color;
+      }
+    }
+
+    .ExtensionInfo {
+      margin-left: auto;
+
+      .item-authors {
+        a {
+          color: @muted-color;
+        }
+      }
+    }
+
+
+    .ExtensionName {
+      display: inline-block;
+      margin-left: 8px;
+    }
+
+    .ExtensionIcon {
+      width: 30px;
+      height: 30px;
+      font-size: 15px;
+      margin-left: 0;
+      vertical-align: middle;
+    }
+
+    .ExtensionPage-headerTopItems {
+      margin-left: auto;
+    }
+
+    @media (max-width: @screen-phone-max) {
+      .ExtensionPage-headerTopItems {
+        float: right;
+        position: relative;
+      }
+
+      .item-website, .item-source, .item-documentation {
+        display: none;
+      }
+    }
+  }
+
+  .ExtensionPage-settings, .ExtensionPage-permissions {
+    .ExtensionPage-subHeader {
+      margin: 5px 0px;
+    }
+  }
+
+  .ExtensionPage-settings {
+    margin-top: 20px;
+    padding: 10px 0;
+
+    input {
+      max-width: 400px;
+    }
+  }
+
+  .ExtensionPage-subHeader {
+    color: @muted-color;
+    font-weight: normal;
+  }
+
+
+  .ExtensionPage-permissions {
+
+    @media @phone {
+      > .container {
+        overflow-x: scroll;
+        padding-bottom: 20px;
+      }
+    }
+
+    .ExtensionPage-permissions-header {
+      margin: 20px 0 20px;
+      padding: 5px 0;
+    }
+  }
+}

less/admin/ExtensionWidget.less

@@ -0,0 +1,91 @@
+.ExtensionsWidget {
+  background-color: @body-bg;
+  padding: 0;
+}
+
+.ExtensionsWidget-list {
+  padding: 0;
+  background-color: @body-bg;
+
+  .ExtensionList-Category {
+    background: @control-bg;
+    padding: 20px 0 20px 20px;
+    margin-bottom: 20px;
+    border-radius: @border-radius;
+
+    .ExtensionList-Label {
+      margin-top: 0;
+      color: @muted-color;
+    }
+  }
+
+  .ExtensionGroup {
+    margin-bottom: 20px;
+
+    h3 {
+      color: @muted-color;
+      text-transform: uppercase;
+      font-size: 12px;
+      margin: 0 0 10px;
+    }
+  }
+
+  .ExtensionList {
+    padding: 0;
+    list-style: none;
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: repeat(auto-fit, 90px);
+    margin-bottom: 0;
+
+    > li {
+      text-align: left;
+      position: relative;
+      display: block;
+    }
+  }
+}
+
+.ExtensionListItem.disabled {
+  .ExtensionListItem-title {
+    opacity: 0.5;
+    color: @muted-color;
+  }
+
+  .ExtensionListItem-icon {
+    opacity: 0.5;
+  }
+}
+
+.ExtensionListItem {
+  transition: .15s ease-in-out;
+
+  &:hover {
+    transform: scale(1.05);
+  }
+
+  .ExtensionListItem-title {
+    display: block;
+    text-align: center;
+    margin-top: 5px;
+    color: @text-color;
+  }
+
+  a:hover {
+    text-decoration: none;
+  }
+}
+
+.ExtensionIcon {
+  width: 90px;
+  height: 90px;
+  background: @control-bg;
+  color: @control-color;
+  border-radius: 6px;
+  display: inline-flex;
+  font-size: 45px;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+}

less/admin/ExtensionsPage.less

@@ -1,115 +0,0 @@
-@extension-list-column-width: 410px;
-
-.ExtensionsPage-header {
-  padding: 20px 0;
-  background: @control-bg;
-}
-
-.ExtensionsPage-list {
-  padding: 30px 0;
-}
-.ExtensionGroup {
-  margin-bottom: 20px;
-
-  h3 {
-    color: @muted-color;
-    text-transform: uppercase;
-    font-size: 12px;
-    margin: 0 0 10px;
-  }
-}
-
-.ExtensionList {
-  columns: 3;
-  column-width: @extension-list-column-width;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  .clearfix();
-
-  > li {
-    -webkit-column-break-inside: avoid;
-    break-inside: avoid-column;
-    page-break-inside: avoid;
-    text-align: left;
-    position: relative;
-    border-radius: 4px;
-    transition: background .2s;
-  }
-}
-.ExtensionListItem.disabled {
-  .ExtensionListItem-title {
-    opacity: 0.5;
-    color: @muted-color;
-  }
-  .ExtensionListItem-icon {
-    opacity: 0.5;
-  }
-}
-.ExtensionListItem {
-  padding: 10px;
-}
-.ExtensionListItem:hover {
-  background: @control-bg;
-}
-.ExtensionListItem-content {
-  padding: 0 50px;
-  min-height: 40px;
-}
-.ExtensionListItem-main {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.ExtensionListItem-title {
-  display: inline-block;
-  font-size: 13px;
-  font-weight: bold;
-  white-space: nowrap;
-  cursor: pointer;
-  padding-right: 10px;
-}
-.ExtensionListItem-version {
-  color: @muted-more-color;
-  font-size: 11px;
-  font-weight: normal;
-  display: inline-flex;
-}
-.ExtensionListItem-controls {
-  float: right;
-  display: none;
-  margin-right: -50px;
-  margin-top: 1px;
-
-  .ExtensionListItem:hover &, &.open {
-    display: block;
-  }
-}
-.ExtensionListItem-description {
-  font-size: 11px;
-  font-weight: normal;
-  text-align: justify;
-}
-
-.ExtensionIcon {
-  width: 40px;
-  height: 40px;
-  background: @control-bg;
-  color: @control-color;
-  border-radius: 6px;
-  display: inline-block;
-  font-size: 20px;
-  line-height: 40px;
-  text-align: center;
-  margin-left: -50px;
-  position: absolute;
-}
-
-@media (max-width: @extension-list-column-width) {
-  .ExtensionListItem-description {
-    display: none;
-  }
-  .ExtensionListItem-version {
-    display: block;
-    margin-top: 8px;
-  }
-}

less/admin/MailPage.less

@@ -1,5 +1,4 @@
 .MailPage {
-  padding: 20px 0;
 
   @media @desktop-up {
     .container {

less/admin/PermissionsPage.less

@@ -1,6 +1,15 @@
 .PermissionsPage-groups {
   background: @control-bg;
-  padding: 20px 0;
+  border-radius: @border-radius;
+  max-width: calc(~'100% - 60px');
+  display: block;
+  margin-left: 30px;
+  overflow-x: auto;
+  padding: 10px 0 8px;
+
+  > .container {
+    padding: 0 10px;
+  }
 }
 .Group {
   width: 90px;
@@ -37,6 +46,7 @@
 
 .PermissionGrid {
   white-space: nowrap;
+  padding-left: 0 12px;
 
   td, th {
     padding: 5px;
@@ -112,7 +122,7 @@
 }
 .PermissionGrid-section {
   td, th {
-    padding-top: 20px;
+    padding-top: 10px;
   }
 }
 .PermissionGrid-child {

less/common/App.less

@@ -10,29 +10,23 @@
   }
 }
 
-// Fix a solid white box to the top of the viewport. This toolbar's contents
-// will differ depending on the device: on phones it will be content
-// controls, whereas on desktops it will be the header. We will overlay
-// these things on top of it later.
-.App:before {
-  content: " ";
-  .header-background();
-  border-bottom: 0;
-  position: absolute;
-
-  .affix& {
-    position: fixed;
-  }
-
-  .scrolled& {
-    .box-shadow(0 2px 6px @shadow-color);
-  }
-}
-
 // PHONES: Somewhere on the page there will be a .App-backControl, a
 // .App-primaryControl, and a .App-titleControl. We will position these on the
 // left, right, and center of the header respectively.
 @media @phone {
+  .App-navigation {
+    .header-background();
+    border-bottom: 0;
+    position: absolute;
+
+    .affix & {
+      position: fixed;
+    }
+
+    .scrolled & {
+      .box-shadow(0 2px 6px @shadow-color);
+    }
+  }
   .App-primaryControl, .App-titleControl, .App-backControl {
     position: absolute !important;
     z-index: @zindex-header + 1;
@@ -234,13 +228,18 @@
     display: none;
   }
   .App-header {
+    .header-background();
     padding: 8px;
-    height: @header-height;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: @zindex-header;
+    position: absolute;
+    border-bottom: 0;
+
+    .affix & {
+      position: fixed;
+    }
+
+    .scrolled & {
+      .box-shadow(0 2px 6px @shadow-color);
+    }
 
     & when (@config-colored-header = true) {
       .light-contents(@header-color, @header-control-bg, @header-control-color);

less/common/Modal.less

@@ -105,6 +105,10 @@
       text-align: left;
     }
   }
+
+  .off.Checkbox--switch .Checkbox-display {
+    background: @muted-more-color;
+  }
 }
 .Modal-footer {
   border: 0;

less/forum/PostStream.less

@@ -6,18 +6,7 @@
     margin-top: 10px;
   }
 }
-
-@-webkit-keyframes fadeIn {
-  0% {opacity: 0}
-  100% {opacity: 1}
-}
-@keyframes fadeIn {
-  0% {opacity: 0}
-  100% {opacity: 1}
-}
 .PostStream-item {
-  .animation(fadeIn 0.4s ease-in-out);
-
   &:not(:last-child) {
     border-bottom: 1px solid @control-bg;
 
@@ -104,3 +93,16 @@
   .animation(pulsate 0.2s ease-in-out);
   .animation-iteration-count(1);
 }
+
+@-webkit-keyframes fadeIn {
+  0% {opacity: 0}
+  100% {opacity: 1}
+}
+@keyframes fadeIn {
+  0% {opacity: 0}
+  100% {opacity: 1}
+}
+.fadeIn {
+  .animation(fadeIn 0.4s ease-in-out);
+  .animation-iteration-count(1);
+}

less/forum/Slidable.less

@@ -44,7 +44,7 @@
 
       .sliding& {
         position: relative;
-        background: #fff;
+        background: @control-bg;
         z-index: 2;
         border-radius: 2px;
         .box-shadow(0 2px 6px @shadow-color);

src/Admin/AdminServiceProvider.php

@@ -54,9 +54,10 @@ class AdminServiceProvider extends AbstractServiceProvider
                 HttpMiddleware\StartSession::class,
                 HttpMiddleware\RememberFromCookie::class,
                 HttpMiddleware\AuthenticateWithSession::class,
-                HttpMiddleware\CheckCsrfToken::class,
                 HttpMiddleware\SetLocale::class,
-                Middleware\RequireAdministrateAbility::class,
+                'flarum.admin.route_resolver',
+                HttpMiddleware\CheckCsrfToken::class,
+                Middleware\RequireAdministrateAbility::class
             ];
         });
 
@@ -68,6 +69,10 @@ class AdminServiceProvider extends AbstractServiceProvider
             );
         });
 
+        $this->app->bind('flarum.admin.route_resolver', function () {
+            return new HttpMiddleware\ResolveRoute($this->app->make('flarum.admin.routes'));
+        });
+
         $this->app->singleton('flarum.admin.handler', function () {
             $pipe = new MiddlewarePipe;
 
@@ -75,7 +80,7 @@ class AdminServiceProvider extends AbstractServiceProvider
                 $pipe->pipe($this->app->make($middleware));
             }
 
-            $pipe->pipe(new HttpMiddleware\DispatchRoute($this->app->make('flarum.admin.routes')));
+            $pipe->pipe(new HttpMiddleware\ExecuteRoute());
 
             return $pipe;
         });

src/Admin/Content/AdminPayload.php

@@ -75,6 +75,9 @@ class AdminPayload
         $document->payload['extensions'] = $this->extensions->getExtensions()->toArray();
 
         $document->payload['displayNameDrivers'] = array_keys($this->container->make('flarum.user.display_name.supported_drivers'));
+        $document->payload['slugDrivers'] = array_map(function ($resourceDrivers) {
+            return array_keys($resourceDrivers);
+        }, $this->container->make('flarum.http.slugDrivers'));
 
         $document->payload['phpVersion'] = PHP_VERSION;
         $document->payload['mysqlVersion'] = $this->db->selectOne('select version() as version')->version;

src/Api/ApiServiceProvider.php

@@ -42,6 +42,20 @@ class ApiServiceProvider extends AbstractServiceProvider
             return $routes;
         });
 
+        $this->app->singleton('flarum.api.throttlers', function () {
+            return [
+                'bypassThrottlingAttribute' => function ($request) {
+                    if ($request->getAttribute('bypassThrottling')) {
+                        return false;
+                    }
+                }
+            ];
+        });
+
+        $this->app->bind(Middleware\ThrottleApi::class, function ($app) {
+            return new Middleware\ThrottleApi($app->make('flarum.api.throttlers'));
+        });
+
         $this->app->singleton('flarum.api.middleware', function () {
             return [
                 'flarum.api.error_handler',
@@ -51,8 +65,10 @@ class ApiServiceProvider extends AbstractServiceProvider
                 HttpMiddleware\RememberFromCookie::class,
                 HttpMiddleware\AuthenticateWithSession::class,
                 HttpMiddleware\AuthenticateWithHeader::class,
-                HttpMiddleware\CheckCsrfToken::class,
                 HttpMiddleware\SetLocale::class,
+                'flarum.api.route_resolver',
+                HttpMiddleware\CheckCsrfToken::class,
+                Middleware\ThrottleApi::class
             ];
         });
 
@@ -64,6 +80,10 @@ class ApiServiceProvider extends AbstractServiceProvider
             );
         });
 
+        $this->app->bind('flarum.api.route_resolver', function () {
+            return new HttpMiddleware\ResolveRoute($this->app->make('flarum.api.routes'));
+        });
+
         $this->app->singleton('flarum.api.handler', function () {
             $pipe = new MiddlewarePipe;
 
@@ -71,10 +91,16 @@ class ApiServiceProvider extends AbstractServiceProvider
                 $pipe->pipe($this->app->make($middleware));
             }
 
-            $pipe->pipe(new HttpMiddleware\DispatchRoute($this->app->make('flarum.api.routes')));
+            $pipe->pipe(new HttpMiddleware\ExecuteRoute());
 
             return $pipe;
         });
+
+        $this->app->singleton('flarum.api.notification_serializers', function () {
+            return [
+                'discussionRenamed' => BasicDiscussionSerializer::class
+            ];
+        });
     }
 
     /**
@@ -82,7 +108,7 @@ class ApiServiceProvider extends AbstractServiceProvider
      */
     public function boot()
     {
-        $this->registerNotificationSerializers();
+        $this->setNotificationSerializers();
 
         AbstractSerializeController::setContainer($this->app);
         AbstractSerializeController::setEventDispatcher($events = $this->app->make('events'));
@@ -94,13 +120,12 @@ class ApiServiceProvider extends AbstractServiceProvider
     /**
      * Register notification serializers.
      */
-    protected function registerNotificationSerializers()
+    protected function setNotificationSerializers()
     {
         $blueprints = [];
-        $serializers = [
-            'discussionRenamed' => BasicDiscussionSerializer::class
-        ];
+        $serializers = $this->app->make('flarum.api.notification_serializers');
 
+        // Deprecated in beta 15, remove in beta 16
         $this->app->make('events')->dispatch(
             new ConfigureNotificationTypes($blueprints, $serializers)
         );

src/Api/Controller/AbstractSerializeController.php

@@ -82,6 +82,16 @@ abstract class AbstractSerializeController implements RequestHandlerInterface
      */
     protected static $events;
 
+    /**
+     * @var array
+     */
+    protected static $beforeDataCallbacks = [];
+
+    /**
+     * @var array
+     */
+    protected static $beforeSerializationCallbacks = [];
+
     /**
      * {@inheritdoc}
      */
@@ -89,12 +99,30 @@ abstract class AbstractSerializeController implements RequestHandlerInterface
     {
         $document = new Document;
 
+        foreach (array_reverse(array_merge([static::class], class_parents($this))) as $class) {
+            if (isset(static::$beforeDataCallbacks[$class])) {
+                foreach (static::$beforeDataCallbacks[$class] as $callback) {
+                    $callback($this);
+                }
+            }
+        }
+
+        // Deprected in beta 15, removed in beta 16
         static::$events->dispatch(
             new WillGetData($this)
         );
 
         $data = $this->data($request, $document);
 
+        foreach (array_reverse(array_merge([static::class], class_parents($this))) as $class) {
+            if (isset(static::$beforeSerializationCallbacks[$class])) {
+                foreach (static::$beforeSerializationCallbacks[$class] as $callback) {
+                    $callback($this, $data, $request, $document);
+                }
+            }
+        }
+
+        // Deprecated in beta 15, removed in beta 16
         static::$events->dispatch(
             new WillSerializeData($this, $data, $request, $document)
         );
@@ -197,6 +225,106 @@ abstract class AbstractSerializeController implements RequestHandlerInterface
         return new Parameters($request->getQueryParams());
     }
 
+    /**
+     * Set the serializer that will serialize data for the endpoint.
+     *
+     * @param string $serializer
+     */
+    public function setSerializer(string $serializer)
+    {
+        $this->serializer = $serializer;
+    }
+
+    /**
+     * Include the given relationship by default.
+     *
+     * @param string|array $name
+     */
+    public function addInclude($name)
+    {
+        $this->include = array_merge($this->include, (array) $name);
+    }
+
+    /**
+     * Don't include the given relationship by default.
+     *
+     * @param string|array $name
+     */
+    public function removeInclude($name)
+    {
+        $this->include = array_diff($this->include, (array) $name);
+    }
+
+    /**
+     * Make the given relationship available for inclusion.
+     *
+     * @param string|array $name
+     */
+    public function addOptionalInclude($name)
+    {
+        $this->optionalInclude = array_merge($this->optionalInclude, (array) $name);
+    }
+
+    /**
+     * Don't allow the given relationship to be included.
+     *
+     * @param string|array $name
+     */
+    public function removeOptionalInclude($name)
+    {
+        $this->optionalInclude = array_diff($this->optionalInclude, (array) $name);
+    }
+
+    /**
+     * Set the default number of results.
+     *
+     * @param int $limit
+     */
+    public function setLimit(int $limit)
+    {
+        $this->limit = $limit;
+    }
+
+    /**
+     * Set the maximum number of results.
+     *
+     * @param int $max
+     */
+    public function setMaxLimit(int $max)
+    {
+        $this->maxLimit = $max;
+    }
+
+    /**
+     * Allow sorting results by the given field.
+     *
+     * @param string|array $field
+     */
+    public function addSortField($field)
+    {
+        $this->sortFields = array_merge($this->sortFields, (array) $field);
+    }
+
+    /**
+     * Disallow sorting results by the given field.
+     *
+     * @param string|array $field
+     */
+    public function removeSortField($field)
+    {
+        $this->sortFields = array_diff($this->sortFields, (array) $field);
+    }
+
+    /**
+     * Set the default sort order for the results.
+     *
+     * @param array $sort
+     */
+    public function setSort(array $sort)
+    {
+        $this->sort = $sort;
+    }
+
     /**
      * @return Dispatcher
      */
@@ -228,4 +356,30 @@ abstract class AbstractSerializeController implements RequestHandlerInterface
     {
         static::$container = $container;
     }
+
+    /**
+     * @param string $controllerClass
+     * @param callable $callback
+     */
+    public static function addDataPreparationCallback(string $controllerClass, callable $callback)
+    {
+        if (! isset(static::$beforeDataCallbacks[$controllerClass])) {
+            static::$beforeDataCallbacks[$controllerClass] = [];
+        }
+
+        static::$beforeDataCallbacks[$controllerClass][] = $callback;
+    }
+
+    /**
+     * @param string $controllerClass
+     * @param callable $callback
+     */
+    public static function addSerializationPreparationCallback(string $controllerClass, callable $callback)
+    {
+        if (! isset(static::$beforeSerializationCallbacks[$controllerClass])) {
+            static::$beforeSerializationCallbacks[$controllerClass] = [];
+        }
+
+        static::$beforeSerializationCallbacks[$controllerClass][] = $callback;
+    }
 }

src/Api/Controller/CreateDiscussionController.php

@@ -64,6 +64,9 @@ class CreateDiscussionController extends AbstractCreateController
         $actor = $request->getAttribute('actor');
         $ipAddress = Arr::get($request->getServerParams(), 'REMOTE_ADDR', '127.0.0.1');
 
+        /**
+         * @deprecated, remove in beta 15.
+         */
         if (! $request->getAttribute('bypassFloodgate')) {
             $this->floodgate->assertNotFlooding($actor);
         }

src/Api/Controller/CreatePostController.php

@@ -65,6 +65,9 @@ class CreatePostController extends AbstractCreateController
         $discussionId = Arr::get($data, 'relationships.discussion.data.id');
         $ipAddress = Arr::get($request->getServerParams(), 'REMOTE_ADDR', '127.0.0.1');
 
+        /**
+         * @deprecated, remove in beta 15.
+         */
         if (! $request->getAttribute('bypassFloodgate')) {
             $this->floodgate->assertNotFlooding($actor);
         }

src/Api/Controller/ShowDiscussionController.php

@@ -12,6 +12,7 @@ namespace Flarum\Api\Controller;
 use Flarum\Api\Serializer\DiscussionSerializer;
 use Flarum\Discussion\Discussion;
 use Flarum\Discussion\DiscussionRepository;
+use Flarum\Http\SlugManager;
 use Flarum\Post\PostRepository;
 use Flarum\User\User;
 use Illuminate\Support\Arr;
@@ -31,6 +32,11 @@ class ShowDiscussionController extends AbstractShowController
      */
     protected $posts;
 
+    /**
+     * @var SlugManager
+     */
+    protected $slugManager;
+
     /**
      * {@inheritdoc}
      */
@@ -61,11 +67,13 @@ class ShowDiscussionController extends AbstractShowController
     /**
      * @param \Flarum\Discussion\DiscussionRepository $discussions
      * @param \Flarum\Post\PostRepository $posts
+     * @param \Flarum\Http\SlugManager $slugManager
      */
-    public function __construct(DiscussionRepository $discussions, PostRepository $posts)
+    public function __construct(DiscussionRepository $discussions, PostRepository $posts, SlugManager $slugManager)
     {
         $this->discussions = $discussions;
         $this->posts = $posts;
+        $this->slugManager = $slugManager;
     }
 
     /**
@@ -77,7 +85,11 @@ class ShowDiscussionController extends AbstractShowController
         $actor = $request->getAttribute('actor');
         $include = $this->extractInclude($request);
 
-        $discussion = $this->discussions->findOrFail($discussionId, $actor);
+        if (Arr::get($request->getQueryParams(), 'bySlug', false)) {
+            $discussion = $this->slugManager->forResource(Discussion::class)->fromSlug($discussionId, $actor);
+        } else {
+            $discussion = $this->discussions->findOrFail($discussionId, $actor);
+        }
 
         if (in_array('posts', $include)) {
             $postRelationships = $this->getPostRelationships($include);

src/Api/Controller/ShowUserController.php

@@ -11,6 +11,8 @@ namespace Flarum\Api\Controller;
 
 use Flarum\Api\Serializer\CurrentUserSerializer;
 use Flarum\Api\Serializer\UserSerializer;
+use Flarum\Http\SlugManager;
+use Flarum\User\User;
 use Flarum\User\UserRepository;
 use Illuminate\Support\Arr;
 use Psr\Http\Message\ServerRequestInterface;
@@ -29,15 +31,22 @@ class ShowUserController extends AbstractShowController
     public $include = ['groups'];
 
     /**
-     * @var \Flarum\User\UserRepository
+     * @var SlugManager
+     */
+    protected $slugManager;
+
+    /**
+     * @var UserRepository
      */
     protected $users;
 
     /**
-     * @param \Flarum\User\UserRepository $users
+     * @param SlugManager $slugManager
+     * @param UserRepository $users
      */
-    public function __construct(UserRepository $users)
+    public function __construct(SlugManager $slugManager, UserRepository $users)
     {
+        $this->slugManager = $slugManager;
         $this->users = $users;
     }
 
@@ -47,17 +56,18 @@ class ShowUserController extends AbstractShowController
     protected function data(ServerRequestInterface $request, Document $document)
     {
         $id = Arr::get($request->getQueryParams(), 'id');
-
-        if (! is_numeric($id)) {
-            $id = $this->users->getIdForUsername($id);
-        }
-
         $actor = $request->getAttribute('actor');
 
-        if ($actor->id == $id) {
+        if (Arr::get($request->getQueryParams(), 'bySlug', false)) {
+            $user = $this->slugManager->forResource(User::class)->fromSlug($id, $actor);
+        } else {
+            $user = $this->users->findOrFail($id, $actor);
+        }
+
+        if ($actor->id === $user->id) {
             $this->serializer = CurrentUserSerializer::class;
         }
 
-        return $this->users->findOrFail($id, $actor);
+        return $user;
     }
 }

src/Api/Controller/UploadFaviconController.php

@@ -9,69 +9,36 @@
 
 namespace Flarum\Api\Controller;
 
-use Flarum\Settings\SettingsRepositoryInterface;
-use Illuminate\Support\Arr;
-use Illuminate\Support\Str;
+use Intervention\Image\Image;
 use Intervention\Image\ImageManager;
-use League\Flysystem\FilesystemInterface;
-use Psr\Http\Message\ServerRequestInterface;
-use Tobscure\JsonApi\Document;
+use Psr\Http\Message\UploadedFileInterface;
 
-class UploadFaviconController extends ShowForumController
+class UploadFaviconController extends UploadImageController
 {
-    /**
-     * @var SettingsRepositoryInterface
-     */
-    protected $settings;
+    protected $filePathSettingKey = 'favicon_path';
 
-    /**
-     * @var FilesystemInterface
-     */
-    protected $uploadDir;
-
-    /**
-     * @param SettingsRepositoryInterface $settings
-     * @param FilesystemInterface $uploadDir
-     */
-    public function __construct(SettingsRepositoryInterface $settings, FilesystemInterface $uploadDir)
-    {
-        $this->settings = $settings;
-        $this->uploadDir = $uploadDir;
-    }
+    protected $filenamePrefix = 'favicon';
 
     /**
      * {@inheritdoc}
      */
-    public function data(ServerRequestInterface $request, Document $document)
+    protected function makeImage(UploadedFileInterface $file): Image
     {
-        $request->getAttribute('actor')->assertAdmin();
+        $this->fileExtension = pathinfo($file->getClientFilename(), PATHINFO_EXTENSION);
 
-        $file = Arr::get($request->getUploadedFiles(), 'favicon');
-        $extension = pathinfo($file->getClientFilename(), PATHINFO_EXTENSION);
-
-        if ($extension === 'ico') {
-            $image = $file->getStream();
+        if ($this->fileExtension === 'ico') {
+            $encodedImage = $file->getStream();
         } else {
-            $manager = new ImageManager;
+            $manager = new ImageManager();
 
-            $image = $manager->make($file->getStream())->resize(64, 64, function ($constraint) {
+            $encodedImage = $manager->make($file->getStream())->resize(64, 64, function ($constraint) {
                 $constraint->aspectRatio();
                 $constraint->upsize();
             })->encode('png');
 
-            $extension = 'png';
+            $this->fileExtension = 'png';
         }
 
-        if (($path = $this->settings->get('favicon_path')) && $this->uploadDir->has($path)) {
-            $this->uploadDir->delete($path);
-        }
-
-        $uploadName = 'favicon-'.Str::lower(Str::random(8)).'.'.$extension;
-
-        $this->uploadDir->write($uploadName, $image);
-
-        $this->settings->set('favicon_path', $uploadName);
-
-        return parent::data($request, $document);
+        return $encodedImage;
     }
 }

src/Api/Controller/UploadImageController.php

@@ -0,0 +1,87 @@
+<?php
+
+/*
+ * This file is part of Flarum.
+ *
+ * For detailed copyright and license information, please view the
+ * LICENSE file that was distributed with this source code.
+ */
+
+namespace Flarum\Api\Controller;
+
+use Flarum\Settings\SettingsRepositoryInterface;
+use Illuminate\Support\Arr;
+use Illuminate\Support\Str;
+use Intervention\Image\Image;
+use League\Flysystem\FilesystemInterface;
+use Psr\Http\Message\ServerRequestInterface;
+use Psr\Http\Message\UploadedFileInterface;
+use Tobscure\JsonApi\Document;
+
+abstract class UploadImageController extends ShowForumController
+{
+    /**
+     * @var SettingsRepositoryInterface
+     */
+    protected $settings;
+
+    /**
+     * @var FilesystemInterface
+     */
+    protected $uploadDir;
+
+    /**
+     * @var string
+     */
+    protected $fileExtension = 'png';
+
+    /**
+     * @var string
+     */
+    protected $filePathSettingKey = '';
+
+    /**
+     * @var string
+     */
+    protected $filenamePrefix = '';
+
+    /**
+     * @param SettingsRepositoryInterface $settings
+     * @param FilesystemInterface $uploadDir
+     */
+    public function __construct(SettingsRepositoryInterface $settings, FilesystemInterface $uploadDir)
+    {
+        $this->settings = $settings;
+        $this->uploadDir = $uploadDir;
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function data(ServerRequestInterface $request, Document $document)
+    {
+        $request->getAttribute('actor')->assertAdmin();
+
+        $file = Arr::get($request->getUploadedFiles(), $this->filenamePrefix);
+
+        $encodedImage = $this->makeImage($file);
+
+        if (($path = $this->settings->get($this->filePathSettingKey)) && $this->uploadDir->has($path)) {
+            $this->uploadDir->delete($path);
+        }
+
+        $uploadName = $this->filenamePrefix.'-'.Str::lower(Str::random(8)).'.'.$this->fileExtension;
+
+        $this->uploadDir->write($uploadName, $encodedImage);
+
+        $this->settings->set($this->filePathSettingKey, $uploadName);
+
+        return parent::data($request, $document);
+    }
+
+    /**
+     * @param UploadedFileInterface $file
+     * @return Image
+     */
+    abstract protected function makeImage(UploadedFileInterface $file): Image;
+}

src/Api/Controller/UploadLogoController.php

@@ -9,61 +9,27 @@
 
 namespace Flarum\Api\Controller;
 
-use Flarum\Settings\SettingsRepositoryInterface;
-use Illuminate\Support\Arr;
-use Illuminate\Support\Str;
+use Intervention\Image\Image;
 use Intervention\Image\ImageManager;
-use League\Flysystem\FilesystemInterface;
-use Psr\Http\Message\ServerRequestInterface;
-use Tobscure\JsonApi\Document;
+use Psr\Http\Message\UploadedFileInterface;
 
-class UploadLogoController extends ShowForumController
+class UploadLogoController extends UploadImageController
 {
-    /**
-     * @var SettingsRepositoryInterface
-     */
-    protected $settings;
+    protected $filePathSettingKey = 'logo_path';
 
-    /**
-     * @var FilesystemInterface
-     */
-    protected $uploadDir;
-
-    /**
-     * @param SettingsRepositoryInterface $settings
-     * @param FilesystemInterface $uploadDir
-     */
-    public function __construct(SettingsRepositoryInterface $settings, FilesystemInterface $uploadDir)
-    {
-        $this->settings = $settings;
-        $this->uploadDir = $uploadDir;
-    }
+    protected $filenamePrefix = 'logo';
 
     /**
      * {@inheritdoc}
      */
-    public function data(ServerRequestInterface $request, Document $document)
+    protected function makeImage(UploadedFileInterface $file): Image
     {
-        $request->getAttribute('actor')->assertAdmin();
-
-        $file = Arr::get($request->getUploadedFiles(), 'logo');
-
-        $manager = new ImageManager;
+        $manager = new ImageManager();
 
         $encodedImage = $manager->make($file->getStream())->heighten(60, function ($constraint) {
             $constraint->upsize();
         })->encode('png');
 
-        if (($path = $this->settings->get('logo_path')) && $this->uploadDir->has($path)) {
-            $this->uploadDir->delete($path);
-        }
-
-        $uploadName = 'logo-'.Str::lower(Str::random(8)).'.png';
-
-        $this->uploadDir->write($uploadName, $encodedImage);
-
-        $this->settings->set('logo_path', $uploadName);
-
-        return parent::data($request, $document);
+        return $encodedImage;
     }
 }

src/Api/Event/Serializing.php

@@ -17,6 +17,8 @@ use Flarum\Api\Serializer\AbstractSerializer;
  *
  * This event is fired when a serializer is constructing an array of resource
  * attributes for API output.
+ *
+ * @deprecated in beta 15, removed in beta 16
  */
 class Serializing
 {

src/Api/Event/WillGetData.php

@@ -12,6 +12,9 @@ namespace Flarum\Api\Event;
 use Flarum\Api\Controller\AbstractSerializeController;
 use Illuminate\Support\Arr;
 
+/**
+ * @deprecated in beta 15, removed in beta 16
+ */
 class WillGetData
 {
     /**