nodebb-theme-harmony 0.0.1 → 0.0.2

package/templates/partials/users_list.tpl

@@ -1,60 +1,11 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<ul id="users-container" class="users-container list-unstyled d-flex flex-wrap gap-2">
-{{{each users}}}
-<li class="users-box registered-user text-center pb-3" data-uid="{users.uid}" style="width: 102px;">
-	<a href="{config.relative_path}/user/{users.userslug}">{buildAvatar(users, "64px", true)}</a>
-
-	<div class="user-info">
-		<div class="text-nowrap text-truncate">
-			<span>
-				<i component="user/status" class="fa fa-circle status {users.status}" title="[[global:{users.status}]]"></i>
-				<a  href="{config.relative_path}/user/{users.userslug}">{users.username}</a>
-			</span>
-		</div>
-		<!-- IF section_online -->
-		<div class="lastonline">
-			<span class="timeago" title="{users.lastonlineISO}"></span>
-		</div>
-		<!-- ENDIF section_online -->
-
-		<!-- IF section_joindate -->
-		<div class="joindate">
-			<span class="timeago" title="{users.joindateISO}"></span>
-		</div>
-		<!-- ENDIF section_joindate -->
-
-		<!-- IF section_sort-reputation -->
-		<div class="reputation">
-			<i class="fa fa-star"></i>
-			<span class="formatted-number">{users.reputation}</span>
-		</div>
-		<!-- ENDIF section_sort-reputation -->
-
-		<!-- IF section_sort-posts -->
-		<div class="post-count">
-			<i class="fa fa-pencil"></i>
-			<span class="formatted-number">{users.postcount}</span>
-		</div>
-		<!-- ENDIF section_sort-posts -->
-
-		<!-- IF section_flagged -->
-		<div class="flag-count">
-			<i class="fa fa-flag"></i>
-			<span><a class="formatted-number" href="{config.relative_path}/flags?targetUid={users.uid}">{users.flags}</a></span>
-		</div>
-		<!-- ENDIF section_flagged -->
-	</div>
-</li>
-{{{end}}}
-<!-- IF anonymousUserCount -->
-<li class="users-box anon-user text-center pb-3" style="width: 102px;">
-	<span class="avatar avatar-rounded text-bg-secondary" component="avatar/icon" style="--avatar-size: 64px;">G</span>
-	<br/>
-	<div class="user-info">
-		<span id="online_anon_count">{anonymousUserCount}</span>
-		<span>[[global:guests]]</span>
-	</div>
-</li>
-<!-- ENDIF anonymousUserCount -->
-</ul>
+<div id="users-container" class="users-container row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-2">
+{{{ each users }}}
+	<a href="{config.relative_path}/user/{./userslug}" class="btn-ghost align-items-start">
+		{buildAvatar(@value, "48px", true)}
+		<div class="d-flex flex-1 flex-column">
+			<div class="fw-semibold">{./displayname}</div>
+			<div class="text-xs text-muted">@{./username}</div>
+		</div>
+	</a>
+{{{ end }}}
+</div>

package/templates/partials/users_list_menu.tpl

@@ -1,23 +1,15 @@
-<!-- THIS FILE IS STILL PERSONA -->
+<div component="user/list/menu" class="text-sm d-flex align-items-center gap-2">
+	<a class="btn-ghost fw-semibold" href="{config.relative_path}/users?section=online">[[global:online]]</a>
+
+	<a class="btn-ghost fw-semibold" href="{config.relative_path}/users?section=sort-posts">[[users:top_posters]]</a>
 
-<ul class="nav nav-pills">
-	<li class="nav-item">
-		<a class="nav-link" href="{config.relative_path}/users?section=online">[[global:online]]</a>
-	</li>
-	<li class="nav-item">
-		<a class="nav-link" href="{config.relative_path}/users?section=sort-posts">[[users:top_posters]]</a>
-	</li>
 	{{{ if !reputation:disabled }}}
-	<li class="nav-item">
-		<a class="nav-link" href="{config.relative_path}/users?section=sort-reputation">[[users:most_reputation]]</a>
-	</li>
+	<a class="btn-ghost fw-semibold" href="{config.relative_path}/users?section=sort-reputation">[[users:most_reputation]]</a>
 	{{{ end }}}
+
 	{{{ if isAdminOrGlobalMod }}}
-	<li class="nav-item">
-		<a class="nav-link" href="{config.relative_path}/users?section=flagged">[[users:most_flags]]</a>
-	</li>
-	<li class="nav-item">
-		<a class="nav-link" href="{config.relative_path}/users?section=banned">[[user:banned]]</a>
-	</li>
+	<a class="btn-ghost fw-semibold" href="{config.relative_path}/users?section=flagged">[[users:most_flags]]</a>
+
+	<a class="btn-ghost fw-semibold" href="{config.relative_path}/users?section=banned">[[user:banned]]</a>
 	{{{ end }}}
-</ul>
+</div>

package/templates/popular.tpl

@@ -1,5 +1,3 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- IMPORT partials/breadcrumbs.tpl -->
 <div data-widget-area="header">
 	{{{each widgets.header}}}
@@ -7,22 +5,7 @@
 	{{{end}}}
 </div>
 <div class="popular">
-	<div class="topic-list-header sticky-top btn-toolbar justify-content-between py-2 mb-2 gap-1">
-		<div class="d-flex gap-1 align-items-stretch">
-			{{{ if canPost }}}
-			<!-- IMPORT partials/buttons/newTopic.tpl -->
-			{{{ else }}}
-			<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
-			{{{ end }}}
-		</div>
-		<div class="d-flex gap-1 align-items-stretch">
-		<!-- IMPORT partials/topic-terms.tpl -->
-		<!-- IMPORT partials/topic-filters.tpl -->
-		<!-- IMPORT partials/category-filter-right.tpl -->
-		<!-- IMPORT partials/category/tools.tpl -->
-		</div>
-	</div>
-
+	<!-- IMPORT partials/topic-list-bar.tpl -->
 	<div class="category">
 		{{{ if !topics.length }}}
 		<div class="alert alert-warning" id="category-no-topics">[[recent:no_popular_topics]]</div>

package/templates/recent.tpl

@@ -1,39 +1,23 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- IMPORT partials/breadcrumbs.tpl -->
+
 <div data-widget-area="header">
 	{{{each widgets.header}}}
 	{{widgets.header.html}}
 	{{{end}}}
 </div>
+
 <div class="recent">
-	<div class="topic-list-header sticky-top btn-toolbar justify-content-between py-2 mb-2 gap-1">
-		<div class="d-flex gap-1 align-items-stretch">
-			{{{ if canPost }}}
-			<!-- IMPORT partials/buttons/newTopic.tpl -->
-			{{{ else }}}
-			<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
-			{{{ end }}}
-			<a href="{config.relative_path}/{selectedFilter.url}{querystring}" class="d-inline-block">
-				<div class="alert alert-warning h-100 m-0 px-2 py-1 d-flex align-items-center hide" id="new-topics-alert"></div>
-			</a>
-		</div>
-		<div class="d-flex gap-1 align-items-stretch">
-		<!-- IMPORT partials/topic-filters.tpl -->
-		<!-- IMPORT partials/category-filter-right.tpl -->
-		<!-- IMPORT partials/category/tools.tpl -->
-		</div>
-	</div>
+	<!-- IMPORT partials/topic-list-bar.tpl -->
 
 	<div class="category">
-		<!-- IF !topics.length -->
+		{{{ if !topics.length }}}
 		<div class="alert alert-warning" id="category-no-topics">[[recent:no_recent_topics]]</div>
-		<!-- ENDIF !topics.length -->
+		{{{ end }}}
 
 		<!-- IMPORT partials/topics_list.tpl -->
 
-		<!-- IF config.usePagination -->
-			<!-- IMPORT partials/paginator.tpl -->
-		<!-- ENDIF config.usePagination -->
+		{{{ if config.usePagination }}}
+		<!-- IMPORT partials/paginator.tpl -->
+		{{{ end }}}
 	</div>
 </div>

package/templates/register.tpl

@@ -1,80 +1,94 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<!-- IMPORT partials/breadcrumbs.tpl -->
 <div data-widget-area="header">
 	{{{each widgets.header}}}
 	{{widgets.header.html}}
 	{{{end}}}
 </div>
 <div class="row register">
-	<div class="row {{{ if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
-		<div class="{register_window:spansize}">
-			<div class="register-block">
-				<div class="alert alert-danger{{{ if !error }}} hidden{{{ end }}}" id="register-error-notify" >
-					<strong>[[error:registration-error]]</strong>
-					<p>{error}</p>
-				</div>
-				<form component="register/local" class="form-horizontal" role="form" action="{config.relative_path}/register" method="post">
-					<div class="row mb-3">
-						<label for="username" class="col-lg-2 col-form-label">[[register:username]]</label>
-						<div class="col-lg-10">
-							<input class="form-control" type="text" placeholder="[[register:username_placeholder]]" name="username" id="username" autocorrect="off" autocapitalize="off" autocomplete="off" />
-							<span class="register-feedback" id="username-notify"></span>
-							<span class="form-text">[[register:help.username_restrictions, {minimumUsernameLength}, {maximumUsernameLength}]]</span>
-						</div>
+	<div class="d-flex flex-column gap-2 {{{ if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
+		<h2 class="tracking-tight fw-semibold text-center">[[global:register]]</h2>
+		<div class="row justify-content-center gap-5">
+
+			<div class="col-12 col-md-3 px-md-0">
+				<div class="register-block">
+					<div class="alert alert-danger{{{ if !error }}} hidden{{{ end }}}" id="register-error-notify" >
+						<strong>[[error:registration-error]]</strong>
+						<p>{error}</p>
 					</div>
-					<div class="row mb-2">
-						<label for="password" class="col-lg-2 col-form-label">[[register:password]]</label>
-						<div class="col-lg-10">
-							<input class="form-control" type="password" placeholder="[[register:password_placeholder]]" name="password" id="password" />
-							<span class="register-feedback" id="password-notify"></span>
-							<span class="form-text">[[register:help.minimum_password_length, {minimumPasswordLength}]]</span>
-							<p id="caps-lock-warning" class="text-danger hidden">
-								<i class="fa fa-exclamation-triangle"></i> [[login:caps-lock-enabled]]
-							</p>
+
+					<form component="register/local" class="d-flex flex-column gap-3" role="form" action="{config.relative_path}/register" method="post">
+						<div class="mb-2 d-flex flex-column gap-2">
+							<label for="username">[[register:username]]</label>
+							<div class="d-flex flex-column">
+								<input class="form-control" type="text" placeholder="[[register:username_placeholder]]" name="username" id="username" autocorrect="off" autocapitalize="off" autocomplete="off" />
+								<span class="register-feedback text-xs text-danger" id="username-notify"></span>
+								<span class="form-text text-xs">[[register:help.username_restrictions, {minimumUsernameLength}, {maximumUsernameLength}]]</span>
+							</div>
 						</div>
-					</div>
-					<div class="row mb-2">
-						<label for="password-confirm" class="col-lg-2 col-form-label">[[register:confirm_password]]</label>
-						<div class="col-lg-10">
-							<input class="form-control" type="password" placeholder="[[register:confirm_password_placeholder]]" name="password-confirm" id="password-confirm" />
-							<span class="register-feedback" id="password-confirm-notify"></span>
+
+						<div class="mb-2 d-flex flex-column gap-2">
+							<label for="password">[[register:password]]</label>
+							<div class="d-flex flex-column">
+								<input class="form-control" type="password" placeholder="[[register:password_placeholder]]" name="password" id="password" />
+								<span class="register-feedback text-xs text-danger" id="password-notify"></span>
+								<span class="form-text text-xs">[[register:help.minimum_password_length, {minimumPasswordLength}]]</span>
+								<p id="caps-lock-warning" class="text-danger hidden">
+									<i class="fa fa-exclamation-triangle"></i> [[login:caps-lock-enabled]]
+								</p>
+							</div>
 						</div>
-					</div>
 
-					{{{each regFormEntry}}}
-					<div class="row mb-2">
-						<label for="register-{regFormEntry.styleName}" class="col-lg-2 col-form-label">{regFormEntry.label}</label>
-						<div id="register-{regFormEntry.styleName}" class="col-lg-10">
-							{{regFormEntry.html}}
+						<div class="mb-2 d-flex flex-column gap-2">
+							<label for="password-confirm">[[register:confirm_password]]</label>
+							<div>
+								<input class="form-control" type="password" placeholder="[[register:confirm_password_placeholder]]" name="password-confirm" id="password-confirm" />
+								<span class="register-feedback text-xs text-danger" id="password-confirm-notify"></span>
+							</div>
 						</div>
-					</div>
-					{{{end}}}
 
-					<div class="row">
-						<div class="offset-lg-2 col-lg-10">
-							<button class="btn btn-primary btn-lg" id="register" type="submit">[[register:register_now_button]]</button>
+						{{{ each regFormEntry }}}
+						<div class="mb-2 regFormEntry d-flex flex-column gap-2">
+							<label for="register-{regFormEntry.styleName}">{regFormEntry.label}</label>
+							<div id="register-{regFormEntry.styleName}">{{regFormEntry.html}}</div>
 						</div>
-					</div>
-					<input id="token" type="hidden" name="token" value="" />
-					<input id="noscript" type="hidden" name="noscript" value="true" />
-					<input type="hidden" name="_csrf" value="{config.csrf_token}" />
-				</form>
+						{{{ end }}}
+
+						<button class="btn btn-primary" id="register" type="submit">[[register:register_now_button]]</button>
+						<hr/>
+
+						<span class="text-sm">[[register:already-have-account]]</span>
+						<a class="btn btn-outline-light text-body" href="{config.relative_path}/login">[[global:login]]</a>
+
+						<input id="token" type="hidden" name="token" value="" />
+						<input id="noscript" type="hidden" name="noscript" value="true" />
+						<input type="hidden" name="_csrf" value="{config.csrf_token}" />
+					</form>
+				</div>
 			</div>
-		</div>
 
-		{{{ if alternate_logins }}}
-		<div class="col-md-6">
-			<div class="alt-register-block">
-				<h4>[[register:alternative_registration]]</h4>
-				<ul class="alt-logins">
-					{{{each authentication}}}
-					<li class="{authentication.name}"><a rel="nofollow noopener noreferrer" target="_top" href="{config.relative_path}{authentication.url}"><i class="fa {authentication.icon} fa-3x"></i></i></a></li>
-					{{{end}}}
-				</ul>
+			{{{ if alternate_logins }}}
+			<div class="col-12 col-md-3 px-md-0">
+				<div class="alt-register-block d-flex flex-column gap-2">
+					<label>[[register:alternative_registration]]</label>
+					<ul class="alt-logins list-unstyled">
+						{{{ each authentication }}}
+						<li class="{./name} mb-2">
+							<a class="btn btn-outline-light d-flex align-items-center" rel="nofollow noopener noreferrer" target="_top" href="{config.relative_path}{./url}">
+								{{{ if ./icons.svg }}}
+								{./icons.svg}
+								{{{ else }}}
+								<i class="{./icons.normal}" style="color:{./color};"></i>
+								{{{ end }}}
+								{{{ if ./labels.register }}}
+								<div class="flex-1 text-body text-sm">{./labels.register}</div>
+								{{{ end }}}
+							</a>
+						</li>
+						{{{ end }}}
+					</ul>
+				</div>
 			</div>
+			{{{ end }}}
 		</div>
-		{{{ end }}}
 	</div>
 	<div data-widget-area="sidebar" class="col-lg-3 col-sm-12 {{{ if !widgets.sidebar.length }}}hidden{{{ end }}}">
 		{{{each widgets.sidebar}}}

package/templates/tag.tpl

@@ -1,25 +1,13 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- IMPORT partials/breadcrumbs.tpl -->
+
 <div data-widget-area="header">
 	{{{each widgets.header}}}
 	{{widgets.header.html}}
 	{{{end}}}
 </div>
+
 <div class="tag">
-	<div class="topic-list-header sticky-top btn-toolbar justify-content-between py-2 mb-2 gap-1">
-		<div class="d-flex gap-1 align-items-stretch">
-			{{{ if loggedIn }}}
-			<!-- IMPORT partials/buttons/newTopic.tpl -->
-			{{{ else }}}
-			<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
-			{{{ end }}}
-		</div>
-		<div class="d-flex gap-1 align-items-stretch">
-		<!-- IMPORT partials/category-filter-right.tpl -->
-		<!-- IMPORT partials/category/tools.tpl -->
-		</div>
-	</div>
+	<!-- IMPORT partials/topic-list-bar.tpl -->
 
 	<div class="category">
 		{{{ if !topics.length }}}

package/templates/tags.tpl

@@ -1,5 +1,3 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- IMPORT partials/breadcrumbs.tpl -->
 <div data-widget-area="header">
 	{{{each widgets.header}}}
@@ -7,13 +5,14 @@
 	{{{end}}}
 </div>
 <div class="tags">
+	<h2 class="fw-semibold">[[pages:tags]]</h2>
 	{{{ if displayTagSearch }}}
 	{{{ if tags.length }}}
 	<div class="row justify-content-end mb-3">
 		<div class="col-lg-3">
 			<div class="input-group">
-				<input type="text" class="form-control" placeholder="[[global:search]]" id="tag-search">
-				<button class="btn btn-primary" type="button">
+				<input type="text" class="form-control form-control-sm" placeholder="[[global:search]]" id="tag-search">
+				<button class="btn btn-primary btn-sm" type="button">
 					<i class="fa fa-search"></i>
 				</button>
 			</div>

package/templates/top.tpl

@@ -1,5 +1,3 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- IMPORT partials/breadcrumbs.tpl -->
 <div data-widget-area="header">
 	{{{each widgets.header}}}
@@ -7,22 +5,7 @@
 	{{{end}}}
 </div>
 <div class="top">
-	<div class="topic-list-header sticky-top btn-toolbar justify-content-between py-2 mb-2 gap-1">
-		<div class="d-flex gap-1 align-items-stretch">
-			{{{ if canPost }}}
-			<!-- IMPORT partials/buttons/newTopic.tpl -->
-			{{{ else }}}
-			<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
-			{{{ end }}}
-		</div>
-		<div class="d-flex gap-1 align-items-stretch">
-		<!-- IMPORT partials/topic-terms.tpl -->
-		<!-- IMPORT partials/topic-filters.tpl -->
-		<!-- IMPORT partials/category-filter-right.tpl -->
-		<!-- IMPORT partials/category/tools.tpl -->
-		</div>
-	</div>
-
+	<!-- IMPORT partials/topic-list-bar.tpl -->
 	<div class="category">
 		{{{ if !topics.length }}}
 		<div class="alert alert-warning" id="category-no-topics">[[top:no_top_topics]]</div>

package/templates/topic.tpl

@@ -1,50 +1,48 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
+{{{ if widgets.header.length }}}
 <div data-widget-area="header">
 	{{{each widgets.header}}}
 	{{widgets.header.html}}
 	{{{end}}}
 </div>
-<div class="row">
-	<div class="topic {{{ if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
-		<div class="topic-header sticky-top">
-			<h1 component="post/header" class="" itemprop="name">
-				<span class="topic-title">
-					<span component="topic/labels">
-						<i component="topic/scheduled" class="fa fa-clock-o {{{ if !scheduled }}}hidden{{{ end }}}" title="[[topic:scheduled]]"></i>
-						<i component="topic/pinned" class="fa fa-thumb-tack {{{ if (scheduled || !pinned) }}}hidden{{{ end }}}" title="{{{ if !pinExpiry }}}[[topic:pinned]]{{{ else }}}[[topic:pinned-with-expiry, {pinExpiryISO}]]{{{ end }}}"></i>
-						<i component="topic/locked" class="fa fa-lock {{{ if !locked }}}hidden{{{ end }}}" title="[[topic:locked]]"></i>
-						<i class="fa fa-arrow-circle-right {{{ if !oldCid }}}hidden{{{ end }}}" title="{{{ if privileges.isAdminOrMod }}}[[topic:moved-from, {oldCategory.name}]]{{{ else }}}[[topic:moved]]{{{ end }}}"></i>
-						{{{each icons}}}<span class="align-middle">{@value}</span>{{{end}}}
-					</span>
-					<span component="topic/title">{title}</span>
-				</span>
-			</h1>
+{{{ end }}}
 
-			<div class="topic-info clearfix">
-				<div class="category-item d-inline-block">
-					{buildCategoryIcon(category, "24px", "rounded-circle")}
-					<a href="{config.relative_path}/category/{category.slug}">{category.name}</a>
-				</div>
+<!-- IMPORT partials/breadcrumbs.tpl -->
 
-				<div class="tags tag-list d-inline-block hidden-xs">
-					<!-- IMPORT partials/topic/tags.tpl -->
-				</div>
-				<div class="d-inline-block hidden-xs">
-					<!-- IMPORT partials/topic/stats.tpl -->
-				</div>
-				{{{ if !feeds:disableRSS }}}
-				{{{ if rssFeedUrl }}}<a class="hidden-xs" target="_blank" href="{rssFeedUrl}"><i class="fa fa-rss-square"></i></a>{{{ end }}}
-				{{{ end }}}
-				{{{ if browsingUsers }}}
-				<div class="d-inline-block hidden-xs">
-				<!-- IMPORT partials/topic/browsing-users.tpl -->
-				</div>
-				{{{ end }}}
+<h2 component="post/header" class="fs-2 mb-1 {{{ if config.centerHeaderElements }}}text-center{{{ end }}}" itemprop="name">
+	<span class="topic-title" component="topic/title">{title}</span>
+</h2>
+
+<div class="topic-info d-flex gap-2 align-items-center flex-wrap {{{ if config.centerHeaderElements }}}justify-content-center{{{ end }}}">
+	<span component="topic/labels" class="d-flex gap-2">
+		<span component="topic/scheduled" class="badge badge border border-gray-300 text-primary {{{ if !scheduled }}}hidden{{{ end }}}">
+			<i class="fa fa-clock-o"></i>
+			[[topic:scheduled]]
+		</span>
+		<span component="topic/pinned" class="badge badge border border-gray-300 text-primary {{{ if (scheduled || !pinned) }}}hidden{{{ end }}}">
+			<i class="fa fa-thumb-tack"></i>
+			{{{ if !pinExpiry }}}[[topic:pinned]]{{{ else }}}[[topic:pinned-with-expiry, {pinExpiryISO}]]{{{ end }}}
+		</span>
+		<span component="topic/locked" class="badge badge border border-gray-300 text-primary {{{ if !locked }}}hidden{{{ end }}}">
+			<i class="fa fa-lock"></i>
+			[[topic:locked]]
+		</span>
+		<span class="badge badge border border-gray-300 text-primary {{{ if !oldCid }}}hidden{{{ end }}}">
+			<i class="fa fa-arrow-circle-right"></i>
+			{{{ if privileges.isAdminOrMod }}}[[topic:moved-from, {oldCategory.name}]]{{{ else }}}[[topic:moved]]{{{ end }}}
+		</span>
+		{{{each icons}}}<span class="align-middle">{@value}</span>{{{end}}}
+	</span>
+	<a class="lh-1" href="{config.relative_path}/category/{category.slug}">{function.buildCategoryLabel, category, "border"}</a>
+	<div class="lh-1 tags tag-list d-flex hidden-xs gap-2"><!-- IMPORT partials/topic/tags.tpl --></div>
+	<div class="d-flex hidden-xs gap-2">
+		<!-- IMPORT partials/topic/stats.tpl -->
+	</div>
+</div>
+
+<div class="row">
+	<div class="topic {{{ if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
+		<!-- IMPORT partials/post_bar.tpl -->
 
-				<!-- IMPORT partials/post_bar.tpl -->
-			</div>
-		</div>
 		{{{ if merger }}}
 		<!-- IMPORT partials/topic/merged-message.tpl -->
 		{{{ end }}}
@@ -53,9 +51,9 @@
 		<!-- IMPORT partials/topic/deleted-message.tpl -->
 		{{{ end }}}
 
-		<ul component="topic" class="posts timeline" data-tid="{tid}" data-cid="{cid}">
+		<ul component="topic" class="posts timeline mt-sm-4 p-0 py-3" data-tid="{tid}" data-cid="{cid}">
 			{{{each posts}}}
-				<li component="post" class="{{{ if posts.deleted }}}deleted{{{ end }}} {{{ if posts.selfPost }}}self-post{{{ end }}} {{{ if posts.topicOwnerPost }}}topic-owner-post{{{ end }}}" <!-- IMPORT partials/data/topic.tpl -->>
+				<li component="post" class="pt-4 {{{ if posts.deleted }}}deleted{{{ end }}} {{{ if posts.selfPost }}}self-post{{{ end }}} {{{ if posts.topicOwnerPost }}}topic-owner-post{{{ end }}}" <!-- IMPORT partials/data/topic.tpl -->>
 					<a component="post/anchor" data-index="{posts.index}" id="{posts.index}"></a>
 
 					<meta itemprop="datePublished" content="{posts.timestampISO}">
@@ -85,8 +83,6 @@
 		{{{ if config.usePagination }}}
 		<!-- IMPORT partials/paginator.tpl -->
 		{{{ end }}}
-
-		<!-- IMPORT partials/topic/navigator.tpl -->
 	</div>
 	<div data-widget-area="sidebar" class="col-lg-3 col-sm-12 {{{ if !widgets.sidebar.length }}}hidden{{{ end }}}">
 		{{{each widgets.sidebar}}}

package/templates/unread.tpl

@@ -1,5 +1,3 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- IMPORT partials/breadcrumbs.tpl -->
 <div data-widget-area="header">
 	{{{each widgets.header}}}
@@ -7,26 +5,7 @@
 	{{{end}}}
 </div>
 <div class="unread">
-	<div class="topic-list-header sticky-top btn-toolbar justify-content-between py-2 mb-2 gap-1">
-		<div class="d-flex gap-1 align-items-stretch">
-			<!-- IMPORT partials/buttons/newTopic.tpl -->
-			<a href="{config.relative_path}/{selectedFilter.url}{querystring}" class="d-inline-block">
-				<div class="alert alert-warning h-100 m-0 px-2 py-1 d-flex align-items-center hide" id="new-topics-alert"></div>
-			</a>
-		</div>
-
-		<div class="d-flex gap-1 align-items-stretch">
-		<!-- IMPORT partials/topic-filters.tpl -->
-		<!-- IMPORT partials/category-filter-right.tpl -->
-
-		<div class="markread btn-group {{{ if !topics.length }}}hidden{{{ end }}}">
-			<!-- IMPORT partials/category-selector-right.tpl -->
-		</div>
-
-		<!-- IMPORT partials/category/tools.tpl -->
-		</div>
-	</div>
-
+	<!-- IMPORT partials/topic-list-bar.tpl -->
 	<div class="category">
 		<div id="category-no-topics" class="alert alert-warning {{{ if topics.length }}}hidden{{{ end }}}">[[unread:no_unread_topics]]</div>
 

package/templates/users.tpl

@@ -1,5 +1,3 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- IMPORT partials/breadcrumbs.tpl -->
 <div data-widget-area="header">
 	{{{each widgets.header}}}
@@ -7,28 +5,30 @@
 	{{{end}}}
 </div>
 <div class="users">
-	<div class="row mb-3">
+	<h2 class="fw-semibold">[[global:users]]</h2>
+	<div class="row justify-content-between">
 		<div class="col-lg-6">
 		<!-- IMPORT partials/users_list_menu.tpl -->
 		</div>
-		<div class="col-3 text-end">
-			<!-- IF showInviteButton -->
-			<button component="user/invite" class="btn btn-success"><i class="fa fa-users"></i> [[users:invite]]</button>
-			<!-- ENDIF showInviteButton -->
-		</div>
-		<!-- IF displayUserSearch -->
-		<div class="col-lg-3 col-9">
-			<div class="search">
-				<div class="input-group">
-					<input class="form-control" id="search-user" type="text" placeholder="[[global:search]]"/>
-					<button class="btn btn-primary" type="button">
-						<i component="user/search/icon" class="fa fa-search"></i>
-					</button>
+		<div class="col-lg-6 text-end">
+			<div class="d-flex justify-content-end gap-2">
+				{{{ if showInviteButton }}}
+				<button component="user/invite" class="btn btn-success btn-sm"><i class="fa fa-users"></i> [[users:invite]]</button>
+				{{{ end }}}
+				{{{ if displayUserSearch }}}
+				<div class="search">
+					<div class="input-group">
+						<input class="form-control form-control-sm" id="search-user" type="text" placeholder="[[global:search]]"/>
+						<button class="btn btn-primary btn-sm" type="button">
+							<i component="user/search/icon" class="fa fa-search"></i>
+						</button>
+					</div>
 				</div>
+				{{{ end }}}
 			</div>
 		</div>
-		<!-- ENDIF displayUserSearch -->
 	</div>
+	<hr/>
 
 	<!-- IMPORT partials/users_list.tpl -->