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-03-15 21:29:56 -05:00
parent 753589e51c
commit 07e650c787
5 changed files with 349 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/common/Dropdown.svelte
+126 -39
View File
@@ -1,51 +1,138 @@
<script lang="ts"> <script lang="ts">
import { DropdownMenu } from 'bits-ui';
import { createEventDispatcher, getContext } from 'svelte';
const i18n = getContext('i18n');
import { flyAndScale } from '$lib/utils/transitions'; import { flyAndScale } from '$lib/utils/transitions';
import { tick } from 'svelte';
/** Whether the dropdown is open */
export let show = false; export let show = false;
/** Side to open on: 'bottom' | 'top' */
export let side = 'bottom'; export let side = 'bottom';
/** Alignment: 'start' | 'end' */
export let align = 'start'; export let align = 'start';
/** Close when clicking outside */
export let closeOnOutsideClick = true; export let closeOnOutsideClick = true;
const dispatch = createEventDispatcher(); /** Called when open/close state changes */
export let onOpenChange: (state: boolean) => void = () => {};
/** CSS classes for the dropdown content container */
export let contentClass = '';
/** Side offset in px */
export let sideOffset = 4;
let triggerEl;
let contentEl;
/** Svelte action: moves the node to document.body */
function portal(node) {
document.body.appendChild(node);
return {
destroy() {
if (node.parentNode) {
node.parentNode.removeChild(node);
}
}
};
}
/** Svelte action: captures the first child element as the trigger reference */
function trigger(node) {
triggerEl = node.firstElementChild || node;
node.addEventListener('click', toggleOpen);
return {
destroy() {
node.removeEventListener('click', toggleOpen);
}
};
}
function positionContent() {
if (!triggerEl || !contentEl) return;
const rect = triggerEl.getBoundingClientRect();
contentEl.style.position = 'fixed';
contentEl.style.zIndex = '9999';
const contentHeight = contentEl.offsetHeight || 0;
const spaceBelow = window.innerHeight - rect.bottom - sideOffset;
const spaceAbove = rect.top - sideOffset;
// Auto-flip: prefer the requested side, but flip if not enough space
let openAbove = side === 'top';
if (side === 'bottom' && spaceBelow < contentHeight && spaceAbove > spaceBelow) {
openAbove = true;
} else if (side === 'top' && spaceAbove < contentHeight && spaceBelow > spaceAbove) {
openAbove = false;
}
if (openAbove) {
contentEl.style.bottom = `${window.innerHeight - rect.top + sideOffset}px`;
contentEl.style.top = 'auto';
} else {
contentEl.style.top = `${rect.bottom + sideOffset}px`;
contentEl.style.bottom = 'auto';
}
if (align === 'end') {
contentEl.style.right = `${window.innerWidth - rect.right}px`;
contentEl.style.left = 'auto';
} else {
contentEl.style.left = `${rect.left}px`;
contentEl.style.right = 'auto';
}
}
async function toggleOpen() {
show = !show;
onOpenChange(show);
if (show) {
await tick();
positionContent();
// Re-check after transition renders real dimensions
setTimeout(positionContent, 50);
}
}
function handleWindowClick(event) {
if (!show || !closeOnOutsideClick) return;
if (triggerEl?.contains(event.target)) return;
if (contentEl?.contains(event.target)) return;
show = false;
onOpenChange(false);
}
function handleKeydown(event) {
if (event.key === 'Escape' && show) {
show = false;
onOpenChange(false);
}
}
/** Close the dropdown programmatically */
export function close() {
show = false;
onOpenChange(false);
}
</script> </script>
<DropdownMenu.Root <svelte:window on:click={handleWindowClick} on:keydown={handleKeydown} on:scroll|capture={positionContent} on:resize={positionContent} />
bind:open={show}
closeFocus={false}
{closeOnOutsideClick}
onOpenChange={(state) => {
dispatch('change', state);
}}
typeahead={false}
>
<DropdownMenu.Trigger>
<slot />
</DropdownMenu.Trigger>
<slot name="content"> <!-- svelte-ignore a11y-click-events-have-key-events -->
<DropdownMenu.Content <!-- svelte-ignore a11y-no-static-element-interactions -->
class="w-full max-w-[130px] rounded-lg p-1 border border-gray-900 z-50 bg-gray-850 text-white" <span use:trigger style="display: contents;">
sideOffset={8} <slot />
{side} </span>
{align}
transition={flyAndScale}
>
<DropdownMenu.Item class="select-none flex items-center px-3 py-2 text-sm font-medium">
<div class="flex items-center">{$i18n.t('Profile')}</div>
</DropdownMenu.Item>
<DropdownMenu.Item class="select-none flex items-center px-3 py-2 text-sm font-medium"> {#if show}
<div class="flex items-center">{$i18n.t('Profile')}</div> <div
</DropdownMenu.Item> use:portal
bind:this={contentEl}
<DropdownMenu.Item class="select-none flex items-center px-3 py-2 text-sm font-medium"> class={contentClass}
<div class="flex items-center">{$i18n.t('Profile')}</div> transition:flyAndScale
</DropdownMenu.Item> >
</DropdownMenu.Content> <slot name="content" />
</slot> </div>
</DropdownMenu.Root> {/if}
src/lib/components/common/DropdownSub.svelte
+113
View File
@@ -0,0 +1,113 @@
<script lang="ts">
import { flyAndScale } from '$lib/utils/transitions';
import { tick } from 'svelte';
/** CSS classes for the sub-content container */
export let contentClass = 'select-none rounded-2xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-100 dark:border-gray-800';
/** Max width in px, enforced at the component level */
export let maxWidth = 200;
/** Side offset from the trigger in px */
export let sideOffset = 8;
let open = false;
let triggerEl;
let contentEl;
function positionContent() {
if (!triggerEl || !contentEl) return;
const rect = triggerEl.getBoundingClientRect();
contentEl.style.position = 'fixed';
contentEl.style.zIndex = '99999';
// Position to the right of the trigger
const rightSpace = window.innerWidth - rect.right;
const contentWidth = contentEl.offsetWidth || 200;
if (rightSpace >= contentWidth + sideOffset) {
// Open to the right
contentEl.style.left = `${rect.right + sideOffset}px`;
contentEl.style.right = 'auto';
} else {
// Open to the left
contentEl.style.right = `${window.innerWidth - rect.left + sideOffset}px`;
contentEl.style.left = 'auto';
}
// Vertical positioning with robust bounds clamping (shift method)
const contentHeight = contentEl.offsetHeight || 0;
let top = rect.top;
// If it overflows the bottom edge
if (top + contentHeight + 16 > window.innerHeight) {
top = window.innerHeight - contentHeight - 16;
}
// If shifting it up causes it to overflow the top edge, cap it at 16px
if (top < 16) {
top = 16;
}
contentEl.style.top = `${top}px`;
}
async function handleMouseEnter() {
open = true;
await tick();
positionContent();
// Re-position after transition starts rendering real dimensions
setTimeout(positionContent, 50);
}
function handleMouseLeave(event) {
// Don't close if moving to the sub-content
if (contentEl?.contains(event.relatedTarget)) return;
if (triggerEl?.contains(event.relatedTarget)) return;
open = false;
}
function handleContentMouseLeave(event) {
if (triggerEl?.contains(event.relatedTarget)) return;
if (contentEl?.contains(event.relatedTarget)) return;
open = false;
}
function portal(node) {
document.body.appendChild(node);
return {
destroy() {
if (node.parentNode) {
node.parentNode.removeChild(node);
}
}
};
}
</script>
<svelte:window on:scroll|capture={positionContent} on:resize={positionContent} />
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
bind:this={triggerEl}
class="w-full"
on:mouseenter={handleMouseEnter}
on:mouseleave={handleMouseLeave}
>
<slot name="trigger" />
</div>
{#if open}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
use:portal
bind:this={contentEl}
class={contentClass}
style="max-width: {maxWidth}px;"
transition:flyAndScale
on:mouseleave={handleContentMouseLeave}
>
<slot />
</div>
{/if}
src/lib/components/layout/Sidebar/ChatItem.svelte
+1 -4
View File
@@ -553,12 +553,9 @@
onClose={() => { onClose={() => {
dispatch('unselect'); dispatch('unselect');
}} }}
on:change={async () => { onPinChange={async () => {
dispatch('change'); dispatch('change');
}} }}
on:tag={(e) => {
dispatch('tag', e.detail);
}}
> >
<button <button
aria-label="Chat Menu" aria-label="Chat Menu"
src/lib/components/layout/Sidebar/ChatMenu.svelte
+84 -99
View File
@@ -1,14 +1,11 @@
<script lang="ts"> <script lang="ts">
import { DropdownMenu } from 'bits-ui'; import { getContext, tick } from 'svelte';
import { flyAndScale } from '$lib/utils/transitions';
import { getContext, createEventDispatcher, tick } from 'svelte';
import fileSaver from 'file-saver'; import fileSaver from 'file-saver';
const { saveAs } = fileSaver; const { saveAs } = fileSaver;
const dispatch = createEventDispatcher();
import Dropdown from '$lib/components/common/Dropdown.svelte'; import Dropdown from '$lib/components/common/Dropdown.svelte';
import DropdownSub from '$lib/components/common/DropdownSub.svelte';
import GarbageBin from '$lib/components/icons/GarbageBin.svelte'; import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
import Pencil from '$lib/components/icons/Pencil.svelte'; import Pencil from '$lib/components/icons/Pencil.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte'; import Tooltip from '$lib/components/common/Tooltip.svelte';
@@ -49,9 +46,11 @@
let chat = null; let chat = null;
let showFullMessages = false; let showFullMessages = false;
export let onPinChange: () => void = () => {};
const pinHandler = async () => { const pinHandler = async () => {
await toggleChatPinnedStatusById(localStorage.token, chatId); await toggleChatPinnedStatusById(localStorage.token, chatId);
dispatch('change'); onPinChange();
}; };
const checkPinned = async () => { const checkPinned = async () => {
@@ -282,8 +281,8 @@
<Dropdown <Dropdown
bind:show bind:show
on:change={(e) => { onOpenChange={(state) => {
if (e.detail === false) { if (state === false) {
onClose(); onClose();
} }
}} }}
@@ -293,90 +292,81 @@
</Tooltip> </Tooltip>
<div slot="content"> <div slot="content">
<DropdownMenu.Content <div
class="select-none w-full max-w-[200px] rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg transition" class="select-none min-w-[200px] rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
sideOffset={-2}
side="bottom"
align="start"
transition={flyAndScale}
> >
{#if $user?.role === 'admin' || ($user.permissions?.chat?.share ?? true)} {#if $user?.role === 'admin' || ($user.permissions?.chat?.share ?? true)}
<DropdownMenu.Item <button
draggable="false" draggable="false"
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" 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 w-full"
on:click={() => { on:click={() => {
shareHandler(); shareHandler();
}} }}
> >
<Share strokeWidth="1.5" /> <Share strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Share')}</div> <div class="flex items-center">{$i18n.t('Share')}</div>
</DropdownMenu.Item> </button>
{/if} {/if}
<DropdownMenu.Sub> <DropdownSub contentClass="select-none rounded-2xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-100 dark:border-gray-800">
<DropdownMenu.SubTrigger <button
slot="trigger"
draggable="false" draggable="false"
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" 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 w-full"
> >
<Download strokeWidth="1.5" /> <Download strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Download')}</div> <div class="flex items-center">{$i18n.t('Download')}</div>
</DropdownMenu.SubTrigger> </button>
<DropdownMenu.SubContent
class="select-none w-full rounded-2xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-100 dark:border-gray-800" {#if $user?.role === 'admin' || ($user.permissions?.chat?.export ?? true)}
transition={flyAndScale} <button
sideOffset={8} draggable="false"
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 w-full"
on:click={() => {
downloadJSONExport();
}}
>
<div class="flex items-center line-clamp-1">{$i18n.t('Export chat (.json)')}</div>
</button>
{/if}
<button
draggable="false"
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 w-full"
on:click={() => {
downloadTxt();
}}
> >
{#if $user?.role === 'admin' || ($user.permissions?.chat?.export ?? true)} <div class="flex items-center line-clamp-1">{$i18n.t('Plain text (.txt)')}</div>
<DropdownMenu.Item </button>
draggable="false"
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"
on:click={() => {
downloadJSONExport();
}}
>
<div class="flex items-center line-clamp-1">{$i18n.t('Export chat (.json)')}</div>
</DropdownMenu.Item>
{/if}
<DropdownMenu.Item <button
draggable="false" draggable="false"
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" 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 select-none w-full"
on:click={() => { on:click={() => {
downloadTxt(); downloadPdf();
}} }}
> >
<div class="flex items-center line-clamp-1">{$i18n.t('Plain text (.txt)')}</div> <div class="flex items-center line-clamp-1">{$i18n.t('PDF document (.pdf)')}</div>
</DropdownMenu.Item> </button>
</DropdownSub>
<DropdownMenu.Item <button
draggable="false"
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 select-none w-full"
on:click={() => {
downloadPdf();
}}
>
<div class="flex items-center line-clamp-1">{$i18n.t('PDF document (.pdf)')}</div>
</DropdownMenu.Item>
</DropdownMenu.SubContent>
</DropdownMenu.Sub>
<DropdownMenu.Item
draggable="false" draggable="false"
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" 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 w-full"
on:click={() => { on:click={() => {
renameHandler(); renameHandler();
}} }}
> >
<Pencil strokeWidth="1.5" /> <Pencil strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Rename')}</div> <div class="flex items-center">{$i18n.t('Rename')}</div>
</DropdownMenu.Item> </button>
<hr class="border-gray-50/30 dark:border-gray-800/30 my-1" /> <hr class="border-gray-50/30 dark:border-gray-800/30 my-1" />
<DropdownMenu.Item <button
draggable="false" draggable="false"
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" 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 w-full"
on:click={() => { on:click={() => {
pinHandler(); pinHandler();
}} }}
@@ -388,74 +378,69 @@
<Bookmark strokeWidth="1.5" /> <Bookmark strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Pin')}</div> <div class="flex items-center">{$i18n.t('Pin')}</div>
{/if} {/if}
</DropdownMenu.Item> </button>
<DropdownMenu.Item <button
draggable="false" draggable="false"
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" 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 w-full"
on:click={() => { on:click={() => {
cloneChatHandler(); cloneChatHandler();
}} }}
> >
<DocumentDuplicate strokeWidth="1.5" /> <DocumentDuplicate strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Clone')}</div> <div class="flex items-center">{$i18n.t('Clone')}</div>
</DropdownMenu.Item> </button>
{#if chatId && $folders.length > 0} {#if chatId && $folders.length > 0}
<DropdownMenu.Sub> <DropdownSub contentClass="select-none rounded-2xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white border border-gray-100 dark:border-gray-800 shadow-lg max-h-52 overflow-y-auto scrollbar-hidden">
<DropdownMenu.SubTrigger <button
slot="trigger"
draggable="false" draggable="false"
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 select-none w-full" 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 select-none w-full"
> >
<Folder /> <Folder />
<div class="flex items-center">{$i18n.t('Move')}</div> <div class="flex items-center">{$i18n.t('Move')}</div>
</DropdownMenu.SubTrigger> </button>
<DropdownMenu.SubContent
class="select-none w-full max-w-[200px] rounded-2xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white border border-gray-100 dark:border-gray-800 shadow-lg max-h-52 overflow-y-auto scrollbar-hidden"
transition={flyAndScale}
sideOffset={8}
>
{#each $folders.sort((a, b) => b.updated_at - a.updated_at) as folder}
<DropdownMenu.Item
draggable="false"
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 overflow-hidden"
on:click={() => {
moveChatHandler(chatId, folder.id);
}}
>
<div class="shrink-0">
<Folder />
</div>
<div class="truncate">{folder?.name ?? 'Folder'}</div> {#each $folders.sort((a, b) => b.updated_at - a.updated_at) as folder}
</DropdownMenu.Item> <button
{/each} draggable="false"
</DropdownMenu.SubContent> 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 overflow-hidden w-full"
</DropdownMenu.Sub> on:click={() => {
moveChatHandler(chatId, folder.id);
}}
>
<div class="shrink-0">
<Folder />
</div>
<div class="truncate">{folder?.name ?? 'Folder'}</div>
</button>
{/each}
</DropdownSub>
{/if} {/if}
<DropdownMenu.Item <button
draggable="false" draggable="false"
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" 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 w-full"
on:click={() => { on:click={() => {
archiveChatHandler(); archiveChatHandler();
}} }}
> >
<ArchiveBox strokeWidth="1.5" /> <ArchiveBox strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Archive')}</div> <div class="flex items-center">{$i18n.t('Archive')}</div>
</DropdownMenu.Item> </button>
<DropdownMenu.Item <button
draggable="false" draggable="false"
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" 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 w-full"
on:click={() => { on:click={() => {
deleteHandler(); deleteHandler();
}} }}
> >
<GarbageBin strokeWidth="1.5" /> <GarbageBin strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Delete')}</div> <div class="flex items-center">{$i18n.t('Delete')}</div>
</DropdownMenu.Item> </button>
</DropdownMenu.Content> </div>
</div> </div>
</Dropdown> </Dropdown>
src/lib/components/workspace/Tools/ToolMenu.svelte
+25 -28
View File
@@ -1,15 +1,11 @@
<script lang="ts"> <script lang="ts">
import { DropdownMenu } from 'bits-ui';
import { flyAndScale } from '$lib/utils/transitions';
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import Dropdown from '$lib/components/common/Dropdown.svelte'; import Dropdown from '$lib/components/common/Dropdown.svelte';
import GarbageBin from '$lib/components/icons/GarbageBin.svelte'; import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
import Pencil from '$lib/components/icons/Pencil.svelte'; import Pencil from '$lib/components/icons/Pencil.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte'; import Tooltip from '$lib/components/common/Tooltip.svelte';
import Tags from '$lib/components/chat/Tags.svelte';
import Share from '$lib/components/icons/Share.svelte'; import Share from '$lib/components/icons/Share.svelte';
import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte'; import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
import Download from '$lib/components/icons/Download.svelte'; import Download from '$lib/components/icons/Download.svelte';
import { config, user } from '$lib/stores'; import { config, user } from '$lib/stores';
@@ -28,8 +24,8 @@
<Dropdown <Dropdown
bind:show bind:show
on:change={(e) => { onOpenChange={(state) => {
if (e.detail === false) { if (state === false) {
onClose(); onClose();
} }
}} }}
@@ -39,15 +35,12 @@
</Tooltip> </Tooltip>
<div slot="content"> <div slot="content">
<DropdownMenu.Content <div
class="w-full max-w-[170px] rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg" class="min-w-[170px] rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
sideOffset={-2}
side="bottom"
align="start"
transition={flyAndScale}
> >
<DropdownMenu.Item <button
class="select-none 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" class="select-none 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 w-full"
draggable="false"
on:click={() => { on:click={() => {
editHandler(); editHandler();
}} }}
@@ -68,22 +61,24 @@
</svg> </svg>
<div class="flex items-center">{$i18n.t('Edit')}</div> <div class="flex items-center">{$i18n.t('Edit')}</div>
</DropdownMenu.Item> </button>
{#if $config.features.enable_community_sharing} {#if $config.features.enable_community_sharing}
<DropdownMenu.Item <button
class="select-none 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" class="select-none 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 w-full"
draggable="false"
on:click={() => { on:click={() => {
shareHandler(); shareHandler();
}} }}
> >
<Share /> <Share />
<div class="flex items-center">{$i18n.t('Share')}</div> <div class="flex items-center">{$i18n.t('Share')}</div>
</DropdownMenu.Item> </button>
{/if} {/if}
<DropdownMenu.Item <button
class="select-none 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" class="select-none 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 w-full"
draggable="false"
on:click={() => { on:click={() => {
cloneHandler(); cloneHandler();
}} }}
@@ -91,11 +86,12 @@
<DocumentDuplicate /> <DocumentDuplicate />
<div class="flex items-center">{$i18n.t('Clone')}</div> <div class="flex items-center">{$i18n.t('Clone')}</div>
</DropdownMenu.Item> </button>
{#if $user?.role === 'admin' || $user?.permissions?.workspace?.tools_export} {#if $user?.role === 'admin' || $user?.permissions?.workspace?.tools_export}
<DropdownMenu.Item <button
class="select-none 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" class="select-none 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 w-full"
draggable="false"
on:click={() => { on:click={() => {
exportHandler(); exportHandler();
}} }}
@@ -103,20 +99,21 @@
<Download /> <Download />
<div class="flex items-center">{$i18n.t('Export')}</div> <div class="flex items-center">{$i18n.t('Export')}</div>
</DropdownMenu.Item> </button>
{/if} {/if}
<hr class="border-gray-50 dark:border-gray-850/30 my-1" /> <hr class="border-gray-50 dark:border-gray-850/30 my-1" />
<DropdownMenu.Item <button
class="select-none 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" class="select-none 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 w-full"
draggable="false"
on:click={() => { on:click={() => {
deleteHandler(); deleteHandler();
}} }}
> >
<GarbageBin /> <GarbageBin />
<div class="flex items-center">{$i18n.t('Delete')}</div> <div class="flex items-center">{$i18n.t('Delete')}</div>
</DropdownMenu.Item> </button>
</DropdownMenu.Content> </div>
</div> </div>
</Dropdown> </Dropdown>