From 43f46b545f3fa9ab0959ca4e32ddef9fb461cb89 Mon Sep 17 00:00:00 2001
From: Vladimir Poluliashenko <vladopol@gmail.com>
Date: Mon, 8 Jun 2026 12:21:04 +0100
Subject: [PATCH 1/8] feat(Viewer): add zoom and pan to image viewer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Install panzoom library (9.4.4, 6 kB) and apply it to the image
viewer wrapper in ViewerHandlerImages.vue:

- Scroll wheel to zoom in/out (1× – 8×)
- Drag to pan when zoomed in
- Double-click to zoom in 3× at cursor, double-click again to reset
- Auto-center image when zoom returns to 1×
- Pan blocked at minimum zoom to prevent accidental shifts
- Cursor changes: zoom-in at 1×, grab/grabbing when zoomed

Fixes #1535

Signed-off-by: Vladimir Poluliashenko <vladopol@gmail.com>
Assisted-by: ClaudeCode:claude-sonnet-4-6
---
 package-lock.json                             |  72 +++++++++
 package.json                                  |   1 +
 .../renderer/Viewer/ViewerHandlerImages.vue   | 137 ++++++++++++++++--
 3 files changed, 200 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f5156c24b..6795fbd05 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "electron-squirrel-startup": "^1.0.1",
         "howler": "^2.2.4",
         "mri": "^1.2.0",
+        "panzoom": "^9.4.4",
         "pinia": "^3.0.4",
         "semver": "^7.7.4",
         "unzip-crx-3": "^0.2.0",
@@ -5889,6 +5890,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/amator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/amator/-/amator-1.1.0.tgz",
+      "integrity": "sha512-V5+aH8pe+Z3u/UG3L3pG3BaFQGXAyXHVQDroRwjPHdh08bcUEchAVsU1MCuJSCaU5o60wTK6KaE6te5memzgYw==",
+      "license": "MIT",
+      "dependencies": {
+        "bezier-easing": "^2.0.3"
+      }
+    },
     "node_modules/ansi-escapes": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-5.0.0.tgz",
@@ -6218,6 +6228,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/bezier-easing": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
+      "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==",
+      "license": "MIT"
+    },
     "node_modules/big.js": {
       "version": "5.2.2",
       "dev": true,
@@ -13640,6 +13656,12 @@
       "integrity": "sha512-yFehXNWRs4cM0+dz7QxCd06hTbWbSkV0ISsqBfkntU6TOY4Qm3Q88fRRLOddkGh2Qq6dZvnKVAahfhjcUvLnyA==",
       "license": "MIT"
     },
+    "node_modules/ngraph.events": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/ngraph.events/-/ngraph.events-1.4.0.tgz",
+      "integrity": "sha512-NeDGI4DSyjBNBRtA86222JoYietsmCXbs8CEB0dZ51Xeh4lhVl1y3wpWLumczvnha8sFQIW4E0vvVWwgmX2mGw==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -14300,6 +14322,17 @@
       "version": "1.0.11",
       "license": "(MIT AND Zlib)"
     },
+    "node_modules/panzoom": {
+      "version": "9.4.4",
+      "resolved": "https://registry.npmjs.org/panzoom/-/panzoom-9.4.4.tgz",
+      "integrity": "sha512-r1KfkNZvsBw59IPq7Yy+GWZnZE1YCG/t7aG6caSkij/TBqdxTzmxNTm/lHf3h6qlVMFisIGIO+lgS2Ym23PIoA==",
+      "license": "MIT",
+      "dependencies": {
+        "amator": "^1.1.0",
+        "ngraph.events": "^1.2.2",
+        "wheel": "^1.0.0"
+      }
+    },
     "node_modules/param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -18800,6 +18833,12 @@
         "webidl-conversions": "^3.0.0"
       }
     },
+    "node_modules/wheel": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wheel/-/wheel-1.0.0.tgz",
+      "integrity": "sha512-XiCMHibOiqalCQ+BaNSwRoZ9FDTAvOsXxGHXChBugewDj7HC8VBIER71dEOiRH1fSdLbRCQzngKTSiZ06ZQzeA==",
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "dev": true,
@@ -22979,6 +23018,14 @@
       "integrity": "sha512-d9dYqZTS90WLiU0I5c6DHj/HcKkF8ZyGN3G5x8wSbslulz70KOxaqCT0hQCo9KOyhVqzqGojvNdJXoTumZOtcw==",
       "dev": true
     },
+    "amator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/amator/-/amator-1.1.0.tgz",
+      "integrity": "sha512-V5+aH8pe+Z3u/UG3L3pG3BaFQGXAyXHVQDroRwjPHdh08bcUEchAVsU1MCuJSCaU5o60wTK6KaE6te5memzgYw==",
+      "requires": {
+        "bezier-easing": "^2.0.3"
+      }
+    },
     "ansi-escapes": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-5.0.0.tgz",
@@ -23199,6 +23246,11 @@
       "version": "0.6.1",
       "dev": true
     },
+    "bezier-easing": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
+      "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig=="
+    },
     "big.js": {
       "version": "5.2.2",
       "dev": true
@@ -28224,6 +28276,11 @@
       "resolved": "https://registry.npmjs.org/nested-property/-/nested-property-4.0.0.tgz",
       "integrity": "sha512-yFehXNWRs4cM0+dz7QxCd06hTbWbSkV0ISsqBfkntU6TOY4Qm3Q88fRRLOddkGh2Qq6dZvnKVAahfhjcUvLnyA=="
     },
+    "ngraph.events": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/ngraph.events/-/ngraph.events-1.4.0.tgz",
+      "integrity": "sha512-NeDGI4DSyjBNBRtA86222JoYietsmCXbs8CEB0dZ51Xeh4lhVl1y3wpWLumczvnha8sFQIW4E0vvVWwgmX2mGw=="
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -28652,6 +28709,16 @@
     "pako": {
       "version": "1.0.11"
     },
+    "panzoom": {
+      "version": "9.4.4",
+      "resolved": "https://registry.npmjs.org/panzoom/-/panzoom-9.4.4.tgz",
+      "integrity": "sha512-r1KfkNZvsBw59IPq7Yy+GWZnZE1YCG/t7aG6caSkij/TBqdxTzmxNTm/lHf3h6qlVMFisIGIO+lgS2Ym23PIoA==",
+      "requires": {
+        "amator": "^1.1.0",
+        "ngraph.events": "^1.2.2",
+        "wheel": "^1.0.0"
+      }
+    },
     "param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -31684,6 +31751,11 @@
         "webidl-conversions": "^3.0.0"
       }
     },
+    "wheel": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wheel/-/wheel-1.0.0.tgz",
+      "integrity": "sha512-XiCMHibOiqalCQ+BaNSwRoZ9FDTAvOsXxGHXChBugewDj7HC8VBIER71dEOiRH1fSdLbRCQzngKTSiZ06ZQzeA=="
+    },
     "which": {
       "version": "2.0.2",
       "dev": true,
diff --git a/package.json b/package.json
index cf05ab02f..376c0729a 100644
--- a/package.json
+++ b/package.json
@@ -69,6 +69,7 @@
     "electron-squirrel-startup": "^1.0.1",
     "howler": "^2.2.4",
     "mri": "^1.2.0",
+    "panzoom": "^9.4.4",
     "pinia": "^3.0.4",
     "semver": "^7.7.4",
     "unzip-crx-3": "^0.2.0",
diff --git a/src/talk/renderer/Viewer/ViewerHandlerImages.vue b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
index 2f3762d58..429221cf0 100644
--- a/src/talk/renderer/Viewer/ViewerHandlerImages.vue
+++ b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
@@ -4,7 +4,8 @@
 -->
 
 <script setup>
-import { computed } from 'vue'
+import panzoom from 'panzoom'
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
 import ViewerHandlerMedia from './ViewerHandlerMedia.vue'
 import { generateFilePreviewUrl } from './viewer.utils.ts'
 
@@ -14,19 +15,135 @@ const props = defineProps({
 		required: true,
 	},
 })
+const ZOOM_MIN = 1
+const ZOOM_MAX = 8
+const ZOOM_FACTOR = 3
 
 const src = computed(() => generateFilePreviewUrl(props.file.fileid, props.file.etag))
+
+const wrapperRef = ref(null)
+const instance = ref(null)
+const scale = ref(1)
+const grabbing = ref(false)
+
+const cursorClass = computed(() => {
+	if (scale.value === 1) {
+		return 'viewer-image--zoom-in'
+	}
+	return grabbing.value ? 'viewer-image--grabbing' : 'viewer-image--grab'
+})
+
+function initPanzoom() {
+	if (!wrapperRef.value) {
+		return
+	}
+	instance.value = panzoom(wrapperRef.value, {
+		minZoom: ZOOM_MIN,
+		maxZoom: ZOOM_MAX,
+		bounds: true,
+		boundsPadding: 0.1,
+	})
+	instance.value.on('zoom', (pz) => {
+		const transform = pz.getTransform()
+		scale.value = transform.scale
+		if (transform.scale <= ZOOM_MIN) {
+			pz.smoothMoveTo(0, 0)
+		}
+	})
+	instance.value.on('panstart', (pz) => {
+		if (pz.getTransform().scale <= ZOOM_MIN) {
+			return
+		}
+		grabbing.value = true
+	})
+	instance.value.on('panend', () => {
+		grabbing.value = false
+	})
+}
+
+function disposePanzoom() {
+	instance.value?.dispose()
+	instance.value = null
+	scale.value = 1
+	grabbing.value = false
+}
+
+function onImageLoad(handleLoadEnd) {
+	handleLoadEnd(false)
+	initPanzoom()
+}
+
+function onImageError(handleLoadEnd) {
+	handleLoadEnd(true)
+	disposePanzoom()
+}
+
+function onDoubleClick(event) {
+	if (!instance.value) {
+		return
+	}
+	event.preventDefault()
+	event.stopPropagation()
+	const rect = event.currentTarget.getBoundingClientRect()
+	const x = event.clientX - rect.left
+	const y = event.clientY - rect.top
+	if (scale.value === 1) {
+		instance.value.smoothZoom(x, y, ZOOM_FACTOR)
+	} else {
+		instance.value.smoothZoomAbs(x, y, 0)
+	}
+}
+
+watch(src, disposePanzoom)
+
+onBeforeUnmount(disposePanzoom)
 </script>
 
 <template>
-	<ViewerHandlerMedia v-slot="{ mediaClass, handleLoadEnd }">
-		<img
-			:key="src"
-			class="viewer-image"
-			:class="mediaClass"
-			:src="src"
-			:alt="file.basename"
-			@load="handleLoadEnd(false)"
-			@error="handleLoadEnd(true)">
+	<ViewerHandlerMedia v-slot="{ handleLoadEnd }">
+		<div class="viewer-image-container" @dblclick.capture="onDoubleClick">
+			<div ref="wrapperRef" class="viewer-image-wrapper" :class="cursorClass">
+				<img
+					:key="src"
+					class="viewer-image"
+					:src="src"
+					:alt="file.basename"
+					@load="onImageLoad(handleLoadEnd)"
+					@error="onImageError(handleLoadEnd)">
+			</div>
+		</div>
 	</ViewerHandlerMedia>
 </template>
+
+<style scoped>
+.viewer-image-container {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+
+.viewer-image-wrapper {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.viewer-image {
+	max-width: 100%;
+	max-height: 100%;
+}
+
+.viewer-image--zoom-in {
+	cursor: zoom-in;
+}
+
+.viewer-image--grab {
+	cursor: grab;
+}
+
+.viewer-image--grabbing {
+	cursor: grabbing;
+}
+</style>

From 4753e49028baf7606d96f01c08940db1de1b539d Mon Sep 17 00:00:00 2001
From: Vladimir Poluliashenko <vladopol@gmail.com>
Date: Wed, 17 Jun 2026 19:47:30 +0100
Subject: [PATCH 2/8] fix(Viewer): add JSDoc param types to image viewer
 functions

Signed-off-by: Vladimir Poluliashenko <vladopol@gmail.com>
Assisted-by: ClaudeCode:claude-sonnet-4-6
---
 src/talk/renderer/Viewer/ViewerHandlerImages.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/talk/renderer/Viewer/ViewerHandlerImages.vue b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
index 429221cf0..e836c1d89 100644
--- a/src/talk/renderer/Viewer/ViewerHandlerImages.vue
+++ b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
@@ -68,16 +68,25 @@ function disposePanzoom() {
 	grabbing.value = false
 }
 
+/**
+ * @param {Function} handleLoadEnd - Callback to signal load completion
+ */
 function onImageLoad(handleLoadEnd) {
 	handleLoadEnd(false)
 	initPanzoom()
 }
 
+/**
+ * @param {Function} handleLoadEnd - Callback to signal load error
+ */
 function onImageError(handleLoadEnd) {
 	handleLoadEnd(true)
 	disposePanzoom()
 }
 
+/**
+ * @param {MouseEvent} event - The double-click event
+ */
 function onDoubleClick(event) {
 	if (!instance.value) {
 		return

From 28ce6faae9224dfa4eb88af504e9086d0bdaa7f6 Mon Sep 17 00:00:00 2001
From: Vladimir Poluliashenko <vladopol@gmail.com>
Date: Wed, 17 Jun 2026 20:20:23 +0100
Subject: [PATCH 3/8] fix(Viewer): block pan at minimum zoom; apply cursor
 class to image element

Signed-off-by: Vladimir Poluliashenko <vladopol@gmail.com>
Assisted-by: ClaudeCode:claude-sonnet-4-6
---
 src/talk/renderer/Viewer/ViewerHandlerImages.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/talk/renderer/Viewer/ViewerHandlerImages.vue b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
index e836c1d89..95e385dd1 100644
--- a/src/talk/renderer/Viewer/ViewerHandlerImages.vue
+++ b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
@@ -41,7 +41,10 @@ function initPanzoom() {
 		minZoom: ZOOM_MIN,
 		maxZoom: ZOOM_MAX,
 		bounds: true,
-		boundsPadding: 0.1,
+		boundsPadding: 0,
+		beforeMouseDown() {
+			return scale.value <= ZOOM_MIN
+		},
 	})
 	instance.value.on('zoom', (pz) => {
 		const transform = pz.getTransform()
@@ -111,10 +114,11 @@ onBeforeUnmount(disposePanzoom)
 <template>
 	<ViewerHandlerMedia v-slot="{ handleLoadEnd }">
 		<div class="viewer-image-container" @dblclick.capture="onDoubleClick">
-			<div ref="wrapperRef" class="viewer-image-wrapper" :class="cursorClass">
+			<div ref="wrapperRef" class="viewer-image-wrapper">
 				<img
 					:key="src"
 					class="viewer-image"
+					:class="cursorClass"
 					:src="src"
 					:alt="file.basename"
 					@load="onImageLoad(handleLoadEnd)"

From 6d3ea60f0670b180552d8e2c63aa87f0cedd8c95 Mon Sep 17 00:00:00 2001
From: Vladimir Poluliashenko <vladopol@gmail.com>
Date: Wed, 17 Jun 2026 20:23:42 +0100
Subject: [PATCH 4/8] refactor(Viewer): apply review nitpicks for image viewer

- Use useTemplateRef API (Vue 3.5+) for panzoom wrapper ref
- Use plain variable for panzoom instance (no reactive state needed)
- Remove unnecessary null guard in initPanzoom (wrapperRef is always
  defined when called from onImageLoad)
- Add comment explaining dblclick.capture usage

Signed-off-by: Vladimir Poluliashenko <vladopol@gmail.com>
Assisted-by: ClaudeCode:claude-sonnet-4-6
---
 .../renderer/Viewer/ViewerHandlerImages.vue   | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/talk/renderer/Viewer/ViewerHandlerImages.vue b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
index 95e385dd1..ce71ac55e 100644
--- a/src/talk/renderer/Viewer/ViewerHandlerImages.vue
+++ b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
@@ -5,7 +5,7 @@
 
 <script setup>
 import panzoom from 'panzoom'
-import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'
 import ViewerHandlerMedia from './ViewerHandlerMedia.vue'
 import { generateFilePreviewUrl } from './viewer.utils.ts'
 
@@ -21,8 +21,8 @@ const ZOOM_FACTOR = 3
 
 const src = computed(() => generateFilePreviewUrl(props.file.fileid, props.file.etag))
 
-const wrapperRef = ref(null)
-const instance = ref(null)
+const panzoomWrapperRef = useTemplateRef('panzoomWrapper')
+let instance = null
 const scale = ref(1)
 const grabbing = ref(false)
 
@@ -34,10 +34,7 @@ const cursorClass = computed(() => {
 })
 
 function initPanzoom() {
-	if (!wrapperRef.value) {
-		return
-	}
-	instance.value = panzoom(wrapperRef.value, {
+	instance = panzoom(panzoomWrapperRef.value, {
 		minZoom: ZOOM_MIN,
 		maxZoom: ZOOM_MAX,
 		bounds: true,
@@ -46,27 +43,27 @@ function initPanzoom() {
 			return scale.value <= ZOOM_MIN
 		},
 	})
-	instance.value.on('zoom', (pz) => {
+	instance.on('zoom', (pz) => {
 		const transform = pz.getTransform()
 		scale.value = transform.scale
 		if (transform.scale <= ZOOM_MIN) {
 			pz.smoothMoveTo(0, 0)
 		}
 	})
-	instance.value.on('panstart', (pz) => {
+	instance.on('panstart', (pz) => {
 		if (pz.getTransform().scale <= ZOOM_MIN) {
 			return
 		}
 		grabbing.value = true
 	})
-	instance.value.on('panend', () => {
+	instance.on('panend', () => {
 		grabbing.value = false
 	})
 }
 
 function disposePanzoom() {
-	instance.value?.dispose()
-	instance.value = null
+	instance?.dispose()
+	instance = null
 	scale.value = 1
 	grabbing.value = false
 }
@@ -91,7 +88,7 @@ function onImageError(handleLoadEnd) {
  * @param {MouseEvent} event - The double-click event
  */
 function onDoubleClick(event) {
-	if (!instance.value) {
+	if (!instance) {
 		return
 	}
 	event.preventDefault()
@@ -100,9 +97,9 @@ function onDoubleClick(event) {
 	const x = event.clientX - rect.left
 	const y = event.clientY - rect.top
 	if (scale.value === 1) {
-		instance.value.smoothZoom(x, y, ZOOM_FACTOR)
+		instance.smoothZoom(x, y, ZOOM_FACTOR)
 	} else {
-		instance.value.smoothZoomAbs(x, y, 0)
+		instance.smoothZoomAbs(x, y, 0)
 	}
 }
 
@@ -113,8 +110,9 @@ onBeforeUnmount(disposePanzoom)
 
 <template>
 	<ViewerHandlerMedia v-slot="{ handleLoadEnd }">
+		<!-- capture phase intercepts dblclick before panzoom's own handler; stopPropagation prevents the parent viewer from closing -->
 		<div class="viewer-image-container" @dblclick.capture="onDoubleClick">
-			<div ref="wrapperRef" class="viewer-image-wrapper">
+			<div ref="panzoomWrapper" class="viewer-image-wrapper">
 				<img
 					:key="src"
 					class="viewer-image"

From d87010957d1473b9124a5d381c9a905628088f81 Mon Sep 17 00:00:00 2001
From: Vladimir Poluliashenko <vladopol@gmail.com>
Date: Thu, 18 Jun 2026 14:06:16 +0100
Subject: [PATCH 5/8] fix(Viewer): clamp pan position to viewport bounds when
 zoomed

Replace panzoom's built-in bounds option (ineffective when the panzoom
element fills its parent 100%) with manual clamping via
getBoundingClientRect. clampToBounds() is called on panend and after
each zoom to smoothly return the image within the viewport if needed.

Signed-off-by: Vladimir Poluliashenko <vladopol@gmail.com>
Assisted-by: ClaudeCode:claude-sonnet-4-6
---
 .../renderer/Viewer/ViewerHandlerImages.vue   | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/talk/renderer/Viewer/ViewerHandlerImages.vue b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
index ce71ac55e..70e0dfdee 100644
--- a/src/talk/renderer/Viewer/ViewerHandlerImages.vue
+++ b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
@@ -33,12 +33,29 @@ const cursorClass = computed(() => {
 	return grabbing.value ? 'viewer-image--grabbing' : 'viewer-image--grab'
 })
 
+function clampToBounds() {
+	if (!instance) return
+	const el = panzoomWrapperRef.value
+	const rect = el.getBoundingClientRect()
+	const parentRect = el.parentElement.getBoundingClientRect()
+	const { x, y } = instance.getTransform()
+
+	let newX = x
+	let newY = y
+	if (rect.left > parentRect.left) newX -= rect.left - parentRect.left
+	if (rect.right < parentRect.right) newX += parentRect.right - rect.right
+	if (rect.top > parentRect.top) newY -= rect.top - parentRect.top
+	if (rect.bottom < parentRect.bottom) newY += parentRect.bottom - rect.bottom
+
+	if (newX !== x || newY !== y) {
+		instance.smoothMoveTo(newX, newY)
+	}
+}
+
 function initPanzoom() {
 	instance = panzoom(panzoomWrapperRef.value, {
 		minZoom: ZOOM_MIN,
 		maxZoom: ZOOM_MAX,
-		bounds: true,
-		boundsPadding: 0,
 		beforeMouseDown() {
 			return scale.value <= ZOOM_MIN
 		},
@@ -48,6 +65,8 @@ function initPanzoom() {
 		scale.value = transform.scale
 		if (transform.scale <= ZOOM_MIN) {
 			pz.smoothMoveTo(0, 0)
+		} else {
+			clampToBounds()
 		}
 	})
 	instance.on('panstart', (pz) => {
@@ -58,6 +77,7 @@ function initPanzoom() {
 	})
 	instance.on('panend', () => {
 		grabbing.value = false
+		clampToBounds()
 	})
 }
 

From 4d4a394362ef3c5ff833a5eacc559c8b76408068 Mon Sep 17 00:00:00 2001
From: Vladimir Poluliashenko <vladopol@gmail.com>
Date: Thu, 18 Jun 2026 16:23:39 +0100
Subject: [PATCH 6/8] fix(Viewer): enforce pan bounds in real time during drag

- Clamp on every pan event (not just panend) for immediate stopping
- Disable smoothScroll (inertia) so the image halts on release without
  overshooting the boundary

Signed-off-by: Vladimir Poluliashenko <vladopol@gmail.com>
Assisted-by: ClaudeCode:claude-sonnet-4-6
---
 src/talk/renderer/Viewer/ViewerHandlerImages.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/talk/renderer/Viewer/ViewerHandlerImages.vue b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
index 70e0dfdee..c05444b91 100644
--- a/src/talk/renderer/Viewer/ViewerHandlerImages.vue
+++ b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
@@ -48,7 +48,7 @@ function clampToBounds() {
 	if (rect.bottom < parentRect.bottom) newY += parentRect.bottom - rect.bottom
 
 	if (newX !== x || newY !== y) {
-		instance.smoothMoveTo(newX, newY)
+		instance.moveTo(newX, newY)
 	}
 }
 
@@ -56,6 +56,9 @@ function initPanzoom() {
 	instance = panzoom(panzoomWrapperRef.value, {
 		minZoom: ZOOM_MIN,
 		maxZoom: ZOOM_MAX,
+		// Disable inertia so the image stops immediately on release,
+		// allowing clampToBounds to take effect without being overridden
+		smoothScroll: false,
 		beforeMouseDown() {
 			return scale.value <= ZOOM_MIN
 		},
@@ -75,6 +78,9 @@ function initPanzoom() {
 		}
 		grabbing.value = true
 	})
+	instance.on('pan', () => {
+		clampToBounds()
+	})
 	instance.on('panend', () => {
 		grabbing.value = false
 		clampToBounds()

From 88db0c413f6a98338a8d99ac04ff19b35994da71 Mon Sep 17 00:00:00 2001
From: Vladimir Poluliashenko <vladopol@gmail.com>
Date: Mon, 22 Jun 2026 10:04:43 +0100
Subject: [PATCH 7/8] fix(Viewer): restore image to original scale on
 double-click zoom-out

smoothZoomAbs(x, y, 0) scaled the image to zero, making it disappear.
Using ZOOM_MIN (1) correctly returns the image to its original size.

Signed-off-by: Vladimir Poluliashenko <vladopol@gmail.com>
Assisted-by: ClaudeCode:claude-sonnet-4-6
---
 src/talk/renderer/Viewer/ViewerHandlerImages.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/talk/renderer/Viewer/ViewerHandlerImages.vue b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
index c05444b91..86a7a3c37 100644
--- a/src/talk/renderer/Viewer/ViewerHandlerImages.vue
+++ b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
@@ -125,7 +125,7 @@ function onDoubleClick(event) {
 	if (scale.value === 1) {
 		instance.smoothZoom(x, y, ZOOM_FACTOR)
 	} else {
-		instance.smoothZoomAbs(x, y, 0)
+		instance.smoothZoomAbs(x, y, ZOOM_MIN)
 	}
 }
 

From 62291da7744ce16c87572c8113967b85f2c27b50 Mon Sep 17 00:00:00 2001
From: Vladimir Poluliashenko <vladopol@gmail.com>
Date: Mon, 29 Jun 2026 14:40:05 +0300
Subject: [PATCH 8/8] feat(Viewer): add rotate left/right to image viewer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add rotate left (−90°) and rotate right (+90°) buttons to the image
viewer actions menu alongside the existing "Open in web browser" action.

Rotation state and controls are fully self-contained in ViewerHandlerImages:
- rotateLeft/rotateRight adjust rotation in 90° steps using unbounded angle
  increments so the CSS transition always animates in the correct direction
- Rotation resets to 0 when switching images
- ViewerHandlerImages exposes an actions array; ViewerApp renders it
  generically via component :is — no image-specific code in ViewerApp

Fixes #1757

Signed-off-by: Vladimir Poluliashenko <vladopol@gmail.com>
Assisted-by: ClaudeCode:claude-sonnet-4-6
---
 src/talk/renderer/Viewer/ViewerApp.vue        | 12 +++++++++
 .../renderer/Viewer/ViewerHandlerImages.vue   | 27 ++++++++++++++++++-
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/talk/renderer/Viewer/ViewerApp.vue b/src/talk/renderer/Viewer/ViewerApp.vue
index 33f16e78a..c223fec79 100644
--- a/src/talk/renderer/Viewer/ViewerApp.vue
+++ b/src/talk/renderer/Viewer/ViewerApp.vue
@@ -7,6 +7,7 @@
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { computed, ref } from 'vue'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionLink from '@nextcloud/vue/components/NcActionLink'
 import NcModal from '@nextcloud/vue/components/NcModal'
 import IconOpenInNew from 'vue-material-design-icons/OpenInNew.vue'
@@ -19,6 +20,7 @@ function noop() {}
 const isOpen = ref(false)
 const onClose = ref(noop)
 const file = ref(null)
+const viewerRef = ref(null)
 
 const viewComponent = computed(() => file.value && window.OCA.Viewer.availableHandlers.find((handler) => handler.mimes.includes(file.value.mime))?.component)
 
@@ -67,9 +69,19 @@ defineExpose({
 		<component
 			:is="viewComponent"
 			v-if="viewComponent"
+			ref="viewerRef"
 			:file="file" />
 
 		<template #actions>
+			<NcActionButton
+				v-for="action in (viewerRef?.actions ?? [])"
+				:key="action.key"
+				@click="action.onClick()">
+				<template #icon>
+					<component :is="action.icon" :size="20" />
+				</template>
+				{{ action.label }}
+			</NcActionButton>
 			<NcActionLink :href="link">
 				<template #icon>
 					<IconOpenInNew :size="20" />
diff --git a/src/talk/renderer/Viewer/ViewerHandlerImages.vue b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
index 86a7a3c37..bbba9571d 100644
--- a/src/talk/renderer/Viewer/ViewerHandlerImages.vue
+++ b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
@@ -6,6 +6,9 @@
 <script setup>
 import panzoom from 'panzoom'
 import { computed, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'
+import { translate as t } from '@nextcloud/l10n'
+import IconRotateLeft from 'vue-material-design-icons/RotateLeft.vue'
+import IconRotateRight from 'vue-material-design-icons/RotateRight.vue'
 import ViewerHandlerMedia from './ViewerHandlerMedia.vue'
 import { generateFilePreviewUrl } from './viewer.utils.ts'
 
@@ -18,6 +21,7 @@ const props = defineProps({
 const ZOOM_MIN = 1
 const ZOOM_MAX = 8
 const ZOOM_FACTOR = 3
+const ROTATION_STEP = 90
 
 const src = computed(() => generateFilePreviewUrl(props.file.fileid, props.file.etag))
 
@@ -25,6 +29,7 @@ const panzoomWrapperRef = useTemplateRef('panzoomWrapper')
 let instance = null
 const scale = ref(1)
 const grabbing = ref(false)
+const rotation = ref(0)
 
 const cursorClass = computed(() => {
 	if (scale.value === 1) {
@@ -129,7 +134,25 @@ function onDoubleClick(event) {
 	}
 }
 
-watch(src, disposePanzoom)
+function rotateLeft() {
+	rotation.value -= ROTATION_STEP
+}
+
+function rotateRight() {
+	rotation.value += ROTATION_STEP
+}
+
+const actions = computed(() => [
+	{ key: 'rotate-left', label: t('talk_desktop', 'Rotate left'), icon: IconRotateLeft, onClick: rotateLeft },
+	{ key: 'rotate-right', label: t('talk_desktop', 'Rotate right'), icon: IconRotateRight, onClick: rotateRight },
+])
+
+defineExpose({ actions })
+
+watch(src, () => {
+	disposePanzoom()
+	rotation.value = 0
+})
 
 onBeforeUnmount(disposePanzoom)
 </script>
@@ -143,6 +166,7 @@ onBeforeUnmount(disposePanzoom)
 					:key="src"
 					class="viewer-image"
 					:class="cursorClass"
+					:style="{ transform: `rotate(${rotation}deg)` }"
 					:src="src"
 					:alt="file.basename"
 					@load="onImageLoad(handleLoadEnd)"
@@ -170,6 +194,7 @@ onBeforeUnmount(disposePanzoom)
 .viewer-image {
 	max-width: 100%;
 	max-height: 100%;
+	transition: transform 0.3s ease;
 }
 
 .viewer-image--zoom-in {