feat: add followingpage hero

js/src/forum/addSubscriptionControls.js

@@ -1,28 +1,6 @@
 import app from 'flarum/forum/app';
-import { extend } from 'flarum/common/extend';
 import Model from 'flarum/common/Model';
-import IndexPage from 'flarum/forum/components/IndexPage';
-import SubscriptionModal from './components/SubscriptionModal';
-import SubscriptionStateButton from './components/SubscriptionStateButton';
 
 export default () => {
   app.store.models.tags.prototype.subscription = Model.attribute('subscription');
-
-  extend(IndexPage.prototype, 'sidebarItems', function (items) {
-    if (!this.currentTag() || !app.session.user) return;
-
-    const tag = this.currentTag();
-
-    if (items.has('newDiscussion')) items.setPriority('newDiscussion', 10);
-
-    items.add(
-      'subscriptionButton',
-      <SubscriptionStateButton
-        className="Button App-primaryControl"
-        subscription={tag.subscription()}
-        onclick={() => app.modal.show(SubscriptionModal, { model: tag })}
-      />,
-      5
-    );
-  });
 };

js/src/forum/components/FollowingHero.tsx

@@ -0,0 +1,54 @@
+import app from 'flarum/forum/app';
+import Component from 'flarum/common/Component';
+import icon from 'flarum/common/helpers/icon';
+import textContrastClass from 'flarum/common/helpers/textContrastClass';
+import classList from 'flarum/common/utils/classList';
+import ItemList from 'flarum/common/utils/ItemList';
+import type Mithril from 'mithril';
+
+export default class FollowingHero extends Component {
+  view() {
+    const color = this.heroColor();
+
+    return (
+      <header
+        className={classList('Hero', 'FollowingHero', { 'FollowingHero--colored': color, [textContrastClass(color)]: color })}
+        style={color ? { '--hero-bg': color } : undefined}
+      >
+        <div className="container">{this.viewItems().toArray()}</div>
+      </header>
+    );
+  }
+
+  viewItems(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    items.add('content', <div className="containerNarrow">{this.contentItems().toArray()}</div>, 80);
+
+    return items;
+  }
+
+  contentItems(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    items.add(
+      'following-title',
+      <h1 className="Hero-title">
+        {icon(this.heroIcon())} {app.translator.trans('fof-follow-tags.forum.hero.title')}
+      </h1>,
+      100
+    );
+
+    return items;
+  }
+
+  heroColor(): string | null {
+    // Example return a color string to display a colored hero
+    //return app.forum.attribute<string>('themeSecondaryColor');
+    return null;
+  }
+
+  heroIcon(): string {
+    return 'fas fa-star';
+  }
+}

js/src/forum/components/index.ts

@@ -1,3 +1,4 @@
+import FollowingHero from './FollowingHero';
 import FollowingPageFilterDropdown from './FollowingPageFilterDropdown';
 import NewDiscussionNotification from './NewDiscussionNotification';
 import NewDiscussionTagNotification from './NewDiscussionTagNotification';
@@ -14,4 +15,5 @@ export const components = {
   SubscriptionModal,
   SubscriptionOptionItem,
   SubscriptionStateButton,
+  FollowingHero,
 };

js/src/forum/extenders/extendIndexPage.tsx

@@ -0,0 +1,36 @@
+import app from 'flarum/forum/app';
+import { extend, override } from 'flarum/common/extend';
+import IndexPage from 'flarum/forum/components/IndexPage';
+import FollowingHero from '../components/FollowingHero';
+import SubscriptionModal from '../components/SubscriptionModal';
+import SubscriptionStateButton from '../components/SubscriptionStateButton';
+
+export default function extendIndexPage() {
+  extend(IndexPage.prototype, 'sidebarItems', function (items) {
+    if (!this.currentTag() || !app.session.user) return;
+
+    const tag = this.currentTag();
+    if (!tag) return;
+
+    if (items.has('newDiscussion')) items.setPriority('newDiscussion', 10);
+
+    items.add(
+      'subscriptionButton',
+      <SubscriptionStateButton
+        className="Button App-primaryControl"
+        /** @ts-expect-error */
+        subscription={tag.subscription()}
+        onclick={() => app.modal.show(SubscriptionModal, { model: tag })}
+      />,
+      5
+    );
+  });
+
+  override(IndexPage.prototype, 'hero', function (original: any) {
+    if (app.current.get('routeName') === 'following') {
+      return <FollowingHero />;
+    }
+
+    return original();
+  });
+}

js/src/forum/index.ts

@@ -7,6 +7,7 @@ import NewDiscussionTagNotification from './components/NewDiscussionTagNotificat
 import addDiscussionBadge from './addDiscussionBadge';
 import addPreferences from './addPreferences';
 import extendNotificationGrid from './extendNotificationGrid';
+import extendIndexPage from './extenders/extendIndexPage';
 
 export * from './components';
 export * from './utils';
@@ -20,6 +21,7 @@ app.initializers.add(
     }
 
     addSubscriptionControls();
+    extendIndexPage();
 
     if ('flarum-subscriptions' in flarum.extensions) {
       addDiscussionBadge();

js/tsconfig.json

@@ -4,13 +4,15 @@
   // This will match all .ts, .tsx, .d.ts, .js, .jsx files in your `src` folder
   // and also tells your Typescript server to read core's global typings for
   // access to `dayjs` and `$` in the global namespace.
-  "include": ["src/**/*", "../vendor/flarum/core/js/dist-typings/@types/**/*"],
+  "include": ["src/**/*", "../vendor/flarum/core/js/dist-typings/@types/**/*", "../vendor/flarum/tags/js/dist-typings/@types/**/*", "../vendor/flarum/subscriptions/js/dist-typings/@types/**/*"],
   "compilerOptions": {
     // This will output typings to `dist-typings`
     "declarationDir": "./dist-typings",
     "baseUrl": ".",
     "paths": {
-      "flarum/*": ["../vendor/flarum/core/js/dist-typings/*"]
+      "flarum/*": ["../vendor/flarum/core/js/dist-typings/*"],
+      "flarum/tags": ["../vendor/flarum/tags/js/dist-typings/*"],
+      "flarum/subscriptions": ["../vendor/flarum/subscriptions/js/dist-typings/*"]
     }
   }
 }

resources/less/forum.less

@@ -124,3 +124,11 @@
     padding-left: 10px; // Some spacing between the description and the check icon
   }
 }
+
+@media @tablet-up {
+  .Hero.FollowingHero {
+      .container {
+          padding-bottom: 40px;
+      }
+  }
+}

resources/locale/en.yml

@@ -35,6 +35,9 @@ fof-follow-tags:
       notify_email_tooltip: Get an email when there are new discussions or posts
       submit_button: Confirm subscription
 
+    hero:
+      title: => flarum-subscriptions.forum.index.following_link
+
     notifications:
       new_discussion_text: "{username} started"
       new_post_text: "{username} posted"