nodebb-theme-harmony 1.0.0 → 1.0.1

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

@@ -6,8 +6,9 @@
 
 {{{ if roomId }}}
 <div component="chat/messages" class="expanded-chat d-flex flex-column h-100" data-roomid="{roomId}">
-	<div component="chat/header" class="d-flex align-items-center px-3 gap-1">
-		<h5 class="members flex-1 fw-semibold tracking-tight">
+	<div component="chat/header" class="d-flex align-items-center px-md-3 gap-3">
+		<a href="#" data-action="close" role="button" class="flex-shrink-0 d-flex d-md-none btn btn-outline align-text-top"><i class="fa fa-chevron-left"></i></a>
+		<h5 class="members flex-grow-1 fw-semibold tracking-tight mb-0">
 			{./chatWithMessage}
 		</h5>
 
@@ -20,13 +21,16 @@
 	<ul class="chat-content p-0 m-0 list-unstyled overflow-auto flex-grow-1">
 		<!-- IMPORT partials/chats/messages.tpl -->
 	</ul>
-	<div component="chat/composer" class="d-flex gap-1 border-top pt-2">
-		<div class="flex-grow-1 position-relative">
-			<textarea component="chat/input" placeholder="[[modules:chat.placeholder]]" class="form-control chat-input mousetrap" rows="2" style="resize:none;"></textarea>
-			<span component="chat/message/remaining" class="text-muted position-absolute me-1 mb-1" style="right: 0px; bottom:0px;">{maximumChatMessageLength}</span>
+	<div component="chat/composer" class="d-flex flex-column flex-md-row gap-2 border-top pt-2 align-items-start align-items-md-end">
+		<div class="w-100 flex-grow-1 position-relative input-group">
+			<button component="chat/upload/button" class="btn btn-outline-primary btn-sm align-self-stretch px-3 px-md-2" type="button"><i class="fa fa-fw fa-upload"></i></button>
+			<div class="flex-grow-1 position-relative">
+				<textarea component="chat/input" placeholder="[[modules:chat.placeholder.mobile]]" class="form-control chat-input mousetrap rounded-0" style="height:0;max-height:30vh;resize:none;"></textarea>
+				<span component="chat/message/remaining" class="text-xs text-muted position-absolute me-1 mb-1 end-0 bottom-0">{maximumChatMessageLength}</span>
+			</div>
+			<button class="btn btn-primary btn-sm align-self-stretch px-3 px-md-2" type="button" data-action="send"><i class="fa fa-fw fa-paper-plane"></i></button>
 		</div>
-		<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">
+		<form class="hidden" component="chat/upload" method="post" enctype="multipart/form-data">
 			<input type="file" name="files[]" multiple class="hidden"/>
 		</form>
 	</div>

package/templates/partials/chats/message.tpl

@@ -1,11 +1,11 @@
-<li component="chat/message" class="chat-message mx-2 pe-2 clear{{{ if ./deleted }}} deleted{{{ end }}} {{{ if messages.newSet }}}border-top pt-3{{{ end }}}" data-index="{messages.index}" data-mid="{messages.messageId}" data-uid="{messages.fromuid}" data-self="{messages.self}" data-break="{messages.newSet}" data-timestamp="{messages.timestamp}">
+<li component="chat/message" class="chat-message mx-2 pe-2 clear{{{ if messages.deleted }}} deleted{{{ end }}} {{{ if messages.newSet }}}border-top pt-3{{{ end }}}" data-index="{messages.index}" data-mid="{messages.messageId}" data-uid="{messages.fromuid}" data-self="{messages.self}" data-break="{messages.newSet}" data-timestamp="{messages.timestamp}">
 	<div class="message-header lh-1 d-flex align-items-center gap-2 text-sm {{{ if !messages.newSet }}}hidden{{{ end }}} pb-2">
 		<a href="{config.relative_path}/user/{messages.fromUser.userslug}" class="text-decoration-none">{buildAvatar(messages.fromUser, "18px", true, "not-responsive")}</a>
 		<span class="chat-user fw-semibold"><a href="{config.relative_path}/user/{messages.fromUser.userslug}">{messages.fromUser.displayname}</a></span>
-		{{{ if ./fromUser.banned }}}
+		{{{ if messages.fromUser.banned }}}
 		<span class="badge bg-danger">[[user:banned]]</span>
 		{{{ end }}}
-		{{{ if ./fromUser.deleted }}}
+		{{{ if messages.fromUser.deleted }}}
 		<span class="badge bg-danger">[[user:deleted]]</span>
 		{{{ end }}}
 		<span class="chat-timestamp text-muted ms-2 timeago" title="{messages.timestampISO}"></span>
@@ -14,23 +14,21 @@
 		{{{ end }}}
 	</div>
 	<div class="message-body-wrapper hover-parent">
-		<div component="chat/message/body" class="message-body ps-0 py-0 overflow-auto">
+		<div component="chat/message/body" class="message-body ps-0 py-0 overflow-auto text-break">
 			{messages.content}
 		</div>
 
-		<!-- IF !config.disableChatMessageEditing -->
-		<!-- IF messages.self -->
+		{{{ if (!config.disableChatMessageEditing && messages.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/chats/options.tpl

@@ -1,22 +1,30 @@
 <div class="dropdown">
-  <button class="btn btn-outline align-text-top" data-bs-toggle="dropdown" component="chat/controlsToggle"><i class="fa fa-gear"></i></button>
-  <ul class="dropdown-menu dropdown-menu-end" component="chat/controls">
+  <button class="btn btn-outline align-text-top" data-bs-toggle="dropdown" component="chat/controlsToggle">
+    <i class="fa fa-gear text-muted"></i>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-end p-1 text-sm" component="chat/controls">
     <li class="dropdown-header">[[modules:chat.options]]</li>
     <li>
-      <a class="dropdown-item" href="#" data-action="members"><i class="fa fa-fw fa-cog"></i> [[modules:chat.manage-room]]</a>
+      <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" data-action="members">
+        <i class="fa fa-fw text-muted fa-cog"></i> [[modules:chat.manage-room]]
+      </a>
     </li>
     <li>
-      <a class="dropdown-item" href="#" data-action="rename"><i class="fa fa-fw fa-edit"></i> [[modules:chat.rename-room]]</a>
+      <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" data-action="rename">
+        <i class="fa fa-fw text-muted fa-edit"></i> [[modules:chat.rename-room]]
+      </a>
     </li>
     <li>
-      <a class="dropdown-item" href="#" data-action="leave"><i class="fa fa-fw fa-sign-out"></i> [[modules:chat.leave]]</a>
+      <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" data-action="leave">
+        <i class="fa fa-fw text-muted fa-sign-out"></i> [[modules:chat.leave]]
+      </a>
     </li>
     {{{ if users.length }}}
     <li role="separator" class="dropdown-divider"></li>
     <li class="dropdown-header">[[modules:chat.in-room]]</li>
     {{{ each users }}}
     <li>
-      <a class="dropdown-item" href="{config.relative_path}/uid/{../uid}">{buildAvatar(users, "24px", true)} {../username}</a>
+      <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{config.relative_path}/uid/{../uid}">{buildAvatar(users, "24px", true)} {../username}</a>
     </li>
     {{{ end }}}
     {{{ end }}}

package/templates/partials/chats/recent_room.tpl

@@ -1,37 +1,46 @@
-<a class="text-decoration-none text-reset" href="{config.relative_path}/me/chats/{./roomId}">
-	<li component="chat/recent/room" data-roomid="{./roomId}" data-full="1" class="{{{ if ./unread }}}unread{{{ end }}} btn-ghost-sm gap-2 justify-content-start align-items-start">
-		<div class="main-avatar">
-		{{{ if ./users.length }}}
-			{{{ if ./groupChat}}}
-			<div class="position-relative" style="width:32px; height:32px;">
-				<span class="text-decoration-none position-absolute top-0" style="left: 8px;" href="{config.relative_path}/user/{./users.1.userslug}">{buildAvatar(./users.1, "24px", true)}</span>
-				<span class="text-decoration-none position-absolute start-0" style="top: 8px;" href="{config.relative_path}/user/{./users.0.userslug}" >{buildAvatar(./users.0, "24px", true)}</span>
-			</div>
-			{{{ else }}}
-			<span href="{config.relative_path}/user/{./users.0.userslug}" class="text-decoration-none">{buildAvatar(./users.0, "32px", true)}</span>
-			{{{ end }}}
-		{{{ else }}}
-		<span class="avatar avatar-rounded text-bg-warning" component="avatar/icon" style="--avatar-size: 32px;">?</span>
-		{{{ end }}}
-		</div>
-
-		<div class="d-flex flex-grow-1 flex-column w-100">
-			<div class="room-name fw-semibold text-xs">
-				{{{ if !./lastUser.uid }}}
-				<span>[[modules:chat.no-users-in-room]]</span>
+<div component="chat/recent/room" data-roomid="{./roomId}" data-full="1" class="rounded-1 {{{ if ./unread }}}unread{{{ end }}}">
+	<div class="d-flex gap-1 justify-content-between p-1">
+		<div class="chat-room-btn position-relative d-flex flex-grow-1 gap-2 justify-content-start align-items-start btn-ghost-sm ff-sans">
+			<div class="main-avatar">
+				<a class="stretched-link" href="{config.relative_path}/me/chats/{./roomId}"></a>
+				{{{ if ./users.length }}}
+				{{{ if ./groupChat}}}
+				<div class="position-relative stacked-avatars">
+					<span class="text-decoration-none position-absolute" href="{config.relative_path}/user/{./users.1.userslug}">{buildAvatar(./users.1, "24px", true)}</span>
+					<span class="text-decoration-none position-absolute" href="{config.relative_path}/user/{./users.0.userslug}" >{buildAvatar(./users.0, "24px", true)}</span>
+				</div>
+				{{{ else }}}
+				<span href="{config.relative_path}/user/{./users.0.userslug}" class="text-decoration-none">{buildAvatar(./users.0, "32px", true)}</span>
+				{{{ end }}}
 				{{{ else }}}
-				{{{ if ./roomName }}}{./roomName}{{{ else }}}{./usernames}{{{ end }}}
+				<span class="avatar avatar-rounded text-bg-warning" component="avatar/icon" style="--avatar-size: 32px;">?</span>
 				{{{ end }}}
 			</div>
-			{{{ if ./teaser }}}
-			<div class="teaser-content text-sm line-clamp-3 text-break">
-				<span href="#" class="text-decoration-none">{buildAvatar(./teaser.user, "14px", true)}</span>
-				<strong class="text-xs fw-semibold teaser-username">{./teaser.user.username}:</strong>
-				{./teaser.content}
+
+			<div class="d-flex flex-grow-1 flex-column w-100">
+				<div class="room-name fw-semibold text-xs">
+					{{{ if !./lastUser.uid }}}
+					<span>[[modules:chat.no-users-in-room]]</span>
+					{{{ else }}}
+					{{{ if ./roomName }}}{./roomName}{{{ else }}}{./usernames}{{{ end }}}
+					{{{ end }}}
+				</div>
+				{{{ if ./teaser }}}
+				<div class="teaser-content text-sm line-clamp-3 text-break">
+					<span href="#" class="text-decoration-none">{buildAvatar(./teaser.user, "14px", true)}</span>
+					<strong class="text-xs fw-semibold teaser-username">{./teaser.user.username}:</strong>
+					{./teaser.content}
+				</div>
+				<div class="teaser-timestamp text-muted text-xs">{./teaser.timeagoLong}</div>
+				{{{ end }}}
 			</div>
-			<div class="teaser-timestamp text-muted text-xs">{./teaser.timeagoLong}</div>
-			{{{ end }}}
 		</div>
-	</li>
-</a>
-<hr class="text-muted opacity-25 my-1"/>
+		<div>
+			<button class="mark-read btn-ghost-sm" style="width: 1.5rem; height: 1.5rem;">
+				<i class="unread fa fa-2xs fa-circle text-primary {{{ if !./unread }}}hidden{{{ end }}}"></i>
+				<i class="read fa fa-2xs fa-circle-o text-secondary {{{ if ./unread }}}hidden{{{ end }}}"></i>
+			</button>
+		</div>
+	</div>
+</div>
+<hr class="my-1" />

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="row d-flex justify-content-center position-fixed start-0 bottom-0 vw-100 pb-5 mb-5 pb-md-0 mb-md-0" style="z-index: 2;">
+    <div class="cookie-consent text-bg-info col-10 col-sm-8 col-lg-6 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/bulk-actions.tpl

@@ -0,0 +1,9 @@
+<div class="dropdown" component="flags/bulk-actions">
+	<button class="filter-btn btn btn-light btn-sm border" data-bs-toggle="dropdown" autocomplete="off" aria-haspopup="true" aria-expanded="false" disabled="disabled">
+		<span class="filter-label">[[flags:bulk-actions]]</span>
+	</button>
+	<ul class="dropdown-menu dropdown-menu-end p-1 text-sm">
+		<li><a href="#" class="dropdown-item rounded-1" data-action="bulk-assign">[[flags:assign-to-me]]</a></li>
+		<li><a href="#" class="dropdown-item rounded-1" data-action="bulk-mark-resolved">[[flags:bulk-resolve]]</a></li>
+	</ul>
+</div>

package/templates/partials/flags/filters.tpl

@@ -1,99 +1,186 @@
-<!-- THIS FILE IS STILL PERSONA -->
+<div component="flags/filters" class="d-flex flex-wrap gap-2 pb-3 border-bottom">
+	<div class="btn-group bottom-sheet">
+		<a class="filter-btn btn btn-light btn-sm border {{{ if filters.quick }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+			<span class="filter-label">{{{ if filters.quick }}}[[flags:filter-quick-{./filters.quick}]]{{{ else }}}[[flags:quick-filters]]{{{ end }}}</span>
+			<span class="caret"></span>
+		</a>
+		<ul class="dropdown-menu p-1 text-sm">
+			<li>
+				<a class="dropdown-item rounded-1" href="{config.relative_path}/flags?quick=mine">[[flags:filter-quick-mine]]</a>
+			</li>
+		</ul>
+	</div>
+
 
-<div class="text-center">
-	<div class="card mb-3">
-		<div class="card-body collapse" id="flags-daily-wrapper" aria-expanded="false">
-			<div><canvas id="flags:daily" height="150"></canvas></div>
+	<div component="category/dropdown" class="btn-group category-dropdown-container bottom-sheet">
+		<button type="button" class="filter-btn btn btn-light btn-sm border d-flex gap-2 dropdown-toggle {{{ if filters.cid }}}active-filter{{{ end }}}" data-bs-toggle="dropdown">
+			{{{ if selectedCategory }}}
+			<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">{selectedCategory.name}</span>
+			</span>
+			{{{ else }}}
+			<span class="visible-md-inline visible-lg-inline">[[unread:all_categories]]</span>
+			{{{ end }}}
+			<span class="caret"></span>
+		</button>
+		<div component="category-selector-search" class="hidden position-absolute">
+			<input type="text" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
 		</div>
-		<div class="card-footer" data-bs-toggle="collapse" data-bs-target="#flags-daily-wrapper" aria-controls="#flags-daily-wrapper"><small>[[flags:graph-label]]</small>&nbsp;<i class="fa fa-sort"></i></div>
+		<ul component="category/list" class="dropdown-menu p-1 text-sm category-dropdown-menu" role="menu">
+			{{{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 rounded-1 d-flex align-items-center gap-2" role="menu-item" href="#">
+					{../level}
+					<span component="category-markup" class="flex-grow-1" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">
+						<div class="category-item d-inline-flex align-items-center gap-1">
+							{{{ if ./icon }}}
+							{buildCategoryIcon(@value, "24px", "rounded-circle")}
+							{{{ end }}}
+							{./name}
+						</div>
+					</span>
+					<i component="category/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{ if !../selected }}}invisible{{{ end }}}"></i>
+				</a>
+			</li>
+			{{{end}}}
+		</ul>
 	</div>
-</div>
 
-<div class="card mb-3">
-	<div class="card-header">
-		[[flags:quick-filters]]
+	<div class="btn-group bottom-sheet">
+		<a class="filter-btn btn btn-light btn-sm border {{{ if (sort != "newest") }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+			<span class="filter-label">{{{ if (sort != "newest") }}}[[flags:sort-{./sort}]]{{{ else }}}[[flags:sort]]{{{ end }}}</span>
+			<span class="caret"></span>
+		</a>
+		<ul class="dropdown-menu p-1 text-sm">
+			<li><h6 class="dropdown-header">[[flags:sort-all]]</h6></li>
+			<li class="dropdown-item rounded-1" data-name="sort" data-value="newest">[[flags:sort-newest]]</li>
+			<li class="dropdown-item rounded-1" data-name="sort" data-value="oldest">[[flags:sort-oldest]]</li>
+			<li class="dropdown-item rounded-1" data-name="sort" data-value="reports">[[flags:sort-reports]]</li>
+			<li><h6 class="dropdown-header">[[flags:sort-posts-only]]</h6></li>
+			<li class="dropdown-item rounded-1" data-name="sort" data-value="downvotes">[[flags:sort-downvotes]]</li>
+			<li class="dropdown-item rounded-1" data-name="sort" data-value="upvotes">[[flags:sort-upvotes]]</li>
+			<li class="dropdown-item rounded-1" data-name="sort" data-value="replies">[[flags:sort-replies]]</li>
+		</ul>
 	</div>
-	<div class="card-body">
-		<ul>
-			<li><a href="{config.relative_path}/flags?quick=mine">[[flags:filter-quick-mine]]</a></li>
+
+	<div class="btn-group bottom-sheet">
+		<a class="filter-btn btn btn-light btn-sm border {{{ if filters.state }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+			<span class="filter-label">{{{ if filters.state }}}[[flags:state-{./filters.state}]]{{{ else }}}[[flags:filter-state]]{{{ end }}}</span>
+			<span class="caret"></span>
+		</a>
+		<ul class="dropdown-menu p-1 text-sm">
+			<li class="dropdown-item rounded-1" data-name="state" data-value="open">[[flags:state-open]]</li>
+			<li class="dropdown-item rounded-1" data-name="state" data-value="wip">[[flags:state-wip]]</li>
+			<li class="dropdown-item rounded-1" data-name="state" data-value="resolved">[[flags:state-resolved]]</li>
+			<li class="dropdown-item rounded-1" data-name="state" data-value="rejected">[[flags:state-rejected]]</li>
 		</ul>
 	</div>
-</div>
 
-<div class="card mb-3">
-	<div class="card-header">
-		[[flags:filters]]
+	<div class="btn-group bottom-sheet">
+		<a class="filter-btn btn btn-light btn-sm border {{{ if filters.type }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+			<span class="filter-label">{{{ if filters.type }}}[[flags:filter-type-{./filters.type}]]{{{ else }}}[[flags:filter-type]]{{{ end }}}</span>
+			<span class="caret"></span>
+		</a>
+		<ul class="dropdown-menu p-1 text-sm">
+			<li class="dropdown-item rounded-1" data-name="type" data-value="all">[[flags:filter-type-all]]</li>
+			<li class="dropdown-item rounded-1" data-name="type" data-value="post">[[flags:filter-type-post]]</li>
+			<li class="dropdown-item rounded-1" data-name="type" data-value="user">[[flags:filter-type-user]]</li>
+		</ul>
 	</div>
-	<div class="card-body">
-		<form role="form" component="flags/filters">
-			<fieldset>
-				<div class="mb-3">
-					<label class="form-label" for="filter-cid">[[flags:filter-cid]]</label>
-					<div class="input-group">
-					<!-- IMPORT partials/category-filter.tpl -->
+
+	<div component="flags/filter/assignee" class="dropdown bottom-sheet" data-filter-name="assignee">
+		<a component="user/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.assignee }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+			<span class="filter-label">[[flags:filter-assignee]]</span>
+			<span class="caret"></span>
+		</a>
+
+		<ul class="dropdown-menu p-1 text-sm" style="min-width: 350px;">
+			<li class="px-3 py-1 d-flex flex-column gap-2">
+				<input type="text" class="form-control" component="user/filter/search" placeholder="[[search:type-a-username]]">
+				<div component="user/filter/selected" class="d-flex flex-wrap gap-2">
+					{{{ each selected.assignee }}}
+					<div class="d-flex px-2 py-1 rounded-1 text-bg-primary gap-2 align-items-center text-sm">
+						{buildAvatar(@value, "16px", true)} {./username}
+						<button component="user/filter/delete" data-uid="{./uid}" class="btn btn-primary btn-sm py-0"><i class="fa fa-times fa-xs"></i></button>
 					</div>
+					{{{ end }}}
 				</div>
-				<div class="mb-3">
-					<label class="form-label" for="sort">[[flags:sort]]</label>
-					<select class="form-control" id="sort" name="sort">
-						<optgroup label="[[flags:sort-all]]">
-							<option value="newest">[[flags:sort-newest]]</option>
-							<option value="oldest">[[flags:sort-oldest]]</option>
-							<option value="reports">[[flags:sort-reports]]</option>
-						</optgroup>
-						<optgroup label="[[flags:sort-posts-only]]">
-							<option value="downvotes">[[flags:sort-downvotes]]</option>
-							<option value="upvotes">[[flags:sort-upvotes]]</option>
-							<option value="replies">[[flags:sort-replies]]</option>
-						</optgroup>
-					</select>
-				</div>
-				<div class="mb-3">
-					<label class="form-label" for="filter-state">[[flags:filter-state]]</label>
-					<select class="form-control" id="filter-state" name="state">
-						<option value="">[[flags:state-all]]</option>
-						<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>
+				<hr/>
+				<div component="user/filter/results" class="d-flex flex-wrap gap-2">
+					{{{ each userFilterResults }}}
+					<button class="btn btn-light btn-sm border" data-uid="{./uid}" data-username="{./username}">{buildAvatar(@value, "16px", true)} {./username}</button>
+					{{{ end }}}
 				</div>
+			</li>
+		</ul>
+	</div>
 
-				<div class="mb-3">
-					<label class="form-label" for="filter-type">[[flags:filter-type]]</label>
-					<select class="form-control" id="filter-type" name="type">
-						<option value="">[[flags:filter-type-all]]</option>
-						<option value="post">[[flags:filter-type-post]]</option>
-						<option value="user">[[flags:filter-type-user]]</option>
-					</select>
-				</div>
-			</fieldset>
+	<div component="flags/filter/reporterId" class="dropdown bottom-sheet" data-filter-name="reporterId">
+		<a component="user/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.reporterId }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+			<span class="filter-label">[[flags:filter-reporterId]]</span>
+			<span class="caret"></span>
+		</a>
 
-			<fieldset class="collapse{{{ if expanded }}} show{{{ end }}}" id="more-filters" aria-expanded="{expanded}">
-				<div class="mb-3">
-					<label class="form-label" for="filter-assignee">[[flags:filter-assignee]]</label>
-					<input type="text" class="form-control" id="filter-assignee" name="assignee" />
+		<ul class="dropdown-menu p-1 text-sm" style="min-width: 350px;">
+			<li class="px-3 py-1 d-flex flex-column gap-2">
+				<input type="text" class="form-control" component="user/filter/search" placeholder="[[search:type-a-username]]">
+				<div component="user/filter/selected" class="d-flex flex-wrap gap-2">
+					{{{ each selected.reporterId }}}
+					<div class="d-flex px-2 py-1 rounded-1 text-bg-primary gap-2 align-items-center text-sm">
+						{buildAvatar(@value, "16px", true)} {./username}
+						<button component="user/filter/delete" data-uid="{./uid}" class="btn btn-primary btn-sm py-0"><i class="fa fa-times fa-xs"></i></button>
+					</div>
+					{{{ end }}}
 				</div>
-
-				<div class="mb-3">
-					<label class="form-label" for="filter-targetUid">[[flags:filter-targetUid]]</label>
-					<input type="text" class="form-control" id="filter-targetUid" name="targetUid" />
+				<hr/>
+				<div component="user/filter/results" class="d-flex flex-wrap gap-2">
+					{{{ each userFilterResults }}}
+					<button class="btn btn-light btn-sm border" data-uid="{./uid}" data-username="{./username}">{buildAvatar(@value, "16px", true)} {./username}</button>
+					{{{ end }}}
 				</div>
+			</li>
+		</ul>
+	</div>
+
+	<div component="flags/filter/targetUid" class="dropdown bottom-sheet" data-filter-name="targetUid">
+		<a component="user/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.targetUid }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+			<span class="filter-label">[[flags:filter-targetUid]]</span>
+			<span class="caret"></span>
+		</a>
 
-				<div class="mb-3">
-					<label class="form-label" for="filter-reporterId">[[flags:filter-reporterId]]</label>
-					<input type="text" class="form-control" id="filter-reporterId" name="reporterId" />
+		<ul class="dropdown-menu p-1 text-sm" style="min-width: 350px;">
+			<li class="px-3 py-1 d-flex flex-column">
+				<input type="text" class="form-control" component="user/filter/search" placeholder="[[search:type-a-username]]">
+				<div component="user/filter/selected" class="d-flex flex-wrap gap-2">
+					{{{ each selected.targetUid }}}
+					<div class="d-flex px-2 py-1 rounded-1 text-bg-primary gap-2 align-items-center text-sm">
+						{buildAvatar(@value, "16px", true)} {./username}
+						<button component="user/filter/delete" data-uid="{./uid}" class="btn btn-primary btn-sm py-0"><i class="fa fa-times fa-xs"></i></button>
+					</div>
+					{{{ end }}}
+				</div>
+				<hr/>
+				<div component="user/filter/results" class="d-flex flex-wrap gap-2">
+					{{{ each userFilterResults }}}
+					<button class="btn btn-light btn-sm border" data-uid="{./uid}" data-username="{./username}">{buildAvatar(@value, "16px", true)} {./username}</button>
+					{{{ end }}}
 				</div>
-			</fieldset>
+			</li>
+		</ul>
+	</div>
 
-			<div class="d-grid gap-2">
-				{{{ if expanded }}}
-				<button type="button" class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#more-filters" aria-controls="#more-filters" data-text-variant="[[flags:more-filters]] ">[[flags:fewer-filters]]&nbsp;<i class="fa fa-sort"></i></button>
-				{{{ else }}}
-				<button type="button" class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#more-filters" aria-controls="#more-filters" data-text-variant="[[flags:fewer-filters]] ">[[flags:more-filters]]&nbsp;<i class="fa fa-sort"></i></button>
-				{{{ end }}}
-				<button type="button" id="apply-filters" class="btn btn-primary">[[flags:apply-filters]]</button>
-			  </div>
-		</form>
+	<div component="flags/filters/reset" class="ms-auto">
+		<a class="filter-btn btn btn-warning btn-sm border {{{ if !hasFilter }}}btn-light disabled{{{ end }}}" href="{config.relative_path}/flags" role="button">
+			<span class="filter-label">[[flags:filter-reset]]</span>
+		</a>
 	</div>
+
+	<!-- IMPORT partials/flags/bulk-actions.tpl -->
+
+	<form role="form">
+		<input type="hidden" name="sort" value="{./sort}" />
+		<input type="hidden" name="state" value="{./filters.state}" />
+		<input type="hidden" name="type" value="{./filters.type}" />
+	</form>
 </div>

package/templates/partials/flags/results.tpl

@@ -0,0 +1,38 @@
+<div class="card card-header text-xs px-2 py-1 fw-semibold border-0 align-self-start">
+	[[flags:x-flags-found, {count}]]
+</div>
+
+<table class="table table-striped table-hover" component="flags/list">
+	<thead>
+		<tr>
+			<th></th>
+			<th class="text-xs text-muted">[[flags:reports]]</th>
+			<th class="text-xs text-muted">[[flags:first-reported]]</th>
+			<th class="text-xs text-muted">[[flags:state]]</th>
+			<th>
+				<input type="checkbox" data-action="toggle-all" autocomplete="off" />
+			</th>
+		</tr>
+	</thead>
+	<tbody>
+		{{{ each flags }}}
+		<tr data-flag-id="{./flagId}">
+			<td>
+				<a class="text-reset text-decoration-underline" href="{config.relative_path}/flags/{./flagId}">
+					{./target_readable}
+				</a>
+			</td>
+			<td>
+				{./heat}
+			</td>
+			<td><span class="timeago" title="{./datetimeISO}"></span></td>
+			<td><span class="badge bg-{./labelClass}">[[flags:state-{./state}]]</span></td>
+			<td>
+				<input type="checkbox" autocomplete="off" />
+			</td>
+		</tr>
+		{{{end}}}
+	</tbody>
+</table>
+
+<!-- IMPORT partials/paginator.tpl -->

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

@@ -10,7 +10,7 @@
 </div>
 
 <div class="mb-2 clearfix">
-	<button class="btn btn-primary btn-sm float-end" component="groups/members/bulk-invite-button">[[groups:bulk-invite]]</button>
+	<button type="button" class="btn btn-primary btn-sm float-end" component="groups/members/bulk-invite-button">[[groups:bulk-invite]]</button>
 </div>
 
 <table component="groups/invited" class="table table-hover">

package/templates/partials/groups/list.tpl

@@ -5,8 +5,8 @@
 		<a href="{config.relative_path}/groups/{./slug}" class="d-block h-100 text-reset text-decoration-none">
 			<div class="card-body d-flex flex-column gap-1 border border-top-0 rounded-bottom h-100">
 				<div class="d-flex">
-					<div class="flex-1 fs-6 fw-semibold">{./displayName}</div>
-					<div class="text-sm"><i class="text-muted fa-solid fa-user"></i> {./memberCount}</div>
+					<div class="flex-grow-1 fs-6 fw-semibold">{./displayName}</div>
+					<div class="flex-shrink-0 text-sm"><i class="text-muted fa-solid fa-user"></i> {./memberCount}</div>
 				</div>
 				<div class="text-sm">{./description}</div>
 			</div>