From 71167131d28f0a1faf97a181e44cd891c9c2dfda Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 7 Oct 2026 11:09:28 +0400
Subject: [PATCH] refac

---
 .../admin/Users/Groups/EditGroupModal.svelte  | 53 +++++++++++--------
 .../Users/Groups/InheritedMembers.svelte      | 33 ++++++------
 .../admin/Users/Groups/Users.svelte           |  6 ++-
 src/lib/i18n/locales/en-US/translation.json   |  1 +
 4 files changed, 51 insertions(+), 42 deletions(-)

diff --git a/src/lib/components/admin/Users/Groups/EditGroupModal.svelte b/src/lib/components/admin/Users/Groups/EditGroupModal.svelte
index a3da0e0920..3ed6ed7657 100644
--- a/src/lib/components/admin/Users/Groups/EditGroupModal.svelte
+++ b/src/lib/components/admin/Users/Groups/EditGroupModal.svelte
@@ -18,6 +18,9 @@
 	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
+	import Select from '$lib/components/common/Select.svelte';
+	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
+	import Check from '$lib/components/icons/Check.svelte';
 
 	export let onSubmit: Function = () => {};
 	export let onDelete: Function = () => {};
@@ -343,30 +346,36 @@
 										defaultPermissions={custom ? inheritedPermissions : defaultPermissions}
 									/>
 								{:else if selectedTab == 'users'}
-									<div class="flex flex-wrap items-center gap-x-4 gap-y-1 mb-3">
-										<button
-											type="button"
-											aria-pressed={membershipTab === 'direct'}
-											class="py-1 text-xs font-normal transition {membershipTab === 'direct'
-												? 'text-gray-900 dark:text-gray-100'
-												: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'}"
-											on:click={() => (membershipTab = 'direct')}
-											>{$i18n.t('Direct members')}</button
-										>
-										<button
-											type="button"
-											aria-pressed={membershipTab === 'inherited'}
-											class="py-1 text-xs font-normal transition {membershipTab === 'inherited'
-												? 'text-gray-900 dark:text-gray-100'
-												: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'}"
-											on:click={() => (membershipTab = 'inherited')}
-											>{$i18n.t('Inherited members')}</button
-										>
-									</div>
+									{#snippet membershipFilter()}
+										<div class="shrink-0">
+											<Select
+												bind:value={membershipTab}
+												items={[
+													{ value: 'direct', label: $i18n.t('Direct') },
+													{ value: 'inherited', label: $i18n.t('Inherited') }
+												]}
+												align="end"
+												triggerClass="flex items-center gap-1 rounded-lg px-1 py-0.5 text-xs font-normal text-gray-500 transition hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+											>
+												<svelte:fragment slot="trigger" let:selectedLabel>
+													<span>{selectedLabel}</span>
+													<ChevronDown className="size-2.5" strokeWidth="2.5" />
+												</svelte:fragment>
+												<svelte:fragment slot="item" let:item let:selected>
+													<span class="flex-1 text-left">{item.label}</span>
+													<Check className="size-3.5 {selected ? '' : 'invisible'}" />
+												</svelte:fragment>
+											</Select>
+										</div>
+									{/snippet}
 									{#if membershipTab === 'direct'}
-										<Users bind:userCount groupId={group?.id} {onMemberChange} />
+										<Users bind:userCount groupId={group?.id} {onMemberChange}>
+											<svelte:fragment slot="filter">{@render membershipFilter()}</svelte:fragment>
+										</Users>
 									{:else}
-										<InheritedMembers groupId={group?.id} {groups} />
+										<InheritedMembers groupId={group?.id} {groups}>
+											<svelte:fragment slot="filter">{@render membershipFilter()}</svelte:fragment>
+										</InheritedMembers>
 									{/if}
 								{:else if selectedTab == 'preview'}
 									<GroupPreviewPanel groupId={group?.id} />
diff --git a/src/lib/components/admin/Users/Groups/InheritedMembers.svelte b/src/lib/components/admin/Users/Groups/InheritedMembers.svelte
index 0d9aa621b0..6a4b47ff2c 100644
--- a/src/lib/components/admin/Users/Groups/InheritedMembers.svelte
+++ b/src/lib/components/admin/Users/Groups/InheritedMembers.svelte
@@ -15,19 +15,22 @@
 </script>
 
 <div class="flex w-full min-w-0 flex-col text-sm">
-	<div class="mb-1.5 flex items-center">
-		<div class="self-center mr-3">
-			<Search />
+	<div class="mb-1.5 flex flex-wrap items-center gap-2">
+		<div class="flex min-w-0 flex-1 basis-full items-center sm:basis-0">
+			<div class="self-center mr-3">
+				<Search />
+			</div>
+			<input
+				class="w-full min-w-0 text-sm pr-4 rounded-r-xl outline-hidden bg-transparent"
+				aria-label={$i18n.t('Search inherited members')}
+				placeholder={$i18n.t('Search')}
+				bind:value={query}
+				on:input={() => {
+					page = 1;
+				}}
+			/>
 		</div>
-		<input
-			class="w-full min-w-0 text-sm pr-4 rounded-r-xl outline-hidden bg-transparent"
-			aria-label={$i18n.t('Search inherited members')}
-			placeholder={$i18n.t('Search')}
-			bind:value={query}
-			on:input={() => {
-				page = 1;
-			}}
-		/>
+		<slot name="filter" />
 	</div>
 	{#await members}
 		<div class="my-10" role="status" aria-label={$i18n.t('Loading...')}>
@@ -80,12 +83,6 @@
 				{$i18n.t('No inherited members')}
 			</div>
 		{/if}
-		<p class="mt-3 text-xs text-gray-500 dark:text-gray-400">
-			{$i18n.t(
-				'Direct: {{direct}} · Inherited: {{inherited}} · Total: {{effective}}',
-				result.counts
-			)}
-		</p>
 		{#if result.total > 30}
 			<Pagination bind:page count={result.total} perPage={30} />
 		{/if}
diff --git a/src/lib/components/admin/Users/Groups/Users.svelte b/src/lib/components/admin/Users/Groups/Users.svelte
index c41f493ec6..4bb9f6240b 100644
--- a/src/lib/components/admin/Users/Groups/Users.svelte
+++ b/src/lib/components/admin/Users/Groups/Users.svelte
@@ -293,8 +293,8 @@
 			on:change={handleFileChange}
 		/>
 
-		<div class="flex flex-1 h-fit items-center gap-2">
-			<div class="flex min-w-0 flex-1 items-center">
+		<div class="flex flex-1 flex-wrap h-fit items-center gap-2">
+			<div class="flex min-w-0 flex-1 basis-full items-center sm:basis-0">
 				<div class=" self-center mr-3">
 					<Search />
 				</div>
@@ -351,6 +351,8 @@
 					</DropdownMenu>
 				</div>
 			</Dropdown>
+
+			<slot name="filter" />
 		</div>
 	</div>
 
diff --git a/src/lib/i18n/locales/en-US/translation.json b/src/lib/i18n/locales/en-US/translation.json
index 203396236a..4bcdd405d5 100644
--- a/src/lib/i18n/locales/en-US/translation.json
+++ b/src/lib/i18n/locales/en-US/translation.json
@@ -1228,6 +1228,7 @@
 	"Influences how quickly the algorithm responds to feedback from the generated text. A lower learning rate will result in slower adjustments, while a higher learning rate will make the algorithm more responsive.": "",
 	"Info": "",
 	"Inherit": "Inherit",
+	"Inherited": "Inherited",
 	"Inherited members": "Inherited members",
 	"Inherited members are managed in their directly assigned groups.": "Inherited members are managed in their directly assigned groups.",
 	"Inherited via": "Inherited via",