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 3

refac

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-09-20 01:15:27 -05:00
parent 27a91cc80a
commit 4ad7430986
5 changed files with 24 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/lib/components/chat/SettingsModal.svelte
View file

@ -571,7 +571,7 @@
<Modal size="xl" bind:show> <Modal size="xl" bind:show>
<div class="text-gray-700 dark:text-gray-100 mx-1"> <div class="text-gray-700 dark:text-gray-100 mx-1">
<div class=" flex justify-between dark:text-gray-300 px-5 pt-4.5 pb-1.5"> <div class=" flex justify-between dark:text-gray-300 px-4 md:px-5 pt-4.5 pb-0.5 md:pb-2">
<div class=" text-lg font-medium self-center">{$i18n.t('Settings')}</div> <div class=" text-lg font-medium self-center">{$i18n.t('Settings')}</div>
<button <button
aria-label={$i18n.t('Close settings modal')} aria-label={$i18n.t('Close settings modal')}
@ -584,13 +584,16 @@
</button> </button>
</div> </div>
<div class="flex flex-col md:flex-row w-full px-4.5 pt-1 pb-4 md:space-x-4"> <div class="flex flex-col md:flex-row w-full pt-1 pb-4">
<div <div
role="tablist" role="tablist"
id="settings-tabs-container" id="settings-tabs-container"
class="tabs flex flex-row overflow-x-auto gap-2.5 md:gap-1 md:flex-col flex-1 md:flex-none md:w-40 md:min-h-[36rem] md:max-h-[36rem] dark:text-gray-200 text-sm text-left mb-1 md:mb-0 -translate-y-1" class="tabs flex flex-row overflow-x-auto gap-2.5 mx-3 md:ml-4 md:pr-4 md:gap-1 md:flex-col flex-1 md:flex-none md:w-50 md:min-h-[36rem] md:max-h-[36rem] dark:text-gray-200 text-sm text-left mb-1 md:mb-0 -translate-y-1"
> >
<div class="hidden md:flex w-full rounded-xl -mb-1 px-[0.5px] gap-2" id="settings-search"> <div
class="hidden md:flex w-full rounded-full px-2.5 gap-2 bg-gray-50 dark:bg-gray-850 my-1"
id="settings-search"
>
<div class="self-center rounded-l-xl bg-transparent"> <div class="self-center rounded-l-xl bg-transparent">
<Search <Search
className="size-3.5" className="size-3.5"
@ -599,7 +602,7 @@
</div> </div>
<label class="sr-only" for="search-input-settings-modal">{$i18n.t('Search')}</label> <label class="sr-only" for="search-input-settings-modal">{$i18n.t('Search')}</label>
<input <input
class={`w-full py-1.5 text-sm bg-transparent dark:text-gray-300 outline-hidden class={`w-full py-1 text-sm bg-transparent dark:text-gray-300 outline-hidden
${($settings?.highContrastMode ?? false) ? 'placeholder-gray-800' : ''}`} ${($settings?.highContrastMode ?? false) ? 'placeholder-gray-800' : ''}`}
bind:value={search} bind:value={search}
id="search-input-settings-modal" id="search-input-settings-modal"
@ -614,7 +617,7 @@
role="tab" role="tab"
aria-controls="tab-general" aria-controls="tab-general"
aria-selected={selectedTab === 'general'} aria-selected={selectedTab === 'general'}
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition class={`px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none flex text-left transition
${ ${
selectedTab === 'general' selectedTab === 'general'
? ($settings?.highContrastMode ?? false) ? ($settings?.highContrastMode ?? false)
@ -638,7 +641,7 @@
role="tab" role="tab"
aria-controls="tab-interface" aria-controls="tab-interface"
aria-selected={selectedTab === 'interface'} aria-selected={selectedTab === 'interface'}
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition class={`px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none flex text-left transition
${ ${
selectedTab === 'interface' selectedTab === 'interface'
? ($settings?.highContrastMode ?? false) ? ($settings?.highContrastMode ?? false)
@ -663,7 +666,7 @@
role="tab" role="tab"
aria-controls="tab-connections" aria-controls="tab-connections"
aria-selected={selectedTab === 'connections'} aria-selected={selectedTab === 'connections'}
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition class={`px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none flex text-left transition
${ ${
selectedTab === 'connections' selectedTab === 'connections'
? ($settings?.highContrastMode ?? false) ? ($settings?.highContrastMode ?? false)
@ -689,7 +692,7 @@
role="tab" role="tab"
aria-controls="tab-tools" aria-controls="tab-tools"
aria-selected={selectedTab === 'tools'} aria-selected={selectedTab === 'tools'}
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition class={`px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none flex text-left transition
${ ${
selectedTab === 'tools' selectedTab === 'tools'
? ($settings?.highContrastMode ?? false) ? ($settings?.highContrastMode ?? false)
@ -714,7 +717,7 @@
role="tab" role="tab"
aria-controls="tab-personalization" aria-controls="tab-personalization"
aria-selected={selectedTab === 'personalization'} aria-selected={selectedTab === 'personalization'}
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition class={`px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none flex text-left transition
${ ${
selectedTab === 'personalization' selectedTab === 'personalization'
? ($settings?.highContrastMode ?? false) ? ($settings?.highContrastMode ?? false)
@ -738,7 +741,7 @@
role="tab" role="tab"
aria-controls="tab-audio" aria-controls="tab-audio"
aria-selected={selectedTab === 'audio'} aria-selected={selectedTab === 'audio'}
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition class={`px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none flex text-left transition
${ ${
selectedTab === 'audio' selectedTab === 'audio'
? ($settings?.highContrastMode ?? false) ? ($settings?.highContrastMode ?? false)
@ -762,7 +765,7 @@
role="tab" role="tab"
aria-controls="tab-data-controls" aria-controls="tab-data-controls"
aria-selected={selectedTab === 'data_controls'} aria-selected={selectedTab === 'data_controls'}
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition class={`px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none flex text-left transition
${ ${
selectedTab === 'data_controls' selectedTab === 'data_controls'
? ($settings?.highContrastMode ?? false) ? ($settings?.highContrastMode ?? false)
@ -786,7 +789,7 @@
role="tab" role="tab"
aria-controls="tab-account" aria-controls="tab-account"
aria-selected={selectedTab === 'account'} aria-selected={selectedTab === 'account'}
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition class={`px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none flex text-left transition
${ ${
selectedTab === 'account' selectedTab === 'account'
? ($settings?.highContrastMode ?? false) ? ($settings?.highContrastMode ?? false)
@ -810,7 +813,7 @@
role="tab" role="tab"
aria-controls="tab-about" aria-controls="tab-about"
aria-selected={selectedTab === 'about'} aria-selected={selectedTab === 'about'}
class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition class={`px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none flex text-left transition
${ ${
selectedTab === 'about' selectedTab === 'about'
? ($settings?.highContrastMode ?? false) ? ($settings?.highContrastMode ?? false)
@ -839,7 +842,7 @@
{#if $user?.role === 'admin'} {#if $user?.role === 'admin'}
<a <a
href="/admin/settings" href="/admin/settings"
class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none md:mt-auto flex text-left transition {$settings?.highContrastMode class="px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none md:mt-auto flex text-left transition {$settings?.highContrastMode
? 'hover:bg-gray-200 dark:hover:bg-gray-800' ? 'hover:bg-gray-200 dark:hover:bg-gray-800'
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}" : 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
on:click={async (e) => { on:click={async (e) => {
@ -855,7 +858,7 @@
</a> </a>
{/if} {/if}
</div> </div>
<div class="flex-1 md:min-h-[36rem] max-h-[36rem]"> <div class="flex-1 px-3.5 md:pl-0 md:pr-4.5 md:min-h-[36rem] max-h-[36rem]">
{#if selectedTab === 'general'} {#if selectedTab === 'general'}
<General <General
{getModels} {getModels}

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

@ -139,7 +139,7 @@
> >
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
class="w-full group rounded-lg relative flex items-center justify-between hover:bg-gray-100 dark:hover:bg-gray-900 transition {buttonClassName}" class="w-full group rounded-xl relative flex items-center justify-between hover:bg-gray-100 dark:hover:bg-gray-900 transition {buttonClassName}"
> >
<button class="w-full py-1.5 pl-2 flex items-center gap-1.5 text-xs font-medium"> <button class="w-full py-1.5 pl-2 flex items-center gap-1.5 text-xs font-medium">
{#if chevron} {#if chevron}

2
src/lib/components/layout/Sidebar/ChannelItem.svelte
View file

@ -45,7 +45,7 @@
<div <div
bind:this={itemElement} bind:this={itemElement}
class=" w-full {className} rounded-lg flex relative group hover:bg-gray-100 dark:hover:bg-gray-900 {$page class=" w-full {className} rounded-xl flex relative group hover:bg-gray-100 dark:hover:bg-gray-900 {$page
.url.pathname === `/channels/${channel.id}` .url.pathname === `/channels/${channel.id}`
? 'bg-gray-100 dark:bg-gray-900' ? 'bg-gray-100 dark:bg-gray-900'
: ''} px-2.5 py-1" : ''} px-2.5 py-1"

4
src/lib/components/layout/Sidebar/ChatItem.svelte
View file

@ -342,7 +342,7 @@
> >
{#if confirmEdit} {#if confirmEdit}
<div <div
class=" w-full flex justify-between rounded-lg px-[11px] py-[6px] {id === $chatId || class=" w-full flex justify-between rounded-xl px-[11px] py-[6px] {id === $chatId ||
confirmEdit confirmEdit
? 'bg-gray-100 dark:bg-gray-900' ? 'bg-gray-100 dark:bg-gray-900'
: selected : selected
@ -394,7 +394,7 @@
</div> </div>
{:else} {:else}
<a <a
class=" w-full flex justify-between rounded-lg px-[11px] py-[6px] {id === $chatId || class=" w-full flex justify-between rounded-xl px-[11px] py-[6px] {id === $chatId ||
confirmEdit confirmEdit
? 'bg-gray-100 dark:bg-gray-900' ? 'bg-gray-100 dark:bg-gray-900'
: selected : selected

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

@ -433,7 +433,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 hover:bg-gray-100 dark:hover:bg-gray-900 transition {$selectedFolder?.id === class="relative w-full py-1 px-1.5 rounded-xl 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'
: ''}" : ''}"