nodebb-theme-harmony 1.0.0-beta.4 → 1.0.0-beta.41

package/templates/partials/account/header.tpl

@@ -1,101 +1,98 @@
-<div data-widget-area="header">
-	{{{each widgets.header}}}
-	{{widgets.header.html}}
-	{{{end}}}
-</div>
+<div class="account">
+	<div data-widget-area="header">
+		{{{each widgets.header}}}
+		{{widgets.header.html}}
+		{{{end}}}
+	</div>
 
-<div class="cover position-absolute start-0 top-0 w-100" component="account/cover" style="background-image: url({cover:url}); background-position: {cover:position};">
-	<div class="container">
-		{{{ if allowCoverPicture }}}
-		{{{ if canEdit }}}
-		<div class="controls">
-			<span class="upload"><i class="fa fa-fw fa-2x fa-upload"></i></span>
-			<span class="resize"><i class="fa fa-fw fa-2x fa-arrows"></i></span>
-			<span class="remove"><i class="fa fa-fw fa-2x fa-times"></i></span>
+	<div class="cover position-absolute start-0 top-0 w-100" component="account/cover" style="background-image: url({cover:url}); background-position: {cover:position};">
+		<div class="container">
+			{{{ if allowCoverPicture }}}
+			{{{ if canEdit }}}
+			<div class="controls text-center">
+				<span class="upload p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-upload"></i></span>
+				<span class="resize p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-arrows"></i></span>
+				<span class="remove p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-times"></i></span>
+			</div>
+			<div class="save text-bg-primary">[[groups:cover-save]] <i class="fa fa-fw fa-floppy-o"></i></div>
+			<div class="indicator text-bg-primary">[[groups:cover-saving]] <i class="fa fa-fw fa-refresh fa-spin"></i></div>
+			{{{ end }}}
+			{{{ end }}}
 		</div>
-		<div class="save text-bg-primary">[[groups:cover-save]] <i class="fa fa-fw fa-floppy-o"></i></div>
-		<div class="indicator text-bg-primary">[[groups:cover-saving]] <i class="fa fa-fw fa-refresh fa-spin"></i></div>
-		{{{ end }}}
-		{{{ end }}}
 	</div>
-</div>
 
-<div class="d-flex flex-column flex-md-row gap-2 w-100 pb-4 mb-4 mt-2 border-bottom">
-	<div class="avatar-wrapper border-4 position-relative align-self-start d-none d-md-block" style="margin-top: -75px;">
-		{{{ if picture }}}
-		<img src="{picture}" class="avatar avatar-rounded" style="--avatar-size: 142px;" />
-		{{{ else }}}
-		<div class="avatar avatar-rounded" style="background-color: {icon:bgColor}; --avatar-size: 142px;" title="{username}">{icon:text}</div>
-		{{{ end }}}
-	</div>
+	<div class="d-flex flex-column flex-md-row gap-2 w-100 pb-4 mb-4 mt-2 border-bottom">
+		<div {{{ if (allowProfilePicture && isSelfOrAdminOrGlobalModerator)}}}component="profile/change/picture"{{{ end }}} class="avatar-wrapper border-4 position-relative align-self-center align-self-md-start hover-parent" style="margin-top: -75px;">
+			{buildAvatar(@value, "142px", true)}
+			{{{ if (allowProfilePicture && isSelfOrAdminOrGlobalModerator)}}}
+			<div component="profile/change/picture" class="d-none d-md-block pointer p-2 rounded-1 opacity-75 text-bg-light position-absolute top-50 start-50 translate-middle hover-visible">
+				<span class="upload"><i class="fa fa-fw fa-upload"></i></span>
+			</div>
+			{{{ end }}}
+		</div>
 
-	<div class="avatar-wrapper border-4 position-relative align-self-center d-block d-md-none" style="margin-top: -75px;">
-		{{{ if picture }}}
-		<img src="{picture}" class="avatar avatar-rounded" style="--avatar-size: 142px;" />
-		{{{ else }}}
-		<div class="avatar avatar-rounded" style="background-color: {icon:bgColor}; --avatar-size: 142px;" title="{username}">{icon:text}</div>
-		{{{ end }}}
-	</div>
+		<div class="d-flex flex-column flex-md-row mt-1 justify-content-between w-100 gap-2">
+			<div class="d-flex flex-1 flex-row gap-2">
+				<div class="d-flex flex-column">
+					<h2 class="fullname fw-semibold fs-2 tracking-tight mb-0">{{{ if fullname }}}{fullname}{{{ else }}}{username}{{{ end }}}</h2>
+					<div class="d-flex flex-wrap gap-1 text-sm align-items-center">
+						<span class="username fw-bold">{{{ if !banned }}}@{username}{{{ else }}}[[user:banned]]{{{ end }}}</span>
+						<div class="d-flex align-items-center gap-1 p-1">
+							{{{ if selectedGroup.length }}}
+							{{{ each selectedGroup }}}
+							{{{ if ./slug }}}
+							<!-- IMPORT partials/groups/badge.tpl -->
+							{{{ end }}}
+							{{{ end }}}
+							{{{ end }}}
+						</div>
+					</div>
 
-	<div class="d-flex flex-column flex-md-row mt-1 justify-content-between w-100 gap-2">
-		<div class="d-flex flex-1 flex-row gap-2">
-			<div class="d-flex flex-column">
-				<h2 class="fullname fw-semibold fs-2 tracking-tight mb-0">{{{ if fullname }}}{fullname}{{{ else }}}{username}{{{ end }}}</h2>
-				<div class="d-flex flex-wrap gap-1 text-sm align-items-center">
-					<span class="username fw-bold">{{{ if !banned }}}@{username}{{{ else }}}[[user:banned]]{{{ end }}}</span>
-					<div class="d-flex align-items-center gap-1 p-1">
-						{{{ if selectedGroup.length }}}
-						{{{ each selectedGroup }}}
-						{{{ if ./slug }}}
-						<!-- IMPORT partials/groups/badge.tpl -->
-						{{{ end }}}
-						{{{ end }}}
+					{{{ if isAdminOrGlobalModeratorOrModerator }}}
+					{{{ if banned }}}
+					<div class="text-xm text-muted">
+						{{{ if banned_until }}}
+						[[user:info.banned-until, {banned_until_readable}]]
+						{{{ else }}}
+						[[user:info.banned-permanently]]
 						{{{ end }}}
 					</div>
+					{{{ end }}}
+					{{{ end }}}
 				</div>
+			</div>
+
+			<div class="d-flex gap-1 align-self-stretch align-self-md-start justify-content-end">
+				{{{ if loggedIn }}}
+				{{{ if !isSelf }}}
+				<a component="account/unfollow" href="#" class="btn btn-info flex-fill{{{ if !isFollowing }}} hide{{{ end }}}">[[user:unfollow]]</a>
+				<a component="account/follow" href="#" class="btn btn-primary flex-fill{{{ if isFollowing }}} hide{{{ end }}}">[[user:follow]]</a>
+				{{{ end }}}
+				{{{ end }}}
 
-				{{{ if isAdminOrGlobalModeratorOrModerator }}}
-				{{{ if banned }}}
-				<div class="text-xm text-muted">
-					{{{ if banned_until }}}
-					[[user:info.banned-until, {banned_until_readable}]]
-					{{{ else }}}
-					[[user:info.banned-permanently]]
+				{{{ if (loggedIn && (!isSelf && (!banned && !config.disableChat))) }}}
+				<div class="btn-group flex-fill">
+					<a {{{ if hasPrivateChat }}}component="account/chat"{{{ else }}}component="account/new-chat"{{{ end }}} href="#" class="btn btn-light" role="button">[[user:chat]]</a>
+					{{{ if hasPrivateChat}}}
+					<button type="button" class="btn btn-light dropdown-toggle flex-0" data-bs-toggle="dropdown">
+						<i class="fa fa-caret-down"></i>
+					</button>
+					<ul class="dropdown-menu dropdown-menu-end" role="menu">
+						<li><a class="dropdown-item" href="#" component="account/new-chat">[[user:new_chat_with, {username}]]</a></li>
+					</ul>
 					{{{ end }}}
 				</div>
 				{{{ end }}}
+				{{{ if !isSelf }}}
+				{{{ if (isAdmin || (canBan || canMute ))}}}
+				<!-- IMPORT partials/account/admin-menu.tpl -->
 				{{{ end }}}
-			</div>
-		</div>
-
-		<div class="d-flex gap-1 align-self-stretch align-self-md-start justify-content-end">
-			{{{ if loggedIn }}}
-			{{{ if !isSelf }}}
-			<a component="account/unfollow" href="#" class="btn btn-info flex-fill{{{ if !isFollowing }}} hide{{{ end }}}">[[user:unfollow]]</a>
-			<a component="account/follow" href="#" class="btn btn-primary flex-fill{{{ if isFollowing }}} hide{{{ end }}}">[[user:follow]]</a>
-			{{{ end }}}
-			{{{ end }}}
-
-			{{{ if (loggedIn && (!isSelf && (!banned && !config.disableChat))) }}}
-			<div class="btn-group flex-fill">
-				<a {{{ if hasPrivateChat }}}component="account/chat"{{{ else }}}component="account/new-chat"{{{ end }}} href="#" class="btn btn-light" role="button">[[user:chat]]</a>
-				{{{ if hasPrivateChat}}}
-				<button type="button" class="btn btn-light dropdown-toggle flex-0" data-bs-toggle="dropdown">
-					<i class="fa fa-caret-down"></i>
-				</button>
-				<ul class="dropdown-menu dropdown-menu-end" role="menu">
-					<li><a class="dropdown-item" href="#" component="account/new-chat">[[user:new_chat_with, {username}]]</a></li>
-				</ul>
 				{{{ end }}}
 			</div>
-			{{{ end }}}
-			{{{ if !isSelf }}}
-			{{{ if (isAdmin || (canBan || canMute ))}}}
-			<!-- IMPORT partials/account/admin-menu.tpl -->
-			{{{ end }}}
-			{{{ end }}}
 		</div>
 	</div>
-</div>
 
+	<div class="d-flex flex-column flex-md-row">
+		<!-- IMPORT partials/account/sidebar-left.tpl -->
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 

package/templates/partials/account/session-list.tpl

@@ -0,0 +1,18 @@
+{{{ each sessions }}}
+<li class="list-group-item text-break" data-uuid="{./uuid}">
+	<div class="float-end">
+		{{{ if isSelfOrAdminOrGlobalModerator }}}
+		{{{ if !./current }}}
+		<button class="btn btn-sm btn-outline-secondary" type="button" data-action="revokeSession">[[user:revoke-session]]</button>
+		{{{ end }}}
+		{{{ end }}}
+		{function.userAgentIcons}
+		<i class="fa fa-circle text-{{{ if ./current }}}success{{{ else }}}muted{{{ end }}}"></i>
+	</div>
+	[[user:browser-version-on-platform, {./browser}, {./version}, {./platform}]]<br />
+	<small class="timeago text-muted" title="{../datetimeISO}"></small>
+	<ul>
+		<li><strong>[[global:ip_address]]</strong>: {../ip}</li>
+	</ul>
+</li>
+{{{ end }}}

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/categories/item.tpl

@@ -33,27 +33,28 @@
 			{{{ 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="row col-md-5 col-sm-3 d-none d-md-flex align-self-start">
+		{{{ if !./link }}}
+		<div class="col-md-5 d-none d-lg-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>
-		<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 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>
-	</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 -->
+		{{{ if !config.hideCategoryLastPost }}}
+		<div class="col-md-7 col-sm-3 teaser d-none d-sm-block" component="topic/teaser">
+			<!-- IMPORT partials/categories/lastpost.tpl -->
+		</div>
+		{{{ end }}}
+		{{{ end }}}
 	</div>
-	{{{ end }}}
-	{{{ end }}}
 </li>

package/templates/partials/categories/lastpost.tpl

@@ -4,12 +4,12 @@
 	<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 class="text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(posts.user, "20px", true)}</a>
+			<a class="text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(posts.user, "20px", 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 class="post-content overflow-hidden text-xs line-clamp-2">
 			{./content}
 		</div>
 	</div>

package/templates/partials/{category-filter-content.tpl → category/filter-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">
     {{{ if selectedCategory }}}
-    <span class="category-item">
-        {buildCategoryIcon(selectedCategory, "20px", "rounded-circle")}
+    <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 }}}
@@ -9,18 +9,20 @@
     <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" autocomplete="off">
+    <input type="text" class="form-control form-control-sm" autocomplete="off">
 </div>
 <ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
-    <li role="presentation" class="category" data-all="all">
-        <a class="dropdown-item" role="menu-item" href="{config.relative_path}/{allCategoriesUrl}"><i component="category/select/icon" class="fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i> [[unread:all_categories]]</a>
+    <li role="presentation" class="category" data-cid="all">
+        <a class="dropdown-item" role="menu-item" 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="menu-item" 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">
+                <div class="category-item d-inline-flex align-items-center gap-1">
+                    {{{ if ./icon }}}
                     {buildCategoryIcon(@value, "24px", "rounded-circle")}
+                    {{{ end }}}
                     {./name}
                 </div>
             </span>

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">
     <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,7 +12,7 @@
     </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" 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">
@@ -22,7 +22,7 @@
     <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}
             <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/subcategory.tpl

@@ -1,7 +1,7 @@
 {{{ 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 }}}

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/watch.tpl

@@ -1,5 +1,5 @@
 {{{ if config.loggedIn }}}
-<div class="btn-group topic-watch-dropdown bottom-sheet" component="topic/watch">
+<div class="btn-group 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">
 		<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>
 
@@ -9,11 +9,35 @@
 	</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>
+		<li>
+			<a class="dropdown-item d-flex" href="#" component="category/watching" data-state="watching">
+				<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-inbox"></i> [[category:watching]]</span>
+					<p class="help-text text-muted"><small>[[category:watching.description]]</small></p>
+				</div>
+			</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 d-flex" href="#" component="category/notwatching" data-state="notwatching">
+				<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" 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 d-flex" href="#" component="category/ignoring" data-state="ignoring">
+				<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>
 {{{ end }}}

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

@@ -26,6 +26,7 @@
 			<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 component="chat/upload/button" class="btn btn-light" type="button"><i class="fa fa-fw fa-2x fa-upload"></i></button>
 		<button class="btn btn-primary" type="button" data-action="send"><i class="fa fa-fw fa-2x fa-paper-plane"></i></button>
 		<form component="chat/upload" method="post" enctype="multipart/form-data">
 			<input type="file" name="files[]" multiple class="hidden"/>

package/templates/partials/chats/message.tpl

@@ -18,19 +18,17 @@
 			{messages.content}
 		</div>
 
-		<!-- IF !config.disableChatMessageEditing -->
-		<!-- IF messages.self -->
+		{{{ if (!config.disableChatMessageEditing && ./self ) }}}
 		<div class="position-relative">
 			<div class="btn-group border shadow-sm controls position-absolute small hover-d-block" style="bottom:5px; right:30px; display:none;">
 				<button class="btn btn-sm btn-link" data-action="edit"><i class="fa fa-pencil"></i></button>
 				<button class="btn btn-sm btn-link" data-action="delete"><i class="fa fa-trash"></i></button>
 				<button class="btn btn-sm btn-link" data-action="restore"><i class="fa fa-repeat"></i></button>
-				<!-- IF isAdminOrGlobalMod -->
+				{{{ if isAdminOrGlobalMod }}}
 				<button class="btn btn-sm btn-link chat-ip" title="[[modules:chat.show-ip]]"><i class="fa fa-info-circle chat-ip-button"></i></button>
-				<!-- ENDIF isAdminOrGlobalMod -->
+				{{{ end }}}
 			</div>
 		</div>
-		<!-- ENDIF messages.self -->
-		<!-- ENDIF !config.disableChatMessageEditing -->
+		{{{ end }}}
 	</div>
 </li>

package/templates/partials/cookie-consent.tpl

@@ -1,6 +1,6 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<div class="cookie-consent">
-    <button class="float-end btn btn-primary">{dismiss}</button>
-    {message} <a target="_blank" rel="noopener" href="{link_url}">{link}</a>
+<div class="d-flex justify-content-center position-fixed start-0 bottom-0 w-100 mb-5 mb-md-0">
+    <div class="cookie-consent text-bg-info w-50 p-3 rounded d-flex gap-2 mb-5 mb-md-3 justify-content-between align-items-center">
+        <span>{message} <a class="fw-bold" target="_blank" rel="noopener" href="{link_url}">{link}</a></span>
+        <button class="btn btn-primary text-nowrap">{dismiss}</button>
+    </div>
 </div>

package/templates/partials/flags/filters.tpl

@@ -30,7 +30,7 @@
 				<div class="mb-3">
 					<label class="form-label" for="filter-cid">[[flags:filter-cid]]</label>
 					<div class="input-group">
-					<!-- IMPORT partials/category-filter.tpl -->
+					<!-- IMPORT partials/category/filter-dropdown-left.tpl -->
 					</div>
 				</div>
 				<div class="mb-3">

package/templates/partials/groups/admin.tpl

@@ -4,7 +4,7 @@
 			<div class="col-12 col-lg-6">
 				<div class="mb-3">
 					<label class="form-label" for="name">[[groups:details.group_name]]</label>
-					<input <!-- IF group.system -->readonly<!-- ENDIF group.system --> class="form-control" name="name" id="name" type="text" value="{group.displayName}" />
+					<input {{{ if group.system }}}readonly{{{ end }}} class="form-control" name="name" id="name" type="text" value="{group.displayName}" />
 				</div>
 				<div class="mb-3">
 					<label class="form-label" for="name">[[groups:details.description]]</label>
@@ -13,7 +13,7 @@
 
 				<div class="form-check">
 					<label class="form-check-label">[[groups:details.private]]</label>
-					<input class="form-check-input" name="private" type="checkbox"<!-- IF group.private --> checked<!-- ENDIF group.private -->>
+					<input class="form-check-input" name="private" type="checkbox"{{{ if group.private }}} checked{{{ end }}}>
 					{{{ if !allowPrivateGroups }}}
 					<p class="form-text">
 						[[groups:details.private_system_help]]
@@ -25,7 +25,7 @@
 				</div>
 				<div class="form-check">
 					<label class="form-check-label">[[groups:details.hidden]]</label>
-					<input class="form-check-input" name="hidden" type="checkbox"<!-- IF group.hidden --> checked<!-- ENDIF group.hidden -->>
+					<input class="form-check-input" name="hidden" type="checkbox"{{{ if group.hidden }}} checked{{{ end }}}>
 					<p class="form-text text-xs m-0">
 						[[groups:details.hidden_help]]
 					</p>
@@ -82,7 +82,7 @@
 			<label class="form-label" for="memberPostCids">[[groups:details.member-post-cids]]</label>
 			<div class="d-flex gap-1">
 				<div class="member-post-cids-selector">
-					<!-- IMPORT partials/category-selector.tpl -->
+					<!-- IMPORT partials/category/selector-dropdown-left.tpl -->
 				</div>
 				<input id="memberPostCids" type="text" class="form-control" value="{group.memberPostCids}">
 			</div>

package/templates/partials/groups/badge.tpl

@@ -1 +1 @@
-<a href="{config.relative_path}/groups/{./slug}" class="badge rounded-1 text-uppercase text-truncate text-decoration-none" style="max-width: 150px;color:{./textColor};background-color: {./labelColor};"><i class="fa {{{ if ./icon }}}{./icon}{{{ if ./userTitle}}} me-1{{{ end }}}{{{else}}}hidden{{{ end }}}"></i><span class="badge-text">{{{ if ./userTitle }}}{./userTitle}{{{ end }}}</span></a>
+<a href="{config.relative_path}/groups/{./slug}" class="badge rounded-1 text-uppercase text-truncate text-decoration-none" style="max-width: 150px;color:{./textColor};background-color: {./labelColor};"><i class="fa {{{ if ./icon }}}{./icon}{{{ if ./userTitle}}} me-1{{{ end }}}{{{else}}}hidden{{{ end }}}"></i><span class="badge-text align-text-bottom">{{{ if ./userTitle }}}{./userTitle}{{{ end }}}</span></a>

package/templates/partials/groups/memberlist.tpl

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

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

@@ -1,5 +1,5 @@
 <div class="flex-0 pe-2 border-end-md text-sm mb-3 flex-basis-md-200">
-	<div class="nav sticky-top d-flex flex-row flex-md-column flex-wrap gap-1" style="z-index: 1;">
+	<div class="nav sticky-md-top d-flex flex-row flex-md-column flex-wrap gap-1" style="top: 1rem; z-index: 1;">
 		<button data-bs-toggle="tab" data-bs-target="#groups-posts" class="btn-ghost fw-semibold {{{ if template.groups/details }}}active{{{ end }}}">
 			<div class="flex-1">[[global:posts]]</div>
 		</button>

package/templates/partials/header/brand.tpl

@@ -1,6 +1,6 @@
 {{{ if (brand:logo || config.showSiteTitle)}}}
 <div class="container brand-container">
-	<div class="col-12 d-flex border-bottom pb-3 {{{ if config.centerHeaderElements }}}justify-content-center{{{ end }}}">
+	<div class="col-12 d-flex border-bottom pb-3 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
 		<div component="brand/wrapper" class="d-flex align-items-center gap-3 p-2 rounded-1 align-content-stretch ">
 			{{{ if brand:logo }}}
 			<a component="brand/anchor" href="{{{ if brand:logo:url }}}{brand:logo:url}{{{ else }}}{relative_path}/{{{ end }}}">