Emil_Shanaty/open-webui-ai4me
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-03-15 23:37:45 -05:00
parent b99f8dabdd
commit a361df840e
13 changed files with 192 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/layout/Sidebar.svelte
+1 -1
View File
@@ -1398,7 +1398,7 @@
role={$user?.role}
profile={$config?.features?.enable_user_status ?? true}
showActiveUsers={false}
className="max-w-[calc(var(--sidebar-width)-1rem)]"
className="w-[calc(var(--sidebar-width)-1rem)]"
on:show={(e) => {
if (e.detail === 'archived-chat') {
showArchivedChats.set(true);
src/lib/components/layout/Sidebar/UserMenu.svelte
+32 -42
View File
@@ -1,8 +1,6 @@
<script lang="ts">
import { DropdownMenu } from 'bits-ui';
import { createEventDispatcher, getContext, onMount, tick } from 'svelte';
import { flyAndScale } from '$lib/utils/transitions';
import { goto } from '$app/navigation';
import { fade, slide } from 'svelte/transition';
@@ -13,6 +11,7 @@
import { WEBUI_API_BASE_URL } from '$lib/constants';
import Dropdown from '$lib/components/common/Dropdown.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
import QuestionMarkCircle from '$lib/components/icons/QuestionMarkCircle.svelte';
@@ -38,7 +37,7 @@
export let profile = false;
export let help = false;
export let className = 'max-w-[240px]';
export let className = 'w-[240px]';
export let align = 'end';
export let showActiveUsers = true;
@@ -60,7 +59,8 @@
}
};
const handleDropdownChange = (state: boolean) => {
const handleDropdownChange = (e) => {
const state = e.detail;
dispatch('change', state);
// Fetch usage info when dropdown opens, if user has permission
@@ -79,18 +79,12 @@
/>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<DropdownMenu.Root bind:open={show} onOpenChange={handleDropdownChange}>
<DropdownMenu.Trigger>
<slot />
</DropdownMenu.Trigger>
<Dropdown bind:show on:change={handleDropdownChange} {align}>
<slot />
<slot name="content">
<DropdownMenu.Content
class="w-full {className} rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg text-sm"
sideOffset={4}
side="top"
{align}
transition={(e) => fade(e, { duration: 100 })}
<div slot="content">
<div
class="{className} rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg text-sm"
>
{#if profile}
<div class=" flex gap-3.5 w-full p-2.5 items-center">
@@ -201,8 +195,9 @@
<hr class=" border-gray-50/30 dark:border-gray-800/30 my-1.5 p-0" />
{/if}
<DropdownMenu.Item
<button
class="flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer select-none"
type="button"
on:click={async () => {
show = false;
@@ -218,10 +213,11 @@
<Settings className="w-5 h-5" strokeWidth="1.5" />
</div>
<div class=" self-center truncate">{$i18n.t('Settings')}</div>
</DropdownMenu.Item>
</button>
<DropdownMenu.Item
<button
class="flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer select-none"
type="button"
on:click={async () => {
show = false;
@@ -238,11 +234,10 @@
<ArchiveBox className="size-5" strokeWidth="1.5" />
</div>
<div class=" self-center truncate">{$i18n.t('Archived Chats')}</div>
</DropdownMenu.Item>
</button>
{#if role === 'admin'}
<DropdownMenu.Item
as="a"
<a
href="/playground"
draggable="false"
class="flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer select-none"
@@ -258,9 +253,8 @@
<Code className="size-5" strokeWidth="1.5" />
</div>
<div class=" self-center truncate">{$i18n.t('Playground')}</div>
</DropdownMenu.Item>
<DropdownMenu.Item
as="a"
</a>
<a
href="/admin"
draggable="false"
class="flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer select-none"
@@ -276,7 +270,7 @@
<UserGroup className="w-5 h-5" strokeWidth="1.5" />
</div>
<div class=" self-center truncate">{$i18n.t('Admin Panel')}</div>
</DropdownMenu.Item>
</a>
{/if}
{#if help}
@@ -285,8 +279,7 @@
<!-- {$i18n.t('Help')} -->
{#if $user?.role === 'admin'}
<DropdownMenu.Item
as="a"
<a
href="https://docs.openwebui.com"
target="_blank"
draggable="false"
@@ -300,11 +293,10 @@
<QuestionMarkCircle className="size-5" />
</div>
<div class=" self-center truncate">{$i18n.t('Documentation')}</div>
</DropdownMenu.Item>
</a>
<!-- Releases -->
<DropdownMenu.Item
as="a"
<a
href="https://github.com/open-webui/open-webui/releases"
target="_blank"
draggable="false"
@@ -318,11 +310,12 @@
<Map className="size-5" />
</div>
<div class=" self-center truncate">{$i18n.t('Releases')}</div>
</DropdownMenu.Item>
</a>
{/if}
<DropdownMenu.Item
<button
class="flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer select-none"
type="button"
id="chat-share-button"
on:click={async () => {
show = false;
@@ -338,13 +331,14 @@
<Keyboard className="size-5" />
</div>
<div class=" self-center truncate">{$i18n.t('Keyboard shortcuts')}</div>
</DropdownMenu.Item>
</button>
{/if}
<hr class=" border-gray-50/30 dark:border-gray-800/30 my-1 p-0" />
<DropdownMenu.Item
<button
class="flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer select-none"
type="button"
on:click={async () => {
const res = await userSignOut();
user.set(null);
@@ -358,7 +352,7 @@
<SignOut className="w-5 h-5" strokeWidth="1.5" />
</div>
<div class=" self-center truncate">{$i18n.t('Sign Out')}</div>
</DropdownMenu.Item>
</button>
{#if showActiveUsers && ($config?.features?.enable_public_active_users_count || role === 'admin') && usage}
{#if usage?.user_count}
@@ -395,10 +389,6 @@
</Tooltip>
{/if}
{/if}
<!-- <DropdownMenu.Item class="flex items-center py-1.5 px-3 text-sm ">
<div class="flex items-center">Profile</div>
</DropdownMenu.Item> -->
</DropdownMenu.Content>
</slot>
</DropdownMenu.Root>
</div>
</div>
</Dropdown>