feat: display groups on the account page (#296)

Co-authored-by: Elias Schneider <login@eliasschneider.com>

frontend/src/lib/components/user-group-selection.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import AdvancedTable from '$lib/components/advanced-table.svelte';
+	import * as Table from '$lib/components/ui/table';
+	import UserGroupService from '$lib/services/user-group-service';
+	import type { Paginated } from '$lib/types/pagination.type';
+	import type { UserGroup } from '$lib/types/user-group.type';
+
+	let {
+		groups: initialGroups,
+		selectionDisabled = false,
+		selectedGroupIds = $bindable()
+	}: {
+		groups: Paginated<UserGroup>;
+		selectionDisabled?: boolean;
+		selectedGroupIds: string[];
+	} = $props();
+
+	const userGroupService = new UserGroupService();
+
+	let groups = $state(initialGroups);
+</script>
+
+<AdvancedTable
+	items={groups}
+	onRefresh={async (o) => (groups = await userGroupService.list(o))}
+	columns={[{ label: 'Name', sortColumn: 'name' }]}
+	bind:selectedIds={selectedGroupIds}
+	{selectionDisabled}
+>
+	{#snippet rows({ item })}
+		<Table.Cell>{item.name}</Table.Cell>
+	{/snippet}
+</AdvancedTable>