refactor: improve extensibility

js/src/forum/components/SolvedFilter.tsx

@@ -0,0 +1,67 @@
+import app from 'flarum/forum/app';
+import Component, { ComponentAttrs } from 'flarum/common/Component';
+import Dropdown from 'flarum/common/components/Dropdown';
+import Button from 'flarum/common/components/Button';
+import type Tag from 'flarum/tags/common/models/Tag';
+
+export interface SolvedFilterAttrs extends ComponentAttrs {
+  alwaysShow?: boolean;
+}
+
+export default class SolvedFilter extends Component<SolvedFilterAttrs> {
+  view() {
+    if (!this.shouldShowFilter()) return null;
+
+    const selected = app.discussions.bestAnswer as unknown as number;
+    const options = ['all', 'solved', 'unsolved'];
+
+    return Dropdown.component(
+      {
+        buttonClassName: 'Button',
+        label: app.translator.trans(
+          `fof-best-answer.forum.filter.${options[selected] || Object.keys(options).map((key) => options[Number(key)])[0]}_label`
+        ),
+        accessibleToggleLabel: app.translator.trans('fof-best-answer.forum.filter.accessible_label'),
+      },
+      Object.keys(options).map((value) => {
+        const label = options[Number(value)];
+        const active = (selected || Object.keys(options)[0]) === value;
+
+        return Button.component(
+          {
+            icon: active ? 'fas fa-check' : true,
+            active: active,
+            onclick: () => {
+              app.discussions.bestAnswer = value;
+              if (value === '0') {
+                delete app.discussions.bestAnswer;
+              }
+              app.discussions.refresh();
+            },
+          },
+          app.translator.trans(`fof-best-answer.forum.filter.${label}_label`)
+        );
+      })
+    );
+  }
+
+  shouldShowFilter() {
+    const { alwaysShow } = this.attrs;
+
+    if (alwaysShow) return true;
+
+    if (!app.forum.attribute('showBestAnswerFilterUi')) return false;
+
+    const tag: Tag = app.current.get('tag');
+
+    if (!tag?.isQnA?.()) {
+      if (app.discussions.bestAnswer) {
+        delete app.discussions.bestAnswer;
+        app.discussions.refresh();
+      }
+      return false;
+    }
+
+    return true;
+  }
+}

js/src/forum/components/index.ts

@@ -6,6 +6,7 @@ import SelectBestAnswerItem from './SelectBestAnswerItem';
 import SelectBestAnswerNotification from './SelectBestAnswerNotification';
 import SolutionSearchItem from './SolutionSearchItem';
 import SolutionSearchSource from './SolutionSearchSource';
+import SolvedFilter from './SolvedFilter';
 
 export const components = {
   SelectBestAnswerItem,
@@ -16,4 +17,5 @@ export const components = {
   BestAnswerInDiscussionNotification,
   SelectBestAnswerNotification,
   SolutionSearchItem,
+  SolvedFilter,
 };

js/src/forum/extenders/extendIndexPage.tsx

@@ -1,8 +1,7 @@
 import app from 'flarum/forum/app';
 import { extend } from 'flarum/common/extend';
 import IndexPage from 'flarum/forum/components/IndexPage';
-import Dropdown from 'flarum/common/components/Dropdown';
-import Button from 'flarum/common/components/Button';
+import SolvedFilter from '../components/SolvedFilter';
 
 export default function extendIndexPage() {
   extend(IndexPage.prototype, 'sidebarItems', function (items) {
@@ -22,55 +21,6 @@ export default function extendIndexPage() {
   });
 
   extend(IndexPage.prototype, 'viewItems', function (items) {
-    if (!app.forum.attribute('showBestAnswerFilterUi')) {
-      return;
-    }
-
-    const tag = this.currentTag();
-
-    if (!tag?.isQnA?.()) {
-      if (app.discussions.bestAnswer) {
-        delete app.discussions.bestAnswer;
-        app.discussions.refresh();
-      }
-
-      return;
-    }
-
-    const options = ['all', 'solved', 'unsolved'];
-
-    const selected = app.discussions.bestAnswer as unknown as number;
-
-    items.add(
-      'solved-filter',
-      Dropdown.component(
-        {
-          buttonClassName: 'Button',
-          label: app.translator.trans(
-            `fof-best-answer.forum.filter.${options[selected] || Object.keys(options).map((key) => options[Number(key)])[0]}_label`
-          ),
-          accessibleToggleLabel: app.translator.trans('fof-best-answer.forum.filter.accessible_label'),
-        },
-        Object.keys(options).map((value) => {
-          const label = options[Number(value)];
-          const active = (selected || Object.keys(options)[0]) === value;
-
-          return Button.component(
-            {
-              icon: active ? 'fas fa-check' : true,
-              active: active,
-              onclick: () => {
-                app.discussions.bestAnswer = value;
-                if (value === '0') {
-                  delete app.discussions.bestAnswer;
-                }
-                app.discussions.refresh();
-              },
-            },
-            app.translator.trans(`fof-best-answer.forum.filter.${label}_label`)
-          );
-        })
-      )
-    );
+    items.add('solved-filter', <SolvedFilter />);
   });
 }