AdminUX Overhaul (#2409)

- Extensions now have their own pages
- The API for extensions to register permissions and settings has been overhauled via the `flarum/admin/utils/ExtensionData` util
- An extension grid has been added as a widget to the Dashboard page

js/src/admin/components/ExtensionsWidget.js

@@ -0,0 +1,48 @@
+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">
+        <div className="container">
+          {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>
+      </div>
+    );
+  }
+}