[2.x] revert(admin): remove collapsible extension categories, restore 3-section sidebar

extensions/akismet/composer.json

@@ -33,7 +33,7 @@
         },
         "flarum-extension": {
             "title": "Akismet",
-            "category": "moderation",
+            "category": "feature",
             "icon": {
                 "image": "icon.jpg",
                 "backgroundSize": "cover",

extensions/approval/composer.json

@@ -33,7 +33,7 @@
         },
         "flarum-extension": {
             "title": "Approval",
-            "category": "moderation",
+            "category": "feature",
             "icon": {
                 "name": "fas fa-check",
                 "backgroundColor": "#ABDC88",

extensions/bbcode/composer.json

@@ -32,7 +32,7 @@
         },
         "flarum-extension": {
             "title": "BBCode",
-            "category": "formatting",
+            "category": "feature",
             "icon": {
                 "name": "fas fa-bold",
                 "backgroundColor": "#238C59",

extensions/embed/composer.json

@@ -32,7 +32,7 @@
         },
         "flarum-extension": {
             "title": "Embed",
-            "category": "formatting",
+            "category": "feature",
             "icon": {
                 "name": "fas fa-code",
                 "backgroundColor": "#B9D233",

extensions/emoji/composer.json

@@ -27,7 +27,7 @@
         },
         "flarum-extension": {
             "title": "Emoji",
-            "category": "formatting",
+            "category": "feature",
             "icon": {
                 "image": "icon.svg",
                 "backgroundColor": "#FECC4D"

extensions/flags/composer.json

@@ -32,7 +32,7 @@
         },
         "flarum-extension": {
             "title": "Flags",
-            "category": "moderation",
+            "category": "feature",
             "icon": {
                 "name": "fas fa-flag",
                 "backgroundColor": "#D659B5",

extensions/gdpr/composer.json

@@ -40,7 +40,7 @@
         },
         "flarum-extension": {
             "title": "GDPR Data Management",
-            "category": "moderation",
+            "category": "feature",
             "icon": {
                 "image": "resources/logo.svg",
                 "backgroundColor": "#EBF1FD",

extensions/likes/composer.json

@@ -32,7 +32,7 @@
         },
         "flarum-extension": {
             "title": "Likes",
-            "category": "discussion",
+            "category": "feature",
             "icon": {
                 "name": "far fa-thumbs-up",
                 "backgroundColor": "#3A649D",

extensions/lock/composer.json

@@ -32,7 +32,7 @@
         },
         "flarum-extension": {
             "title": "Lock",
-            "category": "moderation",
+            "category": "feature",
             "icon": {
                 "name": "fas fa-lock",
                 "backgroundColor": "#ddd",

extensions/markdown/composer.json

@@ -27,7 +27,7 @@
         },
         "flarum-extension": {
             "title": "Markdown",
-            "category": "formatting",
+            "category": "feature",
             "icon": {
                 "image": "icon.svg",
                 "backgroundColor": "#000",

extensions/mentions/composer.json

@@ -32,7 +32,7 @@
         },
         "flarum-extension": {
             "title": "Mentions",
-            "category": "discussion",
+            "category": "feature",
             "optional-dependencies": [
                 "flarum/tags"
             ],

extensions/messages/composer.json

@@ -24,7 +24,7 @@
     "extra": {
         "flarum-extension": {
             "title": "Messages",
-            "category": "discussion",
+            "category": "feature",
             "optional-dependencies": [
                 "flarum/tags"
             ],

extensions/nicknames/composer.json

@@ -32,7 +32,7 @@
         },
         "flarum-extension": {
             "title": "Nicknames",
-            "category": "discussion",
+            "category": "feature",
             "icon": {
                 "name": "fas fa-user-tag",
                 "backgroundColor": "#8E4529",

extensions/pusher/composer.json

@@ -36,7 +36,7 @@
         },
         "flarum-extension": {
             "title": "Pusher",
-            "category": "infrastructure",
+            "category": "feature",
             "icon": {
                 "image": "icon.png",
                 "backgroundSize": "46% 63%",

extensions/realtime/composer.json

@@ -33,7 +33,7 @@
         },
         "flarum-extension": {
             "title": "Realtime",
-            "category": "infrastructure",
+            "category": "feature",
             "icon": {
                 "image": "resources/assets/logo.svg",
                 "backgroundColor": "#E3E7F1",

extensions/statistics/composer.json

@@ -32,7 +32,7 @@
         },
         "flarum-extension": {
             "title": "Statistics",
-            "category": "analytics",
+            "category": "feature",
             "icon": {
                 "name": "fas fa-chart-bar",
                 "backgroundColor": "#6932d1",

extensions/sticky/composer.json

@@ -32,7 +32,7 @@
         },
         "flarum-extension": {
             "title": "Sticky",
-            "category": "discussion",
+            "category": "feature",
             "icon": {
                 "name": "fas fa-thumbtack",
                 "backgroundColor": "#D13E32",

extensions/subscriptions/composer.json

@@ -32,7 +32,7 @@
         },
         "flarum-extension": {
             "title": "Subscriptions",
-            "category": "discussion",
+            "category": "feature",
             "optional-dependencies": [
                 "flarum/approval"
             ],

extensions/suspend/composer.json

@@ -32,7 +32,7 @@
         },
         "flarum-extension": {
             "title": "Suspend",
-            "category": "moderation",
+            "category": "feature",
             "icon": {
                 "name": "fas fa-ban",
                 "backgroundColor": "#ddd",

extensions/tags/composer.json

@@ -37,7 +37,7 @@
         },
         "flarum-extension": {
             "title": "Tags",
-            "category": "discussion",
+            "category": "feature",
             "icon": {
                 "name": "fas fa-tags",
                 "backgroundColor": "#F28326",

framework/core/js/src/admin/AdminApplication.tsx

@@ -94,16 +94,9 @@ export default class AdminApplication extends Application {
   registry = new AdminRegistry();
 
   extensionCategories: Record<string, number> = {
-    feature: 100,
-    moderation: 90,
-    discussion: 80,
-    authentication: 70,
-    formatting: 60,
-    infrastructure: 55,
-    analytics: 52,
-    other: 50,
-    theme: 40,
-    language: 30,
+    feature: 30,
+    theme: 20,
+    language: 10,
   };
 
   history: IHistory = {

framework/core/js/src/admin/components/AdminNav.js

@@ -7,31 +7,13 @@ import getCategorizedExtensions from '../utils/getCategorizedExtensions';
 import ItemList from '../../common/utils/ItemList';
 import Stream from '../../common/utils/Stream';
 import Input from '../../common/components/Input';
-import Icon from '../../common/components/Icon';
 import extractText from '../../common/utils/extractText';
 
 export default class AdminNav extends Component {
   oninit(vnode) {
     super.oninit(vnode);
 
     this.query = Stream('');
-    this.collapsed = {};
-
-    // Pre-expand the category of the currently active extension.
-    // m.route.get() may be null on a hard reload before Mithril has processed
-    // the hash, so fall back to parsing window.location.hash directly.
-    const currentRoute = m.route.get() || window.location.hash.replace(/^#/, '');
-    const extensionMatch = currentRoute.match(/\/extensions?\/([^/?]+)/);
-    if (extensionMatch) {
-      const activeId = extensionMatch[1];
-      const categorized = getCategorizedExtensions();
-      for (const [category, extensions] of Object.entries(categorized)) {
-        if (extensions.some((ext) => ext.id === activeId)) {
-          this.collapsed[category] = false;
-          break;
-        }
-      }
-    }
   }
 
   view() {
@@ -72,16 +54,6 @@ export default class AdminNav extends Component {
     }
   }
 
-  isCollapsed(category) {
-    if (this.query()) return false;
-    return this.collapsed[category] !== false;
-  }
-
-  toggleCollapsed(category) {
-    this.collapsed[category] = !this.isCollapsed(category);
-    m.redraw();
-  }
-
   /**
    * Build an item list of main links to show in the admin navigation.
    *
@@ -165,88 +137,43 @@ export default class AdminNav extends Component {
     return items;
   }
 
-  categoryIcon(category) {
-    const icons = {
-      analytics: 'fas fa-chart-bar',
-      authentication: 'fas fa-lock',
-      discussion: 'fas fa-comments',
-      feature: 'fas fa-star',
-      formatting: 'fas fa-paragraph',
-      infrastructure: 'fas fa-server',
-      language: 'fas fa-language',
-      moderation: 'fas fa-shield-alt',
-      other: 'fas fa-cube',
-      theme: 'fas fa-paint-brush',
-    };
-    return icons[category] || 'fas fa-puzzle-piece';
-  }
-
   extensionItems() {
     const items = new ItemList();
 
     const categorizedExtensions = getCategorizedExtensions();
     const categories = app.extensionCategories;
-    const query = this.query().toUpperCase();
 
     Object.keys(categorizedExtensions).map((category) => {
-      const extensions = categorizedExtensions[category];
-      const count = extensions.length;
-
-      // When searching, only show categories that have matching results
-      const matchingExtensions = extensions.filter((extension) => {
-        if (!query) return true;
-        const title = extension.extra['flarum-extension'].title || '';
-        const description = extension.description || '';
-        return title.toUpperCase().includes(query) || description.toUpperCase().includes(query);
-      });
-
-      if (query && matchingExtensions.length === 0) return;
-
-      const isOpen = !this.isCollapsed(category);
-
-      const abandonedInCategory = extensions.filter((ext) => ext.abandoned);
-      const hasDanger = abandonedInCategory.some((ext) => typeof ext.abandoned === 'string');
-      const categoryBadgeType = abandonedInCategory.length > 0 ? (hasDanger ? 'danger' : 'warning') : null;
-
-      items.add(
-        `category-${category}`,
-        <button
-          className="ExtensionListTitle"
-          onclick={(e) => {
-            e.stopPropagation();
-            this.toggleCollapsed(category);
-          }}
-        >
-          <Icon name={this.categoryIcon(category)} className="ExtensionListTitle-icon" />
-          <span className="ExtensionListTitle-label">{app.translator.trans(`core.admin.nav.categories.${category}`)}</span>
-          {categoryBadgeType && <span className={`Badge Badge--${categoryBadgeType} ExtensionListTitle-badge`}>!</span>}
-          <span className="ExtensionListTitle-count">{count}</span>
-          <Icon name={`fas fa-chevron-${isOpen ? 'down' : 'right'}`} className="ExtensionListTitle-chevron" />
-        </button>,
-        categories[category]
-      );
-
-      if (!isOpen) return;
+      if (!this.query()) {
+        items.add(
+          `category-${category}`,
+          <h4 className="ExtensionListTitle">{app.translator.trans(`core.admin.nav.categories.${category}`)}</h4>,
+          categories[category]
+        );
+      }
 
-      matchingExtensions.map((extension) => {
+      categorizedExtensions[category].map((extension) => {
+        const query = this.query().toUpperCase();
         const title = extension.extra['flarum-extension'].title || '';
         const description = extension.description || '';
         const isAbandoned = extension.abandoned;
         const hasReplacement = typeof isAbandoned === 'string';
 
-        items.add(
-          `extension-${extension.id}`,
-          <ExtensionLinkButton
-            href={app.route('extension', { id: extension.id })}
-            extensionId={extension.id}
-            className="ExtensionNavButton"
-            title={description}
-          >
-            {title}
-            {isAbandoned && <span className={`Badge Badge--${hasReplacement ? 'danger' : 'warning'}`}>!</span>}
-          </ExtensionLinkButton>,
-          categories[category]
-        );
+        if (!query || title.toUpperCase().includes(query) || description.toUpperCase().includes(query)) {
+          items.add(
+            `extension-${extension.id}`,
+            <ExtensionLinkButton
+              href={app.route('extension', { id: extension.id })}
+              extensionId={extension.id}
+              className="ExtensionNavButton"
+              title={description}
+            >
+              {title}
+              {isAbandoned && <span className={`Badge Badge--${hasReplacement ? 'danger' : 'warning'}`}>!</span>}
+            </ExtensionLinkButton>,
+            categories[category]
+          );
+        }
       });
     });