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

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2026-07-14 00:48:40 -04:00
parent 84e4d6ef82
commit f1584b5a37
46 changed files with 335 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/common/DropdownMenu.svelte
+11
View File
@@ -0,0 +1,11 @@
<script lang="ts">
export let className = '';
export let style = '';
</script>
<div
class={`rounded-xl! p-0.5! border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg ${className} [&>button]:flex [&>button]:w-full [&>button]:h-[1.6875rem] [&>button]:items-center [&>button]:gap-2 [&>button]:rounded-xl! [&>button]:px-2! [&>button]:text-[13px] [&>button:hover]:bg-gray-50/60 dark:[&>button:hover]:bg-gray-800/60 [&>a]:flex [&>a]:w-full [&>a]:h-[1.6875rem] [&>a]:items-center [&>a]:gap-2 [&>a]:rounded-xl! [&>a]:px-2! [&>a]:text-[13px] [&>a:hover]:bg-gray-50/60 dark:[&>a:hover]:bg-gray-800/60 [&>button_svg]:size-3.5 [&>a_svg]:size-3.5 [&>hr]:my-0.5 [&>hr]:mx-1`}
{style}
>
<slot />
</div>
src/lib/components/common/DropdownSub.svelte
+5 -2
View File
@@ -1,5 +1,6 @@
<script lang="ts">
import { flyAndScale } from '$lib/utils/transitions';
import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
import { tick } from 'svelte';
/** CSS classes for the sub-content container */
@@ -120,8 +121,10 @@
<!-- Outer wrapper: positioned flush with trigger, invisible padding bridges the gap -->
<div use:portal bind:this={contentEl} on:mouseleave={handleContentMouseLeave}>
<!-- Inner content: visual styles and transition -->
<div class={contentClass} style="max-width: {maxWidth}px;" transition:flyAndScale>
<slot />
<div transition:flyAndScale>
<DropdownMenu className={contentClass} style="max-width: {maxWidth}px;">
<slot />
</DropdownMenu>
</div>
</div>
{/if}
src/lib/components/common/EmojiPicker.svelte
+5 -5
View File
@@ -165,19 +165,19 @@
<div slot="content">
<div
class="max-w-full w-80 border border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-850 rounded-3xl z-9999 shadow-lg dark:text-white"
class="max-w-full w-80 border border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-850 rounded-xl z-9999 shadow-lg dark:text-white"
>
<div class="mb-1 px-4 pt-2.5 pb-2">
<div class="mb-0.5 px-3 pt-2 pb-1.5">
<input
type="text"
class="w-full text-sm bg-transparent outline-hidden"
class="w-full text-[13px] bg-transparent outline-hidden"
placeholder={$i18n.t('Search all emojis')}
bind:value={search}
/>
</div>
<!-- Virtualized Emoji List -->
<div class="w-full flex justify-start h-96 overflow-y-auto px-3 pb-3 text-sm">
<div class="w-full flex justify-start h-96 overflow-y-auto px-2.5 pb-2.5 text-[13px]">
{#if emojiRows.length === 0}
<div class="text-center text-xs text-gray-500 dark:text-gray-400">
{$i18n.t('No results')}
@@ -200,7 +200,7 @@
placement="top"
>
<button
class="p-1.5 rounded-lg cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 transition {selected ===
class="p-1 rounded-lg cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 transition {selected ===
emojiItem.shortCodes[0]
? 'bg-gray-200 dark:bg-gray-700'
: ''}"