nodebb-theme-harmony 2.0.0-pre.2 → 2.0.0-pre.21

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "2.0.0-pre.2",
+  "version": "2.0.0-pre.21",
   "nbbpm": {
-    "compatibility": "^3.5.0"
+    "compatibility": "^3.7.0"
   },
   "description": "Harmony theme for NodeBB",
   "main": "library.js",

package/public/harmony.js

@@ -65,11 +65,8 @@ $(document).ready(function () {
 			const bottomBar = $('[component="bottombar"]');
 			const $body = $('body');
 			const $window = $(window);
-			$body.on('shown.bs.dropdown', '.sticky-tools', function () {
-				bottomBar.addClass('hidden');
-			});
-			$body.on('hidden.bs.dropdown', '.sticky-tools', function () {
-				bottomBar.removeClass('hidden');
+			$body.on('shown.bs.dropdown hidden.bs.dropdown', '.sticky-tools', function () {
+				bottomBar.toggleClass('hidden', $(this).find('.dropdown-menu.show').length);
 			});
 			function isSearchVisible() {
 				return !!$('[component="bottombar"] [component="sidebar/search"] .search-dropdown.show').length;

package/scss/header.scss

@@ -1,5 +1,5 @@
 // hide brand/title on user and group details pages so it doesnt break covers
-.page-user, .template-groups-details {
+body[class*="template-account-"], .template-chats, .template-groups-details {
 	.brand-container {
 		display: none;
 	}

package/scss/modules/topics-list.scss

@@ -1,8 +1,8 @@
 ul.topics-list, ul.categories-list {
 	li {
 		&.deleted {
-			.meta { display: none!important; }
-			.title a { text-decoration: line-through;}
+			.meta, .topic-thumbs { display: none!important; }
+			opacity: 0.65;
 		}
 
 		&.selected {

package/scss/overrides.scss

@@ -35,6 +35,8 @@ $text-muted: 		$gray-600 !default;
 $border-color: 		$gray-200 !default;
 $link-color: 		#0951be !default;
 
+$form-check-input-border: var(--bs-border-width) solid $gray-500 !default;
+
 // no caret on dropdown-toggle
 $enable-caret: false;
 

package/scss/topic.scss

@@ -35,10 +35,7 @@ body.template-topic {
 				&.selected .post-container {
 					background-color: mix($body-bg, $body-color, 90%);
 				}
-				&.deleted .post-container .content {
-					opacity: .75;
-					text-decoration: line-through;
-				}
+				&.deleted .post-container .content { opacity: .65; }
 
 				[component="post/content"] {
 					@include fix-lists();

package/templates/account/settings.tpl

@@ -112,8 +112,8 @@
 		<div class="mb-2">
 			<label class="form-label text-sm" for="categoryTopicSort">[[user:category-topic-sort]]</label>
 			<select class="form-select form-select-sm" id="categoryTopicSort" data-property="categoryTopicSort">
-				<option value="newest_to_oldest" {{{ if (settings.categoryTopicSort == "newest_to_oldest") }}}selected{{{ end }}}>[[topic:newest-to-oldest]]</option>
-				<option value="oldest_to_newest" {{{ if (settings.categoryTopicSort == "oldest_to_newest") }}}selected{{{ end }}}>[[topic:oldest-to-newest]]</option>
+				<option value="recently_replied" {{{ if (settings.categoryTopicSort == "recently_replied") }}}selected{{{ end }}}>[[topic:recently-replied]]</option>
+				<option value="recently_created" {{{ if (settings.categoryTopicSort == "recently_created") }}}selected{{{ end }}}>[[topic:recently-created]]</option>
 				<option value="most_posts" {{{ if (settings.categoryTopicSort == "most_posts") }}}selected{{{ end }}}>[[topic:most-posts]]</option>
 				<option value="most_votes" {{{ if (settings.categoryTopicSort == "most_votes") }}}selected{{{ end }}}>[[topic:most-votes]]</option>
 				<option value="most_views" {{{ if (settings.categoryTopicSort == "most_views") }}}selected{{{ end }}}>[[topic:most-views]]</option>

package/templates/account/theme.tpl

@@ -13,7 +13,7 @@
 	</div>
 
 	<div class="form-check form-switch mb-3">
-		<input type="checkbox" class="form-check-input" id="enableBreadcrumbs" name="enableBreadcrumbs" />
+		<input type="checkbox" class="form-check-input" id="enableBreadcrumbs" name="enableBreadcrumbs" {{{ if theme.enableBreadcrumbs }}}checked{{{ end }}} />
 		<label for="enableBreadcrumbs" class="form-check-label">[[themes/harmony:settings.enableBreadcrumbs]]</label>
 	</div>
 

package/templates/category.tpl

@@ -9,7 +9,7 @@
 		<h1 class="tracking-tight fs-2 fw-semibold mb-0 text-center">{./name}</h1>
 	</div>
 	{{{ if ./descriptionParsed }}}
-	<div class="description text-muted text-sm w-100 {{{ if config.theme.centerHeaderElements }}}text-center{{{ end }}}">
+	<div class="description text-secondary text-sm w-100 {{{ if config.theme.centerHeaderElements }}}text-center{{{ end }}}">
 		{./descriptionParsed}
 	</div>
 	{{{ end }}}

package/templates/flags/detail.tpl

@@ -3,7 +3,7 @@
 <div class="d-flex flex-column flex-md-row">
 	<div class="flex-shrink-0 d-flex flex-column gap-3 border-end-md text-sm mb-3 pe-4" style="flex-basis: 240px !important;">
 		<div class="d-grid gap-1">
-			<a class="btn btn-ghost ff-secondary border btn-sm justify-content-start" href="{config.relative_path}/{type_path}/{targetId}">
+			<a class="btn btn-ghost ff-secondary border btn-sm justify-content-start" href="{config.relative_path}/{type_path}/{encodeURIComponent(targetId)}">
 				<i class="fa fa-fw fa-external-link text-primary"></i>
 				[[flags:go-to-target]]
 			</a>

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

@@ -67,10 +67,14 @@
 
 		{{{ if (loggedIn && (!isSelf && !banned)) }}}
 		<hr class="w-100 my-2"/>
-		<a href="#" component="account/flag" class="btn-ghost-sm ff-secondary">
+		<a {{{if flagId }}}hidden{{{end}}} href="#" component="account/flag" class="btn-ghost-sm ff-secondary">
 			<i class="flex-shrink-0 fa-solid fa-flag text-danger"></i>
 			<div class="flex-grow-1 text-nowrap">[[user:flag-profile]]</div>
 		</a>
+		<a {{{if !flagId }}}hidden{{{end}}} href="#" component="account/already-flagged" class="btn-ghost-sm ff-secondary" data-flag-id="{flagId}">
+			<i class="flex-shrink-0 fa-solid fa-flag text-danger"></i>
+			<div class="flex-grow-1 text-nowrap">[[user:profile-flagged]]</div>
+		</a>
 		<a href="#" component="account/block" class="btn-ghost-sm ff-secondary {{{ if isBlocked }}}hidden{{{ end }}}">
 			<i class="flex-shrink-0 fa-solid fa-ban text-danger"></i>
 			<div class="flex-grow-1 text-nowrap">[[user:block-user]]</div>

package/templates/partials/buttons/newTopic.tpl

@@ -4,7 +4,7 @@
 </button>
 <noscript>
 	<input type="checkbox" class="hidden" id="category-dropdown-check" aria-hidden="true">
-	<ul component="category/list" class="dropdown-menu p-1 text-sm category-dropdown-menu" role="menu">
+	<ul component="category/list" class="dropdown-menu p-1 text-sm category-dropdown-menu ghost-scrollbar" role="menu">
 		{{{each categories}}}
 		<li role="presentation" class="category {{{if categories.disabledClass}}}disabled{{{end}}}">
 			<a role="menu-item" href="{config.relative_path}/compose?cid={categories.cid}">{categories.level}

package/templates/partials/category/filter-dropdown-content.tpl

@@ -8,30 +8,34 @@
     <i class="fa fa-fw fa-list text-primary"></i>
     <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 form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
 </div>
-<ul component="category/list" class="dropdown-menu p-1 text-sm category-dropdown-menu" role="menu">
-    <li role="presentation" class="category" data-cid="all">
-        <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="{{{ if allCategoriesUrl }}}{config.relative_path}/{allCategoriesUrl}{{{ else }}}#{{{ end }}}">
-            <div class="flex-grow-1">[[unread:all-categories]]</div>
-            <i component="category/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i>
-        </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 rounded-1 d-flex align-items-center gap-2 {{{ if ./disabledClass }}}disabled{{{ end }}}" role="menuitem" href="#">
-            {./level}
-            <span component="category-markup" class="flex-grow-1" style="{{{ if ./match }}}font-weight: bold;{{{end}}}">
-                <div class="category-item d-inline-flex align-items-center gap-1">
-                    {{{ if ./icon }}}
-                    {buildCategoryIcon(@value, "24px", "rounded-circle")}
-                    {{{ end }}}
-                    {./name}
-                </div>
-            </span>
-            <i component="category/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{ if !./selected }}}invisible{{{ end }}}"></i>
-        </a>
-    </li>
-    {{{end}}}
-</ul>
+
+<div class="dropdown-menu p-1">
+    <ul component="category/list" class="list-unstyled mb-0 text-sm category-dropdown-menu ghost-scrollbar" role="menu">
+        <li role="presentation" class="category" data-cid="all">
+            <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="{{{ if allCategoriesUrl }}}{config.relative_path}/{allCategoriesUrl}{{{ else }}}#{{{ end }}}">
+                <div class="flex-grow-1">[[unread:all-categories]]</div>
+                <i component="category/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i>
+            </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 rounded-1 d-flex align-items-center gap-2 {{{ if ./disabledClass }}}disabled{{{ end }}}" role="menuitem" href="#">
+                {./level}
+                <span component="category-markup" class="flex-grow-1" style="{{{ if ./match }}}font-weight: bold;{{{end}}}">
+                    <div class="category-item d-inline-flex align-items-center gap-1">
+                        {{{ if ./icon }}}
+                        {buildCategoryIcon(@value, "24px", "rounded-circle")}
+                        {{{ end }}}
+                        {./name}
+                    </div>
+                </span>
+                <i component="category/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{ if !./selected }}}invisible{{{ end }}}"></i>
+            </a>
+        </li>
+        {{{end}}}
+    </ul>
+</div>

package/templates/partials/category/selector-dropdown-content.tpl

@@ -11,25 +11,29 @@
         {{{ end }}}
     </span>
 </button>
+
 <div component="category-selector-search" class="hidden position-absolute">
     <input type="text" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
 </div>
-<ul component="category/list" class="dropdown-menu p-1 text-sm category-dropdown-menu" role="menu">
-    <li component="category/no-matches" role="presentation" class="category hidden">
-        <a class="dropdown-item rounded-1" role="menuitem">[[search:no-matches]]</a>
-    </li>
-    {{{ each categoryItems }}}
-    <li role="presentation" class="category {{{ if ./disabledClass }}}disabled {{{ end }}}" data-cid="{./cid}" data-name="{./name}" data-parent-cid="{./parentCid}">
-        <a class="dropdown-item rounded-1 {{{ if ./disabledClass }}}disabled{{{ end }}}" role="menuitem" href="#">{./level}
-            <span component="category-markup" style="{{{ if ./match }}}font-weight: bold;{{{end}}}">
-                <div class="category-item d-inline-flex align-items-center gap-1">
-                    {{{ if ./icon }}}
-                    {buildCategoryIcon(@value, "24px", "rounded-circle")}
-                    {{{ end }}}
-                    {./name}
-                </div>
-            </span>
-        </a>
-    </li>
-    {{{ end }}}
-</ul>
+
+<div class="dropdown-menu p-1">
+    <ul component="category/list" class="list-unstyled mb-0 text-sm category-dropdown-menu ghost-scrollbar" role="menu">
+        <li component="category/no-matches" role="presentation" class="category hidden">
+            <a class="dropdown-item rounded-1" role="menuitem">[[search:no-matches]]</a>
+        </li>
+        {{{ each categoryItems }}}
+        <li role="presentation" class="category {{{ if ./disabledClass }}}disabled {{{ end }}}" data-cid="{./cid}" data-name="{./name}" data-parent-cid="{./parentCid}">
+            <a class="dropdown-item rounded-1 {{{ if ./disabledClass }}}disabled{{{ end }}}" role="menuitem" href="#">{./level}
+                <span component="category-markup" style="{{{ if ./match }}}font-weight: bold;{{{end}}}">
+                    <div class="category-item d-inline-flex align-items-center gap-1">
+                        {{{ if ./icon }}}
+                        {buildCategoryIcon(@value, "24px", "rounded-circle")}
+                        {{{ end }}}
+                        {./name}
+                    </div>
+                </span>
+            </a>
+        </li>
+        {{{ end }}}
+    </ul>
+</div>

package/templates/partials/category/sort.tpl

@@ -6,33 +6,33 @@
 
 	<ul class="dropdown-menu p-1 text-sm" role="menu">
 		<li>
-			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" data-sort="newest_to_oldest" role="menuitem">
-				<span class="flex-grow-1">[[topic:newest-to-oldest]]</span>
-				<i class="flex-shrink-0 fa fa-fw text-muted"></i>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" data-sort="recently_replied" role="menuitem">
+				<span class="flex-grow-1">[[topic:recently-replied]]</span>
+				<i class="flex-shrink-0 fa fa-fw text-secondary"></i>
 			</a>
 		</li>
 		<li>
-			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" data-sort="oldest_to_newest" role="menuitem">
-				<span class="flex-grow-1">[[topic:oldest-to-newest]]</span>
-				<i class="flex-shrink-0 fa fa-fw text-muted"></i>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" data-sort="recently_created" role="menuitem">
+				<span class="flex-grow-1">[[topic:recently-created]]</span>
+				<i class="flex-shrink-0 fa fa-fw text-secondary"></i>
 			</a>
 		</li>
 		<li>
 			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" data-sort="most_posts" role="menuitem">
 				<span class="flex-grow-1">[[topic:most-posts]]</span>
-				<i class="flex-shrink-0 fa fa-fw text-muted"></i>
+				<i class="flex-shrink-0 fa fa-fw text-secondary"></i>
 			</a>
 		</li>
 		<li>
 			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" data-sort="most_votes" role="menuitem">
 				<span class="flex-grow-1">[[topic:most-votes]]</span>
-				<i class="flex-shrink-0 fa fa-fw text-muted"></i>
+				<i class="flex-shrink-0 fa fa-fw text-secondary"></i>
 			</a>
 		</li>
 		<li>
 			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" data-sort="most_views" role="menuitem">
 				<span class="flex-grow-1">[[topic:most-views]]</span>
-				<i class="flex-shrink-0 fa fa-fw text-muted"></i>
+				<i class="flex-shrink-0 fa fa-fw text-secondary"></i>
 			</a>
 		</li>
 	</ul>

package/templates/partials/category/tools.tpl

@@ -8,28 +8,28 @@
 	<ul class="dropdown-menu p-1 text-sm" role="menu">
 		<li>
 			<a component="topic/mark-unread-for-all" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem">
-				<i class="fa fa-fw text-muted fa-inbox"></i> [[topic:thread-tools.markAsUnreadForAll]]
+				<i class="fa fa-fw fa-inbox text-secondary"></i> [[topic:thread-tools.markAsUnreadForAll]]
 			</a>
 		</li>
 		<li>
 			<a component="topic/pin" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem">
-				<i class="fa fa-fw text-muted fa-thumb-tack"></i> [[topic:thread-tools.pin]]
+				<i class="fa fa-fw fa-thumb-tack text-secondary"></i> [[topic:thread-tools.pin]]
 			</a>
 		</li>
 		<li>
 			<a component="topic/unpin" href="#" class="hidden dropdown-item rounded-1" role="menuitem">
-				<i class="fa fa-fw text-muted fa-thumb-tack fa-rotate-90"></i> [[topic:thread-tools.unpin]]
+				<i class="fa fa-fw fa-thumb-tack fa-rotate-90 text-secondary"></i> [[topic:thread-tools.unpin]]
 			</a>
 		</li>
 
 		<li>
 			<a component="topic/lock" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem">
-				<i class="fa fa-fw text-muted fa-lock"></i> [[topic:thread-tools.lock]]
+				<i class="fa fa-fw fa-lock text-secondary"></i> [[topic:thread-tools.lock]]
 			</a>
 		</li>
 		<li>
 			<a component="topic/unlock" href="#" class="hidden dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem">
-				<i class="fa fa-fw text-muted fa-unlock"></i> [[topic:thread-tools.unlock]]
+				<i class="fa fa-fw fa-unlock text-secondary"></i> [[topic:thread-tools.unlock]]
 			</a>
 		</li>
 
@@ -37,25 +37,25 @@
 
 		<li>
 			<a component="topic/move" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem">
-				<i class="fa fa-fw text-muted fa-arrows"></i> [[topic:thread-tools.move]]
+				<i class="fa fa-fw fa-arrows text-secondary"></i> [[topic:thread-tools.move]]
 			</a>
 		</li>
 		{{{if template.category}}}
 		<li>
 			<a component="topic/move-all" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem">
-				<i class="fa fa-fw text-muted fa-arrows"></i> [[topic:thread-tools.move-all]]
+				<i class="fa fa-fw fa-arrows text-secondary"></i> [[topic:thread-tools.move-all]]
 			</a>
 		</li>
 		{{{end}}}
 		<li>
 			<a component="topic/merge" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem">
-				<i class="fa fa-fw text-muted fa-code-fork"></i> [[topic:thread-tools.merge]]
+				<i class="fa fa-fw fa-code-fork text-secondary"></i> [[topic:thread-tools.merge]]
 			</a>
 		</li>
 
 		<li>
 			<a component="topic/tag" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem">
-				<i class="fa fa-fw text-muted fa-tag"></i> [[topic:thread-tools.tag]]
+				<i class="fa fa-fw fa-tag text-secondary"></i> [[topic:thread-tools.tag]]
 			</a>
 		</li>
 
@@ -63,24 +63,24 @@
 
 		<li>
 			<a component="topic/delete" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem">
-				<i class="fa fa-fw text-muted fa-trash-o"></i> [[topic:thread-tools.delete]]
+				<i class="fa fa-fw fa-trash-o text-secondary"></i> [[topic:thread-tools.delete]]
 			</a>
 		</li>
 		<li>
 			<a component="topic/restore" href="#" class="hidden dropdown-item rounded-1" role="menuitem">
-				<i class="fa fa-fw text-muted fa-history"></i> [[topic:thread-tools.restore]]
+				<i class="fa fa-fw fa-history text-secondary"></i> [[topic:thread-tools.restore]]
 			</a>
 		</li>
 		<li>
 			<a component="topic/purge" href="#" class="hidden dropdown-item rounded-1" role="menuitem">
-				<i class="fa fa-fw text-muted fa-eraser"></i> [[topic:thread-tools.purge]]
+				<i class="fa fa-fw fa-eraser text-secondary"></i> [[topic:thread-tools.purge]]
 			</a>
 		</li>
 
 		{{{each thread_tools}}}
 		<li>
 			<a href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {thread_tools.class}" role="menuitem">
-				<i class="fa fa-fw {thread_tools.icon}"></i>
+				<i class="fa fa-fw {thread_tools.icon} text-secondary"></i>
 				{thread_tools.title}</a>
 		</li>
 		{{{end}}}

package/templates/partials/category/watch.tpl

@@ -15,10 +15,10 @@
 			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="category/watching" data-state="watching" role="menuitem">
 				<div class="flex-grow-1 d-flex flex-column">
 					<span class="d-flex align-items-center gap-2">
-						<i class="flex-shrink-0 fa fa-fw text-muted fa-bell-o"></i>
+						<i class="flex-shrink-0 fa fa-fw fa-bell-o text-secondary"></i>
 						<span class="flex-grow-1 fw-semibold">[[category:watching]]</span>
 					</span>
-					<div class="help-text text-muted text-xs">[[category:watching.description]]</div>
+					<div class="help-text text-secondary text-xs">[[category:watching.description]]</div>
 				</div>
 				<span class="flex-shrink-0"><i component="category/watching/check" class="fa fa-fw {{{ if ./isWatched }}}fa-check{{{ end }}}"></i></span>
 			</a>
@@ -28,10 +28,10 @@
 			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="category/tracking" data-state="tracking" role="menuitem">
 				<div class="flex-grow-1 d-flex flex-column">
 					<span class="d-flex align-items-center gap-2">
-						<i class="flex-shrink-0 fa fa-fw text-muted fa-inbox"></i>
+						<i class="flex-shrink-0 fa fa-fw fa-inbox text-secondary"></i>
 						<span class="flex-grow-1 fw-semibold">[[category:tracking]]</span>
 					</span>
-					<div class="help-text text-muted text-xs">[[category:tracking.description]]</div>
+					<div class="help-text text-secondary text-xs">[[category:tracking.description]]</div>
 				</div>
 				<span class="flex-shrink-0"><i component="category/tracking/check" class="fa fa-fw {{{ if ./isTracked }}}fa-check{{{ end }}}"></i></span>
 			</a>
@@ -41,10 +41,10 @@
 			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="category/notwatching" data-state="notwatching" role="menuitem">
 				<div class="flex-grow-1 d-flex flex-column">
 					<span class="d-flex align-items-center gap-2">
-						<i class="flex-shrink-0 fa fa-fw text-muted fa-clock-o"></i>
+						<i class="flex-shrink-0 fa fa-fw fa-clock-o text-secondary"></i>
 						<span class="flex-grow-1 fw-semibold">[[category:not-watching]]</span>
 					</span>
-					<div class="help-text text-muted text-xs">[[category:not-watching.description]]</div>
+					<div class="help-text text-secondary text-xs">[[category:not-watching.description]]</div>
 				</div>
 				<span class="flex-shrink-0"><i component="category/notwatching/check" class="fa fa-fw {{{ if ./isNotWatched }}}fa-check{{{ end }}}"></i></span>
 			</a>
@@ -54,10 +54,10 @@
 			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="category/ignoring" data-state="ignoring" role="menuitem">
 				<div class="flex-grow-1 d-flex flex-column">
 					<span class="d-flex align-items-center gap-2">
-						<i class="flex-shrink-0 fa fa-fw text-muted fa-eye-slash"></i>
+						<i class="flex-shrink-0 fa fa-fw fa-eye-slash text-secondary"></i>
 						<span class="flex-grow-1 fw-semibold">[[category:ignoring]]</span>
 					</span>
-					<div class="help-text text-muted text-xs">[[category:ignoring.description]]</div>
+					<div class="help-text text-secondary text-xs">[[category:ignoring.description]]</div>
 				</div>
 				<span class="flex-shrink-0"><i component="category/ignoring/check" class="fa fa-fw {{{ if ./isIgnored }}}fa-check{{{ end }}}"></i></span>
 			</a>

package/templates/partials/flags/bulk-actions.tpl

@@ -5,5 +5,6 @@
 	<ul class="dropdown-menu dropdown-menu-end p-1 text-sm" role="menu">
 		<li><a href="#" class="dropdown-item rounded-1" data-action="bulk-assign" role="menuitem">[[flags:assign-to-me]]</a></li>
 		<li><a href="#" class="dropdown-item rounded-1" data-action="bulk-mark-resolved" role="menuitem">[[flags:bulk-resolve]]</a></li>
+		<li><a href="#" class="dropdown-item rounded-1" data-action="bulk-purge" role="menuitem">[[flags:bulk-purge]]</a></li>
 	</ul>
 </div>

package/templates/partials/flags/filters.tpl

@@ -27,24 +27,27 @@
 		<div component="category-selector-search" class="hidden position-absolute">
 			<input type="text" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
 		</div>
-		<ul component="category/list" class="dropdown-menu p-1 text-sm category-dropdown-menu" role="menu">
-			{{{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 rounded-1 d-flex align-items-center gap-2" role="menuitem" href="#">
-					{../level}
-					<span component="category-markup" class="flex-grow-1" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">
-						<div class="category-item d-inline-flex align-items-center gap-1">
-							{{{ if ./icon }}}
-							{buildCategoryIcon(@value, "24px", "rounded-circle")}
-							{{{ end }}}
-							{./name}
-						</div>
-					</span>
-					<i component="category/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{ if !../selected }}}invisible{{{ end }}}"></i>
-				</a>
-			</li>
-			{{{end}}}
-		</ul>
+
+		<div class="dropdown-menu p-1">
+			<ul component="category/list" class="list-unstyled mb-0 text-sm category-dropdown-menu ghost-scrollbar" role="menu">
+				{{{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 rounded-1 d-flex align-items-center gap-2" role="menuitem" href="#">
+						{../level}
+						<span component="category-markup" class="flex-grow-1" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">
+							<div class="category-item d-inline-flex align-items-center gap-1">
+								{{{ if ./icon }}}
+								{buildCategoryIcon(@value, "24px", "rounded-circle")}
+								{{{ end }}}
+								{./name}
+							</div>
+						</span>
+						<i component="category/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{ if !../selected }}}invisible{{{ end }}}"></i>
+					</a>
+				</li>
+				{{{end}}}
+			</ul>
+		</div>
 	</div>
 
 	<div class="btn-group bottom-sheet">

package/templates/partials/mobile-footer.tpl

@@ -1,4 +1,4 @@
-<div component="bottombar" class="bottombar d-flex flex-column d-lg-none fixed-bottom ff-secondary gap-1 align-items-center">
+<div component="bottombar" class="bottombar d-flex flex-column d-lg-none fixed-bottom ff-secondary gap-1 align-items-center" style="bottom: 0px;">
 
 	<!-- IMPORT partials/topic/navigator-mobile.tpl -->
 

package/templates/partials/posts_list_item.tpl

@@ -1,6 +1,6 @@
 <li component="post" class="posts-list-item  {{{ if ./deleted }}} deleted{{{ else }}}{{{ if ./topic.deleted }}} deleted{{{ end }}}{{{ end }}}{{{ if ./topic.scheduled }}} scheduled{{{ end }}}" data-pid="{./pid}" data-uid="{./uid}">
     <hr/>
-    <a class="topic-title fw-semibold fs-5 mb-2 text-reset text-break d-block" href="{config.relative_path}/post/{./pid}">
+    <a class="topic-title fw-semibold fs-5 mb-2 text-reset text-break d-block" href="{config.relative_path}/post/{encodeURIComponent(./pid)}">
     {{{ if ./isMainPost }}}<i class="fa fa-book text-muted" title="[[topic:topic]]"></i> {{{ end }}}{./topic.title}
     </a>
 

package/templates/partials/quick-search-results.tpl

@@ -9,7 +9,7 @@
 </div>
 {{{ end }}}
 
-<ul id="quick-search-results" class="quick-search-results list-unstyled mb-0 p-0 pe-1 overflow-auto overscroll-behavior-contain ff-base" style="max-width:  400px; max-height: 500px;">
+<ul id="quick-search-results" class="quick-search-results list-unstyled mb-0 p-0 pe-1 overflow-auto overscroll-behavior-contain ff-base ghost-scrollbar" style="max-width:  400px; max-height: 500px;">
 	<li role="separator" class="dropdown-divider d-none d-md-block"></li>
 	{{{ each posts }}}
 	<li data-tid="{posts.topic.tid}" data-pid="{posts.pid}" class="d-flex flex-column gap-1">

package/templates/partials/search-filters.tpl

@@ -13,7 +13,7 @@
 						<input type="text" class="form-control" component="category/filter/search" placeholder="[[search:type-a-category]]">
 					</div>
 				</li>
-				<div component="category/list" class="overflow-auto" style="max-height: 350px;"></div>
+				<div component="category/list" class="overflow-auto ghost-scrollbar" style="max-height: 350px;"></div>
 				<div class="px-3 py-1">
 					<div class="form-check">
 						<input id="search-children" class="form-check-input" type="checkbox"/>

package/templates/partials/sidebar/chats.tpl

@@ -10,7 +10,7 @@
 </a>
 <ul class="chats-dropdown dropdown-menu p-1 shadow" role="menu">
 	<li>
-		<div component="chat/list" class="list-container chats-list overscroll-behavior-contain p-0 pe-1 ff-base">
+		<div component="chat/list" class="list-container chats-list overscroll-behavior-contain p-0 pe-1 ff-base ghost-scrollbar">
 			<div class="rounded-1">
 				<div class="d-flex gap-1 justify-content-between">
 					<div class="dropdown-item p-2 d-flex gap-2 placeholder-wave">

package/templates/partials/sidebar/drafts.tpl

@@ -10,7 +10,7 @@
 </a>
 <ul class="drafts-dropdown dropdown-menu p-1 shadow" role="menu">
 	<li>
-		<div component="drafts/list" class="list-container draft-list list-unstyled d-flex flex-column overscroll-behavior-contain gap-1 pe-1">
+		<div component="drafts/list" class="list-container draft-list list-unstyled d-flex flex-column overscroll-behavior-contain gap-1 pe-1 ghost-scrollbar">
 			<div class="dropdown-item rounded-1 p-2 d-flex gap-2 placeholder-wave">
 				<div class="d-flex flex-grow-1 flex-column w-100">
 					<div class="text-xs placeholder col-3">&nbsp;</div>

package/templates/partials/sidebar/notifications.tpl

@@ -10,7 +10,7 @@
 </a>
 <ul class="notifications-dropdown dropdown-menu p-1 shadow" role="menu">
 	<li>
-		<div component="notifications/list" class="list-container notification-list overscroll-behavior-contain pe-1 ff-base">
+		<div component="notifications/list" class="list-container notification-list overscroll-behavior-contain pe-1 ff-base ghost-scrollbar">
 			<div class="mb-2 p-1">
 				<div class="d-flex gap-1 justify-content-between">
 					<div class="d-flex gap-2 flex-grow-1 placeholder-wave">