nodebb-theme-persona 13.2.50 → 13.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-persona",
-  "version": "13.2.50",
+  "version": "13.3.0",
   "nbbpm": {
     "compatibility": "^3.5.0"
   },

package/scss/chats.scss

@@ -1,542 +1,14 @@
-// Make chats page edge-to-edge
-.page-user-chats {
-	#content.container {
-		@include make-container();
-		max-width: unset;
-		padding: 0;
-	}
-
-	.navbar {
-		margin-bottom: 0;
-	}
-
-	#panel {
-		padding-bottom: 0px;
-	}
-
-	[data-widget-area="header"], [data-widget-area="footer"] {
-		display: none;
-	}
-}
-
 body.page-user-chats {
-	$calcHeight: calc(100vh - var(--panel-offset) - $spacer);
-	overflow: hidden;
-	height: 100%;
-	[data-widget-area="footer"] {
-		display: none;
-	}
+	$calcHeight: calc(100vh - var(--panel-offset));
+
 	> #panel {
 		height: $calcHeight;
 		> .container {
 			height: 100%;
 		}
 	}
-}
-
-[component="chat/user/list"] [data-uid] {
-	[component="chat/user/list/username"] {
-		color: $text-muted;
-	}
-	&.online {
-		[component="chat/user/list/username"] {
-			color: initial;
-			font-weight: $font-weight-semibold;
-		}
-	}
-}
-
-/* Styles common to both full chat and chat modal */
-.chats-full, .chat-modal {
-	display: flex;
-	flex-wrap: nowrap;
-
-	[component="chat/nav-wrapper"] {
-		width: 300px;
-		[component="chat/public/room"].unread {
-			font-weight: $font-weight-bold;
-		}
-	}
-
-	[component="chat/messages"] {
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-
-		.chat-content {
-			flex: 1;
-		}
-	}
-
-	[component="chat/header"] {
-		.close {
-			margin-left: 0.5em;
-		}
-	}
-
-	.modal-header .dropdown {
-		.avatar {
-			margin-right: 0.5em;
-		}
-	}
-
-	[component="chat/composer"] {
-		display: flex;
-		position: relative;
-
-		[component="chat/input"] {
-			flex: 1;
-			box-shadow: none;
-			border: 0;
-			border: 1px solid $gray-200;
-			border-radius: 0;
-		}
-	}
-}
-
-.chats-page {
-	margin-top: 10px;
-}
-
-.chats-list {
-	padding: 0;
-	overflow-x: hidden;
-	overflow-y: auto;
-	border-top: 1px solid $gray-200;
-
-	> li.no_active {
-		height: initial;
-		padding-bottom: 0.5rem;
-		text-align: center;
-	}
-
-	> li {
-		height: 80px;
-		display: flex;
-		position: relative;
-		clear: both;
-		@include pointer;
-
-		border-left: 1px solid;
-		border-right: 1px solid;
-		border-bottom: 1px solid;
-		border-color: $gray-200;
-
-		&.typing {
-			.username:after {
-				visibility: visible;
-			}
-		}
-
-		&.unread {
-			background: lighten($primary, 35%);
-			border-bottom: 0;
-		}
-		&.active {
-			background-color: $light;
-		}
-
-		.teaser-content {
-			font-size: 13px;
-			opacity: 0.8;
-		}
-
-		.notification-chat-content {
-			.room-name {
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				display: block;
-				[component="chat/title"] {
-					overflow: hidden;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-					max-width: 350px;
-					display: inline-block;
-				}
-			}
-		}
-
-		&.bg-primary {
-			background: $primary;
-			border-bottom: 0;
-		}
-
-		.username {
-			font-size: 14px;
-
-			&:after {
-				display: inline-block;
-				font-family: "FontAwesome";
-				content: "\f11c";
-				margin-left: 0.5em;
-				visibility: hidden;
-			}
-		}
-
-		.teaser-timestamp {
-			font-size: 10px;
-			margin-top: .5rem;
-			margin-right: .5rem;
-		}
-
-		a {
-			@include text-ellipsis;
-		}
-
-		p {
-			margin: 0;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			height: 20px;
-		}
-
-		.status {
-			position: absolute;
-			left: 50px;
-			font-size: 20px;
-			top: 10px;
-		}
-
-		.leave {
-			opacity: 0.5;
-			&:hover {
-				opacity: 1.0;
-			}
-		}
-
-		.members {
-			padding-left: 1rem;
-			margin-bottom: 0.5rem;
-			z-index: 1;
-			position: absolute;
-			bottom: 2px;
-			left: 53px;
-
-			li {
-				display: inline-block;
-				width: 16px;
-				padding: 0;
-				margin: 0;
-
-				&:first-child {
-					display: none;
-				}
-
-				.avatar {
-					border: 2px solid white;
-					vertical-align: bottom;
-				}
-
-				img {
-					margin-top: -4px;
-				}
-			}
-		}
-
-		.main-avatar {
-			.avatar {
-				$size: 80px;
-				@include user-icon-style($size, calc($size * 0.6), 0);
-			}
-		}
-	}
-}
-
-.chat-modal {
-	z-index: $zindex-modal;
-}
-
-/* Chat modal specific styles */
-.chat-modal {
-	.modal-header {
-		padding: 0.25em 1em;
-
-		h4 {
-			font-size: 1.5rem;
-			font-weight: bold;
-			min-height: 20px;
-
-			i {
-				font-size: 14px;
-				vertical-align: center;
-
-				&.fa-keyboard-o {
-					animation: topic-reply-pulse 2s ease-in infinite;
-				}
-			}
-		}
-
-		.close {
-			padding: 0.5em;
-		}
-	}
-
-	.modal-body {
-		display: flex;
-		flex-direction: column;
-		height: 400px;
-
-		.chat-content {
-			flex: 1;
-		}
-	}
-	[component="chat/user/list/btn"], [component="chat/pinned/messages/btn"] {
-		display: none!important;
-	}
-}
-
-.expanded-chat, .chat-modal {
-	.chat-content {
-		.message-body {
-			@include fix-lists;
-		}
-		overflow-y: auto;
-		overflow-x: hidden;
-		resize: none;
-		word-wrap: break-word;
-		margin: 0;
-		padding: 0;
-
-		li.chat-message {
-			position: relative;
-			list-style-type: none;
-			transition: opacity .5s ease;
-
-			&:first-child {
-				padding-top: 1.428rem;
-			}
-
-			&:last-child {
-				margin-bottom: 1.428rem;
-			}
-
-			&[data-break="true"] {
-				padding-top: 1rem;
-				margin-top: 1rem;
-				border-top: 1px solid $gray-200;
-			}
-
-			&[data-break="true"]:first-child {
-				border-top: 0;
-				margin-top: -1.5px;
-			}
-
-			&.deleted {
-				.message-body-wrapper .controls {
-					[data-action] {
-						display: none;
-					}
-
-					[data-action="restore"] {
-						display: block;
-					}
-				}
-
-				.message-body {
-					opacity: 0.3;
-				}
-			}
-			&.pinned {
-				.message-body-wrapper .controls {
-					[data-action="pin"] {
-						display: none;
-					}
-
-					[data-action="unpin"] {
-						display: block;
-					}
-				}
-			}
-
-			.chat-user-image {
-				@include user-icon-style(32px, 1.6rem, 50%);
-				float: left;
-			}
-
-			.chat-user {
-				display: inline-block;
-				margin-left: 13px;
-
-				a {
-					color: $body-color;
-				}
-			}
-
-			.chat-timestamp {
-				display: inline-block;
-				user-select: none;
-			}
-
-			.chat-edited {
-				margin-left: 5px;
-				margin-top: 2px;
-			}
-
-			&[data-self="0"] + [data-self="0"], &[data-self="1"] + [data-self="1"] {
-				&[data-break="false"] {
-					.message-header {
-						display: none;
-					}
-				}
-			}
-
-			.message-body-wrapper {
-				margin-left: 45px;
-
-				.message-body {
-					padding: 7px 10px;
-					overflow-y: hidden;
-
-					p {
-						margin: 7px 0 0 0;
-						line-height: 2rem;
-					}
-
-					p:first-child {
-						margin: 0;
-					}
-				}
-
-				.controls {
-					display: none;
-					&:has([aria-expanded="true"]) {
-						display: flex;
-					}
-					position: absolute;
-					bottom: 7px;
-					right: 14px;
-					border: 1px solid $gray-200;
-					box-shadow: 0 6px 12px rgba(0,0,0,.175);
-
-					[data-action="restore"], [data-action="unpin"] {
-						display: none;
-					}
-				}
-
-				&:hover {
-					.message-body {
-						color: $dropdown-link-hover-color;
-						background: $dropdown-link-hover-bg;
-					}
-
-					.controls {
-						display: flex;
-					}
-				}
-			}
-		}
-
-		li.system-message {
-			list-style-type: none;
-			text-align: center;
-			color: $gray-600;
-
-			&::before, &::after {
-				display: inline-block;
-				width: 10%;
-				content: '';
-				border-top: 1px solid $gray-200;
-				position: relative;
-				top: -0.3rem;
-				margin: 0 2rem;
-			}
-		}
-	}
-
-	.user-typing {
-		color: $gray-600;
-		margin: 1.428rem 0;
-	}
-
-	.selected[data-since] {
-		font-weight: bold;
-	}
-
-	.modal-dialog {
-		margin: 0 auto;
-	}
-
-	textarea {
-		resize: none;
-	}
-
-	.since-bar {
-		display: block;
-		padding: 1rem 0;
-		text-align: center;
-	}
-
-	.controlsToggle {
-		margin-right: 10px;
-	}
-}
-
-.expanded-chat {
-	h1 {
-		margin: 0px;
-		padding-bottom: 20px;
-	}
-
-	.chat-content {
-		padding-top: 10px;
-	}
-
-	.input-group {
-		z-index: 1;
-	}
-}
-
-[component="chat/manage-modal"] {
-	.list-group-item .avatar {
-		margin-right: 1em;
-	}
-
-	div+span {
-		margin: -4px;
-	}
-}
-
-/* Mobile handling of chat page */
-@include media-breakpoint-down(md) {
-	.page-user-chats {
-		padding-bottom: 0!important;
-		> #panel {
-			height: 100%!important;
-			.container {
-				height: 100%!important;
-			}
-		}
-		[component="chat/nav-wrapper"] {
-			width: 100%;
-		}
-
-		&.chat-loaded .navbar {
-			display: none;
-		}
-
-		[component="chat/nav-wrapper"][data-loaded="1"] {
-			display: none!important;
-		}
-
-		[component="chat/nav-wrapper"][data-loaded="0"] + [component="chat/main-wrapper"] {
-			display: none!important;
-		}
-
-		[component="chat/messages"] {
-			width: calc(100vw);
-		}
-	}
-
-	[data-action="pop-out"] {
-		display: none;
-	}
-}
-
-/* Mobile handling of chat modal */
-@include media-breakpoint-down(sm) {
-	.chat-modal {
-		z-index: $zindex-popover + 10;
+	#content.container {
+		padding-top: 0 !important;
+		padding-bottom: 0 !important;
 	}
 }

package/scss/header.scss

@@ -180,15 +180,6 @@
 			color: $primary;
 		}
 	}
-
-	.notif-dropdown-link {
-		border-top: 1px solid rgba(163, 163, 163, 0.5);
-		a {
-			text-align: center;
-			padding: 0.5em 0.5em;
-			font-weight: 600;
-		}
-	}
 }
 
 .breadcrumb {

package/scss/overrides.scss

@@ -1,9 +1,5 @@
 // only overrides to bs5 variables here
 
-// TODO: decide if we should readd this, persona modified bootstrap to increase padding
-// $input-btn-padding-y:         .625rem !default;
-// $input-btn-padding-x:         1rem !default;
-
 $navbar-nav-link-padding-x: 0.875rem!default;
 
 // persona colors

package/templates/partials/header/chats.tpl

@@ -1,7 +1,7 @@
 <a class="nav-link" data-bs-toggle="dropdown" href="{relative_path}/user/{user.userslug}/chats" id="chat_dropdown" component="chat/dropdown" data-ajaxify="false" role="button">
 	<i component="chat/icon" class="fa {{{ if unreadCount.chat}}}fa-comment{{{ else }}}fa-comment-o{{{ end }}} fa-fw unread-count" data-content="{unreadCount.chat}"></i> <span class="d-inline d-sm-none">[[global:header.chats]]</span>
 </a>
-<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="chat_dropdown">
+<ul class="dropdown-menu dropdown-menu-end p-1" aria-labelledby="chat_dropdown" style="min-width: 300px; width: 300px;">
 	<li>
 		<ul component="chat/list" class="chat-list chats-list">
 			<li class="loading-text">
@@ -9,10 +9,11 @@
 			</li>
 		</ul>
 	</li>
-	<li class="notif-dropdown-link">
-		<div class="btn-group d-flex justify-content-center">
-			<a class="btn btn-light mark-all-read" href="#" component="chats/mark-all-read"><i class="fa fa-check-double"></i> [[modules:chat.mark-all-read]]</a>
-			<a class="btn btn-light" href="{relative_path}/user/{user.userslug}/chats"><i class="fa fa-comments"></i> [[modules:chat.see-all]]</a>
+	<li class="dropdown-divider"></li>
+	<li>
+		<div class="d-flex justify-content-center gap-1 flex-wrap">
+			<a class="btn btn-light mark-all-read flex-fill text-nowrap" href="#" component="chats/mark-all-read"><i class="fa fa-check-double"></i> [[modules:chat.mark-all-read]]</a>
+			<a class="btn btn-primary flex-fill text-nowrap" href="{relative_path}/user/{user.userslug}/chats"><i class="fa fa-comments"></i> [[modules:chat.see-all]]</a>
 		</div>
 	</li>
 </ul>

package/templates/partials/header/notifications.tpl

@@ -1,7 +1,7 @@
 <a href="{relative_path}/notifications" class="nav-link" data-bs-toggle="dropdown" id="notif_dropdown" data-ajaxify="false" role="button">
 	<i component="notifications/icon" class="fa fa-fw {{{ if unreadCount.notification}}}fa-bell{{{ else }}}fa-bell-o{{{ end }}} unread-count" data-content="{unreadCount.notification}"></i>
 </a>
-<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="notif_dropdown">
+<ul class="dropdown-menu dropdown-menu-end p-1" aria-labelledby="notif_dropdown" >
 	<li>
 		<ul component="notifications/list" class="notification-list">
 			<li class="loading-text">
@@ -9,10 +9,11 @@
 			</li>
 		</ul>
 	</li>
-	<li class="notif-dropdown-link">
-		<div class="btn-group d-flex justify-content-center">
-			<a role="button" href="#" class="btn btn-light mark-all-read"><i class="fa fa-check-double"></i> [[notifications:mark-all-read]]</a>
-			<a class="btn btn-light" href="{relative_path}/notifications"><i class="fa fa-list"></i> [[notifications:see-all]]</a>
+	<li class="dropdown-divider"></li>
+	<li>
+		<div class="d-flex justify-content-center gap-1 flex-wrap">
+			<a role="button" href="#" class="btn btn-light mark-all-read flex-fill text-nowrap"><i class="fa fa-check-double"></i> [[notifications:mark-all-read]]</a>
+			<a class="btn btn-primary flex-fill text-nowrap" href="{relative_path}/notifications"><i class="fa fa-list"></i> [[notifications:see-all]]</a>
 		</div>
 	</li>
 </ul>

package/templates/partials/search-filters.tpl

@@ -176,7 +176,7 @@
 			<ul class="dropdown-menu p-1 text-sm" style="width: 300px;">
 				<li class="px-3 py-1 d-flex flex-column gap-2">
 					<button id="save-preferences" class="btn btn-primary">[[search:save-preferences]]</button>
-					<button id="clear-preferences" class="btn-outline border">[[search:clear-preferences]]</button>
+					<button id="clear-preferences" class="btn btn-ghost border">[[search:clear-preferences]]</button>
 				</li>
 			</ul>
 		</div>

package/templates/chat.tpl

@@ -1,38 +0,0 @@
-<div id="chat-modal" class="chat-modal modal hide" tabindex="-1" role="dialog" aria-labelledby="Chat" aria-hidden="true" data-backdrop="none">
-	<div class="modal-dialog">
-		<div class="modal-content" component="chat/message/window">
-			<div class="modal-header d-flex">
-				<div class="fs-6 flex-grow-1 fw-semibold tracking-tight text-truncate text-nowrap" component="chat/room/name" data-icon="{icon}">{{{ if ./roomName }}}<i class="fa {icon} text-muted"></i> {roomName}{{{ else }}}{./chatWithMessage}{{{ end}}}</div>
-				<button type="button" class="btn btn-link d-none d-md-block p-2 text-muted align-text-top" data-action="maximize" title="[[modules:chat.maximize]]" data-bs-toggle="tooltip" data-bs-placement="bottom">
-					<span aria-hidden="true"><i class="fa fa-fw fa-expand"></i></span>
-					<span class="sr-only">[[modules:chat.maximize]]</span>
-				</button>
-				<button type="button" class="btn btn-link d-none d-md-block p-2 text-muted align-text-top" data-action="minimize" title="[[modules:chat.minimize]]" data-bs-toggle="tooltip" data-bs-placement="bottom">
-					<span aria-hidden="true"><i class="fa fa-fw fa-minus"></i></span>
-					<span class="sr-only">[[modules:chat.minimize]]</span>
-				</button>
-				<!-- IMPORT partials/chats/options.tpl -->
-
-				<button id="chat-close-btn" type="button" class="btn-close" aria-label="Close"></button>
-			</div>
-			<!-- IMPORT partials/chats/scroll-up-alert.tpl -->
-			<div class="modal-body d-flex flex-column" style="height: 500px;">
-				<div class="d-flex flex-grow-1 gap-1 overflow-auto" style="min-width: 0px;">
-					<div component="chat/messages" class="expanded-chat d-flex flex-column flex-grow-1" data-roomid="{roomId}" style="min-width: 0px;">
-						<ul component="chat/message/content" class="chat-content p-0 m-0 list-unstyled overflow-auto flex-grow-1">
-							<!-- IMPORT partials/chats/messages.tpl -->
-						</ul>
-						<ul component="chat/message/search/results" class="chat-content p-0 m-0 list-unstyled overflow-auto flex-grow-1 hidden">
-							<div component="chat/message/search/no-results" class="text-center p-4 d-flex flex-column">
-								<div class="p-4"><i class="fa-solid fa-wind fs-2 text-muted"></i></div>
-								<div class="text-xs fw-semibold text-muted">[[search:no-matches]]</div>
-							</div>
-						</ul>
-						<!-- IMPORT partials/chats/composer.tpl -->
-					</div>
-				</div>
-			</div>
-			<div class="imagedrop"><div>[[topic:composer.drag-and-drop-images]]</div></div>
-		</div>
-	</div>
-</div>

package/templates/chats.tpl

@@ -1,51 +0,0 @@
-<div class="chats-full d-flex gap-1 h-100 px-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>
-
-		{{{ if publicRooms.length }}}
-		<hr class="my-1">
-		<div class="d-flex flex-column gap-1">
-			<div class="d-flex gap-1 align-items-center">
-				<button class="btn btn-sm btn-light p-1" data-bs-toggle="collapse" data-bs-target="#public-rooms"
-				onclick="$(this).find('i').toggleClass('fa-chevron-right').toggleClass('fa-chevron-down');"><i class="fa fa-fw fa-chevron-down"></i></button>
-				<label class="text-sm text-muted">[[modules:chat.public-rooms, {publicRooms.length}]]</label>
-			</div>
-			<div id="public-rooms" component="chat/public" class="collapse show">
-				<div class="d-flex flex-column gap-1">
-					{{{ each publicRooms }}}
-					<div component="chat/public/room" class="btn btn-sm btn-light d-flex 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 text-primary bg-light {{{ 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">
-				<button class="btn btn-sm btn-light p-1" data-bs-toggle="collapse" data-bs-target="#private-rooms"
-				onclick="$(this).find('i').toggleClass('fa-chevron-right').toggleClass('fa-chevron-down');"><i class="fa fa-fw fa-chevron-down"></i></button>
-				<label class="text-sm text-muted">[[modules:chat.private-rooms, {privateRoomCount}]]</label>
-			</div>
-			{{{ end }}}
-
-			<ul id="private-rooms" component="chat/recent" class="chats-list overflow-auto mb-0 list-unstyled collapse show" data-nextstart="{nextStart}">
-				{{{each rooms}}}
-				<!-- IMPORT partials/chats/recent_room.tpl -->
-				{{{end}}}
-			</ul>
-		</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>

package/templates/partials/chats/add-reaction.tpl

@@ -1 +0,0 @@
-<!-- This partial intentionally left blank; overwritten by nodebb-plugin-reactions -->

package/templates/partials/chats/composer.tpl

@@ -1,27 +0,0 @@
-<div component="chat/composer" class="d-flex flex-column border-top pt-2 align-items-start">
-	<div component="chat/composer/replying-to" data-tomid="" class="text-sm px-2 mb-1 d-flex gap-2 align-items-center hidden">
-		<div component="chat/composer/replying-to-text"></div> <button component="chat/composer/replying-to-cancel" class="btn btn-sm btn-light px-2 py-1"><i class="fa fa-times"></i></button>
-	</div>
-	<div class="w-100 flex-grow-1 flex-nowrap position-relative d-flex rounded-2 border border-secondary p-1 align-items-end">
-		<button component="chat/upload/button" class="btn btn-light btn-sm px-2 rounded-1" type="button" title="[[global:upload]]" data-bs-toggle="tooltip"><i class="fa fa-fw fa-upload"></i></button>
-		<div class="flex-grow-1 align-self-center">
-			<textarea component="chat/input" placeholder="[[modules:chat.placeholder.mobile]]" class="bg-transparent text-body form-control chat-input mousetrap rounded-0 border-0 shadow-none px-1 py-0" style="min-height: 1.5rem;height:0;max-height:30vh;resize:none;"></textarea>
-		</div>
-		<div class="d-flex gap-1">
-			{{{ each composerActions }}}
-			<button data-action="{./action}" class="btn btn-sm btn-light px-2 {./class} align-items-center" type="button" title="{./title}" data-bs-toggle="tooltip"><i class="fa {./icon}"></i></button>
-			{{{ end }}}
-			<button class="btn btn-primary btn-sm px-2 rounded-1" type="button" data-action="send" title="[[modules:chat.send]]" data-bs-toggle="tooltip"><i class="fa fa-fw fa-paper-plane"></i></button>
-		</div>
-	</div>
-	<div class="d-flex justify-content-between align-items-center text-xs w-100 px-2 mt-1">
-		<div component="chat/composer/typing" class="">
-			<div component="chat/composer/typing/users" class="hidden"></div>
-			<div component="chat/composer/typing/text" class="hidden"></div>
-		</div>
-		<div component="chat/message/remaining" class="text-xs text-muted">{maximumChatMessageLength}</div>
-	</div>
-	<form class="hidden" component="chat/upload" method="post" enctype="multipart/form-data">
-		<input type="file" name="files[]" multiple class="hidden"/>
-	</form>
-</div>

package/templates/partials/chats/dropdown.tpl

@@ -1,38 +0,0 @@
-<!-- IF rooms.length -->
-{{{each rooms}}}
-<li class="<!-- IF ../unread -->unread<!-- ENDIF ../unread -->" data-roomid="{rooms.roomId}">
-	{{{each rooms.users}}}
-	<!-- IF @first -->
-	<div class="main-avatar">
-		<!-- IMPORT partials/chats/user.tpl -->
-	</div>
-	<!-- ENDIF @first -->
-	{{{end}}}
-
-	<ul class="members">
-		{{{each rooms.users}}}
-		<li>
-			<!-- IMPORT partials/chats/user.tpl -->
-		</li>
-		{{{end}}}
-	</ul>
-
-	<div class="notification-chat-content">
-		<strong class="room-name">
-			<!-- IF !rooms.lastUser.uid -->
-			<span>[[modules:chat.no-users-in-room]]</span>
-			<!-- ELSE -->
-			<!-- IF rooms.roomName -->{rooms.roomName}<!-- ELSE -->{rooms.usernames}<!-- ENDIF rooms.roomName -->
-			<!-- ENDIF !rooms.lastUser.uid -->
-		</strong>
-		<span class="teaser-content">
-			<strong class="teaser-username">{rooms.teaser.user.username}:</strong>
-			{rooms.teaser.content}
-		</span>
-	</div>
-	<div class="teaser-timestamp notification-chat-controls">{rooms.teaser.timeago}</div>
-</li>
-{{{end}}}
-<!-- ELSE -->
-<li class="no_active d-flex justify-content-center p-2"><a class="text-reset" href="#">[[modules:chat.no-active]]</a></li>
-<!-- ENDIF rooms.length -->

package/templates/partials/chats/message-window.tpl

@@ -1,36 +0,0 @@
-<div component="chat/message/window" class="d-flex flex-column h-100" >
-	{{{ if !roomId }}}
-	<div class="d-flex flex-column align-items-center gap-3 p-5">
-		<i class="fa-solid fa-wind fs-2 text-muted"></i>
-		<span class="text-muted text-sm">[[modules:chat.no-active]]</span>
-	</div>
-	{{{ else }}}
-	<div component="chat/header" class="d-flex align-items-center px-md-3 gap-3">
-		<a href="#" data-action="close" role="button" class="flex-shrink-0 d-flex d-md-none btn btn-outline align-text-top"><i class="fa fa-chevron-left"></i></a>
-		<h5 component="chat/header/title" class="members flex-grow-1 fw-semibold tracking-tight mb-0 text-truncate text-nowrap">
-			{{{ if ./roomName }}}<i class="fa {icon} text-muted"></i> {roomName}{{{ else }}}{./chatWithMessage}{{{ end}}}
-		</h5>
-
-		<!-- IMPORT partials/chats/options.tpl -->
-	</div>
-	<!-- IMPORT partials/chats/scroll-up-alert.tpl -->
-	<hr class="my-1"/>
-	<div class="d-flex flex-grow-1 gap-1 overflow-auto" style="min-width: 0px;">
-		<div component="chat/messages" class="expanded-chat d-flex flex-column flex-grow-1" data-roomid="{roomId}" style="min-width: 0px;">
-			<ul component="chat/message/content" class="chat-content p-0 m-0 list-unstyled overflow-auto flex-grow-1">
-				<!-- IMPORT partials/chats/messages.tpl -->
-			</ul>
-			<ul component="chat/message/search/results" class="chat-content p-0 m-0 list-unstyled overflow-auto flex-grow-1 hidden">
-				<div component="chat/message/search/no-results" class="text-center p-4 d-flex flex-column">
-					<div class="p-4"><i class="fa-solid fa-wind fs-2 text-muted"></i></div>
-					<div class="text-xs fw-semibold text-muted">[[search:no-matches]]</div>
-				</div>
-			</ul>
-			<!-- IMPORT partials/chats/composer.tpl -->
-		</div>
-
-		<!-- IMPORT partials/chats/user-list.tpl -->
-		<!-- IMPORT partials/chats/pinned-messages.tpl -->
-	</div>
-	{{{ end }}}
-</div>

package/templates/partials/chats/message.tpl

@@ -1,71 +0,0 @@
-<li component="chat/message" class="chat-message mx-2 pe-2 fw-light clear{{{ if messages.deleted }}} deleted{{{ end }}} {{{ if messages.pinned}}} pinned{{{ end }}}" data-mid="{messages.messageId}" data-uid="{messages.fromuid}" data-index="{messages.index}" data-self="{messages.self}" data-break="{messages.newSet}" data-timestamp="{messages.timestamp}" data-username="{messages.fromUser.username}">
-
-	{{{ if messages.parent }}}
-	<!-- IMPORT partials/chats/parent.tpl -->
-	{{{ end }}}
-
-	<div class="message-header">
-		<a href="{config.relative_path}/user/{messages.fromUser.userslug}">{buildAvatar(messages.fromUser, "32px", true, "not-responsive")}</a>
-		<span class="chat-user fw-bold"><a href="{config.relative_path}/user/{messages.fromUser.userslug}">{messages.fromUser.displayname}</a></span>
-		<!-- IF ../fromUser.banned -->
-		<span class="badge bg-danger">[[user:banned]]</span>
-		<!-- END -->
-		<!-- IF ../fromUser.deleted -->
-		<span class="badge bg-danger">[[user:deleted]]</span>
-		<!-- END -->
-		<small class="chat-timestamp text-muted ms-2 timeago" title="{messages.timestampISO}"></small>
-
-		<div component="chat/message/edited" class="text-muted float-end {{{ if !messages.edited }}}hidden{{{ end }}}" title="[[global:edited-timestamp, {isoTimeToLocaleString(messages.editedISO, config.userLang)}]]"><i class="fa fa-edit"></i></span></div>
-	</div>
-	<div class="message-body-wrapper">
-		<div component="chat/message/body" class="message-body">
-			{messages.content}
-		</div>
-		<!-- IMPORT partials/chats/reactions.tpl -->
-		<div component="chat/message/controls" class="btn-group controls">
-			<!-- IMPORT partials/chats/add-reaction.tpl -->
-			<button class="btn btn-sm btn-link" data-action="reply" title="[[topic:reply]]"><i class="fa fa-reply"></i></button>
-
-			<div class="btn-group d-inline-block">
-				<button class="btn btn-sm btn-link dropdown-toggle" data-bs-toggle="dropdown"><i class="fa fa-ellipsis" type="button"></i></button>
-				<ul class="dropdown-menu dropdown-menu-end p-1 text-sm list-unstyled">
-					{{{ if (isAdminOrGlobalMod || (!config.disableChatMessageEditing && messages.self)) }}}
-					<li>
-						<a href="#" class="dropdown-item rounded-1" data-action="edit"><span class="d-inline-flex align-items-center gap-2"><i class="fa fa-fw fa-pencil text-muted"></i> [[topic:edit]]</span></a>
-					</li>
-					<li>
-						<a href="#" class="dropdown-item rounded-1" data-action="delete"><span class="d-inline-flex align-items-center gap-2"><i class="fa fa-fw fa-trash text-muted"></i> [[topic:delete]]</span></a>
-					</li>
-					<li>
-						<a href="#" class="dropdown-item rounded-1" data-action="restore"><span class="d-inline-flex align-items-center gap-2"><i class="fa fa-fw fa-repeat text-muted"></i> [[topic:restore]]</span></a>
-					</li>
-					{{{ end }}}
-
-					{{{ if (isAdminOrGlobalMod || isOwner )}}}
-					<li>
-						<a href="#" class="dropdown-item rounded-1" data-action="pin"><span class="d-inline-flex align-items-center gap-2"><i class="fa fa-fw fa-thumbtack text-muted"></i> [[modules:chat.pin-message]]</span></a>
-					</li>
-					<li>
-						<a href="#" class="dropdown-item rounded-1" data-action="unpin"><span class="d-inline-flex align-items-center gap-2"><i class="fa fa-fw fa-thumbtack fa-rotate-90 text-muted"></i> [[modules:chat.unpin-message]]</span></a>
-					</li>
-					<li class="dropdown-divider"></li>
-					{{{ end }}}
-
-					{{{ if isAdminOrGlobalMod }}}
-					<li>
-						<a href="#" class="dropdown-item rounded-1 chat-ip-button"><span class="d-inline-flex align-items-center gap-2"><i class="fa fa-fw fa-info-circle text-muted"></i> [[modules:chat.show-ip]]</span></a>
-					</li>
-					{{{ end }}}
-
-					<li>
-						<a href="#" class="dropdown-item rounded-1" data-action="copy-text" data-mid="{messages.mid}"><span class="d-inline-flex align-items-center gap-2"><i class="fa fa-fw fa-copy text-muted"></i> [[modules:chat.copy-text]]</span></a>
-					</li>
-
-					<li>
-						<a href="#" class="dropdown-item rounded-1" data-action="copy-link" data-mid="{messages.mid}"><span class="d-inline-flex align-items-center gap-2"><i class="fa fa-fw fa-link text-muted"></i> [[modules:chat.copy-link]]</span></a>
-					</li>
-				</ul>
-			</div>
-		</div>
-	</div>
-</li>

package/templates/partials/chats/messages.tpl

@@ -1,7 +0,0 @@
-{{{each messages}}}
-	{{{ if !./system }}}
-	<!-- IMPORT partials/chats/message.tpl -->
-	{{{ else }}}
-	<!-- IMPORT partials/chats/system-message.tpl -->
-	{{{ end }}}
-{{{end}}}

package/templates/partials/chats/options.tpl

@@ -1,99 +0,0 @@
-<div class="d-flex gap-1 align-items-stretch">
-	<!-- search -->
-	<button class="btn btn-sm btn-light" component="chat/room/search/toggle" data-manual-tooltip="1" title="[[global:header.search]]">
-		<i class="fa fa-search text-muted"></i>
-	</button>
-	<div component="chat/room/search/container" class="position-relative hidden align-self-center">
-		<input component="chat/room/search" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" style="width: 150px;">
-		<a component="chat/room/search/clear" href="#" class="hidden px-2 py-1 position-absolute top-50 end-0 translate-middle-y">
-			<i class="fa fa-times text-muted opacity-75"></i>
-		</a>
-	</div>
-
-	<!-- notification dropdown -->
-	<div class="dropdown d-flex" data-manual-tooltip="1" title="[[modules:chat.notification-settings]]" component="chat/notification/setting">
-		<button class="btn btn-sm btn-light position-relative" data-bs-toggle="dropdown">
-			<i class="fa fa-bell text-muted"></i>
-			<span class="position-absolute top-0 end-0 text-xs text-muted opacity-75" style="font-size: 10px!important; padding: 1px; line-height: 10px;">
-				<i component="chat/notification/setting/icon" class="fa {notificationOptionsIcon}"></i>
-			</span>
-		</button>
-		<ul class="dropdown-menu dropdown-menu-end p-1 text-sm">
-			{{{ each notificationOptions }}}
-			<li>
-				<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" data-value="{./value}" data-icon="{./icon}">
-					<div class="d-flex flex-column gap-1">
-						<div class="d-flex align-items-center gap-2">
-							<div class="flex-grow-1">{./label}</div>
-							<i class="flex-shrink-0 fa fa-fw fa-check {{{ if !./selected }}}hidden{{{ end }}}"></i>
-						</div>
-						{{{ if @first}}}
-						<div component="chat/notification/setting/sub-label" class="text-sm text-muted">{./subLabel}</div>
-						{{{ end }}}
-					</div>
-				</a>
-			</li>
-
-			{{{ if @first }}}
-			<li><hr class="dropdown-divider"></li>
-			{{{ end }}}
-			{{{ end }}}
-		</ul>
-	</div>
-
-	<!-- pinned messages -->
-	<button component="chat/pinned/messages/btn" class="btn btn-sm btn-light" title="[[modules:chat.pinned-messages]]" data-bs-toggle="tooltip" data-bs-placement="bottom">
-		<i class="fa fa-thumb-tack text-muted"></i>
-	</button>
-
-	<!-- manage/options dropdown -->
-	<div class="dropdown d-flex" data-manual-tooltip="1" title="[[modules:chat.options]]">
-		<button class="btn btn-sm btn-light" data-bs-toggle="dropdown" component="chat/controlsToggle">
-			<i class="fa fa-gear text-muted"></i>
-		</button>
-		<ul class="dropdown-menu dropdown-menu-end p-1 text-sm" component="chat/controls">
-			<li>
-				<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" data-action="manage">
-					<i class="fa fa-fw text-muted fa-cog"></i> [[modules:chat.manage-room]]
-				</a>
-			</li>
-			{{{ if isOwner }}}
-			<li>
-				<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" data-action="rename">
-					<i class="fa fa-fw text-muted fa-edit"></i> [[modules:chat.rename-room]]
-				</a>
-			</li>
-			{{{ end }}}
-			<li>
-				<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" data-action="leave">
-					<i class="fa fa-fw text-muted fa-sign-out"></i> [[modules:chat.leave-room]]
-				</a>
-			</li>
-			{{{ if (public && isAdmin) }}}
-			<li>
-				<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" data-action="delete">
-					<i class="fa fa-fw text-danger fa-trash"></i> [[modules:chat.delete-room]]
-				</a>
-			</li>
-			{{{ end }}}
-		</ul>
-	</div>
-
-	<!-- users toggle -->
-	{{{ if users.length }}}
-	<div component="chat/user/list/btn" class="btn btn-sm btn-light d-none d-lg-flex flex-nowrap gap-3 align-items-center" title="[[modules:chat.view-users-list]]" data-bs-toggle="tooltip" data-bs-placement="bottom">
-		<div class="d-flex text-nowrap">
-			{{{ if ./users.0 }}}
-			<span style="width: 18px; z-index: 3;" class="text-decoration-none" href="{config.relative_path}/user/{./users.0.userslug}">{buildAvatar(./users.0, "24px", true)}</span>
-			{{{ end }}}
-			{{{ if ./users.1 }}}
-			<span style="width: 18px; z-index: 2;" class="text-decoration-none" href="{config.relative_path}/user/{./users.1.userslug}">{buildAvatar(./users.1, "24px", true)}</span>
-			{{{ end }}}
-			{{{ if ./users.2 }}}
-			<span style="width: 18px; z-index: 1;" class="text-decoration-none" href="{config.relative_path}/user/{./users.2.userslug}">{buildAvatar(./users.2, "24px", true)}</span>
-			{{{ end }}}
-		</div>
-		{./userCount}
-	</div>
-	{{{ end }}}
-</div>

package/templates/partials/chats/parent.tpl

@@ -1,11 +0,0 @@
-<div class="d-flex ms-4 mb-2 align-items-center">
-	<div component="chat/message/parent" data-parent-mid="{messages.parent.mid}" data-uid="{messages.parent.fromuid}" class="btn btn-sm btn-light align-items-start d-flex flex-row gap-2 text-start w-100">
-		<div class="d-flex gap-2 text-sm text-nowrap">
-			<div><i class="fa fa-sm fa-reply opacity-50"></i></div>
-			<a href="{config.relative_path}/user/{messages.parent.user.userslug}" class="text-decoration-none lh-sm">{buildAvatar(messages.parent.user, "14px", true, "not-responsive")}</a>
-			<a class="chat-user fw-semibold" href="{config.relative_path}/user/{messages.parent.user.userslug}">{messages.parent.user.displayname}</a>
-			<span class="chat-timestamp text-muted timeago text-nowrap hidden" title="{messages.parent.timestampISO}"></span>
-		</div>
-		<div component="chat/message/parent/content" class="text-muted line-clamp-1 text-sm w-100">{messages.parent.content}</div>
-	</div>
-</div>

package/templates/partials/chats/pinned-messages-list.tpl

@@ -1,33 +0,0 @@
-{{{ each messages }}}
-<li component="chat/message" class="chat-message mx-2 pe-2 {{{ if messages.deleted }}} deleted{{{ end }}} {{{ if messages.pinned}}} pinned{{{ end }}} border-top pt-3" data-mid="{messages.messageId}" data-uid="{messages.fromuid}" data-self="{messages.self}" data-timestamp="{messages.timestamp}" data-username="{messages.fromUser.username}" data-index="{./index}">
-
-	{{{ if messages.parent }}}
-	<!-- IMPORT partials/chats/parent.tpl -->
-	{{{ end }}}
-
-	<div class="message-header lh-1 d-flex align-items-center gap-2 text-sm pb-2">
-		<a href="{config.relative_path}/user/{messages.fromUser.userslug}" class="text-decoration-none">{buildAvatar(messages.fromUser, "18px", true, "not-responsive")}</a>
-		<span class="chat-user fw-semibold"><a href="{config.relative_path}/user/{messages.fromUser.userslug}">{messages.fromUser.displayname}</a></span>
-
-		<span class="chat-timestamp text-muted timeago" title="{messages.timestampISO}"></span>
-
-		<div component="chat/message/edited" class="text-muted float-end {{{ if !messages.edited }}}hidden{{{ end }}}" title="[[global:edited-timestamp, {isoTimeToLocaleString(messages.editedISO, config.userLang)}]]"><i class="fa fa-edit"></i></span></div>
-	</div>
-	<div class="message-body-wrapper">
-		<div component="chat/message/body" class="message-body ps-0 py-0 overflow-auto text-break">
-			{messages.content}
-		</div>
-		<div component="chat/message/controls" class="position-relative">
-			<div class="btn-group border shadow-sm controls position-absolute bg-body end-0" style="bottom:1rem;">
-				{{{ if (isAdminOrGlobalMod || (!config.disableChatMessageEditing && messages.self)) }}}
-				<button class="btn btn-sm btn-link" data-action="edit" title="[[topic:edit]]"><i class="fa fa-pencil"></i></button>
-				{{{ end }}}
-				{{{ if (isAdminOrGlobalMod || isOwner )}}}
-				<button class="btn btn-sm btn-link" data-action="pin" title="[[modules:chat.pin-message]]"><i class="fa fa-thumbtack"></i></button>
-				<button class="btn btn-sm btn-link" data-action="unpin" title="[[modules:chat.unpin-message]]"><i class="fa fa-thumbtack fa-rotate-90"></i></button>
-				{{{ end }}}
-			</div>
-		</div>
-	</div>
-</li>
-{{{ end }}}

package/templates/partials/chats/pinned-messages.tpl

@@ -1,10 +0,0 @@
-<div component="chat/messages/pinned/container" class="d-flex flex-column expanded-chat border-start hidden" style="min-width:340px; width: 340px;">
-	<h3 class="fs-6 p-1 mb-0 text-center text-secondary">[[modules:chat.pinned-messages]]</h3>
-
-	<div component="chat/messages/pinned/empty" class="text-center p-4 d-flex flex-column">
-		<div class="p-4"><i class="fa-solid fa-wind fs-2 text-muted"></i></div>
-		<div class="text-xs fw-semibold text-muted">[[modules:chat.no-pinned-messages]]</div>
-	</div>
-
-	<ul component="chat/messages/pinned" class="chat-content list-unstyled d-flex flex-column gap-1 p-1 overflow-auto"></ul>
-</div>

package/templates/partials/chats/reactions.tpl

@@ -1 +0,0 @@
-<!-- This partial intentionally left blank; overwritten by nodebb-plugin-reactions -->

package/templates/partials/chats/recent_room.tpl

@@ -1,35 +0,0 @@
-<li component="chat/recent/room" data-roomid="{rooms.roomId}" class="<!-- IF rooms.unread -->unread<!-- ENDIF rooms.unread -->">
-	{{{each rooms.users}}}
-	<!-- IF @first -->
-	<div class="main-avatar me-2">
-		<!-- IMPORT partials/chats/user.tpl -->
-	</div>
-	<!-- ENDIF @first -->
-	{{{end}}}
-
-	{{{ if rooms.users.length }}}
-	<ul class="members">
-		{{{each rooms.users}}}
-		<li>
-			<!-- IMPORT partials/chats/user.tpl -->
-		</li>
-		{{{end}}}
-	</ul>
-	{{{ end }}}
-
-	<div class="notification-chat-content flex-grow-1">
-		<div component="chat/room/title" class="room-name fw-semibold">
-			{{{ if ./roomName}}}
-			{./roomName}
-			{{{ else }}}
-				{{{ if !./lastUser.uid }}}
-				<div class="p-3 text-center h-100">
-					<span>[[modules:chat.no-users-in-room]]</span>
-				</div>
-				{{{ else }}}
-				{./usernames}
-				{{{ end  }}}
-			{{{ end }}}
-		</div>
-	</div>
-</li>

package/templates/partials/chats/scroll-up-alert.tpl

@@ -1,3 +0,0 @@
-<div class="position-relative">
-	<div component="chat/messages/scroll-up-alert" class="py-1 mt-1 position-absolute start-50 top-50 translate-middle text-sm scroll-up-alert alert alert-info d-none d-md-block text-nowrap hidden" role="button" style="z-index: 500;"><i class="fa fa-fw fa-arrow-down"></i> [[modules:chat.scroll-up-alert]]</div>
-</div>

package/templates/partials/chats/system-message.tpl

@@ -1,3 +0,0 @@
-<li component="chat/system-message" class="system-message fs-6 py-3 clear" data-index="{messages.index}" data-mid="{messages.messageId}" data-uid="{messages.fromuid}" data-index="{messages.index}" data-self="{messages.self}" data-break="0" data-timestamp="{messages.timestamp}">
-	[[modules:chat.system.{messages.content}, {messages.fromUser.username}, {messages.timestampISO}]]
-</li>

package/templates/partials/chats/user-list.tpl

@@ -1,11 +0,0 @@
-<div component="chat/user/list" class="border-start hidden d-flex flex-column gap-1 p-1 overflow-auto" style="min-width:240px; width: 240px;">
-	{{{ each users }}}
-	<a data-index="{./index}" data-uid="{./uid}" class="btn btn-sm btn-light d-flex justify-content-start align-items-center gap-2" href="{config.relative_path}/uid/{./uid}">
-		<div>{buildAvatar(users, "24px", true)}</div>
-		<div class="d-flex gap-1 flex-grow-1 text-nowrap text-truncate">
-			<span component="chat/user/list/username" class="text-truncate">{./username}</span>
-			{{{ if ./isOwner }}}<span><i class="fa fa-star text-warning" data-bs-toggle="tooltip" title="[[modules:chat.owner]]"></i></span>{{{ end }}}
-		</div>
-	</a>
-	{{{ end }}}
-</div>

package/templates/partials/chats/user.tpl

@@ -1 +0,0 @@
-<a href="{config.relative_path}/user/{rooms.users.userslug}">{buildAvatar(rooms.users, "28px", true)}</a>