feat: add chat widget areas, closes #12375

install/package.json

@@ -103,7 +103,7 @@
         "nodebb-plugin-ntfy": "1.7.3",
         "nodebb-plugin-spam-be-gone": "2.2.1",
         "nodebb-rewards-essentials": "1.0.0",
-        "nodebb-theme-harmony": "1.2.31",
+        "nodebb-theme-harmony": "1.2.32",
         "nodebb-theme-lavender": "7.1.7",
         "nodebb-theme-peace": "2.2.1",
         "nodebb-theme-persona": "13.3.10",

src/views/chats.tpl

@@ -1,3 +1,5 @@
+<div class="row h-100">
+	<div class="h-100 {{{if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
 		<div class="chats-full d-flex gap-1 h-100 mt-3 mt-md-0 py-md-3">
 			<div component="chat/nav-wrapper" class="flex-shrink-0 d-flex flex-column h-100 gap-1" data-loaded="{{{ if roomId }}}1{{{ else }}}0{{{ end }}}">
 
@@ -52,3 +54,10 @@
 			</div>
 			<div class="imagedrop"><div>[[topic:composer.drag-and-drop-images]]</div></div>
 		</div>
+	</div>
+	<div data-widget-area="sidebar" class="h-100 col-lg-3 col-sm-12 {{{ if !widgets.sidebar.length }}}hidden{{{ end }}}">
+		{{{ each widgets.sidebar }}}
+		{{widgets.sidebar.html}}
+		{{{ end }}}
+	</div>
+</div>

src/widgets/index.js

@@ -196,6 +196,9 @@ widgets.getAvailableAreas = async function () {
 
 		{ name: 'Group Page (Left)', template: 'groups/details.tpl', location: 'left' },
 		{ name: 'Group Page (Right)', template: 'groups/details.tpl', location: 'right' },
+
+		{ name: 'Chat Header', template: 'chats.tpl', location: 'header' },
+		{ name: 'Chat Sidebar', template: 'chats.tpl', location: 'sidebar' },
 	];
 
 	return await plugins.hooks.fire('filter:widgets.getAreas', defaultAreas);