nodebb-theme-persona 13.3.34 → 13.3.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-persona",
-  "version": "13.3.34",
+  "version": "13.3.35",
   "nbbpm": {
     "compatibility": "^3.7.0"
   },

package/scss/topic.scss

@@ -93,16 +93,6 @@
 		top: -$post-padding;
 	}
 
-	[component="post/upvote"], [component="post/downvote"] {
-		display: inline-block;
-		padding: 1rem;
-		color: $text-muted;
-
-		&:focus {
-				text-decoration: none;
-		}
-	}
-
 	[component="post/upvote"].upvoted i {
 		@include fa-icon-solid($fa-var-circle-chevron-up);
 		color: $primary;
@@ -113,11 +103,6 @@
 		color: $primary;
 	}
 
-	[component="post/vote-count"] {
-		display: inline-block;
-		padding: 1rem 0.5rem;
-	}
-
 	[component="post/parent"] {
 		border: 0;
 		font-size: 10px;
@@ -194,30 +179,6 @@
 		min-height: 60px;
 	}
 
-	.post-tools {
-		a {
-			padding: 1rem 10px;
-			@include pointer;
-		}
-	}
-
-	[component="post/tools"] {
-		font-size: 14px;
-
-		> a {
-			padding: 1rem;
-		}
-
-		// temporary until we build component toggling
-		.favourite.btn-warning, .follow.btn-success {
-			background: white !important;
-			color: #333;
-			&:hover {
-				background: $primary !important;
-			}
-		}
-	}
-
 	h1 {
 		.btn-group, .btn {
 			margin-left: 15px;

package/templates/category.tpl

@@ -26,7 +26,7 @@
 			<div component="category/controls" class="d-flex gap-1 align-items-stretch">
 				<!-- IMPORT partials/category/watch.tpl -->
 				<!-- IMPORT partials/category/sort.tpl -->
-				<!-- IMPORT partials/category/tools.tpl -->
+				<!-- IMPORT partials/category/tools-dropdown-right.tpl -->
 			</div>
 		</div>
 		{{{ end }}}

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

@@ -4,7 +4,7 @@
 		<span id="user-header-name" class="d-block d-sm-none">{user.username}</span>
 	</a>
 	<input type="checkbox" class="hidden" id="user-control-list-check" aria-hidden="true">
-	<ul id="user-control-list" component="header/usercontrol" class="dropdown-menu dropdown-menu-end" aria-labelledby="user_dropdown" role="menu">
+	<ul id="user-control-list" component="header/usercontrol" class="dropdown-menu dropdown-menu-end p-1" aria-labelledby="user_dropdown" role="menu">
 		<li>
 			<a class="dropdown-item" component="header/profilelink" href="{relative_path}/user/{user.userslug}" role="menuitem">
 				<i component="user/status" class="fa fa-fw fa-circle status {user.status}"></i> <span component="header/username">{user.username}</span>

package/templates/partials/post_bar.tpl

@@ -3,14 +3,13 @@
 		<span class="hidden-xs">[[topic:loading-more-posts]]</span> <i class="fa fa-refresh fa-spin"></i>
 	</span>
 
-	<!-- IF loggedIn -->
-	<button component="topic/mark-unread" class="btn btn-sm btn-outline-secondary" title="[[topic:mark-unread]]">
-		<i class="fa fa-fw fa-inbox"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline"></span>
+	{{{ if loggedIn }}}
+	<button component="topic/mark-unread" class="btn btn-sm btn-ghost" title="[[topic:mark-unread]]">
+		<i class="fa fa-fw fa-inbox text-secondary"></i>
 	</button>
-	<!-- ENDIF loggedIn -->
+	{{{ end }}}
 
 	<!-- IMPORT partials/topic/watch.tpl -->
-
 	<!-- IMPORT partials/topic/sort.tpl -->
 
 	<div class="d-inline-block">

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

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

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

@@ -1,4 +1,4 @@
 <span component="post/tools" class="dropdown bottom-sheet d-inline-block {{{ if !posts.display_post_menu }}}hidden{{{ end }}}">
-	<a class="dropdown-toggle d-block" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-fw fa-ellipsis-v"></i></a>
-	<ul class="dropdown-menu dropdown-menu-end" role="menu"></ul>
+	<a class="btn btn-link btn-sm dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-fw fa-ellipsis-v"></i></a>
+	<ul class="dropdown-menu dropdown-menu-end p-1" role="menu"></ul>
 </span>

package/templates/partials/topic/post.tpl

@@ -95,20 +95,20 @@
 	<small class="d-flex justify-content-end align-items-center gap-1" component="post/actions">
 		<!-- IMPORT partials/topic/reactions.tpl -->
 		<span class="post-tools">
-			<a component="post/reply" href="#" class="user-select-none <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->">[[topic:reply]]</a>
-			<a component="post/quote" href="#" class="user-select-none <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->">[[topic:quote]]</a>
+			<a component="post/reply" href="#" class="btn btn-sm btn-link user-select-none <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->">[[topic:reply]]</a>
+			<a component="post/quote" href="#" class="btn btn-sm btn-link user-select-none <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->">[[topic:quote]]</a>
 		</span>
 
 		<!-- IF !reputation:disabled -->
 		<span class="votes">
-			<a component="post/upvote" href="#" class="<!-- IF posts.upvoted -->upvoted<!-- ENDIF posts.upvoted -->">
+			<a component="post/upvote" href="#" class="btn btn-sm btn-link <!-- IF posts.upvoted -->upvoted<!-- ENDIF posts.upvoted -->">
 				<i class="fa fa-chevron-up"></i>
 			</a>
 
-			<span component="post/vote-count" data-votes="{posts.votes}">{posts.votes}</span>
+			<span class="btn btn-sm btn-link" component="post/vote-count" data-votes="{posts.votes}">{posts.votes}</span>
 
 			<!-- IF !downvote:disabled -->
-			<a component="post/downvote" href="#" class="<!-- IF posts.downvoted -->downvoted<!-- ENDIF posts.downvoted -->">
+			<a component="post/downvote" href="#" class="btn btn-sm btn-link <!-- IF posts.downvoted -->downvoted<!-- ENDIF posts.downvoted -->">
 				<i class="fa fa-chevron-down"></i>
 			</a>
 			<!-- ENDIF !downvote:disabled -->

package/templates/partials/topic/quickreply.tpl

@@ -15,9 +15,9 @@
 			<textarea name="content" component="topic/quickreply/text" class="form-control mousetrap" rows="5" placeholder="[[modules:composer.textarea.placeholder]]"></textarea>
 			<div class="imagedrop"><div>[[topic:composer.drag-and-drop-images]]</div></div>
 		</div>
-		<div class="btn-group float-end">
-			<button type="submit" component="topic/quickreply/button" class="btn btn-primary">[[topic:post-quick-reply]]</button>
-			<button type="submit" component="topic/quickreply/expand" class="btn btn-outline-primary" formmethod="get"><i class="fa fa-expand"></i></button>
+		<div class="d-flex justify-content-end gap-1">
+			<button type="submit" component="topic/quickreply/expand" class="btn btn-outline-primary btn-sm" formmethod="get"><i class="fa fa-expand"></i></button>
+			<button type="submit" component="topic/quickreply/button" class="btn btn-primary btn-sm">[[topic:post-quick-reply]]</button>
 		</div>
 	</form>
 	<form component="topic/quickreply/upload" method="post" enctype="multipart/form-data">

package/templates/partials/topic/sort.tpl

@@ -1,9 +1,24 @@
 <div title="[[topic:sort-by]]" class="btn-group bottom-sheet hidden-xs" component="thread/sort">
-	<button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[aria:post-sort-option, {sortOptionLabel}]]">
-	<i class="fa fa-fw fa-sort"></i></button>
-	<ul class="dropdown-menu dropdown-menu-end" role="menu">
-		<li><a class="dropdown-item" href="#" class="oldest_to_newest" data-sort="oldest_to_newest" role="menuitem"><i class="fa fa-fw"></i> [[topic:oldest-to-newest]]</a></li>
-		<li><a class="dropdown-item" href="#" class="newest_to_oldest" data-sort="newest_to_oldest" role="menuitem"><i class="fa fa-fw"></i> [[topic:newest-to-oldest]]</a></li>
-		<li><a class="dropdown-item" href="#" class="most_votes" data-sort="most_votes" role="menuitem"><i class="fa fa-fw"></i> [[topic:most-votes]]</a></li>
+	<button class="btn btn-sm btn-ghost dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[aria:post-sort-option, {sortOptionLabel}]]">
+	<i class="fa fa-fw fa-sort text-secondary"></i></button>
+	<ul class="dropdown-menu dropdown-menu-end p-1 text-sm" role="menu">
+		<li>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="oldest_to_newest" data-sort="oldest_to_newest" role="menuitem">
+				<span class="flex-grow-1">[[topic:oldest-to-newest]]</span>
+				<i class="flex-shrink-0 fa fa-fw text-secondary"></i>
+			</a>
+		</li>
+		<li>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="newest_to_oldest" data-sort="newest_to_oldest" role="menuitem">
+				<span class="flex-grow-1">[[topic:newest-to-oldest]]</span>
+				<i class="flex-shrink-0 fa fa-fw text-secondary"></i>
+			</a>
+		</li>
+		<li>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="most_votes" data-sort="most_votes" role="menuitem">
+				<span class="flex-grow-1">[[topic:most-votes]]</span>
+				<i class="flex-shrink-0 fa fa-fw text-secondary"></i>
+			</a>
+		</li>
 	</ul>
 </div>

package/templates/partials/topic/tools.tpl

@@ -1,8 +1,8 @@
 {{{ if privileges.view_thread_tools }}}
 <div title="[[topic:thread-tools.title]]" class="btn-group thread-tools bottom-sheet">
-	<button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
-		<i class="fa fa-fw fa-gear"></i>
+	<button class="btn btn-sm btn-ghost dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
+		<i class="fa fa-fw fa-gear text-secondary"></i>
 	</button>
-	<ul class="dropdown-menu dropdown-menu-end" role="menu"></ul>
+	<ul class="dropdown-menu dropdown-menu-end p-1" role="menu"></ul>
 </div>
 {{{ end }}}

package/templates/partials/topic/watch.tpl

@@ -1,48 +1,56 @@
-<!-- IF config.loggedIn -->
+{{{ if config.loggedIn }}}
 <div class="btn-group bottom-sheet" component="topic/watch"
 data-bs-toggle="tooltip"
 	{{{if isFollowing}}}title="[[topic:watching]]"{{{end}}}
 	{{{if isNotFollowing}}}title="[[topic:not-watching]]"{{{end}}}
 	{{{if isIgnoring}}}title="[[topic:ignoring]]"{{{end}}}
 >
-	<button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
+	<button class="btn btn-sm btn-ghost dropdown-toggle text-secondary" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
 		<span component="topic/following/menu" <!-- IF !isFollowing -->class="hidden"<!-- ENDIF !isFollowing -->><i class="fa fa-fw fa-bell-o"></i></span>
 
 		<span component="topic/not-following/menu" <!-- IF !isNotFollowing -->class="hidden"<!-- ENDIF !isNotFollowing -->><i class="fa fa-fw fa-bell-slash-o"></i></span>
 
 		<span component="topic/ignoring/menu" <!-- IF !isIgnoring -->class="hidden"<!-- ENDIF !isIgnoring -->><i class="fa fa-fw fa-eye-slash"></i></span>
-
 	</button>
-	<ul class="dropdown-menu dropdown-menu-end" role="menu">
+	<ul class="dropdown-menu dropdown-menu-end p-1 text-sm" role="menu">
 		<li>
-			<a class="dropdown-item d-flex" href="#" component="topic/following" role="menuitem">
-				<span><i component="topic/following/check" class="fa fa-fw {{{ if isFollowing }}}fa-check{{{ end }}}"></i></span>
-				<div class="d-flex flex-column">
-					<span><i class="fa fa-fw fa-bell-o"></i> [[topic:watching]]</span>
-					<p class="help-text text-muted"><small>[[topic:watching.description]]</small></p>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="topic/following" role="menuitem">
+				<div class="flex-grow-1 d-flex flex-column">
+					<span class="d-flex align-items-center gap-2">
+						<i class="flex-shrink-0 fa fa-fw fa-bell-o text-secondary"></i>
+						<span class="flex-grow-1 fw-semibold">[[topic:watching]]</span>
+					</span>
+					<div class="help-text text-secondary text-xs">[[topic:watching.description]]</div>
 				</div>
+				<span class="flex-shrink-0"><i component="topic/following/check" class="fa fa-fw {{{ if isFollowing }}}fa-check{{{ end }}}"></i></span>
 			</a>
 		</li>
 
 		<li>
-			<a class="dropdown-item d-flex" href="#" component="topic/not-following" role="menuitem">
-				<span><i component="topic/not-following/check" class="fa fa-fw {{{ if isNotFollowing }}}fa-check{{{ end }}}"></i></span>
-				<div class="d-flex flex-column">
-					<span><i class="fa fa-fw fa-bell-slash-o"></i> [[topic:not-watching]]</span>
-					<p class="help-text text-muted"><small>[[topic:not-watching.description]]</small></p>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="topic/not-following" role="menuitem">
+				<div class="flex-grow-1 d-flex flex-column">
+					<span class="d-flex align-items-center gap-2">
+						<i class="flex-shrink-0 fa fa-fw fa-bell-slash-o text-secondary"></i>
+						<span class="flex-grow-1 fw-semibold">[[topic:not-watching]]</span>
+					</span>
+					<div class="help-text text-secondary text-xs">[[topic:not-watching.description]]</div>
 				</div>
+				<span class="flex-shrink-0"><i component="topic/not-following/check" class="fa fa-fw {{{ if isNotFollowing }}}fa-check{{{ end }}}"></i></span>
 			</a>
 		</li>
 
 		<li>
-			<a class="dropdown-item d-flex" href="#" component="topic/ignoring" role="menuitem">
-				<span><i component="topic/ignoring/check" class="fa fa-fw {{{ if isIgnoring }}}fa-check{{{ end }}}"></i></span>
-				<div class="d-flex flex-column">
-					<span><i class="fa fa-fw fa-eye-slash"></i> [[topic:ignoring]]</span>
-					<p class="help-text text-muted"><small>[[topic:ignoring.description]]</small></p>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="topic/ignoring" role="menuitem">
+				<div class="flex-grow-1 d-flex flex-column">
+					<span class="d-flex align-items-center gap-2">
+						<i class="flex-shrink-0 fa fa-fw fa-eye-slash text-secondary"></i>
+						<span class="flex-grow-1 fw-semibold">[[topic:ignoring]]</span>
+					</span>
+					<div class="help-text text-secondary text-xs">[[topic:ignoring.description]]</div>
 				</div>
+				<span class="flex-shrink-0"><i component="topic/ignoring/check" class="fa fa-fw {{{ if isIgnoring }}}fa-check{{{ end }}}"></i></span>
 			</a>
 		</li>
 	</ul>
 </div>
-<!-- ENDIF config.loggedIn -->
+{{{ end }}}

package/templates/partials/topic-filters.tpl

@@ -1,11 +1,15 @@
 <div class="btn-group bottom-sheet{{{ if !filters.length }}} hidden{{{ end }}}">
-	<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-		<span class="visible-sm-inline visible-md-inline visible-lg-inline">{selectedFilter.name}</span><span class="visible-xs-inline"><i class="fa fa-fw {selectedFilter.icon}"></i></span> <span class="caret"></span>
+	<button type="button" class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+		<i class="fa fa-fw fa-filter text-primary"></i>
+		<span class="visible-md-inline visible-lg-inline fw-semibold">{selectedFilter.name}</span>
 	</button>
-	<ul class="dropdown-menu dropdown-menu-end" role="menu">
+	<ul class="dropdown-menu p-1 text-sm" role="menu">
 		{{{each filters}}}
 		<li role="presentation" class="category {{{if filters.selected}}}selected{{{end}}}">
-			<a class="dropdown-item" role="menuitem" href="{config.relative_path}/{filters.url}"><i class="fa fa-fw {{{ if filters.selected }}}fa-check{{{ end }}}"></i>{filters.name}</a>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="{config.relative_path}/{filters.url}">
+				<div class="flex-grow-1">{filters.name}</div>
+				<i class="flex-shrink-0 fa fa-fw {{{ if filters.selected }}}fa-check{{{ end }}}"></i>
+			</a>
 		</li>
 		{{{end}}}
 	</ul>

package/templates/popular.tpl

@@ -17,7 +17,7 @@
 		<!-- IMPORT partials/topic-terms.tpl -->
 		<!-- IMPORT partials/topic-filters.tpl -->
 		<!-- IMPORT partials/category/filter-dropdown-right.tpl -->
-		<!-- IMPORT partials/category/tools.tpl -->
+		<!-- IMPORT partials/category/tools-dropdown-right.tpl -->
 		</div>
 	</div>
 

package/templates/recent.tpl

@@ -19,7 +19,8 @@
 		<div class="d-flex gap-1 align-items-stretch">
 		<!-- IMPORT partials/topic-filters.tpl -->
 		<!-- IMPORT partials/category/filter-dropdown-right.tpl -->
-		<!-- IMPORT partials/category/tools.tpl -->
+		<!-- IMPORT partials/tags/filter-dropdown-right.tpl -->
+		<!-- IMPORT partials/category/tools-dropdown-right.tpl -->
 		</div>
 	</div>
 

package/templates/tag.tpl

@@ -16,7 +16,7 @@
 		<div class="d-flex gap-1 align-items-stretch">
 		<!-- IMPORT partials/tags/watch.tpl -->
 		<!-- IMPORT partials/category/filter-dropdown-right.tpl -->
-		<!-- IMPORT partials/category/tools.tpl -->
+		<!-- IMPORT partials/category/tools-dropdown-right.tpl -->
 		</div>
 	</div>
 

package/templates/top.tpl

@@ -17,7 +17,7 @@
 		<!-- IMPORT partials/topic-terms.tpl -->
 		<!-- IMPORT partials/topic-filters.tpl -->
 		<!-- IMPORT partials/category/filter-dropdown-right.tpl -->
-		<!-- IMPORT partials/category/tools.tpl -->
+		<!-- IMPORT partials/category/tools-dropdown-right.tpl -->
 		</div>
 	</div>
 

package/templates/unread.tpl

@@ -21,7 +21,7 @@
 			<!-- IMPORT partials/category/selector-dropdown-right.tpl -->
 		</div>
 
-		<!-- IMPORT partials/category/tools.tpl -->
+		<!-- IMPORT partials/category/tools-dropdown-right.tpl -->
 		</div>
 	</div>
 

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

@@ -1,32 +0,0 @@
-<button type="button" class="btn btn-outline-secondary d-flex gap-2 align-items-center dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-    {{{ if selectedCategory }}}
-    <span class="category-item">
-        {buildCategoryIcon(selectedCategory, "20px", "rounded-circle")}
-        <span class="visible-md-inline visible-lg-inline">{selectedCategory.name}</span>
-    </span>
-    {{{ else }}}
-    <i class="fa fa-fw fa-list"></i>
-    <span class="visible-md-inline visible-lg-inline">[[unread:all-categories]]</span>{{{ end }}}
-</button>
-<div component="category-selector-search" class="hidden position-absolute">
-    <input type="text" class="form-control" placeholder="[[search:type-to-search]]" autocomplete="off">
-</div>
-<ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
-    <li role="presentation" class="category" data-cid="all">
-        <a class="dropdown-item" role="menuitem" href="{{{ if allCategoriesUrl }}}{config.relative_path}/{allCategoriesUrl}{{{ else }}}#{{{ end }}}"><i component="category/select/icon" class="fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i> [[unread:all-categories]]</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" role="menuitem" href="#">{../level}<i component="category/select/icon" class="fa fa-fw fa-check {{{ if !../selected }}}invisible{{{ end }}}"></i>
-            <span component="category-markup" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">
-                <div class="category-item d-inline-block">
-                    {{{ if ./icon}}}
-                    {buildCategoryIcon(@value, "24px", "rounded-circle")}
-                    {{{ end }}}
-                    {./name}
-                </div>
-            </span>
-        </a>
-    </li>
-    {{{end}}}
-</ul>

package/templates/partials/category/selector-dropdown-content.tpl

@@ -1,33 +0,0 @@
-<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-    <span component="category-selector-selected">
-        {{{ if (selectedCategory && !showCategorySelectLabel) }}}
-        <span class="category-item">
-            {buildCategoryIcon(selectedCategory, "24px", "rounded-circle")}
-            {selectedCategory.name}
-        </span>
-        {{{ else }}}
-    <span class="visible-sm-inline visible-md-inline visible-lg-inline">{{{ if selectCategoryLabel }}}{selectCategoryLabel}{{{ else }}}[[topic:thread-tools.select-category]]{{{ end }}}</span><span class="visible-xs-inline"><i class="fa fa-fw {{{ if selectCategoryIcon }}}{selectCategoryIcon}{{{ else }}}fa-list{{{ end }}}"></i></span>
-    {{{ end }}}</span> <span class="caret"></span>
-</button>
-<div component="category-selector-search" class="hidden position-absolute">
-    <input type="text" class="form-control" placeholder="[[search:type-to-search]]" autocomplete="off">
-</div>
-<ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
-    <li component="category/no-matches" role="presentation" class="category hidden">
-        <a class="dropdown-item" 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 {{{ 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-block">
-                    {{{ if ./icon }}}
-                    {buildCategoryIcon(@value, "24px", "rounded-circle")}
-                    {{{ end }}}
-                    {./name}
-                </div>
-            </span>
-        </a>
-    </li>
-    {{{ end }}}
-</ul>

package/templates/partials/category/sort.tpl

@@ -1,15 +0,0 @@
-<div class="btn-group bottom-sheet" component="thread/sort">
-	<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[aria:topic-sort-option, {sortOptionLabel}]]">
-		<i class="fa fa-fw fa-sort"></i>
-		<span class="visible-sm-inline visible-md-inline visible-lg-inline">{sortOptionLabel}</span>
-		<span class="caret"></span>
-	</button>
-
-	<ul class="dropdown-menu dropdown-menu-end" role="menu">
-		<li><a class="dropdown-item" href="#" class="recently_replied" data-sort="recently_replied" role="menuitem"><i class="fa fa-fw"></i> [[topic:recently-replied]]</a></li>
-		<li><a class="dropdown-item" href="#" class="recently_created" data-sort="recently_created" role="menuitem"><i class="fa fa-fw"></i> [[topic:recently-created]]</a></li>
-		<li><a class="dropdown-item" href="#" class="most_posts" data-sort="most_posts" role="menuitem"><i class="fa fa-fw"></i> [[topic:most-posts]]</a></li>
-		<li><a class="dropdown-item" href="#" class="most_votes" data-sort="most_votes" role="menuitem"><i class="fa fa-fw"></i> [[topic:most-votes]]</a></li>
-		<li><a class="dropdown-item" href="#" class="most_views" data-sort="most_views" role="menuitem"><i class="fa fa-fw"></i> [[topic:most-views]]</a></li>
-	</ul>
-</div>

package/templates/partials/category/tools.tpl

@@ -1,87 +0,0 @@
-<!-- IF showTopicTools -->
-<div class="btn-group thread-tools bottom-sheet">
-	<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
-		<span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:thread-tools.title]]</span>
-		<span class="visible-xs-inline"><i class="fa fa-fw fa-gear"></i></span>
-		<span class="caret"></span>
-	</button>
-	<ul class="dropdown-menu dropdown-menu-end" role="menu">
-		<li>
-			<a component="topic/mark-unread-for-all" href="#" class="dropdown-item" role="menuitem">
-				<i class="fa fa-fw fa-inbox"></i> [[topic:thread-tools.markAsUnreadForAll]]
-			</a>
-		</li>
-		<li>
-			<a component="topic/pin" href="#" class="dropdown-item" role="menuitem">
-				<i class="fa fa-fw fa-thumb-tack"></i> [[topic:thread-tools.pin]]
-			</a>
-		</li>
-		<li>
-			<a component="topic/unpin" href="#" class="hidden dropdown-item" role="menuitem">
-				<i class="fa fa-fw fa-thumb-tack fa-rotate-90"></i> [[topic:thread-tools.unpin]]
-			</a>
-		</li>
-
-		<li>
-			<a component="topic/lock" href="#" class="dropdown-item" role="menuitem">
-				<i class="fa fa-fw fa-lock"></i> [[topic:thread-tools.lock]]
-			</a>
-		</li>
-		<li>
-			<a component="topic/unlock" href="#" class="hidden dropdown-item" role="menuitem">
-				<i class="fa fa-fw fa-unlock"></i> [[topic:thread-tools.unlock]]
-			</a>
-		</li>
-
-		<li class="dropdown-divider"></li>
-
-		<li>
-			<a component="topic/move" href="#" class="dropdown-item" role="menuitem">
-				<i class="fa fa-fw fa-arrows"></i> [[topic:thread-tools.move]]
-			</a>
-		</li>
-		{{{if template.category}}}
-		<li>
-			<a component="topic/move-all" href="#" class="dropdown-item" role="menuitem">
-				<i class="fa fa-fw fa-arrows"></i> [[topic:thread-tools.move-all]]
-			</a>
-		</li>
-		{{{end}}}
-		<li>
-			<a component="topic/merge" href="#" class="dropdown-item" role="menuitem">
-				<i class="fa fa-fw fa-code-fork"></i> [[topic:thread-tools.merge]]
-			</a>
-		</li>
-
-		<li>
-			<a component="topic/tag" href="#" class="dropdown-item" role="menuitem">
-				<i class="fa fa-fw fa-tag"></i> [[topic:thread-tools.tag]]
-			</a>
-		</li>
-
-		<li class="dropdown-divider"></li>
-
-		<li>
-			<a component="topic/delete" href="#" class="dropdown-item" role="menuitem">
-				<i class="fa fa-fw fa-trash-o"></i> [[topic:thread-tools.delete]]
-			</a>
-		</li>
-		<li>
-			<a component="topic/restore" href="#" class="hidden dropdown-item" role="menuitem">
-				<i class="fa fa-fw fa-history"></i> [[topic:thread-tools.restore]]
-			</a>
-		</li>
-		<li>
-			<a component="topic/purge" href="#" class="hidden dropdown-item" role="menuitem">
-				<i class="fa fa-fw fa-eraser"></i> [[topic:thread-tools.purge]]
-			</a>
-		</li>
-
-		{{{each thread_tools}}}
-		<li>
-			<a href="#" class="dropdown-item {thread_tools.class}" role="menuitem"><i class="fa fa-fw {thread_tools.icon}"></i> {thread_tools.title}</a>
-		</li>
-		{{{end}}}
-	</ul>
-</div>
-<!-- ENDIF showTopicTools -->

package/templates/partials/category/watch.tpl

@@ -1,56 +0,0 @@
-<!-- IF config.loggedIn -->
-<div class="btn-group bottom-sheet" component="topic/watch">
-	<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
-		<span component="category/watching/menu" <!-- IF !../isWatched -->class="hidden"<!-- ENDIF !../isWatched -->><i class="fa fa-fw fa-bell-o"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline"> [[category:watching]]</span></span>
-
-		<span component="category/tracking/menu" <!-- IF !../isTracked -->class="hidden"<!-- ENDIF !../isTracked -->><i class="fa fa-fw fa-inbox"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline"> [[category:tracking]]</span></span>
-
-		<span component="category/notwatching/menu" <!-- IF !../isNotWatched -->class="hidden"<!-- ENDIF !../isNotWatched -->><i class="fa fa-fw fa-clock-o"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline"> [[category:not-watching]]</span></span>
-
-		<span component="category/ignoring/menu" <!-- IF !../isIgnored -->class="hidden"<!-- ENDIF !../isIgnored -->><i class="fa fa-fw fa-eye-slash"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline"> [[category:ignoring]]</span></span>
-		<span class="caret"></span>
-	</button>
-
-	<ul class="dropdown-menu dropdown-menu-end" role="menu">
-		<li>
-			<a class="dropdown-item d-flex" href="#" component="category/watching" data-state="watching" role="menuitem">
-				<span><i component="category/watching/check" class="fa fa-fw {{{ if ./isWatched }}}fa-check{{{ end }}}"></i></span>
-				<div class="d-flex flex-column">
-					<span><i class="fa fa-fw fa-bell-o"></i> [[category:watching]]</span>
-					<p class="help-text text-muted"><small>[[category:watching.description]]</small></p>
-				</div>
-			</a>
-		</li>
-
-		<li>
-			<a class="dropdown-item d-flex" href="#" component="category/tracking" data-state="tracking" role="menuitem">
-				<span><i component="category/tracking/check" class="fa fa-fw {{{ if ./isTracked }}}fa-check{{{ end }}}"></i></span>
-				<div class="d-flex flex-column">
-					<span><i class="fa fa-fw fa-inbox"></i> [[category:tracking]]</span>
-					<p class="help-text text-muted"><small>[[category:tracking.description]]</small></p>
-				</div>
-			</a>
-		</li>
-
-		<li>
-			<a class="dropdown-item d-flex" href="#" component="category/notwatching" data-state="notwatching" role="menuitem">
-				<span><i component="category/notwatching/check" class="fa fa-fw {{{ if ./isNotWatched }}}fa-check{{{ end }}}"></i></span>
-				<div class="d-flex flex-column">
-					<span><i class="fa fa-fw fa-clock-o"></i> [[category:not-watching]]</span>
-					<p class="help-text text-muted"><small>[[category:not-watching.description]]</small></p>
-				</div>
-			</a>
-		</li>
-
-		<li>
-			<a class="dropdown-item d-flex" href="#" component="category/ignoring" data-state="ignoring" role="menuitem">
-				<span><i component="category/ignoring/check" class="fa fa-fw {{{ if ./isIgnored }}}fa-check{{{ end }}}"></i></span>
-				<div class="d-flex flex-column">
-					<span><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]</span>
-					<p class="help-text text-muted"><small>[[category:ignoring.description]]</small></p>
-				</div>
-			</a>
-		</li>
-	</ul>
-</div>
-<!-- ENDIF config.loggedIn -->

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

@@ -1,25 +0,0 @@
-<div class="dropdown bottom-sheet">
-	<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-		{{{ if selectedGroup }}}
-		<span class="fw-semibold">{selectedGroup.displayName}</span>
-		{{{ else }}}
-		<span class="fw-semibold">[[groups:all-groups]]</span>
-		{{{ end }}} <span class="caret"></span>
-	</button>
-	<ul class="dropdown-menu text-sm" role="menu">
-		<li role="presentation" class="user {{{ if !selectedGroup}}}selected{{{end}}}">
-			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="{config.relative_path}/{allGroupsUrl}">
-				<div class="flex-grow-1">[[groups:all-groups]]</div>
-				<i class="flex-shrink-0 fa fa-fw {{{ if !selectedGroup }}}fa-check{{{ end }}}"></i>
-			</a>
-		</li>
-		{{{ each groups }}}
-		<li role="presentation" class="user {{{ if ./selected}}}selected{{{end}}}">
-			<a class="dropdown-item d-flex align-items-center gap-2" role="menuitem" href="{config.relative_path}/{./url}">
-				<div class="flex-grow-1 d-inline-flex gap-1 align-items-center">{./displayName}</div>
-				<i class="flex-shrink-0 fa fa-fw {{{ if ./selected }}}fa-check{{{ end }}}"></i>
-			</a>
-		</li>
-		{{{end}}}
-	</ul>
-</div>

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

@@ -1,34 +0,0 @@
-<button type="button" class="btn btn-outline-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-    {{{ if selectedTag }}}
-    <span class="d-inline-flex align-items-center gap-1">
-        <i class="fa fa-fw fa-tags text-primary"></i>
-        <span class="visible-md-inline visible-lg-inline fw-semibold">{selectedTag.label}</span>
-    </span>
-    {{{ else }}}
-    <i class="fa fa-fw fa-tags text-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" placeholder="[[search:type-to-search]]" autocomplete="off">
-</div>
-<ul component="tag/filter/list" class="dropdown-menu overflow-auto" role="menu" style="max-height: 500px;">
-    <li role="presentation" data-tag="">
-        <a class="dropdown-item d-flex align-items-center gap-2" role="menuitem" href="#">
-            <span class="flex-grow-1">[[tags:all-tags]]</span>
-            <i component="tag/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{if selectedTag }}}invisible{{{ end }}}"></i>
-        </a>
-    </li>
-    {{{ each tagItems }}}
-    <li role="presentation" data-tag="{./valueEscaped}">
-        <a class="dropdown-item d-flex align-items-center gap-2" role="menuitem" href="#">
-            <span component="tag-markup" class="flex-grow-1">
-                <div class="d-inline-flex align-items-center gap-1">
-                    {./valueEscaped}
-                </div>
-            </span>
-            <i component="tag/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{ if !./selected }}}invisible{{{ end }}}"></i>
-        </a>
-    </li>
-    {{{ end }}}
-</ul>

package/templates/partials/tags/watch.tpl

@@ -1,36 +0,0 @@
-{{{ if config.loggedIn }}}
-<div class="btn-group bottom-sheet" component="tag/watch"
-data-bs-toggle="tooltip">
-	<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
-		<span component="tag/following/menu" {{{ if !isFollowing }}}class="hidden"{{{ end }}}>
-			<i class="fa fa-fw fa-bell-o"></i>
-			<span class="d-none d-md-inline">[[tags:watching]]</span>
-		</span>
-		<span component="tag/not-following/menu" {{{ if isFollowing }}}class="hidden"{{{ end }}}>
-			<i class="fa fa-fw fa-bell-slash-o"></i>
-			<span class="d-none d-md-inline">[[tags:not-watching]]</span>
-		</span>
-	</button>
-	<ul class="dropdown-menu dropdown-menu-end" role="menu">
-		<li>
-			<a class="dropdown-item d-flex" href="#" component="tag/following" role="menuitem">
-				<span><i component="tag/following/check" class="fa fa-fw {{{ if isFollowing }}}fa-check{{{ end }}}"></i></span>
-				<div class="d-flex flex-column">
-					<span><i class="fa fa-fw fa-bell-o"></i> [[tags:watching]]</span>
-					<p class="help-text text-muted"><small>[[tags:watching.description]]</small></p>
-				</div>
-			</a>
-		</li>
-
-		<li>
-			<a class="dropdown-item d-flex" href="#" component="tag/not-following" role="menuitem">
-				<span><i component="tag/not-following/check" class="fa fa-fw {{{ if !isFollowing }}}fa-check{{{ end }}}"></i></span>
-				<div class="d-flex flex-column">
-					<span><i class="fa fa-fw fa-bell-slash-o"></i> [[tags:not-watching]]</span>
-					<p class="help-text text-muted"><small>[[tags:not-watching.description]]</small></p>
-				</div>
-			</a>
-		</li>
-	</ul>
-</div>
-{{{ end }}}

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

@@ -1,20 +0,0 @@
-<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-	{{{ if selectedUser }}}
-	<span class="">{buildAvatar(selectedUser, "20px", true, "not-responsive")} {selectedUser.username}</span>
-	{{{ else }}}
-	<span class="">[[users:all-users]]</span>
-	{{{ end }}} <span class="caret"></span>
-</button>
-<ul class="dropdown-menu" role="menu">
-	<li role="presentation" class="user {{{ if !selectedUser}}}selected{{{end}}}">
-		<a class="dropdown-item" role="menuitem" href="{config.relative_path}/{allUsersUrl}"><i class="fa fa-fw {{{ if !selectedUser }}}fa-check{{{ end }}}"></i>[[users:all-users]]</a>
-	</li>
-	{{{ each users }}}
-	<li role="presentation" class="user {{{ if ./selected}}}selected{{{end}}}">
-		<a class="dropdown-item" role="menuitem" href="{config.relative_path}/{./url}">
-			<i class="fa fa-fw {{{ if ./selected }}}fa-check{{{ end }}}"></i>
-			<div class="d-inline-flex gap-1 align-items-center">{buildAvatar(@value, "24px", true, "not-responsive")} {./username}</div>
-		</a>
-	</li>
-	{{{end}}}
-</ul>