UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-03-24 14:40:51 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refac: pinned collapsible styling

Browse Source
This commit is contained in:
Timothy J. Baek 2024-10-14 21:15:36 -07:00
parent 2afc5f3339
commit 4c7651c113
2 changed files with 55 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/lib/components/common/Collapsible.svelte
View File

@ -7,12 +7,13 @@
export let open = false;
export let className = '';
export let buttonClassName = 'w-fit';
export let title = null;
</script>
<div class={className}>
{#if title !== null}
<button class="w-fit" on:click={() => (open = !open)}>
<button class={buttonClassName} on:click={() => (open = !open)}>
<div class=" w-fit font-medium transition flex items-center justify-between gap-2">
<div>
{title}
@ -28,7 +29,7 @@
</div>
</button>
{:else}
<button on:click={() => (open = !open)}>
<button class={buttonClassName} on:click={() => (open = !open)}>
<div
class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
>

101
src/lib/components/layout/Sidebar.svelte
View File

@ -52,6 +52,7 @@
import ChevronDown from '../icons/ChevronDown.svelte';
import ChevronUp from '../icons/ChevronUp.svelte';
import ChevronRight from '../icons/ChevronRight.svelte';
import Collapsible from '../common/Collapsible.svelte';
const BREAKPOINT = 768;
@ -507,57 +508,59 @@
{#if !search && $pinnedChats.length > 0}
<div class=" pb-2 flex flex-col space-y-1">
<div class="">
<div class="px-2">
<button
class="w-full py-1 px-1.5 rounded-md flex items-center gap-1 text-xs text-gray-500 dark:text-gray-500 font-medium hover:bg-gray-100 dark:hover:bg-gray-900 transition"
on:click={() => {
showPinnedChat = !showPinnedChat;
localStorage.setItem('showPinnedChat', showPinnedChat);
}}
>
<div class="text-gray-300">
{#if showPinnedChat}
<ChevronDown className=" size-3" strokeWidth="2.5" />
{:else}
<ChevronRight className=" text-gra size-3" strokeWidth="2.5" />
{/if}
</div>
<Collapsible className="w-full" buttonClassName="w-full">
<div class="px-2 w-full">
<button
class="w-full py-1 px-1.5 rounded-md flex items-center gap-1 text-xs text-gray-500 dark:text-gray-500 font-medium hover:bg-gray-100 dark:hover:bg-gray-900 transition"
on:click={() => {
showPinnedChat = !showPinnedChat;
localStorage.setItem('showPinnedChat', showPinnedChat);
}}
>
<div class="text-gray-300">
{#if showPinnedChat}
<ChevronDown className=" size-3" strokeWidth="2.5" />
{:else}
<ChevronRight className=" text-gra size-3" strokeWidth="2.5" />
{/if}
</div>
<div class=" translate-y-[0.5px]">
{$i18n.t('Pinned')}
</div>
</button>
</div>
{#if showPinnedChat}
<div class="pl-2 mt-1 flex flex-col overflow-y-auto scrollbar-hidden">
{#each $pinnedChats as chat, idx}
<ChatItem
{chat}
{shiftKey}
selected={selectedChatId === chat.id}
on:select={() => {
selectedChatId = chat.id;
}}
on:unselect={() => {
selectedChatId = null;
}}
on:delete={(e) => {
if ((e?.detail ?? '') === 'shift') {
deleteChatHandler(chat.id);
} else {
deleteChat = chat;
showDeleteConfirm = true;
}
}}
on:tag={(e) => {
const { type, name } = e.detail;
tagEventHandler(type, name, chat.id);
}}
/>
{/each}
<div class=" translate-y-[0.5px]">
{$i18n.t('Pinned')}
</div>
</button>
</div>
{/if}
<div slot="content">
<div class="pl-2 mt-1 flex flex-col overflow-y-auto scrollbar-hidden">
{#each $pinnedChats as chat, idx}
<ChatItem
{chat}
{shiftKey}
selected={selectedChatId === chat.id}
on:select={() => {
selectedChatId = chat.id;
}}
on:unselect={() => {
selectedChatId = null;
}}
on:delete={(e) => {
if ((e?.detail ?? '') === 'shift') {
deleteChatHandler(chat.id);
} else {
deleteChat = chat;
showDeleteConfirm = true;
}
}}
on:tag={(e) => {
const { type, name } = e.detail;
tagEventHandler(type, name, chat.id);
}}
/>
{/each}
</div>
</div>
</Collapsible>
</div>
</div>
{/if}