feat: pin screenshot command nows zoom and scroll

apps/desktop/src-tauri/capabilities/default.json

@@ -23,6 +23,7 @@
 		"core:path:default",
 		"core:event:default",
 		"core:window:default",
+		"core:window:allow-set-size",
 		"core:window:allow-start-dragging",
 		"core:window:allow-set-focus",
 		"core:window:allow-toggle-maximize",

apps/desktop/src/lib/cmds/builtin.ts

@@ -6,6 +6,7 @@ import { WebviewWindow } from "@tauri-apps/api/webviewWindow"
 import { exit } from "@tauri-apps/plugin-process"
 import { goto } from "$app/navigation"
 import { toast } from "svelte-sonner"
+import * as clipboard from "tauri-plugin-clipboard-api"
 import { v4 as uuidv4 } from "uuid"
 
 export const builtinCmds: BuiltinCmd[] = [
@@ -208,13 +209,21 @@ export const builtinCmds: BuiltinCmd[] = [
 		description: "Pin the current screenshot",
 		function: async () => {
 			appState.clearSearchTerm()
-			new WebviewWindow(`main:pinned-screenshot-${uuidv4()}`, {
+			if (!(await clipboard.hasImage())) {
+				toast.error("No screenshot in clipboard")
+				return
+			}
+			const window = new WebviewWindow(`main:pinned-screenshot-${uuidv4()}`, {
 				url: "/extension/pin-screenshot",
 				title: "Pinned Screenshot",
 				hiddenTitle: true,
 				titleBarStyle: "transparent",
-				decorations: false
+				decorations: false,
+				visible: false
 			})
+			setTimeout(() => {
+				window.show()
+			}, 2_000)
 		}
 	},
 	{

apps/desktop/src/routes/extension/pin-screenshot/+page.svelte

@@ -1,30 +1,84 @@
 <script lang="ts">
 	import { Button } from "@kksh/svelte5"
 	import { Layouts } from "@kksh/ui"
+	import { LogicalSize } from "@tauri-apps/api/dpi"
 	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
+	let image = $state<string | null>(null)
 	const appWin = getCurrentWebviewWindow()
+	let originalSize = $state<{ width: number; height: number } | null>(null)
+	let originalScaleFactor = $state<number | null>(null)
+	let scale = $state<number>(1)
+	let currentSize = $derived(
+		originalSize ? { width: originalSize.width * scale, height: originalSize.height * scale } : null
+	)
 
-	onMount(() => {
-		clipboard.readImageBase64().then((b64) => {
-			image = b64
-		})
+	$effect(() => {
+		if (currentSize) {
+			appWin.setSize(new LogicalSize(currentSize.width, currentSize.height))
+		}
+	})
+
+	async function getWindowSize() {
+		const size = await appWin.outerSize()
+		const scaleFactor = originalScaleFactor ?? (await appWin.scaleFactor())
+		const logicalSize = size.toLogical(scaleFactor)
+		return { logicalSize, scaleFactor }
+	}
+
+	onMount(async () => {
+		clipboard
+			.readImageBase64()
+			.then((b64) => {
+				image = b64
+			})
+			.finally(() => {
+				appWin.show()
+			})
+		const { logicalSize, scaleFactor } = await getWindowSize()
+		originalSize = { width: logicalSize.width, height: logicalSize.height }
+		originalScaleFactor = scaleFactor
+	})
+
+	async function onWheel(e: WheelEvent) {
+		scale += (e.deltaY < 0 ? 1 : -1) * 0.05
+	}
+
+	function onGestureChange(e: any) {
+		e.preventDefault()
+		scale = e.scale
+	}
+
+	$effect(() => {
+		document.addEventListener("wheel", onWheel)
+		document.addEventListener("gesturechange", onGestureChange)
+
+		return () => {
+			document.removeEventListener("wheel", onWheel)
+			document.removeEventListener("gesturechange", onGestureChange)
+		}
 	})
 </script>
 
+<svelte:window
+	on:keydown={(e) => {
+		if (e.key === "Escape") {
+			appWin.close()
+		}
+	}}
+/>
 <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>
+<main class="z-50 h-screen w-screen overflow-hidden" 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"
+			class="pointer-events-none h-full w-full object-contain"
 		/>
 	{:else}
 		<Layouts.Center>