nodebb-theme-harmony 1.0.0 → 1.0.1

package/templates/account/uploads.tpl

@@ -1,44 +1,37 @@
-<div class="account">
-	<!-- IMPORT partials/account/header.tpl -->
-	<div class="d-flex flex-column flex-md-row">
-		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
-			<h3 class="fw-semibold fs-5">{title}</h3>
+<!-- IMPORT partials/account/header.tpl -->
 
-			<!-- IF privateUploads -->
-			<div class="alert alert-info text-center">[[uploads:private-uploads-info]]</div>
-			<!-- ELSE -->
-			<div class="alert alert-info text-center">[[uploads:public-uploads-info]]</div>
-			<!-- ENDIF privateUploads -->
+<h3 class="fw-semibold fs-5">{title}</h3>
 
-			<!-- IF !uploads.length -->
-			<div class="alert alert-warning text-center">[[uploads:no-uploads-found]]</div>
-			<!-- ENDIF !uploads.length -->
+<div class="alert alert-info text-center">
+	{{{ if privateUploads }}}[[uploads:private-uploads-info]]{{{ else }}}[[uploads:public-uploads-info]]{{{ end }}}
+</div>
 
-			<table class="table table-striped table-responsive">
-				<thead>
-					<tr>
-						<th></th>
-						<th></th>
-					</tr>
-				</thead>
-				<tbody>
-					{{{each uploads}}}
-					<tr data-name="{uploads.name}">
-						<td>
-							<a class="text-break" href="{config.relative_path}{uploads.url}">{uploads.url}</a>
-						</td>
-						<td>
-							<div class="btn-group ">
-								<button class="btn btn-danger btn-sm" data-action="delete"><i class="fa fa-trash"></i></button>
-							</div>
-						</td>
-					</tr>
-					{{{end}}}
-				</tbody>
-			</table>
+{{{ if !uploads.length }}}
+<div class="alert alert-warning text-center">[[uploads:no-uploads-found]]</div>
+{{{ end }}}
 
-			<!-- IMPORT partials/paginator.tpl -->
-		</div>
-	</div>
-</div>
+<table class="table table-striped table-responsive">
+	<thead>
+		<tr>
+			<th></th>
+			<th></th>
+		</tr>
+	</thead>
+	<tbody>
+		{{{ each uploads }}}
+		<tr data-name="{./name}">
+			<td>
+				<a class="text-break" href="{config.relative_path}{./url}">{./url}</a>
+			</td>
+			<td>
+				<div class="btn-group ">
+					<button class="btn btn-danger btn-sm" data-action="delete"><i class="fa fa-trash"></i></button>
+				</div>
+			</td>
+		</tr>
+		{{{ end }}}
+	</tbody>
+</table>
+
+<!-- IMPORT partials/paginator.tpl -->
+<!-- IMPORT partials/account/footer.tpl -->

package/templates/admin/plugins/harmony.tpl

@@ -4,15 +4,33 @@
 		<form role="form" class="harmony-settings">
 			<div class="form-check form-switch">
 				<input type="checkbox" class="form-check-input" id="enableQuickReply" name="enableQuickReply" />
-				<label for="enableQuickReply" class="form-check-label">Enable quick reply</label>
+				<label for="enableQuickReply" class="form-check-label">[[harmony:settings.enableQuickReply]]</label>
 			</div>
 			<div class="form-check form-switch">
 				<input type="checkbox" class="form-check-input" id="centerHeaderElements" name="centerHeaderElements" />
-				<label for="centerHeaderElements" class="form-check-label">Center header elements</label>
+				<label for="centerHeaderElements" class="form-check-label">[[harmony:settings.centerHeaderElements]]</label>
+			</div>
+			<div class="form-check form-switch">
+				<input type="checkbox" class="form-check-input" id="mobileTopicTeasers" name="mobileTopicTeasers" />
+				<label for="mobileTopicTeasers" class="form-check-label">[[harmony:settings.mobileTopicTeasers]]</label>
 			</div>
 			<div class="form-check form-switch">
 				<input type="checkbox" class="form-check-input" id="stickyToolbar" name="stickyToolbar" />
-				<label for="stickyToolbar" class="form-check-label">Sticky toolbar on topic and category pages</label>
+				<div for="stickyToolbar" class="form-check-label">
+					[[harmony:settings.stickyToolbar]]
+					<p class="form-text">
+						[[harmony:settings.stickyToolbar.help]]
+					</p>
+				</div>
+			</div>
+			<div class="form-check form-switch">
+				<input type="checkbox" class="form-check-input" id="autohideBottombar" name="autohideBottombar" />
+				<div for="autohideBottombar" class="form-check-label">
+					[[harmony:settings.autohideBottombar]]
+					<p class="form-text">
+						[[harmony:settings.autohideBottombar.help]]
+					</p>
+				</div>
 			</div>
 		</form>
 	</div>

package/templates/categories.tpl

@@ -3,16 +3,13 @@
 	{{widgets.header.html}}
 	{{{ end }}}
 </div>
-<div class="row">
+<div class="row py-2">
 	<div class="{{{ if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
 		{{{ if pagination.pages.length }}}
-		<div><!-- IMPORT partials/category-selector.tpl --></div>
+		<div><!-- IMPORT partials/category/selector-dropdown-left.tpl --></div>
 		{{{ end }}}
-		<ul class="categories list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
+		<ul class="categories-list list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
 			{{{ each categories }}}
-			{{{ if !@first }}}
-			<hr class="text-muted opacity-25"/>
-			{{{ end }}}
 			<!-- IMPORT partials/categories/item.tpl -->
 			{{{ end }}}
 		</ul>

package/templates/category.tpl

@@ -1,19 +1,10 @@
 <!-- IMPORT partials/breadcrumbs.tpl -->
-
-{{{ if widgets.header.length }}}
-<div data-widget-area="header">
-	{{{ each widgets.header }}}
-	{{widgets.header.html}}
-	{{{ end }}}
-</div>
-{{{ end }}}
-
 <div class="d-flex flex-column gap-2">
-	<div class="d-flex gap-2 align-items-center mb-1 {{{ if config.centerHeaderElements }}}justify-content-center{{{ end }}}">
+	<div class="d-flex gap-2 align-items-center mb-1 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
 		{buildCategoryIcon(@value, "40px", "rounded-1 flex-shrink-0")}
-		<h2 class="fs-2 fw-semibold mb-0 text-center">{./name}</h2>
+		<h2 class="tracking-tight fs-2 fw-semibold mb-0 text-center">{./name}</h2>
 	</div>
-	<div class="d-flex flex-wrap gap-2 {{{ if config.centerHeaderElements }}}justify-content-center{{{ end }}}">
+	<div class="d-flex flex-wrap gap-2 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
 		<span class="badge text-body border border-gray-300 stats text-xs">
 			<span title="{totalTopicCount}" class="human-readable-number fw-bold">{totalTopicCount}</span>
 			<span class="text-lowercase fw-normal">[[global:topics]]</span>
@@ -25,6 +16,15 @@
 	</div>
 </div>
 
+{{{ if widgets.header.length }}}
+<div data-widget-area="header">
+	{{{ each widgets.header }}}
+	{{widgets.header.html}}
+	{{{ end }}}
+</div>
+{{{ end }}}
+
+
 <div class="row mt-3">
 	<div class="category d-flex flex-column {{{if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
 		<!-- IMPORT partials/category/subcategory.tpl -->
@@ -33,8 +33,7 @@
 
 		{{{ if !topics.length }}}
 		{{{ if privileges.topics:create }}}
-		<hr class="visible-xs" />
-		<div class="alert alert-warning" id="category-no-topics">
+		<div class="alert alert-info" id="category-no-topics">
 			[[category:no_topics]]
 		</div>
 		{{{ end }}}

package/templates/chats.tpl

@@ -1,27 +1,26 @@
-<div class="chats-full d-flex gap-1 vh-100 py-3">
-	<div class="d-flex flex-column h-100" style="width:300px;" component="chat/nav-wrapper" data-loaded="{{{ if roomId }}}1{{{ else }}}0{{{ end }}}">
+<div class="chats-full d-flex gap-1 h-100 mt-3 mt-md-0 py-md-3">
+	<div class="flex-shrink-0 d-flex flex-column h-100" component="chat/nav-wrapper" data-loaded="{{{ if roomId }}}1{{{ else }}}0{{{ end }}}">
 		<div class="chat-search dropdown mb-2">
 			<label class="text-xs text-muted">[[users:search-user-for-chat]]</label>
 
 			<div class="input-group">
 				<input class="form-control" type="text" component="chat/search" data-bs-toggle="dropdown" />
+				<ul component="chat/search/list" class="dropdown-menu">
+					<li><a href="#" class="dropdown-item rounded-1">[[admin/menu:search.start-typing]]</a></li>
+				</ul>
 				<button class="btn btn-primary" type="button">
 					<i class="fa fa-search"></i>
 				</button>
 			</div>
-
-			<ul component="chat/search/list" class="dropdown-menu">
-				<li><a href="#" class="dropdown-item">[[admin/menu:search.start-typing]]</a></li>
-			</ul>
 		</div>
-		<hr class="text-muted opacity-25 my-1">
-		<ul component="chat/recent" class="chats-list list-unstyled overflow-auto mb-0 pe-2" data-nextstart="{nextStart}">
+		<hr class="my-1">
+		<div component="chat/recent" class="chats-list overflow-auto mb-0 pe-1" data-nextstart="{nextStart}">
 			{{{each rooms}}}
 			<!-- IMPORT partials/chats/recent_room.tpl -->
 			{{{end}}}
-		</ul>
+		</div>
 	</div>
-	<div class="flex-1 ms-md-2 ps-md-2 border-1 border-start-md" component="chat/main-wrapper">
+	<div class="flex-grow-1 ms-md-2 ps-md-2 border-1 border-start-md h-100" component="chat/main-wrapper" style="min-width: 0;">
 		<!-- IMPORT partials/chats/message-window.tpl -->
 	</div>
 	<div class="imagedrop"><div>[[topic:composer.drag_and_drop_images]]</div></div>

package/templates/flags/detail.tpl

@@ -1,210 +1,177 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- IMPORT partials/breadcrumbs.tpl -->
 
-<div class="row">
-	<div class="col-12">
-		<h2 class="h4">
-			{target_readable}
-			<small><span class="text-muted timeago" title="{datetimeISO}"></span></small>
-		</h2>
-
-		<hr />
-
-		<!-- IF type_bool.post -->
-		<div class="d-flex">
-			<div class="flex-shrink-0">
-				<a href="{config.relative_path}/user/{target.user.userslug}">{buildAvatar(target.user, "64px", true, "media-object")}</a>
-			</div>
-			<div class="flex-grow-1 ms-3">
-				<h4 class="media-heading"><a href="{config.relative_path}/user/{target.user.userslug}">{target.user.username}</a></h4>
-				{target.content}
+<div class="d-flex flex-column flex-md-row">
+	<div class="flex-shrink-0 d-flex flex-column gap-3 border-end-md text-sm mb-3 pe-4" style="flex-basis: 240px !important;">
+		<div class="d-grid gap-1">
+			<a class="btn btn-ghost border btn-sm justify-content-start" href="{config.relative_path}/{type_path}/{targetId}">
+				<i class="fa fa-fw fa-external-link text-primary"></i>
+				[[flags:go-to-target]]
+			</a>
+
+			{{{ if target.uid }}}
+			<div class="btn-group dropend" data-uid="{target.uid}">
+				<button type="button" class="btn btn-ghost border btn-sm justify-content-start dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+					<i class="fa fa-fw fa-street-view text-primary"></i>
+					[[flags:flagged-user]]
+				</button>
+				<ul class="dropdown-menu p-1 text-sm">
+					<li><a class="dropdown-item rounded-1" href="{config.relative_path}/uid/{target.uid}">[[flags:view-profile]]</a></li>
+					{{{ if !config.disableChat }}}
+						<li><a class="dropdown-item rounded-1" href="#" data-action="chat">[[flags:start-new-chat]]</a></li>
+					{{{ end }}}
+					<li class="dropdown-divider"></li>
+					{{{ if privileges.ban }}}
+					<li class="{{{ if target.user.banned }}}hidden{{{ end }}}"><a class="dropdown-item rounded-1" href="#" data-action="ban">[[user:ban_account]]</a></li>
+					<li class="{{{ if !target.user.banned }}}hidden{{{ end }}}"><a class="dropdown-item rounded-1" href="#" data-action="unban">[[user:unban_account]]</a></li>
+					{{{ end }}}
+					{{{ if privileges.mute}}}
+					<li class="{{{ if target.user.muted }}}hidden{{{ end }}}"><a class="dropdown-item rounded-1" href="#" data-action="mute">[[user:mute_account]]</a></li>
+					<li class="{{{ if !target.user.muted }}}hidden{{{ end }}}"><a class="dropdown-item rounded-1" href="#" data-action="unmute">[[user:unmute_account]]</a></li>
+					{{{ end }}}
+					{{{ if privileges.admin:users }}}
+					<li><a class="dropdown-item rounded-1" href="#" data-action="delete-account">[[user:delete_account_as_admin]]</a></li>
+					<li><a class="dropdown-item rounded-1" href="#" data-action="delete-content">[[user:delete_content]]</a></li>
+					<li><a class="dropdown-item rounded-1" href="#" data-action="delete-all">[[user:delete_all]]</a></li>
+					{{{ end }}}
+				</ul>
 			</div>
+			{{{ end }}}
+
+			<a class="btn btn-ghost border btn-sm justify-content-start" href="#" data-action="assign">
+				<i class="fa fa-fw fa-id-card-o text-primary"></i>
+				[[flags:assign-to-me]]
+			</a>
+
+			{{{ if type_bool.post }}}
+			{{{ if !target.deleted}}}
+			<a class="d-flex gap-2 align-items-center btn btn-sm btn-outline-danger border border-secondary-subtle text-start" href="#" data-action="delete-post"><i class="fa fa-fw fa-trash"></i> [[flags:delete-post]]</a>
+			{{{ else }}}
+			<a class="d-flex gap-2 align-items-center btn btn-sm btn-danger border border-secondary-subtle text-start" href="#" data-action="purge-post"><i class="fa fa-fw fa-trash"></i> [[flags:purge-post]]</a>
+			<a class="d-flex gap-2 align-items-center btn btn-sm btn-outline-success border border-secondary-subtle text-start" href="#" data-action="restore-post"><i class="fa fa-fw fa-reply"></i><i class="fa fa-trash"></i> [[flags:restore-post]]</a>
+			{{{ end }}}
+			{{{ end }}}
 		</div>
-		<!-- ENDIF type_bool.post -->
 
-		<!-- IF type_bool.user -->
-		<div class="d-flex">
-			<div class="flex-shrink-0">
-				<a href="{config.relative_path}/user/{target.userslug}">{buildAvatar(target, "64px", true, "media-object")}</a>
-			</div>
-			<div class="flex-grow-1 ms-3">
-				<h4 class="media-heading"><a href="{config.relative_path}/user/{target.userslug}">{target.username}</a></h4>
-				<p class="lead">
-					<a href="{config.relative_path}/uid/{target.uid}">[[flags:user-view]]</a> |
-					<a href="{config.relative_path}/uid/{target.uid}/edit">[[flags:user-edit]]</a>
-				</p>
+		<form class="d-flex flex-column gap-3" id="attributes">
+			<div>
+				<label class="text-muted fw-semibold" for="state">[[flags:state]]</label>
+				<select class="form-select form-select-sm" id="state" name="state" disabled>
+					<option value="open">[[flags:state-open]]</option>
+					<option value="wip">[[flags:state-wip]]</option>
+					<option value="resolved">[[flags:state-resolved]]</option>
+					<option value="rejected">[[flags:state-rejected]]</option>
+				</select>
 			</div>
-		</div>
-		<!-- ENDIF type_bool.user -->
-
-		<!-- IF type_bool.empty -->
-		<div class="alert alert-warning" role="alert">[[flags:target-purged]]</div>
-		<!-- ENDIF type_bool.empty -->
-
-		<hr />
-
-		<div class="row">
-			<div class="col-sm-6">
-				<form role="form" id="attributes">
-					<div class="mb-3">
-						<h2 class="h4">[[flags:reports]]</h2>
-						<ul class="list-group" component="flag/reports">
-							{{{ each reports }}}
-							<li class="list-group-item">
-								<a href="{config.relative_path}/user/{./reporter.userslug}">{buildAvatar(./reporter, "24px", true)}</a>
-								&ndash; <span class="timeago" title="{./timestampISO}"></span>
-								<blockquote><em>{./value}</em></blockquote>
-							</li>
-							{{{ end }}}
-						</ul>
-					</div>
-					<div class="mb-3">
-						<h2 class="h4" for="state">[[flags:state]]</h2>
-						<select class="form-select" id="state" name="state" disabled>
-							<option value="open">[[flags:state-open]]</option>
-							<option value="wip">[[flags:state-wip]]</option>
-							<option value="resolved">[[flags:state-resolved]]</option>
-							<option value="rejected">[[flags:state-rejected]]</option>
-						</select>
-					</div>
-					<div class="mb-3">
-						<h2 class="h4" for="assignee">[[flags:assignee]]</h2>
-						<select class="form-control" id="assignee" name="assignee" disabled>
-							<option value="">[[flags:no-assignee]]</option>
-							{{{each assignees}}}
-							<option value="{../uid}">{../username}</option>
-							{{{end}}}
-						</select>
-					</div>
-					<div class="d-grid">
-						<button type="button" class="btn btn-primary" data-action="update">[[flags:update]]</button>
-					</div>
-				</form>
-
-				<hr />
-
-				<form role="form">
-					<div class="mb-3">
-						<h2 class="h4" for="note">[[flags:notes]]</h2>
-						<textarea id="note" class="form-control"></textarea>
-						<div class="d-grid">
-							<button type="button" class="btn btn-block btn-primary" data-action="appendNote">[[flags:add-note]]</button>
-						</div>
-					</div>
-				</form>
-
-				<div component="flag/notes">
-					<!-- IF !notes.length -->
-					<div class="alert alert-success text-center">[[flags:no-notes]]</div>
-					<!-- ENDIF !notes.length -->
-					{{{each notes}}}
-					<div class="d-flex mb-3">
-						<div class="flex-shrink-0">
-							<a href="{config.relative_path}/user/{../user.userslug}">{buildAvatar(notes.user, "32px", true, "media-object")}</a>
-						</div>
-						<div class="flex-grow-1 mx-3">
-							<h2 class="h5">
-								<a href="{config.relative_path}/user/{../user.userslug}">{../user.username}</a>
-								<small><span class="timeago" title="{../datetimeISO}"></span></small>
-							</h4>
-							{../content}
-						</div>
-						<div class="flex-shrink-0">
-							<a href="#" class="btn btn-sm btn-link" data-action="prepare-edit"><i class="fa fa-pencil"></i></a>
-							<a href="#" class="btn btn-sm btn-link" data-action="delete-note"><i class="fa fa-trash text-danger"></i></a>
-						</div>
-					</div>
+			<div>
+				<label class="text-muted fw-semibold" for="assignee">[[flags:assignee]]</label>
+				<select class="form-control form-control-sm" id="assignee" name="assignee" disabled>
+					<option value="">[[flags:no-assignee]]</option>
+					{{{each assignees}}}
+					<option value="{../uid}">{../username}</option>
 					{{{end}}}
+				</select>
+			</div>
+			<div class="d-grid">
+				<button type="button" class="btn btn-primary" data-action="update">[[flags:update]]</button>
+			</div>
+		</form>
+
+		<div class="overflow-auto" component="flag/history">
+			<h2 class="h6 fw-bold">[[flags:history]]</h2>
+			{{{ if !history.length }}}
+			<div class="alert alert-success text-center">[[flags:no-history]]</div>
+			{{{ end }}}
+			{{{ each history }}}
+			<div class="d-flex flex-column gap-1">
+				<div class="d-flex gap-2 align-items-center">
+					<a class="d-flex text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "16px", true)}</a>
+					<a href="{config.relative_path}/user/{./user.userslug}">{./user.username}</a>
+					<span class="timeago text-muted" title="{./datetimeISO}"></span>
+				</div>
+				<div>
+					<ul class="list-unstyled">
+						{{{ each ./fields }}}
+						<li>
+							[[flags:{@key}]]{{{ if @value }}} &rarr; <span class="fw-semibold">{@value}</span>{{{ end }}}
+						</li>
+						{{{ end }}}
+						{{{ each ./meta }}}
+						<li>
+							{{./key}}{{{ if ./value }}} &rarr; <span class="fw-semibold">{./value}</span>{{{ end }}}
+						</li>
+						{{{ end }}}
+					</ul>
 				</div>
 			</div>
-			<div class="col-sm-6">
-				<h2 class="h4">[[flags:quick-actions]]</h2>
-
-				<div class="d-grid gap-1">
-					<a class="btn btn-light" href="{config.relative_path}/{type_path}/{targetId}">
-						<i class="fa fa-external-link"></i>
-						[[flags:go-to-target]]
-					</a>
-
-					<a class="btn btn-light" href="#" data-action="assign">
-						<i class="fa fa-id-card-o"></i>
-						[[flags:assign-to-me]]
-					</a>
-
-					{{{ if type_bool.post }}}
-					{{{ if !target.deleted}}}
-					<a class="btn btn-outline-danger" href="#" data-action="delete-post"><i class="fa fa-trash"></i> [[flags:delete-post]]</a>
-					{{{ else }}}
-					<a class="btn btn-danger" href="#" data-action="purge-post"><i class="fa fa-trash"></i> [[flags:purge-post]]</a>
-					<a class="btn btn-outline-success" href="#" data-action="restore-post"><i class="fa fa-reply"></i><i class="fa fa-trash"></i> [[flags:restore-post]]</a>
-					{{{ end }}}
-					{{{ end }}}
-
-					{{{ if target.uid }}}
-					<div class="btn-group" data-uid="{target.uid}">
-						<button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-							<i class="fa fa-street-view"></i>
-							[[flags:flagged-user]]
-							<span class="caret"></span>
-						</button>
-						<ul class="dropdown-menu">
-							<li><a class="dropdown-item" href="{config.relative_path}/uid/{target.uid}">[[flags:view-profile]]</a></li>
-							{{{ if !config.disableChat }}}
-								<li><a class="dropdown-item" href="#" data-action="chat">[[flags:start-new-chat]]</a></li>
-							{{{ end }}}
-							<li class="dropdown-divider"></li>
-							{{{ if privileges.ban }}}
-							<li class="{{{ if target.user.banned }}}hidden{{{ end }}}"><a class="dropdown-item" href="#" data-action="ban">[[user:ban_account]]</a></li>
-							<li class="{{{ if !target.user.banned }}}hidden{{{ end }}}"><a class="dropdown-item" href="#" data-action="unban">[[user:unban_account]]</a></li>
-							{{{ end }}}
-							{{{ if privileges.mute}}}
-							<li class="{{{ if target.user.muted }}}hidden{{{ end }}}"><a class="dropdown-item" href="#" data-action="mute">[[user:mute_account]]</a></li>
-							<li class="{{{ if !target.user.muted }}}hidden{{{ end }}}"><a class="dropdown-item" href="#" data-action="unmute">[[user:unmute_account]]</a></li>
-							{{{ end }}}
-							{{{ if privileges.admin:users }}}
-							<li><a class="dropdown-item" href="#" data-action="delete-account">[[user:delete_account_as_admin]]</a></li>
-							<li><a class="dropdown-item" href="#" data-action="delete-content">[[user:delete_content]]</a></li>
-							<li><a class="dropdown-item" href="#" data-action="delete-all">[[user:delete_all]]</a></li>
-							{{{ end }}}
-						</ul>
-					</div>
-					{{{ end }}}
+			{{{ end }}}
+		</div>
+	</div>
+	<div class="flex-grow-1 ps-md-2 ps-lg-5" style="min-width:0;">
+		<div class="d-flex flex-column gap-4">
+			<h2 class="h6 fw-bold">
+				{target_readable}
+			</h2>
+			<div component="flag/content" class="d-flex flex-column gap-1 pb-3 border-bottom">
+				{{{ if type_bool.post }}}
+				<div class="d-flex gap-2 align-items-center">
+					<a class="d-flex text-decoration-none" href="{config.relative_path}/user/{target.user.userslug}">{buildAvatar(target.user, "16px", true)}</a>
+					<a href="{config.relative_path}/user/{target.user.userslug}">{target.user.username}</a>
+					<span class="timeago text-muted" title="{target.timestampISO}"></span>
 				</div>
+				<blockquote>{target.content}</blockquote>
+				{{{ end }}}
 
-				<hr />
+				{{{ if type_bool.user }}}
+				<div class="d-flex gap-2">
+					<a href="{config.relative_path}/user/{./target.userslug}">{buildAvatar(target, "16px", true)}</a>
+					<a href="{config.relative_path}/user/{./target.userslug}">{target.username}</a>
+				</div>
+				<blockquote>{{{ if target.aboutme }}}{target.aboutme}{{{ else }}}<em>[[flags:target-aboutme-empty]]</em>{{{ end }}}</blockquote>
+				{{{ end }}}
 
-				<h2 class="h4">[[flags:history]]</h2>
-				<div component="flag/history">
-					<!-- IF !history.length -->
-					<div class="alert alert-success text-center">[[flags:no-history]]</div>
-					<!-- ENDIF !history.length -->
-					{{{each history}}}
-					<div class="d-flex">
-						<div class="flex-shrink-0">
-							<a href="{config.relative_path}/user/{../user.userslug}">{buildAvatar(history.user, "32px", true, "media-object")}</a>
-						</div>
-						<div class="flex-grow-1 ms-3">
-							<h4 class="media-heading">
-								<a href="{config.relative_path}/user/{../user.userslug}">{../user.username}</a>
-								<small><span class="timeago" title="{../datetimeISO}"></span></small>
-							</h4>
-							<ul>
-								{{{each ./fields}}}
-								<li>
-									<span class="badge bg-primary">[[flags:{@key}]]</span><!-- IF @value --> &rarr; <span class="badge bg-light text-dark">{@value}</span><!-- ENDIF @value -->
-								</li>
-								{{{end}}}
-								{{{ each ./meta }}}
-								<li>
-									<span class="badge bg-{{./labelClass}}">{{./key}}</span>{{{ if ./value }}} &rarr; <span class="badge bg-light text-dark">{{ ./value }}</span>{{{ end }}}
-								</li>
-								{{{ end }}}
-							</ul>
+				{{{ if type_bool.empty }}}
+				<div class="alert alert-warning" role="alert">[[flags:target-purged]]</div>
+				{{{ end }}}
+			</div>
+			<div class="flag/reports" class="pb-4 border-bottom">
+				<h2 class="h6 fw-bold">[[flags:reports]]</h2>
+				<ul class="list-unstyled mt-4">
+					{{{ each reports }}}
+					<li class="d-flex flex-column gap-1" component="flag/report" data-timestamp="{./timestamp}">
+						<div class="d-flex gap-2 align-items-center">
+							<a class="d-flex text-decoration-none" href="{config.relative_path}/user/{./reporter.userslug}">{buildAvatar(./reporter, "16px", true)}</a>
+							<a href="{config.relative_path}/user/{./reporter.userslug}">{./reporter.username}</a>
+							<span class="timeago text-muted" title="{./timestampISO}"></span>
 						</div>
-					</div>
-					{{{end}}}
+						<p>{./value}</p>
+					</li>
+					{{{ end }}}
+				</ul>
+			</div>
+			<div class="pb-4 border-bottom">
+				<div class="d-flex align-items-center">
+					<h2 class="h6 fw-bold me-auto mb-0">[[flags:notes]]</h2>
+					<button class="btn btn-ghost border" data-action="addEditNote">[[flags:add-note]]</button>
 				</div>
+				<ul component="flag/notes" class="list-unstyled mt-4">
+					{{{ if !notes.length }}}
+					<em>[[flags:no-notes]]</em>
+					{{{ end }}}
+					{{{ each notes }}}
+					<li class="d-flex flex-column gap-1" component="flag/note" data-datetime="{./datetime}" data-index="{@index}">
+						<div class="d-flex gap-2 align-items-center">
+							<a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "16px", true)}</a>
+							<a href="{config.relative_path}/user/{./user.userslug}">{./user.username}</a>
+							<span class="timeago text-muted" title="{./datetimeISO}"></span>
+							<div class=" ms-auto flex-shrink-0">
+								<a href="#" class="btn btn-sm btn-link" data-action="addEditNote"><i class="fa fa-pencil"></i></a>
+								<a href="#" class="btn btn-sm btn-link" data-action="delete-note"><i class="fa fa-trash text-danger"></i></a>
+							</div>
+						</div>
+						<p>{./content}</p>
+					</li>
+					{{{ end }}}
+				</ul>
 			</div>
 		</div>
 	</div>