feat: make page structure customizable across different pages

extensions/subscriptions/js/src/forum/addSubscriptionFilter.js

@@ -2,11 +2,12 @@ import app from 'flarum/forum/app';
 import { extend } from 'flarum/common/extend';
 import LinkButton from 'flarum/common/components/LinkButton';
 import IndexPage from 'flarum/forum/components/IndexPage';
+import IndexSidebar from 'flarum/forum/components/IndexSidebar';
 import DiscussionListState from 'flarum/forum/states/DiscussionListState';
 import GlobalSearchState from 'flarum/forum/states/GlobalSearchState';
 
 export default function addSubscriptionFilter() {
-  extend(IndexPage.prototype, 'navItems', function (items) {
+  extend(IndexSidebar.prototype, 'navItems', function (items) {
     if (app.session.user) {
       const params = app.search.stickyParams();
 

extensions/tags/js/src/@types/shims.d.ts

@@ -20,11 +20,11 @@ declare module 'flarum/common/models/Discussion' {
   }
 }
 
-declare module 'flarum/forum/components/IndexPage' {
-  export default interface IndexPage {
+declare module 'flarum/forum/ForumApplication' {
+  export default interface ForumApplication {
     currentActiveTag?: Tag;
     currentTagLoading?: boolean;
-    currentTag: () => Tag | undefined;
+    currentTag: (reload?: boolean) => Tag | undefined;
   }
 }
 

extensions/tags/js/src/forum/addTagComposer.js

@@ -1,14 +1,15 @@
+import app from 'flarum/forum/app';
 import { extend, override } from 'flarum/common/extend';
-import IndexPage from 'flarum/forum/components/IndexPage';
+import IndexSidebar from 'flarum/forum/components/IndexSidebar';
 import classList from 'flarum/common/utils/classList';
 
 import tagsLabel from '../common/helpers/tagsLabel';
 import getSelectableTags from './utils/getSelectableTags';
 
 export default function addTagComposer() {
-  extend(IndexPage.prototype, 'newDiscussionAction', function (promise) {
+  extend(IndexSidebar.prototype, 'newDiscussionAction', function (promise) {
     // From `addTagFilter
-    const tag = this.currentTag();
+    const tag = app.currentTag();
 
     if (tag) {
       const parent = tag.parent();

extensions/tags/js/src/forum/addTagFilter.tsx

@@ -2,24 +2,25 @@ import app from 'flarum/forum/app';
 import type Mithril from 'mithril';
 import { extend, override } from 'flarum/common/extend';
 import IndexPage from 'flarum/forum/components/IndexPage';
+import IndexSidebar from 'flarum/forum/components/IndexSidebar';
 import DiscussionListState from 'flarum/forum/states/DiscussionListState';
 import GlobalSearchState from 'flarum/forum/states/GlobalSearchState';
 import classList from 'flarum/common/utils/classList';
 import textContrastClass from 'flarum/common/helpers/textContrastClass';
+import type { ComponentAttrs } from 'flarum/common/Component';
 
 import TagHero from './components/TagHero';
-import Tag from '../common/models/Tag';
-import { ComponentAttrs } from 'flarum/common/Component';
+import type Tag from '../common/models/Tag';
 
 const findTag = (slug: string) => app.store.all<Tag>('tags').find((tag) => tag.slug().localeCompare(slug, undefined, { sensitivity: 'base' }) === 0);
 
 export default function addTagFilter() {
-  IndexPage.prototype.currentTag = function () {
-    if (this.currentActiveTag) {
+  app.currentTag = function (reload?: boolean) {
+    if (this.currentActiveTag && !reload) {
       return this.currentActiveTag;
     }
 
-    const slug = app.search.params().tags;
+    const slug = this.search.params().tags;
     let tag = null;
 
     if (slug) {
@@ -37,7 +38,7 @@ export default function addTagFilter() {
       // a child tag page, then either:
       //    - We loaded in that child tag (and its siblings) in the API document
       //    - We first navigated to the current tag's parent, which would have loaded in the current tag's siblings.
-      app.store
+      this.store
         .find('tags', slug, { include: 'children,children.parent,parent,state' })
         .then(() => {
           this.currentActiveTag = findTag(slug);
@@ -54,26 +55,32 @@ export default function addTagFilter() {
       return this.currentActiveTag;
     }
 
+    this.currentActiveTag = undefined;
+
     return;
   };
 
+  extend(IndexPage.prototype, 'view', function (vdom: Mithril.Vnode<ComponentAttrs, {}>) {
+    app.currentTag(true);
+  });
+
   // If currently viewing a tag, insert a tag hero at the top of the view.
   override(IndexPage.prototype, 'hero', function (original) {
-    const tag = this.currentTag();
+    const tag = app.currentTag();
 
     if (tag) return <TagHero model={tag} />;
 
     return original();
   });
 
   extend(IndexPage.prototype, 'view', function (vdom: Mithril.Vnode<ComponentAttrs, {}>) {
-    const tag = this.currentTag();
+    const tag = app.currentTag();
 
     if (tag) vdom.attrs.className += ' IndexPage--tag' + tag.id();
   });
 
   extend(IndexPage.prototype, 'setTitle', function () {
-    const tag = this.currentTag();
+    const tag = app.currentTag();
 
     if (tag) {
       app.setTitle(tag.name());
@@ -82,8 +89,8 @@ export default function addTagFilter() {
 
   // If currently viewing a tag, restyle the 'new discussion' button to use
   // the tag's color, and disable if the user isn't allowed to edit.
-  extend(IndexPage.prototype, 'sidebarItems', function (items) {
-    const tag = this.currentTag();
+  extend(IndexSidebar.prototype, 'items', function (items) {
+    const tag = app.currentTag();
 
     if (tag) {
       const color = tag.color();

extensions/tags/js/src/forum/addTagList.js

@@ -1,17 +1,17 @@
+import app from 'flarum/forum/app';
 import { extend } from 'flarum/common/extend';
-import IndexPage from 'flarum/forum/components/IndexPage';
+import IndexSidebar from 'flarum/forum/components/IndexSidebar';
 import Separator from 'flarum/common/components/Separator';
 import LinkButton from 'flarum/common/components/LinkButton';
 
 import TagLinkButton from './components/TagLinkButton';
 import TagsPage from './components/TagsPage';
-import app from 'flarum/forum/app';
 import sortTags from '../common/utils/sortTags';
 
 export default function addTagList() {
   // Add a link to the tags page, as well as a list of all the tags,
   // to the index page's sidebar.
-  extend(IndexPage.prototype, 'navItems', function (items) {
+  extend(IndexSidebar.prototype, 'navItems', function (items) {
     items.add(
       'tags',
       <LinkButton icon="fas fa-th-large" href={app.route('tags')}>
@@ -26,7 +26,7 @@ export default function addTagList() {
 
     const params = app.search.stickyParams();
     const tags = app.store.all('tags');
-    const currentTag = this.currentTag();
+    const currentTag = app.currentTag();
 
     const addTag = (tag) => {
       let active = currentTag === tag;

extensions/tags/js/src/forum/components/TagsPage.js

@@ -1,12 +1,15 @@
+import app from 'flarum/forum/app';
 import Page from 'flarum/common/components/Page';
-import IndexPage from 'flarum/forum/components/IndexPage';
+import PageStructure from 'flarum/forum/components/PageStructure';
+import WelcomeHero from 'flarum/forum/components/WelcomeHero';
+import IndexSidebar from 'flarum/forum/components/IndexSidebar';
 import Link from 'flarum/common/components/Link';
 import LoadingIndicator from 'flarum/common/components/LoadingIndicator';
-import listItems from 'flarum/common/helpers/listItems';
 import ItemList from 'flarum/common/utils/ItemList';
 import humanTime from 'flarum/common/helpers/humanTime';
 import textContrastClass from 'flarum/common/helpers/textContrastClass';
 import classList from 'flarum/common/utils/classList';
+import extractText from 'flarum/common/utils/extractText';
 
 import tagIcon from '../../common/helpers/tagIcon';
 import tagLabel from '../../common/helpers/tagLabel';
@@ -16,7 +19,7 @@ export default class TagsPage extends Page {
   oninit(vnode) {
     super.oninit(vnode);
 
-    app.history.push('tags', app.translator.trans('flarum-tags.forum.header.back_to_tags_tooltip'));
+    app.history.push('tags', extractText(app.translator.trans('flarum-tags.forum.header.back_to_tags_tooltip')));
 
     this.tags = [];
 
@@ -46,29 +49,11 @@ export default class TagsPage extends Page {
   }
 
   view() {
-    return <div className="TagsPage">{this.pageContent().toArray()}</div>;
-  }
-
-  pageContent() {
-    const items = new ItemList();
-
-    items.add('hero', this.hero(), 100);
-    items.add('main', <div className="container">{this.mainContent().toArray()}</div>, 10);
-
-    return items;
-  }
-
-  mainContent() {
-    const items = new ItemList();
-
-    items.add('sidebar', this.sidebar(), 100);
-    items.add('content', this.content(), 10);
-
-    return items;
-  }
-
-  content() {
-    return <div className="TagsPage-content sideNavOffset">{this.contentItems().toArray()}</div>;
+    return (
+      <PageStructure className="TagsPage" hero={this.hero.bind(this)} sidebar={this.sidebar.bind(this)}>
+        {this.contentItems().toArray()}
+      </PageStructure>
+    );
   }
 
   contentItems() {
@@ -91,19 +76,11 @@ export default class TagsPage extends Page {
   }
 
   hero() {
-    return IndexPage.prototype.hero();
+    return <WelcomeHero />;
   }
 
   sidebar() {
-    return (
-      <nav className="TagsPage-nav IndexPage-nav sideNav">
-        <ul>{listItems(this.sidebarItems().toArray())}</ul>
-      </nav>
-    );
-  }
-
-  sidebarItems() {
-    return IndexPage.prototype.sidebarItems();
+    return <IndexSidebar />;
   }
 
   tagTileListView(pinned) {

extensions/tags/less/forum.less

@@ -72,11 +72,13 @@
 }
 @media @desktop-up {
   .TagsPage {
+    --sidebar-width: 100%;
+    --gap: 30px;
+
     .sideNav {
       .sideNav--horizontal();
-      float: none;
       width: auto;
-      padding-top: 0;
+      padding: 0;
 
       &:after {
         display: none;
@@ -86,8 +88,13 @@
         width: 190px;
       }
     }
-    .sideNavOffset {
-      margin: 15px 0 0;
+
+    .Page-container {
+      flex-direction: column;
+    }
+
+    .Page-content {
+      margin-top: 0;
     }
   }
 }

framework/core/js/src/forum/components/DiscussionPage.tsx

@@ -13,6 +13,7 @@ import PostStreamState from '../states/PostStreamState';
 import Discussion from '../../common/models/Discussion';
 import Post from '../../common/models/Post';
 import { ApiResponseSingle } from '../../common/Store';
+import PageStructure from './PageStructure';
 
 export interface IDiscussionPageAttrs extends IPageAttrs {
   id: string;
@@ -84,24 +85,22 @@ export default class DiscussionPage<CustomAttrs extends IDiscussionPageAttrs = I
 
   view() {
     return (
-      <div className="DiscussionPage">
-        <DiscussionListPane state={app.discussions} />
-        <div className="DiscussionPage-discussion">{!this.loading ? this.pageContent().toArray() : this.loadingItems().toArray()}</div>
-      </div>
+      <PageStructure
+        className="DiscussionPage"
+        loading={this.loading}
+        hero={this.hero.bind(this)}
+        sidebar={this.sidebar.bind(this)}
+        pane={() => <DiscussionListPane state={app.discussions} />}
+      >
+        {this.loading || (
+          <div className="DiscussionPage-stream">
+            <this.PostStream discussion={this.discussion} stream={this.stream} onPositionChange={this.positionChanged.bind(this)} />
+          </div>
+        )}
+      </PageStructure>
     );
   }
 
-  /**
-   * List of components shown while the discussion is loading.
-   */
-  loadingItems(): ItemList<Mithril.Children> {
-    const items = new ItemList<Mithril.Children>();
-
-    items.add('spinner', <LoadingIndicator />, 100);
-
-    return items;
-  }
-
   /**
    * Function that renders the `sidebarItems` ItemList.
    */
@@ -120,37 +119,6 @@ export default class DiscussionPage<CustomAttrs extends IDiscussionPageAttrs = I
     return <DiscussionHero discussion={this.discussion} />;
   }
 
-  /**
-   * List of items rendered as the main page content.
-   */
-  pageContent(): ItemList<Mithril.Children> {
-    const items = new ItemList<Mithril.Children>();
-
-    items.add('hero', this.hero(), 100);
-    items.add('main', <div className="container">{this.mainContent().toArray()}</div>, 10);
-
-    return items;
-  }
-
-  /**
-   * List of items rendered inside the main page content container.
-   */
-  mainContent(): ItemList<Mithril.Children> {
-    const items = new ItemList<Mithril.Children>();
-
-    items.add('sidebar', this.sidebar(), 100);
-
-    items.add(
-      'poststream',
-      <div className="DiscussionPage-stream">
-        <this.PostStream discussion={this.discussion} stream={this.stream} onPositionChange={this.positionChanged.bind(this)} />
-      </div>,
-      10
-    );
-
-    return items;
-  }
-
   /**
    * Load the discussion from the API or use the preloaded one.
    */