nodebb-theme-harmony 0.0.1 → 0.0.2

package/templates/account/profile.tpl

@@ -1,168 +1,85 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<div class="account">
+<div class="account mx-auto">
 	<!-- IMPORT partials/account/header.tpl -->
 
-	<div class="profile row">
-		<h1 class="fullname"><!-- IF fullname -->{fullname}<!-- ELSE -->{username}<!-- ENDIF fullname --></h1>
-		<h2 class="username"><!-- IF !banned -->@{username}<!-- ELSE -->[[user:banned]]<!-- ENDIF !banned --></h2>
-		<!-- IF isAdminOrGlobalModeratorOrModerator -->
-		<!-- IF banned -->
-		<div class="text-center">
-		<!-- IF banned_until -->
-		[[user:info.banned-until, {banned_until_readable}]]
-		<!-- ELSE -->
-		[[user:info.banned-permanently]]
-		<!-- ENDIF banned_until -->
-		</div>
-		<!-- ENDIF banned -->
-		<!-- ENDIF isAdminOrGlobalModeratorOrModerator -->
-
-		<!-- IF selectedGroup.length -->
-		<div class="text-center">
-		{{{each selectedGroup}}}
-		<!-- IF selectedGroup.slug -->
-		<!-- IMPORT partials/groups/badge.tpl -->
-		<!-- ENDIF selectedGroup.slug -->
-		{{{end}}}
-		</div>
-		<br/>
-		<!-- ENDIF selectedGroup.length -->
-
-		<!-- IF aboutme -->
-		<span component="aboutme" class="text-center aboutme">{aboutmeParsed}</span>
-		<!-- ENDIF aboutme -->
-
-		<div class="account-stats">
-			<!-- IF !reputation:disabled -->
-			<div class="stat">
-				<div class="human-readable-number" title="{reputation}">{reputation}</div>
-				<span class="stat-label">[[global:reputation]]</span>
-			</div>
-			<!-- ENDIF !reputation:disabled -->
-
-			<div class="stat">
-				<div class="human-readable-number" title="{profileviews}">{profileviews}</div>
-				<span class="stat-label">[[user:profile_views]]</span>
-			</div>
-
-			<div class="stat">
-				<div><a class="human-readable-number" title="{counts.posts}" href="{config.relative_path}/user/{userslug}/posts">{counts.posts}</a></div>
-				<span class="stat-label">[[global:posts]]</span>
-			</div>
+	<div class="row gx-5">
+		<!-- IMPORT partials/account/sidebar-left.tpl -->
 
-			<div class="stat">
-				<div><a class="human-readable-number" title="{counts.followers}" href="{config.relative_path}/user/{userslug}/followers">{counts.followers}</a></div>
-				<span class="stat-label">[[user:followers]]</span>
+		<div class="col-12 col-md-9 col-lg-10 ps-md-5">
+			{{{ if aboutme }}}
+			<div component="aboutme" class="text-sm">
+			{aboutmeParsed}
 			</div>
-
-			<div class="stat">
-				<div><a class="human-readable-number" title="{counts.following}" href="{config.relative_path}/user/{userslug}/following">{counts.following}</a></div>
-				<span class="stat-label">[[user:following]]</span>
-			</div>
-		</div>
-
-		<div class="text-center profile-meta">
-			<span>[[user:joined]]</span>
-			<strong class="timeago" title="{joindateISO}"></strong>
-
-			<span>[[user:lastonline]]</span>
-			<strong class="timeago" title="{lastonlineISO}"></strong><br />
-
-			<!-- IF email -->
-			<span>[[user:email]]</span>
-			<strong><i class="fa fa-eye-slash {emailClass}" title="[[user:email_hidden]]"></i> {email}</strong>
-			<!-- ENDIF email -->
-
-			<!-- IF websiteName -->
-			<span>[[user:website]]</span>
-			<strong><a href="{websiteLink}" rel="nofollow noopener noreferrer">{websiteName}</a></strong>
-			<!-- ENDIF websiteName -->
-
-			<!-- IF location -->
-			<span>[[user:location]]</span>
-			<strong>{location}</strong>
-			<!-- ENDIF location -->
-
-			<!-- IF age -->
-			<span>[[user:age]]</span>
-			<strong>{age}</strong>
-			<!-- ENDIF age -->
-		</div>
-	</div>
-
-
-	<hr />
-
-	<div class="row">
-		<div class="col-12 account-block hidden">
-			<div class="account-picture-block text-center">
-				<span>
-					<span class="account-username"> {username}</span>
-				</span>
-
-				<!-- IF !isSelf -->
-				<a component="account/unfollow" href="#" class="btn btn-outline-secondary{{{ if !isFollowing }}} hide{{{ end }}}">[[user:unfollow]]</a>
-				<a component="account/follow" href="#" class="btn btn-primary{{{ if isFollowing }}} hide{{{ end }}}">[[user:follow]]</a>
-				<!-- ENDIF !isSelf -->
-			</div>
-		</div>
-	</div>
-
-	<!-- IF groups.length -->
-	<div class="row">
-		<div class="col-12 hidden">
-			{{{each groups}}}
-			<a href="{config.relative_path}/groups/{groups.slug}"><span class="label group-label inline-block" style="background-color: {groups.labelColor};"><!-- IF groups.icon --><i class="fa {groups.icon}"></i> <!-- ENDIF groups.icon -->{groups.userTitle}</span></a>
-			{{{end}}}
-		</div>
-	</div>
-	<!-- ENDIF groups.length -->
-
-	<!-- IF ips.length -->
-	<div class="row">
-		<div class="col-12 hidden">
-			<div class="card">
-				<h5 class="card-header">
-					[[global:recentips]]
-				</h5>
-				<div class="card-body">
-				{{{each ips}}}
-					<div>{ips}</div>
-				{{{end}}}
+			{{{ end }}}
+
+			<div class="account-stats container">
+				<div class="row row-cols-2 row-cols-lg-3 row-cols-xl-4 g-2">
+					{{{ if !reputation:disabled }}}
+					<div class="stat">
+						<div class="align-items-center justify-content-center card card-header px-0 py-3 border-0 rounded-1 h-100">
+							<span class="stat-label text-xs fw-semibold">[[global:reputation]]</span>
+							<span class="human-readable-number fs-2 ff-secondary" title="{reputation}">{reputation}</span>
+						</div>
+					</div>
+					{{{ end }}}
+					<div class="stat">
+						<div class="align-items-center justify-content-center card card-header px-0 py-3 border-0 rounded-1 h-100">
+							<span class="stat-label text-xs fw-semibold">[[user:profile_views]]</span>
+							<span class="human-readable-number fs-2 ff-secondary" title="
+							{profileviews}">{profileviews}</span>
+						</div>
+					</div>
+
+					<div class="stat">
+						<div class="align-items-center justify-content-center card card-header px-0 py-3 border-0 rounded-1 h-100 gap-2">
+							<span class="stat-label text-xs fw-semibold"><i class="text-muted fa-solid fa-cake-candles"></i> <span>[[user:joined]]</span></span>
+							<span class="timeago fs-6 ff-secondary" title="{joindateISO}"></span>
+						</div>
+					</div>
+
+					<div class="stat">
+						<div class="align-items-center justify-content-center card card-header px-0 py-3 border-0 rounded-1 h-100 gap-2">
+							<span class="stat-label text-xs fw-semibold"><i class="text-muted fa-solid fa-clock"></i> <span>[[user:lastonline]]</span></span>
+							<span class="timeago fs-6 ff-secondary" title="{lastonlineISO}"></span>
+						</div>
+					</div>
+
+					{{{ if email }}}
+					<div class="stat">
+						<div class="align-items-center justify-content-center card card-header px-0 py-3 border-0 rounded-1 h-100 gap-2">
+							<span class="stat-label text-xs fw-semibold"><i class="text-muted fa-solid fa-envelope"></i> <span>[[user:email]]</span> {{{ if emailHidden}}}<span class="text-lowercase">([[global:hidden]])</span>{{{ end }}}</span>
+							<span class="text-sm text-break ff-secondary">{email}</span>
+						</div>
+					</div>
+					{{{ end }}}
+
+					{{{ if websiteName }}}
+					<div class="stat">
+						<div class="align-items-center justify-content-center card card-header px-0 py-3 border-0 rounded-1 h-100 gap-2">
+							<span class="stat-label text-xs fw-semibold"><i class="text-muted fa-solid fa-globe"></i> <span>[[user:website]]</span></span>
+							<a class="text-sm text-break ff-secondary text-underline text-reset" href="{websiteLink}" rel="nofollow noopener noreferrer">{websiteName}</a>
+						</div>
+					</div>
+					{{{ end }}}
+
+					{{{ if location }}}
+					<div class="stat">
+						<div class="align-items-center justify-content-center card card-header px-0 py-3 border-0 rounded-1 h-100 gap-2">
+							<span class="stat-label text-xs fw-semibold"><i class="text-muted fa-solid fa-map-pin"></i> <span>[[user:location]]</span></span>
+							<span class="fs-6 ff-secondary">{location}</span>
+						</div>
+					</div>
+					{{{ end }}}
+
+					{{{ if age }}}
+					<div class="stat">
+						<div class="align-items-center justify-content-center card card-header px-0 py-3 border-0 rounded-1 h-100 gap-2">
+							<span class="stat-label text-xs fw-semibold"><span>[[user:age]]</span></span>
+							<span class="fs-6 ff-secondary">{age}</span>
+						</div>
+					</div>
+					{{{ end }}}
 				</div>
 			</div>
 		</div>
 	</div>
-	<!-- ENDIF ips.length -->
-
-	<div class="row">
-		{{{ if bestPosts.length }}}
-		<div class="col-lg-12 col-12">
-			<h1>[[pages:account/best, {username}]]</h1>
-
-			<div class="col-12">
-				<ul component="posts" class="posts-list list-unstyled">
-				{{{each bestPosts}}}
-				<!-- IMPORT partials/posts_list_item.tpl -->
-				{{{end}}}
-				</ul>
-			</div>
-		</div>
-		{{{ end }}}
-		{{{ if latestPosts.length}}}
-		<div class="col-lg-12 col-12">
-			<h1>[[pages:account/latest-posts, {username}]]</h1>
-			<div class="col-12">
-				<ul component="posts" class="posts-list list-unstyled">
-				{{{each latestPosts}}}
-				<!-- IMPORT partials/posts_list_item.tpl -->
-				{{{end}}}
-				</ul>
-			</div>
-		</div>
-		{{{ end }}}
-	</div>
-
-	<div id="user-action-alert" class="alert alert-success hide"></div>
 </div>

package/templates/account/topics.tpl

@@ -1,32 +1,43 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
 
-	<div class="row">
-		<h1>{title}</h1>
-		<!-- IF showSort -->
-		<div class="btn-toolbar justify-content-end mb-2">
-			<div class="btn-group bottom-sheet" component="thread/sort">
-				<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button"><span>[[topic:sort_by]]</span> <span class="caret"></span></button>
-				<ul class="dropdown-menu dropdown-menu-end">
-					{{{each sortOptions }}}
-					<li><a class="dropdown-item" href="{config.relative_path}{sortOptions.url}"><i class="fa fa-fw {{{if sortOptions.selected}}}fa-check{{{end}}}"></i>{sortOptions.name}</a></li>
-					{{{end}}}
-				</ul>
+	<div class="row gx-5">
+		<!-- IMPORT partials/account/sidebar-left.tpl -->
+		<div class="col-12 col-md-9 col-lg-10 ps-md-5">
+			<div class="d-flex justify-content-between align-items-center mb-3">
+				<h3 class="fw-semibold fs-5 mb-0">[[global:topics]]</h3>
+				<div class="d-flex gap-1">
+					<a href="{config.relative_path}/user/{userslug}/topics" class="btn-ghost-sm fw-semibold {{{ if template.account/topics }}}active{{{ end }}}">[[global:header.recent]]</a>
+					{{{ if canEdit }}}
+					<a href="{config.relative_path}/user/{userslug}/watched"class="btn-ghost-sm fw-semibold {{{ if template.account/watched }}}active{{{ end }}}">[[user:watched]]</a>
+					<a href="{config.relative_path}/user/{userslug}/ignored" class="btn-ghost-sm fw-semibold {{{ if template.account/ignored }}}active{{{ end }}}">[[user:ignored]]</a>
+					{{{ end }}}
+				</div>
 			</div>
-		</div>
-		<!-- ENDIF showSort -->
 
-		<!-- IF !topics.length -->
+			{{{ if showSort }}}
+			<div class="btn-toolbar justify-content-end mb-2">
+				<div class="btn-group bottom-sheet" component="thread/sort">
+					<button class="btn-ghost-sm dropdown-toggle" data-bs-toggle="dropdown" type="button"><span>[[topic:sort_by]]</span></button>
+					<ul class="dropdown-menu dropdown-menu-end">
+						{{{each sortOptions }}}
+						<li><a class="dropdown-item" href="{config.relative_path}{sortOptions.url}"><i class="fa fa-fw {{{if sortOptions.selected}}}fa-check{{{end}}}"></i>{sortOptions.name}</a></li>
+						{{{end}}}
+					</ul>
+				</div>
+			</div>
+			{{{ end }}}
+
+			{{{ if !topics.length }}}
 			<div class="alert alert-warning text-center">{noItemsFoundKey}</div>
-		<!-- ENDIF !topics.length -->
+			{{{ end }}}
 
-		<div class="category">
-			<!-- IMPORT partials/topics_list.tpl -->
-			<!-- IF config.usePagination -->
+			<div class="category">
+				<!-- IMPORT partials/topics_list.tpl -->
+				{{{ if config.usePagination }}}
 				<!-- IMPORT partials/paginator.tpl -->
-			<!-- ENDIF config.usePagination -->
+				{{{ end }}}
+			</div>
 		</div>
 	</div>
 </div>

package/templates/account/uploads.tpl

@@ -1,43 +1,46 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
-	<div class="row">
-		<h1>{title}</h1>
+	<div class="row gx-5">
+		<!-- IMPORT partials/account/sidebar-left.tpl -->
+
+
 
-        <!-- IF privateUploads -->
-        <div class="alert alert-info text-center">[[uploads:private-uploads-info]]</div>
-        <!-- ELSE -->
-        <div class="alert alert-info text-center">[[uploads:public-uploads-info]]</div>
-        <!-- ENDIF privateUploads -->
+		<div class="col-12 col-md-9 col-lg-10 ps-md-5">
 
-		<!-- IF !uploads.length -->
+			<h3 class="fw-semibold fs-5">{title}</h3>
+
+			<!-- IF privateUploads -->
+			<div class="alert alert-info text-center">[[uploads:private-uploads-info]]</div>
+			<!-- ELSE -->
+			<div class="alert alert-info text-center">[[uploads:public-uploads-info]]</div>
+			<!-- ENDIF privateUploads -->
+
+			<!-- IF !uploads.length -->
 			<div class="alert alert-warning text-center">[[uploads:no-uploads-found]]</div>
-		<!-- ENDIF !uploads.length -->
-
-		<div class="col-12">
-            <table class="table table-striped">
-                <thead>
-                    <tr>
-                        <th></th>
-                        <th></th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {{{each uploads}}}
-                    <tr data-name="{uploads.name}">
-                        <td>
-                            <a href="{config.relative_path}{uploads.url}">{uploads.url}</a>
-                        </td>
-                        <td>
-                            <div class="btn-group ">
-                                <button class="btn btn-danger btn-sm" data-action="delete"><i class="fa fa-trash"></i></button>
-                            </div>
-                        </td>
-                    </tr>
-                    {{{end}}}
-                </tbody>
-            </table>
+			<!-- ENDIF !uploads.length -->
+
+			<table class="table table-striped">
+				<thead>
+					<tr>
+						<th></th>
+						<th></th>
+					</tr>
+				</thead>
+				<tbody>
+					{{{each uploads}}}
+					<tr data-name="{uploads.name}">
+						<td>
+							<a href="{config.relative_path}{uploads.url}">{uploads.url}</a>
+						</td>
+						<td>
+							<div class="btn-group ">
+								<button class="btn btn-danger btn-sm" data-action="delete"><i class="fa fa-trash"></i></button>
+							</div>
+						</td>
+					</tr>
+					{{{end}}}
+				</tbody>
+			</table>
 
 			<!-- IMPORT partials/paginator.tpl -->
 		</div>

package/templates/account/upvoted.tpl

@@ -1,3 +1 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- IMPORT account/posts.tpl -->

package/templates/account/watched.tpl

@@ -1,3 +1 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- IMPORT account/topics.tpl -->

package/templates/admin/plugins/harmony.tpl

@@ -0,0 +1,17 @@
+<div class="row">
+	<div class="col-sm-2 col-12 settings-header">Settings</div>
+	<div class="col-sm-10 col-12">
+		<form role="form" class="harmony-settings">
+			<div class="form-check form-switch">
+				<input type="checkbox" class="form-check-input" id="enableQuickReply" name="enableQuickReply" />
+				<label for="enableQuickReply" class="form-check-label">Enable quick reply</label>
+			</div>
+			<div class="form-check form-switch">
+				<input type="checkbox" class="form-check-input" id="centerHeaderElements" name="centerHeaderElements" />
+				<label for="centerHeaderElements" class="form-check-label">Center header elements</label>
+			</div>
+		</form>
+	</div>
+</div>
+
+<!-- IMPORT admin/partials/save_button.tpl -->

package/templates/categories.tpl

@@ -1,5 +1,3 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- IMPORT partials/breadcrumbs.tpl -->
 <div data-widget-area="header">
 	{{{ each widgets.header }}}
@@ -10,14 +8,16 @@
 	<div class="{{{ if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
 		{{{ if pagination.pages.length }}}
 		<div><!-- IMPORT partials/category-selector.tpl --></div>
-		{{{ else }}}
-		<h1 class="categories-title">[[pages:categories]]</h1>
 		{{{ end }}}
-		<ul class="categories" itemscope itemtype="http://www.schema.org/ItemList">
+		<ul class="categories list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
 			{{{ each categories }}}
+			{{{ if !@first }}}
+			<hr class="text-muted opacity-25"/>
+			{{{ end }}}
 			<!-- IMPORT partials/categories/item.tpl -->
 			{{{ end }}}
 		</ul>
+
 		<!-- IMPORT partials/paginator.tpl -->
 	</div>
 	<div data-widget-area="sidebar" class="col-lg-3 col-sm-12 {{{ if !widgets.sidebar.length }}}hidden{{{ end }}}">

package/templates/category.tpl

@@ -1,35 +1,35 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- IMPORT partials/breadcrumbs.tpl -->
+
+{{{ if widgets.header.length }}}
 <div data-widget-area="header">
 	{{{ each widgets.header }}}
 	{{widgets.header.html}}
 	{{{ end }}}
 </div>
-<div class="row">
-	<div class="category {{{if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
-		<!-- IMPORT partials/category/subcategory.tpl -->
+{{{ end }}}
 
-		<div class="topic-list-header sticky-top btn-toolbar justify-content-between py-2 mb-2 flex-nowrap">
-			<div class="d-flex gap-1 align-items-stretch">
-				{{{ if privileges.topics:create }}}
-				<a href="{config.relative_path}/compose?cid={cid}" component="category/post" id="new_topic" class="btn btn-primary text-nowrap" data-ajaxify="false" role="button">[[category:new_topic_button]]</a>
-				{{{ else }}}
-					{{{ if !loggedIn }}}
-					<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
-					{{{ end }}}
-				{{{ end }}}
+<div class="d-flex flex-column gap-2">
+	<div class="d-flex gap-2 align-items-center mb-1 {{{ if config.centerHeaderElements }}}justify-content-center{{{ end }}}">
+		{buildCategoryIcon(@value, "40px", "rounded-1 flex-shrink-0")}
+		<h2 class="fs-2 fw-semibold mb-0 text-center">{./name}</h2>
+	</div>
+	<div class="d-flex flex-wrap gap-2 {{{ if config.centerHeaderElements }}}justify-content-center{{{ end }}}">
+		<span class="badge text-body border border-gray-300 stats text-xs">
+			<span title="{totalTopicCount}" class="human-readable-number fw-bold">{totalTopicCount}</span>
+			<span class="text-lowercase fw-normal">[[global:topics]]</span>
+		</span>
+		<span class="badge text-body border border-gray-300 stats text-xs">
+			<span title="{totalPostCount}" class="human-readable-number fw-bold">{totalPostCount}</span>
+			<span class="text-lowercase fw-normal">[[global:posts]]</span>
+		</span>
+	</div>
+</div>
 
-				<a href="{config.relative_path}/{selectedFilter.url}{querystring}" class="d-inline-block">
-					<div class="alert alert-warning h-100 m-0 px-2 py-1 d-flex align-items-center hide" id="new-topics-alert"></div>
-				</a>
-			</div>
-			<div class="d-flex gap-1 align-items-stretch">
-				<!-- IMPORT partials/category/watch.tpl -->
-				<!-- IMPORT partials/category/sort.tpl -->
-				<!-- IMPORT partials/category/tools.tpl -->
-			</div>
-		</div>
+<div class="row mt-3">
+	<div class="category d-flex flex-column {{{if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
+		<!-- IMPORT partials/category/subcategory.tpl -->
+
+		<!-- IMPORT partials/topic-list-bar.tpl -->
 
 		{{{ if !topics.length }}}
 		{{{ if privileges.topics:create }}}
@@ -58,8 +58,8 @@
 	{{{end}}}
 </div>
 
-<!-- IF !config.usePagination -->
+{{{ if !config.usePagination }}}
 <noscript>
 	<!-- IMPORT partials/paginator.tpl -->
 </noscript>
-<!-- ENDIF !config.usePagination -->
+{{{ end }}}

package/templates/chat.tpl

@@ -1,10 +1,8 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<div id="chat-modal" class="chat-modal modal hide" tabindex="-1" role="dialog" aria-labelledby="Chat" aria-hidden="true" data-backdrop="none">
+<div id="chat-modal" class="chat-modal d-flex flex-nowrap modal hide" tabindex="-1" role="dialog" aria-labelledby="Chat" aria-hidden="true" data-backdrop="none">
 	<div class="modal-dialog">
 		<div class="modal-content">
 			<div class="modal-header d-flex">
-				<div class="fs-5 flex-grow-1" component="chat/room/name">{{{ if roomName }}}{roomName}{{{ else }}}{usernames}{{{ end }}}</div>
+				<div class="fs-5 flex-grow-1" component="chat/room/name"><!-- IF roomName -->{roomName}<!-- ELSE -->{usernames}<!-- ENDIF roomName --></div>
 				<button type="button" class="btn btn-link d-none d-md-block p-2 text-muted align-text-top" data-action="maximize">
 					<span aria-hidden="true"><i class="fa fa-fw fa-expand"></i></span>
 					<span class="sr-only">[[modules:chat.maximize]]</span>
@@ -18,18 +16,20 @@
 				<button id="chat-close-btn" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 			</div>
 
-			<div class="modal-body">
+			<div class="modal-body d-flex flex-column" style="height: 500px;">
 				<div class="position-relative">
 					<div component="chat/messages/scroll-up-alert" class="position-absolute scroll-up-alert alert alert-info hidden w-100" role="button" style="z-index: 1;">[[modules:chat.scroll-up-alert]]</div>
 				</div>
-				<ul class="chat-content" component="chat/messages">
+				<ul class="chat-content p-0 m-0 list-unstyled d-flex flex-column overflow-auto flex-grow-1" component="chat/messages">
 					<!-- IMPORT partials/chats/messages.tpl -->
 				</ul>
 
-				<div component="chat/composer">
-					<textarea component="chat/input" placeholder="[[modules:chat.placeholder]]" class="form-control chat-input mousetrap" rows="1"></textarea>
+				<div component="chat/composer" class="d-flex">
+					<div class="flex-grow-1 position-relative">
+						<textarea component="chat/input" placeholder="[[modules:chat.placeholder]]" class="form-control chat-input mousetrap" rows="2"></textarea>
+						<span component="chat/message/remaining" class="text-muted position-absolute me-1 mb-1" style="right: 0px; bottom:0px;">{maximumChatMessageLength}</span>
+					</div>
 					<button class="btn btn-primary" type="button" data-action="send"><i class="fa fa-fw fa-2x fa-paper-plane"></i></button>
-					<span component="chat/message/remaining">{maximumChatMessageLength}</span>
 					<form component="chat/upload" method="post" enctype="multipart/form-data">
 						<input type="file" name="files[]" multiple class="hidden"/>
 					</form>

package/templates/chats.tpl

@@ -1,20 +1,18 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<div class="chats-full">
-	<div component="chat/nav-wrapper" data-loaded="{{{ if roomId }}}1{{{ else }}}0{{{ end }}}">
-		<div class="chat-search dropdown">
+<div class="chats-full d-flex gap-1 vh-100 py-3">
+	<div class="d-flex flex-column h-100" component="chat/nav-wrapper" data-loaded="{{{ if roomId }}}1{{{ else }}}0{{{ end }}}">
+		<div class="chat-search dropdown mb-2">
 			<input class="form-control" type="text" component="chat/search" placeholder="[[users:search-user-for-chat]]" data-bs-toggle="dropdown" />
 			<ul component="chat/search/list" class="dropdown-menu">
 				<li><a href="#" class="dropdown-item">[[admin/menu:search.start-typing]]</a></li>
 			</ul>
 		</div>
-		<ul component="chat/recent" class="chats-list list-unstyled" data-nextstart="{nextStart}">
+		<ul component="chat/recent" class="chats-list list-unstyled overflow-auto mb-0 pe-2" data-nextstart="{nextStart}">
 			{{{each rooms}}}
 			<!-- IMPORT partials/chats/recent_room.tpl -->
 			{{{end}}}
 		</ul>
 	</div>
-	<div component="chat/main-wrapper">
+	<div class="flex-1 ms-md-2 ps-md-2 border-1 border-start-md" component="chat/main-wrapper">
 		<!-- IMPORT partials/chats/message-window.tpl -->
 	</div>
 	<div class="imagedrop"><div>[[topic:composer.drag_and_drop_images]]</div></div>

package/templates/footer.tpl

@@ -1,12 +1,16 @@
-<!-- THIS FILE IS STILL PERSONA -->
 
-		</div><!-- /.container#content -->
-	</main>
+			</div><!-- /.container#content -->
+		</main>
+		<!-- IMPORT partials/sidebar-right.tpl -->
+	</div>
+	<!-- IMPORT partials/mobile-footer.tpl -->
 	{{{ if !isSpider }}}
-	<div component="toaster/tray" class="alert-window">
-		<div id="reconnect-alert" class="alert alert-dismissible alert-warning clearfix hide" component="toaster/toast">
-			<button type="button" class="btn-close float-end" data-bs-dismiss="alert" aria-hidden="true"></button>
-			<p>[[global:reconnecting-message, {config.siteTitle}]]</p>
+	<div class="row">
+		<div component="toaster/tray" class="col-12 col-md-3 alert-window fixed-bottom pb-3 mb-5 mb-md-2 me-md-5 ms-auto">
+			<div id="reconnect-alert" class="alert alert-dismissible alert-warning clearfix hide" component="toaster/toast">
+				<button type="button" class="btn-close float-end" data-bs-dismiss="alert" aria-hidden="true"></button>
+				<p>[[global:reconnecting-message, {config.siteTitle}]]</p>
+			</div>
 		</div>
 	</div>
 	{{{ end }}}