Emil_Shanaty/open-webui-ai4me
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-04-19 23:15:15 +09:00
parent b7b7b64d31
commit 60f3ba6b59
3 changed files with 483 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/layout/Sidebar.svelte
+176 -58
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import { toast } from 'svelte-sonner';
import { v4 as uuidv4 } from 'uuid';
import Sortable from 'sortablejs';
import { goto } from '$app/navigation';
import {
@@ -41,11 +42,14 @@
toggleChatPinnedStatusById,
getChatById,
updateChatFolderIdById,
importChats
importChats,
deleteAllChats,
getChatListBySearchText
} from '$lib/apis/chats';
import { createNewFolder, getFolders, updateFolderParentIdById } from '$lib/apis/folders';
import { createNewNote, getPinnedNoteList, toggleNotePinnedStatusById } from '$lib/apis/notes';
import { updateUserSettings } from '$lib/apis/users';
import { checkActiveChats } from '$lib/apis/tasks';
import { getPinnedNoteList, toggleNotePinnedStatusById } from '$lib/apis/notes';
import { createNoteHandler } from '$lib/components/notes/utils';
import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
@@ -67,10 +71,12 @@
import Sidebar from '../icons/Sidebar.svelte';
import PinnedModelList from './Sidebar/PinnedModelList.svelte';
import Note from '../icons/Note.svelte';
import Code from '../icons/Code.svelte';
import { slide } from 'svelte/transition';
import HotkeyHint from '../common/HotkeyHint.svelte';
const BREAKPOINT = 768;
const DEFAULT_PINNED_ITEMS = ['notes', 'workspace'];
let scrollTop = 0;
@@ -98,6 +104,55 @@
let newFolderId = null;
$: pinnedItems = $settings?.pinnedMenuItems ?? DEFAULT_PINNED_ITEMS;
const isMenuItemVisible = (id) => {
switch (id) {
case 'notes':
return ($config?.features?.enable_notes ?? false) && ($user?.role === 'admin' || ($user?.permissions?.features?.notes ?? true));
case 'workspace':
return $user?.role === 'admin' || $user?.permissions?.workspace?.models || $user?.permissions?.workspace?.knowledge || $user?.permissions?.workspace?.prompts || $user?.permissions?.workspace?.tools;
case 'automations':
return $config?.features?.enable_automations && ($user?.role === 'admin' || $user?.permissions?.features?.automations);
case 'calendar':
return $config?.features?.enable_calendar && ($user?.role === 'admin' || $user?.permissions?.features?.calendar);
case 'playground':
return $user?.role === 'admin';
default:
return false;
}
};
const getMenuItemMeta = (id) => {
const items = {
notes: { label: 'Notes', href: '/notes', iconType: 'note' },
workspace: { label: 'Workspace', href: '/workspace', iconType: 'workspace' },
automations: { label: 'Automations', href: '/automations', iconType: 'automations' },
calendar: { label: 'Calendar', href: '/calendar', iconType: 'calendar' },
playground: { label: 'Playground', href: '/playground', iconType: 'playground' }
};
return items[id];
};
const initPinnedMenuSortable = () => {
const el = document.getElementById('pinned-menu-items-list');
if (el && !$mobile) {
new Sortable(el, {
animation: 150,
onUpdate: async (event) => {
const itemId = event.item.dataset.id;
const newIndex = event.newIndex;
const current = [...pinnedItems];
const oldIndex = current.indexOf(itemId);
current.splice(oldIndex, 1);
current.splice(newIndex, 0, itemId);
settings.set({ ...$settings, pinnedMenuItems: current });
await updateUserSettings(localStorage.token, { ui: $settings });
}
});
}
};
$: if ($selectedFolder) {
initFolders();
}
@@ -433,7 +488,7 @@
document.documentElement.style.setProperty('--sidebar-width', `${newSidebarWidth}px`);
};
onMount(() => {
onMount(async () => {
try {
const width = Number(localStorage.getItem('sidebarWidth'));
if (!Number.isNaN(width) && width >= MIN_WIDTH && width <= MAX_WIDTH) {
@@ -528,6 +583,9 @@
const socketInstance = $socket;
socketInstance?.on('events', chatActiveEventHandler);
await tick();
initPinnedMenuSortable();
return () => {
unsubscribers.forEach((unsubscriber) => unsubscriber());
@@ -783,7 +841,7 @@
</Tooltip>
</div>
{#if ($config?.features?.enable_notes ?? false) && ($user?.role === 'admin' || ($user?.permissions?.features?.notes ?? true))}
{#if pinnedItems.includes('notes') && ($config?.features?.enable_notes ?? false) && ($user?.role === 'admin' || ($user?.permissions?.features?.notes ?? true))}
<div class="">
<Tooltip content={$i18n.t('Notes')} placement="right">
<a
@@ -807,7 +865,7 @@
</div>
{/if}
{#if $user?.role === 'admin' || $user?.permissions?.workspace?.models || $user?.permissions?.workspace?.knowledge || $user?.permissions?.workspace?.prompts || $user?.permissions?.workspace?.tools}
{#if pinnedItems.includes('workspace') && ($user?.role === 'admin' || $user?.permissions?.workspace?.models || $user?.permissions?.workspace?.knowledge || $user?.permissions?.workspace?.prompts || $user?.permissions?.workspace?.tools)}
<div class="">
<Tooltip content={$i18n.t('Workspace')} placement="right">
<a
@@ -843,6 +901,79 @@
</Tooltip>
</div>
{/if}
{#if pinnedItems.includes('automations') && $config?.features?.enable_automations && ($user?.role === 'admin' || $user?.permissions?.features?.automations)}
<div class="">
<Tooltip content={$i18n.t('Automations')} placement="right">
<a
class=" cursor-pointer flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition group"
href="/automations"
on:click={async (e) => {
e.stopImmediatePropagation();
e.preventDefault();
goto('/automations');
itemClickHandler();
}}
draggable="false"
aria-label={$i18n.t('Automations')}
>
<div class=" self-center flex items-center justify-center size-9">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
</div>
</a>
</Tooltip>
</div>
{/if}
{#if pinnedItems.includes('calendar') && $config?.features?.enable_calendar && ($user?.role === 'admin' || $user?.permissions?.features?.calendar)}
<div class="">
<Tooltip content={$i18n.t('Calendar')} placement="right">
<a
class=" cursor-pointer flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition group"
href="/calendar"
on:click={async (e) => {
e.stopImmediatePropagation();
e.preventDefault();
goto('/calendar');
itemClickHandler();
}}
draggable="false"
aria-label={$i18n.t('Calendar')}
>
<div class=" self-center flex items-center justify-center size-9">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" />
</svg>
</div>
</a>
</Tooltip>
</div>
{/if}
{#if pinnedItems.includes('playground') && $user?.role === 'admin'}
<div class="">
<Tooltip content={$i18n.t('Playground')} placement="right">
<a
class=" cursor-pointer flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition group"
href="/playground"
on:click={async (e) => {
e.stopImmediatePropagation();
e.preventDefault();
goto('/playground');
itemClickHandler();
}}
draggable="false"
aria-label={$i18n.t('Playground')}
>
<div class=" self-center flex items-center justify-center size-9">
<Code className="size-4.5" />
</div>
</a>
</Tooltip>
</div>
{/if}
</div>
</button>
@@ -1017,61 +1148,48 @@
</button>
</div>
{#if ($config?.features?.enable_notes ?? false) && ($user?.role === 'admin' || ($user?.permissions?.features?.notes ?? true))}
<div class="px-[0.4375rem] flex justify-center text-gray-800 dark:text-gray-200">
<a
id="sidebar-notes-button"
class="grow flex items-center space-x-3 rounded-2xl px-2.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition"
href="/notes"
on:click={itemClickHandler}
draggable="false"
aria-label={$i18n.t('Notes')}
>
<div class="self-center">
<Note className="size-4.5" strokeWidth="2" />
</div>
<div id="pinned-menu-items-list">
{#each pinnedItems as itemId (itemId)}
{@const meta = getMenuItemMeta(itemId)}
{#if meta && isMenuItemVisible(itemId)}
<div class="px-[0.4375rem] flex justify-center text-gray-800 dark:text-gray-200" data-id={itemId}>
<a
id="sidebar-{itemId}-button"
class="grow flex items-center space-x-3 rounded-2xl px-2.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition"
href={meta.href}
on:click={itemClickHandler}
draggable="false"
aria-label={$i18n.t(meta.label)}
>
<div class="self-center">
{#if itemId === 'notes'}
<Note className="size-4.5" strokeWidth="2" />
{:else if itemId === 'workspace'}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" />
</svg>
{:else if itemId === 'automations'}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
{:else if itemId === 'calendar'}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" />
</svg>
{:else if itemId === 'playground'}
<Code className="size-4.5" strokeWidth="2" />
{/if}
</div>
<div class="flex self-center translate-y-[0.5px]">
<div class=" self-center text-sm font-primary">{$i18n.t('Notes')}</div>
</div>
</a>
</div>
{/if}
{#if $user?.role === 'admin' || $user?.permissions?.workspace?.models || $user?.permissions?.workspace?.knowledge || $user?.permissions?.workspace?.prompts || $user?.permissions?.workspace?.tools}
<div class="px-[0.4375rem] flex justify-center text-gray-800 dark:text-gray-200">
<a
id="sidebar-workspace-button"
class="grow flex items-center space-x-3 rounded-2xl px-2.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition"
href="/workspace"
on:click={itemClickHandler}
draggable="false"
aria-label={$i18n.t('Workspace')}
>
<div class="self-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="size-4.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z"
/>
</svg>
</div>
<div class="flex self-center translate-y-[0.5px]">
<div class=" self-center text-sm font-primary">{$i18n.t('Workspace')}</div>
</div>
</a>
</div>
{/if}
<div class="flex self-center translate-y-[0.5px]">
<div class=" self-center text-sm font-primary">{$i18n.t(meta.label)}</div>
</div>
</a>
</div>
{/if}
{/each}
</div>
</div>
{#if ($models ?? []).length > 0 && (($settings?.pinnedModels ?? []).length > 0 || $config?.default_pinned_models)}
<Folder
src/lib/components/layout/Sidebar/UserMenu.svelte
+306 -102
View File
@@ -7,7 +7,15 @@
import { getUsage } from '$lib/apis';
import { getSessionUser, userSignOut } from '$lib/apis/auths';
import { showSettings, mobile, showSidebar, showShortcuts, user, config } from '$lib/stores';
import {
showSettings,
mobile,
showSidebar,
showShortcuts,
user,
config,
settings
} from '$lib/stores';
import { WEBUI_API_BASE_URL } from '$lib/constants';
@@ -26,7 +34,10 @@
import UserStatusModal from './UserStatusModal.svelte';
import Emoji from '$lib/components/common/Emoji.svelte';
import XMark from '$lib/components/icons/XMark.svelte';
import { updateUserStatus } from '$lib/apis/users';
import Note from '$lib/components/icons/Note.svelte';
import Pin from '$lib/components/icons/Pin.svelte';
import PinSlash from '$lib/components/icons/PinSlash.svelte';
import { updateUserStatus, updateUserSettings } from '$lib/apis/users';
import { toast } from 'svelte-sonner';
const i18n = getContext('i18n');
@@ -43,9 +54,29 @@
export let showActiveUsers = true;
let showUserStatusModal = false;
let shiftKey = false;
const dispatch = createEventDispatcher();
const DEFAULT_PINNED_ITEMS = ['notes', 'workspace'];
$: pinnedItems = $settings?.pinnedMenuItems ?? DEFAULT_PINNED_ITEMS;
const isPinned = (id: string) => {
return pinnedItems.includes(id);
};
const togglePin = async (id: string) => {
let updated;
if (isPinned(id)) {
updated = pinnedItems.filter((item) => item !== id);
} else {
updated = [...pinnedItems, id];
}
await settings.set({ ...$settings, pinnedMenuItems: updated });
await updateUserSettings(localStorage.token, { ui: $settings });
};
let usage = null;
const getUsageInfo = async () => {
const res = await getUsage(localStorage.token).catch((error) => {
@@ -69,6 +100,15 @@
};
</script>
<svelte:window
on:keydown={(e) => {
if (e.key === 'Shift') shiftKey = true;
}}
on:keyup={(e) => {
if (e.key === 'Shift') shiftKey = false;
}}
/>
<ShortcutsModal bind:show={$showShortcuts} />
<UserStatusModal
bind:show={showUserStatusModal}
@@ -194,119 +234,263 @@
<hr class=" border-gray-50/30 dark:border-gray-800/30 my-1.5 p-0" />
{/if}
<button
class="flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer select-none"
type="button"
on:click={async () => {
show = false;
await showSettings.set(true);
if ($mobile) {
await tick();
showSidebar.set(false);
}
}}
>
<div class=" self-center mr-3">
<Settings className="w-5 h-5" strokeWidth="1.5" />
{#if ($config?.features?.enable_notes ?? false) && ($user?.role === 'admin' || ($user?.permissions?.features?.notes ?? true))}
<div class="flex items-center w-full">
<a
href="/notes"
draggable="false"
class="flex flex-1 rounded-xl py-1.5 px-3 hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer select-none"
on:click={async (e) => {
if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return;
e.preventDefault();
show = false;
goto('/notes');
if ($mobile) {
await tick();
showSidebar.set(false);
}
}}
>
<div class="self-center mr-3">
<Note className="size-5" strokeWidth="1.5" />
</div>
<div class="self-center truncate">{$i18n.t('Notes')}</div>
</a>
{#if shiftKey}
<Tooltip
content={isPinned('notes')
? $i18n.t('Unpin from Sidebar')
: $i18n.t('Pin to Sidebar')}
>
<button
type="button"
class="p-1 mr-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition"
on:click|preventDefault|stopPropagation={() => togglePin('notes')}
>
{#if isPinned('notes')}
<PinSlash className="size-3.5" strokeWidth="1.5" />
{:else}
<Pin className="size-3.5" strokeWidth="1.5" />
{/if}
</button>
</Tooltip>
{/if}
</div>
<div class=" self-center truncate">{$i18n.t('Settings')}</div>
</button>
{/if}
{#if $user?.role === 'admin' || $user?.permissions?.workspace?.models || $user?.permissions?.workspace?.knowledge || $user?.permissions?.workspace?.prompts || $user?.permissions?.workspace?.tools}
<div class="flex items-center w-full">
<a
href="/workspace"
draggable="false"
class="flex flex-1 rounded-xl py-1.5 px-3 hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer select-none"
on:click={async (e) => {
if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return;
e.preventDefault();
show = false;
goto('/workspace');
if ($mobile) {
await tick();
showSidebar.set(false);
}
}}
>
<div class="self-center mr-3">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z"
/>
</svg>
</div>
<div class="self-center truncate">{$i18n.t('Workspace')}</div>
</a>
{#if shiftKey}
<Tooltip
content={isPinned('workspace')
? $i18n.t('Unpin from Sidebar')
: $i18n.t('Pin to Sidebar')}
>
<button
type="button"
class="p-1 mr-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition"
on:click|preventDefault|stopPropagation={() => togglePin('workspace')}
>
{#if isPinned('workspace')}
<PinSlash className="size-3.5" strokeWidth="1.5" />
{:else}
<Pin className="size-3.5" strokeWidth="1.5" />
{/if}
</button>
</Tooltip>
{/if}
</div>
{/if}
{#if $config?.features?.enable_automations && ($user?.role === 'admin' || $user?.permissions?.features?.automations)}
<a
href="/automations"
draggable="false"
class="flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer select-none"
on:click={async (e) => {
if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return;
e.preventDefault();
show = false;
goto('/automations');
if ($mobile) {
await tick();
showSidebar.set(false);
}
}}
>
<div class="self-center mr-3">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5"
<div class="flex items-center w-full">
<a
href="/automations"
draggable="false"
class="flex flex-1 rounded-xl py-1.5 px-3 hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer select-none"
on:click={async (e) => {
if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return;
e.preventDefault();
show = false;
goto('/automations');
if ($mobile) {
await tick();
showSidebar.set(false);
}
}}
>
<div class="self-center mr-3">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
/>
</svg>
</div>
<div class="self-center truncate">{$i18n.t('Automations')}</div>
</a>
{#if shiftKey}
<Tooltip
content={isPinned('automations')
? $i18n.t('Unpin from Sidebar')
: $i18n.t('Pin to Sidebar')}
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
/>
</svg>
</div>
<div class="self-center truncate">{$i18n.t('Automations')}</div>
</a>
<button
type="button"
class="p-1 mr-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition"
on:click|preventDefault|stopPropagation={() => togglePin('automations')}
>
{#if isPinned('automations')}
<PinSlash className="size-3.5" strokeWidth="1.5" />
{:else}
<Pin className="size-3.5" strokeWidth="1.5" />
{/if}
</button>
</Tooltip>
{/if}
</div>
{/if}
{#if $config?.features?.enable_calendar && ($user?.role === 'admin' || $user?.permissions?.features?.calendar)}
<a
href="/calendar"
draggable="false"
class="flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer select-none"
on:click={async (e) => {
if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return;
e.preventDefault();
show = false;
goto('/calendar');
}}
>
<div class="self-center mr-3">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5"
<div class="flex items-center w-full">
<a
href="/calendar"
draggable="false"
class="flex flex-1 rounded-xl py-1.5 px-3 hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer select-none"
on:click={async (e) => {
if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return;
e.preventDefault();
show = false;
goto('/calendar');
}}
>
<div class="self-center mr-3">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
/>
</svg>
</div>
<div class="self-center truncate">{$i18n.t('Calendar')}</div>
</a>
{#if shiftKey}
<Tooltip
content={isPinned('calendar')
? $i18n.t('Unpin from Sidebar')
: $i18n.t('Pin to Sidebar')}
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
/>
</svg>
</div>
<div class="self-center truncate">{$i18n.t('Calendar')}</div>
</a>
<button
type="button"
class="p-1 mr-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition"
on:click|preventDefault|stopPropagation={() => togglePin('calendar')}
>
{#if isPinned('calendar')}
<PinSlash className="size-3.5" strokeWidth="1.5" />
{:else}
<Pin className="size-3.5" strokeWidth="1.5" />
{/if}
</button>
</Tooltip>
{/if}
</div>
{/if}
{#if role === 'admin'}
<a
href="/playground"
draggable="false"
class="flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer select-none"
on:click={async (e) => {
if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) {
return;
}
e.preventDefault();
show = false;
goto('/playground');
if ($mobile) {
await tick();
showSidebar.set(false);
}
}}
>
<div class=" self-center mr-3">
<Code className="size-5" strokeWidth="1.5" />
</div>
<div class=" self-center truncate">{$i18n.t('Playground')}</div>
</a>
<div class="flex items-center w-full">
<a
href="/playground"
draggable="false"
class="flex flex-1 rounded-xl py-1.5 px-3 hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer select-none"
on:click={async (e) => {
if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return;
e.preventDefault();
show = false;
goto('/playground');
if ($mobile) {
await tick();
showSidebar.set(false);
}
}}
>
<div class="self-center mr-3">
<Code className="size-5" strokeWidth="1.5" />
</div>
<div class="self-center truncate">{$i18n.t('Playground')}</div>
</a>
{#if shiftKey}
<Tooltip
content={isPinned('playground')
? $i18n.t('Unpin from Sidebar')
: $i18n.t('Pin to Sidebar')}
>
<button
type="button"
class="p-1 mr-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition"
on:click|preventDefault|stopPropagation={() => togglePin('playground')}
>
{#if isPinned('playground')}
<PinSlash className="size-3.5" strokeWidth="1.5" />
{:else}
<Pin className="size-3.5" strokeWidth="1.5" />
{/if}
</button>
</Tooltip>
{/if}
</div>
{/if}
<hr class=" border-gray-50/30 dark:border-gray-800/30 my-1 p-0" />
<button
class="flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer select-none"
type="button"
@@ -328,6 +512,26 @@
<div class=" self-center truncate">{$i18n.t('Archived Chats')}</div>
</button>
<button
class="flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer select-none"
type="button"
on:click={async () => {
show = false;
await showSettings.set(true);
if ($mobile) {
await tick();
showSidebar.set(false);
}
}}
>
<div class=" self-center mr-3">
<Settings className="w-5 h-5" strokeWidth="1.5" />
</div>
<div class=" self-center truncate">{$i18n.t('Settings')}</div>
</button>
{#if role === 'admin'}
<a
href="/admin"
src/lib/stores/index.ts
+1
View File
@@ -230,6 +230,7 @@ type Settings = {
ctrlEnterToSend?: boolean;
renderMarkdownInPreviews?: boolean;
recentEmojis?: string[];
pinnedMenuItems?: string[];
system?: string;
seed?: number;