nodebb-theme-harmony 1.0.0-beta.3 → 1.0.0-beta.30

package/templates/account/posts.tpl

@@ -3,7 +3,7 @@
 
 	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
 				<h3 class="fw-semibold fs-5 mb-0">[[global:posts]]</h3>
 				<div class="d-flex flex-wrap gap-1">

package/templates/account/profile.tpl

@@ -4,9 +4,9 @@
 	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
 
-		<div class="flex-1 ps-md-2 ps-lg-5">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			{{{ if aboutme }}}
-			<div component="aboutme" class="text-sm">
+			<div component="aboutme" class="text-sm text-break">
 			{aboutmeParsed}
 			</div>
 			{{{ end }}}

package/templates/account/sessions.tpl

@@ -3,28 +3,11 @@
 
 	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<p class="lead">[[user:sessions.description]]</p>
 			<hr />
 			<ul class="list-group" component="user/sessions">
-				{{{each sessions}}}
-				<li class="list-group-item" data-uuid="{../uuid}">
-					<div class="float-end">
-						<!-- IF isSelfOrAdminOrGlobalModerator -->
-						<!-- IF !../current -->
-						<button class="btn btn-sm btn-outline-secondary" type="button" data-action="revokeSession">Revoke Session</button>
-						<!-- ENDIF !../current -->
-						<!-- ENDIF isSelfOrAdminOrGlobalModerator -->
-						{function.userAgentIcons}
-						<i class="fa fa-circle text-<!-- IF ../current -->success<!-- ELSE -->muted<!-- ENDIF ../current -->"></i>
-					</div>
-					{../browser} {../version} on {../platform}<br />
-					<small class="timeago text-muted" title="{../datetimeISO}"></small>
-					<ul>
-						<li><strong>[[global:ip_address]]</strong>: {../ip}</li>
-					</ul>
-				</li>
-				{{{end}}}
+				<!-- IMPORT partials/account/session-list.tpl -->
 			</ul>
 		</div>
 	</div>

package/templates/account/settings.tpl

@@ -3,7 +3,7 @@
 
 	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<div class="mb-3 d-flex justify-content-between">
 				<h3 class="fw-semibold fs-5">{{{ if isSelf }}}[[pages:account/settings]]{{{ else }}}[[pages:account/settings-of, {username}]]{{{ end }}}</h3>
 				<button id="submitBtn" class="btn btn-primary">[[global:save_changes]]</button>

package/templates/account/theme.tpl

@@ -3,7 +3,7 @@
 
 	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<div class="mb-3 d-flex justify-content-between">
 				<h3 class="fw-semibold fs-5">[[harmony:settings.title]]</h3>
 

package/templates/account/topics.tpl

@@ -3,7 +3,7 @@
 
 	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<div class="d-flex justify-content-between align-items-center mb-3">
 				<div class="d-flex gap-1">
 					<h3 class="fw-semibold fs-5 mb-0">[[global:topics]]</h3>

package/templates/account/uploads.tpl

@@ -2,7 +2,7 @@
 	<!-- IMPORT partials/account/header.tpl -->
 	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<h3 class="fw-semibold fs-5">{title}</h3>
 
 			<!-- IF privateUploads -->

package/templates/categories.tpl

@@ -6,7 +6,7 @@
 <div class="row">
 	<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>
+		<div><!-- IMPORT partials/category/selector-dropdown-left.tpl --></div>
 		{{{ end }}}
 		<ul class="categories list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
 			{{{ each categories }}}

package/templates/category.tpl

@@ -1,13 +1,4 @@
 <!-- IMPORT partials/breadcrumbs.tpl -->
-
-{{{ if widgets.header.length }}}
-<div data-widget-area="header">
-	{{{ each widgets.header }}}
-	{{widgets.header.html}}
-	{{{ end }}}
-</div>
-{{{ 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")}
@@ -25,6 +16,15 @@
 	</div>
 </div>
 
+{{{ if widgets.header.length }}}
+<div data-widget-area="header">
+	{{{ each widgets.header }}}
+	{{widgets.header.html}}
+	{{{ end }}}
+</div>
+{{{ end }}}
+
+
 <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 -->
@@ -33,8 +33,7 @@
 
 		{{{ if !topics.length }}}
 		{{{ if privileges.topics:create }}}
-		<hr class="visible-xs" />
-		<div class="alert alert-warning" id="category-no-topics">
+		<div class="alert alert-info mt-3" id="category-no-topics">
 			[[category:no_topics]]
 		</div>
 		{{{ end }}}

package/templates/chats.tpl

@@ -1,5 +1,5 @@
 <div class="chats-full d-flex gap-1 vh-100 py-3">
-	<div class="d-flex flex-column h-100" style="width:300px;" component="chat/nav-wrapper" data-loaded="{{{ if roomId }}}1{{{ else }}}0{{{ end }}}">
+	<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">
 			<label class="text-xs text-muted">[[users:search-user-for-chat]]</label>
 

package/templates/flags/detail.tpl

@@ -146,7 +146,6 @@
 						<button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 							<i class="fa fa-street-view"></i>
 							[[flags:flagged-user]]
-							<span class="caret"></span>
 						</button>
 						<ul class="dropdown-menu">
 							<li><a class="dropdown-item" href="{config.relative_path}/uid/{target.uid}">[[flags:view-profile]]</a></li>

package/templates/flags/list.tpl

@@ -18,7 +18,7 @@
 
 		<div class="btn-group float-end" component="flags/bulk-actions">
 			<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" autocomplete="off" aria-haspopup="true" aria-expanded="false" disabled="disabled">
-				<i class="fa fa-clone"></i> [[flags:bulk-actions]] <span class="caret"></span>
+				<i class="fa fa-clone"></i> <span class="fw-semibold">[[flags:bulk-actions]]</span>
 			</button>
 			<ul class="dropdown-menu">
 				<li><a href="#" class="dropdown-item" data-action="bulk-assign">[[flags:assign-to-me]]</a></li>

package/templates/groups/details.tpl

@@ -2,10 +2,10 @@
 	<div class="cover position-absolute start-0 top-0" component="groups/cover" style="background-image: url({group.cover:url}); background-position: {group.cover:position};">
 		<div class="container">
 			{{{ if group.isOwner }}}
-			<div class="controls">
-				<span class="upload"><i class="fa fa-fw fa-2x fa-upload"></i></span>
-				<span class="resize"><i class="fa fa-fw fa-2x fa-arrows"></i></span>
-				<span class="remove"><i class="fa fa-fw fa-2x fa-times"></i></span>
+			<div class="controls text-center">
+				<span class="upload p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-upload"></i></span>
+				<span class="resize p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-arrows"></i></span>
+				<span class="remove p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-times"></i></span>
 			</div>
 			<div class="save text-bg-primary">[[groups:cover-save]] <i class="fa fa-fw fa-floppy-o"></i></div>
 			<div class="indicator text-bg-primary">[[groups:cover-saving]] <i class="fa fa-fw fa-refresh fa-spin"></i></div>
@@ -13,24 +13,27 @@
 		</div>
 	</div>
 
-	<div class="d-flex flex-column pb-4 mb-4 mt-2 border-bottom">
-		<div class="d-flex justify-content-between mt-1 align-items-center">
+	<div class="d-flex flex-column flex-md-row justify-content-md-between pb-4 mb-4 mt-2 border-bottom">
+		<div class="d-flex flex-column mt-1">
 			<div class="d-flex align-items-center gap-2">
 				<h2 class="mb-0">{group.displayName}</h2>
-				{{{ if group.private }}}<span class="badge text-bg-light border border-1">[[groups:details.private]]</span>{{{ end }}}
-				{{{ if group.hidden }}}<span class="badge text-bg-light border border-1">[[groups:details.hidden]]</span>{{{ end }}}
 			</div>
-
-			<div>
-				{{{ if loggedIn }}}
-				{function.membershipBtn, group}
-				{{{ end }}}
-				{{{ if isAdmin }}}
-				<a href="{config.relative_path}/admin/manage/groups/{group.nameEncoded}" target="_blank" class="btn btn-light"><i class="fa fa-gear"></i> [[user:edit]]</a>
-				{{{ end }}}
+			<div class="d-flex gap-2">
+				{group.descriptionParsed}
+				<div>
+					{{{ if group.private }}}<span class="badge text-bg-light border border-1">[[groups:details.private]]</span>{{{ end }}}
+					{{{ if group.hidden }}}<span class="badge text-bg-light border border-1">[[groups:details.hidden]]</span>{{{ end }}}
+				</div>
 			</div>
 		</div>
-		{group.descriptionParsed}
+		<div>
+			{{{ if loggedIn }}}
+			{function.membershipBtn, group}
+			{{{ end }}}
+			{{{ if isAdmin }}}
+			<a href="{config.relative_path}/admin/manage/groups/{group.nameEncoded}" target="_blank" class="btn btn-light"><i class="fa fa-gear"></i> [[user:edit]]</a>
+			{{{ end }}}
+		</div>
 	</div>
 
 	<div class="d-flex flex-column flex-md-row">

package/templates/groups/members.tpl

@@ -1,5 +1,3 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- IMPORT partials/breadcrumbs.tpl -->
 <div class="users">
 	<!-- IMPORT partials/users_list.tpl -->

package/templates/partials/account/header.tpl

@@ -8,10 +8,10 @@
 	<div class="container">
 		{{{ if allowCoverPicture }}}
 		{{{ if canEdit }}}
-		<div class="controls">
-			<span class="upload"><i class="fa fa-fw fa-2x fa-upload"></i></span>
-			<span class="resize"><i class="fa fa-fw fa-2x fa-arrows"></i></span>
-			<span class="remove"><i class="fa fa-fw fa-2x fa-times"></i></span>
+		<div class="controls text-center">
+			<span class="upload p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-upload"></i></span>
+			<span class="resize p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-arrows"></i></span>
+			<span class="remove p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-times"></i></span>
 		</div>
 		<div class="save text-bg-primary">[[groups:cover-save]] <i class="fa fa-fw fa-floppy-o"></i></div>
 		<div class="indicator text-bg-primary">[[groups:cover-saving]] <i class="fa fa-fw fa-refresh fa-spin"></i></div>
@@ -21,19 +21,12 @@
 </div>
 
 <div class="d-flex flex-column flex-md-row gap-2 w-100 pb-4 mb-4 mt-2 border-bottom">
-	<div class="avatar-wrapper border-4 position-relative align-self-start d-none d-md-block" style="margin-top: -75px;">
-		{{{ if picture }}}
-		<img src="{picture}" class="avatar avatar-rounded" style="--avatar-size: 142px;" />
-		{{{ else }}}
-		<div class="avatar avatar-rounded" style="background-color: {icon:bgColor}; --avatar-size: 142px;" title="{username}">{icon:text}</div>
-		{{{ end }}}
-	</div>
-
-	<div class="avatar-wrapper border-4 position-relative align-self-center d-block d-md-none" style="margin-top: -75px;">
-		{{{ if picture }}}
-		<img src="{picture}" class="avatar avatar-rounded" style="--avatar-size: 142px;" />
-		{{{ else }}}
-		<div class="avatar avatar-rounded" style="background-color: {icon:bgColor}; --avatar-size: 142px;" title="{username}">{icon:text}</div>
+	<div {{{ if (allowProfilePicture && isSelfOrAdminOrGlobalModerator)}}}component="profile/change/picture"{{{ end }}} class="avatar-wrapper border-4 position-relative align-self-center align-self-md-start hover-parent" style="margin-top: -75px;">
+		{buildAvatar(@value, "142px", true)}
+		{{{ if (allowProfilePicture && isSelfOrAdminOrGlobalModerator)}}}
+		<div component="profile/change/picture" class="d-none d-md-block pointer p-2 rounded-1 opacity-75 text-bg-light position-absolute top-50 start-50 translate-middle hover-visible">
+			<span class="upload"><i class="fa fa-fw fa-upload"></i></span>
+		</div>
 		{{{ end }}}
 	</div>
 

package/templates/partials/account/session-list.tpl

@@ -0,0 +1,18 @@
+{{{ each sessions }}}
+<li class="list-group-item text-break" data-uuid="{./uuid}">
+	<div class="float-end">
+		{{{ if isSelfOrAdminOrGlobalModerator }}}
+		{{{ if !./current }}}
+		<button class="btn btn-sm btn-outline-secondary" type="button" data-action="revokeSession">[[user:revoke-session]]</button>
+		{{{ end }}}
+		{{{ end }}}
+		{function.userAgentIcons}
+		<i class="fa fa-circle text-{{{ if ./current }}}success{{{ else }}}muted{{{ end }}}"></i>
+	</div>
+	[[user:browser-version-on-platform, {./browser}, {./version}, {./platform}]]<br />
+	<small class="timeago text-muted" title="{../datetimeISO}"></small>
+	<ul>
+		<li><strong>[[global:ip_address]]</strong>: {../ip}</li>
+	</ul>
+</li>
+{{{ end }}}

package/templates/partials/categories/item.tpl

@@ -33,27 +33,24 @@
 			{{{ end }}}
 		</div>
 	</div>
-
-	{{{ if !./link }}}
-	<div class="col-md-2 d-none d-md-flex stats text-muted gap-2 px-0">
-		<div class="w-50">
-			<div class="card card-header align-items-center px-0 py-2 border-0 rounded-1">
+	<div class="row col-md-5 col-sm-3 d-none d-md-flex align-self-start">
+		{{{ if !./link }}}
+		<div class="col-md-5 d-none d-lg-flex stats text-muted gap-2 px-0">
+			<div class="w-50 card card-header align-items-center px-0 py-2 border-0 rounded-1">
 				<span class="{./unread-class} human-readable-number fs-5 fw-semibold ff-secondary" title="{./totalTopicCount}">{./totalTopicCount}</span>
 				<span class="text-lowercase text-xs">[[global:topics]]</span>
 			</div>
-		</div>
-		<div class="w-50">
-			<div class="card card-header align-items-center px-0 py-2 border-0 rounded-1">
+			<div class="w-50 card card-header align-items-center px-0 py-2 border-0 rounded-1">
 				<span class="{./unread-class} human-readable-number fs-5 fw-semibold ff-secondary" title="{./totalPostCount}">{./totalPostCount}</span>
 				<span class="text-lowercase text-xs">[[global:posts]]</span>
 			</div>
 		</div>
-	</div>
 
-	{{{ if !config.hideCategoryLastPost }}}
-	<div class="col-md-3 col-sm-3 teaser d-none d-sm-block" component="topic/teaser">
-		<!-- IMPORT partials/categories/lastpost.tpl -->
+		{{{ if !config.hideCategoryLastPost }}}
+		<div class="col-md-7 col-sm-3 teaser d-none d-sm-block" component="topic/teaser">
+			<!-- IMPORT partials/categories/lastpost.tpl -->
+		</div>
+		{{{ end }}}
+		{{{ end }}}
 	</div>
-	{{{ end }}}
-	{{{ end }}}
 </li>

package/templates/partials/categories/lastpost.tpl

@@ -4,12 +4,12 @@
 	<div component="category/posts" class="ps-3">
 		<a class="background-link" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}"></a>
 		<p class="mb-0">
-			<a class="text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(posts.user, "20px", true)}</a>
+			<a class="text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(posts.user, "20px", true, "avatar-tooltip")}</a>
 			<a class="permalink text-muted" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}">
 				<span class="timeago text-xs" title="{../timestampISO}"></span>
 			</a>
 		</p>
-		<div class="post-content mt-2 overflow-hidden text-xs line-clamp-3">
+		<div class="post-content overflow-hidden text-xs line-clamp-2">
 			{./content}
 		</div>
 	</div>

package/templates/partials/{category-filter-content.tpl → category/filter-dropdown-content.tpl}

@@ -1,7 +1,7 @@
 <button type="button" class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown">
     {{{ if selectedCategory }}}
     <span class="category-item">
-        {buildCategoryIcon(selectedCategory, "20px", "rounded-circle")}
+        {buildCategoryIcon(selectedCategory, "18px", "rounded-circle")}
         <span class="visible-md-inline visible-lg-inline fw-semibold">{selectedCategory.name}</span>
     </span>
     {{{ else }}}
@@ -9,18 +9,20 @@
     <span class="visible-md-inline visible-lg-inline fw-semibold">[[unread:all_categories]]</span>{{{ end }}}
 </button>
 <div component="category-selector-search" class="hidden position-absolute">
-    <input type="text" class="form-control" autocomplete="off">
+    <input type="text" class="form-control form-control-sm" autocomplete="off">
 </div>
 <ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
-    <li role="presentation" class="category" data-all="all">
-        <a class="dropdown-item" role="menu-item" href="{config.relative_path}/{allCategoriesUrl}"><i component="category/select/icon" class="fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i> [[unread:all_categories]]</a>
+    <li role="presentation" class="category" data-cid="all">
+        <a class="dropdown-item" role="menu-item" href="{{{ if allCategoriesUrl }}}{config.relative_path}/{allCategoriesUrl}{{{ else }}}#{{{ end }}}"><i component="category/select/icon" class="fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i> [[unread:all_categories]]</a>
     </li>
     {{{each categoryItems}}}
     <li role="presentation" class="category {{{ if ../disabledClass }}}disabled{{{ end }}}" data-cid="{../cid}" data-parent-cid="{../parentCid}" data-name="{../name}">
         <a class="dropdown-item" role="menu-item" href="#">{../level}<i component="category/select/icon" class="fa fa-fw fa-check {{{ if !../selected }}}invisible{{{ end }}}"></i>
             <span component="category-markup" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">
                 <div class="category-item d-inline-block">
+                    {{{ if ./icon }}}
                     {buildCategoryIcon(@value, "24px", "rounded-circle")}
+                    {{{ end }}}
                     {./name}
                 </div>
             </span>

package/templates/partials/{category-selector-content.tpl → category/selector-dropdown-content.tpl}

@@ -12,7 +12,7 @@
     </span>
 </button>
 <div component="category-selector-search" class="hidden position-absolute">
-    <input type="text" class="form-control" autocomplete="off">
+    <input type="text" class="form-control form-control-sm" autocomplete="off">
 </div>
 <ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
     <li component="category/no-matches" role="presentation" class="category hidden">

package/templates/partials/category/subcategory.tpl

@@ -1,7 +1,7 @@
 {{{ if children.length }}}
 <div class="subcategory">
 	{{{ if hasMoreSubCategories }}}
-	<div class="mb-2"><!-- IMPORT partials/category-selector.tpl --></div>
+	<div class="mb-2"><!-- IMPORT partials/category/selector-dropdown-left.tpl --></div>
 	{{{ else }}}
 	<h3 class="fs-6 fw-semibold">[[category:subcategories]]</h3>
 	{{{ end }}}

package/templates/partials/category/tags.tpl

@@ -1,5 +1,3 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 {{{ each tags }}}
 <a href="{config.relative_path}/tags/{topics.tags.value}"><span class="tag-item" data-tag="{topics.tags.value}">{topics.tags.value}</span><span class="tag-topic-count human-readable-number" title="{topics.tags.score}">{topics.tags.score}</span></a>
 {{{ end }}}

package/templates/partials/category/watch.tpl

@@ -1,5 +1,5 @@
 {{{ if config.loggedIn }}}
-<div class="btn-group topic-watch-dropdown bottom-sheet" component="topic/watch">
+<div class="btn-group bottom-sheet" component="topic/watch">
 	<button class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown" type="button">
 		<span component="category/watching/menu" {{{ if !./isWatched }}}class="hidden"{{{ end }}}><i class="fa fa-fw fa-inbox text-primary"></i><span class="visible-md-inline visible-lg-inline fw-semibold"> [[category:watching]]</span></span>
 
@@ -9,11 +9,35 @@
 	</button>
 
 	<ul class="dropdown-menu">
-		<li><a class="dropdown-item" href="#" component="category/watching" data-state="watching"><i component="category/watching/check" class="fa fa-fw {{{ if ./isWatched }}}fa-check{{{ end }}}"></i><i class="fa fa-fw fa-inbox"></i> [[category:watching]]<p class="help-text text-muted"><small>[[category:watching.description]]</small></p></a></li>
+		<li>
+			<a class="dropdown-item d-flex" href="#" component="category/watching" data-state="watching">
+				<span><i component="category/watching/check" class="fa fa-fw {{{ if ./isWatched }}}fa-check{{{ end }}}"></i></span>
+				<div class="d-flex flex-column">
+					<span><i class="fa fa-fw fa-inbox"></i> [[category:watching]]</span>
+					<p class="help-text text-muted"><small>[[category:watching.description]]</small></p>
+				</div>
+			</a>
+		</li>
 
-		<li><a class="dropdown-item" href="#" component="category/notwatching" data-state="notwatching"><i component="category/notwatching/check" class="fa fa-fw {{{ if ./isNotWatched }}}fa-check{{{ end }}}"></i><i class="fa fa-fw fa-clock-o"></i> [[category:not-watching]]<p class="help-text text-muted"><small>[[category:not-watching.description]]</small></p></a></li>
+		<li>
+			<a class="dropdown-item d-flex" href="#" component="category/notwatching" data-state="notwatching">
+				<span><i component="category/notwatching/check" class="fa fa-fw {{{ if ./isNotWatched }}}fa-check{{{ end }}}"></i></span>
+				<div class="d-flex flex-column">
+					<span><i class="fa fa-fw fa-clock-o"></i> [[category:not-watching]]</span>
+					<p class="help-text text-muted"><small>[[category:not-watching.description]]</small></p>
+				</div>
+			</a>
+		</li>
 
-		<li><a class="dropdown-item" href="#" component="category/ignoring" data-state="ignoring"><i component="category/ignoring/check" class="fa fa-fw {{{ if ./isIgnored }}}fa-check{{{ end }}}"></i><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]<p class="help-text text-muted"><small>[[category:ignoring.description]]</small></p></a></li>
+		<li>
+			<a class="dropdown-item d-flex" href="#" component="category/ignoring" data-state="ignoring">
+				<span><i component="category/ignoring/check" class="fa fa-fw {{{ if ./isIgnored }}}fa-check{{{ end }}}"></i></span>
+				<div class="d-flex flex-column">
+					<span><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]</span>
+					<p class="help-text text-muted"><small>[[category:ignoring.description]]</small></p>
+				</div>
+			</a>
+		</li>
 	</ul>
 </div>
 {{{ end }}}

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

@@ -6,8 +6,9 @@
 
 {{{ if roomId }}}
 <div component="chat/messages" class="expanded-chat d-flex flex-column h-100" data-roomid="{roomId}">
-	<div component="chat/header" class="d-flex align-items-center px-3 gap-1">
-		<h5 class="members flex-1 fw-semibold tracking-tight">
+	<div component="chat/header" class="d-flex align-items-center px-3 gap-2">
+		<a href="#" data-action="close" role="button" class="d-flex d-md-none btn btn-outline align-text-top"><i class="fa fa-chevron-left"></i></a>
+		<h5 class="members flex-1 fw-semibold tracking-tight mb-0">
 			{./chatWithMessage}
 		</h5>
 

package/templates/partials/chats/message.tpl

@@ -14,7 +14,7 @@
 		{{{ end }}}
 	</div>
 	<div class="message-body-wrapper hover-parent">
-		<div component="chat/message/body" class="message-body ps-0 py-0 overflow-auto">
+		<div component="chat/message/body" class="message-body ps-0 py-0 overflow-auto text-break">
 			{messages.content}
 		</div>
 

package/templates/partials/cookie-consent.tpl

@@ -1,6 +1,6 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<div class="cookie-consent">
-    <button class="float-end btn btn-primary">{dismiss}</button>
-    {message} <a target="_blank" rel="noopener" href="{link_url}">{link}</a>
+<div class="d-flex justify-content-center position-fixed start-0 bottom-0 w-100 mb-5 mb-md-0">
+    <div class="cookie-consent text-bg-info w-50 p-3 rounded d-flex gap-2 mb-5 mb-md-3 justify-content-between align-items-center">
+        <span>{message} <a class="fw-bold" target="_blank" rel="noopener" href="{link_url}">{link}</a></span>
+        <button class="btn btn-primary text-nowrap">{dismiss}</button>
+    </div>
 </div>

package/templates/partials/flags/filters.tpl

@@ -30,7 +30,7 @@
 				<div class="mb-3">
 					<label class="form-label" for="filter-cid">[[flags:filter-cid]]</label>
 					<div class="input-group">
-					<!-- IMPORT partials/category-filter.tpl -->
+					<!-- IMPORT partials/category/filter-dropdown-left.tpl -->
 					</div>
 				</div>
 				<div class="mb-3">

package/templates/partials/groups/admin.tpl

@@ -82,7 +82,7 @@
 			<label class="form-label" for="memberPostCids">[[groups:details.member-post-cids]]</label>
 			<div class="d-flex gap-1">
 				<div class="member-post-cids-selector">
-					<!-- IMPORT partials/category-selector.tpl -->
+					<!-- IMPORT partials/category/selector-dropdown-left.tpl -->
 				</div>
 				<input id="memberPostCids" type="text" class="form-control" value="{group.memberPostCids}">
 			</div>

package/templates/partials/groups/badge.tpl

@@ -1 +1 @@
-<a href="{config.relative_path}/groups/{./slug}" class="badge rounded-1 text-uppercase text-truncate text-decoration-none" style="max-width: 150px;color:{./textColor};background-color: {./labelColor};"><i class="fa {{{ if ./icon }}}{./icon}{{{ if ./userTitle}}} me-1{{{ end }}}{{{else}}}hidden{{{ end }}}"></i><span class="badge-text">{{{ if ./userTitle }}}{./userTitle}{{{ end }}}</span></a>
+<a href="{config.relative_path}/groups/{./slug}" class="badge rounded-1 text-uppercase text-truncate text-decoration-none" style="max-width: 150px;color:{./textColor};background-color: {./labelColor};"><i class="fa {{{ if ./icon }}}{./icon}{{{ if ./userTitle}}} me-1{{{ end }}}{{{else}}}hidden{{{ end }}}"></i><span class="badge-text align-text-bottom">{{{ if ./userTitle }}}{./userTitle}{{{ end }}}</span></a>

package/templates/partials/groups/sidebar-left.tpl

@@ -1,5 +1,5 @@
 <div class="flex-0 pe-2 border-end-md text-sm mb-3 flex-basis-md-200">
-	<div class="nav sticky-top d-flex flex-row flex-md-column flex-wrap gap-1" style="z-index: 1;">
+	<div class="nav sticky-md-top d-flex flex-row flex-md-column flex-wrap gap-1" style="top: 1rem; z-index: 1;">
 		<button data-bs-toggle="tab" data-bs-target="#groups-posts" class="btn-ghost fw-semibold {{{ if template.groups/details }}}active{{{ end }}}">
 			<div class="flex-1">[[global:posts]]</div>
 		</button>