From 18bf0ade7b35fb25ff7920ad3713624d93f04401 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 24 Aug 2026 19:25:03 -0400
Subject: [PATCH] refac

---
 src/lib/components/admin/Users/Groups.svelte       |  7 ++++++-
 .../admin/Users/Groups/EditGroupModal.svelte       |  3 ++-
 .../components/admin/Users/Groups/GroupItem.svelte |  3 +++
 src/lib/components/admin/Users/Groups/Users.svelte | 14 +++++++++++---
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/admin/Users/Groups.svelte b/src/lib/components/admin/Users/Groups.svelte
index 8c7a8394d7..66ea53fb1a 100644
--- a/src/lib/components/admin/Users/Groups.svelte
+++ b/src/lib/components/admin/Users/Groups.svelte
@@ -59,6 +59,11 @@
 		adminGroupCount.set(groups.length);
 	};
 
+	/** @param {any} updatedGroup */
+	const updateGroup = (updatedGroup) => {
+		groups = groups.map((group) => (group.id === updatedGroup.id ? updatedGroup : group));
+	};
+
 	/** @param {any} group */
 	const addGroupHandler = async (group) => {
 		const res = await createNewGroup(localStorage.token, group).catch((error) => {
@@ -177,7 +182,7 @@
 		{#if filteredGroups.length !== 0}
 			<div class="mt-1 grid grid-cols-1">
 				{#each filteredGroups as group, idx (group.id)}
-					<GroupItem {group} {setGroups} {defaultPermissions} />
+					<GroupItem {group} {setGroups} {updateGroup} {defaultPermissions} />
 					{#if idx < filteredGroups.length - 1}
 						<hr class="border-gray-50 dark:border-gray-850/40" />
 					{/if}
diff --git a/src/lib/components/admin/Users/Groups/EditGroupModal.svelte b/src/lib/components/admin/Users/Groups/EditGroupModal.svelte
index a85deb778a..0934c9bed2 100644
--- a/src/lib/components/admin/Users/Groups/EditGroupModal.svelte
+++ b/src/lib/components/admin/Users/Groups/EditGroupModal.svelte
@@ -19,6 +19,7 @@
 
 	export let onSubmit: Function = () => {};
 	export let onDelete: Function = () => {};
+	export let onMemberChange: Function = () => {};
 
 	export let show = false;
 	export let edit = false;
@@ -280,7 +281,7 @@
 								{:else if selectedTab == 'permissions'}
 									<Permissions bind:permissions {defaultPermissions} />
 								{:else if selectedTab == 'users'}
-									<Users bind:userCount groupId={group?.id} />
+									<Users bind:userCount groupId={group?.id} {onMemberChange} />
 								{:else if selectedTab == 'preview'}
 									<GroupPreviewPanel groupId={group?.id} />
 								{/if}
diff --git a/src/lib/components/admin/Users/Groups/GroupItem.svelte b/src/lib/components/admin/Users/Groups/GroupItem.svelte
index 8e6fa976bf..6b7cba8713 100644
--- a/src/lib/components/admin/Users/Groups/GroupItem.svelte
+++ b/src/lib/components/admin/Users/Groups/GroupItem.svelte
@@ -20,6 +20,8 @@
 	export let defaultPermissions = {};
 
 	export let setGroups = () => {};
+	/** @type {(group: any) => void} */
+	export let updateGroup = () => {};
 
 	let showEdit = false;
 	$: hasCustomPermissions = Object.keys(group?.permissions ?? {}).length > 0;
@@ -64,6 +66,7 @@
 	tabs={['general', 'permissions', 'users', 'preview']}
 	onSubmit={updateHandler}
 	onDelete={deleteHandler}
+	onMemberChange={updateGroup}
 />
 
 <button
diff --git a/src/lib/components/admin/Users/Groups/Users.svelte b/src/lib/components/admin/Users/Groups/Users.svelte
index 2c2aeab667..a184ceed94 100644
--- a/src/lib/components/admin/Users/Groups/Users.svelte
+++ b/src/lib/components/admin/Users/Groups/Users.svelte
@@ -24,6 +24,7 @@
 
 	export let groupId: string;
 	export let userCount = 0;
+	export let onMemberChange: Function = () => {};
 
 	let users = null;
 	let total = null;
@@ -74,19 +75,26 @@
 	};
 
 	const toggleMember = async (userId, state) => {
+		let res = null;
+
 		if (state === 'checked') {
-			await addUserToGroup(localStorage.token, groupId, [userId]).catch((error) => {
+			res = await addUserToGroup(localStorage.token, groupId, [userId]).catch((error) => {
 				toast.error(`${error}`);
 				return null;
 			});
 		} else {
-			await removeUserFromGroup(localStorage.token, groupId, [userId]).catch((error) => {
+			res = await removeUserFromGroup(localStorage.token, groupId, [userId]).catch((error) => {
 				toast.error(`${error}`);
 				return null;
 			});
 		}
 
-		getUserList();
+		if (res) {
+			userCount = res.member_count ?? userCount;
+			onMemberChange(res);
+		}
+
+		await getUserList();
 	};
 
 	$: if (page !== null && orderBy !== null && direction !== null) {