nodebb-theme-harmony 0.0.1

package/templates/partials/category-selector-content.tpl

@@ -0,0 +1,35 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
+    <span component="category-selector-selected">
+        {{{ if (selectedCategory && !showCategorySelectLabel) }}}
+        <span class="category-item">
+            {buildCategoryIcon(selectedCategory, "24px", "rounded-circle")}
+            {selectedCategory.name}
+        </span>
+        {{{ else }}}
+    <span class="visible-sm-inline visible-md-inline visible-lg-inline">{{{ if selectCategoryLabel }}}{selectCategoryLabel}{{{ else }}}[[topic:thread_tools.select_category]]{{{ end }}}</span><span class="visible-xs-inline"><i class="fa fa-fw {{{ if selectCategoryIcon }}}{selectCategoryIcon}{{{ else }}}fa-list{{{ end }}}"></i></span>
+    {{{ end }}}</span> <span class="caret"></span>
+</button>
+<div component="category-selector-search" class="hidden position-absolute">
+    <input type="text" class="form-control" autocomplete="off">
+</div>
+<ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
+    <li component="category/no-matches" role="presentation" class="category hidden">
+        <a class="dropdown-item" role="menu-item">[[search:no-matches]]</a>
+    </li>
+    {{{each categoryItems}}}
+    <li role="presentation" class="category {{{ if ../disabledClass }}}disabled {{{ end }}}" data-cid="{../cid}" data-name="{../name}" data-parent-cid="{../parentCid}">
+        <a class="dropdown-item" role="menu-item">{../level}
+            <span component="category-markup" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">
+                <div class="category-item d-inline-block">
+                    {{{ if ./icon }}}
+                    {buildCategoryIcon(@value, "24px", "rounded-circle")}
+                    {{{ end }}}
+                    {./name}
+                </div>
+            </span>
+        </a>
+    </li>
+    {{{ end }}}
+</ul>

package/templates/partials/category-selector-right.tpl

@@ -0,0 +1,5 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<div component="category-selector" class="btn-group right category-dropdown-container bottom-sheet">
+<!-- IMPORT partials/category-selector-content.tpl -->
+</div>

package/templates/partials/category-selector.tpl

@@ -0,0 +1,5 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<div component="category-selector" class="btn-group bottom-sheet">
+<!-- IMPORT partials/category-selector-content.tpl -->
+</div>

package/templates/partials/chats/dropdown.tpl

@@ -0,0 +1,40 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<!-- IF rooms.length -->
+{{{each rooms}}}
+<li class="<!-- IF ../unread -->unread<!-- ENDIF ../unread -->" data-roomid="{rooms.roomId}">
+	{{{each rooms.users}}}
+	<!-- IF @first -->
+	<div class="main-avatar">
+		<!-- IMPORT partials/chats/user.tpl -->
+	</div>
+	<!-- ENDIF @first -->
+	{{{end}}}
+
+	<ul class="members">
+		{{{each rooms.users}}}
+		<li>
+			<!-- IMPORT partials/chats/user.tpl -->
+		</li>
+		{{{end}}}
+	</ul>
+
+	<div class="notification-chat-content">
+		<strong class="room-name">
+			<!-- IF !rooms.lastUser.uid -->
+			<span>[[modules:chat.no-users-in-room]]</span>
+			<!-- ELSE -->
+			<!-- IF rooms.roomName -->{rooms.roomName}<!-- ELSE -->{rooms.usernames}<!-- ENDIF rooms.roomName -->
+			<!-- ENDIF !rooms.lastUser.uid -->
+		</strong>
+		<span class="teaser-content">
+			<strong class="teaser-username">{rooms.teaser.user.username}:</strong>
+			{rooms.teaser.content}
+		</span>
+	</div>
+	<div class="teaser-timestamp notification-chat-controls">{rooms.teaser.timeago}</div>
+</li>
+{{{end}}}
+<!-- ELSE -->
+<li class="no_active"><a href="#">[[modules:chat.no_active]]</a></li>
+<!-- ENDIF rooms.length -->

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

@@ -0,0 +1,36 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<!-- IF roomId -->
+<div component="chat/messages" class="expanded-chat" data-roomid="{roomId}">
+	<div component="chat/header" class="d-flex align-items-center px-3">
+		<span class="members flex-grow-1">
+			[[modules:chat.chatting_with]]:
+			{{{each users}}}
+			<a href="{config.relative_path}/uid/{../uid}">{../username}</a><!-- IF !@last -->,<!-- END -->
+			{{{end}}}
+		</span>
+
+		<button type="button" class="btn btn-link d-none d-md-block p-2 text-muted" data-action="pop-out" aria-hidden="true" aria-label="Pop Out"><i class="fa fa-compress"></i></button>
+		<!-- IMPORT partials/chats/options.tpl -->
+		<button type="button" class="btn-close" aria-hidden="true" aria-label="Close" data-action="close"></button>
+	</div>
+	<div class="position-relative">
+		<div component="chat/messages/scroll-up-alert" class="position-absolute scroll-up-alert alert alert-info hidden w-100" role="button" style="z-index: 1;">[[modules:chat.scroll-up-alert]]</div>
+	</div>
+	<ul class="chat-content">
+		<!-- IMPORT partials/chats/messages.tpl -->
+	</ul>
+	<div component="chat/composer">
+		<textarea component="chat/input" placeholder="[[modules:chat.placeholder]]" class="form-control chat-input mousetrap" rows="2"></textarea>
+		<button class="btn btn-primary" type="button" data-action="send"><i class="fa fa-fw fa-2x fa-paper-plane"></i></button>
+		<span component="chat/message/remaining">{maximumChatMessageLength}</span>
+		<form component="chat/upload" method="post" enctype="multipart/form-data">
+			<input type="file" name="files[]" multiple class="hidden"/>
+		</form>
+	</div>
+</div>
+<!-- ELSE -->
+<div class="alert alert-info me-3">
+	[[modules:chat.no-messages]]
+</div>
+<!-- ENDIF roomId -->

package/templates/partials/chats/message.tpl

@@ -0,0 +1,36 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<li component="chat/message" class="chat-message mx-2 pe-2 fw-light clear<!-- IF ../deleted --> deleted<!-- 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">
+		<a href="{config.relative_path}/user/{messages.fromUser.userslug}">{buildAvatar(messages.fromUser, "32px", true, "not-responsive")}</a>
+		<span class="chat-user fw-bold"><a href="{config.relative_path}/user/{messages.fromUser.userslug}">{messages.fromUser.displayname}</a></span>
+		<!-- IF ../fromUser.banned -->
+		<span class="badge bg-danger">[[user:banned]]</span>
+		<!-- END -->
+		<!-- IF ../fromUser.deleted -->
+		<span class="badge bg-danger">[[user:deleted]]</span>
+		<!-- END -->
+		<small class="chat-timestamp text-muted ms-2 timeago" title="{messages.timestampISO}"></small>
+		<!-- IF messages.edited -->
+		<div class="text-muted float-end" title="[[global:edited]] {messages.editedISO}"><i class="fa fa-edit"></i></span></div>
+		<!-- ENDIF messages.edited -->
+	</div>
+	<div class="message-body-wrapper">
+		<div component="chat/message/body" class="message-body">
+			{messages.content}
+		</div>
+
+		<!-- IF !config.disableChatMessageEditing -->
+		<!-- IF messages.self -->
+		<div class="btn-group controls">
+			<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-times"></i></button>
+			<button class="btn btn-sm btn-link" data-action="restore"><i class="fa fa-repeat"></i></button>
+			<!-- 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 -->
+		</div>
+		<!-- ENDIF messages.self -->
+		<!-- ENDIF !config.disableChatMessageEditing -->
+	</div>
+</li>

package/templates/partials/chats/messages.tpl

@@ -0,0 +1,9 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+{{{each messages}}}
+	{{{ if !./system }}}
+	<!-- IMPORT partials/chats/message.tpl -->
+	{{{ else }}}
+	<!-- IMPORT partials/chats/system-message.tpl -->
+	{{{ end }}}
+{{{end}}}

package/templates/partials/chats/options.tpl

@@ -0,0 +1,26 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<div class="dropdown">
+  <button class="btn btn-link p-2 text-muted 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">
+    <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>
+    </li>
+    <li>
+      <a class="dropdown-item" href="#" data-action="rename"><i class="fa fa-fw 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>
+    </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>
+    </li>
+    {{{end}}}
+    <!-- END -->
+  </ul>
+</div>

package/templates/partials/chats/recent_room.tpl

@@ -0,0 +1,33 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<li component="chat/recent/room" data-roomid="{rooms.roomId}" class="<!-- IF rooms.unread -->unread<!-- ENDIF rooms.unread -->">
+	{{{each rooms.users}}}
+	<!-- IF @first -->
+	<div class="main-avatar me-2">
+		<!-- IMPORT partials/chats/user.tpl -->
+	</div>
+	<!-- ENDIF @first -->
+	{{{end}}}
+
+	{{{ if rooms.users.length }}}
+	<ul class="members">
+		{{{each rooms.users}}}
+		<li>
+			<!-- IMPORT partials/chats/user.tpl -->
+		</li>
+		{{{end}}}
+	</ul>
+	{{{ end }}}
+
+	<div class="notification-chat-content flex-grow-1">
+		<!-- IF !rooms.lastUser.uid -->
+		<div class="p-3 text-center h-100">
+			<span>[[modules:chat.no-users-in-room]]</span>
+		</div>
+		<!-- ELSE -->
+		<strong class="room-name">
+			<span component="chat/title"><!-- IF rooms.roomName -->{rooms.roomName}<!-- ELSE -->{rooms.usernames}<!-- ENDIF rooms.roomName --></span>
+		</strong>
+		<!-- ENDIF !rooms.lastUser.uid -->
+	</div>
+</li>

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

@@ -0,0 +1,5 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<li component="chat/system-message" class="system-message fs-6 py-3 clear" data-index="{messages.index}" data-mid="{messages.messageId}" data-uid="{messages.fromuid}" data-self="{messages.self}" data-break="0" data-timestamp="{messages.timestamp}">
+	[[modules:chat.system.{messages.content}, {messages.fromUser.username}]]
+</li>

package/templates/partials/chats/user.tpl

@@ -0,0 +1,3 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<a href="{config.relative_path}/user/{rooms.users.userslug}">{buildAvatar(rooms.users, "28px", true)}</a>

package/templates/partials/chats-menu.tpl

@@ -0,0 +1,43 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+{{{ if config.loggedIn }}}
+<ul class="nav nav-pills">
+	<li class="nav-item">
+		<a class="nav-link" href="#" data-bs-target="#notifications" data-bs-toggle="tab"><span class="counter unread-count" component="notifications/icon" data-content="{unreadCount.notification}"></span> <i class="fa fa-fw fa-bell"></i></a>
+	</li>
+	{{{ if !config.disableChat }}}
+	<li class="nav-item">
+		<a class="nav-link" href="#" data-bs-target="#chats" data-bs-toggle="tab"><i class="counter unread-count" component="chat/icon" data-content="{unreadCount.chat}"></i> <i class="fa fa-fw fa-comment"></i></a>
+	</li>
+	{{{ end }}}
+	<li class="nav-item">
+		<a class="nav-link active" href="#" data-bs-target="#profile" data-bs-toggle="tab">
+			{buildAvatar(user, "24px", true, "user-icon")}
+			<i component="user/status" class="fa fa-fw fa-circle status {user.status}"></i>
+		</a>
+	</li>
+</ul>
+
+<div class="tab-content">
+	<div class="tab-pane fade show active" id="profile">
+		<section class="menu-section" data-section="profile">
+			<ul class="menu-section-list dropdown-menu show text-bg-dark w-100 border-0" component="header/usercontrol"></ul>
+		</section>
+	</div>
+	<div class="tab-pane fade" id="notifications">
+		<section class="menu-section text-bg-dark" data-section="notifications">
+			<ul class="menu-section-list notification-list-mobile" component="notifications/list"></ul>
+			<p class="menu-section-list"><a href="{relative_path}/notifications">[[notifications:see_all]]</a></p>
+		</section>
+	</div>
+	{{{ if !config.disableChat }}}
+	<div class="tab-pane fade" id="chats">
+		<section class="menu-section text-bg-dark" data-section="chats">
+			<ul class="menu-section-list chat-list" component="chat/list">
+				<a class="navigation-link" href="{relative_path}/user/{user.userslug}/chats">[[modules:chat.see_all]]</a>
+			</ul>
+		</section>
+	</div>
+	{{{ end }}}
+</div>
+{{{ end }}}

package/templates/partials/cookie-consent.tpl

@@ -0,0 +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>

package/templates/partials/flags/filters.tpl

@@ -0,0 +1,99 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<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>
+		<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>
+	</div>
+</div>
+
+<div class="card mb-3">
+	<div class="card-header">
+		[[flags:quick-filters]]
+	</div>
+	<div class="card-body">
+		<ul>
+			<li><a href="{config.relative_path}/flags?quick=mine">[[flags:filter-quick-mine]]</a></li>
+		</ul>
+	</div>
+</div>
+
+<div class="card mb-3">
+	<div class="card-header">
+		[[flags:filters]]
+	</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>
+				</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>
+				</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>
+
+			<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" />
+				</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" />
+				</div>
+
+				<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" />
+				</div>
+			</fieldset>
+
+			<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>
+</div>

package/templates/partials/groups/admin.tpl

@@ -0,0 +1,197 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<div class="card mb-3">
+	<div class="card-header">
+		<div class="fs-5">
+			<i class="fa fa-clock-o"></i> [[groups:details.pending]]
+			<!-- IF group.pending.length -->
+			<div class="btn-group float-end">
+				<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+					[[global:more]] <span class="caret"></span>
+				</button>
+				<ul class="dropdown-menu" role="menu">
+					<li><a class="dropdown-item" href="#" data-ajaxify="false" data-action="acceptAll">[[groups:pending.accept_all]]</a></li>
+					<li><a class="dropdown-item" href="#" data-ajaxify="false" data-action="rejectAll">[[groups:pending.reject_all]]</a></li>
+				</ul>
+			</div>
+			<!-- ENDIF group.pending.length -->
+		</div>
+	</div>
+	<div class="card-body">
+		<table component="groups/pending" class="table table-striped table-hover">
+			<!-- IF !group.pending.length -->
+			<div class="alert alert-info">[[groups:pending.none]]</div>
+			<!-- ENDIF !group.pending.length -->
+			{{{each group.pending}}}
+			<tr data-uid="{group.pending.uid}">
+				<td class="p-2">
+					<a href="{config.relative_path}/user/{group.pending.userslug}">{buildAvatar(group.pending, "24px", true)}</a>
+				</td>
+				<td class="member-name p-2">
+					<a href="{config.relative_path}/user/{group.pending.userslug}">{group.pending.username}</a>
+				</td>
+				<td class="p-2">
+					<div class="btn-group float-end">
+						<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+							[[global:more]] <span class="caret"></span>
+						</button>
+						<ul class="dropdown-menu" role="menu">
+							<li><a class="dropdown-item" href="#" data-ajaxify="false" data-action="accept">[[groups:pending.accept]]</a></li>
+							<li><a class="dropdown-item" href="#" data-ajaxify="false" data-action="reject">[[groups:pending.reject]]</a></li>
+						</ul>
+					</div>
+				</td>
+			</tr>
+			{{{end}}}
+		</table>
+	</div>
+</div>
+<div class="card mb-3">
+	<div class="card-header">
+		<span class="fs-5">
+			<i class="fa fa-gift"></i> [[groups:details.invited]]
+		</span>
+	</div>
+	<div class="card-body">
+		<div class="input-group mb-2">
+			<input class="form-control" type="text" component="groups/members/invite" placeholder="[[groups:invited.search]]"/>
+			<span class="input-group-text search-button"><i class="fa fa-search"></i></span>
+		</div>
+
+		<div class="mb-2">
+			<textarea class="form-control" component="groups/members/bulk-invite" placeholder="[[groups:bulk-invite-instructions]]"></textarea>
+		</div>
+
+		<div class="mb-2 clearfix">
+			<button class="btn btn-outline-secondary btn-sm float-end" component="groups/members/bulk-invite-button">[[groups:bulk-invite]]</button>
+		</div>
+
+		<table component="groups/invited" class="table table-striped table-hover">
+			<!-- IF !group.invited.length -->
+			<div class="alert alert-info">[[groups:invited.none]]</div>
+			<!-- ENDIF !group.invited.length -->
+			{{{each group.invited}}}
+			<tr data-uid="{group.invited.uid}">
+				<td class="p-2">
+					<a href="{config.relative_path}/user/{group.invited.userslug}">{buildAvatar(group.invited, "24px", true)}</a>
+				</td>
+				<td class="member-name p-2">
+					<a href="{config.relative_path}/user/{group.invited.userslug}">{group.invited.username}</a>
+				</td>
+				<td class="p-2">
+					<div class="btn-group float-end">
+						<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+							[[global:more]] <span class="caret"></span>
+						</button>
+						<ul class="dropdown-menu" role="menu">
+							<li><a class="dropdown-item" href="#" data-ajaxify="false" data-action="rescindInvite">[[groups:invited.uninvite]]</a></li>
+						</ul>
+					</div>
+				</td>
+			</tr>
+			{{{end}}}
+		</table>
+	</div>
+</div>
+
+<div class="card mb-3">
+	<div class="card-header pointer" data-bs-toggle="collapse" data-bs-target=".options">
+		<span class="fs-5">
+			<i class="fa fa-caret-down float-end"></i>
+			<i class="fa fa-cogs"></i> [[groups:details.owner_options]]
+		</span>
+	</div>
+
+	<div class="card-body options collapse">
+		<form component="groups/settings" role="form">
+			<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}" />
+			</div>
+			<div class="mb-3">
+				<label class="form-label" for="name">[[groups:details.description]]</label>
+				<textarea class="form-control" name="description" id="description" type="text" maxlength="255">{group.description}</textarea>
+			</div>
+
+			<hr />
+			<div class="mb-3">
+				<label class="form-label" for="memberPostCids">[[groups:details.member-post-cids]]</label>
+				<div class="row">
+					<div class="col-md-6">
+						<input id="memberPostCids" type="text" class="form-control" value="{group.memberPostCids}">
+					</div>
+					<div class="col-md-6 member-post-cids-selector">
+						<!-- IMPORT partials/category-selector.tpl -->
+					</div>
+				</div>
+			</div>
+
+			<hr />
+
+			<div class="mb-3 user-title-option">
+				<label class="form-label" for="userTitle">[[groups:details.badge_text]]</label>
+				<input component="groups/userTitleOption" class="form-control" name="userTitle" id="userTitle" type="text" maxlength="40" value="{group.userTitleEscaped}"<!-- IF !group.userTitleEnabled --> disabled<!-- ENDIF !group.userTitleEnabled --> />
+			</div>
+
+			<div class="mb-3 user-title-option">
+				<label>[[groups:details.badge_preview]]</label><br />
+				<span class="badge rounded-1 text-uppercase text-truncate rounded-1 {{{ if !group.userTitleEnabled }}} hide{{{ end }}}" style="max-width:150px; color: {group.textColor}; background-color: {group.labelColor}"><i class="fa{{{ if group.icon }}} {group.icon}{{{ if ./userTitle}}}me-1{{{ end }}}{{{ end }}}"></i><span class="badge-text">{{{ if group.userTitle }}}{group.userTitle}{{{ end }}}</span></span>
+
+				<hr/>
+				<button component="groups/userTitleOption" type="button" class="btn btn-outline-secondary btn-sm" data-action="icon-select"<!-- IF !group.userTitleEnabled --> disabled<!-- ENDIF !group.userTitleEnabled -->>[[groups:details.change_icon]]</button>
+				<div>
+					<label class="form-label" for="labelColor" class="badge-color-label">[[groups:details.change_label_colour]]</label>
+					<input component="groups/userTitleOption" type="color" name="labelColor" value="<!-- IF group.labelColor -->{group.labelColor}<!-- ENDIF group.labelColor -->" />
+				</div>
+				<div>
+					<label class="form-label" for="color" class="badge-color-label">[[groups:details.change_text_colour]]</label>
+					<input component="groups/userTitleOption" type="color" name="textColor" value="<!-- IF group.textColor -->{group.textColor}<!-- ENDIF group.textColor -->" />
+				</div>
+				<input type="hidden" name="icon" value="<!-- IF group.icon -->{group.icon}<!-- ENDIF group.icon -->" />
+
+				<div id="icons" class="hidden">
+					<div class="icon-container">
+						<div class="row nbb-fa-icons">
+							<!-- IMPORT partials/fontawesome.tpl -->
+						</div>
+					</div>
+				</div>
+			</div>
+			<hr />
+			<div class="form-check">
+				<label class="form-check-label">[[groups:details.userTitleEnabled]]</label>
+				<input class="form-check-input" name="userTitleEnabled" type="checkbox"<!-- IF group.userTitleEnabled --> checked<!-- ENDIF group.userTitleEnabled -->>
+			</div>
+			<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 -->>
+				<!-- IF !allowPrivateGroups -->
+				<p class="form-text">
+					[[groups:details.private_system_help]]
+				</p>
+				<!-- ENDIF !allowPrivateGroups -->
+				<p class="form-text">
+					[[groups:details.private_help]]
+				</p>
+			</div>
+			<div class="form-check">
+				<label class="form-check-label">[[groups:details.disableJoinRequests]]</label>
+				<input class="form-check-input" name="disableJoinRequests" type="checkbox"<!-- IF group.disableJoinRequests --> checked<!-- ENDIF group.disableJoinRequests -->>
+			</div>
+			<div class="form-check">
+				<label class="form-check-label">[[groups:details.disableLeave]]</label>
+				<input class="form-check-input" name="disableLeave" type="checkbox"{{{if group.disableLeave}}} checked{{{end}}}>
+			</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 -->>
+				<p class="form-text">
+					[[groups:details.hidden_help]]
+				</p>
+			</div>
+
+			<button class="btn btn-link text-danger float-end" type="button" data-action="delete">[[groups:details.delete_group]]</button>
+			<button class="btn btn-primary" type="button" data-action="update">[[global:save_changes]]</button>
+		</form>
+	</div>
+</div>

package/templates/partials/groups/badge.tpl

@@ -0,0 +1,3 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<a href="{config.relative_path}/groups/{./slug}" class="badge rounded-1 text-uppercase text-truncate" 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>

package/templates/partials/groups/list.tpl

@@ -0,0 +1,23 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+	{{{each groups}}}
+	<div class="col-lg-4 col-md-6 col-sm-12 mb-3" component="groups/summary" data-slug="{groups.slug}">
+		<div class="card h-100">
+			<a href="{config.relative_path}/groups/{groups.slug}" class="card-header list-cover" style="<!-- IF groups.cover:thumb:url -->background-image: url({groups.cover:thumb:url});<!-- ENDIF groups.cover:thumb:url -->">
+				<h5 class="card-title">{groups.displayName} <small>{groups.memberCount}</small></h5>
+			</a>
+			<div class="card-body">
+				<ul class="members">
+					{{{each groups.members}}}
+					<li>
+						<a href="{config.relative_path}/user/{groups.members.userslug}">{buildAvatar(groups.members, "24px", true)}</a>
+					</li>
+					{{{end}}}
+					<!-- IF groups.truncated -->
+					<li class="truncated"><i class="fa fa-ellipsis-h"></i></li>
+					<!-- ENDIF groups.truncated -->
+				</ul>
+			</div>
+		</div>
+	</div>
+	{{{end}}}