ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-12 12:25:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

refac: styling

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-09-15 14:28:16 -05:00
parent 5434172e88
commit 596be451ec
27 changed files with 170 additions and 165 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lib/components/admin/Evaluations/FeedbackMenu.svelte
View file

@ -13,7 +13,7 @@
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 Download from '$lib/components/icons/ArrowDownTray.svelte'; import Download from '$lib/components/icons/Download.svelte';
let show = false; let show = false;
</script> </script>

4
src/lib/components/admin/Evaluations/Feedbacks.svelte
View file

@ -13,7 +13,7 @@
import { deleteFeedbackById, exportAllFeedbacks, getAllFeedbacks } from '$lib/apis/evaluations'; import { deleteFeedbackById, exportAllFeedbacks, getAllFeedbacks } from '$lib/apis/evaluations';
import Tooltip from '$lib/components/common/Tooltip.svelte'; import Tooltip from '$lib/components/common/Tooltip.svelte';
import ArrowDownTray from '$lib/components/icons/ArrowDownTray.svelte'; import Download from '$lib/components/icons/Download.svelte';
import Badge from '$lib/components/common/Badge.svelte'; import Badge from '$lib/components/common/Badge.svelte';
import CloudArrowUp from '$lib/components/icons/CloudArrowUp.svelte'; import CloudArrowUp from '$lib/components/icons/CloudArrowUp.svelte';
import Pagination from '$lib/components/common/Pagination.svelte'; import Pagination from '$lib/components/common/Pagination.svelte';
@ -187,7 +187,7 @@
exportHandler(); exportHandler();
}} }}
> >
<ArrowDownTray className="size-3" /> <Download className="size-3" />
</button> </button>
</Tooltip> </Tooltip>
</div> </div>

2
src/lib/components/admin/Functions.svelte
View file

@ -18,7 +18,7 @@
toggleGlobalById toggleGlobalById
} from '$lib/apis/functions'; } from '$lib/apis/functions';
import ArrowDownTray from '../icons/ArrowDownTray.svelte'; import Download from '../icons/Download.svelte';
import Tooltip from '../common/Tooltip.svelte'; import Tooltip from '../common/Tooltip.svelte';
import ConfirmDialog from '../common/ConfirmDialog.svelte'; import ConfirmDialog from '../common/ConfirmDialog.svelte';
import { getModels } from '$lib/apis'; import { getModels } from '$lib/apis';

2
src/lib/components/admin/Functions/AddFunctionMenu.svelte
View file

@ -8,7 +8,7 @@
import Tooltip from '$lib/components/common/Tooltip.svelte'; import Tooltip from '$lib/components/common/Tooltip.svelte';
import Share from '$lib/components/icons/Share.svelte'; import Share from '$lib/components/icons/Share.svelte';
import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte'; import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
import ArrowDownTray from '$lib/components/icons/ArrowDownTray.svelte'; import Download from '$lib/components/icons/Download.svelte';
import Switch from '$lib/components/common/Switch.svelte'; import Switch from '$lib/components/common/Switch.svelte';
import GlobeAlt from '$lib/components/icons/GlobeAlt.svelte'; import GlobeAlt from '$lib/components/icons/GlobeAlt.svelte';
import Github from '$lib/components/icons/Github.svelte'; import Github from '$lib/components/icons/Github.svelte';

8
src/lib/components/admin/Functions/FunctionMenu.svelte
View file

@ -8,7 +8,7 @@
import Tooltip from '$lib/components/common/Tooltip.svelte'; import Tooltip from '$lib/components/common/Tooltip.svelte';
import Share from '$lib/components/icons/Share.svelte'; import Share from '$lib/components/icons/Share.svelte';
import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte'; import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
import ArrowDownTray from '$lib/components/icons/ArrowDownTray.svelte'; import Download from '$lib/components/icons/Download.svelte';
import Switch from '$lib/components/common/Switch.svelte'; import Switch from '$lib/components/common/Switch.svelte';
import GlobeAlt from '$lib/components/icons/GlobeAlt.svelte'; import GlobeAlt from '$lib/components/icons/GlobeAlt.svelte';
@ -63,7 +63,7 @@
</div> </div>
</div> </div>
<hr class="border-gray-100 dark:border-gray-850 my-1" /> <hr class="border-gray-50 dark:border-gray-850 my-1" />
{/if} {/if}
<DropdownMenu.Item <DropdownMenu.Item
@ -117,12 +117,12 @@
exportHandler(); exportHandler();
}} }}
> >
<ArrowDownTray /> <Download />
<div class="flex items-center">{$i18n.t('Export')}</div> <div class="flex items-center">{$i18n.t('Export')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
<hr class="border-gray-100 dark:border-gray-850 my-1" /> <hr class="border-gray-50 dark:border-gray-850 my-1" />
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"

4
src/lib/components/admin/Settings/Connections/OllamaConnection.svelte
View file

@ -10,7 +10,7 @@
import Cog6 from '$lib/components/icons/Cog6.svelte'; import Cog6 from '$lib/components/icons/Cog6.svelte';
import Wrench from '$lib/components/icons/Wrench.svelte'; import Wrench from '$lib/components/icons/Wrench.svelte';
import ManageOllamaModal from './ManageOllamaModal.svelte'; import ManageOllamaModal from './ManageOllamaModal.svelte';
import ArrowDownTray from '$lib/components/icons/ArrowDownTray.svelte'; import Download from '$lib/components/icons/Download.svelte';
export let onDelete = () => {}; export let onDelete = () => {};
export let onSubmit = () => {}; export let onSubmit = () => {};
@ -84,7 +84,7 @@
}} }}
type="button" type="button"
> >
<ArrowDownTray /> <Download />
</button> </button>
</Tooltip> </Tooltip>

2
src/lib/components/admin/Settings/Database.svelte
View file

@ -143,7 +143,7 @@
</div> </div>
</button> </button>
<hr class="border-gray-100 dark:border-gray-850 my-1" /> <hr class="border-gray-50 dark:border-gray-850 my-1" />
{#if $config?.features.enable_admin_export ?? true} {#if $config?.features.enable_admin_export ?? true}
<div class=" flex w-full justify-between"> <div class=" flex w-full justify-between">

4
src/lib/components/admin/Settings/Models.svelte
View file

@ -30,7 +30,7 @@
import Cog6 from '$lib/components/icons/Cog6.svelte'; import Cog6 from '$lib/components/icons/Cog6.svelte';
import ConfigureModelsModal from './Models/ConfigureModelsModal.svelte'; import ConfigureModelsModal from './Models/ConfigureModelsModal.svelte';
import Wrench from '$lib/components/icons/Wrench.svelte'; import Wrench from '$lib/components/icons/Wrench.svelte';
import ArrowDownTray from '$lib/components/icons/ArrowDownTray.svelte'; import Download from '$lib/components/icons/Download.svelte';
import ManageModelsModal from './Models/ManageModelsModal.svelte'; import ManageModelsModal from './Models/ManageModelsModal.svelte';
import ModelMenu from '$lib/components/admin/Settings/Models/ModelMenu.svelte'; import ModelMenu from '$lib/components/admin/Settings/Models/ModelMenu.svelte';
import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte'; import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
@ -265,7 +265,7 @@
showManageModal = true; showManageModal = true;
}} }}
> >
<ArrowDownTray /> <Download />
</button> </button>
</Tooltip> </Tooltip>

4
src/lib/components/admin/Settings/Models/ModelMenu.svelte
View file

@ -11,7 +11,7 @@
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 ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte'; import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
import ArrowDownTray from '$lib/components/icons/ArrowDownTray.svelte'; import Download from '$lib/components/icons/Download.svelte';
import ArrowUpCircle from '$lib/components/icons/ArrowUpCircle.svelte'; import ArrowUpCircle from '$lib/components/icons/ArrowUpCircle.svelte';
import { config } from '$lib/stores'; import { config } from '$lib/stores';
@ -120,7 +120,7 @@
exportHandler(); exportHandler();
}} }}
> >
<ArrowDownTray /> <Download />
<div class="flex items-center">{$i18n.t('Export')}</div> <div class="flex items-center">{$i18n.t('Export')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>

4
src/lib/components/chat/Artifacts.svelte
View file

@ -12,7 +12,7 @@
import Tooltip from '../common/Tooltip.svelte'; import Tooltip from '../common/Tooltip.svelte';
import SvgPanZoom from '../common/SVGPanZoom.svelte'; import SvgPanZoom from '../common/SVGPanZoom.svelte';
import ArrowLeft from '../icons/ArrowLeft.svelte'; import ArrowLeft from '../icons/ArrowLeft.svelte';
import ArrowDownTray from '../icons/ArrowDownTray.svelte'; import Download from '../icons/Download.svelte';
export let overlay = false; export let overlay = false;
export let history; export let history;
@ -285,7 +285,7 @@
class=" bg-none border-none text-xs bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-md p-0.5" class=" bg-none border-none text-xs bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-md p-0.5"
on:click={downloadArtifact} on:click={downloadArtifact}
> >
<ArrowDownTray className="size-3.5" /> <Download className="size-3.5" />
</button> </button>
</Tooltip> </Tooltip>

4
src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
View file

@ -17,7 +17,7 @@
import AlertRenderer, { alertComponent } from './AlertRenderer.svelte'; import AlertRenderer, { alertComponent } from './AlertRenderer.svelte';
import Collapsible from '$lib/components/common/Collapsible.svelte'; import Collapsible from '$lib/components/common/Collapsible.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte'; import Tooltip from '$lib/components/common/Tooltip.svelte';
import ArrowDownTray from '$lib/components/icons/ArrowDownTray.svelte'; import Download from '$lib/components/icons/Download.svelte';
import Source from './Source.svelte'; import Source from './Source.svelte';
import { settings } from '$lib/stores'; import { settings } from '$lib/stores';
@ -186,7 +186,7 @@
exportTableToCSVHandler(token, tokenIdx); exportTableToCSVHandler(token, tokenIdx);
}} }}
> >
<ArrowDownTray className=" size-3.5" strokeWidth="1.5" /> <Download className=" size-3.5" strokeWidth="1.5" />
</button> </button>
</Tooltip> </Tooltip>
</div> </div>

4
src/lib/components/common/SVGPanZoom.svelte
View file

@ -16,7 +16,7 @@
import Tooltip from './Tooltip.svelte'; import Tooltip from './Tooltip.svelte';
import Clipboard from '../icons/Clipboard.svelte'; import Clipboard from '../icons/Clipboard.svelte';
import Reset from '../icons/Reset.svelte'; import Reset from '../icons/Reset.svelte';
import ArrowDownTray from '../icons/ArrowDownTray.svelte'; import Download from '../icons/Download.svelte';
export let className = ''; export let className = '';
export let svg = ''; export let svg = '';
@ -62,7 +62,7 @@
downloadAsSVG(); downloadAsSVG();
}} }}
> >
<ArrowDownTray className=" size-4" /> <Download className=" size-4" />
</button> </button>
</Tooltip> </Tooltip>

2
src/lib/components/icons/ArchiveBox.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
export let className = 'size-3.5'; export let className = 'size-4';
export let strokeWidth = '2.5'; export let strokeWidth = '2.5';
</script> </script>

9
src/lib/components/icons/ArrowDownTray.svelte → src/lib/components/icons/Download.svelte
View file

@ -10,10 +10,9 @@
stroke-width={strokeWidth} stroke-width={strokeWidth}
stroke="currentColor" stroke="currentColor"
class={className} class={className}
> ><path d="M6 20L18 20" stroke-linecap="round" stroke-linejoin="round"></path><path
<path d="M12 4V16M12 16L15.5 12.5M12 16L8.5 12.5"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" ></path></svg
/> >
</svg>

33
src/lib/components/icons/Link.svelte
View file

@ -1,17 +1,22 @@
<script lang="ts"> <script lang="ts">
export let className = 'w-4 h-4'; export let className = 'size-4';
export let strokeWidth = '1.5';
</script> </script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class={className}> <svg
<path xmlns="http://www.w3.org/2000/svg"
fill-rule="evenodd" fill="none"
d="M8.914 6.025a.75.75 0 0 1 1.06 0 3.5 3.5 0 0 1 0 4.95l-2 2a3.5 3.5 0 0 1-5.396-4.402.75.75 0 0 1 1.251.827 2 2 0 0 0 3.085 2.514l2-2a2 2 0 0 0 0-2.828.75.75 0 0 1 0-1.06Z" viewBox="0 0 24 24"
clip-rule="evenodd" stroke-width={strokeWidth}
aria-hidden="true" stroke="currentColor"
/> class={className}
<path ><path
fill-rule="evenodd" d="M14 11.9976C14 9.5059 11.683 7 8.85714 7C8.52241 7 7.41904 7.00001 7.14286 7.00001C4.30254 7.00001 2 9.23752 2 11.9976C2 14.376 3.70973 16.3664 6 16.8714C6.36756 16.9525 6.75006 16.9952 7.14286 16.9952"
d="M7.086 9.975a.75.75 0 0 1-1.06 0 3.5 3.5 0 0 1 0-4.95l2-2a3.5 3.5 0 0 1 5.396 4.402.75.75 0 0 1-1.251-.827 2 2 0 0 0-3.085-2.514l-2 2a2 2 0 0 0 0 2.828.75.75 0 0 1 0 1.06Z" stroke-linecap="round"
clip-rule="evenodd" stroke-linejoin="round"
/> ></path><path
</svg> d="M10 11.9976C10 14.4893 12.317 16.9952 15.1429 16.9952C15.4776 16.9952 16.581 16.9952 16.8571 16.9952C19.6975 16.9952 22 14.7577 22 11.9976C22 9.6192 20.2903 7.62884 18 7.12383C17.6324 7.04278 17.2499 6.99999 16.8571 6.99999"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>

28
src/lib/components/icons/Share.svelte
View file

@ -1,11 +1,23 @@
<script lang="ts"> <script lang="ts">
export let className = 'w-4 h-4'; export let className = 'size-4';
export let strokeWidth = '1.5';
</script> </script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class={className}> <svg
<path xmlns="http://www.w3.org/2000/svg"
fill-rule="evenodd" fill="none"
d="M15.75 4.5a3 3 0 1 1 .825 2.066l-8.421 4.679a3.002 3.002 0 0 1 0 1.51l8.421 4.679a3 3 0 1 1-.729 1.31l-8.421-4.678a3 3 0 1 1 0-4.132l8.421-4.679a3 3 0 0 1-.096-.755Z" viewBox="0 0 24 24"
clip-rule="evenodd" stroke-width={strokeWidth}
/> stroke="currentColor"
</svg> aria-hidden="true"
class={className}
><path
d="M20 13V19C20 20.1046 19.1046 21 18 21H6C4.89543 21 4 20.1046 4 19V13"
stroke-linecap="round"
stroke-linejoin="round"
></path><path
d="M12 15V3M12 3L8.5 6.5M12 3L15.5 6.5"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>

98
src/lib/components/layout/Navbar/Menu.svelte
View file

@ -36,6 +36,7 @@
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 ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
import Messages from '$lib/components/chat/Messages.svelte'; import Messages from '$lib/components/chat/Messages.svelte';
import Download from '$lib/components/icons/Download.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
@ -364,64 +365,11 @@
</DropdownMenu.Item> </DropdownMenu.Item>
{/if} {/if}
{#if chat?.id}
<DropdownMenu.Sub> <DropdownMenu.Sub>
<DropdownMenu.SubTrigger <DropdownMenu.SubTrigger
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-lg 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-lg select-none w-full"
> >
<Folder strokeWidth="1.5" /> <Download strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Move')}</div>
</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent
class="w-full rounded-xl px-1 py-1.5 z-50 bg-white dark:bg-gray-850 dark:text-white 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
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-lg"
on:click={() => {
moveChatHandler(chat?.id, folder?.id);
}}
>
<Folder strokeWidth="1.5" />
<div class="flex items-center">{folder?.name ?? 'Folder'}</div>
</DropdownMenu.Item>
{/each}
</DropdownMenu.SubContent>
</DropdownMenu.Sub>
{/if}
<DropdownMenu.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-lg"
on:click={() => {
archiveChatHandler();
}}
>
<ArchiveBox className="size-4" strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Archive')}</div>
</DropdownMenu.Item>
<DropdownMenu.Sub>
<DropdownMenu.SubTrigger
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-lg select-none w-full"
>
<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="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
/>
</svg>
<div class="flex items-center">{$i18n.t('Download')}</div> <div class="flex items-center">{$i18n.t('Download')}</div>
</DropdownMenu.SubTrigger> </DropdownMenu.SubTrigger>
@ -477,6 +425,48 @@
<div class="flex items-center">{$i18n.t('Copy')}</div> <div class="flex items-center">{$i18n.t('Copy')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
<hr class="border-gray-50 dark:border-gray-800 my-1" />
{#if chat?.id}
<DropdownMenu.Sub>
<DropdownMenu.SubTrigger
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-lg select-none w-full"
>
<Folder strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Move')}</div>
</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent
class="w-full rounded-xl px-1 py-1.5 z-50 bg-white dark:bg-gray-850 dark:text-white 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
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-lg"
on:click={() => {
moveChatHandler(chat?.id, folder?.id);
}}
>
<Folder strokeWidth="1.5" />
<div class="flex items-center">{folder?.name ?? 'Folder'}</div>
</DropdownMenu.Item>
{/each}
</DropdownMenu.SubContent>
</DropdownMenu.Sub>
{/if}
<DropdownMenu.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-lg"
on:click={() => {
archiveChatHandler();
}}
>
<ArchiveBox className="size-4" strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Archive')}</div>
</DropdownMenu.Item>
{#if !$temporaryChatEnabled} {#if !$temporaryChatEnabled}
<hr class="border-gray-50 dark:border-gray-800 my-1" /> <hr class="border-gray-50 dark:border-gray-800 my-1" />

2
src/lib/components/layout/SearchModal.svelte
View file

@ -251,7 +251,7 @@
/> />
</div> </div>
<!-- <hr class="border-gray-100 dark:border-gray-850 my-1" /> --> <!-- <hr class="border-gray-50 dark:border-gray-850 my-1" /> -->
<div class="flex px-3 pb-1"> <div class="flex px-3 pb-1">
<div <div

22
src/lib/components/layout/Sidebar/ChatMenu.svelte
View file

@ -29,7 +29,7 @@
import { chats, folders, settings, theme, user } from '$lib/stores'; import { chats, folders, settings, theme, user } from '$lib/stores';
import { createMessagesList } from '$lib/utils'; import { createMessagesList } from '$lib/utils';
import { downloadChatAsPDF } from '$lib/apis/utils'; import { downloadChatAsPDF } from '$lib/apis/utils';
import Download from '$lib/components/icons/ArrowDownTray.svelte'; import Download from '$lib/components/icons/Download.svelte';
import Folder from '$lib/components/icons/Folder.svelte'; import Folder from '$lib/components/icons/Folder.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
@ -191,6 +191,16 @@
{/if} {/if}
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.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"
on:click={() => {
cloneChatHandler();
}}
>
<DocumentDuplicate strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Clone')}</div>
</DropdownMenu.Item>
{#if chatId} {#if chatId}
<DropdownMenu.Sub> <DropdownMenu.Sub>
<DropdownMenu.SubTrigger <DropdownMenu.SubTrigger
@ -221,16 +231,6 @@
</DropdownMenu.Sub> </DropdownMenu.Sub>
{/if} {/if}
<DropdownMenu.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"
on:click={() => {
cloneChatHandler();
}}
>
<DocumentDuplicate strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Clone')}</div>
</DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.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" 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={() => { on:click={() => {

16
src/lib/components/layout/Sidebar/Folders/FolderMenu.svelte
View file

@ -10,7 +10,7 @@
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 Download from '$lib/components/icons/ArrowDownTray.svelte'; import Download from '$lib/components/icons/Download.svelte';
export let align: 'start' | 'end' = 'start'; export let align: 'start' | 'end' = 'start';
export let onEdit = () => {}; export let onEdit = () => {};
@ -34,40 +34,40 @@
<div slot="content"> <div slot="content">
<DropdownMenu.Content <DropdownMenu.Content
class="w-full max-w-[170px] rounded-lg px-1 py-1.5 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg" 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"
sideOffset={-2} sideOffset={-2}
side="bottom" side="bottom"
{align} {align}
transition={flyAndScale} transition={flyAndScale}
> >
<DropdownMenu.Item <DropdownMenu.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-md" 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={() => { on:click={() => {
onEdit(); onEdit();
}} }}
> >
<Pencil strokeWidth="2" /> <Pencil />
<div class="flex items-center">{$i18n.t('Edit')}</div> <div class="flex items-center">{$i18n.t('Edit')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.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-md" 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={() => { on:click={() => {
onExport(); onExport();
}} }}
> >
<Download strokeWidth="2" /> <Download />
<div class="flex items-center">{$i18n.t('Export')}</div> <div class="flex items-center">{$i18n.t('Export')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.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-md" 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={() => { on:click={() => {
onDelete(); onDelete();
}} }}
> >
<GarbageBin strokeWidth="2" /> <GarbageBin />
<div class="flex items-center">{$i18n.t('Delete')}</div> <div class="flex items-center">{$i18n.t('Delete')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
</DropdownMenu.Content> </DropdownMenu.Content>

22
src/lib/components/notes/Notes/NoteMenu.svelte
View file

@ -9,7 +9,7 @@
import Tooltip from '$lib/components/common/Tooltip.svelte'; import Tooltip from '$lib/components/common/Tooltip.svelte';
import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte'; import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
import Download from '$lib/components/icons/ArrowDownTray.svelte'; import Download from '$lib/components/icons/Download.svelte';
import GarbageBin from '$lib/components/icons/GarbageBin.svelte'; import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte'; import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
import Share from '$lib/components/icons/Share.svelte'; import Share from '$lib/components/icons/Share.svelte';
@ -41,7 +41,7 @@
<slot name="content"> <slot name="content">
<DropdownMenu.Content <DropdownMenu.Content
class="w-full {className} text-sm rounded-xl px-1 py-1.5 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg font-primary" class="w-full {className} text-sm 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={6} sideOffset={6}
side="bottom" side="bottom"
align="end" align="end"
@ -49,7 +49,7 @@
> >
<DropdownMenu.Sub> <DropdownMenu.Sub>
<DropdownMenu.SubTrigger <DropdownMenu.SubTrigger
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-md" 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"
> >
<Download strokeWidth="2" /> <Download strokeWidth="2" />
@ -62,7 +62,7 @@
align="end" align="end"
> >
<DropdownMenu.Item <DropdownMenu.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-md" 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={() => { on:click={() => {
onDownload('txt'); onDownload('txt');
}} }}
@ -71,7 +71,7 @@
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.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-md" 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={() => { on:click={() => {
onDownload('md'); onDownload('md');
}} }}
@ -80,7 +80,7 @@
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.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-md" 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={() => { on:click={() => {
onDownload('pdf'); onDownload('pdf');
}} }}
@ -93,7 +93,7 @@
{#if onCopyLink || onCopyToClipboard} {#if onCopyLink || onCopyToClipboard}
<DropdownMenu.Sub> <DropdownMenu.Sub>
<DropdownMenu.SubTrigger <DropdownMenu.SubTrigger
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-md" 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"
> >
<Share strokeWidth="2" /> <Share strokeWidth="2" />
@ -107,7 +107,7 @@
> >
{#if onCopyLink} {#if onCopyLink}
<DropdownMenu.Item <DropdownMenu.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-md" 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={() => { on:click={() => {
onCopyLink(); onCopyLink();
}} }}
@ -119,7 +119,7 @@
{#if onCopyToClipboard} {#if onCopyToClipboard}
<DropdownMenu.Item <DropdownMenu.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-md" 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={() => { on:click={() => {
onCopyToClipboard(); onCopyToClipboard();
}} }}
@ -133,12 +133,12 @@
{/if} {/if}
<DropdownMenu.Item <DropdownMenu.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-md" 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={() => { on:click={() => {
onDelete(); onDelete();
}} }}
> >
<GarbageBin strokeWidth="2" /> <GarbageBin />
<div class="flex items-center">{$i18n.t('Delete')}</div> <div class="flex items-center">{$i18n.t('Delete')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
</DropdownMenu.Content> </DropdownMenu.Content>

9
src/lib/components/workspace/Knowledge/ItemMenu.svelte
View file

@ -12,7 +12,7 @@
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 ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte'; import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
import ArrowDownTray from '$lib/components/icons/ArrowDownTray.svelte'; import Download from '$lib/components/icons/Download.svelte';
import ArrowUpCircle from '$lib/components/icons/ArrowUpCircle.svelte'; import ArrowUpCircle from '$lib/components/icons/ArrowUpCircle.svelte';
import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte'; import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
@ -49,19 +49,18 @@
<div slot="content"> <div slot="content">
<DropdownMenu.Content <DropdownMenu.Content
class="w-full max-w-[170px] rounded-xl px-1 py-1.5 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-md" 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"
sideOffset={-2}
side="bottom" side="bottom"
align="end" align="end"
transition={flyAndScale} transition={flyAndScale}
> >
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" 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={() => { on:click={() => {
dispatch('delete'); dispatch('delete');
}} }}
> >
<GarbageBin strokeWidth="2" /> <GarbageBin />
<div class="flex items-center">{$i18n.t('Delete')}</div> <div class="flex items-center">{$i18n.t('Delete')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
</DropdownMenu.Content> </DropdownMenu.Content>

6
src/lib/components/workspace/Models/ModelMenu.svelte
View file

@ -11,7 +11,7 @@
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 ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte'; import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
import ArrowDownTray from '$lib/components/icons/ArrowDownTray.svelte'; import Download from '$lib/components/icons/Download.svelte';
import ArrowUpCircle from '$lib/components/icons/ArrowUpCircle.svelte'; import ArrowUpCircle from '$lib/components/icons/ArrowUpCircle.svelte';
import { config } from '$lib/stores'; import { config } from '$lib/stores';
@ -146,7 +146,7 @@
exportHandler(); exportHandler();
}} }}
> >
<ArrowDownTray /> <Download />
<div class="flex items-center">{$i18n.t('Export')}</div> <div class="flex items-center">{$i18n.t('Export')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
@ -159,7 +159,7 @@
deleteHandler(); deleteHandler();
}} }}
> >
<GarbageBin strokeWidth="2" /> <GarbageBin />
<div class="flex items-center">{$i18n.t('Delete')}</div> <div class="flex items-center">{$i18n.t('Delete')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
</DropdownMenu.Content> </DropdownMenu.Content>

18
src/lib/components/workspace/Prompts/PromptMenu.svelte
View file

@ -12,7 +12,7 @@
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 ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte'; import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
import ArrowDownTray from '$lib/components/icons/ArrowDownTray.svelte'; import Download from '$lib/components/icons/Download.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
@ -39,7 +39,7 @@
<div slot="content"> <div slot="content">
<DropdownMenu.Content <DropdownMenu.Content
class="w-full max-w-[170px] rounded-xl px-1 py-1.5 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-sm" class="w-full max-w-[170px] rounded-2xl px-1 py-1.5 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
sideOffset={-2} sideOffset={-2}
side="bottom" side="bottom"
align="start" align="start"
@ -47,7 +47,7 @@
> >
{#if $config.features.enable_community_sharing} {#if $config.features.enable_community_sharing}
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" 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={() => { on:click={() => {
shareHandler(); shareHandler();
}} }}
@ -58,7 +58,7 @@
{/if} {/if}
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" 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={() => { on:click={() => {
cloneHandler(); cloneHandler();
}} }}
@ -69,25 +69,25 @@
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" 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={() => { on:click={() => {
exportHandler(); exportHandler();
}} }}
> >
<ArrowDownTray /> <Download />
<div class="flex items-center">{$i18n.t('Export')}</div> <div class="flex items-center">{$i18n.t('Export')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
<hr class="border-gray-100 dark:border-gray-850 my-1" /> <hr class="border-gray-50 dark:border-gray-850 my-1" />
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" 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={() => { on:click={() => {
deleteHandler(); deleteHandler();
}} }}
> >
<GarbageBin strokeWidth="2" /> <GarbageBin />
<div class="flex items-center">{$i18n.t('Delete')}</div> <div class="flex items-center">{$i18n.t('Delete')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
</DropdownMenu.Content> </DropdownMenu.Content>

2
src/lib/components/workspace/Tools.svelte
View file

@ -17,7 +17,7 @@
getToolList, getToolList,
getTools getTools
} from '$lib/apis/tools'; } from '$lib/apis/tools';
import ArrowDownTray from '../icons/ArrowDownTray.svelte'; import Download from '../icons/Download.svelte';
import Tooltip from '../common/Tooltip.svelte'; import Tooltip from '../common/Tooltip.svelte';
import ConfirmDialog from '../common/ConfirmDialog.svelte'; import ConfirmDialog from '../common/ConfirmDialog.svelte';
import ToolMenu from './Tools/ToolMenu.svelte'; import ToolMenu from './Tools/ToolMenu.svelte';

4
src/lib/components/workspace/Tools/AddToolMenu.svelte
View file

@ -8,7 +8,7 @@
import Tooltip from '$lib/components/common/Tooltip.svelte'; import Tooltip from '$lib/components/common/Tooltip.svelte';
import Share from '$lib/components/icons/Share.svelte'; import Share from '$lib/components/icons/Share.svelte';
import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte'; import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
import ArrowDownTray from '$lib/components/icons/ArrowDownTray.svelte'; import Download from '$lib/components/icons/Download.svelte';
import Switch from '$lib/components/common/Switch.svelte'; import Switch from '$lib/components/common/Switch.svelte';
import GlobeAlt from '$lib/components/icons/GlobeAlt.svelte'; import GlobeAlt from '$lib/components/icons/GlobeAlt.svelte';
import Github from '$lib/components/icons/Github.svelte'; import Github from '$lib/components/icons/Github.svelte';
@ -41,7 +41,7 @@
<div slot="content"> <div slot="content">
<DropdownMenu.Content <DropdownMenu.Content
class="w-full max-w-[190px] text-sm rounded-xl px-1 py-1.5 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg font-primary" class="w-full max-w-[190px] text-sm rounded-xl px-1 py-1 dark:text-white shadow-lg border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850"
sideOffset={-2} sideOffset={-2}
side="bottom" side="bottom"
align="start" align="start"

20
src/lib/components/workspace/Tools/ToolMenu.svelte
View file

@ -11,7 +11,7 @@
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 ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte'; import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
import ArrowDownTray from '$lib/components/icons/ArrowDownTray.svelte'; import Download from '$lib/components/icons/Download.svelte';
import { config } from '$lib/stores'; import { config } from '$lib/stores';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
@ -40,14 +40,14 @@
<div slot="content"> <div slot="content">
<DropdownMenu.Content <DropdownMenu.Content
class="w-full max-w-[170px] rounded-xl px-1 py-1.5 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-sm" 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"
sideOffset={-2} sideOffset={-2}
side="bottom" side="bottom"
align="start" align="start"
transition={flyAndScale} transition={flyAndScale}
> >
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" 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={() => { on:click={() => {
editHandler(); editHandler();
}} }}
@ -72,7 +72,7 @@
{#if $config.features.enable_community_sharing} {#if $config.features.enable_community_sharing}
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" 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={() => { on:click={() => {
shareHandler(); shareHandler();
}} }}
@ -83,7 +83,7 @@
{/if} {/if}
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" 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={() => { on:click={() => {
cloneHandler(); cloneHandler();
}} }}
@ -94,25 +94,25 @@
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" 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={() => { on:click={() => {
exportHandler(); exportHandler();
}} }}
> >
<ArrowDownTray /> <Download />
<div class="flex items-center">{$i18n.t('Export')}</div> <div class="flex items-center">{$i18n.t('Export')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
<hr class="border-gray-100 dark:border-gray-850 my-1" /> <hr class="border-gray-50 dark:border-gray-850 my-1" />
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" 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={() => { on:click={() => {
deleteHandler(); deleteHandler();
}} }}
> >
<GarbageBin strokeWidth="2" /> <GarbageBin />
<div class="flex items-center">{$i18n.t('Delete')}</div> <div class="flex items-center">{$i18n.t('Delete')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
</DropdownMenu.Content> </DropdownMenu.Content>