nodebb-theme-harmony 0.0.1 → 0.0.2

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

@@ -0,0 +1,82 @@
+<div class="col-12 col-md-3 col-lg-2 border-end-md text-sm mb-3">
+	<div class="sticky-top d-flex flex-row flex-md-column flex-wrap gap-1" style="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>
+		</a>
+		<a href="{config.relative_path}/user/{userslug}/posts"class="btn-ghost fw-semibold
+			{{{ if template.account/posts }}}active{{{ end }}}
+			{{{ if template.account/best }}}active{{{ end }}}
+			{{{ if template.account/controversial }}}active{{{ end }}}
+			{{{ 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>
+		</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>
+		</a>
+		<a href="{config.relative_path}/user/{userslug}/groups" class="btn-ghost fw-semibold">
+			<div class="flex-1">[[global:header.groups]]</div>
+			<span class="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">
+			<div class="flex-1">[[user:followers]]</div>
+			<span class="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">
+			<div class="flex-1">[[user:following]]</div>
+			<span class="text-xs human-readable-number" title="{counts.following}">{counts.following}</span>
+		</a>
+
+		{{{ if canEdit }}}
+		<a href="{config.relative_path}/user/{userslug}/blocks" class="btn-ghost fw-semibold">
+			<div class="flex-1">[[user:blocked-users]]</div>
+			<span class="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">
+			<div class="flex-1">[[global:uploads]]</div>
+			<span class="text-xs human-readable-number" title="{counts.uploaded}">{counts.uploaded}</span>
+		</a>
+		{{{ end }}}
+
+		<hr/>
+		{{{ 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>
+		</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>
+		</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>
+		</a>
+		<hr/>
+		{{{ end }}}
+
+		{{{ if canEdit }}}
+		<a href="{config.relative_path}/user/{userslug}/edit" class="btn-ghost-sm text-xs">
+			<div class="flex-1">[[user:edit-profile]]</div>
+		</a>
+		<a href="{config.relative_path}/user/{userslug}/settings" class="btn-ghost-sm text-xs">
+			<div class="flex-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 }}}" id="{./id}">
+			<div class="flex-1">{./name}</div>
+		</a>
+		{{{end}}}
+	</div>
+</div>

package/templates/partials/breadcrumbs.tpl

@@ -1,20 +1,12 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<!-- IF breadcrumbs.length -->
-<ol class="breadcrumb" itemscope="itemscope" itemprop="breadcrumb" itemtype="http://schema.org/BreadcrumbList">
+{{{ 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 -->">
 		<meta itemprop="position" content="{@index}" />
 		{{{ if ./url }}}<a href="{breadcrumbs.url}" itemprop="item">{{{ end }}}
-			<span itemprop="name">
-				{breadcrumbs.text}
-				<!-- IF @last -->
-				<!-- IF !feeds:disableRSS -->
-				<!-- IF rssFeedUrl --><a target="_blank" href="{rssFeedUrl}" itemprop="item"><i class="fa fa-rss-square"></i></a><!-- ENDIF rssFeedUrl --><!-- ENDIF !feeds:disableRSS -->
-				<!-- ENDIF @last -->
-			</span>
+			<span class="fw-semibold" itemprop="name">{breadcrumbs.text}</span>
 		{{{ if ./url }}}</a>{{{ end }}}
 	</li>
 	{{{end}}}
 </ol>
-<!-- ENDIF breadcrumbs.length -->
+{{{ end }}}

package/templates/partials/categories/item.tpl

@@ -1,62 +1,66 @@
-<!-- THIS FILE IS STILL PERSONA -->
+<li component="categories/category" data-cid="{./cid}" class="row clearfix category-{./cid}">
+	<meta itemprop="name" content="{./name}">
 
-<li component="categories/category" data-cid="{../cid}" data-numRecentReplies="1" class="row clearfix category-{../cid}">
-	<meta itemprop="name" content="{../name}">
-
-	<div class="content col-12 <!-- IF config.hideCategoryLastPost -->col-md-10 col-sm-12<!-- ELSE -->col-md-7 col-sm-9<!-- ENDIF config.hideCategoryLastPost -->">
-		<div class="float-start">
-		{buildCategoryIcon(@value, "48px", "rounded-circle")}
+	<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="">
+		{buildCategoryIcon(@value, "40px", "rounded-1")}
 		</div>
-		<h2 class="title">
-			<!-- IMPORT partials/categories/link.tpl -->
-		</h2>
-		<div>
-			<!-- IF ../descriptionParsed -->
-			<div class="description text-muted">
-				{../descriptionParsed}
+		<div class="d-flex flex-column gap-1">
+			<h2 class="title fw-bold fs-4">
+				<!-- IMPORT partials/categories/link.tpl -->
+			</h2>
+			{{{ if ./descriptionParsed }}}
+			<div class="description text-muted small">
+				{./descriptionParsed}
 			</div>
-			<!-- ENDIF ../descriptionParsed -->
-			<!-- IF !config.hideSubCategories -->
-			{{{ if ../children.length }}}
-			<div class="category-children">
-				{{{ each ../children }}}
-				{{{ if !../isSection }}}
-				<span class="category-children-item">
-					{buildCategoryIcon(@value, "24px", "rounded-circle")}
-					{{{ if ../link }}}
-					<a href="{../link}">{../name}</a>
+			{{{ end }}}
+			{{{ if !config.hideSubCategories }}}
+			{{{ if ./children.length }}}
+			<div class="category-children d-flex gap-3">
+				{{{ each ./children }}}
+				{{{ if !./isSection }}}
+				<span class="category-children-item small">
+					{{{ if ./link }}}
+					<a href="{./link}">{./name}</a>
 					{{{ else }}}
-					<a href="{config.relative_path}/category/{../slug}">{../name}</a>
+					<a href="{config.relative_path}/category/{./slug}">{./name}</a>
 					{{{ end }}}
 				</span>
 				{{{ end }}}
 				{{{ end }}}
 			</div>
 			{{{ end }}}
-			<!-- ENDIF !config.hideSubCategories -->
+			{{{ end }}}
+			<span class="d-block d-sm-none">
+				{{{ if ./teaser.timestampISO }}}
+				<a class="permalink" href="{./teaser.url}">
+					<small class="timeago" title="{./teaser.timestampISO}"></small>
+				</a>
+				{{{ end }}}
+			</span>
 		</div>
-		<span class="d-block d-sm-none float-end">
-			<!-- IF ../teaser.timestampISO -->
-			<a class="permalink" href="{../teaser.url}">
-				<small class="timeago" title="{../teaser.timestampISO}"></small>
-			</a>
-			<!-- ENDIF ../teaser.timestampISO -->
-		</span>
 	</div>
 
-	<!-- IF !../link -->
-	<div class="col-md-1 d-none d-md-block stats text-muted">
-		<span class="{../unread-class} human-readable-number" title="{../totalTopicCount}">{../totalTopicCount}</span><br />
-		<small>[[global:topics]]</small>
-	</div>
-	<div class="col-md-1 d-none d-md-block stats text-muted">
-		<span class="{../unread-class} human-readable-number" title="{../totalPostCount}">{../totalPostCount}</span><br />
-		<small>[[global:posts]]</small>
+	{{{ 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>
+		</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>
+			</div>
+		</div>
 	</div>
-	<!-- IF !config.hideCategoryLastPost -->
+
+	{{{ 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>
-	<!-- ENDIF !config.hideCategoryLastPost -->
-	<!-- ENDIF !../link -->
+	{{{ end }}}
+	{{{ end }}}
 </li>

package/templates/partials/categories/lastpost.tpl

@@ -1,28 +1,26 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<div class="lastpost background-link-container" style="border-color: {../bgColor}">
-	{{{each ./posts}}}
-	<!-- IF @first -->
-	<div component="category/posts">
-		<a class="background-link" href="{config.relative_path}/topic/{../topic.slug}<!-- IF ../index -->/{../index}<!-- ENDIF ../index -->"></a>
-		<p>
-			<a href="{config.relative_path}/user/{../user.userslug}">{buildAvatar(posts.user, "24px", true)}</a>
-			<a class="permalink text-muted" href="{config.relative_path}/topic/{../topic.slug}<!-- IF ../index -->/{../index}<!-- ENDIF ../index -->">
-				<small class="timeago" title="{../timestampISO}"></small>
+<div class="lastpost background-link-container border-start border-2 h-100" style="border-color: {./bgColor}!important;">
+	{{{ each ./posts }}}
+	{{{ if @first }}}
+	<div component="category/posts" class="ps-3">
+		<a class="background-link" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}"></a>
+		<p class="mb-0">
+			<a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(posts.user, "20px", true)}</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">
-			{../content}
+		<div class="post-content mt-2 overflow-hidden text-xs line-clamp-3">
+			{./content}
 		</div>
 	</div>
-	<!-- ENDIF @first -->
-	{{{end}}}
+	{{{ end }}}
+	{{{ end }}}
 
-	<!-- IF !../posts.length -->
-	<div component="category/posts">
-		<div class="post-content">
+	{{{ if !./posts.length }}}
+	<div component="category/posts" class="ps-3">
+		<div class="post-content overflow-hidden text-xs">
 			[[category:no_new_posts]]
 		</div>
 	</div>
-	<!-- ENDIF !../posts.length -->
+	{{{ end }}}
 </div>

package/templates/partials/categories/link.tpl

@@ -1,13 +1,5 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<!-- IF ../isSection -->
-{../name}
-<!-- ELSE -->
-<!-- IF ../link -->
-<a href="{../link}" itemprop="url">
-<!-- ELSE -->
-<a href="{config.relative_path}/category/{../slug}" itemprop="url">
-<!-- ENDIF ../link -->
-{../name}
-</a>
-<!-- ENDIF ../isSection -->
+{{{ if ./isSection }}}
+{./name}
+{{{ else }}}
+<a class="text-reset" href="{{{ if ./link }}}{./link}{{{ else }}}{config.relative_path}/category/{./slug}{{{ end }}}" itemprop="url">{../name}</a>
+{{{ end }}}

package/templates/partials/category/sort.tpl

@@ -1,13 +1,10 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <div class="btn-group bottom-sheet" component="thread/sort">
-	<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button">
-		<span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:sort_by]]</span>
-		<span class="visible-xs-inline"><i class="fa fa-fw fa-sort"></i></span>
-		<span class="caret"></span>
+	<button class="btn btn-link d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown" type="button">
+		<i class="fa fa-fw fa-arrow-down-wide-short small link-primary"></i>
+		<span class="visible-md-inline visible-lg-inline small">[[topic:sort_by]]</span>
 	</button>
 
-	<ul class="dropdown-menu dropdown-menu-end">
+	<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>

package/templates/partials/category/subcategory.tpl

@@ -1,20 +1,20 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 {{{ if children.length }}}
 <div class="subcategory">
 	{{{ if hasMoreSubCategories }}}
 	<div class="mb-2"><!-- IMPORT partials/category-selector.tpl --></div>
 	{{{ else }}}
-	<p>[[category:subcategories]]</p>
+	<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">
+		<hr class="text-muted"/>
 		{{{each children}}}
 		<!-- IMPORT partials/categories/item.tpl -->
+		<hr class="text-muted"/>
 		{{{end}}}
 	</ul>
 	{{{ if hasMoreSubCategories}}}
-	<button class="btn btn-outline-secondary mb-2" component="category/load-more-subcategories">[[category:x-more-categories, {subCategoriesLeft}]]</button>
+	<button class="btn btn-link mb-2" component="category/load-more-subcategories">[[category:x-more-categories, {subCategoriesLeft}]]</button>
 	{{{ end }}}
 </div>
 {{{ end }}}

package/templates/partials/category/tools.tpl

@@ -1,13 +1,10 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<!-- IF showTopicTools -->
+{{{ if showTopicTools }}}
 <div class="btn-group thread-tools bottom-sheet">
-	<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button">
-		<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 class="btn btn-link d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown" type="button">
+		<i class="fa fa-fw fa-gear small link-primary"></i>
+		<span class="visible-md-inline visible-lg-inline small">[[topic:thread_tools.title]]</span>
 	</button>
-	<ul class="dropdown-menu dropdown-menu-end">
+	<ul class="dropdown-menu">
 		<li>
 			<a component="topic/mark-unread-for-all" href="#" class="dropdown-item">
 				<i class="fa fa-fw fa-inbox"></i> [[topic:thread_tools.markAsUnreadForAll]]
@@ -80,4 +77,4 @@
 		{{{end}}}
 	</ul>
 </div>
-<!-- ENDIF showTopicTools -->
+{{{ end }}}

package/templates/partials/category/watch.tpl

@@ -1,18 +1,14 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<!-- IF config.loggedIn -->
+{{{ if config.loggedIn }}}
 <div class="btn-group topic-watch-dropdown bottom-sheet" component="topic/watch">
+	<button class="btn btn-link d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown" type="button">
+		<span component="category/watching/menu" <!-- IF !../isWatched -->class="hidden"<!-- ENDIF !../isWatched -->><i class="fa fa-fw fa-inbox small link-primary"></i><span class="visible-md-inline visible-lg-inline small"> [[category:watching]]</span></span>
 
-	<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button">
-		<span component="category/watching/menu" <!-- IF !../isWatched -->class="hidden"<!-- ENDIF !../isWatched -->><i class="fa fa-fw fa-inbox"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline"> [[category:watching]]</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/notwatching/menu" <!-- IF !../isNotWatched -->class="hidden"<!-- ENDIF !../isNotWatched -->><i class="fa fa-fw fa-clock-o small link-primary"></i><span class="visible-md-inline visible-lg-inline small"> [[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>
+		<span component="category/ignoring/menu" <!-- IF !../isIgnored -->class="hidden"<!-- ENDIF !../isIgnored -->><i class="fa fa-fw fa-eye-slash small link-primary"></i><span class="visible-md-inline visible-lg-inline small"> [[category:ignoring]]</span></span>
 	</button>
 
-	<ul class="dropdown-menu dropdown-menu-end">
+	<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<!-- ENDIF ../isWatched -->"></i><i class="fa fa-fw fa-inbox"></i> [[category:watching]]<p class="help-text"><small>[[category:watching.description]]</small></p></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<!-- ENDIF ../isNotWatched -->"></i><i class="fa fa-fw fa-clock-o"></i> [[category:not-watching]]<p class="help-text"><small>[[category:not-watching.description]]</small></p></a></li>
@@ -20,4 +16,4 @@
 		<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<!-- ENDIF ../isIgnored -->"></i><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]<p class="help-text"><small>[[category:ignoring.description]]</small></p></a></li>
 	</ul>
 </div>
-<!-- ENDIF config.loggedIn -->
+{{{ end }}}

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

@@ -1,13 +1,12 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
+<button type="button" class="btn btn-link d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown">
     {{{ if selectedCategory }}}
     <span class="category-item">
-        {buildCategoryIcon(selectedCategory, "24px", "rounded-circle")}
-        <span class="visible-sm-inline visible-md-inline visible-lg-inline">{selectedCategory.name}</span>
+        {buildCategoryIcon(selectedCategory, "20px", "rounded-circle")}
+        <span class="visible-md-inline visible-lg-inline small">{selectedCategory.name}</span>
     </span>
     {{{ else }}}
-    <span class="visible-sm-inline visible-md-inline visible-lg-inline">[[unread:all_categories]]</span><span class="visible-xs-inline"><i class="fa fa-fw fa-list"></i></span>{{{ end }}} <span class="caret"></span>
+    <i class="fa fa-fw fa-list small link-primary"></i>
+    <span class="visible-md-inline visible-lg-inline small">[[unread:all_categories]]</span>{{{ end }}}
 </button>
 <div component="category-selector-search" class="hidden position-absolute">
     <input type="text" class="form-control" autocomplete="off">

package/templates/partials/category-filter.tpl

@@ -1,5 +1,3 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <div component="category/dropdown" class="btn-group category-dropdown-container bottom-sheet">
    <!-- IMPORT partials/category-filter-content.tpl -->
 </div>

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

@@ -1,6 +1,4 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
+<button type="button" class="btn btn-link d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown">
     <span component="category-selector-selected">
         {{{ if (selectedCategory && !showCategorySelectLabel) }}}
         <span class="category-item">
@@ -8,8 +6,9 @@
             {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>
+    <i class="fa fa-fw {{{ if selectCategoryIcon }}}{selectCategoryIcon}{{{ else }}}fa-list{{{ end }}} link-primary small"></i>
+    <span class="visible-md-inline visible-lg-inline small">{{{ if selectCategoryLabel }}}{selectCategoryLabel}{{{ else }}}[[topic:thread_tools.select_category]]{{{ end }}}</span>
+    {{{ end }}}</span>
 </button>
 <div component="category-selector-search" class="hidden position-absolute">
     <input type="text" class="form-control" autocomplete="off">

package/templates/partials/category-selector.tpl

@@ -1,5 +1,3 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <div component="category-selector" class="btn-group bottom-sheet">
 <!-- IMPORT partials/category-selector-content.tpl -->
 </div>

package/templates/partials/chats/dropdown.tpl

@@ -1,40 +1,32 @@
-<!-- THIS FILE IS STILL PERSONA -->
+{{{ if !rooms.length }}}
+<li class="text-center"><a href="#" class="text-reset">[[modules:chat.no_active]]</a></li>
+{{{ end }}}
 
-<!-- IF rooms.length -->
-{{{each rooms}}}
-<li class="<!-- IF ../unread -->unread<!-- ENDIF ../unread -->" data-roomid="{rooms.roomId}">
-	{{{each rooms.users}}}
-	<!-- IF @first -->
+{{{ each rooms }}}
+<li class="{{{ if ./unread }}}unread{{{ end }}} dropdown-item rounded-1 p-2 d-flex gap-2 pointer" data-roomid="{./roomId}">
 	<div class="main-avatar">
+	{{{ each ./users}}}
+	{{{ if @first }}}
 		<!-- IMPORT partials/chats/user.tpl -->
+	{{{ end }}}
+	{{{ end }}}
+	{{{ if !./users.length}}}
+	<span class="avatar avatar-rounded text-bg-warning" component="avatar/icon" style="--avatar-size: 32px;">?</span>
+	{{{ end }}}
 	</div>
-	<!-- ENDIF @first -->
-	{{{end}}}
 
-	<ul class="members">
-		{{{each rooms.users}}}
-		<li>
-			<!-- IMPORT partials/chats/user.tpl -->
-		</li>
-		{{{end}}}
-	</ul>
-
-	<div class="notification-chat-content">
-		<strong class="room-name">
-			<!-- IF !rooms.lastUser.uid -->
+	<div class="notification-chat-content d-flex flex-grow-1 flex-column w-100">
+		<div class="room-name fw-semibold text-xs">
+			{{{ if !./lastUser.uid }}}
 			<span>[[modules:chat.no-users-in-room]]</span>
-			<!-- ELSE -->
-			<!-- IF rooms.roomName -->{rooms.roomName}<!-- ELSE -->{rooms.usernames}<!-- ENDIF rooms.roomName -->
-			<!-- ENDIF !rooms.lastUser.uid -->
-		</strong>
-		<span class="teaser-content">
-			<strong class="teaser-username">{rooms.teaser.user.username}:</strong>
-			{rooms.teaser.content}
-		</span>
+			{{{ else }}}
+			{./lastUser.username}
+			{{{ end }}}
+		</div>
+		<div class="teaser-content text-sm line-clamp-3">
+			{./teaser.content}
+		</div>
+		<div class="teaser-timestamp notification-chat-controls text-muted text-xs">{./teaser.timeagoLong}</div>
 	</div>
-	<div class="teaser-timestamp notification-chat-controls">{rooms.teaser.timeago}</div>
 </li>
-{{{end}}}
-<!-- ELSE -->
-<li class="no_active"><a href="#">[[modules:chat.no_active]]</a></li>
-<!-- ENDIF rooms.length -->
+{{{ end }}}

package/templates/partials/chats/message-window.tpl

@@ -1,7 +1,5 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- IF roomId -->
-<div component="chat/messages" class="expanded-chat" data-roomid="{roomId}">
+<div component="chat/messages" class="expanded-chat d-flex flex-column h-100" data-roomid="{roomId}">
 	<div component="chat/header" class="d-flex align-items-center px-3">
 		<span class="members flex-grow-1">
 			[[modules:chat.chatting_with]]:
@@ -17,13 +15,15 @@
 	<div class="position-relative">
 		<div component="chat/messages/scroll-up-alert" class="position-absolute scroll-up-alert alert alert-info hidden w-100" role="button" style="z-index: 1;">[[modules:chat.scroll-up-alert]]</div>
 	</div>
-	<ul class="chat-content">
+	<ul class="chat-content p-0 m-0 list-unstyled overflow-auto flex-grow-1">
 		<!-- IMPORT partials/chats/messages.tpl -->
 	</ul>
-	<div component="chat/composer">
-		<textarea component="chat/input" placeholder="[[modules:chat.placeholder]]" class="form-control chat-input mousetrap" rows="2"></textarea>
+	<div component="chat/composer" class="d-flex">
+		<div class="flex-grow-1 position-relative">
+			<textarea component="chat/input" placeholder="[[modules:chat.placeholder]]" class="form-control chat-input mousetrap" rows="2" style="resize:none;"></textarea>
+			<span component="chat/message/remaining" class="text-muted position-absolute me-1 mb-1" style="right: 0px; bottom:0px;">{maximumChatMessageLength}</span>
+		</div>
 		<button class="btn btn-primary" type="button" data-action="send"><i class="fa fa-fw fa-2x fa-paper-plane"></i></button>
-		<span component="chat/message/remaining">{maximumChatMessageLength}</span>
 		<form component="chat/upload" method="post" enctype="multipart/form-data">
 			<input type="file" name="files[]" multiple class="hidden"/>
 		</form>