refac

src/lib/components/admin/Users/Groups.svelte

@@ -10,6 +10,9 @@
 	import EditGroupModal from './Groups/EditGroupModal.svelte';
 	import GroupItem from './Groups/GroupItem.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
+	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
+	import Check from '$lib/components/icons/Check.svelte';
+	import Select from '$lib/components/common/Select.svelte';
 	import { createNewGroup, getGroups } from '$lib/apis/groups';
 	import { getUserDefaultPermissions, updateUserDefaultPermissions } from '$lib/apis/users';
 
@@ -20,6 +23,12 @@
 	let groups = [];
 
 	let query = '';
+	let sortBy = 'members';
+
+	const sortItems = [
+		{ value: 'members', label: $i18n.t('Members') },
+		{ value: 'name', label: $i18n.t('Name') }
+	];
 
 	$: filteredGroups = groups
 		.filter((group) => {
@@ -32,6 +41,10 @@
 			}
 		})
 		.sort((a, b) => {
+			if (sortBy === 'name') {
+				return a.name.localeCompare(b.name);
+			}
+
 			return (b.member_count ?? 0) - (a.member_count ?? 0) || a.name.localeCompare(b.name);
 		});
 
@@ -158,6 +171,31 @@
 					</div>
 				{/if}
 			</div>
+
+			<Select
+				bind:value={sortBy}
+				items={sortItems}
+				placeholder={$i18n.t('Sort')}
+				triggerClass="relative h-8 shrink-0 flex items-center gap-1 px-1.5 py-1.5 bg-transparent rounded-xl text-[13px] font-normal text-gray-700 transition hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100"
+				labelClass="inline-flex h-input outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden"
+				align="end"
+			>
+				<svelte:fragment slot="trigger" let:selectedLabel>
+					<span
+						class="inline-flex h-input outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden"
+					>
+						{selectedLabel}
+					</span>
+					<ChevronDown className="size-3.5" strokeWidth="2.5" />
+				</svelte:fragment>
+
+				<svelte:fragment slot="item" let:item let:selected>
+					{item.label}
+					<div class="ml-auto {selected ? '' : 'invisible'}">
+						<Check />
+					</div>
+				</svelte:fragment>
+			</Select>
 		</div>
 
 		{#if filteredGroups.length !== 0}

src/lib/components/admin/Users/Groups/GroupItem.svelte

@@ -7,21 +7,22 @@
 
 	import { deleteGroupById, updateGroupById } from '$lib/apis/groups';
 
-	import Pencil from '$lib/components/icons/Pencil.svelte';
 	import EditGroupModal from './EditGroupModal.svelte';
 
 	export let group = {
+		id: '',
 		name: 'Admins',
-		user_ids: [1, 2, 3]
+		description: '',
+		permissions: {},
+		user_ids: [1, 2, 3],
+		member_count: 0
 	};
 	export let defaultPermissions = {};
 
 	export let setGroups = () => {};
 
 	let showEdit = false;
-	$: hasCustomPermissions =
-		group?.permissions &&
-		Object.keys(group.permissions).some((key) => group.permissions[key] !== undefined);
+	$: hasCustomPermissions = Object.keys(group?.permissions ?? {}).length > 0;
 
 	const updateHandler = async (_group) => {
 		const res = await updateGroupById(localStorage.token, group.id, _group).catch((error) => {
@@ -66,7 +67,7 @@
 />
 
 <button
-	class="group flex cursor-pointer text-left w-full px-2.5 py-2.5 rounded-2xl hover:bg-gray-50/70 dark:hover:bg-gray-850/50 transition"
+	class="group flex cursor-pointer text-left w-full px-2.5 py-2 rounded-2xl border-b border-gray-100/60 last:border-b-0 hover:bg-gray-50/70 dark:border-gray-850/60 dark:hover:bg-gray-850/50 transition"
 	on:click={() => {
 		showEdit = true;
 	}}
@@ -86,7 +87,7 @@
 					</div>
 				</div>
 
-				<div class="flex min-w-0 items-center gap-1.5 px-1 text-xs text-gray-500">
+				<div class="flex min-w-0 items-center gap-1.5 text-xs text-gray-500">
 					<div class="line-clamp-1 min-w-0">
 						{#if group?.description}
 							{group.description}
@@ -101,23 +102,16 @@
 						{#if hasCustomPermissions}
 							{$i18n.t('Custom permissions')}
 						{:else}
-							{$i18n.t('Default permissions')}
+							{$i18n.t('Uses defaults')}
 						{/if}
 					</div>
 				</div>
 			</div>
 
-			<div class="flex shrink-0 items-center gap-1.5">
-				<div
-					class="hidden text-xs text-gray-500 transition group-hover:text-gray-700 dark:group-hover:text-gray-300 sm:block"
-				>
-					{$i18n.t('Edit')}
-				</div>
-				<div
-					class="flex self-center p-1.5 text-gray-500 transition group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-gray-100"
-				>
-					<Pencil className="size-3.5" />
-				</div>
+			<div
+				class="shrink-0 px-1.5 text-xs text-gray-500 transition group-hover:text-gray-800 dark:text-gray-400 dark:group-hover:text-gray-200"
+			>
+				{$i18n.t('Edit')}
 			</div>
 		</div>
 	</div>