nodebb-theme-harmony 0.0.1 → 0.0.3

package/templates/partials/chats/message.tpl

@@ -1,36 +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 {{{ if !messages.newSet }}}hidden{{{ end }}} pb-2">
+		<a href="{config.relative_path}/user/{messages.fromUser.userslug}" class="text-decoration-none">{buildAvatar(messages.fromUser, "24px", false, "not-responsive rounded")}</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 hover-parent">
+		<div component="chat/message/body" class="message-body ps-0 py-0 overflow-auto">
+			{messages.content}
+		</div>
 
-<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>
+		<!-- IF !config.disableChatMessageEditing -->
+		<!-- IF 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 -->
+				<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>
+		</div>
+		<!-- ENDIF messages.self -->
+		<!-- ENDIF !config.disableChatMessageEditing -->
+	</div>
 </li>

package/templates/partials/chats/recent_room.tpl

@@ -1,33 +1,20 @@
-<!-- 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 -->
+<li component="chat/recent/room" data-roomid="{rooms.roomId}" class="{{{ if rooms.unread }}}unread{{{ end }}} card card-body p-1 mb-1 border-0 pointer">
+	<div class="members">
+	{{{ each rooms.users}}}
+	{{{ if @first }}}
+	<div class="main-avatar">
+		<a href="{config.relative_path}/user/{rooms.users.userslug}" class="text-decoration-none">{buildAvatar(rooms.users, "24px", true)}</a>
+		<span component="chat/title">{{{ if rooms.roomName }}}{rooms.roomName}{{{ else }}}{rooms.usernames}{{{ end }}}</span>
 	</div>
-	<!-- ENDIF @first -->
-	{{{end}}}
-
-	{{{ if rooms.users.length }}}
-	<ul class="members">
-		{{{each rooms.users}}}
-		<li>
-			<!-- IMPORT partials/chats/user.tpl -->
-		</li>
-		{{{end}}}
-	</ul>
+	{{{ else }}}
+	<a href="{config.relative_path}/user/{rooms.users.userslug}" class="text-decoration-none">{buildAvatar(rooms.users, "24px", true)}</a>
+	{{{ end }}}
+	{{{ end }}}
+	{{{ if !./users.length}}}
+	<span class="avatar avatar-rounded text-bg-warning" component="avatar/icon" style="--avatar-size: 24px;">?</span>
+	{{{ if !rooms.lastUser.uid }}}
+	<span class="text-muted">[[modules:chat.no-users-in-room]]</span>
+	{{{ end }}}
 	{{{ 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

@@ -1,5 +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 component="chat/system-message" class="system-message text-muted small py-2 gap-3 d-flex align-items-center justify-content-center" data-index="{messages.index}" data-mid="{messages.messageId}" data-uid="{messages.fromuid}" data-self="{messages.self}" data-break="0" data-timestamp="{messages.timestamp}">
+	<hr class="d-inline-block my-1" style="width: 10%;"/>
+	[[modules:chat.system.{messages.content}, {messages.fromUser.username}]]
+	<hr class="d-inline-block my-1" style="width: 10%;"/>
 </li>

package/templates/partials/chats/user.tpl

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

package/templates/partials/groups/admin.tpl

@@ -1,197 +1,96 @@
-<!-- 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="options">
+	<form component="groups/settings" role="form">
+		<div class="row">
+			<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}" />
+				</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>
 
-<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="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>
+					{{{ end }}}
+					<p class="form-text text-xs m-0">
+						[[groups:details.private_help]]
+					</p>
+				</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 text-xs m-0">
+						[[groups:details.hidden_help]]
+					</p>
+				</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 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{{{ end }}}>
+				</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>
-
-			<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 class="col-12 col-lg-6">
+				<div class="d-flex gap-2 align-items-center">
+					<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{{{ end }}}>
 					</div>
+					<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 group.userTitle}}} me-1{{{ end }}}{{{ end }}}"></i><span class="badge-text">{{{ if group.userTitle }}}{group.userTitle}{{{ end }}}</span></span>
 				</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 class="mb-2">
+					<label class="form-label text-xs text-muted" for="userTitle">[[groups:details.badge_text]]</label>
+					<div class="d-flex gap-1">
+						<input component="groups/userTitleOption" class="form-control" name="userTitle" id="userTitle" type="text" maxlength="40" value="{group.userTitleEscaped}"{{{ if !group.userTitleEnabled }}} disabled{{{ end }}} />
+						<button component="groups/userTitleOption" type="button" class="btn btn-outline-secondary text-nowrap" data-action="icon-select"{{{ if !group.userTitleEnabled }}} disabled{{{ end }}}>[[groups:details.change_icon]]</button>
+						<input type="hidden" name="icon" value="{{{ if group.icon }}}{group.icon}{{{ end }}}" />
+						<div id="icons" class="hidden">
+							<div class="icon-container">
+								<div class="row nbb-fa-icons">
+									<!-- IMPORT partials/fontawesome.tpl -->
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="mb-2">
+					<label class="form-label text-xs text-muted" for="labelColor" class="badge-color-label">[[groups:details.change_label_colour]]</label>
+					<input class="form-control" component="groups/userTitleOption" type="color" name="labelColor" value="{{{ if group.labelColor }}}{group.labelColor}{{{ end }}}" />
+				</div>
+				<div class="mb-2">
+					<label class="form-label text-xs text-muted" for="color" class="badge-color-label">[[groups:details.change_text_colour]]</label>
+					<input class="form-control" component="groups/userTitleOption" type="color" name="textColor" value="{{{ if group.textColor }}}{group.textColor}{{{ end }}}" />
+				</div>
 			</div>
+		</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 />
 
-				<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 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>
-				<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 class="col-md-6 member-post-cids-selector">
+					<!-- IMPORT partials/category-selector.tpl -->
 				</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>
+		</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>
+		<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>

package/templates/partials/groups/badge.tpl

@@ -1,3 +1 @@
-<!-- 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>
+<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>

package/templates/partials/groups/invited.tpl

@@ -0,0 +1,33 @@
+<label class="text-xs text-muted">[[groups:invited.search]]</label>
+<div class="input-group mb-2">
+	<input class="form-control" type="text" component="groups/members/invite"/>
+	<span class="input-group-text search-button"><i class="fa fa-search"></i></span>
+</div>
+
+<div class="mb-2">
+	<label class="text-xs text-muted">[[groups:bulk-invite-instructions]]</label>
+	<textarea class="form-control" component="groups/members/bulk-invite"></textarea>
+</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>
+</div>
+
+<table component="groups/invited" class="table table-hover">
+	{{{ if !group.invited.length }}}
+	<div class="alert alert-info">[[groups:invited.none]]</div>
+	{{{ end }}}
+	{{{each group.invited}}}
+	<tr data-uid="{group.invited.uid}" class="align-middle">
+		<td class="p-2">
+			<a class="text-decoration-none" href="{config.relative_path}/user/{group.invited.userslug}">{buildAvatar(group.invited, "24px", true)}</a>
+		</td>
+		<td class="member-name p-2 w-100">
+			<a href="{config.relative_path}/user/{group.invited.userslug}">{group.invited.username}</a>
+		</td>
+		<td class="p-2">
+			<button class="btn btn-outline-secondary btn-sm text-nowrap" data-action="rescindInvite">[[groups:invited.uninvite]]</button>
+		</td>
+	</tr>
+	{{{end}}}
+</table>

package/templates/partials/groups/list.tpl

@@ -1,23 +1,16 @@
-<!-- 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>
+{{{ each groups }}}
+<div class="col-xl-4 col-lg-6 col-sm-12 mb-3" component="groups/summary" data-slug="{./slug}">
+	<div class="card h-100 group-hover-bg border-0">
+		<a href="{config.relative_path}/groups/{./slug}" class="card-header border-bottom-0 pointer d-block list-cover" style="{{{ if ./cover:thumb:url }}}background-image: url({./cover:thumb:url});background-size: cover; min-height: 125px; background-position: {./cover:position}{{{ end }}}"></a>
+		<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>
+				<div class="text-sm">{./description}</div>
 			</div>
-		</div>
+		</a>
 	</div>
-	{{{end}}}
+</div>
+{{{ end }}}

package/templates/partials/groups/memberlist.tpl

@@ -1,41 +1,45 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<div class="d-flex mb-3">
-	<!-- IF group.isOwner -->
+<div class="d-flex {{{ if group.isOwner }}}justify-content-between{{{ else }}}justify-content-end{{{ end }}} mb-3">
+	{{{ if group.isOwner }}}
 	<div class="flex-shrink-0">
-		<button component="groups/members/add" type="button" class="btn btn-primary me-3" title="[[groups:details.add-member]]"><i class="fa fa-user-plus"></i></button>
+		<button component="groups/members/add" type="button" class="btn btn-primary btn-sm me-3" title="[[groups:details.add-member]]"><i class="fa fa-user-plus"></i> [[groups:details.add-member]]</button>
 	</div>
-	<!-- ENDIF group.isOwner -->
-	<div class="flex-grow-1">
+	{{{ end }}}
+	<div class="">
 		<div class="input-group">
-			<input class="form-control" type="text" component="groups/members/search" placeholder="[[global:search]]"/>
-			<span class="input-group-text search-button"><i class="fa fa-search"></i></span>
+			<input class="form-control form-control-sm" type="text" component="groups/members/search" placeholder="[[global:search]]"/>
+			<button class="btn btn-primary btn-sm search-button" type="button">
+				<i class="fa fa-search"></i>
+			</button>
 		</div>
 	</div>
 </div>
 
-<table component="groups/members" class="table table-striped table-hover" data-nextstart="{group.membersNextStart}">
+<table component="groups/members" class="table table-hover" data-nextstart="{group.membersNextStart}">
 	<tbody>
 	{{{each group.members}}}
-	<tr data-uid="{group.members.uid}">
+	<tr data-uid="{group.members.uid}" data-isowner="{{{ if group.members.isOwner }}}1{{{ else }}}0{{{ end }}}">
 		<td class="p-2">
-			<a href="{config.relative_path}/user/{group.members.userslug}">{buildAvatar(group.members, "24px", true)}</a>
+			<a class="text-decoration-none" href="{config.relative_path}/user/{group.members.userslug}">{buildAvatar(group.members, "24px", true)}</a>
 		</td>
-		<td class="member-name p-2">
-			<a class="align-text-top" href="{config.relative_path}/user/{group.members.userslug}">{group.members.username}</a>
-			<i title="[[groups:owner]]" class="user-owner-icon fa fa-star align-text-top text-warning <!-- IF !group.members.isOwner -->invisible<!-- ENDIF !group.members.isOwner -->"></i>
+		<td class="member-name p-2 w-100 ">
+			<div class="d-flex align-items-center justify-content-between">
+				<div class="d-flex align-items-center gap-2">
+					<a class="align-text-top" href="{config.relative_path}/user/{group.members.userslug}">{group.members.username}</a>
+					<i component="groups/owner/icon" title="[[groups:owner]]" class="user-owner-icon fa fa-star align-text-top text-warning <!-- IF !group.members.isOwner -->invisible<!-- ENDIF !group.members.isOwner -->"></i>
+				</div>
 
-			<!-- IF group.isOwner -->
-			<div class="owner-controls btn-group float-end">
-				<a class="btn btn-sm" href="#" data-ajaxify="false" data-action="toggleOwnership" title="[[groups:details.grant]]">
-					<i class="fa fa-star"></i>
-				</a>
+				{{{ if group.isOwner }}}
+				<div class="owner-controls btn-group">
+					<a class="btn btn-sm" href="#" data-ajaxify="false" data-action="toggleOwnership" title="[[groups:details.grant]]">
+						<i class="fa fa-star"></i>
+					</a>
 
-				<a class="btn btn-sm" href="#" data-ajaxify="false" data-action="kick" title="[[groups:details.kick]]">
-					<i class="fa fa-ban"></i>
-				</a>
+					<a class="btn btn-sm" href="#" data-ajaxify="false" data-action="kick" title="[[groups:details.kick]]">
+						<i class="fa fa-ban"></i>
+					</a>
+				</div>
+				{{{ end }}}
 			</div>
-			<!-- ENDIF group.isOwner -->
 		</td>
 	</tr>
 	{{{end}}}

package/templates/partials/groups/pending.tpl

@@ -0,0 +1,30 @@
+{{{ if group.pending.length }}}
+<div class="d-flex justify-content-end gap-2 mb-3">
+	<button class="btn btn-danger btn-sm" data-action="rejectAll">[[groups:pending.reject_all]]</button>
+	<button class="btn btn-success btn-sm" data-action="acceptAll">[[groups:pending.accept_all]]</button>
+
+</div>
+{{{ end }}}
+
+<table component="groups/pending" class="table table-hover">
+	{{{ if !group.pending.length }}}
+	<div class="alert alert-info">[[groups:pending.none]]</div>
+	{{{ end }}}
+	{{{each group.pending}}}
+	<tr data-uid="{group.pending.uid}" class="align-middle">
+		<td class="p-2">
+			<a class="text-decoration-none" href="{config.relative_path}/user/{group.pending.userslug}">{buildAvatar(group.pending, "24px", true)}</a>
+		</td>
+		<td class="member-name p-2 w-100">
+			<a href="{config.relative_path}/user/{group.pending.userslug}">{group.pending.username}</a>
+		</td>
+		<td class="p-2">
+			<div class="d-flex gap-2">
+				<button class="btn btn-danger btn-sm" data-action="reject">[[groups:pending.reject]]</a></li>
+				<button class="btn btn-success btn-sm" data-action="accept">[[groups:pending.accept]]</a></li>
+
+			</div>
+		</td>
+	</tr>
+	{{{end}}}
+</table>