refac
This commit is contained in:
Timothy Jaeryang Baek
@@ -1,8 +1,12 @@
|
||||
<script lang="ts">
|
||||
import dayjs from 'dayjs';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import fileSaver from 'file-saver';
|
||||
const { saveAs } = fileSaver;
|
||||
|
||||
dayjs.extend(relativeTime);
|
||||
|
||||
import { WEBUI_NAME, config, functions as _functions, models, settings, user } from '$lib/stores';
|
||||
import { onMount, getContext, tick, onDestroy } from 'svelte';
|
||||
|
||||
@@ -39,6 +43,8 @@
|
||||
import { capitalizeFirstLetter } from '$lib/utils';
|
||||
import Spinner from '../common/Spinner.svelte';
|
||||
import SplitCreateButton from '../common/SplitCreateButton.svelte';
|
||||
import ChevronDown from '../icons/ChevronDown.svelte';
|
||||
import ChevronUp from '../icons/ChevronUp.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
@@ -49,6 +55,9 @@
|
||||
|
||||
let tagsContainerElement: HTMLDivElement;
|
||||
let viewOption = '';
|
||||
let sortKey = 'updated_at';
|
||||
let sortDirection = 'desc';
|
||||
let openFunctionMenuId: string | null = null;
|
||||
|
||||
let query = '';
|
||||
let searchDebounceTimer: ReturnType<typeof setTimeout>;
|
||||
@@ -90,7 +99,13 @@
|
||||
}
|
||||
};
|
||||
|
||||
$: if (functions && selectedType !== undefined && viewOption !== undefined) {
|
||||
$: if (
|
||||
functions &&
|
||||
selectedType !== undefined &&
|
||||
viewOption !== undefined &&
|
||||
sortKey !== undefined &&
|
||||
sortDirection !== undefined
|
||||
) {
|
||||
setFilteredItems();
|
||||
}
|
||||
|
||||
@@ -109,7 +124,32 @@
|
||||
(viewOption === 'created' && f.user_id === $user?.id) ||
|
||||
(viewOption === 'shared' && f.user_id !== $user?.id))
|
||||
)
|
||||
.sort((a, b) => a.type.localeCompare(b.type) || a.name.localeCompare(b.name));
|
||||
.sort((a, b) => {
|
||||
const direction = sortDirection === 'asc' ? 1 : -1;
|
||||
|
||||
if (sortKey === 'name') {
|
||||
return direction * (a.name ?? '').localeCompare(b.name ?? '');
|
||||
}
|
||||
|
||||
return direction * ((a.updated_at ?? 0) - (b.updated_at ?? 0));
|
||||
});
|
||||
};
|
||||
|
||||
const setSortKey = (key: string) => {
|
||||
if (sortKey === key) {
|
||||
sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
|
||||
} else {
|
||||
sortKey = key;
|
||||
sortDirection = key === 'updated_at' ? 'desc' : 'asc';
|
||||
}
|
||||
};
|
||||
|
||||
const openFunction = (func) => {
|
||||
goto(`/admin/functions/edit?id=${encodeURIComponent(func.id)}`);
|
||||
};
|
||||
|
||||
const shouldIgnoreRowClick = (target: EventTarget | null) => {
|
||||
return target instanceof Element && !!target.closest('button, a, input, [role="menu"]');
|
||||
};
|
||||
const shareHandler = async (func) => {
|
||||
const item = await getFunctionById(localStorage.token, func.id).catch((error) => {
|
||||
@@ -407,173 +447,275 @@
|
||||
</div>
|
||||
|
||||
{#if (filteredItems ?? []).length !== 0}
|
||||
<div class="my-1 gap-x-2 gap-y-0.5 grid lg:grid-cols-2">
|
||||
{#each filteredItems as func (func.id)}
|
||||
<div
|
||||
class="flex space-x-4 cursor-pointer w-full px-2.5 py-1.5 rounded-2xl hover:bg-gray-50/70 dark:hover:bg-gray-850/50"
|
||||
<div class="my-1">
|
||||
<div
|
||||
class="flex w-full items-center gap-2 px-1.5 pb-0.5 text-xs text-gray-400 dark:text-gray-600"
|
||||
>
|
||||
<button
|
||||
class="flex min-w-0 flex-1 items-center gap-1 py-0.5 text-left"
|
||||
type="button"
|
||||
on:click={() => setSortKey('name')}
|
||||
>
|
||||
<a
|
||||
class=" flex flex-1 space-x-3.5 cursor-pointer w-full"
|
||||
href={`/admin/functions/edit?id=${encodeURIComponent(func.id)}`}
|
||||
{$i18n.t('Title')}
|
||||
{#if sortKey === 'name'}
|
||||
{#if sortDirection === 'asc'}
|
||||
<ChevronUp className="size-2" />
|
||||
{:else}
|
||||
<ChevronDown className="size-2" />
|
||||
{/if}
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<div class="hidden w-44 shrink-0 md:block"></div>
|
||||
|
||||
<button
|
||||
class="flex w-36 shrink-0 items-center justify-end gap-1 py-0.5 text-right"
|
||||
type="button"
|
||||
on:click={() => setSortKey('updated_at')}
|
||||
>
|
||||
{$i18n.t('Updated at')}
|
||||
{#if sortKey === 'updated_at'}
|
||||
{#if sortDirection === 'asc'}
|
||||
<ChevronUp className="size-2" />
|
||||
{:else}
|
||||
<ChevronDown className="size-2" />
|
||||
{/if}
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-y-0.5">
|
||||
{#each filteredItems as func (func.id)}
|
||||
<div
|
||||
class="group flex min-h-8 w-full cursor-pointer items-center gap-2 overflow-hidden rounded-xl px-2 py-1 text-left"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
on:click={(e) => {
|
||||
if (shouldIgnoreRowClick(e.target)) return;
|
||||
openFunction(func);
|
||||
}}
|
||||
on:keydown={(e) => {
|
||||
if (e.currentTarget !== e.target) return;
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
openFunction(func);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class="flex items-center text-left">
|
||||
<div class=" flex-1 self-center pl-1">
|
||||
<Tooltip content={func.id} placement="top-start">
|
||||
<div class=" flex items-center gap-1.5">
|
||||
<div class="flex min-w-0 flex-1 items-center gap-1 overflow-hidden">
|
||||
<div class="flex min-w-0 flex-1 flex-col overflow-hidden">
|
||||
<div class="flex min-w-0 items-center gap-2 overflow-hidden">
|
||||
<div class="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
|
||||
<div
|
||||
class=" text-xs font-normal px-1 rounded-sm uppercase line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200"
|
||||
class="shrink-0 rounded-sm bg-gray-500/20 px-1 text-[10px] uppercase leading-4 text-gray-700 dark:text-gray-200"
|
||||
>
|
||||
{func.type}
|
||||
</div>
|
||||
|
||||
<div class="line-clamp-1 text-sm">
|
||||
{func.name}
|
||||
</div>
|
||||
<Tooltip content={func.id} className="min-w-0" placement="top-start">
|
||||
<div
|
||||
class="truncate text-[13px] leading-5 text-gray-800 group-hover:underline dark:text-gray-200"
|
||||
>
|
||||
{func.name}
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
{#if func?.meta?.manifest?.version}
|
||||
<div class=" text-gray-500 text-xs font-normal shrink-0">
|
||||
<div
|
||||
class="min-w-0 max-w-[40%] shrink-0 truncate text-[11px] leading-5 text-gray-500"
|
||||
>
|
||||
v{func?.meta?.manifest?.version ?? ''}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
<div class="flex gap-1.5 px-1">
|
||||
<div class="text-xs text-gray-500 shrink-0">
|
||||
<Tooltip
|
||||
content={func?.user?.email ?? $i18n.t('Deleted User')}
|
||||
className="flex shrink-0"
|
||||
placement="top-start"
|
||||
>
|
||||
{$i18n.t('By {{name}}', {
|
||||
name: capitalizeFirstLetter(
|
||||
func?.user?.name ?? func?.user?.email ?? $i18n.t('Deleted User')
|
||||
)
|
||||
})}
|
||||
<Tooltip content={dayjs(func.updated_at * 1000).format('LLLL')}>
|
||||
<div
|
||||
class="shrink-0 truncate text-[11px] leading-5 text-gray-400 dark:text-gray-600"
|
||||
>
|
||||
{dayjs(func.updated_at * 1000).fromNow()}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div class=" text-xs overflow-hidden text-ellipsis line-clamp-1">
|
||||
{func.meta.description}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if func?.meta?.description}
|
||||
<Tooltip
|
||||
content={func?.meta?.description}
|
||||
className="min-w-0"
|
||||
placement="top-start"
|
||||
>
|
||||
<div
|
||||
class="mt-0.5 truncate text-[0.6875rem] leading-4 text-gray-400 dark:text-gray-600"
|
||||
>
|
||||
{func?.meta?.description}
|
||||
</div>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="flex flex-row gap-0.5 self-center">
|
||||
{#if shiftKey}
|
||||
<Tooltip content={$i18n.t('Delete')}>
|
||||
<button
|
||||
class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
deleteHandler(func);
|
||||
}}
|
||||
>
|
||||
<GarbageBin />
|
||||
</button>
|
||||
</Tooltip>
|
||||
{:else}
|
||||
{#if func?.meta?.manifest?.funding_url ?? false}
|
||||
<Tooltip content={$i18n.t('Support')}>
|
||||
<button
|
||||
class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
selectedFunction = func;
|
||||
showManifestModal = true;
|
||||
}}
|
||||
>
|
||||
<Heart />
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
|
||||
<Tooltip content={$i18n.t('Valves')}>
|
||||
<button
|
||||
class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
selectedFunction = func;
|
||||
showValvesModal = true;
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="size-4"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"
|
||||
/>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
<FunctionMenu
|
||||
{func}
|
||||
editHandler={() => {
|
||||
goto(`/admin/functions/edit?id=${encodeURIComponent(func.id)}`);
|
||||
}}
|
||||
shareHandler={() => {
|
||||
shareHandler(func);
|
||||
}}
|
||||
cloneHandler={() => {
|
||||
cloneHandler(func);
|
||||
}}
|
||||
exportHandler={() => {
|
||||
exportHandler(func);
|
||||
}}
|
||||
deleteHandler={async () => {
|
||||
selectedFunction = func;
|
||||
showDeleteConfirm = true;
|
||||
}}
|
||||
toggleGlobalHandler={() => {
|
||||
if (['filter', 'action'].includes(func.type)) {
|
||||
toggleGlobalHandler(func);
|
||||
}
|
||||
}}
|
||||
onClose={() => {}}
|
||||
<div
|
||||
class="hidden max-w-44 shrink-0 self-center truncate text-right text-[11px] leading-5 text-gray-500 dark:text-gray-500 md:block"
|
||||
>
|
||||
<Tooltip
|
||||
content={func?.user?.email ?? $i18n.t('Deleted User')}
|
||||
className="min-w-0"
|
||||
placement="top-start"
|
||||
>
|
||||
<button
|
||||
class="self-center w-fit text-sm p-1.5 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
|
||||
type="button"
|
||||
>
|
||||
<EllipsisHorizontal className="size-5" />
|
||||
</button>
|
||||
</FunctionMenu>
|
||||
{/if}
|
||||
|
||||
<div class=" self-center mx-1">
|
||||
<Tooltip content={func.is_active ? $i18n.t('Enabled') : $i18n.t('Disabled')}>
|
||||
<Switch
|
||||
bind:state={func.is_active}
|
||||
on:change={async (e) => {
|
||||
toggleFunctionById(localStorage.token, func.id);
|
||||
models.set(
|
||||
await getModels(
|
||||
localStorage.token,
|
||||
$config?.features?.enable_direct_connections &&
|
||||
($settings?.directConnections ?? null),
|
||||
false,
|
||||
true
|
||||
)
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<div class="truncate">
|
||||
{capitalizeFirstLetter(
|
||||
func?.user?.name ?? func?.user?.email ?? $i18n.t('Deleted User')
|
||||
)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div class="ml-2 flex shrink-0 flex-row items-center self-center">
|
||||
{#if shiftKey}
|
||||
<Tooltip content={$i18n.t('Delete')}>
|
||||
<button
|
||||
class="flex size-6 items-center justify-center rounded-lg text-gray-400 transition dark:text-gray-500"
|
||||
type="button"
|
||||
aria-label={$i18n.t('Delete')}
|
||||
on:click={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
deleteHandler(func);
|
||||
}}
|
||||
>
|
||||
<GarbageBin className="size-4" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
{:else}
|
||||
{#if func?.meta?.manifest?.funding_url ?? false}
|
||||
<Tooltip content={$i18n.t('Support')}>
|
||||
<button
|
||||
class="flex size-6 items-center justify-center rounded-lg text-gray-400 transition dark:text-gray-500"
|
||||
type="button"
|
||||
aria-label={$i18n.t('Support')}
|
||||
on:click={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
selectedFunction = func;
|
||||
showManifestModal = true;
|
||||
}}
|
||||
>
|
||||
<Heart className="size-4" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
|
||||
<Tooltip content={$i18n.t('Valves')}>
|
||||
<button
|
||||
class="flex size-6 items-center justify-center rounded-lg text-gray-400 transition dark:text-gray-500"
|
||||
type="button"
|
||||
aria-label={$i18n.t('Valves')}
|
||||
on:click={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
selectedFunction = func;
|
||||
showValvesModal = true;
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="size-4"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9.594 3.94c.09-.542.56-.940 1.11-.940h2.593c.55 0 1.02.398 1.11.940l.213 1.281c.063.374.313.686.645.870.074.040.147.083.220.127.325.196.720.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.370.490l1.296 2.247a1.125 1.125 0 0 1-.260 1.431l-1.003.827c-.293.241-.438.613-.430.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.750.430.991l1.004.827c.424.350.534.955.260 1.430l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.750-.072-1.076.124a6.47 6.47 0 0 1-.220.128c-.331.183-.581.495-.644.869l-.213 1.281c-.090.543-.560.940-1.110.940h-2.594c-.550 0-1.019-.398-1.110-.940l-.213-1.281c-.062-.374-.312-.686-.644-.870a6.52 6.52 0 0 1-.220-.127c-.325-.196-.720-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.490l-1.297-2.247a1.125 1.125 0 0 1 .260-1.431l1.004-.827c.292-.240.437-.613.430-.991a6.932 6.932 0 0 1 0-.255c.007-.380-.138-.751-.430-.992l-1.004-.827a1.125 1.125 0 0 1-.260-1.430l1.297-2.247a1.125 1.125 0 0 1 1.370-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.220-.128.332-.183.582-.495.644-.869l.214-1.280Z"
|
||||
/>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
<div class="ml-0.5 flex shrink-0 flex-row items-center gap-1.5 self-center">
|
||||
<FunctionMenu
|
||||
{func}
|
||||
show={openFunctionMenuId === func.id}
|
||||
editHandler={() => {
|
||||
goto(`/admin/functions/edit?id=${encodeURIComponent(func.id)}`);
|
||||
}}
|
||||
shareHandler={() => {
|
||||
shareHandler(func);
|
||||
}}
|
||||
cloneHandler={() => {
|
||||
cloneHandler(func);
|
||||
}}
|
||||
exportHandler={() => {
|
||||
exportHandler(func);
|
||||
}}
|
||||
deleteHandler={async () => {
|
||||
selectedFunction = func;
|
||||
showDeleteConfirm = true;
|
||||
}}
|
||||
toggleGlobalHandler={() => {
|
||||
if (['filter', 'action'].includes(func.type)) {
|
||||
toggleGlobalHandler(func);
|
||||
}
|
||||
}}
|
||||
onClose={() => {
|
||||
openFunctionMenuId = null;
|
||||
}}
|
||||
>
|
||||
<button
|
||||
class="flex size-6 items-center justify-center rounded-lg text-gray-400 transition dark:text-gray-500"
|
||||
type="button"
|
||||
aria-label={$i18n.t('Function Menu')}
|
||||
on:click={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
openFunctionMenuId = openFunctionMenuId === func.id ? null : func.id;
|
||||
}}
|
||||
>
|
||||
<EllipsisHorizontal className="size-4" />
|
||||
</button>
|
||||
</FunctionMenu>
|
||||
|
||||
<button
|
||||
class="flex h-6 items-center"
|
||||
type="button"
|
||||
on:click={(e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}}
|
||||
>
|
||||
<Tooltip
|
||||
content={func.is_active ? $i18n.t('Enabled') : $i18n.t('Disabled')}
|
||||
>
|
||||
<Switch
|
||||
bind:state={func.is_active}
|
||||
on:change={async () => {
|
||||
toggleFunctionById(localStorage.token, func.id);
|
||||
models.set(
|
||||
await getModels(
|
||||
localStorage.token,
|
||||
$config?.features?.enable_direct_connections &&
|
||||
($settings?.directConnections ?? null),
|
||||
false,
|
||||
true
|
||||
)
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class=" w-full h-full flex flex-col justify-center items-center my-16 mb-24">
|
||||
|
||||
@@ -24,7 +24,12 @@
|
||||
|
||||
export let onClose: Function;
|
||||
|
||||
let show = false;
|
||||
export let show = false;
|
||||
|
||||
const closeMenu = () => {
|
||||
show = false;
|
||||
onClose();
|
||||
};
|
||||
</script>
|
||||
|
||||
<Dropdown
|
||||
@@ -62,6 +67,7 @@
|
||||
class="select-none flex gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl w-full"
|
||||
on:click={() => {
|
||||
editHandler();
|
||||
closeMenu();
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
@@ -86,6 +92,7 @@
|
||||
class="select-none flex gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl w-full"
|
||||
on:click={() => {
|
||||
shareHandler();
|
||||
closeMenu();
|
||||
}}
|
||||
>
|
||||
<Share />
|
||||
@@ -96,6 +103,7 @@
|
||||
class="select-none flex gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl w-full"
|
||||
on:click={() => {
|
||||
cloneHandler();
|
||||
closeMenu();
|
||||
}}
|
||||
>
|
||||
<DocumentDuplicate />
|
||||
@@ -106,6 +114,7 @@
|
||||
class="select-none flex gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl w-full"
|
||||
on:click={() => {
|
||||
exportHandler();
|
||||
closeMenu();
|
||||
}}
|
||||
>
|
||||
<Download />
|
||||
@@ -118,6 +127,7 @@
|
||||
class="select-none flex gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl w-full"
|
||||
on:click={() => {
|
||||
deleteHandler();
|
||||
closeMenu();
|
||||
}}
|
||||
>
|
||||
<GarbageBin strokeWidth="2" />
|
||||
|
||||
Reference in New Issue
Block a user