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,4 +1,6 @@
-<div class="chats-full d-flex gap-1 h-100 mt-3 mt-md-0 py-md-3">
+<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 }}}">
 
 				<div>
@@ -41,9 +43,9 @@
 					{{{ end }}}
 
 					<div id="private-rooms" component="chat/recent" class="chats-list overflow-auto mb-0 pe-1 pb-5 pb-lg-0 collapse show" data-nextstart="{nextStart}">
-				{{{each rooms}}}
+						{{{ each rooms }}}
 						<!-- IMPORT partials/chats/recent_room.tpl -->
-				{{{end}}}
+						{{{ end }}}
 					</div>
 				</div>
 			</div>
@@ -51,4 +53,11 @@
 				<!-- IMPORT partials/chats/message-window.tpl -->
 			</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);