nodebb-theme-harmony 0.0.1 → 0.0.2

package/templates/groups/details.tpl

@@ -1,79 +1,93 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<div component="groups/container" class="groups details row">
-	<div component="groups/cover" style="background-image: url({group.cover:url}); background-position: {group.cover:position};">
-		<!-- IF group.isOwner -->
-		<div class="controls">
-			<span class="upload"><i class="fa fa-fw fa-4x fa-upload"></i></span>
-			<span class="resize"><i class="fa fa-fw fa-4x fa-arrows"></i></span>
-			<span class="remove"><i class="fa fa-fw fa-4x fa-times"></i></span>
+<div component="groups/container" class="groups details">
+	<div class="cover position-absolute start-0 top-0" component="groups/cover" style="background-image: url({group.cover:url}); background-position: {group.cover:position};">
+		<div class="container">
+			{{{ if group.isOwner }}}
+			<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>
+			<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 }}}
 		</div>
-		<div class="save">[[groups:cover-save]] <i class="fa fa-fw fa-floppy-o"></i></div>
-		<div class="indicator">[[groups:cover-saving]] <i class="fa fa-fw fa-refresh fa-spin"></i></div>
-		<!-- ENDIF group.isOwner -->
 	</div>
 
-	<div class="col-12">
+	<div class="my-2">
 		<!-- IMPORT partials/breadcrumbs.tpl -->
 	</div>
 
-	<div class="col-lg-4 col-12">
-		<div class="card mb-3">
-			<div class="card-header">
-				<span class="fs-5">
-					<i class="fa fa-list-ul"></i> [[groups:details.title]]
-					<!-- IF group.private --><span class="badge bg-info text-dark">[[groups:details.private]]</span><!-- ENDIF group.private -->
-					<!-- IF group.hidden --><span class="badge bg-info text-dark">[[groups:details.hidden]]</span>&nbsp;<!-- ENDIF group.hidden -->
-				</span>
+	<div class="d-flex flex-column mb-2">
+		<div class="d-flex justify-content-between align-items-center">
+			<div class="d-flex align-items-center gap-2">
+				<h2 class="mb-0">{group.displayName}</h2>
+				{{{ if group.private }}}<span class="badge text-bg-info">[[groups:details.private]]</span>{{{ end }}}
+				{{{ if group.hidden }}}<span class="badge text-bg-info">[[groups:details.hidden]]</span>{{{ end }}}
 			</div>
-			<div class="card-body">
-				<h2>{group.displayName}</h2>
-				<p>{group.descriptionParsed}</p>
-				<!-- IF isAdmin -->
-				<div class="float-end">
-					<a href="{config.relative_path}/admin/manage/groups/{group.nameEncoded}" target="_blank" class="btn btn-info"><i class="fa fa-gear"></i> [[user:edit]]</a>
-				</div>
-				<!-- ENDIF isAdmin -->
-				<!-- IF loggedIn -->
-				<div class="float-end">
-					{function.membershipBtn, group}&nbsp;
-				</div>
-				<!-- ENDIF loggedIn -->
+
+			<div>
+				{{{ if loggedIn }}}
+				{function.membershipBtn, group}
+				{{{ end }}}
+				{{{ if isAdmin }}}
+				<a href="{config.relative_path}/admin/manage/groups/{group.nameEncoded}" target="_blank" class="btn btn-light"><i class="fa fa-gear"></i> [[user:edit]]</a>
+				{{{ end }}}
 			</div>
 		</div>
+		{group.descriptionParsed}
+	</div>
 
-		<div class="card mb-3">
-			<div class="card-header">
-				<span class="fs-5">
-					<i class="fa fa-users"></i> [[groups:details.members]]
-				</span>
+	<div class="row">
+		<!-- IMPORT partials/groups/sidebar-left.tpl -->
+
+		<div class="col-12 col-md-9 col-lg-10 ps-md-5">
+
+			<div class="tab-content">
+				<div class="tab-pane fade show active" id="groups-posts" role="tabpanel">
+					<h3 class="fw-semibold fs-5 mb-0">[[global:posts]]</h3>
+					{{{ if !posts.length }}}
+					<div class="alert alert-info">[[groups:details.has_no_posts]]</div>
+					{{{ end }}}
+					<!-- IMPORT partials/posts_list.tpl -->
+				</div>
+				<div class="tab-pane fade" id="groups-members" role="tabpanel">
+					<h3 class="fw-semibold fs-5 mb-3">[[groups:details.members]]</h3>
+
+					<!-- IMPORT partials/groups/memberlist.tpl -->
+				</div>
+				{{{ if group.isOwner }}}
+				<div class="tab-pane fade" id="groups-pending" role="tabpanel">
+					<h3 class="fw-semibold fs-5 mb-3">[[groups:details.pending]]</h3>
+					<!-- IMPORT partials/groups/pending.tpl -->
+				</div>
+
+				<div class="tab-pane fade" id="groups-invited" role="tabpanel">
+					<h3 class="fw-semibold fs-5 mb-3">[[groups:details.invited]]</h3>
+					<!-- IMPORT partials/groups/invited.tpl -->
+				</div>
+
+				<div class="tab-pane fade" id="groups-admin" role="tabpanel">
+					<h3 class="fw-semibold fs-5 mb-3">[[groups:details.owner_options]]</h3>
+					<!-- IMPORT partials/groups/admin.tpl -->
+				</div>
+				{{{ end }}}
 			</div>
-			<div class="card-body">
-				<!-- IMPORT partials/groups/memberlist.tpl -->
+
+			<div data-widget-area="left">
+				{{{each widgets.left}}}
+				{{widgets.left.html}}
+				{{{end}}}
 			</div>
 		</div>
+		<div class="col-lg-8 col-12">
+			<div class="col-lg-11">
 
-		<!-- IF group.isOwner -->
-		<!-- IMPORT partials/groups/admin.tpl -->
-		<!-- ENDIF group.isOwner -->
-
-		<div data-widget-area="left">
-			{{{each widgets.left}}}
-			{{widgets.left.html}}
-			{{{end}}}
-		</div>
-	</div>
-	<div class="col-lg-8 col-12">
-		<div class="col-lg-11">
-			<!-- IF !posts.length -->
-			<div class="alert alert-info">[[groups:details.has_no_posts]]</div>
-			<!-- ENDIF !posts.length -->
-			<!-- IMPORT partials/posts_list.tpl -->
-		</div>
-		<div data-widget-area="right">
-			{{{each widgets.right}}}
-			{{widgets.right.html}}
-			{{{end}}}
+			</div>
+			<div data-widget-area="right">
+				{{{each widgets.right}}}
+				{{widgets.right.html}}
+				{{{end}}}
+			</div>
 		</div>
 	</div>
 </div>

package/templates/groups/list.tpl

@@ -1,5 +1,3 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- IMPORT partials/breadcrumbs.tpl -->
 <div data-widget-area="header">
 	{{{each widgets.header}}}
@@ -7,25 +5,32 @@
 	{{{end}}}
 </div>
 <div class="groups list">
+	<h2 class="fw-semibold">[[pages:groups]]</h2>
 	<div class="row justify-content-between">
 		<div class="col-lg-6">
-			<!-- IF allowGroupCreation -->
-			<button class="btn btn-primary" data-action="new"><i class="fa fa-plus"></i> [[groups:new_group]]</button>
-			<!-- ENDIF allowGroupCreation -->
+			<div class="text-sm d-flex align-items-center gap-2">
+				[[topic:sort_by]]
+				<a href="?sort=alpha" class="btn-ghost fw-semibold {{{ if (sort == "alpha") }}}active{{{ end }}}">[[groups:details.group_name]]</a>
+				<a href="?sort=count" class="btn-ghost fw-semibold {{{ if (sort == "count") }}}active{{{ end }}}">[[groups:details.member_count]]</a>
+				<a href="?sort=date" class="btn-ghost fw-semibold {{{ if (sort == "date") }}}active{{{ end }}}">[[groups:details.creation_date]]</a>
+			</div>
 		</div>
 		<div class="col-lg-6">
-			<div class="row justify-content-end">
-				<div class="col-5 col-md-6">
-					<select class="form-select" id="search-sort">
+			<div class="d-flex justify-content-end gap-2">
+				<div class="">
+					{{{ if allowGroupCreation }}}
+					<button class="btn btn-primary btn-sm" data-action="new"><i class="fa fa-plus"></i> [[groups:new_group]]</button>
+					{{{ end }}}
+					<select class="form-select hidden" id="search-sort">
 						<option value="alpha">[[groups:details.group_name]]</option>
 						<option value="count">[[groups:details.member_count]]</option>
 						<option value="date">[[groups:details.creation_date]]</option>
 					</select>
 				</div>
-				<div class="col-7 col-md-6">
+				<div class="">
 					<div class="input-group">
-						<input type="text" class="form-control" placeholder="[[global:search]]" name="query" value="" id="search-text">
-						<button id="search-button" class="btn btn-primary">
+						<input type="text" class="form-control form-control-sm" placeholder="[[global:search]]" name="query" id="search-text">
+						<button id="search-button" class="btn btn-primary btn-sm">
 							<i class="fa fa-search"></i>
 						</button>
 					</div>

package/templates/header.tpl

@@ -1,5 +1,3 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!DOCTYPE html>
 <html lang="{function.localeToHTML, userLang, defaultLang}" {{{if languageDirection}}}data-dir="{languageDirection}" style="direction: {languageDirection};"{{{end}}}>
 <head>
@@ -26,24 +24,39 @@
 </head>
 
 <body class="{bodyClass} skin-{{{if bootswatchSkin}}}{bootswatchSkin}{{{else}}}noskin{{{end}}}">
-	<nav id="menu" class="slideout-menu hidden">
-		<!-- IMPORT partials/slideout-menu.tpl -->
-	</nav>
-	<nav id="chats-menu" class="slideout-menu hidden">
-		<!-- IMPORT partials/chats-menu.tpl -->
-	</nav>
+	<div class="d-flex justify-content-between pb-4 pb-md-0">
+		<!-- IMPORT partials/sidebar-left.tpl -->
+
+		<main id="panel" class="d-flex flex-column gap-3 flex-grow-1 mt-3">
+			{{{ 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 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 }}}">
+							<img component="brand/logo" alt="{brand:logo:alt}" class="{brand:logo:display}" src="{brand:logo}?{config.cache-buster}" />
+						</a>
+						{{{ end }}}
 
-	<main id="panel" class="slideout-panel">
-		<nav class="navbar sticky-top navbar-expand-lg bg-light header border-bottom" id="header-menu" component="navbar">
-			<div class="container justify-content-start flex-nowrap">
-				<!-- IMPORT partials/menu.tpl -->
+						{{{ if config.showSiteTitle }}}
+						<a component="siteTitle" class="text-truncate align-self-stretch align-items-center d-flex" href="{{{ if title:url }}}{title:url}{{{ else }}}{relative_path}/{{{ end }}}">
+							<h1 class="fs-6 fw-bold text-body mb-0">{config.siteTitle}</h1>
+						</a>
+						{{{ end }}}
+					</div>
+				</div>
 			</div>
-		</nav>
-		<script>
-			const rect = document.getElementById('header-menu').getBoundingClientRect();
-			const offset = Math.max(0, rect.bottom);
-			document.documentElement.style.setProperty('--panel-offset', offset + `px`);
-		</script>
-		<div class="container pt-3" id="content">
-		<!-- IMPORT partials/noscript/warning.tpl -->
-		<!-- IMPORT partials/noscript/message.tpl -->
+			{{{ end }}}
+			<script>
+				const headerEl = document.getElementById('header-menu');
+				if (headerEl) {
+					const rect = headerEl.getBoundingClientRect();
+					const offset = Math.max(0, rect.bottom);
+					document.documentElement.style.setProperty('--panel-offset', offset + `px`);
+				} else {
+					document.documentElement.style.setProperty('--panel-offset', `0px`);
+				}
+			</script>
+			<div class="container d-flex flex-column gap-2" id="content">
+			<!-- IMPORT partials/noscript/warning.tpl -->
+			<!-- IMPORT partials/noscript/message.tpl -->

package/templates/login.tpl

@@ -1,16 +1,14 @@
-<!-- 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 login">
-	<div class="{{{ if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
-		<div class="row">
+	<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:login]]</h2>
+		<div class="row justify-content-center gap-5">
 			{{{ if allowLocalLogin }}}
-			<div class="{{{ if alternate_logins }}}col-md-6{{{ else }}}col-md-12{{{ end }}}">
+			<div class="col-12 col-md-3 px-md-0">
 				<div class="login-block">
 					<div class="alert alert-danger alert-dismissible" id="login-error-notify" {{{ if error }}}style="display:block"{{{ else }}}style="display: none;"{{{ end }}}>
 						<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
@@ -18,67 +16,75 @@
 						<p>{error}</p>
 					</div>
 
-					<form class="form-horizontal" role="form" method="post" id="login-form">
-						<div class="row mb-2">
-							<label for="username" class="col-lg-2 col-form-label">{allowLoginWith}</label>
-							<div class="col-lg-10">
+					<form class="d-flex flex-column gap-3" role="form" method="post" id="login-form">
+						<div class="mb-2 d-flex flex-column gap-2">
+							<label for="username">{allowLoginWith}</label>
+							<div>
 								<input class="form-control" type="text" placeholder="{allowLoginWith}" name="username" id="username" autocorrect="off" autocapitalize="off" value="{username}"/>
 							</div>
 						</div>
-						<div class="row mb-2">
-							<label for="password" class="col-lg-2 col-form-label">[[user:password]]</label>
-							<div class="col-lg-10">
+						<div class="mb-2 d-flex flex-column gap-2">
+							<div class="d-flex justify-content-between align-items-center">
+								<label for="password">[[user:password]]</label>
+								{{{ if allowPasswordReset }}}
+								<a id="reset-link" class="text-sm text-reset text-decoration-underline" href="{config.relative_path}/reset">[[login:forgot_password]]</a>
+								{{{ end }}}
+							</div>
+							<div>
 								<input class="form-control" type="password" placeholder="[[user:password]]" name="password" id="password" {{{ if username }}}autocomplete="off"{{{ end }}}/>
 								<p id="caps-lock-warning" class="text-danger hidden">
 									<i class="fa fa-exclamation-triangle"></i> [[login:caps-lock-enabled]]
 								</p>
 							</div>
 						</div>
-						<div class="row mb-2">
-							<div class="col-lg-10 offset-lg-2">
-								<div class="checkbox">
-									<label>
-										<input type="checkbox" name="remember" id="remember" checked /> [[login:remember_me]]
-									</label>
-								</div>
+						<div class="mb-2">
+							<div class="checkbox">
+								<label>
+									<input type="checkbox" name="remember" id="remember" checked /> [[login:remember_me]]
+								</label>
 							</div>
 						</div>
 						{{{each loginFormEntry}}}
-						<div class="row mb-2 loginFormEntry">
-							<label for="login-{loginFormEntry.styleName}" class="col-lg-2 col-form-label">{loginFormEntry.label}</label>
-							<div id="login-{loginFormEntry.styleName}" class="col-lg-10">{{loginFormEntry.html}}</div>
+						<div class="mb-2 loginFormEntry d-flex flex-column gap-2">
+							<label for="login-{loginFormEntry.styleName}">{loginFormEntry.label}</label>
+							<div id="login-{loginFormEntry.styleName}">{{loginFormEntry.html}}</div>
 						</div>
 						{{{end}}}
+
 						<input type="hidden" name="_csrf" value="{config.csrf_token}" />
 						<input type="hidden" name="noscript" id="noscript" value="true" />
-						<div class="row">
-							<div class="col-lg-10 offset-lg-2">
-								<button class="btn btn-primary btn-lg" id="login" type="submit">[[global:login]]</button>
-							</div>
-						</div>
-						<div class="row">
-							<div class="col-lg-10 offset-lg-2">
-								{{{ if allowRegistration }}}
-								<span>[[login:dont_have_account]] <a href="{config.relative_path}/register">[[register:register]]</a></span>
-								{{{ end }}}
-								{{{ if allowPasswordReset }}}
-								<a id="reset-link" href="{config.relative_path}/reset">[[login:forgot_password]]</a>
-								{{{ end }}}
-							</div>
-						</div>
+
+						<button class="btn btn-primary" id="login" type="submit">[[global:login]]</button>
+
+						<hr/>
+
+						{{{ if allowRegistration }}}
+						<span class="text-sm">[[login:dont_have_account]]</span>
+						<a class="btn btn-outline-light text-body" href="{config.relative_path}/register">[[register:register]]</a>
+						{{{ end }}}
 					</form>
 				</div>
 			</div>
 			{{{ end }}}
 
 			{{{ if alternate_logins }}}
-			<div class="{{{ if allowLocalLogin }}}col-md-6{{{ else }}}col-md-12{{{ end }}}">
-				<div class="alt-login-block">
-					<h4>[[login:alternative_logins]]</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></a></li>
-						{{{end}}}
+			<div class="col-12 col-md-3 px-md-0">
+				<div class="alt-login-block d-flex flex-column gap-2">
+					<label>[[login:alternative_logins]]</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.login }}}
+								<div class="flex-1 text-body text-sm">{./labels.login}</div>
+								{{{ end }}}
+							</a></li>
+						{{{ end }}}
 					</ul>
 				</div>
 			</div>

package/templates/partials/account/admin-menu.tpl

@@ -0,0 +1,36 @@
+<div class="btn-group bottom-sheet">
+	<button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+		<i class="fa fa-gear fa-fw"></i>
+	</button>
+	<ul class="dropdown-menu dropdown-menu-end account-sub-links">
+		<li>
+			<a class="dropdown-item" href="{config.relative_path}/user/{userslug}/info">[[user:account_info]]</a>
+		</li>
+		{{{ if (canBan || canMute) }}}
+		<li role="separator" class="dropdown-divider"></li>
+		{{{ end }}}
+		{{{ if canBan }}}
+		<li class="{{{ if banned }}}hide{{{ end }}}">
+			<a class="dropdown-item" component="account/ban" href="#">[[user:ban_account]]</a>
+		</li>
+		<li class="{{{ if !banned }}}hide{{{ end }}}">
+			<a class="dropdown-item" component="account/unban" href="#">[[user:unban_account]]</a>
+		</li>
+		{{{ end }}}
+		{{{ if canMute }}}
+		<li class="{{{ if muted }}}hide{{{ end }}}">
+			<a class="dropdown-item" component="account/mute" href="#">[[user:mute_account]]</a>
+		</li>
+		<li class="{{{ if !muted }}}hide{{{ end }}}">
+			<a class="dropdown-item" component="account/unmute" href="#">[[user:unmute_account]]</a>
+		</li>
+		{{{ end }}}
+		{{{ if isAdmin }}}
+		<li>
+			<a component="account/delete-account" href="#" class="dropdown-item">[[user:delete_account_as_admin]]</a>
+			<a component="account/delete-content" href="#" class="dropdown-item">[[user:delete_content]]</a>
+			<a component="account/delete-all" href="#" class="dropdown-item">[[user:delete_all]]</a>
+		</li>
+		{{{ end }}}
+	</ul>
+</div>

package/templates/partials/account/category-item.tpl

@@ -1,25 +1,25 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<li component="categories/category" data-cid="{../cid}" data-parent-cid="{../parentCid}" class="row clearfix">
-	<meta itemprop="name" content="{../name}">
-
+<li component="categories/category" data-cid="{./cid}" class="row category-{./cid} mb-4">
+	<meta itemprop="name" content="{./name}">
 	<div class="content col-10 depth-{../depth}">
-		<div class="float-start">
-		{buildCategoryIcon(@value, "48px", "rounded-circle")}
-		</div>
+		<div class="d-flex">
+			<div class="fs-3">
+				{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="ms-3">
+				<h3 class="title">
+					<!-- IMPORT partials/categories/link.tpl -->
+				</h3>
+				<!-- description -->
+				<div class="mb-2">
+					{{{ if ../descriptionParsed }}}
+					<div class="description text-muted">{../descriptionParsed}</div>
+					{{{ end }}}
+				</div>
 			</div>
-			<!-- ENDIF ../descriptionParsed -->
 		</div>
 	</div>
 	<div class="col-2">
-	<!-- IMPORT partials/category/watch.tpl -->
+		<!-- IMPORT partials/category/watch.tpl -->
 	</div>
 </li>

package/templates/partials/account/header.tpl

@@ -1,48 +1,90 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<!-- IMPORT partials/breadcrumbs.tpl -->
-
 <div data-widget-area="header">
 	{{{each widgets.header}}}
 	{{widgets.header.html}}
 	{{{end}}}
 </div>
 
-<div class="cover" component="account/cover" style="background-image: url({cover:url}); background-position: {cover:position};">
-	<div class="avatar-wrapper" data-uid="{uid}">
-		<!-- IF picture -->
-		<img src="{picture}" class="avatar avatar-rounded" style="--avatar-size: 128px;" />
-		<!-- ELSE -->
-		<div class="avatar avatar-rounded" style="background-color: {icon:bgColor}; --avatar-size: 128px;" title="{username}">{icon:text}</div>
-		<!-- ENDIF picture -->
-		<i component="user/status" class="fa fa-circle status {status}" title="[[global:{status}]]"></i>
+<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>
+		<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>
 
-		<!-- IF loggedIn -->
-		<!-- IF !isSelf -->
-		<button class="btn-morph persona-fab <!-- IF isFollowing -->heart<!-- ELSE -->plus<!-- ENDIF isFollowing -->" title="<!-- IF isFollowing -->[[global:unfollow]]<!-- ELSE -->[[global:follow]]<!-- ENDIF isFollowing -->">
-			<span>
-				<span class="s1"></span>
-				<span class="s2"></span>
-				<span class="s3"></span>
-			</span>
-		</button>
-		<!-- ENDIF !isSelf -->
-		<!-- ENDIF loggedIn -->
+<div class="d-flex gap-2 w-100 mb-4 mt-2">
+	<div class="avatar-wrapper border-4 position-relative align-self-start d-none d-md-block" style="margin-top: -60px;">
+		{{{ 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-1 flex-column gap-2">
+		<!-- IMPORT partials/breadcrumbs.tpl -->
+		<div class="d-grid gap-1">
+			<h2 class="fullname fw-semibold fs-3">{{{ 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="container">
-		<!-- IMPORT partials/account/menu.tpl -->
+			{{{ 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>
 
-		<!-- IF allowCoverPicture -->
-		<!-- IF canEdit -->
-		<div class="controls">
-			<span class="upload"><i class="fa fa-fw fa-4x fa-upload"></i></span>
-			<span class="resize"><i class="fa fa-fw fa-4x fa-arrows"></i></span>
-			<span class="remove"><i class="fa fa-fw fa-4x fa-times"></i></span>
+	<div class="d-flex gap-1 align-self-start">
+		{{{ if loggedIn }}}
+		{{{ if !isSelf }}}
+		<a component="account/unfollow" href="#" class="btn btn-info{{{ if !isFollowing }}} hide{{{ end }}}">[[user:unfollow]]</a>
+		<a component="account/follow" href="#" class="btn btn-primary{{{ if isFollowing }}} hide{{{ end }}}">[[user:follow]]</a>
+		{{{ end }}}
+		{{{ end }}}
+
+		{{{ if (loggedIn && (!isSelf && (!banned && !config.disableChat))) }}}
+		<div class="btn-group">
+			<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" 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>
-		<div class="save">[[groups:cover-save]] <i class="fa fa-fw fa-floppy-o"></i></div>
-		<div class="indicator">[[groups:cover-saving]] <i class="fa fa-fw fa-refresh fa-spin"></i></div>
-		<!-- ENDIF canEdit -->
-		<!-- ENDIF allowCoverPicture -->
+		{{{ end }}}
+		{{{ if !isSelf }}}
+		{{{ if (isAdmin || (canBan || canMute ))}}}
+		<!-- IMPORT partials/account/admin-menu.tpl -->
+		{{{ end }}}
+		{{{ end }}}
 	</div>
 </div>
+