nodebb-theme-harmony 1.0.0 → 1.0.2

package/templates/partials/groups/memberlist.tpl

@@ -1,5 +1,5 @@
 <div class="d-flex {{{ if group.isOwner }}}justify-content-between{{{ else }}}justify-content-end{{{ end }}} mb-3">
-	{{{ if group.isOwner }}}
+	{{{ if isAdmin }}}
 	<div class="flex-shrink-0">
 		<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>
@@ -25,7 +25,7 @@
 			<div class="d-flex align-items-center justify-content-between">
 				<div class="d-flex align-items-center gap-2">
 					<a class="align-text-top" href="{config.relative_path}/user/{group.members.userslug}">{group.members.username}</a>
-					<i component="groups/owner/icon" title="[[groups:owner]]" class="user-owner-icon fa fa-star align-text-top text-warning <!-- IF !group.members.isOwner -->invisible<!-- ENDIF !group.members.isOwner -->"></i>
+					<i component="groups/owner/icon" title="[[groups:owner]]" class="user-owner-icon fa fa-star align-text-top text-warning {{{ if !group.members.isOwner }}}invisible{{{ end }}}"></i>
 				</div>
 
 				{{{ if group.isOwner }}}

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

@@ -1,26 +1,26 @@
-<div class="flex-0 pe-2 border-end-md text-sm mb-3 flex-basis-md-200">
-	<div class="nav sticky-top d-flex flex-row flex-md-column flex-wrap gap-1" style="z-index: 1;">
+<div class="flex-shrink-0 pe-2 border-end-md text-sm mb-3 flex-basis-md-200">
+	<div class="nav sticky-md-top d-flex flex-row flex-md-column flex-wrap gap-1" style="top: 1rem; z-index: 1;">
 		<button data-bs-toggle="tab" data-bs-target="#groups-posts" class="btn-ghost fw-semibold {{{ if template.groups/details }}}active{{{ end }}}">
-			<div class="flex-1">[[global:posts]]</div>
+			<div class="flex-grow-1">[[global:posts]]</div>
 		</button>
 		<button data-bs-toggle="tab" data-bs-target="#groups-members" class="btn-ghost fw-semibold">
-			<div class="flex-1">[[groups:members]]</div>
-			<span class="text-xs human-readable-number" title="{group.memberCount}">{group.memberCount}</span>
+			<div class="flex-grow-1">[[groups:members]]</div>
+			<span class="flex-shrink-0 text-xs human-readable-number" title="{group.memberCount}">{group.memberCount}</span>
 		</button>
 
 		{{{ if group.isOwner }}}
 		<button data-bs-toggle="tab" data-bs-target="#groups-pending" class="btn-ghost fw-semibold">
-			<div class="flex-1">[[groups:details.pending]]</div>
-			<span class="text-xs human-readable-number" title="{group.pending.length}">{group.group.pending.length}</span>
+			<div class="flex-grow-1">[[groups:details.pending]]</div>
+			<span class="flex-shrink-0 text-xs human-readable-number" title="{group.pending.length}">{group.group.pending.length}</span>
 		</button>
 
 		<button data-bs-toggle="tab" data-bs-target="#groups-invited" class="btn-ghost fw-semibold">
-			<div class="flex-1">[[groups:details.invited]]</div>
-			<span class="text-xs human-readable-number" title="{group.invited.length}">{group.group.invited.length}</span>
+			<div class="flex-grow-1">[[groups:details.invited]]</div>
+			<span class="flex-shrink-0 text-xs human-readable-number" title="{group.invited.length}">{group.group.invited.length}</span>
 		</button>
 
 		<button data-bs-toggle="tab" data-bs-target="#groups-admin" class="btn-ghost fw-semibold">
-			<div class="flex-1">[[global:header.admin]]</div>
+			<div class="flex-grow-1">[[global:header.admin]]</div>
 		</button>
 		{{{ end }}}
 	</div>

package/templates/partials/header/brand.tpl

@@ -1,6 +1,6 @@
 {{{ if (brand:logo || config.showSiteTitle)}}}
-<div class="container brand-container">
-	<div class="col-12 d-flex border-bottom pb-3 {{{ if config.centerHeaderElements }}}justify-content-center{{{ end }}}">
+<div class="container px-md-4 brand-container">
+	<div class="col-12 d-flex border-bottom pb-3 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
 		<div component="brand/wrapper" class="d-flex align-items-center gap-3 p-2 rounded-1 align-content-stretch ">
 			{{{ if brand:logo }}}
 			<a component="brand/anchor" href="{{{ if brand:logo:url }}}{brand:logo:url}{{{ else }}}{relative_path}/{{{ end }}}">
@@ -14,6 +14,13 @@
 			</a>
 			{{{ end }}}
 		</div>
+		{{{ if widgets.brand-header.length }}}
+		<div data-widget-area="brand-header" class="ms-auto gap-3 p-2 align-self-center">
+			{{{each widgets.brand-header}}}
+			{{./html}}
+			{{{end}}}
+		</div>
+		{{{ end }}}
 	</div>
 </div>
 {{{ end }}}

package/templates/partials/mobile-footer.tpl

@@ -1,70 +1,78 @@
-<div class="text-dark bg-light bottombar p-2 d-flex d-md-none justify-content-between fixed-bottom ff-secondary align-items-center">
-	<div class="bottom-sheet">
-		<button class="btn" data-bs-toggle="dropdown">
-			<i class="fa fa-bars"></i>
-		</button>
-		<ul class="dropdown-menu">
-			{{{ each navigation }}}
-			<!-- IF function.displayMenuItem, @index -->
-			<li class="nav-item {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
-				<a class="nav-link nav-btn navigation-link p-3 {{{ if navigation.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 truncate-open">
-							{{{ if ./iconClass }}}
-							<i class="fa fa-fw {./iconClass}" data-content="{./content}"></i>
-							{{{ end }}}
-							{{{ if navigation.text }}}
-							<span class="nav-text visible-open px-2 fw-semibold">{navigation.text}</span>
-							{{{ end }}}
+<div component="bottombar" class="bottombar d-flex flex-column d-lg-none fixed-bottom ff-secondary gap-1 align-items-center">
+
+	<!-- IMPORT partials/topic/navigator-mobile.tpl -->
+
+	<div class="bottombar-nav p-2 text-dark bg-light d-flex justify-content-between align-items-center w-100">
+		<div class="">
+			<a href="#" role="button" class="nav-link nav-btn d-flex justify-content-between align-items-center position-relative" data-bs-toggle="dropdown">
+				<span class="position-relative">
+					<i class="fa fa-fw fa-lg fa-bars"></i>
+					<span component="unread/count" data-unread-url="{unreadCount.unreadUrl}" class="position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !unreadCount.mobileUnread }}}hidden{{{ end }}}">{unreadCount.mobileUnread}</span>
+				</span>
+			</a>
+			<ul class="navigation-dropdown dropdown-menu">
+				{{{ each navigation }}}
+				{{{ if displayMenuItem(@root, @index) }}}
+				<li class="nav-item {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
+					<a class="nav-link nav-btn 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 }}}
+							</span>
+							<span component="navigation/count" class="badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
 						</span>
-						<span component="navigation/count" class="visible-open badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
-					</span>
-				</a>
-				{{{ if navigation.dropdown }}}
-				<div class="ps-3">
-					<ul id="collapse-target-{@index}" class="collapse list-unstyled ps-3">
-						{navigation.dropdownContent}
-					</ul>
-				</div>
+					</a>
+					{{{ if ./dropdown }}}
+					<div class="ps-3">
+						<ul id="collapse-target-{@index}" class="collapse list-unstyled ps-3">
+							{./dropdownContent}
+						</ul>
+					</div>
+					{{{ end }}}
+				</li>
 				{{{ end }}}
-			</li>
-			<!-- ENDIF function.displayMenuItem -->
-			{{{end}}}
-		</ul>
-	</div>
+				{{{ end }}}
+			</ul>
+		</div>
 
-	<div class="">
-		{{{ if config.loggedIn }}}
-		<ul id="logged-in-menu" class="list-unstyled d-flex align-items-center w-100 gap-3 mb-0">
-			{{{ if config.searchEnabled }}}
-			<li component="sidebar/search" class="nav-item m-0 search bottom-sheet position-relative">
-			<!-- IMPORT partials/sidebar/search-mobile.tpl -->
-			</li>
-			{{{ end }}}
+		<div class="">
+			{{{ if config.loggedIn }}}
+			<ul id="logged-in-menu" class="list-unstyled d-flex align-items-center w-100 gap-3 mb-0">
+				{{{ if config.searchEnabled }}}
+				<li component="sidebar/search" class="nav-item m-0 search">
+				<!-- IMPORT partials/sidebar/search-mobile.tpl -->
+				</li>
+				{{{ end }}}
 
-			<li component="notifications" class="nav-item m-0 notifications bottom-sheet">
-			<!-- IMPORT partials/sidebar/notifications.tpl -->
-			</li>
+				<li component="notifications" class="nav-item m-0 notifications">
+				<!-- IMPORT partials/sidebar/notifications.tpl -->
+				</li>
 
-			{{{ if canChat }}}
-			<li class="nav-item m-0 chats bottom-sheet">
-			<!-- IMPORT partials/sidebar/chats.tpl -->
-			</li>
-			{{{ end }}}
+				{{{ if canChat }}}
+				<li class="nav-item m-0 chats">
+				<!-- IMPORT partials/sidebar/chats.tpl -->
+				</li>
+				{{{ end }}}
 
-			<li component="sidebar/drafts" class="nav-item m-0 drafts bottom-sheet">
-			<!-- IMPORT partials/sidebar/drafts.tpl -->
-			</li>
+				<li component="sidebar/drafts" class="hidden nav-item m-0 drafts">
+				<!-- IMPORT partials/sidebar/drafts.tpl -->
+				</li>
 
-			<li id="user_label" class="nav-item m-0 py-2 bottom-sheet usermenu">
-			<!-- IMPORT partials/sidebar/user-menu.tpl -->
-			</li>
-		</ul>
-		{{{ else }}}
-		<ul id="logged-out-menu" class="list-unstyled d-flex w-100 gap-3 mb-0 logged-out-menu">
-			<!-- IMPORT partials/sidebar/logged-out-menu.tpl -->
-		</ul>
-		{{{ end }}}
+				<li id="user_label" class="nav-item m-0 py-2 usermenu">
+				<!-- IMPORT partials/sidebar/user-menu.tpl -->
+				</li>
+			</ul>
+			{{{ else }}}
+			<ul id="logged-out-menu" class="list-unstyled d-flex w-100 gap-3 mb-0 logged-out-menu">
+				<!-- IMPORT partials/sidebar/logged-out-menu.tpl -->
+			</ul>
+			{{{ end }}}
+		</div>
 	</div>
 </div>

package/templates/partials/notifications_list.tpl

@@ -1,28 +1,31 @@
 {{{ if !notifications.length }}}
-<li class="no-notifs text-center p-2">[[notifications:no_notifs]]</li>
+<li class="no-notifs text-center p-4 d-flex flex-column">
+	<div class="p-4"><i class="fa-solid fa-wind fs-2 text-muted"></i></div>
+	<div class="text-xs fw-semibold text-muted">[[notifications:no_notifs]]</div>
+</li>
 {{{ end }}}
 
 {{{ each notifications }}}
 <li class="{./readClass} mb-2 p-1" data-nid="{./nid}" data-path="{./path}" {{{ if ./pid }}}data-pid="{./pid}"{{{ end }}}{{{ if ./tid }}}data-tid="{./tid}"{{{ end }}}>
 	<div class="d-flex gap-1 justify-content-between">
-		<div class="d-flex gap-2">
+		<div class="btn-ghost-sm d-flex gap-2 flex-grow-1 align-items-start">
 			{{{ if ./image }}}
 			{{{ if ./from }}}
-			<a class="text-decoration-none" href="{config.relative_path}/user/{./user.userslug}"><img class="avatar avatar-rounded" style="--avatar-size: 32px;" src="{./image}" /></a>
+			<a class="flex-grow-0 flex-shrink-0" href="{config.relative_path}/user/{./user.userslug}"><img class="avatar avatar-rounded" style="--avatar-size: 32px;" src="{./image}" /></a>
 			{{{ end }}}
 			{{{ else }}}
-			<a class="text-decoration-none"  href="{config.relative_path}/user/{./user.userslug}"><div class="avatar avatar-rounded" style="--avatar-size: 32px; background-color: {./user.icon:bgColor};">{./user.icon:text}</div></a>
+			<a class="flex-grow-0 flex-shrink-0"  href="{config.relative_path}/user/{./user.userslug}"><div class="avatar avatar-rounded" style="--avatar-size: 32px; background-color: {./user.icon:bgColor};">{./user.icon:text}</div></a>
 			{{{ end }}}
-			<div class=" d-flex flex-column">
-				<a href="{./path}" class="text-decoration-none text-reset text text-sm">
+			<div class="d-flex flex-grow-1 flex-column align-items-start position-relative">
+				<a href="{./path}" class="text-decoration-none d-inline-block text-reset text-break text-sm ff-sans stretched-link">
 					{./bodyShort}
 				</a>
 				<div class="text-xs text-muted">{{{ if ./timeagoLong }}}{./timeagoLong}{{{ else }}}<span class="timeago" title="{./datetimeISO}"></span>{{{ end }}}</div>
 			</div>
 		</div>
-		<div class="">
+		<div>
 			{{{ if ./nid }}}
-			<button class="mark-read btn-ghost-sm" style="width: 1.5rem; height: 1.5rem;">
+			<button class="mark-read btn-ghost-sm flex-grow-0 flex-shrink-0 p-1" style="width: 1.5rem; height: 1.5rem;">
 				<i class="unread fa fa-2xs fa-circle text-primary {{{ if ./read }}}hidden{{{ end }}}"></i>
 				<i class="read fa fa-2xs fa-circle-o text-secondary {{{ if !./read }}}hidden{{{ end }}}"></i>
 			</button>

package/templates/partials/paginator.tpl

@@ -1,45 +1,47 @@
 <div component="pagination" class="pagination-container mt-3{{{ if !pagination.pages.length }}} hidden{{{ end }}}">
 	<ul class="pagination pagination-sm gap-1 hidden-xs hidden-sm justify-content-center">
 		<li class="page-item previous float-start{{{ if !pagination.prev.active }}} disabled{{{ end }}}">
-			<a class="page-link rounded fw-secondary text-reset px-3" href="?{pagination.prev.qs}" data-page="{pagination.prev.page}"><i class="fa fa-chevron-left"></i> </a>
+			<a class="page-link rounded fw-secondary px-3" href="?{pagination.prev.qs}" data-page="{pagination.prev.page}"><i class="fa fa-chevron-left"></i> </a>
 		</li>
 
 		{{{each pagination.pages}}}
 			{{{ if pagination.pages.separator }}}
 			<li component="pagination/select-page" class="page-item page select-page">
-				<a class="page-link rounded fw-secondary text-reset px-3" href="#"><i class="fa fa-ellipsis-h"></i></a>
+				<a class="page-link rounded fw-secondary px-3" href="#"><i class="fa fa-ellipsis-h"></i></a>
 			</li>
 			{{{ else }}}
 			<li class="page-item page{{{ if pagination.pages.active }}} active{{{ end }}}" >
-				<a class="page-link rounded fw-secondary text-reset px-3" href="?{pagination.pages.qs}" data-page="{pagination.pages.page}">{pagination.pages.page}</a>
+				<a class="page-link rounded fw-secondary px-3" href="?{pagination.pages.qs}" data-page="{pagination.pages.page}">{pagination.pages.page}</a>
 			</li>
 			{{{ end }}}
 		{{{end}}}
 
 		<li class="page-item next float-end {{{ if !pagination.next.active }}} disabled{{{ end }}}">
-			<a class="page-link rounded fw-secondary text-reset px-3" href="?{pagination.next.qs}" data-page="{pagination.next.page}"> <i class="fa fa-chevron-right"></i></a>
+			<a class="page-link rounded fw-secondary px-3" href="?{pagination.next.qs}" data-page="{pagination.next.page}"> <i class="fa fa-chevron-right"></i></a>
 		</li>
 	</ul>
 
+	{{{ if !template.topic }}}
 	<ul class="pagination pagination-sm hidden-md hidden-lg justify-content-center">
 		<li class="page-item first{{{ if !pagination.prev.active }}} disabled{{{ end }}}">
-			<a class="page-link fw-secondary text-reset" href="?{pagination.first.qs}" data-page="1"><i class="fa fa-fast-backward"></i> </a>
+			<a class="page-link fw-secondary"  href="?{pagination.first.qs}" data-page="1"><i class="fa fa-fast-backward"></i> </a>
 		</li>
 
 		<li class="page-item previous{{{ if !pagination.prev.active }}} disabled{{{ end }}}">
-			<a class="page-link fw-secondary text-reset" href="?{pagination.prev.qs}" data-page="{pagination.prev.page}"><i class="fa fa-chevron-left"></i> </a>
+			<a class="page-link fw-secondary"  href="?{pagination.prev.qs}" data-page="{pagination.prev.page}"><i class="fa fa-chevron-left"></i> </a>
 		</li>
 
 		<li component="pagination/select-page" class="page-item page select-page">
-			<a class="page-link fw-secondary text-reset" href="#">{pagination.currentPage} / {pagination.pageCount}</a>
+			<a class="page-link fw-secondary"  href="#">{pagination.currentPage} / {pagination.pageCount}</a>
 		</li>
 
 		<li class="page-item next{{{ if !pagination.next.active }}} disabled{{{ end }}}">
-			<a class="page-link fw-secondary text-reset" href="?{pagination.next.qs}" data-page="{pagination.next.page}"> <i class="fa fa-chevron-right"></i></a>
+			<a class="page-link fw-secondary"  href="?{pagination.next.qs}" data-page="{pagination.next.page}"> <i class="fa fa-chevron-right"></i></a>
 		</li>
 
 		<li class="page-item last{{{ if !pagination.next.active }}} disabled{{{ end }}}">
-			<a class="page-link fw-secondary text-reset" href="?{pagination.last.qs}" data-page="{pagination.pageCount}"><i class="fa fa-fast-forward"></i> </a>
+			<a class="page-link fw-secondary"  href="?{pagination.last.qs}" data-page="{pagination.pageCount}"><i class="fa fa-fast-forward"></i> </a>
 		</li>
 	</ul>
+	{{{ end }}}
 </div>

package/templates/partials/post_bar.tpl

@@ -1,27 +1,29 @@
-<nav class="{{{ if config.stickyToolbar }}}sticky-tools{{{ end }}} navbar navbar-expand mt-4 p-0 border-0 rounded topic-main-buttons">
-	<div class="card card-header flex-row p-2 border rounded ff-secondary w-100">
-		<ul class="navbar-nav me-auto gap-2 align-items-center">
-			{{{ if loggedIn }}}
-			<button component="topic/mark-unread" class="btn-ghost-sm d-flex gap-2 align-items-center">
-				<i class="fa fa-fw fa-inbox text-primary"></i>
-				<span class="d-none d-md-inline fw-semibold">[[topic:mark_unread]]</span>
-			</button>
-			{{{ end }}}
+<div class="{{{ if config.theme.stickyToolbar }}}sticky-tools{{{ end }}}">
+	<nav class="navbar navbar-expand my-2 p-0 border-0 rounded topic-main-buttons">
+		<div class="card card-header flex-row p-2 border rounded w-100 align-items-center">
+			<ul class="navbar-nav me-auto gap-2 align-items-center flex-wrap">
+				{{{ if loggedIn }}}
+				<button component="topic/mark-unread" class="btn-ghost-sm d-flex gap-2 align-items-center">
+					<i class="fa fa-fw fa-inbox text-primary"></i>
+					<span class="d-none d-md-inline fw-semibold">[[topic:mark_unread]]</span>
+				</button>
+				{{{ end }}}
 
-			<!-- IMPORT partials/topic/watch.tpl -->
-			<!-- IMPORT partials/topic/sort.tpl -->
-			<!-- IMPORT partials/topic/tools.tpl -->
+				<!-- IMPORT partials/topic/watch.tpl -->
+				<!-- IMPORT partials/topic/sort.tpl -->
+				<!-- IMPORT partials/topic/tools.tpl -->
 
-			{{{ if (!feeds:disableRSS && rssFeedUrl) }}}
-			<a class="btn-ghost-sm d-none d-lg-flex align-self-stretch" target="_blank" href="{rssFeedUrl}" itemprop="item"><i class="fa fa-rss text-primary"></i></a>
-			{{{ end }}}
+				{{{ if (!feeds:disableRSS && rssFeedUrl) }}}
+				<a class="btn-ghost-sm d-none d-lg-flex align-self-stretch" target="_blank" href="{rssFeedUrl}"><i class="fa fa-rss text-primary"></i></a>
+				{{{ end }}}
 
-			<span class="loading-indicator btn float-start text-muted navbar-text hidden" done="0">
-				<i class="fa fa-refresh fa-spin"></i>
-				<span class="hidden-xs">[[topic:loading_more_posts]]</span>
-			</span>
-		</ul>
-		<!-- IMPORT partials/topic/reply-button.tpl -->
-	</div>
-
-</nav>
+				{{{ if browsingUsers }}}
+				<div class="hidden-xs">
+				<!-- IMPORT partials/topic/browsing-users.tpl -->
+				</div>
+				{{{ end }}}
+			</ul>
+			<!-- IMPORT partials/topic/reply-button.tpl -->
+		</div>
+	</nav>
+</div>

package/templates/partials/posts_list_item.tpl

@@ -1,19 +1,19 @@
 <hr/>
-<a class="topic-title fw-semibold fs-5 text-reset" href="{config.relative_path}/post/{./pid}">
+<a class="d-inline-block topic-title fw-semibold fs-5 mb-3 text-reset text-break" href="{config.relative_path}/post/{./pid}">
     {{{ if !./isMainPost }}}RE: {{{ end }}}{./topic.title}
 </a>
 <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}">
     <div class="post-body d-flex flex-column gap-1">
         <div class="d-flex gap-3 post-info">
             <div class="post-author d-flex gap-1">
-                <a class="lh-1" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "16px", true, "not-responsive")}</a>
+                <a class="lh-1 text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "16px", true, "not-responsive")}</a>
                 <a class="fw-semibold text-sm" href="{config.relative_path}/user/{./user.userslug}">{../user.displayname}</a>
             </div>
-            <span class="timeago text-sm text-muted" title="{../timestampISO}"></span>
+            <span class="timeago text-sm text-muted" title="{./timestampISO}"></span>
         </div>
 
-        <div component="post/content" class="content text-sm">
-            {../content}
+        <div component="post/content" class="content text-sm text-break">
+            {./content}
         </div>
     </div>
 </li>

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

@@ -9,12 +9,12 @@
 </div>
 {{{ end }}}
 
-<ul id="quick-search-results" class="quick-search-results list-unstyled mb-0 p-0 overflow-auto" 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" 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">
 		<a href="{config.relative_path}/post/{posts.pid}"
-			class="dropdown-item rounded-1 text-reset d-block text-truncate px-2 py-1">
+			class="btn-ghost-sm rounded-1 text-reset d-block text-truncate px-2 py-1">
 			<span class="quick-search-title fw-semibold text-sm">{posts.topic.title}</span>
 			<br/>
 			<p class="snippet text-xs text-break text-wrap mb-0">
@@ -22,7 +22,7 @@
 			</p>
 		</a>
 		<div class="d-flex gap-1 post-info px-2 text-xs">
-			<div class="category-item d-inline-block">
+			<div class="category-item d-inline-block ff-secondary">
 				<span>{function.buildCategoryLabel, posts.category}</span>
 			</div>
 			<span class="timeago text-muted" title="{posts.timestampISO}"></span>

package/templates/partials/search-filters.tpl

@@ -0,0 +1,184 @@
+<div class="d-flex flex-wrap gap-2 align-items-center" component="search/filters">
+	<!-- category filter -->
+	<div class="post-search-item">
+		<div component="category/filter" class="dropdown" data-filter-name="category">
+			<a component="category/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.categories.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+				<span class="filter-label">{{{ if filters.categories.active }}}{filters.categories.label}{{{ else }}}[[search:categories]]{{{ end }}}</span>
+				<span class="caret"></span>
+			</a>
+
+			<ul class="dropdown-menu p-1 text-sm">
+				<li class="px-3 py-1 mb-2 d-flex flex-column gap-2">
+					<div component="category-selector-search">
+						<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 class="px-3 py-1">
+					<div class="form-check">
+						<input id="search-children" class="form-check-input" type="checkbox"/>
+						<label class="form-check-label" for="search-children">[[search:search-child-categories]]</label>
+					</div>
+				</div>
+			</ul>
+		</div>
+	</div>
+
+
+	<!-- tag filter -->
+	<div class="post-search-item">
+		<div component="tag/filter" class="dropdown" data-filter-name="tag">
+			<a component="tag/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.tags.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+				<span class="filter-label">{{{ if filters.tags.active }}}{filters.tags.label}{{{ else }}}[[search:tags]]{{{ end }}}</span>
+				<span class="caret"></span>
+			</a>
+
+			<ul class="dropdown-menu p-1 text-sm" style="width: 350px;">
+				<li class="px-3 py-1 d-flex flex-column gap-2">
+					<input type="text" class="form-control" component="tag/filter/search" placeholder="[[search:type-a-tag]]">
+					<div component="tag/filter/selected" class="d-flex flex-wrap gap-2">
+						{{{ each tagFilterSelected }}}
+						<div class="d-flex px-2 py-1 rounded-1 text-bg-primary gap-2 align-items-center text-sm">
+							<div>{./valueEscaped}</div>
+							<button component="tag/filter/delete" data-tag="{./valueEscaped}" class="btn btn-primary btn-sm py-0"><i class="fa fa-times fa-xs"></i></button>
+						</div>
+						{{{ end }}}
+					</div>
+					<hr/>
+					<div component="tag/filter/results" class="d-flex flex-wrap gap-2">
+						{{{ each tagFilterResults }}}
+						<button class="btn btn-light btn-sm border" data-tag="{./valueEscaped}">{./valueEscaped}</button>
+						{{{ end }}}
+					</div>
+				</li>
+			</ul>
+		</div>
+	</div>
+
+	<!-- user name filter -->
+	<div class="post-search-item">
+		<div component="user/filter" class="dropdown" data-filter-name="user">
+			<a component="user/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.users.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+				<span class="filter-label">{{{ if filters.users.active }}}{filters.users.label}{{{ else }}}[[search:posted-by]]{{{ end }}}</span>
+				<span class="caret"></span>
+			</a>
+
+			<ul class="dropdown-menu p-1 text-sm" style="width: 350px;">
+				<li class="px-3 py-1 d-flex flex-column gap-2">
+					<input type="text" class="form-control" component="user/filter/search" placeholder="[[search:type-a-username]]">
+					<div component="user/filter/selected" class="d-flex flex-wrap gap-2">
+						{{{ each userFilterSelected }}}
+						<div class="d-flex px-2 py-1 rounded-1 text-bg-primary gap-2 align-items-center text-sm">
+							{buildAvatar(@value, "16px", true)} {./username}
+							<button component="user/filter/delete" data-uid="{./uid}" class="btn btn-primary btn-sm py-0"><i class="fa fa-times fa-xs"></i></button>
+						</div>
+						{{{ end }}}
+					</div>
+					<hr/>
+					<div component="user/filter/results" class="d-flex flex-wrap gap-2">
+						{{{ each userFilterResults }}}
+						<button class="btn btn-light btn-sm border" data-uid="{./uid}" data-username="{./username}">{buildAvatar(@value, "16px", true)} {./username}</button>
+						{{{ end }}}
+					</div>
+				</li>
+			</ul>
+		</div>
+	</div>
+
+
+	<!-- reply count filter -->
+	<div class="post-search-item">
+		<div class="dropdown" data-filter-name="replies">
+			<a id="reply-count-button" class="filter-btn btn btn-light btn-sm border {{{ if filters.replies.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+				<span class="filter-label">{{{ if filters.replies.active }}}{filters.replies.label}{{{ else }}}[[search:replies]]{{{ end }}}</span>
+				<span class="caret"></span>
+			</a>
+
+			<ul class="dropdown-menu p-1 text-sm" style="width: 300px;">
+				<li class="px-3 py-1 d-flex flex-nowrap gap-2">
+					<select id="reply-count-filter" class="form-select py-2 ps-2 pe-3">
+						<option value="atleast">[[search:at-least]]</option>
+						<option value="atmost">[[search:at-most]]</option>
+					</select>
+					<input id="reply-count" type="number" min="0" class="form-control py-2 ps-2 pe-3" />
+				</li>
+			</ul>
+		</div>
+	</div>
+
+	<!-- time filter -->
+	<div class="post-search-item">
+		<div class="dropdown" data-filter-name="time">
+			<a id="post-time-button" class="filter-btn btn btn-light btn-sm border {{{ if filters.time.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+				<span class="filter-label">{{{ if filters.time.active }}}{filters.time.label}{{{ else }}}[[search:time]]{{{ end }}}</span>
+				<span class="caret"></span>
+			</a>
+
+			<ul class="dropdown-menu p-1 text-sm" style="width: 350px;">
+				<li class="px-3 py-1 d-flex flex-nowrap gap-2">
+					<select id="post-time-filter" class="form-select py-2 ps-2 pe-3">
+						<option value="newer">[[search:newer-than]]</option>
+						<option value="older">[[search:older-than]]</option>
+					</select>
+					<select id="post-time-range" class="form-select py-2 ps-2 pe-3">
+						<option value="">[[search:any-date]]</option>
+						<option value="86400">[[search:yesterday]]</option>
+						<option value="604800">[[search:one-week]]</option>
+						<option value="1209600">[[search:two-weeks]]</option>
+						<option value="2592000">[[search:one-month]]</option>
+						<option value="7776000">[[search:three-months]]</option>
+						<option value="15552000">[[search:six-months]]</option>
+						<option value="31104000">[[search:one-year]]</option>
+					</select>
+				</li>
+			</ul>
+		</div>
+	</div>
+
+	<!-- sort filter -->
+	<div class="post-search-item">
+		<div class="dropdown" data-filter-name="sort">
+			<a id="sort-by-button" class="filter-btn btn btn-light btn-sm border {{{ if filters.sort.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+				<span class="filter-label">{{{ if filters.sort.active }}}{filters.sort.label}{{{ else }}}[[search:sort]]{{{ end }}}</span>
+				<span class="caret"></span>
+			</a>
+
+			<ul class="dropdown-menu p-1 text-sm" style="width: 250px;">
+				<li class="px-3 py-1 d-flex flex-column gap-2">
+					<select id="post-sort-by" class="form-select py-2 ps-2 pe-3">
+						<option value="relevance">[[search:relevance]]</option>
+						<option value="timestamp">[[search:post-time]]</option>
+						<option value="votes">[[search:votes]]</option>
+						<option value="topic.lastposttime">[[search:last-reply-time]]</option>
+						<option value="topic.title">[[search:topic-title]]</option>
+						<option value="topic.postcount">[[search:number-of-replies]]</option>
+						<option value="topic.viewcount">[[search:number-of-views]]</option>
+						<option value="topic.votes">[[search:topic-votes]]</option>
+						<option value="topic.timestamp">[[search:topic-start-date]]</option>
+						<option value="user.username">[[search:username]]</option>
+						<option value="category.name">[[search:category]]</option>
+					</select>
+					<select id="post-sort-direction" class="form-select py-2 ps-2 pe-3">
+						<option value="desc">[[search:descending]]</option>
+						<option value="asc">[[search:ascending]]</option>
+					</select>
+				</li>
+			</ul>
+		</div>
+	</div>
+
+	<!-- save & reset preferences -->
+	<div class="post-search-item">
+		<div class="dropdown">
+			<a class="btn btn-light btn-sm border border-gray-300 dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">[[search:save]] <span class="caret"></span>
+			</a>
+
+			<ul class="dropdown-menu p-1 text-sm" style="width: 300px;">
+				<li class="px-3 py-1 d-flex flex-column gap-2">
+					<button id="save-preferences" class="btn btn-primary">[[search:save-preferences]]</button>
+					<button id="clear-preferences" class="btn-outline border">[[search:clear-preferences]]</button>
+				</li>
+			</ul>
+		</div>
+	</div>
+</div>