bhetherman/open-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2026-07-15 01:31:21 -04:00
parent c64fe45376
commit ccb1ab7739
5 changed files with 115 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/admin/Users/Groups.svelte
+14 -70
View File
@@ -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}
src/lib/components/admin/Users/Groups/GroupItem.svelte
+44 -16
View File
@@ -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>
src/lib/components/chat/Settings/ArchivedChats.svelte
+4 -28
View File
@@ -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>
src/lib/components/icons/Trash.svelte
+26
View File
@@ -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>
src/lib/components/icons/UndoAction.svelte
+27
View File
@@ -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>