nodebb-theme-harmony 1.0.0 → 1.0.1

package/templates/partials/search-results.tpl

@@ -1,41 +1,37 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<div id="results" class="search-results col-md-12" data-search-query="{search_query}">
-	{{{ if matchCount }}}
-	<div class="alert alert-info">[[search:results_matching, {matchCount}, {search_query}, {time}]] </div>
-	{{{ else }}}
-	{{{ if search_query }}}
-	<div class="alert alert-warning">[[search:no-matches]]</div>
+{{{ if matchCount }}}
+<div class="card card-header text-xs px-2 py-1 fw-semibold border-0 align-self-start">[[search:results_matching, {matchCount}, {search_query}, {time}]] </div>
+{{{ else }}}
+{{{ if search_query }}}
+<div class="badge text-bg-warning align-self-start">[[search:no-matches]]</div>
+{{{ end }}}
+{{{ end }}}
+
+<div id="results" class="search-results" data-search-query="{search_query}">
+	{{{ if showAsPosts }}}
+	{{{ if posts.length }}}
+	<!-- IMPORT partials/posts_list.tpl -->
 	{{{ end }}}
 	{{{ end }}}
 
-	{{{each posts}}}
-	<div class="topic-row card clearfix mb-3">
-		<div class="card-body">
-			<div>
-				<a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "24px", true)}</a>
-				<span class="search-result-text search-result-title"><a href="{config.relative_path}/post/{posts.pid}">{./topic.title}</a></span>
-			</div>
-
-			{{{ if showAsPosts }}}
-			<div class="search-result-text">
-				{./content}
-				<p class="fade-out"></p>
+	{{{ if showAsTopics }}}
+	{{{ 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}">
+			{{{ if !./isMainPost }}}RE: {{{ end }}}{./topic.title}
+		</a>
+		<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 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>
 			</div>
-			{{{ end }}}
-
-			<small class="post-info float-end">
-				<a href="{config.relative_path}/category/{./category.slug}">
-					<div class="category-item d-inline-block">
-						{buildCategoryIcon(./category, "24px", "rounded-circle")}
-						{./category.name}
-					</div>
-				</a> &bull;
-				<span class="timeago" title="{./timestampISO}"></span>
-			</small>
 		</div>
 	</div>
-	{{{end}}}
+	{{{ end }}}
+	{{{ end }}}
 
 	{{{ if users.length }}}
 	<!-- IMPORT partials/users_list.tpl -->
@@ -48,9 +44,6 @@
 	{{{ if categories.length }}}
 	<ul class="categories list-unstyled">
 		{{{each categories}}}
-		{{{ if !@first }}}
-		<hr class="text-muted opacity-25"/>
-		{{{ end }}}
 		<!-- IMPORT partials/categories/item.tpl -->
 		{{{end}}}
 	</ul>

package/templates/partials/sidebar/chats.tpl

@@ -1,4 +1,4 @@
-<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link nav-btn d-flex gap-2 justify-content-between align-items-center position-relative" title="[[global:header.chats]]" component="chat/dropdown">
+<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link nav-btn d-flex gap-2 justify-content-between align-items-center position-relative" component="chat/dropdown">
 	<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
 		<span class="position-relative">
 			<i component="chat/icon" class="fa fa-fw {{{ if unreadCount.chat}}}fa-comment{{{ else }}}fa-comment-o{{{ end }}} unread-count" data-content="{unreadCount.chat}"></i>
@@ -10,44 +10,36 @@
 </a>
 <ul class="chats-dropdown dropdown-menu p-1 shadow">
 	<li>
-		<ul component="chat/list" class="chat-list chats-list list-unstyled p-0 pe-1">
-			<li class="dropdown-item rounded-1 p-2 d-flex gap-2 placeholder-wave">
-				<div class="main-avatar">
-					<div class="placeholder" style="width: 32px; height: 32px;"></div>
+		<div component="chat/list" class="list-container chats-list overscroll-behavior-contain p-0 pe-1 ff-base">
+			<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">
+						<div class="main-avatar">
+							<div class="placeholder" style="width: 32px; height: 32px;"></div>
+						</div>
+						<div class="d-flex flex-grow-1 flex-column w-100">
+							<div class="text-xs"><div class="placeholder col-3"></div></div>
+							<div class="text-sm"><div class="placeholder col-11"></div></div>
+							<div class="text-xs"><div class="placeholder col-4"></div></div>
+						</div>
+					</div>
+					<div>
+						<button class="mark-read btn-ghost-sm" style="width: 1.5rem; height: 1.5rem;">
+							<i class="unread fa fa-2xs fa-circle text-primary"></i>
+						</button>
+					</div>
 				</div>
-				<div class="d-flex flex-grow-1 flex-column w-100">
-					<div class="text-xs placeholder col-3">&nbsp;</div>
-					<div class="text-sm placeholder col-11">&nbsp;</div>
-					<div class="text-xs placeholder col-4">&nbsp;</div>
-				</div>
-			</li>
-			<li class="dropdown-item rounded-1 p-2 d-flex gap-2 placeholder-wave">
-				<div class="main-avatar">
-					<div class="placeholder" style="width: 32px; height: 32px;"></div>
-				</div>
-				<div class="d-flex flex-grow-1 flex-column w-100">
-					<div class="text-xs placeholder col-3">&nbsp;</div>
-					<div class="text-sm placeholder col-11">&nbsp;</div>
-					<div class="text-xs placeholder col-4">&nbsp;</div>
-				</div>
-			</li>
-			<li class="dropdown-item rounded-1 p-2 d-flex gap-2 placeholder-wave">
-				<div class="main-avatar">
-					<div class="placeholder" style="width: 32px; height: 32px;"></div>
-				</div>
-				<div class="d-flex flex-grow-1 flex-column w-100">
-					<div class="text-xs placeholder col-3">&nbsp;</div>
-					<div class="text-sm placeholder col-11">&nbsp;</div>
-					<div class="text-xs placeholder col-4">&nbsp;</div>
-				</div>
-			</li>
-		</ul>
+			</div>
+		</div>
 	</li>
 	<li class="dropdown-divider"></li>
-	<li class="notif-dropdown-link">
+	<li>
 		<div class="d-flex justify-content-center gap-1 flex-wrap">
 			<a component="chats/mark-all-read" role="button" href="#" class="btn btn-sm btn-light mark-all-read flex-fill text-nowrap text-truncate ff-secondary"><i class="fa fa-check-double"></i> [[modules:chat.mark_all_read]]</a>
-			<a class="btn btn-sm btn-primary flex-fill text-nowrap text-truncate ff-secondary" href="{relative_path}/user/{user.userslug}/chats"><i class="fa fa-list"></i> [[modules:chat.see_all]]</a>
+			<!-- on md and up see all chats button goes to last room -->
+			<a class="d-none d-md-inline btn btn-sm btn-primary flex-fill text-nowrap text-truncate ff-secondary" href="{relative_path}/user/{user.userslug}/chats{{{ if user.lastRoomId }}}/{user.lastRoomId}{{{ end }}}"><i class="fa fa-list"></i> [[modules:chat.see_all]]</a>
+			<!-- on xs&sm the see all chats button goes to the list of chats -->
+			<a class="d-inline d-md-none btn btn-sm btn-primary flex-fill text-nowrap text-truncate ff-secondary" href="{relative_path}/user/{user.userslug}/chats"><i class="fa fa-list"></i> [[modules:chat.see_all]]</a>
 		</div>
 	</li>
 </ul>

package/templates/partials/sidebar/drafts.tpl

@@ -1,4 +1,4 @@
-<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link nav-btn d-flex gap-2 justify-content-between align-items-center position-relative" title="[[global:header.drafts]]">
+<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link nav-btn d-flex gap-2 justify-content-between align-items-center position-relative">
 	<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
 		<span class="position-relative">
 			<i component="drafts/icon" class="fa fa-fw fa-pen-to-square unread-count"></i>
@@ -10,43 +10,54 @@
 </a>
 <ul class="drafts-dropdown dropdown-menu p-1 shadow">
 	<li>
-		<ul component="drafts/list" class="draft-list list-unstyled d-flex flex-column gap-1 pe-1">
-			<li class="no-drafts text-center p-2">[[modules:composer.no-drafts]]</li>
-
-			{{{ each drafts }}}
-			{{{ if !@first}}}
-			<hr class="m-0"/>
-			{{{ end }}}
-			<li class="" data-save-id="{./save_id}">
-				<div class="d-flex gap-1 justify-content-between ff-base">
-					<div class="dropdown-item rounded-1 p-2 d-flex flex-column gap-2 pointer" component="drafts/open" data-save-id="{./save_id}">
-						{{{ if (./action == "topics.post") }}}
-						{{{ if ./title}}}
-						<div class="text text-xs fw-semibold line-clamp-2">{./title}</div>
-						{{{ end }}}
-						{{{ end }}}
+		<div component="drafts/list" class="list-container draft-list list-unstyled d-flex flex-column overscroll-behavior-contain gap-1 pe-1">
+			<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>
+					<div class="text-sm placeholder col-11">&nbsp;</div>
+					<div class="text-xs placeholder col-4">&nbsp;</div>
+				</div>
+			</div>
+			<div class="hidden no-drafts 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">[[modules:composer.no-drafts]]</div>
+			</div>
+			<div class="draft-item-container">
+				{{{ each drafts }}}
+				{{{ if !@first}}}
+				<hr class="my-1"/>
+				{{{ end }}}
+				<div data-save-id="{./save_id}">
+					<div class="d-flex gap-1 justify-content-between ff-base">
+						<div class="dropdown-item rounded-1 p-2 d-flex flex-column gap-2 pointer" component="drafts/open" data-save-id="{./save_id}">
+							{{{ if (./action == "topics.post") }}}
+							{{{ if ./title}}}
+							<div class="text text-xs fw-semibold line-clamp-2 text-break">{./title}</div>
+							{{{ end }}}
+							{{{ end }}}
 
-						{{{ if (./action == "posts.reply") }}}
-						<div class="text text-xs fw-semibold line-clamp-2">[[topic:composer.replying_to, "{./title}"]]</div>
-						{{{ end }}}
+							{{{ if (./action == "posts.reply") }}}
+							<div class="text text-xs fw-semibold line-clamp-2 text-break">[[topic:composer.replying_to, "{./title}"]]</div>
+							{{{ end }}}
 
-						{{{ if (./action == "posts.edit") }}}
-						<div class="text text-xs fw-semibold line-clamp-2">[[topic:composer.editing]]</div>
-						{{{ end }}}
+							{{{ if (./action == "posts.edit") }}}
+							<div class="text text-xs fw-semibold line-clamp-2">[[topic:composer.editing]]</div>
+							{{{ end }}}
 
-						{{{ if ./text }}}
-						<div class="text text-sm line-clamp-3">{./text}</div>
-						{{{ end }}}
-						<div class="timeago text-xs text-muted" title="{./timestampISO}"></div>
-					</div>
-					<div class="">
-						<button component="drafts/delete" data-save-id="{./save_id}" class="btn btn-light btn-sm">
-							<i class="unread fa fa-xs fa-trash text-secondary"></i>
-						</button>
+							{{{ if ./text }}}
+							<div class="text text-sm line-clamp-3 text-break">{./text}</div>
+							{{{ end }}}
+							<div class="timeago text-xs text-muted" title="{./timestampISO}"></div>
+						</div>
+						<div>
+							<button component="drafts/delete" data-save-id="{./save_id}" class="btn btn-light btn-sm">
+								<i class="unread fa fa-xs fa-trash text-secondary"></i>
+							</button>
+						</div>
 					</div>
 				</div>
-			</li>
-			{{{ end }}}
-		</ul>
+				{{{ end }}}
+			</div>
+		</div>
 	</li>
 </ul>

package/templates/partials/sidebar/logged-in-menu.tpl

@@ -1,23 +1,23 @@
-<li id="user_label" class="nav-item mx-2 dropstart usermenu" title="[[global:header.profile]]">
+<li id="user_label" class="nav-item mx-2 dropstart usermenu" title="{user.username}">
 	<!-- IMPORT partials/sidebar/user-menu.tpl -->
 </li>
 
 {{{ if config.searchEnabled }}}
-<li component="sidebar/search" class="nav-item mx-2 search dropstart position-relative">
+<li component="sidebar/search" class="nav-item mx-2 search dropstart position-relative" title="[[global:header.search]]">
 <!-- IMPORT partials/sidebar/search.tpl -->
 </li>
 {{{ end }}}
 
-<li component="notifications" class="nav-item mx-2 notifications dropstart">
+<li component="notifications" class="nav-item mx-2 notifications dropstart" title="[[global:header.notifications]]">
 <!-- IMPORT partials/sidebar/notifications.tpl -->
 </li>
 
 {{{ if canChat }}}
-<li class="nav-item mx-2 chats dropstart">
+<li class="nav-item mx-2 chats dropstart" title="[[global:header.chats]]">
 <!-- IMPORT partials/sidebar/chats.tpl -->
 </li>
 {{{ end }}}
 
-<li component="sidebar/drafts" class="nav-item mx-2 drafts dropstart">
+<li component="sidebar/drafts" class="nav-item mx-2 drafts dropstart" title="[[global:header.drafts]]">
 <!-- IMPORT partials/sidebar/drafts.tpl -->
 </li>

package/templates/partials/sidebar/logged-out-menu.tpl

@@ -1,5 +1,5 @@
 
-<li class="nav-item mx-2" title="[[global:login]]">
+<li class="nav-item mx-2 order-last order-md-first" title="[[global:login]]">
 	<a class="nav-link nav-btn" href="{relative_path}/login">
 		<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
 			<span class="position-relative">

package/templates/partials/sidebar/notifications.tpl

@@ -1,25 +1,46 @@
-<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link nav-btn d-flex gap-2 justify-content-between align-items-center position-relative" title="[[global:header.notifications]]">
+<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link nav-btn d-flex gap-2 justify-content-between align-items-center position-relative">
 	<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
 		<span class="position-relative">
 			<i component="notifications/icon" class="fa fa-fw {{{ if unreadCount.notification}}}fa-bell{{{ else }}}fa-bell-o{{{ end }}} unread-count" data-content="{unreadCount.notification}"></i>
 			<span component="notifications/count" class="visible-closed position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !unreadCount.notification }}}hidden{{{ end }}}">{unreadCount.notification}</span>
 		</span>
-		<span class="nav-text small visible-open fw-semibold">[[global:header.notifications]]</span>
+		<span class="nav-text small visible-open fw-semibold truncate-text">[[global:header.notifications]]</span>
 	</span>
 	<span component="notifications/count" class="visible-open badge rounded-1 bg-primary {{{ if !unreadCount.notification }}}hidden{{{ end }}}">{unreadCount.notification}</span>
 </a>
-<ul class="notifications-dropdown dropdown-menu p-2 shadow">
+<ul class="notifications-dropdown dropdown-menu p-1 shadow">
 	<li>
-		<ul component="notifications/list" class="notification-list list-unstyled">
-			<li class="mb-2 placeholder-wave">
-				<div class="text-sm placeholder col-11">&nbsp;</div>
-				<div class="text-sm placeholder col-5">&nbsp;</div><br />
-				<div class="text-xs placeholder col-3">&nbsp;</div>
+		<ul component="notifications/list" class="list-container notification-list list-unstyled overscroll-behavior-contain pe-1 ff-base">
+			<li 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">
+						<div class="placeholder" style="width: 32px; height: 32px;"></div>
+						<div class="flex-grow-1">
+							<div class="d-flex flex-column">
+								<div class="text-sm">
+									<span class="placeholder placeholder-sm col-4"></span>
+									<span class="placeholder placeholder-sm col-6"></span>
+									<span class="placeholder placeholder-sm col-7"></span>
+									<span class="placeholder placeholder-sm col-2"></span>
+									<span class="placeholder placeholder-sm col-5"></span>
+								</div>
+								<div class="text-xs">
+									<div class="placeholder placeholder-xs col-6"></div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div>
+						<button class="mark-read btn-ghost-sm" style="width: 1.5rem; height: 1.5rem;">
+							<i class="unread fa fa-2xs fa-circle text-primary"></i>
+						</button>
+					</div>
+				</div>
 			</li>
 		</ul>
 	</li>
 	<li class="dropdown-divider"></li>
-	<li class="notif-dropdown-link">
+	<li>
 		<div class="d-flex justify-content-center gap-1 flex-wrap">
 			<a role="button" href="#" class="btn btn-sm btn-light mark-all-read flex-fill text-nowrap text-truncate ff-secondary"><i class="fa fa-check-double"></i> [[notifications:mark_all_read]]</a>
 			<a class="btn btn-sm btn-primary flex-fill text-nowrap text-truncate ff-secondary" href="{relative_path}/notifications"><i class="fa fa-list"></i> [[notifications:see_all]]</a>

package/templates/partials/sidebar/search-mobile.tpl

@@ -15,7 +15,7 @@
 				<div class="quick-search-results-container"></div>
 			</div>
 
-			<div class="d-flex gap-1 input-container mt-2">
+			<div class="d-flex gap-1 input-container">
 				<input autocomplete="off" type="text" class="form-control" placeholder="[[global:search]]" name="query" value="">
 
 				<div class="nav-btn d-flex justify-content-center align-items-center advanced-search-link">

package/templates/partials/sidebar/search.tpl

@@ -1,4 +1,4 @@
-<a component="search/button" id="search-button" href="#" role="button" class="nav-link nav-btn d-flex gap-2 align-items-center text-truncate" data-bs-toggle="dropdown" title="[[global:header.search]]">
+<a component="search/button" id="search-button" href="#" role="button" class="nav-link nav-btn d-flex gap-2 align-items-center text-truncate" data-bs-toggle="dropdown">
 	<span>
 		<i class="fa fa-search fa-fw"></i>
 	</span>

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

@@ -2,73 +2,82 @@
 	{buildAvatar(user, "20px", true)}
 	<span id="user-header-name" class="nav-text small visible-open fw-semibold">{user.username}</span>
 </label>
-<ul id="user-control-list" component="header/usercontrol" class="dropdown-menu shadow p-1 text-sm" aria-labelledby="user_dropdown">
+<ul id="user-control-list" component="header/usercontrol" class="overscroll-behavior-contain user-dropdown dropdown-menu shadow p-1 text-sm ff-base" aria-labelledby="user_dropdown">
 	<li>
-		<a class="dropdown-item rounded-1 d-flex align-items-center gap-1" component="header/profilelink" href="{relative_path}/user/{user.userslug}">
-			<div class="text-center"><span component="user/status" class="badge border border-white border-2 rounded-circle status {user.status}"><span class="visually-hidden">[[global:{user.status}]]</span></span></div>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="header/profilelink" href="{relative_path}/user/{user.userslug}">
+			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status {user.status}"><span class="visually-hidden">[[global:{user.status}]]</span></span>
 			<span class="fw-semibold" component="header/username">{user.username}</span>
 		</a>
 	</li>
 	<li role="presentation" class="dropdown-divider"></li>
 	<li><h6 class="dropdown-header text-xs">[[global:status]]</h6></li>
 	<li>
-		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-1" data-status="online">
-			<div class="text-center"><span component="user/status" class="badge border border-white border-2 rounded-circle status online"><span class="visually-hidden">[[global:online]]</span></span></div>
-			<span{{{ if user.online }}} class="fw-semibold"{{{ end }}}> [[global:online]]</span>
+		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.online }}}selected{{{ end }}}" data-status="online">
+			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status online"><span class="visually-hidden">[[global:online]]</span></span>
+			<span class="flex-grow-1">[[global:online]]</span>
+			<i class="fa-solid fa-check text-muted flex-shrink-0"></i>
 		</a>
 	</li>
 	<li>
-		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-1" data-status="away">
-			<div class="text-center"><span component="user/status" class="badge border border-white border-2 rounded-circle status away"><span class="visually-hidden">[[global:away]]</span></span></div>
-			<span{{{ if user.away}}} class="fw-semibold"{{{ end }}}> [[global:away]]</span>
+		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.away }}}selected{{{ end }}}" data-status="away">
+			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status away"><span class="visually-hidden">[[global:away]]</span></span>
+			<span class="flex-grow-1">[[global:away]]</span>
+			<i class="fa-solid fa-check text-muted flex-shrink-0"></i>
 		</a>
 	</li>
 	<li>
-		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-1" data-status="dnd">
-			<div class="text-center"><span component="user/status" class="badge border border-white border-2 rounded-circle status dnd"><span class="visually-hidden">[[global:dnd]]</span></span></div>
-			<span{{{ if user.dnd}}} class="fw-semibold"{{{ end }}}> [[global:dnd]]</span>
+		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.dnd }}}selected{{{ end }}}" data-status="dnd">
+			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status dnd"><span class="visually-hidden">[[global:dnd]]</span></span>
+			<span class="flex-grow-1">[[global:dnd]]</span>
+			<i class="fa-solid fa-check text-muted flex-shrink-0"></i>
 		</a>
 	</li>
 	<li>
-		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-1" data-status="offline">
-			<div class="text-center"><span component="user/status" class="badge border border-white border-2 rounded-circle status offline"><span class="visually-hidden">[[global:invisible]]</span></span></div>
-			<span{{{ if user.offline}}} class="fw-semibold"{{{ end }}}> [[global:invisible]]</span>
+		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.offline }}}selected{{{ end }}}" data-status="offline">
+			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status offline"><span class="visually-hidden">[[global:invisible]]</span></span>
+			<span class="flex-grow-1">[[global:invisible]]</span>
+			<i class="fa-solid fa-check text-muted flex-shrink-0"></i>
 		</a>
 	</li>
 	<li role="presentation" class="dropdown-divider"></li>
 	<li>
-		<a class="dropdown-item rounded-1" component="header/profilelink/edit" href="{relative_path}/user/{user.userslug}/edit">
-			<i class="fa fa-fw fa-edit"></i> <span>[[user:edit-profile]]</span>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/user/{user.userslug}/bookmarks">
+			<i class="fa fa-fw fa-bookmark text-muted"></i> <span>[[user:bookmarks]]</span>
 		</a>
 	</li>
 	<li>
-		<a class="dropdown-item rounded-1" component="header/profilelink/settings" href="{relative_path}/user/{user.userslug}/settings">
-			<i class="fa fa-fw fa-gear"></i> <span>[[user:settings]]</span>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="header/profilelink/edit" href="{relative_path}/user/{user.userslug}/edit">
+			<i class="fa fa-fw fa-edit text-muted"></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">
+			<i class="fa fa-fw fa-gear text-muted"></i> <span>[[user:settings]]</span>
 		</a>
 	</li>
 	{{{ if showModMenu }}}
 	<li role="presentation" class="dropdown-divider"></li>
 	<li><h6 class="dropdown-header text-xs">[[pages:moderator-tools]]</h6></li>
 	<li>
-		<a class="dropdown-item rounded-1" href="{relative_path}/flags">
-			<i class="fa fa-fw fa-flag"></i> <span>[[pages:flagged-content]]</span>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/flags">
+			<i class="fa fa-fw fa-flag text-muted"></i> <span>[[pages:flagged-content]]</span>
 		</a>
 	</li>
 	<li>
-		<a class="dropdown-item rounded-1" href="{relative_path}/post-queue">
-			<i class="fa fa-fw fa-list-alt"></i> <span>[[pages:post-queue]]</span>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/post-queue">
+			<i class="fa fa-fw fa-list-alt text-muted"></i> <span>[[pages:post-queue]]</span>
 		</a>
 	</li>
 	<li>
-		<a class="dropdown-item rounded-1" href="{relative_path}/ip-blacklist">
-			<i class="fa fa-fw fa-ban"></i> <span>[[pages:ip-blacklist]]</span>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/ip-blacklist">
+			<i class="fa fa-fw fa-ban text-muted"></i> <span>[[pages:ip-blacklist]]</span>
 		</a>
 	</li>
 	{{{ else }}}
 	{{{ if postQueueEnabled }}}
 	<li>
-		<a class="dropdown-item rounded-1" href="{relative_path}/post-queue">
-			<i class="fa fa-fw fa-list-alt"></i> <span>[[pages:post-queue]]</span>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/post-queue">
+			<i class="fa fa-fw fa-list-alt text-muted"></i> <span>[[pages:post-queue]]</span>
 		</a>
 	</li>
 	{{{ end }}}
@@ -79,8 +88,8 @@
 		<form method="post" action="{relative_path}/logout">
 			<input type="hidden" name="_csrf" value="{config.csrf_token}">
 			<input type="hidden" name="noscript" value="true">
-			<button type="submit" class="dropdown-item rounded-1">
-				<i class="fa fa-fw fa-sign-out"></i><span> [[global:logout]]</span>
+			<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>
 			</button>
 		</form>
 	</li>

package/templates/partials/sidebar-left.tpl

@@ -1,9 +1,9 @@
-<nav class="{{{ if config.openSidebars}}}open{{{ end }}} text-dark bg-light sidebar sidebar-left start-0 border-end vh-100 d-none d-md-flex flex-column justify-content-between sticky-top ff-secondary">
+<nav class="{{{ if config.theme.openSidebars}}}open{{{ end }}} text-dark bg-light sidebar sidebar-left start-0 border-end vh-100 d-none d-lg-flex flex-column justify-content-between sticky-top">
 	<ul id="main-nav" class="list-unstyled d-flex flex-column w-100 gap-2 mt-2">
 		{{{ each navigation }}}
-		<!-- IF function.displayMenuItem, @index -->
+		{{{ if displayMenuItem(@root, @index) }}}
 		<li class="nav-item mx-2 {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
-			<a class="nav-link nav-btn navigation-link d-flex gap-2 justify-content-between align-items-center {{{ if navigation.dropdown }}}dropdown-toggle{{{ end }}}"
+			<a class="nav-link nav-btn navigation-link d-flex gap-2 justify-content-between align-items-center {{{ if ./dropdown }}}dropdown-toggle{{{ end }}}"
 			{{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}}>
 				<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
 					<span class="position-relative">
@@ -12,25 +12,28 @@
 						<span component="navigation/count" class="visible-closed position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
 						{{{ end }}}
 					</span>
-					{{{ if navigation.text }}}
-					<span class="nav-text small visible-open fw-semibold text-truncate">{navigation.text}</span>
+					{{{ if ./text }}}
+					<span class="nav-text small visible-open fw-semibold text-truncate">{./text}</span>
 					{{{ end }}}
 				</span>
 				<span component="navigation/count" class="visible-open badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
 			</a>
-			{{{ if navigation.dropdown }}}
-			<ul class="dropdown-menu shadow">
-				{navigation.dropdownContent}
+			{{{ if ./dropdown }}}
+			<ul class="dropdown-menu p-1 shadow">
+				{./dropdownContent}
 			</ul>
 			{{{ end }}}
 		</li>
-		<!-- ENDIF function.displayMenuItem -->
-		{{{end}}}
+		{{{ end }}}
+		{{{ end }}}
 	</ul>
 	<div class="w-100">
+		{{{ if !config.disableCustomUserSkins }}}
 		<!-- IMPORT partials/skin-switcher.tpl -->
+		{{{ end }}}
+
 		<div class="sidebar-toggle m-2 d-none d-lg-block">
-			<a href="#" role="button" component="sidebar/toggle" class="nav-btn d-flex gap-2 align-items-center p-2 pointer nav-link w-100 text-nowrap">
+			<a href="#" role="button" component="sidebar/toggle" class="nav-btn d-flex gap-2 align-items-center p-2 pointer nav-link w-100 text-nowrap" title="[[harmony:expand]]">
 				<i class="fa fa-fw fa-angles-right"></i>
 				<i class="fa fa-fw fa-angles-left"></i>
 				<span class="nav-text visible-open fw-semibold small lh-1">[[harmony:collapse]]</span>

package/templates/partials/sidebar-right.tpl

@@ -1,4 +1,4 @@
-<nav class="{{{ if config.openSidebars}}}open{{{ end }}} text-dark bg-light sidebar sidebar-right end-0 border-start vh-100 d-none d-md-flex flex-column sticky-top ff-secondary">
+<nav class="{{{ if config.theme.openSidebars}}}open{{{ end }}} text-dark bg-light sidebar sidebar-right end-0 border-start vh-100 d-none d-lg-flex flex-column sticky-top">
 	{{{ if config.loggedIn }}}
 	<ul id="logged-in-menu" class="list-unstyled d-flex flex-column w-100 gap-2 mt-2">
 	<!-- IMPORT partials/sidebar/logged-in-menu.tpl -->
@@ -9,8 +9,6 @@
 	</ul>
 	{{{ end }}}
 
-	<!-- IMPORT partials/topic/navigator.tpl -->
-
 	<div class="visible-open small text-secondary mt-auto" data-widget-area="sidebar-footer">
 		{{{each widgets.sidebar-footer}}}
 		{{./html}}

package/templates/partials/skin-switcher.tpl

@@ -1,5 +1,5 @@
-<div class="dropend m-2" component="skinSwitcher">
-	<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link nav-btn position-relative" title="[[harmony:skins]]">
+<div class="dropend m-2" component="skinSwitcher" title="[[harmony:skins]]">
+	<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link nav-btn position-relative">
 		<span class="justify-content-between w-100">
 			<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
 				<span>
@@ -10,7 +10,7 @@
 		</span>
 	</a>
 
-	<ul class="dropdown-menu overflow-auto">
+	<ul class="dropdown-menu p-1 text-sm overflow-auto">
 		<div class="d-flex px-2">
 			<div>
 				<li class="dropdown-header">Light</li>

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

@@ -0,0 +1,34 @@
+<button type="button" class="btn-ghost-sm d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown">
+    {{{ if selectedTag }}}
+    <span class="d-inline-flex align-items-center gap-1">
+        <i class="fa fa-fw fa-tags link-primary"></i>
+        <span class="visible-md-inline visible-lg-inline fw-semibold">{selectedTag.label}</span>
+    </span>
+    {{{ else }}}
+    <i class="fa fa-fw fa-tags link-primary"></i>
+    <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;">
+    <li role="presentation" data-tag="">
+        <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menu-item" 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="menu-item" 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>