Przeglądaj źródła

refac: add copy link functionality to notes view

Tim Jaeryang Baek 2 miesięcy temu
rodzic
commit
290f4023b1

+ 11 - 1
src/lib/components/notes/Notes.svelte

@@ -32,7 +32,7 @@
 	import { WEBUI_NAME, config, prompts as _prompts, user } from '$lib/stores';
 
 	import { createNewNote, deleteNoteById, getNotes } from '$lib/apis/notes';
-	import { capitalizeFirstLetter } from '$lib/utils';
+	import { capitalizeFirstLetter, copyToClipboard } from '$lib/utils';
 
 	import EllipsisHorizontal from '../icons/EllipsisHorizontal.svelte';
 	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
@@ -324,6 +324,16 @@
 
 																downloadHandler(type);
 															}}
+															onCopyLink={async () => {
+																const baseUrl = window.location.origin;
+																const res = await copyToClipboard(`${baseUrl}/notes/${note.id}`);
+
+																if (res) {
+																	toast.success($i18n.t('Copied link to clipboard'));
+																} else {
+																	toast.error($i18n.t('Failed to copy link'));
+																}
+															}}
 															onDelete={() => {
 																selectedNote = note;
 																showDeleteConfirm = true;

+ 39 - 33
src/lib/components/notes/Notes/NoteMenu.svelte

@@ -23,8 +23,8 @@
 	export let onDownload = (type) => {};
 	export let onDelete = () => {};
 
-	export let onCopyLink = () => {};
-	export let onCopyToClipboard = () => {};
+	export let onCopyLink = null;
+	export let onCopyToClipboard = null;
 
 	export let onChange = () => {};
 </script>
@@ -89,40 +89,46 @@
 				</DropdownMenu.SubContent>
 			</DropdownMenu.Sub>
 
-			<DropdownMenu.Sub>
-				<DropdownMenu.SubTrigger
-					class="flex gap-2 items-center px-3 py-2 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
-				>
-					<Share strokeWidth="2" />
-
-					<div class="flex items-center">{$i18n.t('Share')}</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"
-					transition={flyAndScale}
-					sideOffset={8}
-				>
-					<DropdownMenu.Item
+			{#if onCopyLink || onCopyToClipboard}
+				<DropdownMenu.Sub>
+					<DropdownMenu.SubTrigger
 						class="flex gap-2 items-center px-3 py-2 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
-						on:click={() => {
-							onCopyLink();
-						}}
 					>
-						<Link />
-						<div class="flex items-center">{$i18n.t('Copy link')}</div>
-					</DropdownMenu.Item>
-
-					<DropdownMenu.Item
-						class="flex gap-2 items-center px-3 py-2 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
-						on:click={() => {
-							onCopyToClipboard();
-						}}
+						<Share strokeWidth="2" />
+
+						<div class="flex items-center">{$i18n.t('Share')}</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"
+						transition={flyAndScale}
+						sideOffset={8}
 					>
-						<DocumentDuplicate strokeWidth="2" />
-						<div class="flex items-center">{$i18n.t('Copy to clipboard')}</div>
-					</DropdownMenu.Item>
-				</DropdownMenu.SubContent>
-			</DropdownMenu.Sub>
+						{#if onCopyLink}
+							<DropdownMenu.Item
+								class="flex gap-2 items-center px-3 py-2 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
+								on:click={() => {
+									onCopyLink();
+								}}
+							>
+								<Link />
+								<div class="flex items-center">{$i18n.t('Copy link')}</div>
+							</DropdownMenu.Item>
+						{/if}
+
+						{#if onCopyToClipboard}
+							<DropdownMenu.Item
+								class="flex gap-2 items-center px-3 py-2 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
+								on:click={() => {
+									onCopyToClipboard();
+								}}
+							>
+								<DocumentDuplicate strokeWidth="2" />
+								<div class="flex items-center">{$i18n.t('Copy to clipboard')}</div>
+							</DropdownMenu.Item>
+						{/if}
+					</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-md"