feat: ability to zoom on chat images

app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue

@@ -47,6 +47,22 @@
           class="items-center flex gap-2 justify-end min-w-[8rem] sm:min-w-[15rem]"
           @click.stop
         >
+          <woot-button
+            v-if="isImage"
+            size="large"
+            color-scheme="secondary"
+            variant="clear"
+            icon="zoom-in"
+            @click="onZoom(0.05)"
+          />
+          <woot-button
+            v-if="isImage"
+            size="large"
+            color-scheme="secondary"
+            variant="clear"
+            icon="zoom-out"
+            @click="onZoom(-0.05)"
+          />
           <woot-button
             v-if="isImage"
             size="large"
@@ -104,7 +120,8 @@
               :src="activeAttachment.data_url"
               class="modal-image skip-context-menu my-0 mx-auto"
               :style="imageRotationStyle"
-              @click.stop
+              @click.stop="onClickZoomImage"
+              @wheel.stop="onWheelImageZoom"
             />
             <video
               v-if="isVideo"
@@ -195,6 +212,7 @@ export default {
   },
   data() {
     return {
+      zoomScale: 1,
       activeAttachment: {},
       activeFileType: '',
       activeImageIndex:
@@ -250,7 +268,8 @@ export default {
     },
     imageRotationStyle() {
       return {
-        transform: `rotate(${this.activeImageRotation}deg)`,
+        transform: `rotate(${this.activeImageRotation}deg) scale(${this.zoomScale})`,
+        cursor: this.zoomScale < 1.5 ? 'zoom-in' : 'zoom-out',
       };
     },
   },
@@ -316,6 +335,32 @@ export default {
         this.activeImageRotation += rotation;
       }
     },
+    onClickZoomImage() {
+      this.onZoom(0.05);
+    },
+    onZoom(scale) {
+      if (!this.isImage) {
+        return;
+      }
+      // Reset zoom scale if it is 1.5
+      if (scale > 0 && this.zoomScale >= 1.5) {
+        this.zoomScale = 1;
+        return;
+      }
+      // Reset zoom scale if it is 0.5
+      if (scale < 0 && this.zoomScale <= 0.5) {
+        this.zoomScale = 1;
+        return;
+      }
+      this.zoomScale += scale;
+    },
+    onWheelImageZoom(e) {
+      if (!this.isImage) {
+        return;
+      }
+      const scale = e.deltaY > 0 ? -0.05 : 0.05;
+      this.onZoom(scale);
+    },
   },
 };
 </script>