From 9550cfe1dec24b2a9ef1eac68b9a81c306266a2c Mon Sep 17 00:00:00 2001
From: IanM <ian@morland.me>
Date: Fri, 14 Feb 2025 16:32:37 +0000
Subject: [PATCH] feat: private discussion indexpage hero

---
 js/src/forum/components/PrivateHero.tsx      | 57 ++++++++++++++++++++
 js/src/forum/components/index.tsx            |  7 +++
 js/src/forum/index.ts                        |  1 +
 js/src/forum/pages/PrivateDiscussionsPage.js | 15 ++++--
 resources/locale/en.yml                      |  3 ++
 5 files changed, 80 insertions(+), 3 deletions(-)
 create mode 100644 js/src/forum/components/PrivateHero.tsx
 create mode 100644 js/src/forum/components/index.tsx

diff --git a/js/src/forum/components/PrivateHero.tsx b/js/src/forum/components/PrivateHero.tsx
new file mode 100644
index 0000000..2adc9db
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/js/src/forum/components/index.tsx b/js/src/forum/components/index.tsx
new file mode 100644
index 0000000..761a272
--- /dev/null
+++ b/js/src/forum/components/index.tsx
@@ -0,0 +1,7 @@
+import PrivateComposerPage from './PrivateComposerPage';
+import PrivateHero from './PrivateHero';
+
+export const components = {
+  PrivateHero,
+  PrivateComposerPage,
+};
diff --git a/js/src/forum/index.ts b/js/src/forum/index.ts
index 300dfe0..ff3cfc3 100644
--- a/js/src/forum/index.ts
+++ b/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';
 
diff --git a/js/src/forum/pages/PrivateDiscussionsPage.js b/js/src/forum/pages/PrivateDiscussionsPage.js
index 800e0cd..d4e87cc 100644
--- a/js/src/forum/pages/PrivateDiscussionsPage.js
+++ b/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();
+  });
+}
diff --git a/resources/locale/en.yml b/resources/locale/en.yml
index 1c7391e..b0818b3 100644
--- a/resources/locale/en.yml
+++ b/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}}"