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 committed 2026-07-15 16:51:08 -04:00
1 parent 5b934b1f90
commit db934a3b4f
22 files changed
+412 -527
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/lib/components/layout/Sidebar.svelte
+7 -7
View File
@@ -996,7 +996,7 @@
? `${$mobile ? 'bg-gray-50 dark:bg-gray-950' : 'bg-gray-50/70 dark:bg-gray-950/70'} z-50`
: ' bg-transparent z-0 '} {$isApp
? `ml-[4.5rem] md:ml-0 `
: ' transition-all duration-300 '} shrink-0 text-gray-700 dark:text-gray-300 text-sm fixed top-0 left-0 overflow-x-hidden
: ' transition-all duration-300 '} shrink-0 text-gray-700 dark:text-gray-300 text-[13px] leading-5 fixed top-0 left-0 overflow-x-hidden
"
transition:slide={{ duration: 250, axis: 'x' }}
data-state={$showSidebar}
@@ -1077,12 +1077,12 @@
on:click={newChatHandler}
aria-label={$i18n.t('New Chat')}
>
<div class="self-center">
<div class="self-center flex size-4 shrink-0 items-center justify-center">
<EditPencilIcon className=" size-4" strokeWidth="1.5" />
</div>
<div class="flex flex-1 self-center translate-y-[0.5px]">
<div class=" self-center text-sm">{$i18n.t('New Chat')}</div>
<div class=" self-center text-[13px] leading-5">{$i18n.t('New Chat')}</div>
</div>
<HotkeyHint name="newChat" className=" group-hover:visible invisible" />
@@ -1099,12 +1099,12 @@
draggable="false"
aria-label={$i18n.t('Search')}
>
<div class="self-center">
<div class="self-center flex size-4 shrink-0 items-center justify-center">
<SearchIcon strokeWidth="1.5" className="size-4" />
</div>
<div class="flex flex-1 self-center translate-y-[0.5px]">
<div class=" self-center text-sm">{$i18n.t('Search')}</div>
<div class=" self-center text-[13px] leading-5">{$i18n.t('Search')}</div>
</div>
<HotkeyHint name="search" className=" group-hover:visible invisible" />
</button>
@@ -1131,7 +1131,7 @@
draggable="false"
aria-label={$i18n.t(meta.label)}
>
<div class="self-center">
<div class="self-center flex size-4 shrink-0 items-center justify-center">
{#if itemId === 'notes'}
<NotesIcon className="size-4" strokeWidth="1.5" />
{:else if itemId === 'workspace'}
@@ -1146,7 +1146,7 @@
</div>
<div class="flex self-center translate-y-[0.5px]">
<div class=" self-center text-sm">{$i18n.t(meta.label)}</div>
<div class=" self-center text-[13px] leading-5">{$i18n.t(meta.label)}</div>
</div>
</a>
</div>
src/lib/components/layout/Sidebar/ChannelItem.svelte
+6 -6
View File
@@ -11,9 +11,9 @@
import ChannelModal from './ChannelModal.svelte';
import Emoji from '$lib/components/common/Emoji.svelte';
import HashtagIcon from './icons/Hashtag.svelte';
import LockIcon from './icons/Lock.svelte';
import SettingsIcon from './icons/Settings.svelte';
import HashtagIcon from '$lib/components/icons/Hashtag.svelte';
import LockIcon from '$lib/components/icons/Lock.svelte';
import EditPencilIcon from './icons/EditPencil.svelte';
import UserIcon from './icons/User.svelte';
import XMarkIcon from './icons/XMark.svelte';
@@ -144,9 +144,9 @@
{:else}
<div class=" size-4 justify-center flex items-center ml-1">
{#if isPublicChannel(channel)}
<HashtagIcon className="size-3.5" strokeWidth="1.5" />
<HashtagIcon className="size-3" strokeWidth="1.8" />
{:else}
<LockIcon className="size-[15px]" strokeWidth="1.5" />
<LockIcon className="size-3.5" strokeWidth="1.7" />
{/if}
</div>
{/if}
@@ -242,7 +242,7 @@
showEditChannelModal = true;
}}
>
<SettingsIcon className="size-3.5" />
<EditPencilIcon className="size-3.5" />
</button>
</div>
{/if}
src/lib/components/layout/Sidebar/ChatItem.svelte
+24 -33
View File
@@ -38,11 +38,11 @@
import Tooltip from '$lib/components/common/Tooltip.svelte';
import DragGhost from '$lib/components/common/DragGhost.svelte';
import Spinner from '$lib/components/common/Spinner.svelte';
import ArchiveIcon from './icons/Archive.svelte';
import ChatIcon from './icons/Chat.svelte';
import MoreHorizontalIcon from './icons/MoreHorizontal.svelte';
import SparklesIcon from './icons/Sparkles.svelte';
import TrashIcon from './icons/Trash.svelte';
import ArchiveBoxIcon from '$lib/components/icons/ArchiveBox.svelte';
import GarbageBinIcon from '$lib/components/icons/GarbageBin.svelte';
import { generateTitle } from '$lib/apis';
import { createMessagesList } from '$lib/utils';
import { getOutputText } from '$lib/components/chat/Messages/structuredOutput';
@@ -106,6 +106,7 @@
id !== $chatId &&
!$activeChatIds.has(id) &&
(effectiveReadAt === null || (updatedAt !== null && updatedAt > effectiveReadAt));
$: showInlineActions = id === $chatId || confirmEdit || mouseOver || selected;
const loadChat = async () => {
if (!chat) {
@@ -454,12 +455,12 @@
id="sidebar-chat-item"
class=" w-full flex justify-between rounded-xl px-2 py-[6px] {id === $chatId || confirmEdit
? ($settings?.highContrastMode ?? false)
? 'bg-gray-100 dark:bg-gray-800 selected'
: 'bg-gray-100 dark:bg-gray-900 selected'
? 'bg-black/[0.035] dark:bg-white/[0.06] selected'
: 'bg-black/[0.035] dark:bg-white/[0.045] selected'
: selected
? ($settings?.highContrastMode ?? false)
? 'bg-gray-100 dark:bg-gray-900 selected'
: 'bg-gray-100 dark:bg-gray-900 selected'
? 'bg-black/[0.035] dark:bg-white/[0.055] selected'
: 'bg-black/[0.035] dark:bg-white/[0.045] selected'
: 'hover:bg-gray-50 dark:hover:bg-gray-900 group-hover:bg-gray-50 dark:group-hover:bg-gray-900'} whitespace-nowrap text-ellipsis relative transition {generating
? 'cursor-not-allowed'
: ''}"
@@ -493,12 +494,12 @@
id="sidebar-chat-item"
class=" w-full flex justify-between rounded-xl px-2 py-[6px] {id === $chatId || confirmEdit
? ($settings?.highContrastMode ?? false)
? 'bg-gray-100 dark:bg-gray-800 selected'
: 'bg-gray-100 dark:bg-gray-900 selected'
? 'bg-black/[0.035] dark:bg-white/[0.06] selected'
: 'bg-black/[0.035] dark:bg-white/[0.045] selected'
: selected
? ($settings?.highContrastMode ?? false)
? 'bg-gray-100 dark:bg-gray-900 selected'
: 'bg-gray-100 dark:bg-gray-900 selected'
? 'bg-black/[0.035] dark:bg-white/[0.055] selected'
: 'bg-black/[0.035] dark:bg-white/[0.045] selected'
: ' hover:bg-gray-50 dark:hover:bg-gray-900 group-hover:bg-gray-50 dark:group-hover:bg-gray-900'} whitespace-nowrap text-ellipsis transition"
href="/c/{id}"
on:click={() => {
@@ -560,14 +561,14 @@
dir="auto"
class="text-left self-center overflow-hidden w-full h-[20px] truncate {unread
? 'font-normal text-gray-800 dark:text-gray-200'
: ''}"
: ''} {showInlineActions && !readonly ? 'pr-12' : ''}"
>
{title}
</div>
</div>
<!-- Time ago indicator -->
{#if (updatedAt ?? createdAt) && !mouseOver}
{#if (updatedAt ?? createdAt) && !showInlineActions}
<div class="shrink-0 self-center text-[10px] text-gray-400 dark:text-gray-500 pl-2">
{formatTimeAgo(updatedAt ?? createdAt)}
</div>
@@ -579,21 +580,11 @@
{#if !readonly}
<div
id="sidebar-chat-item-menu"
class="
{id === $chatId || confirmEdit
? ($settings?.highContrastMode ?? false)
? 'from-gray-100 dark:from-gray-800 selected'
: 'from-gray-100 dark:from-gray-900 selected'
: selected
? ($settings?.highContrastMode ?? false)
? 'from-gray-100 dark:from-gray-900 selected'
: 'from-gray-100 dark:from-gray-900 selected'
: 'invisible group-hover:visible from-gray-50 dark:from-gray-900'}
absolute {className === 'pr-2'
class="{showInlineActions
? 'selected'
: 'invisible group-hover:visible'} absolute {className === 'pr-2'
? 'right-[8px]'
: 'right-1'} top-[4px] py-1 pr-0.5 mr-1.5 pl-5 bg-linear-to-l from-80%
to-transparent"
: 'right-1'} inset-y-0 mr-1.5 flex items-center"
on:mouseenter={(e) => {
mouseOver = true;
}}
@@ -607,7 +598,7 @@
>
<Tooltip content={$i18n.t('Generate')}>
<button
class=" self-center dark:hover:text-white transition disabled:cursor-not-allowed"
class="flex size-5 items-center justify-center self-center dark:hover:text-white transition disabled:cursor-not-allowed"
id="generate-title-button"
disabled={generating}
on:click={() => {
@@ -622,14 +613,14 @@
<div class=" flex items-center self-center space-x-1.5">
<Tooltip content={$i18n.t('Archive')} className="flex items-center">
<button
class=" self-center dark:hover:text-white transition disabled:cursor-not-allowed"
class="flex size-5 items-center justify-center self-center dark:hover:text-white transition disabled:cursor-not-allowed"
disabled={archiving}
on:click={() => {
archiveChatHandler(id);
}}
type="button"
>
<ArchiveIcon className="size-4 translate-y-[0.5px]" strokeWidth="1.5" />
<ArchiveBoxIcon className="size-3.5" strokeWidth="1.7" />
</button>
</Tooltip>
@@ -642,7 +633,7 @@
}}
type="button"
>
<TrashIcon strokeWidth="1.5" />
<GarbageBinIcon className="size-3.5" strokeWidth="1.7" />
</button>
</Tooltip>
</div>
@@ -673,12 +664,12 @@
>
<button
aria-label="Chat Menu"
class=" self-center dark:hover:text-white transition m-0"
class="flex size-5 items-center justify-center self-center dark:hover:text-white transition m-0"
on:click={() => {
dispatch('select');
}}
>
<MoreHorizontalIcon className="w-4 h-4" />
<MoreHorizontalIcon className="size-3.5" strokeWidth="2" />
</button>
</ChatMenu>
@@ -691,7 +682,7 @@
showDeleteConfirm = true;
}}
>
<MoreHorizontalIcon className="w-4 h-4" />
<MoreHorizontalIcon className="size-3.5" strokeWidth="2" />
</button>
{/if}
</div>
src/lib/components/layout/Sidebar/ChatMenu.svelte
+2 -2
View File
@@ -18,7 +18,7 @@
import { createMessagesList } from '$lib/utils';
import { getOutputText } from '$lib/components/chat/Messages/structuredOutput';
import { downloadChatAsPDF } from '$lib/apis/utils';
import ArchiveIcon from './icons/Archive.svelte';
import ArchiveBoxIcon from '$lib/components/icons/ArchiveBox.svelte';
import CopyIcon from './icons/Copy.svelte';
import DownloadIcon from './icons/Download.svelte';
import EditPencilIcon from './icons/EditPencil.svelte';
@@ -438,7 +438,7 @@
archiveChatHandler();
}}
>
<ArchiveIcon className="size-3.5" strokeWidth="1.5" />
<ArchiveBoxIcon className="size-3.5" strokeWidth="1.7" />
<div class="flex items-center">{$i18n.t('Archive')}</div>
</button>
src/lib/components/layout/Sidebar/PinnedModelItem.svelte
+2 -2
View File
@@ -37,7 +37,7 @@
<div class="self-center shrink-0">
<img
src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${model.id}&lang=${$i18n.language}`}
class=" size-5 rounded-full -translate-x-[0.5px]"
class=" size-4 rounded-full"
alt="logo"
on:error={(e) => {
e.currentTarget.src = '/favicon.png';
@@ -46,7 +46,7 @@
</div>
<div class="flex self-center translate-y-[0.5px]">
<div class=" self-center text-sm line-clamp-1">
<div class=" self-center text-[13px] leading-5 line-clamp-1">
{model?.name ?? model.id}
</div>
</div>
src/lib/components/layout/Sidebar/PinnedNoteList.svelte
+1 -1
View File
@@ -67,7 +67,7 @@
data-id={note.id}
>
<a
class="grow flex items-center gap-2.5 text-sm"
class="grow flex items-center gap-2.5 text-[13px] leading-5"
href={`/notes/${note.id}`}
on:click={() => {
selectedChatId = null;
src/lib/components/layout/Sidebar/UserStatusModal.svelte
+4 -1
View File
@@ -24,6 +24,9 @@
let loading = false;
const highContrastInputClass =
'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
const submitHandler = async () => {
loading = true;
const res = await updateUserStatus(localStorage.token, {
@@ -123,7 +126,7 @@
id="status-message"
type="text"
bind:value={message}
class={`w-full flex-1 text-sm bg-transparent ${($settings?.highContrastMode ?? false) ? 'placeholder:text-gray-700 dark:placeholder:text-gray-100' : 'outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
class={`w-full flex-1 text-sm ${($settings?.highContrastMode ?? false) ? highContrastInputClass : 'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
placeholder={$i18n.t("What's on your mind?")}
autocomplete="off"
required