feat: private discussion indexpage hero (#212)

js/src/forum/components/PrivateHero.tsx

@@ -0,0 +1,57 @@
+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 PrivateHero extends Component {
+  view() {
+    const color = this.heroColor();
+
+    return (
+      <header
+        className={classList('Hero', 'PrivateHero', { 'PrivateHero--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(
+      'private-discussions-title',
+      <h1 className="Hero-title">
+        {icon(this.heroIcon())} {app.translator.trans('fof-byobu.forum.hero.title')}
+      </h1>,
+      100
+    );
+
+    // Don't think a subtitle is necessary, but can be added if needed.
+    //items.add('private-discussions-subtitle', <div className="Hero-subtitle">{app.translator.trans('fof-byobu.forum.hero.subtitle')}</div>, 90);
+
+    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 app.forum.data.attributes?.['byobu.icon-badge'] as string;
+  }
+}

js/src/forum/components/index.tsx

@@ -0,0 +1,7 @@
+import PrivateComposerPage from './PrivateComposerPage';
+import PrivateHero from './PrivateHero';
+
+export const components = {
+  PrivateHero,
+  PrivateComposerPage,
+};

js/src/forum/index.ts

@@ -7,6 +7,7 @@ export * from './modals';
 export * from './pages/discussions';
 export * from './events';
 export * from './helpers';
+export * from './components';
 
 export { default as extend } from './extend';
 

js/src/forum/pages/PrivateDiscussionsPage.js

@@ -1,11 +1,12 @@
 import app from 'flarum/forum/app';
-import { extend } from 'flarum/common/extend';
+import { extend, override } from 'flarum/common/extend';
 import LinkButton from 'flarum/common/components/LinkButton';
 import IndexPage from 'flarum/forum/components/IndexPage';
 import DiscussionListState from 'flarum/forum/states/DiscussionListState';
 import PrivateComposing from './PrivateComposing';
+import PrivateHero from '../components/PrivateHero';
 
-export default () => {
+export default function PrivateDiscussionsPage() {
   extend(IndexPage.prototype, 'navItems', (items) => {
     const user = app.session.user;
 
@@ -46,4 +47,12 @@ export default () => {
       items.setContent('newDiscussion', compose.component());
     }
   });
-};
+
+  override(IndexPage.prototype, 'hero', function (original) {
+    if (app.current.get('routeName') === 'byobuPrivate') {
+      return <PrivateHero />;
+    }
+
+    return original();
+  });
+}

resources/locale/en.yml

@@ -20,6 +20,9 @@ fof-byobu:
         confirm:
             make_public: Are you sure you want to remove the recipients and make this discussion visible to anyone who can view the assigned tag?
 
+        hero:
+            title: => fof-byobu.forum.nav.nav_item
+
         labels:
             recipients: "{count, plural, one {{count} Recipient} other {{count} Recipients}}"