From 53b3c5d6692ee94642fff27a9235befedb33ced9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Wed, 28 Feb 2024 11:41:18 -0500
Subject: [PATCH] feat: add chat widget areas, closes #12375

---
 install/package.json |  2 +-
 src/views/chats.tpl  | 95 ++++++++++++++++++++++++--------------------
 src/widgets/index.js |  3 ++
 3 files changed, 56 insertions(+), 44 deletions(-)

diff --git a/install/package.json b/install/package.json
index 6be29ac657..5cb332cc70 100644
--- a/install/package.json
+++ b/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",
diff --git a/src/views/chats.tpl b/src/views/chats.tpl
index 23db9e49fc..06481d7642 100644
--- a/src/views/chats.tpl
+++ b/src/views/chats.tpl
@@ -1,54 +1,63 @@
-<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 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>
-			<button component="chat/create" class="btn btn-primary btn-sm w-100">[[modules:chat.create-room]]</button>
-		</div>
+				<div>
+					<button component="chat/create" class="btn btn-primary btn-sm w-100">[[modules:chat.create-room]]</button>
+				</div>
 
-		{{{ if publicRooms.length }}}
-		<hr class="my-1">
+				{{{ if publicRooms.length }}}
+				<hr class="my-1">
 
-		<div class="d-flex flex-column gap-1">
-			<div class="d-flex gap-1 align-items-center justify-content-between justify-content-lg-start">
-				<button class="btn-ghost-sm p-1 order-1 order-lg-0" data-bs-toggle="collapse" data-bs-target="#public-rooms"
-				onclick="$(this).find('i').toggleClass('fa-rotate-180');"><i class="fa fa-fw fa-chevron-up" style="transition: 0.25s ease;"></i></button>
-				<label class="text-sm text-muted lh-1">[[modules:chat.public-rooms, {publicRooms.length}]]</label>
-			</div>
-			<div id="public-rooms" component="chat/public" class="collapse show">
-				<div class="d-flex gap-1 flex-column">
-					{{{ each publicRooms }}}
-					<div component="chat/public/room" class="btn-ghost-sm ff-sans justify-content-between hover-parent {{{ if ./unread}}}unread{{{ end }}}" data-roomid="{./roomId}">
-						<div class="d-flex gap-1 align-items-center"><i class="fa {./icon} text-muted"></i> {./roomName} <div component="chat/public/room/unread/count" data-count="{./unreadCount}" class="badge border bg-light text-primary {{{ if !./unreadCount }}}hidden{{{ end }}}">{./unreadCountText}</div></div>
-						<div>
-							<div component="chat/public/room/sort/handle" class="text-muted {{{ if isAdmin }}}hover-d-block{{{ else }}}d-none{{{ end }}}" style="cursor:grab;"><i class="fa fa-bars"></i></div>
+				<div class="d-flex flex-column gap-1">
+					<div class="d-flex gap-1 align-items-center justify-content-between justify-content-lg-start">
+						<button class="btn-ghost-sm p-1 order-1 order-lg-0" data-bs-toggle="collapse" data-bs-target="#public-rooms"
+						onclick="$(this).find('i').toggleClass('fa-rotate-180');"><i class="fa fa-fw fa-chevron-up" style="transition: 0.25s ease;"></i></button>
+						<label class="text-sm text-muted lh-1">[[modules:chat.public-rooms, {publicRooms.length}]]</label>
+					</div>
+					<div id="public-rooms" component="chat/public" class="collapse show">
+						<div class="d-flex gap-1 flex-column">
+							{{{ each publicRooms }}}
+							<div component="chat/public/room" class="btn-ghost-sm ff-sans justify-content-between hover-parent {{{ if ./unread}}}unread{{{ end }}}" data-roomid="{./roomId}">
+								<div class="d-flex gap-1 align-items-center"><i class="fa {./icon} text-muted"></i> {./roomName} <div component="chat/public/room/unread/count" data-count="{./unreadCount}" class="badge border bg-light text-primary {{{ if !./unreadCount }}}hidden{{{ end }}}">{./unreadCountText}</div></div>
+								<div>
+									<div component="chat/public/room/sort/handle" class="text-muted {{{ if isAdmin }}}hover-d-block{{{ else }}}d-none{{{ end }}}" style="cursor:grab;"><i class="fa fa-bars"></i></div>
+								</div>
+							</div>
+							{{{ end }}}
 						</div>
 					</div>
+				</div>
+				{{{ end }}}
+
+				<hr class="my-1">
+
+				<div class="d-flex flex-column gap-1 overflow-auto">
+					{{{ if publicRooms.length }}}
+					<div class="d-flex gap-1 align-items-center justify-content-between justify-content-lg-start">
+						<button class="btn-ghost-sm p-1 order-1 order-lg-0" data-bs-toggle="collapse" data-bs-target="#private-rooms"
+						onclick="$(this).find('i').toggleClass('fa-rotate-180')"><i class="fa fa-fw fa-chevron-up" style="transition: 0.25s ease;"></i></button>
+						<label class="text-sm text-muted lh-1">[[modules:chat.private-rooms, {privateRoomCount}]]</label>
+					</div>
 					{{{ 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 }}}
+						<!-- IMPORT partials/chats/recent_room.tpl -->
+						{{{ end }}}
+					</div>
 				</div>
 			</div>
+			<div component="chat/main-wrapper" class="flex-grow-1 ms-md-2 ps-md-2 border-1 border-start-md h-100" style="min-width: 0;" data-roomid="{roomId}">
+				<!-- 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 }}}
-
-		<hr class="my-1">
-
-		<div class="d-flex flex-column gap-1 overflow-auto">
-			{{{ if publicRooms.length }}}
-			<div class="d-flex gap-1 align-items-center justify-content-between justify-content-lg-start">
-				<button class="btn-ghost-sm p-1 order-1 order-lg-0" data-bs-toggle="collapse" data-bs-target="#private-rooms"
-				onclick="$(this).find('i').toggleClass('fa-rotate-180')"><i class="fa fa-fw fa-chevron-up" style="transition: 0.25s ease;"></i></button>
-				<label class="text-sm text-muted lh-1">[[modules:chat.private-rooms, {privateRoomCount}]]</label>
-			</div>
-			{{{ 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}}}
-				<!-- IMPORT partials/chats/recent_room.tpl -->
-				{{{end}}}
-			</div>
-		</div>
 	</div>
-	<div component="chat/main-wrapper" class="flex-grow-1 ms-md-2 ps-md-2 border-1 border-start-md h-100" style="min-width: 0;" data-roomid="{roomId}">
-		<!-- IMPORT partials/chats/message-window.tpl -->
-	</div>
-	<div class="imagedrop"><div>[[topic:composer.drag-and-drop-images]]</div></div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/widgets/index.js b/src/widgets/index.js
index 4302ac74c0..9f31e60805 100644
--- a/src/widgets/index.js
+++ b/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);