From 6205da9d41652b8eb6bbcf823018e067aef38a6f Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Sat, 9 Dec 2023 16:04:35 +0100
Subject: [PATCH] UX: add zoom-cursor to clickable images

---
 public/css/index-tailwind-output.css |  4 ++++
 src/UI/Image/ImageCarousel.ts        | 17 ++++++++++++-----
 src/UI/Image/LinkableImage.svelte    |  2 +-
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css
index 6db9c8207e..bdd3dbad9e 100644
--- a/public/css/index-tailwind-output.css
+++ b/public/css/index-tailwind-output.css
@@ -1356,6 +1356,10 @@ video {
   cursor: wait;
 }
 
+.cursor-zoom-in {
+  cursor: zoom-in;
+}
+
 .resize {
   resize: both;
 }
diff --git a/src/UI/Image/ImageCarousel.ts b/src/UI/Image/ImageCarousel.ts
index 0b6f43d987..fb500ece39 100644
--- a/src/UI/Image/ImageCarousel.ts
+++ b/src/UI/Image/ImageCarousel.ts
@@ -14,17 +14,24 @@ import AttributedImage from "./AttributedImage.svelte"
 
 export class ImageCarousel extends Toggle {
     constructor(
-        images: Store<{ id:string, key: string; url: string; provider: ImageProvider }[]>,
+        images: Store<{ id: string; key: string; url: string; provider: ImageProvider }[]>,
         tags: Store<any>,
-        state: { osmConnection?: OsmConnection; changes?: Changes; layout: LayoutConfig, previewedImage?: UIEventSource<ProvidedImage> },
+        state: {
+            osmConnection?: OsmConnection
+            changes?: Changes
+            layout: LayoutConfig
+            previewedImage?: UIEventSource<ProvidedImage>
+        },
         feature: Feature
     ) {
         const uiElements = images.map(
-            (imageURLS: { key: string; url: string; provider: ImageProvider, id: string }[]) => {
+            (imageURLS: { key: string; url: string; provider: ImageProvider; id: string }[]) => {
                 const uiElements: BaseUIElement[] = []
                 for (const url of imageURLS) {
                     try {
-                        let image: BaseUIElement = new SvelteUIElement(AttributedImage, {image: url})
+                        let image: BaseUIElement = new SvelteUIElement(AttributedImage, {
+                            image: url,
+                        })
 
                         if (url.key !== undefined) {
                             image = new Combine([
@@ -35,7 +42,7 @@ export class ImageCarousel extends Toggle {
                             ]).SetClass("relative")
                         }
                         image
-                            .SetClass("w-full block")
+                            .SetClass("w-full block cursor-zoom-in")
                             .SetStyle("min-width: 50px; background: grey;")
                             .onClick(() => state.previewedImage.setData(url))
                         uiElements.push(image)
diff --git a/src/UI/Image/LinkableImage.svelte b/src/UI/Image/LinkableImage.svelte
index ae4f90cae2..fd45bdf373 100644
--- a/src/UI/Image/LinkableImage.svelte
+++ b/src/UI/Image/LinkableImage.svelte
@@ -64,7 +64,7 @@
 </script>
 
 <div class="flex w-fit shrink-0 flex-col">
-  <div on:click={() => state.previewedImage.setData(providedImage)}>
+  <div on:click={() => state.previewedImage.setData(providedImage)} class="cursor-zoom-in">
     <AttributedImage image={providedImage} imgClass="max-h-64 w-auto"/>
   </div>
   {#if linkable}