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

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-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "2.0.0-pre.1",
+  "version": "2.0.0-pre.10",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "nodebb-theme-harmony",
-      "version": "2.0.0-pre.1",
+      "version": "2.0.0-pre.10",
       "license": "MIT",
       "dependencies": {
         "@fontsource/inter": "5.0.15",

package/package.json

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

package/templates/partials/sidebar/user-menu.tpl

@@ -15,44 +15,44 @@
 		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.online }}}selected{{{ end }}}" data-status="online" role="menuitem">
 			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status online"></span>
 			<span class="flex-grow-1">[[global:online]]</span>
-			<i class="fa-solid fa-check text-muted flex-shrink-0" aria-label="[[global:selected]]"></i>
+			<i class="fa-solid fa-check text-secondary flex-shrink-0" aria-label="[[global:selected]]"></i>
 		</a>
 	</li>
 	<li>
 		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.away }}}selected{{{ end }}}" data-status="away" role="menuitem">
 			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status away"></span>
 			<span class="flex-grow-1">[[global:away]]</span>
-			<i class="fa-solid fa-check text-muted flex-shrink-0"><span class="visually-hidden"></span>[[global:selected]]</span></i>
+			<i class="fa-solid fa-check text-secondary flex-shrink-0"><span class="visually-hidden"></span>[[global:selected]]</span></i>
 		</a>
 	</li>
 	<li>
 		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.dnd }}}selected{{{ end }}}" data-status="dnd" role="menuitem">
 			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status dnd"></span>
 			<span class="flex-grow-1">[[global:dnd]]</span>
-			<i class="fa-solid fa-check text-muted flex-shrink-0"></i>
+			<i class="fa-solid fa-check text-secondary flex-shrink-0"></i>
 		</a>
 	</li>
 	<li>
 		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.offline }}}selected{{{ end }}}" data-status="offline" role="menuitem">
 			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status offline"></span>
 			<span class="flex-grow-1">[[global:invisible]]</span>
-			<i class="fa-solid fa-check text-muted flex-shrink-0"></i>
+			<i class="fa-solid fa-check text-secondary flex-shrink-0"></i>
 		</a>
 	</li>
 	<li role="presentation" class="dropdown-divider"></li>
 	<li>
 		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/user/{user.userslug}/bookmarks" role="menuitem">
-			<i class="fa fa-fw fa-bookmark text-muted"></i> <span>[[user:bookmarks]]</span>
+			<i class="fa fa-fw fa-bookmark text-secondary"></i> <span>[[user:bookmarks]]</span>
 		</a>
 	</li>
 	<li>
 		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="header/profilelink/edit" href="{relative_path}/user/{user.userslug}/edit" role="menuitem">
-			<i class="fa fa-fw fa-edit text-muted"></i> <span>[[user:edit-profile]]</span>
+			<i class="fa fa-fw fa-edit text-secondary"></i> <span>[[user:edit-profile]]</span>
 		</a>
 	</li>
 	<li>
 		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="header/profilelink/settings" href="{relative_path}/user/{user.userslug}/settings" role="menuitem">
-			<i class="fa fa-fw fa-gear text-muted"></i> <span>[[user:settings]]</span>
+			<i class="fa fa-fw fa-gear text-secondary"></i> <span>[[user:settings]]</span>
 		</a>
 	</li>
 	{{{ if showModMenu }}}
@@ -60,31 +60,31 @@
 	<li><h6 class="dropdown-header text-xs">[[pages:moderator-tools]]</h6></li>
 	<li>
 		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/flags" role="menuitem">
-			<i class="fa fa-fw fa-flag text-muted"></i> <span>[[pages:flagged-content]]</span>
+			<i class="fa fa-fw fa-flag text-secondary"></i> <span>[[pages:flagged-content]]</span>
 		</a>
 	</li>
 	<li>
 		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/post-queue" role="menuitem">
-			<i class="fa fa-fw fa-list-alt text-muted"></i> <span>[[pages:post-queue]]</span>
+			<i class="fa fa-fw fa-list-alt text-secondary"></i> <span>[[pages:post-queue]]</span>
 		</a>
 	</li>
 	{{{ if registrationQueueEnabled }}}
 	<li>
 		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/registration-queue" role="menuitem">
-			<i class="fa fa-fw fa-list-alt text-muted"></i> <span>[[pages:registration-queue]]</span>
+			<i class="fa fa-fw fa-list-alt text-secondary"></i> <span>[[pages:registration-queue]]</span>
 		</a>
 	</li>
 	{{{ end }}}
 	<li>
 		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/ip-blacklist" role="menuitem">
-			<i class="fa fa-fw fa-ban text-muted"></i> <span>[[pages:ip-blacklist]]</span>
+			<i class="fa fa-fw fa-ban text-secondary"></i> <span>[[pages:ip-blacklist]]</span>
 		</a>
 	</li>
 	{{{ else }}}
 	{{{ if postQueueEnabled }}}
 	<li>
 		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/post-queue" role="menuitem">
-			<i class="fa fa-fw fa-list-alt text-muted"></i> <span>[[pages:post-queue]]</span>
+			<i class="fa fa-fw fa-list-alt text-secondary"></i> <span>[[pages:post-queue]]</span>
 		</a>
 	</li>
 	{{{ end }}}
@@ -96,7 +96,7 @@
 			<input type="hidden" name="_csrf" value="{config.csrf_token}">
 			<input type="hidden" name="noscript" value="true">
 			<button type="submit" class="dropdown-item rounded-1 d-flex align-items-center gap-2">
-				<i class="fa fa-fw fa-sign-out text-muted"></i><span>[[global:logout]]</span>
+				<i class="fa fa-fw fa-sign-out text-secondary"></i><span>[[global:logout]]</span>
 			</button>
 		</form>
 	</li>

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

@@ -9,26 +9,30 @@
     <span class="visible-md-inline visible-lg-inline fw-semibold">[[tags:all-tags]]</span>
     {{{ end }}}
 </button>
+
 <div component="tag/filter/search" class="hidden position-absolute top-0">
     <input type="text" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
 </div>
-<ul component="tag/filter/list" class="dropdown-menu p-1 text-sm overflow-auto" role="menu" style="max-height: 500px;" role="menu">
-    <li role="presentation" data-tag="">
-        <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="#">
-            <span class="flex-grow-1">[[tags:all-tags]]</span>
-            <i component="tag/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{if selectedTag }}}invisible{{{ end }}}"></i>
-        </a>
-    </li>
-    {{{ each tagItems }}}
-    <li role="presentation" data-tag="{./valueEscaped}">
-        <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="#">
-            <span component="tag-markup" class="flex-grow-1">
-                <div class="d-inline-flex align-items-center gap-1">
-                    {./valueEscaped}
-                </div>
-            </span>
-            <i component="tag/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="tag/filter/list" class="list-unstyled mb-0 text-sm overflow-auto ghost-scrollbar" role="menu" style="max-height: 500px;" role="menu">
+        <li role="presentation" data-tag="">
+            <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="#">
+                <span class="flex-grow-1">[[tags:all-tags]]</span>
+                <i component="tag/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{if selectedTag }}}invisible{{{ end }}}"></i>
+            </a>
+        </li>
+        {{{ each tagItems }}}
+        <li role="presentation" data-tag="{./valueEscaped}">
+            <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="#">
+                <span component="tag-markup" class="flex-grow-1">
+                    <div class="d-inline-flex align-items-center gap-1">
+                        {./valueEscaped}
+                    </div>
+                </span>
+                <i component="tag/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{ if !./selected }}}invisible{{{ end }}}"></i>
+            </a>
+        </li>
+        {{{ end }}}
+    </ul>
+</div>

package/templates/partials/topic/post-menu-list.tpl

@@ -1,23 +1,23 @@
 {{{ if posts.display_moderator_tools }}}
 <li>
 	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/edit" role="menuitem" href="#">
-		<span class="menu-icon"><i class="fa fa-fw text-muted fa-pencil"></i></span> [[topic:edit]]
+		<span class="menu-icon"><i class="fa fa-fw text-secondary fa-pencil"></i></span> [[topic:edit]]
 	</a>
 </li>
 <li {{{ if posts.deleted }}}hidden{{{ end }}}>
 	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/delete" role="menuitem" href="#" class="{{{ if posts.deleted }}}hidden{{{ end }}}">
-		<span class="menu-icon"><i class="fa fa-fw text-muted fa-trash-o"></i></span> [[topic:delete]]
+		<span class="menu-icon"><i class="fa fa-fw text-secondary fa-trash-o"></i></span> [[topic:delete]]
 	</a>
 </li>
 <li {{{ if !posts.deleted }}}hidden{{{ end }}}>
 	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/restore" role="menuitem" href="#" class="{{{ if !posts.deleted }}}hidden{{{ end }}}">
-		<span class="menu-icon"><i class="fa fa-fw text-muted fa-history"></i></span> [[topic:restore]]
+		<span class="menu-icon"><i class="fa fa-fw text-secondary fa-history"></i></span> [[topic:restore]]
 	</a>
 </li>
 {{{ if posts.display_purge_tools }}}
 <li {{{ if !posts.deleted }}}hidden{{{ end }}}>
 	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/purge" role="menuitem" href="#" class="{{{ if !posts.deleted }}}hidden{{{ end }}}">
-		<span class="menu-icon"><i class="fa fa-fw text-muted fa-eraser"></i></span> [[topic:purge]]
+		<span class="menu-icon"><i class="fa fa-fw text-secondary fa-eraser"></i></span> [[topic:purge]]
 	</a>
 </li>
 {{{ end }}}
@@ -25,7 +25,7 @@
 {{{ if posts.display_move_tools }}}
 <li>
 	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/move" role="menuitem" href="#">
-		<span class="menu-icon"><i class="fa fa-fw text-muted fa-arrows"></i></span> [[topic:move]]
+		<span class="menu-icon"><i class="fa fa-fw text-secondary fa-arrows"></i></span> [[topic:move]]
 	</a>
 </li>
 {{{ end }}}
@@ -33,7 +33,7 @@
 {{{ if posts.display_change_owner_tools }}}
 <li>
 	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/change-owner" role="menuitem" href="#">
-		<span class="menu-icon"><i class="fa fa-fw text-muted fa-user"></i></span> [[topic:change-owner]]
+		<span class="menu-icon"><i class="fa fa-fw text-secondary fa-user"></i></span> [[topic:change-owner]]
 	</a>
 </li>
 {{{ end }}}
@@ -41,13 +41,13 @@
 {{{ if posts.ip }}}
 <li>
 	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/copy-ip" role="menuitem" href="#" data-clipboard-text="{posts.ip}">
-		<span class="menu-icon" ><i class="fa fa-fw text-muted fa-copy"></i></span> [[topic:copy-ip]] {posts.ip}
+		<span class="menu-icon" ><i class="fa fa-fw text-secondary fa-copy"></i></span> [[topic:copy-ip]] {posts.ip}
 	</a>
 </li>
 {{{ if posts.display_ip_ban }}}
 <li>
 	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/ban-ip" role="menuitem" href="#" data-ip="{posts.ip}">
-		<span class="menu-icon"><i class="fa fa-fw text-muted fa-ban"></i></span> [[topic:ban-ip]] {posts.ip}
+		<span class="menu-icon"><i class="fa fa-fw text-secondary fa-ban"></i></span> [[topic:ban-ip]] {posts.ip}
 	</a>
 </li>
 {{{ end }}}
@@ -57,7 +57,7 @@
 {{{ each posts.tools }}}
 <li {{{ if ./disabled }}}class="disabled" {{{ end }}}>
 	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" {{{ if ./action}}}component="{./action}"{{{ end }}} role="menuitem" href="{{{ if ./href }}}{./href}{{{ else }}}#{{{ end }}}">
-		<span class="menu-icon"><i class="fa fa-fw text-muted {./icon}"></i></span> {{./html}}
+		<span class="menu-icon"><i class="fa fa-fw text-secondary {./icon}"></i></span> {{./html}}
 	</a>
 </li>
 {{{ end }}}
@@ -66,7 +66,7 @@
 	{{{ if posts.display_history}}}
 	<li>
 		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/view-history" role="menuitem" href="#">
-			<span class="menu-icon"><i class="fa fa-fw text-muted fa-history"></i></span> [[topic:view-history]]
+			<span class="menu-icon"><i class="fa fa-fw text-secondary fa-history"></i></span> [[topic:view-history]]
 		</a>
 	</li>
 	{{{ end }}}
@@ -75,8 +75,8 @@
 	<li>
 		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/bookmark" role="menuitem" href="#" data-bookmarked="{posts.bookmarked}">
 			<span class="menu-icon">
-				<i component="post/bookmark/on" class="fa fa-fw text-muted fa-bookmark {{{ if !posts.bookmarked }}}hidden{{{ end }}}"></i>
-				<i component="post/bookmark/off" class="fa fa-fw text-muted fa-bookmark-o {{{ if posts.bookmarked }}}hidden{{{ end }}}"></i>
+				<i component="post/bookmark/on" class="fa fa-fw text-secondary fa-bookmark {{{ if !posts.bookmarked }}}hidden{{{ end }}}"></i>
+				<i component="post/bookmark/off" class="fa fa-fw text-secondary fa-bookmark-o {{{ if posts.bookmarked }}}hidden{{{ end }}}"></i>
 			</span>
 			<span class="bookmark-text">[[topic:bookmark]]</span>
 			<span component="post/bookmark-count" class="bookmarkCount badge bg-secondary" data-bookmarks="{posts.bookmarks}">{posts.bookmarks}</span>&nbsp;
@@ -86,17 +86,25 @@
 
 	<li>
 		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="#" data-clipboard-text="{posts.absolute_url}">
-			<i class="fa fa-fw text-muted fa-link"></i> [[topic:copy-permalink]]
+			<i class="fa fa-fw text-secondary fa-link"></i> [[topic:copy-permalink]]
 		</a>
 	</li>
 
+	{{{ if posts.display_original_url }}}
+	<li>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="{posts.pid}">
+			<i class="fa fa-fw text-secondary fa-external-link"></i> [[topic:go-to-original]]
+		</a>
+	</li>
+	{{{ end }}}
+
 	{{{ if postSharing.length }}}
 	{{{ if config.loggedIn }}}<li class="dropdown-divider"></li>{{{ end }}}
 	<li class="dropdown-header">[[topic:share-this-post]]</li>
 	{{{ end }}}
 	<li class="d-flex gap-2 px-3">
 		{{{ each postSharing }}}
-		<a class="dropdown-item rounded-1 d-flex align-items-center px-1 py-2 w-auto" role="menuitem" component="share/{./id}" href="#" title="{./name}"><i class="fa-fw text-muted {./class}"></i></a>
+		<a class="dropdown-item rounded-1 d-flex align-items-center px-1 py-2 w-auto" role="menuitem" component="share/{./id}" href="#" title="{./name}"><i class="fa-fw text-secondary {./class}"></i></a>
 		{{{ end }}}
 	</li>
 {{{ end }}}
@@ -105,15 +113,15 @@
 <li class="dropdown-divider"></li>
 
 <li {{{ if posts.flags.flagged }}}hidden{{{ end }}}>
-	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/flag" role="menuitem" href="#"><i class="fa fa-fw text-muted fa-flag"></i> [[topic:flag-post]]</a>
+	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/flag" role="menuitem" href="#"><i class="fa fa-fw text-secondary fa-flag"></i> [[topic:flag-post]]</a>
 </li>
-<li {{{ if !posts.flags.flagged }}}hidden{{{ end }}} class="disabled text-muted">
-	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/already-flagged" role="menuitem" href="#"><i class="fa fa-fw text-muted fa-flag"></i> [[topic:already-flagged]]</a>
+<li {{{ if !posts.flags.flagged }}}hidden{{{ end }}} class="disabled text-secondary">
+	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/already-flagged" role="menuitem" href="#"><i class="fa fa-fw text-secondary fa-flag"></i> [[topic:already-flagged]]</a>
 </li>
 
 {{{ if (!posts.selfPost && posts.uid) }}}
 <li>
-	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/flagUser" role="menuitem" href="#"><i class="fa fa-fw text-muted fa-flag"></i> [[topic:flag-user]]</a>
+	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/flagUser" role="menuitem" href="#"><i class="fa fa-fw text-secondary fa-flag"></i> [[topic:flag-user]]</a>
 </li>
 {{{ end }}}
 {{{ end }}}
@@ -121,11 +129,11 @@
 {{{ if posts.display_moderator_tools }}}
 {{{ if posts.flags.exists }}}
 <li>
-	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="{config.relative_path}/flags/{posts.flags.flagId}"><i class="fa fa-fw text-muted fa-exclamation-circle"></i> [[topic:view-flag-report]]</a>
+	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="{config.relative_path}/flags/{posts.flags.flagId}"><i class="fa fa-fw text-secondary fa-exclamation-circle"></i> [[topic:view-flag-report]]</a>
 </li>
 {{{ if (posts.flags.state == "open") }}}
 <li>
-	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/flagResolve" data-flagId="{posts.flags.flagId}" role="menuitem" href="#"><i class="fa fa-fw text-muted fa-check"></i> [[topic:resolve-flag]]</a>
+	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/flagResolve" data-flagId="{posts.flags.flagId}" role="menuitem" href="#"><i class="fa fa-fw text-secondary fa-check"></i> [[topic:resolve-flag]]</a>
 </li>
 {{{ end }}}
 {{{ end }}}

package/templates/partials/topic/post.tpl

@@ -65,7 +65,7 @@
 			</div>
 			<div class="d-flex align-items-center gap-1 flex-grow-1 justify-content-end">
 				<span class="bookmarked opacity-0 text-primary"><i class="fa fa-bookmark-o"></i></span>
-				<a href="{generatePostUrl(@value)}" class="post-index text-muted d-none d-md-inline">#{increment(./index, "1")}</a>
+				<a href="{config.relative_path}/post/{encodeURIComponent(./pid)}" class="post-index text-muted d-none d-md-inline">#{increment(./index, "1")}</a>
 			</div>
 		</div>
 

package/templates/partials/topic/sort.tpl

@@ -8,19 +8,19 @@
 		<li>
 			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="oldest_to_newest" 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"></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="#" class="newest_to_oldest" 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"></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="#" class="most_votes" data-sort="most_votes" role="menuitem">
 				<span class="flex-grow-1">[[topic:most-votes]]</span>
-				<i class="flex-shrink-0 fa fa-fw"></i>
+				<i class="flex-shrink-0 fa fa-fw text-secondary"></i>
 			</a>
 		</li>
 	</ul>

package/templates/partials/topic/topic-menu-list.tpl

@@ -1,44 +1,44 @@
 {{{ if privileges.editable }}}
 <li {{{ if locked }}}hidden{{{ end }}}>
-	<a component="topic/lock" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if locked }}}hidden{{{ end }}}" role="menuitem"><i class="fa fa-fw text-muted fa-lock"></i> [[topic:thread-tools.lock]]</a>
+	<a component="topic/lock" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if locked }}}hidden{{{ end }}}" role="menuitem"><i class="fa fa-fw fa-lock text-secondary"></i> [[topic:thread-tools.lock]]</a>
 </li>
 
 <li {{{ if !locked }}}hidden{{{ end }}}>
-	<a component="topic/unlock" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if !locked }}}hidden{{{ end }}}" role="menuitem"><i class="fa fa-fw text-muted fa-unlock"></i> [[topic:thread-tools.unlock]]</a>
+	<a component="topic/unlock" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if !locked }}}hidden{{{ end }}}" role="menuitem"><i class="fa fa-fw fa-unlock text-secondary"></i> [[topic:thread-tools.unlock]]</a>
 </li>
 
 <li {{{ if pinned }}}hidden{{{ end }}}>
-	<a component="topic/pin" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if pinned }}}hidden{{{ end }}}" role="menuitem"><i class="fa fa-fw text-muted fa-thumb-tack"></i> [[topic:thread-tools.pin]]</a>
+	<a component="topic/pin" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if pinned }}}hidden{{{ end }}}" role="menuitem"><i class="fa fa-fw fa-thumb-tack text-secondary"></i> [[topic:thread-tools.pin]]</a>
 </li>
 
 <li {{{ if !pinned }}}hidden{{{ end }}}>
-	<a component="topic/unpin" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if !pinned }}}hidden{{{ end }}}" role="menuitem"><i class="fa fa-fw text-muted fa-thumb-tack fa-rotate-90"></i> [[topic:thread-tools.unpin]]</a>
+	<a component="topic/unpin" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if !pinned }}}hidden{{{ end }}}" role="menuitem"><i class="fa fa-fw fa-thumb-tack fa-rotate-90 text-secondary"></i> [[topic:thread-tools.unpin]]</a>
 </li>
 
 <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]]</a>
+	<a component="topic/move" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem"><i class="fa fa-fw fa-arrows text-secondary"></i> [[topic:thread-tools.move]]</a>
 </li>
 
 <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]]</a>
+	<a component="topic/merge" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem"><i class="fa fa-fw fa-code-fork text-secondary"></i> [[topic:thread-tools.merge]]</a>
 </li>
 
 <li>
-	<a component="topic/fork" 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.fork]]</a>
+	<a component="topic/fork" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem"><i class="fa fa-fw fa-code-fork text-secondary"></i> [[topic:thread-tools.fork]]</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]]</a>
+	<a component="topic/tag" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem"><i class="fa fa-fw fa-tag text-secondary"></i> [[topic:thread-tools.tag]]</a>
 </li>
 
 {{{ if !scheduled }}}
 <li>
-	<a component="topic/move-posts" 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-posts]]</a>
+	<a component="topic/move-posts" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem"><i class="fa fa-fw fa-arrows text-secondary"></i> [[topic:thread-tools.move-posts]]</a>
 </li>
 {{{ end }}}
 
 <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]]</a>
+	<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 fa-inbox text-secondary"></i> [[topic:thread-tools.markAsUnreadForAll]]</a>
 </li>
 
 <li class="dropdown-divider"></li>
@@ -46,29 +46,29 @@
 
 {{{ if privileges.deletable }}}
 <li {{{ if deleted }}}hidden{{{ end }}}>
-	<a component="topic/delete" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if deleted }}}hidden{{{ end }}}" role="menuitem"><i class="fa fa-fw text-muted fa-trash-o"></i> [[topic:thread-tools.delete]]</a>
+	<a component="topic/delete" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if deleted }}}hidden{{{ end }}}" role="menuitem"><i class="fa fa-fw fa-trash-o text-secondary"></i> [[topic:thread-tools.delete]]</a>
 </li>
 
 {{{ if !scheduled }}}
 <li {{{ if !deleted }}}hidden{{{ end }}}>
-	<a component="topic/restore" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if !deleted }}}hidden{{{ end }}}" role="menuitem"><i class="fa fa-fw text-muted fa-history"></i> [[topic:thread-tools.restore]]</a>
+	<a component="topic/restore" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if !deleted }}}hidden{{{ end }}}" role="menuitem"><i class="fa fa-fw fa-history text-secondary"></i> [[topic:thread-tools.restore]]</a>
 </li>
 {{{ end }}}
 
 {{{ if privileges.purge }}}
 <li {{{ if !deleted }}}hidden{{{ end }}}>
-	<a component="topic/purge" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if !deleted }}}hidden{{{ end }}}" role="menuitem"><i class="fa fa-fw text-muted fa-eraser"></i> [[topic:thread-tools.purge]]</a>
+	<a component="topic/purge" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if !deleted }}}hidden{{{ end }}}" role="menuitem"><i class="fa fa-fw fa-eraser text-secondary"></i> [[topic:thread-tools.purge]]</a>
 </li>
 {{{ end }}}
 {{{ if privileges.isAdminOrMod }}}
 <li>
-	<a component="topic/delete/posts" 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-posts]]</a>
+	<a component="topic/delete/posts" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem"><i class="fa fa-fw fa-trash-o text-secondary"></i> [[topic:thread-tools.delete-posts]]</a>
 </li>
 {{{ end }}}
 
 {{{ each thread_tools }}}
 <li>
-	<a href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {./class}" role="menuitem"><i class="fa fa-fw text-muted {./icon}"></i> {./title}</a>
+	<a href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {./class}" role="menuitem"><i class="fa fa-fw text-secondary {./icon}"></i> {./title}</a>
 </li>
 {{{ end }}}
 {{{ end }}}

package/templates/partials/topic/watch.tpl

@@ -21,10 +21,10 @@
 			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="topic/following" 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 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">[[topic:watching]]</span>
 					</span>
-					<div class="help-text text-muted text-xs">[[topic:watching.description]]</div>
+					<div class="help-text text-secondary text-xs">[[topic:watching.description]]</div>
 				</div>
 				<span class="flex-shrink-0"><i component="topic/following/check" class="fa fa-fw {{{ if isFollowing }}}fa-check{{{ end }}}"></i></span>
 			</a>
@@ -34,10 +34,10 @@
 			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="topic/not-following" 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 fa-bell-slash-o"></i>
+						<i class="flex-shrink-0 fa fa-fw fa-bell-slash-o text-secondary"></i>
 						<span class="flex-grow-1 fw-semibold">[[topic:not-watching]]</span>
 					</span>
-					<div class="help-text text-muted text-xs">[[topic:not-watching.description]]</div>
+					<div class="help-text text-secondary text-xs">[[topic:not-watching.description]]</div>
 				</div>
 				<span class="flex-shrink-0"><i component="topic/not-following/check" class="fa fa-fw {{{ if isNotFollowing }}}fa-check{{{ end }}}"></i></span>
 			</a>
@@ -47,10 +47,10 @@
 			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="topic/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 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">[[topic:ignoring]]</span>
 					</span>
-					<div class="help-text text-muted text-xs">[[topic:ignoring.description]]</div>
+					<div class="help-text text-secondary text-xs">[[topic:ignoring.description]]</div>
 				</div>
 				<span class="flex-shrink-0"><i component="topic/ignoring/check" class="fa fa-fw {{{ if isIgnoring }}}fa-check{{{ end }}}"></i></span>
 			</a>

package/templates/partials/topic-list-bar.tpl

@@ -1,7 +1,7 @@
 <div class="{{{ if config.theme.stickyToolbar }}}sticky-tools{{{ end }}} mb-3">
 	<nav class="topic-list-header d-flex flex-nowrap my-2 p-0 border-0 rounded">
 		<div class="d-flex flex-row p-2 text-bg-light gap-1 border rounded w-100 align-items-center">
-			<div component="category/controls" class="d-flex me-auto mb-0 gap-2 align-items-start flex-wrap">
+			<div component="category/controls" class="d-flex me-auto mb-0 gap-2 flex-wrap">
 				{{{ if template.category }}}
 				<!-- IMPORT partials/category/watch.tpl -->
 				<!-- IMPORT partials/tags/filter-dropdown-left.tpl -->

package/templates/partials/topics_list.tpl

@@ -70,7 +70,7 @@
 				{{{ end }}}
 			</div>
 			{{{ if ./thumbs.length }}}
-			<a class="position-relative text-decoration-none flex-shrink-0 d-none d-xl-block" href="{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}" aria-label="[[topic:thumb-image]]">
+			<a class="topic-thumbs position-relative text-decoration-none flex-shrink-0 d-none d-xl-block" href="{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}" aria-label="[[topic:thumb-image]]">
 				<img class="topic-thumb rounded-1 bg-light" style="width:auto;max-width: 5.33rem;height: 3.33rem;object-fit: contain;" src="{./thumbs.0.url}" alt=""/>
 				<span data-numthumbs="{./thumbs.length}" class="px-1 position-absolute top-0 start-100 translate-middle badge rounded text-bg-info" style="z-index: 1;">+{increment(./thumbs.length, "-1")}</span>
 			</a>

package/templates/topic.tpl

@@ -1,4 +1,7 @@
 <!-- IMPORT partials/breadcrumbs-json-ld.tpl -->
+{{{ if config.theme.enableBreadcrumbs }}}
+<!-- IMPORT partials/breadcrumbs.tpl -->
+{{{ end }}}
 {{{ if widgets.header.length }}}
 <div data-widget-area="header">
 	{{{each widgets.header}}}
@@ -8,7 +11,7 @@
 {{{ end }}}
 
 <div class="d-flex flex-column gap-3" itemid="{url}" itemscope itemtype="https://schema.org/DiscussionForumPosting">
-	<meta itemprop="headline" content="{title}">
+	<meta itemprop="headline" content="{escape(titleRaw)}">
 	<meta itemprop="url" content="{url}">
 	<meta itemprop="datePublished" content="{timestampISO}">
 	<meta itemprop="dateModified" content="{lastposttimeISO}">