ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-14 21:35:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

refac: styling

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-09-15 17:38:34 -05:00
parent 19e3214997
commit 3f27d9ada1
2 changed files with 105 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

199
src/lib/components/layout/Sidebar.svelte
View file

@ -940,110 +940,115 @@
} }
}} }}
> >
{#if $pinnedChats.length > 0} {#if folders || $pinnedChats.length > 0}
<div class="flex flex-col space-y-1 rounded-xl"> <div class="mb-1">
<Folder {#if folders}
className="" <Folders
bind:open={showPinnedChat} {folders}
on:change={(e) => { {shiftKey}
localStorage.setItem('showPinnedChat', e.detail); onDelete={(folderId) => {
console.log(e.detail); selectedFolder.set(null);
}} initChatList();
on:import={(e) => { }}
importChatHandler(e.detail, true); on:update={() => {
}} initChatList();
on:drop={async (e) => { }}
const { type, id, item } = e.detail; on:import={(e) => {
const { folderId, items } = e.detail;
importChatHandler(items, false, folderId);
}}
on:change={async () => {
initChatList();
}}
/>
{/if}
if (type === 'chat') { {#if $pinnedChats.length > 0}
let chat = await getChatById(localStorage.token, id).catch((error) => { <div class="flex flex-col space-y-1 rounded-xl">
return null; <Folder
}); className=""
if (!chat && item) { bind:open={showPinnedChat}
chat = await importChat( on:change={(e) => {
localStorage.token, localStorage.setItem('showPinnedChat', e.detail);
item.chat, console.log(e.detail);
item?.meta ?? {}, }}
false, on:import={(e) => {
null, importChatHandler(e.detail, true);
item?.created_at ?? null, }}
item?.updated_at ?? null on:drop={async (e) => {
); const { type, id, item } = e.detail;
}
if (chat) { if (type === 'chat') {
console.log(chat); let chat = await getChatById(localStorage.token, id).catch((error) => {
if (chat.folder_id) {
const res = await updateChatFolderIdById(
localStorage.token,
chat.id,
null
).catch((error) => {
toast.error(`${error}`);
return null; return null;
}); });
} if (!chat && item) {
chat = await importChat(
localStorage.token,
item.chat,
item?.meta ?? {},
false,
null,
item?.created_at ?? null,
item?.updated_at ?? null
);
}
if (!chat.pinned) { if (chat) {
const res = await toggleChatPinnedStatusById(localStorage.token, chat.id); console.log(chat);
} if (chat.folder_id) {
const res = await updateChatFolderIdById(
localStorage.token,
chat.id,
null
).catch((error) => {
toast.error(`${error}`);
return null;
});
}
initChatList(); if (!chat.pinned) {
} const res = await toggleChatPinnedStatusById(
} localStorage.token,
}} chat.id
name={$i18n.t('Pinned')} );
> }
<div
class="ml-3 pl-1 mt-[1px] flex flex-col overflow-y-auto scrollbar-hidden border-s border-gray-100 dark:border-gray-900" initChatList();
> }
{#each $pinnedChats as chat, idx (`pinned-chat-${chat?.id ?? idx}`)} }
<ChatItem }}
className="" name={$i18n.t('Pinned')}
id={chat.id} >
title={chat.title} <div
{shiftKey} class="ml-3 pl-1 mt-[1px] flex flex-col overflow-y-auto scrollbar-hidden border-s border-gray-100 dark:border-gray-900"
selected={selectedChatId === chat.id} >
on:select={() => { {#each $pinnedChats as chat, idx (`pinned-chat-${chat?.id ?? idx}`)}
selectedChatId = chat.id; <ChatItem
}} className=""
on:unselect={() => { id={chat.id}
selectedChatId = null; title={chat.title}
}} {shiftKey}
on:change={async () => { selected={selectedChatId === chat.id}
initChatList(); on:select={() => {
}} selectedChatId = chat.id;
on:tag={(e) => { }}
const { type, name } = e.detail; on:unselect={() => {
tagEventHandler(type, name, chat.id); selectedChatId = null;
}} }}
/> on:change={async () => {
{/each} initChatList();
}}
on:tag={(e) => {
const { type, name } = e.detail;
tagEventHandler(type, name, chat.id);
}}
/>
{/each}
</div>
</Folder>
</div> </div>
</Folder> {/if}
</div>
{/if}
{#if folders}
<div class="mb-1">
<Folders
{folders}
{shiftKey}
onDelete={(folderId) => {
selectedFolder.set(null);
initChatList();
}}
on:update={() => {
initChatList();
}}
on:import={(e) => {
const { folderId, items } = e.detail;
importChatHandler(items, false, folderId);
}}
on:change={async () => {
initChatList();
}}
/>
</div> </div>
{/if} {/if}

6
src/lib/components/layout/Sidebar/RecursiveFolder.svelte
View file

@ -430,7 +430,7 @@
<div class="w-full group"> <div class="w-full group">
<button <button
id="folder-{folderId}-button" id="folder-{folderId}-button"
class="relative w-full py-1 px-1.5 rounded-lg flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-500 font-medium hover:bg-gray-100 dark:hover:bg-gray-900 transition {$selectedFolder?.id === class="relative w-full py-1 px-1.5 rounded-lg flex items-center gap-1.5 hover:bg-gray-100 dark:hover:bg-gray-900 transition {$selectedFolder?.id ===
folderId folderId
? 'bg-gray-100 dark:bg-gray-900' ? 'bg-gray-100 dark:bg-gray-900'
: ''}" : ''}"
@ -464,7 +464,7 @@
}} }}
> >
<button <button
class="text-gray-300 dark:text-gray-600 transition-all p-[3px] dark:hover:bg-gray-850 rounded-lg" class="text-gray-500 dark:text-gray-500 transition-all p-[3px] hover:bg-gray-200 dark:hover:bg-gray-850 rounded-lg"
on:click={(e) => { on:click={(e) => {
e.stopPropagation(); e.stopPropagation();
open = !open; open = !open;
@ -518,7 +518,7 @@
edit = false; edit = false;
} }
}} }}
class="w-full h-full bg-transparent text-gray-500 dark:text-gray-500 outline-hidden" class="w-full h-full bg-transparent outline-hidden"
/> />
{:else} {:else}
{folders[folderId].name} {folders[folderId].name}