From 9b6595f7da0122e0995c237719775493d4f4292a Mon Sep 17 00:00:00 2001
From: Huakun Shen <huakun.shen@huakunshen.com>
Date: Sat, 9 Nov 2024 09:49:47 -0500
Subject: [PATCH] feat: add pin screenshot builtin command

---
 apps/desktop/package.json                     |  1 +
 apps/desktop/src/lib/cmds/builtin.ts          | 15 ++++++++
 .../extension/pin-screenshot/+page.svelte     | 34 +++++++++++++++++++
 pnpm-lock.yaml                                |  3 ++
 4 files changed, 53 insertions(+)
 create mode 100644 apps/desktop/src/routes/extension/pin-screenshot/+page.svelte

diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index b909e8b..a0e3b94 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -32,6 +32,7 @@
 		"svelte-radix": "^2.0.1",
 		"svelte-sonner": "^0.3.28",
 		"sveltekit-superforms": "^2.20.0",
+		"tauri-plugin-clipboard-api": "^2.1.11",
 		"uuid": "^11.0.2"
 	},
 	"devDependencies": {
diff --git a/apps/desktop/src/lib/cmds/builtin.ts b/apps/desktop/src/lib/cmds/builtin.ts
index f6b3a01..1433c01 100644
--- a/apps/desktop/src/lib/cmds/builtin.ts
+++ b/apps/desktop/src/lib/cmds/builtin.ts
@@ -202,6 +202,21 @@ export const builtinCmds: BuiltinCmd[] = [
 			appState.clearSearchTerm()
 		}
 	},
+	{
+		name: "Pin Current Screenshot",
+		iconifyIcon: "material-symbols:screenshot-monitor-outline",
+		description: "Pin the current screenshot",
+		function: async () => {
+			appState.clearSearchTerm()
+			new WebviewWindow(`main:pinned-screenshot-${uuidv4()}`, {
+				url: "/extension/pin-screenshot",
+				title: "Pinned Screenshot",
+				hiddenTitle: true,
+				titleBarStyle: "transparent",
+				decorations: false
+			})
+		}
+	},
 	{
 		name: "Toggle Hide On Blur",
 		iconifyIcon: "ri:toggle-line",
diff --git a/apps/desktop/src/routes/extension/pin-screenshot/+page.svelte b/apps/desktop/src/routes/extension/pin-screenshot/+page.svelte
new file mode 100644
index 0000000..987fc78
--- /dev/null
+++ b/apps/desktop/src/routes/extension/pin-screenshot/+page.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { Button } from "@kksh/svelte5"
+	import { Layouts } from "@kksh/ui"
+	import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow"
+	import { CircleX } from "lucide-svelte"
+	import { onMount } from "svelte"
+	import * as clipboard from "tauri-plugin-clipboard-api"
+
+	let image: string | null = null
+	const appWin = getCurrentWebviewWindow()
+
+	onMount(() => {
+		clipboard.readImageBase64().then((b64) => {
+			image = b64
+		})
+	})
+</script>
+
+<Button size="icon" variant="ghost" class="fixed left-2 top-2" onclick={() => appWin.close()}
+	><CircleX /></Button
+>
+<main class="h-screen w-screen overflow-hidden z-50" data-tauri-drag-region>
+	{#if image}
+		<img
+			src={`data:image/png;base64,${image}`}
+			alt="screenshot"
+			class="h-full w-full object-contain pointer-events-none"
+		/>
+	{:else}
+		<Layouts.Center>
+			<p class="text-2xl font-bold">No image found in clipboard</p>
+		</Layouts.Center>
+	{/if}
+</main>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 31977e7..0058baf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -168,6 +168,9 @@ importers:
       sveltekit-superforms:
         specifier: ^2.20.0
         version: 2.20.0(@sveltejs/kit@2.7.4(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.9)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0)))(svelte@5.1.9)(vite@5.4.10(@types/node@22.8.7)(terser@5.36.0)))(@types/json-schema@7.0.15)(svelte@5.1.9)(typescript@5.6.3)
+      tauri-plugin-clipboard-api:
+        specifier: ^2.1.11
+        version: 2.1.11(typescript@5.6.3)
       uuid:
         specifier: ^11.0.2
         version: 11.0.2