Merge master

src/UI/Image/AttributedImage.svelte

@@ -51,27 +51,27 @@
   <div class="relative w-fit">
     <img
       bind:this={imgEl}
-      on:load={() => loaded = true}
+      on:load={() => (loaded = true)}
       class={imgClass ?? ""}
       class:cursor-zoom-in={canZoom}
       on:click={() => {
-        previewedImage.set(image)
+        previewedImage?.set(image)
     }}
       on:error={() => {
-      if (fallbackImage) {
-        imgEl.src = fallbackImage
-      }
-    }}
+        if (fallbackImage) {
+          imgEl.src = fallbackImage
+        }
+      }}
       src={image.url}
     />
 
     {#if canZoom && loaded}
-      <div class="absolute right-0 top-0 bg-black-transparent rounded-bl-full"
+      <div
+        class="bg-black-transparent absolute right-0 top-0 rounded-bl-full"
            on:click={() => previewedImage.set(image)}>
-        <MagnifyingGlassPlusIcon class="w-8 h-8 pl-3 pb-3 cursor-zoom-in" color="white" />
+        <MagnifyingGlassPlusIcon class="h-8 w-8 cursor-zoom-in pl-3 pb-3" color="white" />
       </div>
     {/if}
-
   </div>
   <div class="absolute bottom-0 left-0">
     <ImageAttribution {image} {attributionFormat} />

src/UI/Image/ImageAttribution.svelte

@@ -20,7 +20,9 @@
 </script>
 
 {#if $license !== undefined}
-  <div class="no-images flex items-center rounded-lg bg-black-transparent p-0.5 px-3 text-sm text-white">
+  <div
+    class="no-images bg-black-transparent flex items-center rounded-lg p-0.5 px-3 text-sm text-white"
+  >
     {#if icon !== undefined}
       <div class="mr-2 h-6 w-6">
         <ToSvelte construct={icon} />
@@ -28,7 +30,7 @@
     {/if}
 
     <div class="flex gap-x-2" class:flex-col={attributionFormat !== "minimal"}>
-      {#if attributionFormat !== "minimal" }
+      {#if attributionFormat !== "minimal"}
         {#if $license.title}
           {#if $license.informationLocation}
             <a href={$license.informationLocation.href} target="_blank" rel="noopener nofollower">
@@ -42,7 +44,7 @@
 
       {#if $license.artist}
         {#if attributionFormat === "large"}
-          <Tr t={Translations.t.general.attribution.madeBy.Subs({author: $license.artist})} />
+          <Tr t={Translations.t.general.attribution.madeBy.Subs({ author: $license.artist })} />
         {:else}
           <div class="font-bold">
             {@html $license.artist}
@@ -58,7 +60,7 @@
 
       {#if attributionFormat !== "minimal"}
         <div class="flex w-full justify-between gap-x-1">
-          {#if ($license.license !== undefined || $license.licenseShortName !== undefined)}
+          {#if $license.license !== undefined || $license.licenseShortName !== undefined}
             <div>
               {$license?.license ?? $license?.licenseShortName}
             </div>
@@ -72,7 +74,6 @@
           {/if}
         </div>
       {/if}
-
     </div>
   </div>
 {/if}

src/UI/Image/ImageOperations.svelte

@@ -39,10 +39,8 @@
   <div
     class="pointer-events-none absolute bottom-0 left-0 flex w-full flex-wrap items-end justify-between"
   >
-    <div
-      class="pointer-events-auto m-1 w-fit transition-colors duration-200"
-    >
-      <ImageAttribution {image} attributionFormat="large"/>
+    <div class="pointer-events-auto m-1 w-fit transition-colors duration-200">
+      <ImageAttribution {image} attributionFormat="large" />
     </div>
 
     <slot/>
@@ -52,7 +50,7 @@
       on:click={() => download()}
     >
       <DownloadIcon class="h-6 w-6 px-2 opacity-100" />
-      <Tr t={Translations.t.general.download.downloadImage}/>
+      <Tr t={Translations.t.general.download.downloadImage} />
     </button>
   </div>
 </div>

src/UI/Image/LinkableImage.svelte

@@ -33,7 +33,7 @@
     key: undefined,
     provider: AllImageProviders.byName(image.provider),
     date: new Date(image.date),
-    id: Object.values(image.osmTags)[0]
+    id: Object.values(image.osmTags)[0],
   }
 
   async function applyLink(isLinked: boolean) {
@@ -44,7 +44,7 @@
     if (isLinked) {
       const action = new LinkImageAction(currentTags.id, key, url, tags, {
         theme: tags.data._orig_theme ?? state.layout.id,
-        changeType: "link-image"
+        changeType: "link-image",
       })
       await state.changes.applyAction(action)
     } else {
@@ -53,7 +53,7 @@
         if (v === url) {
           const action = new ChangeTagAction(currentTags.id, new Tag(k, ""), currentTags, {
             theme: tags.data._orig_theme ?? state.layout.id,
-            changeType: "remove-image"
+            changeType: "remove-image",
           })
           state.changes.applyAction(action)
         }
@@ -62,11 +62,13 @@
   }
 
   isLinked.addCallback((isLinked) => applyLink(isLinked))
-
 </script>
 
-<div class="flex w-fit shrink-0 flex-col rounded-lg overflow-hidden" class:border-interactive={$isLinked}
-     style="border-width: 2px">
+<div
+  class="flex w-fit shrink-0 flex-col overflow-hidden rounded-lg"
+  class:border-interactive={$isLinked}
+  style="border-width: 2px"
+>
   <AttributedImage
     image={providedImage}
     imgClass="max-h-64 w-auto"