nodebb-theme-harmony 1.0.0 → 1.0.2

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

@@ -1,7 +1,7 @@
-<div class="flex-0 pe-2 border-end-md text-sm mb-3 flex-basis-md-200">
+<div class="flex-shrink-0 pe-2 border-end-md text-sm mb-3 flex-basis-md-200">
 	<div class="sticky-md-top d-flex flex-row flex-md-column flex-wrap gap-1" style="top: 1rem;z-index: 1;">
 		<a href="{config.relative_path}/user/{userslug}" class="btn-ghost fw-semibold {{{ if template.account/profile }}}active{{{ end }}}">
-			<div class="flex-1">[[global:about]]</div>
+			<div class="flex-grow-1">[[global:about]]</div>
 		</a>
 		<a href="{config.relative_path}/user/{userslug}/posts"class="btn-ghost fw-semibold
 			{{{ if template.account/posts }}}active{{{ end }}}
@@ -10,61 +10,67 @@
 			{{{ if template.account/upvoted }}}active{{{ end }}}
 			{{{ if template.account/downvoted }}}active{{{ end }}}
 			{{{ if template.account/bookmarks }}}active{{{ end }}}">
-			<div class="flex-1">[[global:posts]]</div>
-			<span class="text-xs human-readable-number" title="{counts.posts}">{counts.posts}</span>
+			<div class="flex-grow-1">[[global:posts]]</div>
+			<span class="flex-shrink-0 text-xs human-readable-number" title="{counts.posts}">{counts.posts}</span>
 		</a>
 		<a href="{config.relative_path}/user/{userslug}/topics" class="btn-ghost fw-semibold
 			{{{ if template.account/topics }}}active{{{ end }}}
 			{{{ if template.account/watched }}}active{{{ end }}}
 			{{{ if template.account/ignored }}}active{{{ end }}}">
-			<div class="flex-1">[[global:topics]]</div>
-			<span class="text-xs human-readable-number" title="{counts.topics}">{counts.topics}</span>
+			<div class="flex-grow-1">[[global:topics]]</div>
+			<span class="flex-shrink-0 text-xs human-readable-number" title="{counts.topics}">{counts.topics}</span>
 		</a>
 		<a href="{config.relative_path}/user/{userslug}/groups" class="btn-ghost fw-semibold
 			{{{ if template.account/groups }}}active{{{ end }}}">
-			<div class="flex-1">[[global:header.groups]]</div>
-			<span class="text-xs human-readable-number" title="{counts.groups}">{counts.groups}</span>
+			<div class="flex-grow-1">[[global:header.groups]]</div>
+			<span class="flex-shrink-0 text-xs human-readable-number" title="{counts.groups}">{counts.groups}</span>
 		</a>
 
 		<a href="{config.relative_path}/user/{userslug}/followers" class="btn-ghost fw-semibold
 			{{{ if template.account/followers }}}active{{{ end }}}">
-			<div class="flex-1">[[user:followers]]</div>
-			<span class="text-xs human-readable-number" title="{counts.followers}">{counts.followers}</span>
+			<div class="flex-grow-1">[[user:followers]]</div>
+			<span class="flex-shrink-0 text-xs human-readable-number" title="{counts.followers}">{counts.followers}</span>
 		</a>
 
 		<a href="{config.relative_path}/user/{userslug}/following" class="btn-ghost fw-semibold
 			{{{ if template.account/following }}}active{{{ end }}}">
-			<div class="flex-1">[[user:following]]</div>
-			<span class="text-xs human-readable-number" title="{counts.following}">{counts.following}</span>
+			<div class="flex-grow-1">[[user:following]]</div>
+			<span class="flex-shrink-0 text-xs human-readable-number" title="{counts.following}">{counts.following}</span>
 		</a>
 
 		{{{ if canEdit }}}
+		<a href="{config.relative_path}/user/{userslug}/categories" class="btn-ghost fw-semibold
+			{{{ if template.account/categories }}}active{{{ end }}}">
+			<div class="flex-grow-1">[[user:watched_categories]]</div>
+			<span class="flex-shrink-0 text-xs human-readable-number" title="{counts.categoriesWatched}">{counts.categoriesWatched}</span>
+		</a>
+
 		<a href="{config.relative_path}/user/{userslug}/blocks" class="btn-ghost fw-semibold
 			{{{ if template.account/blocks }}}active{{{ end }}}">
-			<div class="flex-1">[[user:blocked-users]]</div>
-			<span class="text-xs human-readable-number" title="{counts.blocks}">{counts.blocks}</span>
+			<div class="flex-grow-1">[[user:blocked-users]]</div>
+			<span class="flex-shrink-0 text-xs human-readable-number" title="{counts.blocks}">{counts.blocks}</span>
 		</a>
 
 		<a href="{config.relative_path}/user/{userslug}/uploads" class="btn-ghost fw-semibold
 			{{{ if template.account/uploads }}}active{{{ end }}}">
-			<div class="flex-1">[[global:uploads]]</div>
-			<span class="text-xs human-readable-number" title="{counts.uploaded}">{counts.uploaded}</span>
+			<div class="flex-grow-1">[[global:uploads]]</div>
+			<span class="flex-shrink-0 text-xs human-readable-number" title="{counts.uploaded}">{counts.uploaded}</span>
 		</a>
 		{{{ end }}}
 
 		<hr class="w-100 my-2"/>
 		{{{ if (loggedIn && (!isSelf && !banned)) }}}
 		<a href="#" component="account/flag" class="btn-ghost-sm">
-			<i class="fa-solid fa-flag text-danger"></i>
-			<div class="flex-1 text-nowrap">[[user:flag-profile]]</div>
+			<i class="flex-shrink-0 fa-solid fa-flag text-danger"></i>
+			<div class="flex-grow-1 text-nowrap">[[user:flag-profile]]</div>
 		</a>
 		<a href="#" component="account/block" class="btn-ghost-sm {{{ if isBlocked }}}hidden{{{ end }}}">
-			<i class="fa-solid fa-ban text-danger"></i>
-			<div class="flex-1 text-nowrap">[[user:block_user]]</div>
+			<i class="flex-shrink-0 fa-solid fa-ban text-danger"></i>
+			<div class="flex-grow-1 text-nowrap">[[user:block_user]]</div>
 		</a>
 		<a href="#" component="account/unblock" class="btn-ghost-sm {{{ if !isBlocked }}}hidden{{{ end }}}">
-			<i class="fa-solid fa-ban text-danger"></i>
-			<div class="flex-1 text-nowrap">[[user:unblock_user]]</div>
+			<i class="flex-shrink-0 fa-solid fa-ban text-danger"></i>
+			<div class="flex-grow-1 text-nowrap">[[user:unblock_user]]</div>
 		</a>
 		<hr class="w-100 my-2"/>
 		{{{ end }}}
@@ -72,17 +78,17 @@
 		{{{ if canEdit }}}
 		<a href="{config.relative_path}/user/{userslug}/edit" class="btn-ghost-sm text-xs
 		{{{ if template.account/edit }}}active{{{ end }}}">
-			<div class="flex-1">[[user:edit-profile]]</div>
+			<div class="flex-grow-1">[[user:edit-profile]]</div>
 		</a>
 		<a href="{config.relative_path}/user/{userslug}/settings" class="btn-ghost-sm text-xs
 			{{{ if template.account/settings }}}active{{{ end }}}">
-			<div class="flex-1">[[user:settings]]</div>
+			<div class="flex-grow-1">[[user:settings]]</div>
 		</a>
 		{{{ end }}}
 
 		{{{ each profile_links }}}
 		<a href="{config.relative_path}/user/{userslug}/{./route}" class="btn-ghost-sm text-xs plugin-link {{{ if ./public }}}public{{{ else }}}private{{{ end }}} {{{ if (url == ./url) }}}active{{{ end }}}" id="{./id}">
-			<div class="flex-1">{./name}</div>
+			<div class="flex-grow-1">{./name}</div>
 		</a>
 		{{{end}}}
 	</div>

package/templates/partials/breadcrumbs.tpl

@@ -1,12 +1,12 @@
 {{{ if breadcrumbs.length }}}
-<ol class="breadcrumb mb-0 {{{ if config.centerHeaderElements }}}justify-content-center{{{ end }}}" itemscope="itemscope" itemprop="breadcrumb" itemtype="http://schema.org/BreadcrumbList">
-	{{{each breadcrumbs}}}
-	<li<!-- IF @last --> component="breadcrumb/current"<!-- ENDIF @last --> itemscope="itemscope" itemprop="itemListElement" itemtype="http://schema.org/ListItem" class="breadcrumb-item <!-- IF @last -->active<!-- ENDIF @last -->">
+<ol class="breadcrumb mb-0 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}" itemscope="itemscope" itemprop="breadcrumb" itemtype="http://schema.org/BreadcrumbList">
+	{{{ each breadcrumbs }}}
+	<li{{{ if @last }}} component="breadcrumb/current"{{{ end }}} itemscope="itemscope" itemprop="itemListElement" itemtype="http://schema.org/ListItem" class="breadcrumb-item {{{ if @last }}}active{{{ end }}}">
 		<meta itemprop="position" content="{@index}" />
-		{{{ if ./url }}}<a href="{breadcrumbs.url}" itemprop="item">{{{ end }}}
-			<span class="fw-semibold" itemprop="name">{breadcrumbs.text}</span>
+		{{{ if ./url }}}<a href="{./url}" itemprop="item">{{{ end }}}
+			<span class="fw-semibold" itemprop="name">{./text}</span>
 		{{{ if ./url }}}</a>{{{ end }}}
 	</li>
-	{{{end}}}
+	{{{ end }}}
 </ol>
 {{{ end }}}

package/templates/partials/buttons/newTopic.tpl

@@ -4,7 +4,7 @@
 </button>
 <noscript>
 	<input type="checkbox" class="hidden" id="category-dropdown-check" aria-hidden="true">
-	<ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
+	<ul component="category/list" class="dropdown-menu p-1 text-sm category-dropdown-menu" role="menu">
 		{{{each categories}}}
 		<li role="presentation" class="category {{{if categories.disabledClass}}}disabled{{{end}}}">
 			<a role="menu-item" href="{config.relative_path}/compose?cid={categories.cid}">{categories.level}

package/templates/partials/categories/item.tpl

@@ -1,29 +1,35 @@
-<li component="categories/category" data-cid="{./cid}" class="row clearfix category-{./cid}">
+<li component="categories/category" data-cid="{./cid}" class="w-100 border-bottom py-3 py-lg-4 gap-1 d-flex flex-column flex-lg-row align-items-start category-{./cid}">
 	<meta itemprop="name" content="{./name}">
 
-	<div class="d-flex gap-3 col-12 {{{ if config.hideCategoryLastPost }}}col-md-10 col-sm-12{{{ else }}}col-md-7 col-sm-9{{{ end }}}">
-		<div class="">
+	<div class="d-flex col-lg-7 gap-2 gap-lg-3">
+		<div class="flex-shrink-0">
 		{buildCategoryIcon(@value, "40px", "rounded-1")}
 		</div>
-		<div class="d-flex flex-column gap-1">
-			<h2 class="title fw-bold fs-4">
+		<div class="flex-grow-1 d-flex flex-wrap gap-1">
+			<h2 class="title text-break fs-4 fw-semibold m-0 tracking-tight w-100">
 				<!-- IMPORT partials/categories/link.tpl -->
 			</h2>
 			{{{ if ./descriptionParsed }}}
-			<div class="description text-muted small">
+			<div class="description text-muted text-sm w-100">
 				{./descriptionParsed}
 			</div>
 			{{{ end }}}
 			{{{ if !config.hideSubCategories }}}
 			{{{ if ./children.length }}}
-			<div class="category-children row row-cols-2 g-2">
+			<div class="category-children row row-cols-2 g-2 my-1 w-100">
 				{{{ each ./children }}}
 				{{{ if !./isSection }}}
 				<span class="category-children-item small">
 					{{{ if ./link }}}
-					<a href="{./link}">{./name}</a>
+					<div class="d-flex align-items-start gap-1">
+						<i class="fa fa-fw fa-caret-right text-primary mt-1"></i>
+						<a href="{./link}" class="text-reset fw-semibold">{./name}</a>
+					</div>
 					{{{ else }}}
-					<a href="{config.relative_path}/category/{./slug}">{./name}</a>
+					<div class="d-flex align-items-start gap-1">
+						<i class="fa fa-fw fa-caret-right text-primary mt-1"></i>
+						<a href="{config.relative_path}/category/{./slug}" class="text-reset fw-semibold">{./name}</a>
+					</div>
 					{{{ end }}}
 				</span>
 				{{{ end }}}
@@ -33,27 +39,25 @@
 			{{{ end }}}
 		</div>
 	</div>
-
 	{{{ if !./link }}}
-	<div class="col-md-2 d-none d-md-flex stats text-muted gap-2 px-0">
-		<div class="w-50">
-			<div class="card card-header align-items-center px-0 py-2 border-0 rounded-1">
-				<span class="{./unread-class} human-readable-number fs-5 fw-semibold ff-secondary" title="{./totalTopicCount}">{./totalTopicCount}</span>
-				<span class="text-lowercase text-xs">[[global:topics]]</span>
+		<div class="d-flex col-lg-5 align-content-stretch">
+			<div class="meta stats d-none d-lg-grid col-6 gap-1 pe-2 text-muted" style="grid-template-columns: 1fr 1fr;">
+				<div class="card card-header border-0 p-2 overflow-hidden rounded-1 d-flex flex-column align-items-center">
+					<span class="{./unread-class} human-readable-number fs-5 ff-secondary lh-1" title="{./totalTopicCount}" data-toFixed="0">{./totalTopicCount}</span>
+					<span class="d-none d-xl-flex text-lowercase text-xs">[[global:topics]]</span>
+					<i class="d-xl-none fa fa-fw text-xs text-muted opacity-75 fa-list"></i>
+				</div>
+				<div class="card card-header border-0 p-2 overflow-hidden rounded-1 d-flex flex-column align-items-center">
+					<span class="{./unread-class} human-readable-number fs-5 ff-secondary lh-1" title="{./totalPostCount}" data-toFixed="0">{./totalPostCount}</span>
+					<span class="d-none d-xl-flex text-lowercase text-xs">[[global:posts]]</span>
+					<i class="d-xl-none fa fa-fw text-xs text-muted opacity-75 fa-message"></i>
+				</div>
 			</div>
-		</div>
-		<div class="w-50">
-			<div class="card card-header align-items-center px-0 py-2 border-0 rounded-1">
-				<span class="{./unread-class} human-readable-number fs-5 fw-semibold ff-secondary" title="{./totalPostCount}">{./totalPostCount}</span>
-				<span class="text-lowercase text-xs">[[global:posts]]</span>
+			{{{ if !config.hideCategoryLastPost }}}
+			<div component="topic/teaser" class="teaser col-lg-6 {{{ if !config.theme.mobileTopicTeasers }}}d-none d-lg-block{{{ end }}}">
+				<!-- IMPORT partials/categories/lastpost.tpl -->
 			</div>
+			{{{ end }}}
 		</div>
-	</div>
-
-	{{{ if !config.hideCategoryLastPost }}}
-	<div class="col-md-3 col-sm-3 teaser d-none d-sm-block" component="topic/teaser">
-		<!-- IMPORT partials/categories/lastpost.tpl -->
-	</div>
-	{{{ end }}}
 	{{{ end }}}
 </li>

package/templates/partials/categories/lastpost.tpl

@@ -1,15 +1,15 @@
-<div class="lastpost background-link-container border-start border-2 h-100" style="border-color: {./bgColor}!important;">
+<div class="lastpost background-link-container border-start border-2 lh-sm h-100" style="border-color: {./bgColor}!important;">
 	{{{ each ./posts }}}
 	{{{ if @first }}}
-	<div component="category/posts" class="ps-3">
+	<div component="category/posts" class="ps-2 text-xs">
 		<a class="background-link" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}"></a>
-		<p class="mb-0">
-			<a class="text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(posts.user, "20px", true)}</a>
+		<div>
+			<a class="text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(posts.user, "18px", true, "avatar-tooltip")}</a>
 			<a class="permalink text-muted" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}">
 				<span class="timeago text-xs" title="{../timestampISO}"></span>
 			</a>
-		</p>
-		<div class="post-content mt-2 overflow-hidden text-xs line-clamp-3">
+		</div>
+		<div class="post-content text-xs text-break line-clamp-sm-2 lh-sm">
 			{./content}
 		</div>
 	</div>
@@ -17,7 +17,7 @@
 	{{{ end }}}
 
 	{{{ if !./posts.length }}}
-	<div component="category/posts" class="ps-3">
+	<div component="category/posts" class="ps-2">
 		<div class="post-content overflow-hidden text-xs">
 			[[category:no_new_posts]]
 		</div>

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

@@ -0,0 +1,37 @@
+<button type="button" class="btn-ghost-sm d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown">
+    {{{ if selectedCategory }}}
+    <span class="category-item d-inline-flex align-items-center gap-1">
+        {buildCategoryIcon(selectedCategory, "18px", "rounded-circle")}
+        <span class="visible-md-inline visible-lg-inline fw-semibold">{selectedCategory.name}</span>
+    </span>
+    {{{ else }}}
+    <i class="fa fa-fw fa-list link-primary"></i>
+    <span class="visible-md-inline visible-lg-inline fw-semibold">[[unread:all_categories]]</span>{{{ end }}}
+</button>
+<div component="category-selector-search" class="hidden position-absolute">
+    <input type="text" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
+</div>
+<ul component="category/list" class="dropdown-menu p-1 text-sm category-dropdown-menu" role="menu">
+    <li role="presentation" class="category" data-cid="all">
+        <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menu-item" href="{{{ if allCategoriesUrl }}}{config.relative_path}/{allCategoriesUrl}{{{ else }}}#{{{ end }}}">
+            <div class="flex-grow-1">[[unread:all_categories]]</div>
+            <i component="category/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i>
+        </a>
+    </li>
+    {{{each categoryItems}}}
+    <li role="presentation" class="category {{{ if ../disabledClass }}}disabled{{{ end }}}" data-cid="{../cid}" data-parent-cid="{../parentCid}" data-name="{../name}">
+        <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menu-item" href="#">
+            {../level}
+            <span component="category-markup" class="flex-grow-1" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">
+                <div class="category-item d-inline-flex align-items-center gap-1">
+                    {{{ if ./icon }}}
+                    {buildCategoryIcon(@value, "24px", "rounded-circle")}
+                    {{{ end }}}
+                    {./name}
+                </div>
+            </span>
+            <i component="category/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{ if !../selected }}}invisible{{{ end }}}"></i>
+        </a>
+    </li>
+    {{{end}}}
+</ul>

package/templates/partials/{category-selector-content.tpl → category/selector-dropdown-content.tpl}

@@ -1,7 +1,7 @@
-<button type="button" class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown">
+<button type="button" class="btn-ghost-sm d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown">
     <span component="category-selector-selected">
         {{{ if (selectedCategory && !showCategorySelectLabel) }}}
-        <span class="category-item">
+        <span class="category-item d-inline-flex align-items-center gap-1">
             {buildCategoryIcon(selectedCategory, "24px", "rounded-circle")}
             <span class="fw-semibold">{selectedCategory.name}</span>
         </span>
@@ -12,17 +12,17 @@
     </span>
 </button>
 <div component="category-selector-search" class="hidden position-absolute">
-    <input type="text" class="form-control" autocomplete="off">
+    <input type="text" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
 </div>
-<ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
+<ul component="category/list" class="dropdown-menu p-1 text-sm category-dropdown-menu" role="menu">
     <li component="category/no-matches" role="presentation" class="category hidden">
-        <a class="dropdown-item" role="menu-item">[[search:no-matches]]</a>
+        <a class="dropdown-item rounded-1" role="menu-item">[[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" role="menu-item">{./level}
+        <a class="dropdown-item rounded-1" role="menu-item">{./level}
             <span component="category-markup" style="{{{ if ./match }}}font-weight: bold;{{{end}}}">
-                <div class="category-item d-inline-block">
+                <div class="category-item d-inline-flex align-items-center gap-1">
                     {{{ if ./icon }}}
                     {buildCategoryIcon(@value, "24px", "rounded-circle")}
                     {{{ end }}}

package/templates/partials/category/sort.tpl

@@ -1,14 +1,29 @@
 <div class="btn-group bottom-sheet" component="thread/sort">
-	<button class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown" type="button">
+	<button class="btn-ghost-sm d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button">
 		<i class="fa fa-fw fa-arrow-down-wide-short text-primary"></i>
 		<span class="visible-md-inline visible-lg-inline fw-semibold">[[topic:sort_by]]</span>
 	</button>
 
-	<ul class="dropdown-menu">
-		<li><a class="dropdown-item" href="#" class="newest_to_oldest" data-sort="newest_to_oldest"><i class="fa fa-fw"></i> [[topic:newest_to_oldest]]</a></li>
-		<li><a class="dropdown-item" href="#" class="oldest_to_newest" data-sort="oldest_to_newest"><i class="fa fa-fw"></i> [[topic:oldest_to_newest]]</a></li>
-		<li><a class="dropdown-item" href="#" class="most_posts" data-sort="most_posts"><i class="fa fa-fw"></i> [[topic:most_posts]]</a></li>
-		<li><a class="dropdown-item" href="#" class="most_votes" data-sort="most_votes"><i class="fa fa-fw"></i> [[topic:most_votes]]</a></li>
-		<li><a class="dropdown-item" href="#" class="most_views" data-sort="most_views"><i class="fa fa-fw"></i> [[topic:most_views]]</a></li>
+	<ul class="dropdown-menu p-1 text-sm">
+		<li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="newest_to_oldest" data-sort="newest_to_oldest">
+			<span class="flex-grow-1">[[topic:newest_to_oldest]]</span>
+			<i class="flex-shrink-0 fa fa-fw text-muted"></i>
+		</a></li>
+		<li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="oldest_to_newest" data-sort="oldest_to_newest">
+			<span class="flex-grow-1">[[topic:oldest_to_newest]]</span>
+			<i class="flex-shrink-0 fa fa-fw text-muted"></i>
+		</a></li>
+		<li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="most_posts" data-sort="most_posts">
+			<span class="flex-grow-1">[[topic:most_posts]]</span>
+			<i class="flex-shrink-0 fa fa-fw text-muted"></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">
+			<span class="flex-grow-1">[[topic:most_votes]]</span>
+			<i class="flex-shrink-0 fa fa-fw text-muted"></i>
+		</a></li>
+		<li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="most_views" data-sort="most_views">
+			<span class="flex-grow-1">[[topic:most_views]]</span>
+			<i class="flex-shrink-0 fa fa-fw text-muted"></i>
+		</a></li>
 	</ul>
 </div>

package/templates/partials/category/subcategory.tpl

@@ -1,16 +1,15 @@
 {{{ if children.length }}}
 <div class="subcategory">
 	{{{ if hasMoreSubCategories }}}
-	<div class="mb-2"><!-- IMPORT partials/category-selector.tpl --></div>
+	<div class="mb-2"><!-- IMPORT partials/category/selector-dropdown-left.tpl --></div>
 	{{{ else }}}
 	<h3 class="fs-6 fw-semibold">[[category:subcategories]]</h3>
 	{{{ end }}}
 
-	<ul component="category/subcategory/container" class="categories list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
+	<ul component="category/subcategory/container" class="categories-list list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
 		<hr class="text-muted"/>
 		{{{each children}}}
 		<!-- IMPORT partials/categories/item.tpl -->
-		<hr class="text-muted"/>
 		{{{end}}}
 	</ul>
 	{{{ if hasMoreSubCategories}}}

package/templates/partials/category/tags.tpl

@@ -1,5 +1,3 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 {{{ each tags }}}
 <a href="{config.relative_path}/tags/{topics.tags.value}"><span class="tag-item" data-tag="{topics.tags.value}">{topics.tags.value}</span><span class="tag-topic-count human-readable-number" title="{topics.tags.score}">{topics.tags.score}</span></a>
 {{{ end }}}

package/templates/partials/category/tools.tpl

@@ -1,78 +1,81 @@
 {{{ if showTopicTools }}}
 <div class="btn-group thread-tools bottom-sheet">
-	<button class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown" type="button">
+	<button class="btn-ghost-sm d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button">
 		<i class="fa fa-fw fa-gear text-primary"></i>
 		<span class="visible-md-inline visible-lg-inline fw-semibold">[[topic:thread_tools.title]]</span>
+		<span component="topic/selected/badge" class="badge rounded-pill bg-secondary"></span>
 	</button>
-	<ul class="dropdown-menu">
+	<ul class="dropdown-menu p-1 text-sm">
 		<li>
-			<a component="topic/mark-unread-for-all" href="#" class="dropdown-item">
-				<i class="fa fa-fw fa-inbox"></i> [[topic:thread_tools.markAsUnreadForAll]]
+			<a component="topic/mark-unread-for-all" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2">
+				<i class="fa fa-fw text-muted fa-inbox"></i> [[topic:thread_tools.markAsUnreadForAll]]
 			</a>
 		</li>
 		<li>
-			<a component="topic/pin" href="#" class="dropdown-item">
-				<i class="fa fa-fw fa-thumb-tack"></i> [[topic:thread_tools.pin]]
+			<a component="topic/pin" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2">
+				<i class="fa fa-fw text-muted fa-thumb-tack"></i> [[topic:thread_tools.pin]]
 			</a>
 		</li>
 		<li>
-			<a component="topic/unpin" href="#" class="hidden dropdown-item">
-				<i class="fa fa-fw fa-thumb-tack fa-rotate-90"></i> [[topic:thread_tools.unpin]]
+			<a component="topic/unpin" href="#" class="hidden dropdown-item rounded-1">
+				<i class="fa fa-fw text-muted fa-thumb-tack fa-rotate-90"></i> [[topic:thread_tools.unpin]]
 			</a>
 		</li>
 
 		<li>
-			<a component="topic/lock" href="#" class="dropdown-item">
-				<i class="fa fa-fw fa-lock"></i> [[topic:thread_tools.lock]]
+			<a component="topic/lock" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2">
+				<i class="fa fa-fw text-muted fa-lock"></i> [[topic:thread_tools.lock]]
 			</a>
 		</li>
 		<li>
-			<a component="topic/unlock" href="#" class="hidden dropdown-item" >
-				<i class="fa fa-fw fa-unlock"></i> [[topic:thread_tools.unlock]]
+			<a component="topic/unlock" href="#" class="hidden dropdown-item rounded-1 d-flex align-items-center gap-2">
+				<i class="fa fa-fw text-muted fa-unlock"></i> [[topic:thread_tools.unlock]]
 			</a>
 		</li>
 
 		<li class="dropdown-divider"></li>
 
 		<li>
-			<a component="topic/move" href="#" class="dropdown-item">
-				<i class="fa fa-fw fa-arrows"></i> [[topic:thread_tools.move]]
+			<a component="topic/move" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2">
+				<i class="fa fa-fw text-muted fa-arrows"></i> [[topic:thread_tools.move]]
 			</a>
 		</li>
 		{{{if template.category}}}
 		<li>
-			<a component="topic/move-all" href="#" class="dropdown-item">
-				<i class="fa fa-fw fa-arrows"></i> [[topic:thread_tools.move_all]]
+			<a component="topic/move-all" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2">
+				<i class="fa fa-fw text-muted fa-arrows"></i> [[topic:thread_tools.move_all]]
 			</a>
 		</li>
 		{{{end}}}
 		<li>
-			<a component="topic/merge" href="#" class="dropdown-item">
-				<i class="fa fa-fw fa-code-fork"></i> [[topic:thread_tools.merge]]
+			<a component="topic/merge" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2">
+				<i class="fa fa-fw text-muted fa-code-fork"></i> [[topic:thread_tools.merge]]
 			</a>
 		</li>
 
 		<li class="dropdown-divider"></li>
 
 		<li>
-			<a component="topic/delete" href="#" class="dropdown-item">
-				<i class="fa fa-fw fa-trash-o"></i> [[topic:thread_tools.delete]]
+			<a component="topic/delete" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2">
+				<i class="fa fa-fw text-muted fa-trash-o"></i> [[topic:thread_tools.delete]]
 			</a>
 		</li>
 		<li>
-			<a component="topic/restore" href="#" class="hidden dropdown-item">
-				<i class="fa fa-fw fa-history"></i> [[topic:thread_tools.restore]]
+			<a component="topic/restore" href="#" class="hidden dropdown-item rounded-1">
+				<i class="fa fa-fw text-muted fa-history"></i> [[topic:thread_tools.restore]]
 			</a>
 		</li>
 		<li>
-			<a component="topic/purge" href="#" class="hidden dropdown-item">
-				<i class="fa fa-fw fa-eraser"></i> [[topic:thread_tools.purge]]
+			<a component="topic/purge" href="#" class="hidden dropdown-item rounded-1">
+				<i class="fa fa-fw text-muted fa-eraser"></i> [[topic:thread_tools.purge]]
 			</a>
 		</li>
 
 		{{{each thread_tools}}}
 		<li>
-			<a href="#" class="dropdown-item {thread_tools.class}"><i class="fa fa-fw {thread_tools.icon}"></i> {thread_tools.title}</a>
+			<a href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {thread_tools.class}">
+				<i class="fa fa-fw {thread_tools.icon}"></i>
+				{thread_tools.title}</a>
 		</li>
 		{{{end}}}
 	</ul>

package/templates/partials/category/watch.tpl

@@ -1,6 +1,6 @@
 {{{ if config.loggedIn }}}
-<div class="btn-group topic-watch-dropdown bottom-sheet" component="topic/watch">
-	<button class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown" type="button">
+<div class="btn-group bottom-sheet" component="topic/watch">
+	<button class="btn-ghost-sm d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button">
 		<span component="category/watching/menu" {{{ if !./isWatched }}}class="hidden"{{{ end }}}><i class="fa fa-fw fa-inbox text-primary"></i><span class="visible-md-inline visible-lg-inline fw-semibold"> [[category:watching]]</span></span>
 
 		<span component="category/notwatching/menu" {{{ if !./isNotWatched }}}class="hidden"{{{ end }}}><i class="fa fa-fw fa-clock-o text-primary"></i><span class="visible-md-inline visible-lg-inline fw-semibold"> [[category:not-watching]]</span></span>
@@ -8,12 +8,45 @@
 		<span component="category/ignoring/menu" {{{ if !./isIgnored }}}class="hidden"{{{ end }}}><i class="fa fa-fw fa-eye-slash text-primary"></i><span class="visible-md-inline visible-lg-inline fw-semibold"> [[category:ignoring]]</span></span>
 	</button>
 
-	<ul class="dropdown-menu">
-		<li><a class="dropdown-item" href="#" component="category/watching" data-state="watching"><i component="category/watching/check" class="fa fa-fw {{{ if ./isWatched }}}fa-check{{{ end }}}"></i><i class="fa fa-fw fa-inbox"></i> [[category:watching]]<p class="help-text text-muted"><small>[[category:watching.description]]</small></p></a></li>
+	<ul class="dropdown-menu p-1 text-sm {{{ if template.account/categories }}}dropdown-menu-end{{{ end }}}">
+		<li>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="category/watching" data-state="watching">
+				<div class="flex-grow-1 d-flex flex-column">
+					<span class="d-flex align-items-center gap-2">
+						<i class="flex-shrink-0 fa fa-fw text-muted fa-inbox"></i>
+						<span class="flex-grow-1 fw-semibold">[[category:watching]]</span>
+					</span>
+					<div class="help-text text-muted text-xs">[[category:watching.description]]</div>
+				</div>
+				<span class="flex-shrink-0"><i component="category/watching/check" class="fa fa-fw {{{ if ./isWatched }}}fa-check{{{ end }}}"></i></span>
+			</a>
+		</li>
 
-		<li><a class="dropdown-item" href="#" component="category/notwatching" data-state="notwatching"><i component="category/notwatching/check" class="fa fa-fw {{{ if ./isNotWatched }}}fa-check{{{ end }}}"></i><i class="fa fa-fw fa-clock-o"></i> [[category:not-watching]]<p class="help-text text-muted"><small>[[category:not-watching.description]]</small></p></a></li>
+		<li>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="category/notwatching" data-state="notwatching">
+				<div class="flex-grow-1 d-flex flex-column">
+					<span class="d-flex align-items-center gap-2">
+						<i class="flex-shrink-0 fa fa-fw text-muted fa-clock-o"></i>
+						<span class="flex-grow-1 fw-semibold">[[category:not-watching]]</span>
+					</span>
+					<div class="help-text text-muted text-xs">[[category:not-watching.description]]</div>
+				</div>
+				<span class="flex-shrink-0"><i component="category/notwatching/check" class="fa fa-fw {{{ if ./isNotWatched }}}fa-check{{{ end }}}"></i></span>
+			</a>
+		</li>
 
-		<li><a class="dropdown-item" href="#" component="category/ignoring" data-state="ignoring"><i component="category/ignoring/check" class="fa fa-fw {{{ if ./isIgnored }}}fa-check{{{ end }}}"></i><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]<p class="help-text text-muted"><small>[[category:ignoring.description]]</small></p></a></li>
+		<li>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="category/ignoring" data-state="ignoring">
+				<div class="flex-grow-1 d-flex flex-column">
+					<span class="d-flex align-items-center gap-2">
+						<i class="flex-shrink-0 fa fa-fw text-muted fa-eye-slash"></i>
+						<span class="flex-grow-1 fw-semibold">[[category:ignoring]]</span>
+					</span>
+					<div class="help-text text-muted text-xs">[[category:ignoring.description]]</div>
+				</div>
+				<span class="flex-shrink-0"><i component="category/ignoring/check" class="fa fa-fw {{{ if ./isIgnored }}}fa-check{{{ end }}}"></i></span>
+			</a>
+		</li>
 	</ul>
 </div>
 {{{ end }}}

package/templates/partials/chats/dropdown.tpl

@@ -1,5 +1,8 @@
 {{{ if !rooms.length }}}
-<li class="text-center p-2">[[modules:chat.no_active]]</li>
+<li class="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:chat.no_active]]</div>
+</li>
 {{{ end }}}
 
 {{{ each rooms }}}