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-03-15 20:41:32 -05:00
parent bef5ec2cea
commit 3dea69f658
7 changed files with 248 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/workspace/common/TagSelector.svelte
+20 -37
View File
@@ -1,10 +1,10 @@
<script lang="ts">
import { Select } from 'bits-ui';
import { getContext } from 'svelte';
import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
import Check from '$lib/components/icons/Check.svelte';
import XMark from '$lib/components/icons/XMark.svelte';
import Select from '$lib/components/common/Select.svelte';
const i18n = getContext('i18n');
@@ -15,18 +15,15 @@
export let items = [];
</script>
<Select.Root
selected={value ? items.find((item) => item.value === value) : null}
<Select
bind:value
{items}
onSelectedChange={(selectedItem) => {
value = selectedItem.value;
onChange(value);
}}
{placeholder}
triggerClass="relative w-full flex items-center gap-0.5 px-2.5 py-1.5 rounded-xl "
itemClass="flex w-full gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl capitalize"
onChange={() => onChange(value)}
>
<Select.Trigger
class="relative w-full flex items-center gap-0.5 px-2.5 py-1.5 rounded-xl "
aria-label={placeholder}
>
<svelte:fragment slot="trigger" let:selectedLabel>
<div
class="inline-flex h-input px-0.5 w-full outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden capitalize"
>
@@ -40,7 +37,8 @@
{#if value}
<button
class="outline-none"
on:click={() => {
type="button"
on:click|stopPropagation={() => {
value = '';
onChange(value);
}}
@@ -50,32 +48,17 @@
{:else}
<ChevronDown className=" size-3.5" strokeWidth="2.5" />
{/if}
</Select.Trigger>
</svelte:fragment>
<Select.Content
class="rounded-2xl min-w-[170px] p-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
sameWidth={false}
align="start"
>
<slot>
{#each items as item}
<Select.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-xl capitalize"
value={item.value}
label={item.label}
>
{item.label.length > 32 ? `${item.label.slice(0, 32)}...` : item.label}
{#if value === item.value}
<div class="ml-auto">
<Check />
</div>
{/if}
</Select.Item>
{/each}
</slot>
</Select.Content>
</Select.Root>
<svelte:fragment slot="item" let:item let:selected>
{item.label.length > 32 ? `${item.label.slice(0, 32)}...` : item.label}
{#if selected}
<div class="ml-auto">
<Check />
</div>
{/if}
</svelte:fragment>
</Select>
<!-- <button
class="min-w-fit outline-none p-1.5 {selectedTag === ''
src/lib/components/workspace/common/ViewSelector.svelte
+21 -40
View File
@@ -1,9 +1,9 @@
<script lang="ts">
import { Select } from 'bits-ui';
import { getContext } from 'svelte';
import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
import Check from '$lib/components/icons/Check.svelte';
import Select from '$lib/components/common/Select.svelte';
const i18n = getContext('i18n');
@@ -18,49 +18,30 @@
];
</script>
<Select.Root
selected={items.find((item) => item.value === value)}
<Select
bind:value
{items}
onSelectedChange={(selectedItem) => {
value = selectedItem.value;
onChange(value);
}}
{placeholder}
triggerClass="relative w-full flex items-center gap-0.5 px-2.5 py-1.5 bg-gray-50 dark:bg-gray-850 rounded-xl "
labelClass="inline-flex h-input px-0.5 w-full outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden"
onChange={() => onChange(value)}
>
<Select.Trigger
class="relative w-full flex items-center gap-0.5 px-2.5 py-1.5 bg-gray-50 dark:bg-gray-850 rounded-xl "
aria-label={placeholder}
>
<Select.Value
class="inline-flex h-input px-0.5 w-full outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden"
{placeholder}
/>
<svelte:fragment slot="trigger" let:selectedLabel>
<span class="inline-flex h-input px-0.5 w-full outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden">
{selectedLabel}
</span>
<ChevronDown className=" size-3.5" strokeWidth="2.5" />
</Select.Trigger>
</svelte:fragment>
<Select.Content
class="rounded-2xl min-w-[170px] p-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
sameWidth={false}
align="start"
>
<slot>
{#each items as item}
<Select.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-xl"
value={item.value}
label={item.label}
>
{item.label}
{#if value === item.value}
<div class="ml-auto">
<Check />
</div>
{/if}
</Select.Item>
{/each}
</slot>
</Select.Content>
</Select.Root>
<svelte:fragment slot="item" let:item let:selected>
{item.label}
{#if selected}
<div class="ml-auto">
<Check />
</div>
{/if}
</svelte:fragment>
</Select>
<!-- <button
class="min-w-fit outline-none p-1.5 {selectedTag === ''