pingu_98/open-webui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refac: styling

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-08-07 03:35:12 +04:00
parent 07b16cc8d1
commit 2bfe684716
14 changed files with 185 additions and 161 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/lib/components/channel/Navbar.svelte
View file

@ -8,8 +8,9 @@
import { page } from '$app/stores';
import UserMenu from '$lib/components/layout/Sidebar/UserMenu.svelte';
import MenuLines from '../icons/MenuLines.svelte';
import PencilSquare from '../icons/PencilSquare.svelte';
import Tooltip from '../common/Tooltip.svelte';
import Sidebar from '../icons/Sidebar.svelte';
const i18n = getContext('i18n');
@ -26,20 +27,21 @@
<div
class="{$showSidebar
? 'md:hidden'
: ''} mr-1 self-start flex flex-none items-center text-gray-600 dark:text-gray-400"
: ''} mr-1.5 mt-0.5 self-start flex flex-none items-center text-gray-600 dark:text-gray-400"
>
<button
id="sidebar-toggle-button"
class="cursor-pointer px-2 py-2 flex rounded-xl hover:bg-gray-50 dark:hover:bg-gray-850 transition"
on:click={() => {
showSidebar.set(!$showSidebar);
}}
aria-label="Toggle Sidebar"
>
<div class=" m-auto self-center">
<MenuLines />
</div>
</button>
<Tooltip content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}>
<button
id="sidebar-toggle-button"
class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition cursor-"
on:click={() => {
showSidebar.set(!$showSidebar);
}}
>
<div class=" self-center p-1.5">
<Sidebar />
</div>
</button>
</Tooltip>
</div>
<div

32
src/lib/components/chat/Navbar.svelte
View file

@ -24,11 +24,11 @@
import Tooltip from '../common/Tooltip.svelte';
import Menu from '$lib/components/layout/Navbar/Menu.svelte';
import UserMenu from '$lib/components/layout/Sidebar/UserMenu.svelte';
import MenuLines from '../icons/MenuLines.svelte';
import AdjustmentsHorizontal from '../icons/AdjustmentsHorizontal.svelte';
import PencilSquare from '../icons/PencilSquare.svelte';
import Banner from '../common/Banner.svelte';
import Sidebar from '../icons/Sidebar.svelte';
const i18n = getContext('i18n');
@ -70,34 +70,34 @@
<div
class="{$showSidebar
? 'md:hidden'
: ''} mr-1 self-start flex flex-none items-center text-gray-600 dark:text-gray-400"
: ''} mr-1.5 mt-1 self-start flex flex-none items-center text-gray-600 dark:text-gray-400"
>
<button
id="sidebar-toggle-button"
class="cursor-pointer px-2 py-2 flex rounded-xl hover:bg-gray-50 dark:hover:bg-gray-850 transition"
on:click={() => {
showSidebar.set(!$showSidebar);
}}
aria-label="Toggle Sidebar"
>
<div class=" m-auto self-center">
<MenuLines />
</div>
</button>
<Tooltip content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}>
<button
class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition cursor-"
on:click={() => {
showSidebar.set(!$showSidebar);
}}
>
<div class=" self-center p-1.5">
<Sidebar />
</div>
</button>
</Tooltip>
{#if !$mobile}
<Tooltip content={$i18n.t('New Chat')}>
<button
class=" flex {$showSidebar
? 'md:hidden'
: ''} cursor-pointer px-2 py-2 rounded-xl text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-850 transition"
: ''} cursor-pointer p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition"
on:click={() => {
initNewChat();
}}
aria-label="New Chat"
>
<div class=" m-auto self-center">
<PencilSquare className=" size-5" strokeWidth="2" />
<PencilSquare className=" size-5" strokeWidth="1.5" />
</div>
</button>
</Tooltip>

26
src/lib/components/icons/Sidebar.svelte Normal file
View file

@ -0,0 +1,26 @@
<script lang="ts">
export let className = 'size-5';
export let strokeWidth = '1.5';
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width={strokeWidth}
stroke="currentColor"
class={className}
><rect
x="3"
y="3"
width="18"
height="18"
rx="5"
ry="5"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
fill="none"
></rect><path d="M9.5 21V3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
></path></svg
>

28
src/lib/components/layout/Navbar.svelte
View file

@ -21,12 +21,11 @@
import Menu from './Navbar/Menu.svelte';
import { page } from '$app/stores';
import UserMenu from './Sidebar/UserMenu.svelte';
import MenuLines from '../icons/MenuLines.svelte';
import AdjustmentsHorizontal from '../icons/AdjustmentsHorizontal.svelte';
import Map from '../icons/Map.svelte';
import { stringify } from 'postcss';
import PencilSquare from '../icons/PencilSquare.svelte';
import Plus from '../icons/Plus.svelte';
import Sidebar from '../icons/Sidebar.svelte';
const i18n = getContext('i18n');
@ -56,18 +55,19 @@
? 'md:hidden'
: ''} mr-1 self-start flex flex-none items-center text-gray-600 dark:text-gray-400"
>
<button
id="sidebar-toggle-button"
class="cursor-pointer px-2 py-2 flex rounded-xl hover:bg-gray-50 dark:hover:bg-gray-850 transition"
on:click={() => {
showSidebar.set(!$showSidebar);
}}
aria-label="Toggle Sidebar"
>
<div class=" m-auto self-center">
<MenuLines />
</div>
</button>
<Tooltip content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}>
<button
id="sidebar-toggle-button"
class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition cursor-"
on:click={() => {
showSidebar.set(!$showSidebar);
}}
>
<div class=" self-center p-1.5">
<Sidebar />
</div>
</button>
</Tooltip>
</div>
<div

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

@ -62,6 +62,7 @@
import FolderModal from './Sidebar/Folders/FolderModal.svelte';
import Sortable from 'sortablejs';
import { updateUserSettings } from '$lib/apis/users';
import Sidebar from '../icons/Sidebar.svelte';
const BREAKPOINT = 768;
@ -518,15 +519,15 @@
data-state={$showSidebar}
>
<div
class=" my-auto flex flex-col justify-between h-screen max-h-[100dvh] w-[260px] overflow-x-hidden z-50 {$showSidebar
class=" my-auto flex flex-col justify-between h-screen max-h-[100dvh] w-[260px] overflow-x-hidden scrollbar-hidden z-50 {$showSidebar
? ''
: 'invisible'}"
>
<div
class="px-1.5 py-2 flex justify-between space-x-1 text-gray-600 dark:text-gray-400 sticky top-0 z-10 bg-gray-50 dark:bg-gray-950"
class="px-1.5 pt-2 pb-1.5 flex justify-between space-x-1 text-gray-600 dark:text-gray-400 sticky top-0 z-10 bg-gray-50 dark:bg-gray-950"
>
<a
class="flex items-center rounded-lg p-1.5 h-full justify-center hover:bg-gray-100 dark:hover:bg-gray-900 transition no-drag-region"
class="flex items-center rounded-lg p-1.5 h-full justify-center hover:bg-gray-100 dark:hover:bg-gray-850 transition no-drag-region"
href="/"
draggable="false"
on:click={newChatHandler}
@ -539,34 +540,23 @@
/>
</a>
<div class="flex flex-1 px-2">
<a href="/" class="flex flex-1 px-1.5" on:click={newChatHandler}>
<div class=" self-center font-medium text-gray-850 dark:text-white font-primary">
{$WEBUI_NAME}
</div>
</div>
<button
class=" cursor-pointer p-[7px] flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-900 transition"
on:click={() => {
showSidebar.set(!$showSidebar);
}}
>
<div class=" m-auto self-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"
/>
</svg>
</div>
</button>
</a>
<Tooltip content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}>
<button
class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition cursor-"
on:click={() => {
showSidebar.set(!$showSidebar);
}}
>
<div class=" self-center p-1.5">
<Sidebar />
</div>
</button>
</Tooltip>
</div>
<!-- {#if $user?.role === 'admin'}

28
src/lib/components/notes/NoteEditor.svelte
View file

@ -61,7 +61,6 @@
import MicSolid from '../icons/MicSolid.svelte';
import VoiceRecording from '../chat/MessageInput/VoiceRecording.svelte';
import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
import MenuLines from '../icons/MenuLines.svelte';
import ChatBubbleOval from '../icons/ChatBubbleOval.svelte';
import Calendar from '../icons/Calendar.svelte';
@ -79,7 +78,7 @@
import Bars3BottomLeft from '../icons/Bars3BottomLeft.svelte';
import ArrowUturnLeft from '../icons/ArrowUturnLeft.svelte';
import ArrowUturnRight from '../icons/ArrowUturnRight.svelte';
import Sidebar from '../common/Sidebar.svelte';
import Sidebar from '../icons/Sidebar.svelte';
import ArrowRight from '../icons/ArrowRight.svelte';
import Cog6 from '../icons/Cog6.svelte';
import AiMenu from './AIMenu.svelte';
@ -943,18 +942,21 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
? 'md:hidden pl-0.5'
: ''} flex flex-none items-center pr-1 -translate-x-1"
>
<button
id="sidebar-toggle-button"
class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
on:click={() => {
showSidebar.set(!$showSidebar);
}}
aria-label="Toggle Sidebar"
<Tooltip
content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
>
<div class=" m-auto self-center">
<MenuLines />
</div>
</button>
<button
id="sidebar-toggle-button"
class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition cursor-"
on:click={() => {
showSidebar.set(!$showSidebar);
}}
>
<div class=" self-center p-1.5">
<Sidebar />
</div>
</button>
</Tooltip>
</div>
<input

1
src/lib/components/playground/Completions.svelte
View file

@ -10,7 +10,6 @@
import { splitStream } from '$lib/utils';
import Selector from '$lib/components/chat/ModelSelector/Selector.svelte';
import MenuLines from '../icons/MenuLines.svelte';
const i18n = getContext('i18n');

30
src/routes/(app)/admin/+layout.svelte
View file

@ -3,8 +3,9 @@
import { goto } from '$app/navigation';
import { WEBUI_NAME, showSidebar, user } from '$lib/stores';
import MenuLines from '$lib/components/icons/MenuLines.svelte';
import { page } from '$app/stores';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import Sidebar from '$lib/components/icons/Sidebar.svelte';
const i18n = getContext('i18n');
@ -30,21 +31,22 @@
? 'md:max-w-[calc(100%-260px)]'
: ''} max-w-full"
>
<nav class=" px-2.5 pt-1 backdrop-blur-xl drag-region">
<nav class=" px-2.5 pt-1.5 backdrop-blur-xl drag-region">
<div class=" flex items-center gap-1">
<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center self-end">
<button
id="sidebar-toggle-button"
class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
on:click={() => {
showSidebar.set(!$showSidebar);
}}
aria-label="Toggle Sidebar"
>
<div class=" m-auto self-center">
<MenuLines />
</div>
</button>
<Tooltip content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}>
<button
id="sidebar-toggle-button"
class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition cursor-"
on:click={() => {
showSidebar.set(!$showSidebar);
}}
>
<div class=" self-center p-1.5">
<Sidebar />
</div>
</button>
</Tooltip>
</div>
<div class=" flex w-full">

30
src/routes/(app)/home/+layout.svelte
View file

@ -1,8 +1,9 @@
<script lang="ts">
import { onMount, getContext } from 'svelte';
import { WEBUI_NAME, showSidebar, functions } from '$lib/stores';
import MenuLines from '$lib/components/icons/MenuLines.svelte';
import { page } from '$app/stores';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import Sidebar from '$lib/components/icons/Sidebar.svelte';
const i18n = getContext('i18n');
@ -22,19 +23,20 @@
>
<nav class=" px-2.5 pt-1 backdrop-blur-xl w-full drag-region">
<div class=" flex items-center">
<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center self-end">
<button
id="sidebar-toggle-button"
class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
on:click={() => {
showSidebar.set(!$showSidebar);
}}
aria-label="Toggle Sidebar"
>
<div class=" m-auto self-center">
<MenuLines />
</div>
</button>
<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center self-end mt-1.5">
<Tooltip content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}>
<button
id="sidebar-toggle-button"
class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition cursor-"
on:click={() => {
showSidebar.set(!$showSidebar);
}}
>
<div class=" self-center p-1.5">
<Sidebar />
</div>
</button>
</Tooltip>
</div>
<div class=" flex w-full">

3
src/routes/(app)/notes/+layout.svelte
View file

@ -3,9 +3,6 @@
import { WEBUI_NAME, showSidebar, functions, config, user, showArchivedChats } from '$lib/stores';
import { goto } from '$app/navigation';
import MenuLines from '$lib/components/icons/MenuLines.svelte';
import UserMenu from '$lib/components/layout/Sidebar/UserMenu.svelte';
const i18n = getContext('i18n');
let loaded = false;

30
src/routes/(app)/notes/+page.svelte
View file

@ -4,9 +4,10 @@
const i18n = getContext('i18n');
import MenuLines from '$lib/components/icons/MenuLines.svelte';
import UserMenu from '$lib/components/layout/Sidebar/UserMenu.svelte';
import Notes from '$lib/components/notes/Notes.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import Sidebar from '$lib/components/icons/Sidebar.svelte';
</script>
<div
@ -14,21 +15,22 @@
? 'md:max-w-[calc(100%-260px)]'
: ''} max-w-full"
>
<nav class=" px-2 pt-1 backdrop-blur-xl w-full drag-region">
<nav class=" px-2 pt-1.5 ml-0.5 backdrop-blur-xl w-full drag-region">
<div class=" flex items-center">
<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center">
<button
id="sidebar-toggle-button"
class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
on:click={() => {
showSidebar.set(!$showSidebar);
}}
aria-label="Toggle Sidebar"
>
<div class=" m-auto self-center">
<MenuLines />
</div>
</button>
<Tooltip content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}>
<button
id="sidebar-toggle-button"
class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition cursor-"
on:click={() => {
showSidebar.set(!$showSidebar);
}}
>
<div class=" self-center p-1.5">
<Sidebar />
</div>
</button>
</Tooltip>
</div>
<div class="ml-2 py-0.5 self-center flex items-center justify-between w-full">

30
src/routes/(app)/playground/+layout.svelte
View file

@ -1,8 +1,9 @@
<script lang="ts">
import { onMount, getContext } from 'svelte';
import { WEBUI_NAME, showSidebar, functions } from '$lib/stores';
import MenuLines from '$lib/components/icons/MenuLines.svelte';
import { page } from '$app/stores';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import Sidebar from '$lib/components/icons/Sidebar.svelte';
const i18n = getContext('i18n');
@ -20,21 +21,22 @@
? 'md:max-w-[calc(100%-260px)]'
: ''} max-w-full"
>
<nav class=" px-2.5 pt-1 backdrop-blur-xl w-full drag-region">
<nav class=" px-2.5 pt-1.5 backdrop-blur-xl w-full drag-region">
<div class=" flex items-center">
<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center self-end">
<button
id="sidebar-toggle-button"
class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
on:click={() => {
showSidebar.set(!$showSidebar);
}}
aria-label="Toggle Sidebar"
>
<div class=" m-auto self-center">
<MenuLines />
</div>
</button>
<Tooltip content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}>
<button
id="sidebar-toggle-button"
class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition cursor-"
on:click={() => {
showSidebar.set(!$showSidebar);
}}
>
<div class=" self-center p-1.5">
<Sidebar />
</div>
</button>
</Tooltip>
</div>
<div class=" flex w-full">

31
src/routes/(app)/workspace/+layout.svelte
View file

@ -13,8 +13,8 @@
} from '$lib/stores';
import { page } from '$app/stores';
import { goto } from '$app/navigation';
import MenuLines from '$lib/components/icons/MenuLines.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import Sidebar from '$lib/components/icons/Sidebar.svelte';
const i18n = getContext('i18n');
@ -55,21 +55,22 @@
? 'md:max-w-[calc(100%-260px)]'
: ''} max-w-full"
>
<nav class=" px-2.5 pt-1 backdrop-blur-xl drag-region">
<nav class=" px-2.5 pt-1.5 backdrop-blur-xl drag-region">
<div class=" flex items-center gap-1">
<div class="{$showSidebar ? 'md:hidden' : ''} self-center flex flex-none items-center">
<button
id="sidebar-toggle-button"
class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
on:click={() => {
showSidebar.set(!$showSidebar);
}}
aria-label="Toggle Sidebar"
>
<div class=" m-auto self-center">
<MenuLines />
</div>
</button>
<Tooltip content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}>
<button
id="sidebar-toggle-button"
class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition cursor-"
on:click={() => {
showSidebar.set(!$showSidebar);
}}
>
<div class=" self-center p-1.5">
<Sidebar />
</div>
</button>
</Tooltip>
</div>
<div class="">

1
src/routes/s/[id]/+page.svelte
View file

@ -11,7 +11,6 @@
import { getChatByShareId, cloneSharedChatById } from '$lib/apis/chats';
import Messages from '$lib/components/chat/Messages.svelte';
import Navbar from '$lib/components/layout/Navbar.svelte';
import { getUserById, getUserSettings } from '$lib/apis/users';
import { getModels } from '$lib/apis';