add toast when copying url to clipboard

src/entrypoints/popup/App.svelte

@@ -2,6 +2,7 @@
 	import '@/assets/base.css';
 
 	import { fly } from 'svelte/transition';
+	import Toast from '@/entrypoints/popup/components/Toast.svelte';
 	import Main from '@/entrypoints/popup/pages/main/Main.svelte';
 	import Settings from '@/entrypoints/popup/pages/settings/Settings.svelte';
 	import { isMobile } from '@/entrypoints/popup/state.js';
@@ -17,6 +18,7 @@
 </script>
 
 <div class="flex w-[350px] overflow-hidden" class:w-screen={$isMobile}>
+	<Toast />
 	{#if activePage === 'main'}
 		<div transition:fly={{ x: -300, duration: 150 }} class="min-w-full w-full h-[300px] flex-1 flex flex-col">
 			<Main onSettingsOpenRequest={() => (activePage = 'settings')} />

src/entrypoints/popup/components/Toast.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { fly } from 'svelte/transition';
+	import { toast } from '@/entrypoints/popup/state';
+</script>
+
+{#if $toast}
+	<div
+		class="absolute top-2 left-1/2 -translate-x-1/2 z-20 px-3 py-1.5 bg-gray-700 text-gray-100 text-sm rounded shadow-lg pointer-events-none"
+		transition:fly={{ y: -20, duration: 200 }}
+	>
+		{$toast.message}
+	</div>
+{/if}

src/entrypoints/popup/pages/main/CopyMatch.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Clipboard, InformationCircle } from '@steeze-ui/heroicons';
 	import { Icon } from '@steeze-ui/svelte-icon';
-	import { isMobile } from '@/entrypoints/popup/state';
+	import { isMobile, showToast } from '@/entrypoints/popup/state';
 
 	/* types */
 	interface Props {
@@ -28,8 +28,13 @@
 	}
 
 	/* callbacks */
-	function copyUrl() {
-		navigator.clipboard.writeText(urlOutput);
+	async function copyUrl() {
+		try {
+			await navigator.clipboard.writeText(urlOutput);
+			showToast('URL copied');
+		} catch {
+			showToast('Failed to copy');
+		}
 	}
 </script>
 

src/entrypoints/popup/state.ts

@@ -1,3 +1,22 @@
 import { writable } from 'svelte/store';
 
+/* --- global init --- */
 export const isMobile = writable(false);
+
+/* --- toast --- */
+interface Toast {
+	id: number;
+	message: string;
+}
+
+export const toast = writable<Toast | null>(null);
+
+let toastId = 0;
+
+export function showToast(message: string, duration = 2000) {
+	const id = ++toastId;
+	toast.set({ id, message });
+	setTimeout(() => {
+		toast.update((current) => (current?.id === id ? null : current));
+	}, duration);
+}