Merge pull request #16503 from athoik/user_groups_nav

feat: Allow navigating to user group from user edit

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

@@ -1,6 +1,6 @@
 <script>
 	import { toast } from 'svelte-sonner';
-	import { getContext } from 'svelte';
+	import { onMount, getContext } from 'svelte';
 
 	const i18n = getContext('i18n');
 
@@ -10,6 +10,7 @@
 	import User from '$lib/components/icons/User.svelte';
 	import UserCircleSolid from '$lib/components/icons/UserCircleSolid.svelte';
 	import GroupModal from './EditGroupModal.svelte';
+	import { querystringValue } from '$lib/utils';
 
 	export let users = [];
 	export let group = {
@@ -44,6 +45,13 @@
 			setGroups();
 		}
 	};
+
+	onMount(() => {
+		const groupId = querystringValue('id');
+		if (groupId && groupId === group.id) {
+			showEdit = true;
+		}
+	});
 </script>
 
 <GroupModal

src/lib/components/admin/Users/UserList/EditUserModal.svelte

@@ -4,6 +4,8 @@
 	import { createEventDispatcher } from 'svelte';
 	import { onMount, getContext } from 'svelte';
 
+	import { goto } from '$app/navigation';
+
 	import { updateUserById, getUserGroupsById } from '$lib/apis/users';
 
 	import Modal from '$lib/components/common/Modal.svelte';
@@ -127,7 +129,13 @@
 										<div class="flex flex-wrap gap-1 my-0.5 -mx-1">
 											{#each userGroups as userGroup}
 												<span class="px-2 py-0.5 rounded-full bg-gray-100 dark:bg-gray-850 text-xs">
-													{userGroup.name}
+													<a
+														href={'/admin/users/groups?id=' + userGroup.id}
+														on:click|preventDefault={() =>
+															goto('/admin/users/groups?id=' + userGroup.id)}
+													>
+														{userGroup.name}
+													</a>
 												</span>
 											{/each}
 										</div>