From 5543f30c49bb486cffb926d1026e88f7d3e01a9e Mon Sep 17 00:00:00 2001
From: Athanasios Oikonomou <athoik@gmail.com>
Date: Tue, 12 Aug 2025 01:07:09 +0300
Subject: [PATCH 1/2] feat: Allow navigating to user group from user edit

This commit allow navigating from user edit to user group, allowing faster updates to groups.
The querystringValue function was moved to lib/utils to reuse it in multiple places.
---
 src/lib/components/admin/Users/Groups/GroupItem.svelte | 10 +++++++++-
 .../admin/Users/UserList/EditUserModal.svelte          |  5 +++++
 src/lib/utils/index.ts                                 |  6 ++++++
 src/routes/auth/+page.svelte                           |  8 +-------
 4 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/admin/Users/Groups/GroupItem.svelte b/src/lib/components/admin/Users/Groups/GroupItem.svelte
index c84eb4b3aa..6e2b324353 100644
--- a/src/lib/components/admin/Users/Groups/GroupItem.svelte
+++ b/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
diff --git a/src/lib/components/admin/Users/UserList/EditUserModal.svelte b/src/lib/components/admin/Users/UserList/EditUserModal.svelte
index eedd75eb65..7bb23d948e 100644
--- a/src/lib/components/admin/Users/UserList/EditUserModal.svelte
+++ b/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,10 @@
 										<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">
+												<a href={"/admin/users/groups?id=" + userGroup.id}
+													on:click|preventDefault={() => goto('/admin/users/groups?id=' + userGroup.id)}>
 													{userGroup.name}
+												</a>
 												</span>
 											{/each}
 										</div>
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index 2ee3781019..ef61f5cde8 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -1583,3 +1583,9 @@ export const extractContentFromFile = async (file, pdfjsLib = null) => {
 		throw new Error('Unsupported or non-text file type: ' + (file.name || type));
 	}
 };
+
+export const querystringValue = (key: string): string | null => {
+	const querystring = window.location.search;
+	const urlParams = new URLSearchParams(querystring);
+	return urlParams.get(key);
+};
diff --git a/src/routes/auth/+page.svelte b/src/routes/auth/+page.svelte
index 8ee6fc79b1..d4ce838251 100644
--- a/src/routes/auth/+page.svelte
+++ b/src/routes/auth/+page.svelte
@@ -14,7 +14,7 @@
 	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 	import { WEBUI_NAME, config, user, socket } from '$lib/stores';
 
-	import { generateInitialsImage, canvasPixelTest } from '$lib/utils';
+	import { generateInitialsImage, canvasPixelTest, querystringValue } from '$lib/utils';
 
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import OnBoarding from '$lib/components/OnBoarding.svelte';
@@ -33,12 +33,6 @@
 
 	let ldapUsername = '';
 
-	const querystringValue = (key) => {
-		const querystring = window.location.search;
-		const urlParams = new URLSearchParams(querystring);
-		return urlParams.get(key);
-	};
-
 	const setSessionUser = async (sessionUser) => {
 		if (sessionUser) {
 			console.log(sessionUser);

From c11f02662f1806a68d30f19eae1920eb6b19bb69 Mon Sep 17 00:00:00 2001
From: Athanasios Oikonomou <a.oikonomou@mellongroup.com>
Date: Wed, 13 Aug 2025 09:36:18 +0300
Subject: [PATCH 2/2] fix: use prettier to format last commit

---
 .../components/admin/Users/Groups/GroupItem.svelte    |  2 +-
 .../admin/Users/UserList/EditUserModal.svelte         | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/admin/Users/Groups/GroupItem.svelte b/src/lib/components/admin/Users/Groups/GroupItem.svelte
index 6e2b324353..f7a065eda6 100644
--- a/src/lib/components/admin/Users/Groups/GroupItem.svelte
+++ b/src/lib/components/admin/Users/Groups/GroupItem.svelte
@@ -47,7 +47,7 @@
 	};
 
 	onMount(() => {
-		const groupId = querystringValue('id')
+		const groupId = querystringValue('id');
 		if (groupId && groupId === group.id) {
 			showEdit = true;
 		}
diff --git a/src/lib/components/admin/Users/UserList/EditUserModal.svelte b/src/lib/components/admin/Users/UserList/EditUserModal.svelte
index 7bb23d948e..51d9f0eb3b 100644
--- a/src/lib/components/admin/Users/UserList/EditUserModal.svelte
+++ b/src/lib/components/admin/Users/UserList/EditUserModal.svelte
@@ -129,10 +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">
-												<a href={"/admin/users/groups?id=" + userGroup.id}
-													on:click|preventDefault={() => goto('/admin/users/groups?id=' + userGroup.id)}>
-													{userGroup.name}
-												</a>
+													<a
+														href={'/admin/users/groups?id=' + userGroup.id}
+														on:click|preventDefault={() =>
+															goto('/admin/users/groups?id=' + userGroup.id)}
+													>
+														{userGroup.name}
+													</a>
 												</span>
 											{/each}
 										</div>