feat: add pin screenshot builtin command

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": {

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",

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>