ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-13 21:05: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-03 20:53:50 +04:00
parent 5bdd334b74
commit 71b6a942fe
3 changed files with 28 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lib/components/common/Tags.svelte
View file

@ -9,7 +9,7 @@
export let tags = []; export let tags = [];
</script> </script>
<ul class="flex flex-row flex-wrap gap-1 line-clamp-1"> <ul class="flex flex-row flex-wrap gap-[0.3rem] line-clamp-1">
<TagList <TagList
{tags} {tags}
on:delete={(e) => { on:delete={(e) => {

36
src/lib/components/layout/Navbar/Menu.svelte
View file

@ -281,7 +281,7 @@
transition={flyAndScale} transition={flyAndScale}
> >
<!-- <DropdownMenu.Item <!-- <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer dark:hover:bg-gray-800 rounded-md" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer dark:hover:bg-gray-800 rounded-lg"
on:click={async () => { on:click={async () => {
await showSettings.set(!$showSettings); await showSettings.set(!$showSettings);
}} }}
@ -310,7 +310,7 @@
{#if $mobile} {#if $mobile}
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg select-none w-full"
id="chat-controls-button" id="chat-controls-button"
on:click={async () => { on:click={async () => {
await showControls.set(true); await showControls.set(true);
@ -324,7 +324,7 @@
{/if} {/if}
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg select-none w-full"
id="chat-overview-button" id="chat-overview-button"
on:click={async () => { on:click={async () => {
await showControls.set(true); await showControls.set(true);
@ -337,7 +337,7 @@
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg select-none w-full"
id="chat-overview-button" id="chat-overview-button"
on:click={async () => { on:click={async () => {
await showControls.set(true); await showControls.set(true);
@ -353,13 +353,13 @@
{#if !$temporaryChatEnabled && ($user?.role === 'admin' || ($user.permissions?.chat?.share ?? true))} {#if !$temporaryChatEnabled && ($user?.role === 'admin' || ($user.permissions?.chat?.share ?? true))}
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg select-none w-full"
id="chat-share-button" id="chat-share-button"
on:click={() => { on:click={() => {
shareHandler(); shareHandler();
}} }}
> >
<Share /> <Share strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Share')}</div> <div class="flex items-center">{$i18n.t('Share')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
{/if} {/if}
@ -367,9 +367,9 @@
{#if chat?.id} {#if chat?.id}
<DropdownMenu.Sub> <DropdownMenu.Sub>
<DropdownMenu.SubTrigger <DropdownMenu.SubTrigger
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg select-none w-full"
> >
<Folder /> <Folder strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Move')}</div> <div class="flex items-center">{$i18n.t('Move')}</div>
</DropdownMenu.SubTrigger> </DropdownMenu.SubTrigger>
@ -380,12 +380,12 @@
> >
{#each $folders.sort((a, b) => b.updated_at - a.updated_at) as folder} {#each $folders.sort((a, b) => b.updated_at - a.updated_at) as folder}
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg"
on:click={() => { on:click={() => {
moveChatHandler(chat?.id, folder?.id); moveChatHandler(chat?.id, folder?.id);
}} }}
> >
<Folder /> <Folder strokeWidth="1.5" />
<div class="flex items-center">{folder?.name ?? 'Folder'}</div> <div class="flex items-center">{folder?.name ?? 'Folder'}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
@ -395,18 +395,18 @@
{/if} {/if}
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg"
on:click={() => { on:click={() => {
archiveChatHandler(); archiveChatHandler();
}} }}
> >
<ArchiveBox className="size-4" strokeWidth="2" /> <ArchiveBox className="size-4" strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Archive')}</div> <div class="flex items-center">{$i18n.t('Archive')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Sub> <DropdownMenu.Sub>
<DropdownMenu.SubTrigger <DropdownMenu.SubTrigger
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg select-none w-full"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -432,7 +432,7 @@
> >
{#if $user?.role === 'admin' || ($user.permissions?.chat?.export ?? true)} {#if $user?.role === 'admin' || ($user.permissions?.chat?.export ?? true)}
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg select-none w-full"
on:click={() => { on:click={() => {
downloadJSONExport(); downloadJSONExport();
}} }}
@ -441,7 +441,7 @@
</DropdownMenu.Item> </DropdownMenu.Item>
{/if} {/if}
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg select-none w-full"
on:click={() => { on:click={() => {
downloadTxt(); downloadTxt();
}} }}
@ -450,7 +450,7 @@
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg select-none w-full"
on:click={() => { on:click={() => {
downloadPdf(); downloadPdf();
}} }}
@ -461,7 +461,7 @@
</DropdownMenu.Sub> </DropdownMenu.Sub>
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg select-none w-full"
id="chat-copy-button" id="chat-copy-button"
on:click={async () => { on:click={async () => {
const res = await copyToClipboard(await getChatAsText()).catch((e) => { const res = await copyToClipboard(await getChatAsText()).catch((e) => {
@ -478,7 +478,7 @@
</DropdownMenu.Item> </DropdownMenu.Item>
{#if !$temporaryChatEnabled} {#if !$temporaryChatEnabled}
<hr class="border-gray-100 dark:border-gray-850 my-0.5" /> <hr class="border-gray-50 dark:border-gray-800 my-1" />
<div class="flex p-1"> <div class="flex p-1">
<Tags chatId={chat.id} /> <Tags chatId={chat.id} />

18
src/lib/components/layout/Sidebar/ChatMenu.svelte
View file

@ -124,10 +124,10 @@
}} }}
> >
{#if pinned} {#if pinned}
<BookmarkSlash strokeWidth="2" /> <BookmarkSlash strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Unpin')}</div> <div class="flex items-center">{$i18n.t('Unpin')}</div>
{:else} {:else}
<Bookmark strokeWidth="2" /> <Bookmark strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Pin')}</div> <div class="flex items-center">{$i18n.t('Pin')}</div>
{/if} {/if}
</DropdownMenu.Item> </DropdownMenu.Item>
@ -168,7 +168,7 @@
renameHandler(); renameHandler();
}} }}
> >
<Pencil strokeWidth="2" /> <Pencil strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Rename')}</div> <div class="flex items-center">{$i18n.t('Rename')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
@ -178,7 +178,7 @@
cloneChatHandler(); cloneChatHandler();
}} }}
> >
<DocumentDuplicate strokeWidth="2" /> <DocumentDuplicate strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Clone')}</div> <div class="flex items-center">{$i18n.t('Clone')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
@ -188,7 +188,7 @@
archiveChatHandler(); archiveChatHandler();
}} }}
> >
<ArchiveBox strokeWidth="2" /> <ArchiveBox strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Archive')}</div> <div class="flex items-center">{$i18n.t('Archive')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
@ -199,7 +199,7 @@
shareHandler(); shareHandler();
}} }}
> >
<Share /> <Share strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Share')}</div> <div class="flex items-center">{$i18n.t('Share')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
{/if} {/if}
@ -208,7 +208,7 @@
<DropdownMenu.SubTrigger <DropdownMenu.SubTrigger
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
> >
<Download strokeWidth="2" /> <Download strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Download')}</div> <div class="flex items-center">{$i18n.t('Download')}</div>
</DropdownMenu.SubTrigger> </DropdownMenu.SubTrigger>
@ -244,11 +244,11 @@
deleteHandler(); deleteHandler();
}} }}
> >
<GarbageBin strokeWidth="2" /> <GarbageBin strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Delete')}</div> <div class="flex items-center">{$i18n.t('Delete')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
<hr class="border-gray-100 dark:border-gray-850 my-0.5" /> <hr class="border-gray-50 dark:border-gray-800 my-1" />
<div class="flex p-1"> <div class="flex p-1">
<Tags <Tags