feat(desktop): add pan, pinch, and zoom to the image file pane

apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/FilePane/registry/views/ImageView/ImageView.tsx

@@ -2,11 +2,21 @@ import { useEffect, useState } from "react";
 import { getBaseName } from "renderer/lib/pathBasename";
 import { getImageMimeType } from "shared/file-types";
 import type { ViewProps } from "../../types";
+import { usePanZoom } from "./hooks/usePanZoom";
 
 export function ImageView({ document, filePath }: ViewProps) {
 	const [objectUrl, setObjectUrl] = useState<string | null>(null);
+	const {
+		containerRef,
+		transform,
+		isDragging,
+		isTransformed,
+		reset,
+		handlers,
+	} = usePanZoom();
 
 	useEffect(() => {
+		reset();
 		if (document.content.kind !== "bytes") {
 			setObjectUrl(null);
 			return;
@@ -17,29 +27,49 @@ export function ImageView({ document, filePath }: ViewProps) {
 		);
 		setObjectUrl(url);
 		return () => URL.revokeObjectURL(url);
-	}, [document.content, filePath]);
-
-	if (!objectUrl) {
-		return null;
-	}
+	}, [document.content, filePath, reset]);
 
 	return (
-		<div className="flex h-full items-center justify-center overflow-auto bg-background p-4">
-			<div
-				className="inline-block max-h-full max-w-full"
-				style={{
-					backgroundImage:
-						"conic-gradient(color-mix(in srgb, var(--color-foreground) 10%, transparent) 25%, transparent 0 50%, color-mix(in srgb, var(--color-foreground) 10%, transparent) 0 75%, transparent 0)",
-					backgroundSize: "16px 16px",
-				}}
-			>
-				<img
-					src={objectUrl}
-					alt={getBaseName(filePath)}
-					className="block max-h-full max-w-full object-contain"
-					draggable={false}
-				/>
-			</div>
+		<div
+			ref={containerRef}
+			role="application"
+			aria-label={`Image preview of ${getBaseName(filePath)}. Zoom with plus and minus, pan with arrow keys, press 0 to reset.`}
+			// biome-ignore lint/a11y/noNoninteractiveTabindex: focus is required for the keyboard pan/zoom handlers
+			tabIndex={0}
+			className={`relative flex h-full touch-none items-center justify-center overflow-hidden bg-background p-4 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ${
+				isDragging ? "cursor-grabbing" : "cursor-grab"
+			}`}
+			{...handlers}
+		>
+			{objectUrl && (
+				<div
+					className="inline-block max-h-full max-w-full"
+					style={{
+						transform: `translate(${transform.x}px, ${transform.y}px) scale(${transform.scale})`,
+						backgroundImage:
+							"conic-gradient(color-mix(in srgb, var(--color-foreground) 10%, transparent) 25%, transparent 0 50%, color-mix(in srgb, var(--color-foreground) 10%, transparent) 0 75%, transparent 0)",
+						backgroundSize: "16px 16px",
+					}}
+				>
+					<img
+						src={objectUrl}
+						alt={getBaseName(filePath)}
+						className="block max-h-full max-w-full select-none object-contain"
+						draggable={false}
+					/>
+				</div>
+			)}
+			{isTransformed && (
+				<button
+					type="button"
+					className="absolute right-2 bottom-2 rounded-md border border-border bg-background/80 px-2 py-0.5 font-mono text-muted-foreground text-xs backdrop-blur hover:text-foreground"
+					onPointerDown={(event) => event.stopPropagation()}
+					onClick={reset}
+					title="Reset zoom"
+				>
+					{Math.round(transform.scale * 100)}%
+				</button>
+			)}
 		</div>
 	);
 }

apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/FilePane/registry/views/ImageView/hooks/usePanZoom/index.ts

@@ -0,0 +1 @@
+export { usePanZoom } from "./usePanZoom";

apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/FilePane/registry/views/ImageView/hooks/usePanZoom/usePanZoom.ts

@@ -0,0 +1,158 @@
+import {
+	type KeyboardEvent as ReactKeyboardEvent,
+	type PointerEvent as ReactPointerEvent,
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+} from "react";
+
+const MIN_SCALE = 0.25;
+const MAX_SCALE = 16;
+const DEFAULT_TRANSFORM: Transform = { scale: 1, x: 0, y: 0 };
+
+export interface Transform {
+	scale: number;
+	x: number;
+	y: number;
+}
+
+function zoomAtPoint(
+	prev: Transform,
+	nextScale: number,
+	pointX: number,
+	pointY: number,
+): Transform {
+	const scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, nextScale));
+	const ratio = scale / prev.scale;
+	return {
+		scale,
+		x: pointX - (pointX - prev.x) * ratio,
+		y: pointY - (pointY - prev.y) * ratio,
+	};
+}
+
+/**
+ * Pan/pinch/zoom gestures for a container element. The container must be
+ * mounted for the lifetime of the hook so the wheel listener attaches.
+ */
+export function usePanZoom() {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const [transform, setTransform] = useState<Transform>(DEFAULT_TRANSFORM);
+	const [isDragging, setIsDragging] = useState(false);
+	const dragRef = useRef<{
+		pointerId: number;
+		startX: number;
+		startY: number;
+		originX: number;
+		originY: number;
+	} | null>(null);
+
+	const reset = useCallback(() => setTransform(DEFAULT_TRANSFORM), []);
+
+	// Native non-passive listener: React's onWheel can't preventDefault,
+	// and trackpad pinch arrives as a wheel event with ctrlKey set.
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) {
+			return;
+		}
+		const handleWheel = (event: WheelEvent) => {
+			event.preventDefault();
+			if (event.ctrlKey || event.metaKey) {
+				const rect = container.getBoundingClientRect();
+				const pointX = event.clientX - rect.left - rect.width / 2;
+				const pointY = event.clientY - rect.top - rect.height / 2;
+				setTransform((prev) =>
+					zoomAtPoint(
+						prev,
+						prev.scale * Math.exp(-event.deltaY * 0.01),
+						pointX,
+						pointY,
+					),
+				);
+			} else {
+				setTransform((prev) => ({
+					...prev,
+					x: prev.x - event.deltaX,
+					y: prev.y - event.deltaY,
+				}));
+			}
+		};
+		container.addEventListener("wheel", handleWheel, { passive: false });
+		return () => container.removeEventListener("wheel", handleWheel);
+	}, []);
+
+	const endDrag = (event: ReactPointerEvent<HTMLDivElement>) => {
+		if (dragRef.current?.pointerId !== event.pointerId) {
+			return;
+		}
+		dragRef.current = null;
+		setIsDragging(false);
+	};
+
+	const handlers = {
+		onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => {
+			if (event.button !== 0 || dragRef.current) {
+				return;
+			}
+			event.currentTarget.setPointerCapture(event.pointerId);
+			dragRef.current = {
+				pointerId: event.pointerId,
+				startX: event.clientX,
+				startY: event.clientY,
+				originX: transform.x,
+				originY: transform.y,
+			};
+			setIsDragging(true);
+		},
+		onPointerMove: (event: ReactPointerEvent<HTMLDivElement>) => {
+			const drag = dragRef.current;
+			if (!drag || drag.pointerId !== event.pointerId) {
+				return;
+			}
+			setTransform((prev) => ({
+				...prev,
+				x: drag.originX + event.clientX - drag.startX,
+				y: drag.originY + event.clientY - drag.startY,
+			}));
+		},
+		onPointerUp: endDrag,
+		onPointerCancel: endDrag,
+		onDoubleClick: reset,
+		onKeyDown: (event: ReactKeyboardEvent<HTMLDivElement>) => {
+			const KEYBOARD_PAN_STEP = 50;
+			const actions: Record<string, () => Transform> = {
+				"+": () => zoomAtPoint(transform, transform.scale * 1.25, 0, 0),
+				"=": () => zoomAtPoint(transform, transform.scale * 1.25, 0, 0),
+				"-": () => zoomAtPoint(transform, transform.scale / 1.25, 0, 0),
+				"0": () => DEFAULT_TRANSFORM,
+				ArrowLeft: () => ({ ...transform, x: transform.x + KEYBOARD_PAN_STEP }),
+				ArrowRight: () => ({
+					...transform,
+					x: transform.x - KEYBOARD_PAN_STEP,
+				}),
+				ArrowUp: () => ({ ...transform, y: transform.y + KEYBOARD_PAN_STEP }),
+				ArrowDown: () => ({ ...transform, y: transform.y - KEYBOARD_PAN_STEP }),
+			};
+			const action = actions[event.key];
+			if (!action || event.ctrlKey || event.metaKey || event.altKey) {
+				return;
+			}
+			event.preventDefault();
+			setTransform(action());
+		},
+	};
+
+	const isTransformed =
+		transform.scale !== 1 || transform.x !== 0 || transform.y !== 0;
+
+	return {
+		containerRef,
+		transform,
+		isDragging,
+		isTransformed,
+		reset,
+		handlers,
+	};
+}