From 561e22784a547c8aa92120e0972a9cc97ac21645 Mon Sep 17 00:00:00 2001
From: Sami Mazouz <sychocouldy@gmail.com>
Date: Fri, 14 Feb 2025 18:49:57 +0100
Subject: [PATCH] feat(messages): messages page extensible content

---
 .../js/src/forum/components/MessagesPage.tsx  | 55 ++++++++++++-------
 1 file changed, 36 insertions(+), 19 deletions(-)

diff --git a/extensions/messages/js/src/forum/components/MessagesPage.tsx b/extensions/messages/js/src/forum/components/MessagesPage.tsx
index f63160578..8c3ce0723 100644
--- a/extensions/messages/js/src/forum/components/MessagesPage.tsx
+++ b/extensions/messages/js/src/forum/components/MessagesPage.tsx
@@ -102,24 +102,7 @@ export default class MessagesPage<CustomAttrs extends IMessagesPageAttrs = IMess
               'MessagesPage-content--onDialog': this.currentDialogId,
             })}
           >
-            <div className="MessagesPage-sidebar" key="sidebar">
-              <div className="IndexPage-toolbar" key="toolbar">
-                <ul className="IndexPage-toolbar-view">{listItems(this.viewItems().toArray())}</ul>
-                <ul className="IndexPage-toolbar-action">{listItems(this.actionItems().toArray())}</ul>
-              </div>
-              <DialogList key="list" state={app.dialogs} activeDialog={this.selectedDialog()} />
-            </div>
-            {this.selectedDialog() ? (
-              <DialogSection
-                key="dialog"
-                dialog={this.selectedDialog()}
-                onback={() => {
-                  this.currentDialogId = null;
-                }}
-              />
-            ) : (
-              <LoadingIndicator key="loading" display="block" />
-            )}
+            {this.contentItems().toArray()}
           </div>
         )}
       </PageStructure>
@@ -141,6 +124,40 @@ export default class MessagesPage<CustomAttrs extends IMessagesPageAttrs = IMess
     );
   }
 
+  contentItems() {
+    const items = new ItemList<Mithril.Children>();
+
+    items.add(
+      'sidebar',
+      <div className="MessagesPage-sidebar" key="sidebar">
+        <div className="IndexPage-toolbar" key="toolbar">
+          <ul className="IndexPage-toolbar-view">{listItems(this.viewItems().toArray())}</ul>
+          <ul className="IndexPage-toolbar-action">{listItems(this.actionItems().toArray())}</ul>
+        </div>
+        <DialogList key="list" state={app.dialogs} activeDialog={this.selectedDialog()} />
+      </div>,
+      100
+    );
+
+    items.add(
+      'dialog',
+      this.selectedDialog() ? (
+        <DialogSection
+          key="dialog"
+          dialog={this.selectedDialog()}
+          onback={() => {
+            this.currentDialogId = null;
+          }}
+        />
+      ) : (
+        <LoadingIndicator key="loading" display="block" />
+      ),
+      80
+    );
+
+    return items;
+  }
+
   /**
    * Build an item list for the part of the toolbar which is concerned with how
    * the results are displayed. By default this is just a select box to change
@@ -181,7 +198,7 @@ export default class MessagesPage<CustomAttrs extends IMessagesPageAttrs = IMess
 
   /**
    * Build an item list for the part of the toolbar which is about taking action
-   * on the results. By default this is just a "mark all as read" button.
+   * on the results. By default, this is just a "mark all as read" button.
    */
   actionItems() {
     const items = new ItemList<Mithril.Children>();