nodebb-theme-harmony 2.0.0-pre.3 → 2.0.0-pre.30

package/templates/partials/breadcrumbs-json-ld.tpl

@@ -1,26 +1,16 @@
-<script type="application/ld+json">
-{
-	"@context": "https://schema.org",
-	"@type": "BreadcrumbList",
-	"itemListElement": [
-		{
-			"@type": "ListItem",
-			"position": 1,
-			"name": "{config.siteTitle}",
-			"item": "{breadcrumbs.0.url}"
-		}
-		{{{ each breadcrumbs }}}
-		{{{ if !@first}}}
-		,{
-			"@type": "ListItem",
-			"position": {increment(@index, "1")},
-			"name": "{stripTags(./text)}"
-			{{{ if !@last }}}
-			,"item": "{./url}"
-			{{{ end }}}
-		}
-		{{{ end }}}
-		{{{ end }}}
-	]
+<script type="application/ld+json">{
+"@context": "https://schema.org",
+"@type": "BreadcrumbList",
+"itemListElement": [{
+	"@type": "ListItem",
+	"position": 1,
+	"name": "{config.siteTitle}",
+	"item": "{breadcrumbs.0.url}"
 }
-</script>
+{{{ each breadcrumbs }}}{{{ if !@first}}},{
+	"@type": "ListItem",
+	"position": {increment(@index, "1")},
+	"name": "{stripTags(./text)}"
+	{{{ if !@last }}},"item": "{./url}"{{{ end }}}
+}{{{ end }}}{{{ end }}}
+]}</script>

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/groups/memberlist.tpl

@@ -4,7 +4,7 @@
 		<button component="groups/members/add" type="button" class="btn btn-primary btn-sm me-3" title="[[groups:details.add-member]]"><i class="fa fa-user-plus"></i> [[groups:details.add-member]]</button>
 	</div>
 	{{{ end }}}
-	<div class="">
+	<div>
 		<div class="input-group">
 			<input class="form-control form-control-sm" type="text" component="groups/members/search" placeholder="[[global:search]]"/>
 			<button class="btn btn-primary btn-sm search-button" type="button">

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 -->
 
@@ -15,16 +15,13 @@
 					{{{ each navigation }}}
 					{{{ if displayMenuItem(@root, @index) }}}
 					<li class="nav-item {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
-						<a class="nav-link navigation-link px-3 py-2 {{{ if ./dropdown }}}dropdown-toggle{{{ end }}}"
-						{{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="collapse" data-bs-target="#collapse-target-{@index}" onclick="event.stopPropagation();" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}}>
+						<a class="nav-link navigation-link px-3 py-2 {{{ if ./dropdown }}}dropdown-toggle{{{ end }}}" {{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="collapse" data-bs-target="#collapse-target-{@index}" onclick="event.stopPropagation();" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}}>
 							<span class="d-inline-flex justify-content-between align-items-center w-100">
 								<span class="text-nowrap">
 									{{{ if ./iconClass }}}
 									<i class="fa fa-fw {./iconClass}" data-content="{./content}"></i>
 									{{{ end }}}
-									{{{ if ./text }}}
-									<span class="nav-text px-2 fw-semibold">{./text}</span>
-									{{{ end }}}
+									{{{ if ./text }}}<span class="nav-text px-2 fw-semibold">{./text}</span>{{{ end }}}
 								</span>
 								<span component="navigation/count" class="badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
 							</span>

package/templates/partials/post_bar.tpl

@@ -18,9 +18,7 @@
 				{{{ end }}}
 
 				{{{ if browsingUsers }}}
-				<div class="hidden-xs">
-				<!-- IMPORT partials/topic/browsing-users.tpl -->
-				</div>
+				<div class="hidden-xs"><!-- IMPORT partials/topic/browsing-users.tpl --></div>
 				{{{ end }}}
 			</div>
 			<!-- IMPORT partials/topic/reply-button.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: {dropdown.maxWidth}; max-height: {dropdown.maxHeight};">
 	<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/search-results.tpl

@@ -17,7 +17,7 @@
 	{{{ each posts }}}
 	<hr/>
 	<div class="topic-row  mb-3">
-		<a class="topic-title fw-semibold fs-5 text-reset text-break" href="{config.relative_path}/post/{./pid}">
+		<a class="topic-title fw-semibold fs-5 text-reset text-break" href="{config.relative_path}/post/{encodeURIComponent(./pid)}">
 			{{{ if !./isMainPost }}}RE: {{{ end }}}{./topic.title}
 		</a>
 		<div class="post-body d-flex flex-column gap-1">

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">