From ccb1ab7739fbeb77c810036dcac240570034a56a Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 15 Jul 2026 01:31:21 -0400
Subject: [PATCH] refac

---
 src/lib/components/admin/Users/Groups.svelte  | 84 ++++---------------
 .../admin/Users/Groups/GroupItem.svelte       | 60 +++++++++----
 .../chat/Settings/ArchivedChats.svelte        | 32 +------
 src/lib/components/icons/Trash.svelte         | 26 ++++++
 src/lib/components/icons/UndoAction.svelte    | 27 ++++++
 5 files changed, 115 insertions(+), 114 deletions(-)
 create mode 100644 src/lib/components/icons/Trash.svelte
 create mode 100644 src/lib/components/icons/UndoAction.svelte

diff --git a/src/lib/components/admin/Users/Groups.svelte b/src/lib/components/admin/Users/Groups.svelte
index 0440c9ac2c..e4fa98360d 100644
--- a/src/lib/components/admin/Users/Groups.svelte
+++ b/src/lib/components/admin/Users/Groups.svelte
@@ -6,15 +6,10 @@
 	import { user } from '$lib/stores';
 
 	import Plus from '$lib/components/icons/Plus.svelte';
-	import UsersSolid from '$lib/components/icons/UsersSolid.svelte';
-	import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
 	import Search from '$lib/components/icons/Search.svelte';
 	import EditGroupModal from './Groups/EditGroupModal.svelte';
 	import GroupItem from './Groups/GroupItem.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
-	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
-	import Check from '$lib/components/icons/Check.svelte';
-	import Select from '$lib/components/common/Select.svelte';
 	import { createNewGroup, getGroups } from '$lib/apis/groups';
 	import { getUserDefaultPermissions, updateUserDefaultPermissions } from '$lib/apis/users';
 
@@ -25,12 +20,6 @@
 	let groups = [];
 
 	let query = '';
-	let sortBy = 'members';
-
-	const sortItems = [
-		{ value: 'name', label: $i18n.t('Name') },
-		{ value: 'members', label: $i18n.t('Members') }
-	];
 
 	$: filteredGroups = groups
 		.filter((group) => {
@@ -43,12 +32,7 @@
 			}
 		})
 		.sort((a, b) => {
-			if (sortBy === 'name') {
-				return a.name.localeCompare(b.name);
-			} else if (sortBy === 'members') {
-				return (b.member_count ?? 0) - (a.member_count ?? 0);
-			}
-			return 0;
+			return (b.member_count ?? 0) - (a.member_count ?? 0) || a.name.localeCompare(b.name);
 		});
 
 	let defaultPermissions = {};
@@ -122,6 +106,18 @@
 			</div>
 
 			<div class="flex w-full justify-end gap-1.5">
+				<button
+					class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition"
+					aria-haspopup="dialog"
+					on:click={() => {
+						showDefaultPermissionsModal = true;
+					}}
+				>
+					<div class="self-center font-normal line-clamp-1">
+						{$i18n.t('Default permissions')}
+					</div>
+				</button>
+
 				<button
 					class="px-2 py-1.5 rounded-xl bg-black text-white dark:bg-white dark:text-black transition font-normal text-sm flex items-center"
 					on:click={() => {
@@ -162,36 +158,10 @@
 					</div>
 				{/if}
 			</div>
-
-			<Select
-				bind:value={sortBy}
-				items={sortItems}
-				placeholder={$i18n.t('Sort by')}
-				triggerClass="relative flex items-center gap-0.5 px-2.5 py-1.5 text-sm bg-gray-50 dark:bg-gray-850 rounded-xl shrink-0"
-				align="end"
-			>
-				<svelte:fragment slot="trigger" let:selectedLabel>
-					<span
-						class="inline-flex h-input px-0.5 outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden"
-					>
-						{selectedLabel}
-					</span>
-					<ChevronDown className="size-3.5" strokeWidth="2.5" />
-				</svelte:fragment>
-
-				<svelte:fragment slot="item" let:item let:selected>
-					{item.label}
-					{#if selected}
-						<div class="ml-auto">
-							<Check />
-						</div>
-					{/if}
-				</svelte:fragment>
-			</Select>
 		</div>
 
 		{#if filteredGroups.length !== 0}
-			<div class="my-1 gap-x-2 gap-y-0.5 grid lg:grid-cols-2">
+			<div class="my-1 grid grid-cols-1 gap-y-0.5">
 				{#each filteredGroups as group}
 					<GroupItem {group} {setGroups} {defaultPermissions} />
 				{/each}
@@ -218,30 +188,4 @@
 			onSubmit={updateDefaultPermissionsHandler}
 		/>
 	{/if}
-
-	<button
-		class="flex items-center justify-between rounded-2xl w-full transition mt-2 px-2.5 py-2 hover:bg-gray-50/70 dark:hover:bg-gray-850/50"
-		aria-haspopup="dialog"
-		on:click={() => {
-			showDefaultPermissionsModal = true;
-		}}
-	>
-		<div class="flex items-center gap-2.5">
-			<div class="p-1.5 bg-black/5 dark:bg-white/10 rounded-full">
-				<UsersSolid className="size-4" />
-			</div>
-
-			<div class="text-left">
-				<div class=" text-sm font-normal">{$i18n.t('Default permissions')}</div>
-
-				<div class="flex text-xs mt-0.5">
-					{$i18n.t('applies to all users with the "user" role')}
-				</div>
-			</div>
-		</div>
-
-		<div>
-			<ChevronRight strokeWidth="2.5" />
-		</div>
-	</button>
 {/if}
diff --git a/src/lib/components/admin/Users/Groups/GroupItem.svelte b/src/lib/components/admin/Users/Groups/GroupItem.svelte
index bb9a7aae85..2c977ca63b 100644
--- a/src/lib/components/admin/Users/Groups/GroupItem.svelte
+++ b/src/lib/components/admin/Users/Groups/GroupItem.svelte
@@ -19,6 +19,9 @@
 	export let setGroups = () => {};
 
 	let showEdit = false;
+	$: hasCustomPermissions =
+		group?.permissions &&
+		Object.keys(group.permissions).some((key) => group.permissions[key] !== undefined);
 
 	const updateHandler = async (_group) => {
 		const res = await updateGroupById(localStorage.token, group.id, _group).catch((error) => {
@@ -63,33 +66,58 @@
 />
 
 <button
-	class="flex space-x-4 cursor-pointer text-left w-full px-2.5 py-1.5 rounded-2xl hover:bg-gray-50/70 dark:hover:bg-gray-850/50 transition"
+	class="group flex cursor-pointer text-left w-full px-2.5 py-2.5 rounded-2xl hover:bg-gray-50/70 dark:hover:bg-gray-850/50 transition"
 	on:click={() => {
 		showEdit = true;
 	}}
 >
 	<div class="w-full">
-		<div class="flex items-center justify-between">
-			<div class="flex-1 min-w-0 pl-1">
-				<div class="flex items-center gap-1.5">
-					<div class="text-sm font-normal line-clamp-1">{group.name}</div>
-				</div>
-
-				<div class="flex items-center gap-1.5 px-1 line-clamp-1">
-					<div class="text-xs text-gray-500 shrink-0">
-						{$i18n.t('{{COUNT}} members', { COUNT: group?.member_count ?? 0 })}
+		<div class="flex items-center gap-3">
+			<div class="flex min-w-0 flex-1 flex-col gap-0.5 pl-1">
+				<div class="flex min-w-0 items-center gap-2">
+					<div class="text-sm font-normal line-clamp-1 text-gray-900 dark:text-gray-100">
+						{group.name}
 					</div>
 
-					{#if group?.description}
-						<div class="text-xs overflow-hidden text-ellipsis line-clamp-1">
+					<div
+						class="shrink-0 rounded-md bg-gray-500/10 px-1.5 py-0.5 text-[11px] font-normal leading-none text-gray-600 dark:text-gray-300"
+					>
+						{$i18n.t('{{COUNT}} members', { COUNT: group?.member_count ?? 0 })}
+					</div>
+				</div>
+
+				<div class="flex min-w-0 items-center gap-1.5 px-1 text-xs text-gray-500">
+					<div class="line-clamp-1 min-w-0">
+						{#if group?.description}
 							{group.description}
-						</div>
-					{/if}
+						{:else}
+							{$i18n.t('No description')}
+						{/if}
+					</div>
+
+					<div class="shrink-0 text-gray-300 dark:text-gray-700">/</div>
+
+					<div class="shrink-0">
+						{#if hasCustomPermissions}
+							{$i18n.t('Custom permissions')}
+						{:else}
+							{$i18n.t('Default permissions')}
+						{/if}
+					</div>
 				</div>
 			</div>
 
-			<div class="flex self-center ml-2 p-1.5 dark:text-gray-300">
-				<Pencil className="size-3.5" />
+			<div class="flex shrink-0 items-center gap-1.5">
+				<div
+					class="hidden text-xs text-gray-500 transition group-hover:text-gray-700 dark:group-hover:text-gray-300 sm:block"
+				>
+					{$i18n.t('Edit')}
+				</div>
+				<div
+					class="flex self-center p-1.5 text-gray-500 transition group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-gray-100"
+				>
+					<Pencil className="size-3.5" />
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/src/lib/components/chat/Settings/ArchivedChats.svelte b/src/lib/components/chat/Settings/ArchivedChats.svelte
index 9a55563e03..68e3320f4f 100644
--- a/src/lib/components/chat/Settings/ArchivedChats.svelte
+++ b/src/lib/components/chat/Settings/ArchivedChats.svelte
@@ -27,6 +27,8 @@
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
 	import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
+	import Trash from '$lib/components/icons/Trash.svelte';
+	import UndoAction from '$lib/components/icons/UndoAction.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
 
 	dayjs.extend(localizedFormat);
@@ -294,20 +296,7 @@
 										unarchiveHandler(chat.id);
 									}}
 								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										fill="none"
-										viewBox="0 0 24 24"
-										stroke-width="1.5"
-										stroke="currentColor"
-										class="size-4"
-									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											d="M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15m0-3-3-3m0 0-3 3m3-3V15"
-										/>
-									</svg>
+									<UndoAction className="size-3.5" strokeWidth="1.5" />
 								</button>
 							</Tooltip>
 							<Tooltip content={$i18n.t('Delete Chat')}>
@@ -320,20 +309,7 @@
 										showDeleteConfirmDialog = true;
 									}}
 								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										fill="none"
-										viewBox="0 0 24 24"
-										stroke-width="1.5"
-										stroke="currentColor"
-										class="size-4"
-									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
-										/>
-									</svg>
+									<Trash className="size-3.5" strokeWidth="1.5" />
 								</button>
 							</Tooltip>
 						</div>
diff --git a/src/lib/components/icons/Trash.svelte b/src/lib/components/icons/Trash.svelte
new file mode 100644
index 0000000000..1dc84a1eee
--- /dev/null
+++ b/src/lib/components/icons/Trash.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	class={className}
+>
+	<path
+		d="M20 9L18.005 20.3463C17.8369 21.3026 17.0062 22 16.0353 22H7.96474C6.99379 22 6.1631 21.3026 5.99496 20.3463L4 9"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M21 6L15.375 6M3 6L8.625 6M8.625 6V4C8.625 2.89543 9.52043 2 10.625 2H13.375C14.4796 2 15.375 2.89543 15.375 4V6M8.625 6L15.375 6"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/components/icons/UndoAction.svelte b/src/lib/components/icons/UndoAction.svelte
new file mode 100644
index 0000000000..72cb7f5b6d
--- /dev/null
+++ b/src/lib/components/icons/UndoAction.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	class={className}
+>
+	<path d="M5 5V8V11" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+	<path
+		d="M8.50005 8C12.5001 8 11.0001 8 15.0001 8C15.0001 8 15.0001 8 15.0001 8C15.0001 8 20.0001 8 20.0001 12.7059C20.0001 18 15.0001 18 15.0001 18C11.5715 18 9.71434 18 6.28577 18"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M11.5 11.5C10.1332 10.1332 9.36683 9.36683 8 8C9.36683 6.63317 10.1332 5.86683 11.5 4.5"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>