diff --git a/src/entrypoints/popup/App.svelte b/src/entrypoints/popup/App.svelte
index e19d39f..ba033e3 100644
--- a/src/entrypoints/popup/App.svelte
+++ b/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 @@
+
{#if activePage === 'main'}
(activePage = 'settings')} />
diff --git a/src/entrypoints/popup/components/Toast.svelte b/src/entrypoints/popup/components/Toast.svelte
new file mode 100644
index 0000000..03ceb90
--- /dev/null
+++ b/src/entrypoints/popup/components/Toast.svelte
@@ -0,0 +1,13 @@
+
+
+{#if $toast}
+
+ {$toast.message}
+
+{/if}
diff --git a/src/entrypoints/popup/pages/main/CopyMatch.svelte b/src/entrypoints/popup/pages/main/CopyMatch.svelte
index 0d26896..cc41254 100644
--- a/src/entrypoints/popup/pages/main/CopyMatch.svelte
+++ b/src/entrypoints/popup/pages/main/CopyMatch.svelte
@@ -1,7 +1,7 @@
diff --git a/src/entrypoints/popup/state.ts b/src/entrypoints/popup/state.ts
index 21cb581..5b58f2a 100644
--- a/src/entrypoints/popup/state.ts
+++ b/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(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);
+}