Feature(360): actually show spheres when it is already linked

src/UI/Image/AttributedImage.svelte

@@ -21,6 +21,7 @@
   import LoadingPlaceholder from "../Base/LoadingPlaceholder.svelte"
   import { MenuState } from "../../Models/MenuState"
   import ThemeViewState from "../../Models/ThemeViewState"
+  import Panorama360 from "../../assets/svg/Panorama360.svelte"
 
   export let image: Partial<ProvidedImage> & { id: string; url: string }
   let fallbackImage: string = undefined
@@ -48,7 +49,7 @@
       previewedImage.addCallbackAndRun((previewedImage) => {
         showBigPreview.set(
           previewedImage !== undefined &&
-            (previewedImage?.id ?? previewedImage?.url) === (image.id ?? image.url)
+          (previewedImage?.id ?? previewedImage?.url) === (image.id ?? image.url)
         )
       })
     )
@@ -66,12 +67,12 @@
       type: "Feature",
       properties: {
         id: image.id,
-        rotation: image.rotation,
+        rotation: image.rotation
       },
       geometry: {
         type: "Point",
-        coordinates: [image.lon, image.lat],
-      },
+        coordinates: [image.lon, image.lat]
+      }
     }
     state?.geocodedImages.set([f])
   }
@@ -100,10 +101,10 @@
       <Tr t={Translations.t.image.processing} />
     </Loading>
   </div>
-{:else}
+{:else if image.status !== "hidden"}
   <div class="relative shrink-0">
     <div
-      class="relative w-fit"
+      class={"relative w-fit"}
       on:mouseenter={() => highlight()}
       on:mouseleave={() => highlight(false)}
     >
@@ -132,6 +133,16 @@
         src={image.url}
       />
 
+      {#if image.isSpherical}
+        <div class="absolute top-0 left-0 w-full h-full flex justify-center items-center pointer-events-none">
+          <div class="bg-black opacity-50 rounded-full p-[3.25rem]">
+            <div class="w-0 h-0 relative flex items-center justify-center">
+              <Panorama360 class="absolute w-16 h-16" color="#ffffff" />
+            </div>
+          </div>
+        </div>
+      {/if}
+
       {#if canZoom && loaded}
         <div
           class="bg-black-transparent absolute right-0 top-0 rounded-bl-full"
@@ -145,4 +156,7 @@
       <ImageAttribution {image} {attributionFormat} />
     </div>
   </div>
+
+{:else if image.status === "hidden"}
+  <div class="subtle">This image has been reported</div>
 {/if}