nodebb-theme-harmony 2.0.0-pre.1 → 2.0.0-pre.11

package/library.js

@@ -11,6 +11,7 @@ const library = module.exports;
 
 const defaults = {
 	enableQuickReply: 'on',
+	enableBreadcrumbs: 'on',
 	centerHeaderElements: 'off',
 	mobileTopicTeasers: 'off',
 	stickyToolbar: 'on',
@@ -129,11 +130,6 @@ library.defineWidgetAreas = async function (areas) {
 			template: 'account/profile.tpl',
 			location: 'profile-aboutme-after',
 		},
-		{
-			name: 'Chat Header',
-			template: 'chats.tpl',
-			location: 'header',
-		},
 	]);
 
 	return areas;
@@ -147,6 +143,7 @@ library.loadThemeConfig = async function (uid) {
 
 	const config = { ...defaults, ...themeConfig, ...(_.pick(userConfig, Object.keys(defaults))) };
 	config.enableQuickReply = config.enableQuickReply === 'on';
+	config.enableBreadcrumbs = config.enableBreadcrumbs === 'on';
 	config.centerHeaderElements = config.centerHeaderElements === 'on';
 	config.mobileTopicTeasers = config.mobileTopicTeasers === 'on';
 	config.stickyToolbar = config.stickyToolbar === 'on';

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "2.0.0-pre.1",
+  "version": "2.0.0-pre.11",
   "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/topic.scss

@@ -1,4 +1,7 @@
 body.template-topic {
+	.breadcrumb .breadcrumb-item:last-child {
+		display: none;
+	}
 	.topic {
 		.posts-container {
 			max-width: 960px;
@@ -32,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

@@ -12,6 +12,11 @@
 		<label class="form-check-label" for="enableQuickReply">[[themes/harmony:settings.enableQuickReply]]</label>
 	</div>
 
+	<div class="form-check form-switch mb-3">
+		<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>
+
 	<div class="form-check form-switch mb-3">
 		<input class="form-check-input" type="checkbox" role="switch" id="centerHeaderElements" name="centerHeaderElements" {{{ if theme.centerHeaderElements }}}checked{{{ end }}}>
 		<label class="form-check-label" for="centerHeaderElements">[[themes/harmony:settings.centerHeaderElements]]</label>

package/templates/admin/plugins/harmony.tpl

@@ -8,6 +8,10 @@
 					<input type="checkbox" class="form-check-input" id="enableQuickReply" name="enableQuickReply" />
 					<label for="enableQuickReply" class="form-check-label">[[themes/harmony:settings.enableQuickReply]]</label>
 				</div>
+				<div class="form-check form-switch">
+					<input type="checkbox" class="form-check-input" id="enableBreadcrumbs" name="enableBreadcrumbs" />
+					<label for="enableBreadcrumbs" class="form-check-label">[[themes/harmony:settings.enableBreadcrumbs]]</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">[[themes/harmony:settings.centerHeaderElements]]</label>

package/templates/category.tpl

@@ -1,5 +1,7 @@
 <!-- IMPORT partials/breadcrumbs-json-ld.tpl -->
+{{{ if config.theme.enableBreadcrumbs }}}
 <!-- IMPORT partials/breadcrumbs.tpl -->
+{{{ end }}}
 
 <div class="category-header d-flex flex-column gap-2">
 	<div class="d-flex gap-2 align-items-center mb-1 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
@@ -7,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/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/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/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">