ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-14 13:25:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

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}
<div class="flex flex-col space-y-1 rounded-xl">
<Folder
className=""
bind:open={showPinnedChat}
on:change={(e) => {
localStorage.setItem('showPinnedChat', e.detail);
console.log(e.detail);
}}
on:import={(e) => {
importChatHandler(e.detail, true);
}}
on:drop={async (e) => {
const { type, id, item } = e.detail;
{#if folders || $pinnedChats.length > 0}
<div class="mb-1">
{#if folders}
<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();
}}
/>
{/if}
if (type === 'chat') {
let chat = await getChatById(localStorage.token, id).catch((error) => {
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 $pinnedChats.length > 0}
<div class="flex flex-col space-y-1 rounded-xl">
<Folder
className=""
bind:open={showPinnedChat}
on:change={(e) => {
localStorage.setItem('showPinnedChat', e.detail);
console.log(e.detail);
}}
on:import={(e) => {
importChatHandler(e.detail, true);
}}
on:drop={async (e) => {
const { type, id, item } = e.detail;
if (chat) {
console.log(chat);
if (chat.folder_id) {
const res = await updateChatFolderIdById(
localStorage.token,
chat.id,
null
).catch((error) => {
toast.error(`${error}`);
if (type === 'chat') {
let chat = await getChatById(localStorage.token, id).catch((error) => {
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) {
const res = await toggleChatPinnedStatusById(localStorage.token, chat.id);
}
if (chat) {
console.log(chat);
if (chat.folder_id) {
const res = await updateChatFolderIdById(
localStorage.token,
chat.id,
null
).catch((error) => {
toast.error(`${error}`);
return null;
});
}
initChatList();
}
}
}}
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"
>
{#each $pinnedChats as chat, idx (`pinned-chat-${chat?.id ?? idx}`)}
<ChatItem
className=""
id={chat.id}
title={chat.title}
{shiftKey}
selected={selectedChatId === chat.id}
on:select={() => {
selectedChatId = chat.id;
}}
on:unselect={() => {
selectedChatId = null;
}}
on:change={async () => {
initChatList();
}}
on:tag={(e) => {
const { type, name } = e.detail;
tagEventHandler(type, name, chat.id);
}}
/>
{/each}
if (!chat.pinned) {
const res = await toggleChatPinnedStatusById(
localStorage.token,
chat.id
);
}
initChatList();
}
}
}}
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"
>
{#each $pinnedChats as chat, idx (`pinned-chat-${chat?.id ?? idx}`)}
<ChatItem
className=""
id={chat.id}
title={chat.title}
{shiftKey}
selected={selectedChatId === chat.id}
on:select={() => {
selectedChatId = chat.id;
}}
on:unselect={() => {
selectedChatId = null;
}}
on:change={async () => {
initChatList();
}}
on:tag={(e) => {
const { type, name } = e.detail;
tagEventHandler(type, name, chat.id);
}}
/>
{/each}
</div>
</Folder>
</div>
</Folder>
</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();
}}
/>
{/if}
</div>
{/if}

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

@ -430,7 +430,7 @@
<div class="w-full group">
<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
? 'bg-gray-100 dark:bg-gray-900'
: ''}"
@ -464,7 +464,7 @@
}}
>
<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) => {
e.stopPropagation();
open = !open;
@ -518,7 +518,7 @@
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}
{folders[folderId].name}