Improve image preview controls

backend/app.py

@@ -572,7 +572,7 @@ async def create_webp(post_id, image_url, phpsessid, page=0, kind="t"):
     if kind == "v":
         image = image.resize((max(image.width // 2, 1), max(image.height // 2, 1)))
     else:
-        image.thumbnail((360, 360))
+        image = image.resize((max(image.width // 3, 1), max(image.height // 3, 1)))
     if image.mode not in ("RGB", "RGBA"):
         image = image.convert("RGB")
     image.save(out, "WEBP", quality=82 if kind == "v" else 72)

frontend/app.js

@@ -5,6 +5,7 @@ const LONG_DIGITS_RE = /\d{6,}/g
 const PAGE_SIZE = 60
 const SEARCH_PAGE_SIZE = 5
 let viewerScale = 1
+let viewerDrag = null
 
 
 $$(".tab").forEach(tab => {
@@ -241,6 +242,8 @@ function closeViewer() {
   $("#viewer").setAttribute("aria-hidden", "true")
   $("#viewer-img").src = ""
   $("#viewer-download").href = ""
+  viewerDrag = null
+  $("#viewer-stage").classList.remove("dragging")
 }
 
 function applyViewerZoom() {
@@ -265,6 +268,33 @@ $("#viewer-stage").addEventListener("wheel", e => {
   viewerScale = Math.min(Math.max(viewerScale + (e.deltaY < 0 ? .15 : -.15), .25), 6)
   applyViewerZoom()
 })
+$("#viewer-stage").addEventListener("pointerdown", e => {
+  if (e.button !== 0) return
+  const stage = $("#viewer-stage")
+  viewerDrag = {
+    x: e.clientX,
+    y: e.clientY,
+    left: stage.scrollLeft,
+    top: stage.scrollTop,
+  }
+  stage.classList.add("dragging")
+  stage.setPointerCapture(e.pointerId)
+})
+$("#viewer-stage").addEventListener("pointermove", e => {
+  if (!viewerDrag) return
+  const stage = $("#viewer-stage")
+  stage.scrollLeft = viewerDrag.left - e.clientX + viewerDrag.x
+  stage.scrollTop = viewerDrag.top - e.clientY + viewerDrag.y
+})
+$("#viewer-stage").addEventListener("pointerup", e => {
+  viewerDrag = null
+  $("#viewer-stage").classList.remove("dragging")
+  $("#viewer-stage").releasePointerCapture(e.pointerId)
+})
+$("#viewer-stage").addEventListener("pointercancel", () => {
+  viewerDrag = null
+  $("#viewer-stage").classList.remove("dragging")
+})
 window.addEventListener("keydown", e => { if (e.key === "Escape") closeViewer() })
 
 function renderPager(id, data, exifOnly) {

frontend/style.css

@@ -86,6 +86,7 @@ input:focus, select:focus { outline: none; border-color: #6c63ff; }
 .viewer-bar { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; padding: .75rem; background: #111; border-bottom: 1px solid #333; }
 #viewer-zoom { min-width: 4rem; text-align: center; color: #ccc; font-size: .85rem; }
 #viewer-stage { flex: 1; overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 1rem; }
+#viewer-stage.dragging { cursor: grabbing; }
 #viewer-img { max-width: none; max-height: none; transform-origin: top center; transition: transform .08s ease; }
 
 @media (max-width: 800px) {