From 065f03691f6b6650f7bfcb54aaa89d5c218a36c8 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Tue, 27 Aug 2024 19:37:21 +0200
Subject: [PATCH 01/10] UX: Disable comparison tool if not logged in

---
 src/UI/Comparison/ComparisonTool.svelte | 54 +++++++++++++------------
 1 file changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/UI/Comparison/ComparisonTool.svelte b/src/UI/Comparison/ComparisonTool.svelte
index 0a9a33d4c..4d3edc91c 100644
--- a/src/UI/Comparison/ComparisonTool.svelte
+++ b/src/UI/Comparison/ComparisonTool.svelte
@@ -15,6 +15,7 @@
   import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
   import GlobeAlt from "@babeard/svelte-heroicons/mini/GlobeAlt"
   import { ComparisonState } from "./ComparisonState"
+  import LoginToggle from "../Base/LoginToggle.svelte"
 
   export let externalData: Store<
     | { success: { content: Record<string, string> } }
@@ -45,35 +46,38 @@
   let enableLogin = state.featureSwitches.featureSwitchEnableLogin
 </script>
 
-{#if !$sourceUrl || !$enableLogin}
-  <!-- empty block -->
-{:else if $externalData === undefined}
-  <Loading />
-{:else if $externalData["error"] !== undefined}
-  <div class="subtle low-interaction rounded p-2 px-4 italic">
-    <Tr t={Translations.t.external.error} />
-  </div>
-{:else if $propertyKeysExternal.length === 0 && $knownImages.size + $unknownImages.length === 0}
-  <Tr cls="subtle" t={t.noDataLoaded} />
-{:else if !$hasDifferencesAtStart}
+<LoginToggle {state} silentFail>
+
+  {#if !$sourceUrl || !$enableLogin}
+    <!-- empty block -->
+  {:else if $externalData === undefined}
+    <Loading />
+  {:else if $externalData["error"] !== undefined}
+    <div class="subtle low-interaction rounded p-2 px-4 italic">
+      <Tr t={Translations.t.external.error} />
+    </div>
+  {:else if $propertyKeysExternal.length === 0 && $knownImages.size + $unknownImages.length === 0}
+    <Tr cls="subtle" t={t.noDataLoaded} />
+  {:else if !$hasDifferencesAtStart}
   <span class="subtle text-sm">
     <Tr t={t.allIncluded.Subs({ source: $sourceUrl })} />
   </span>
-{:else if $comparisonState !== undefined}
-  <AccordionSingle expanded={!collapsed}>
+  {:else if $comparisonState !== undefined}
+    <AccordionSingle expanded={!collapsed}>
     <span slot="header" class="flex">
       <GlobeAlt class="h-6 w-6" />
       <Tr t={Translations.t.external.title} />
     </span>
-    <ComparisonTable
-      externalProperties={$externalData["success"]}
-      {state}
-      {feature}
-      {layer}
-      {tags}
-      {readonly}
-      sourceUrl={$sourceUrl}
-      comparisonState={$comparisonState}
-    />
-  </AccordionSingle>
-{/if}
+      <ComparisonTable
+        externalProperties={$externalData["success"]}
+        {state}
+        {feature}
+        {layer}
+        {tags}
+        {readonly}
+        sourceUrl={$sourceUrl}
+        comparisonState={$comparisonState}
+      />
+    </AccordionSingle>
+  {/if}
+</LoginToggle>

From b79835074fe5f954bd4b64ecdb713ca13503495e Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Tue, 27 Aug 2024 19:38:27 +0200
Subject: [PATCH 02/10] UX: don't show bold in options that can be chosen as
 answer, see usertest

---
 public/css/index-tailwind-output.css          | 20 ++++++++-----------
 .../TagRendering/TagRenderingQuestion.svelte  |  8 ++++++--
 src/index.css                                 |  4 ++++
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css
index 320d427ce..a17c7a81a 100644
--- a/public/css/index-tailwind-output.css
+++ b/public/css/index-tailwind-output.css
@@ -993,10 +993,6 @@ video {
   margin-right: 4rem;
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
 .mt-4 {
   margin-top: 1rem;
 }
@@ -1029,6 +1025,10 @@ video {
   margin-right: 0.25rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -1073,10 +1073,6 @@ video {
   margin-left: -1.5rem;
 }
 
-.mt-12 {
-  margin-top: 3rem;
-}
-
 .mb-3 {
   margin-bottom: 0.75rem;
 }
@@ -2043,10 +2039,6 @@ video {
   column-gap: 0px;
 }
 
-.gap-x-4 {
-  column-gap: 1rem;
-}
-
 .gap-y-8 {
   row-gap: 2rem;
 }
@@ -4887,6 +4879,10 @@ a.link-underline {
   background-color: #f2f2f2;
 }
 
+.no-bold b {
+  font-weight: normal;
+}
+
 /************************* MISC ELEMENTS *************************/
 
 .selected svg:not(.noselect *) path.selectable {
diff --git a/src/UI/Popup/TagRendering/TagRenderingQuestion.svelte b/src/UI/Popup/TagRendering/TagRenderingQuestion.svelte
index 90203e64c..ba1a47389 100644
--- a/src/UI/Popup/TagRendering/TagRenderingQuestion.svelte
+++ b/src/UI/Popup/TagRendering/TagRenderingQuestion.svelte
@@ -352,6 +352,7 @@
           {/if}
         </legend>
 
+        <!-- Search menu -->
         {#if config.mappings?.length >= 8 || hideMappingsUnlessSearchedFor}
           <div class="sticky flex w-full" aria-hidden="true">
             <Search class="h-6 w-6" />
@@ -369,6 +370,7 @@
           {/if}
         {/if}
 
+        <!-- Actual options-->
         {#if config?.freeform?.key && !(config?.mappings?.filter((m) => m.hideInAnswer != true)?.length > 0)}
           <!-- There are no options to choose from, simply show the input element: fill out the text field -->
           <FreeformInput
@@ -384,7 +386,7 @@
           />
         {:else if config.mappings !== undefined && !config.multiAnswer}
           <!-- Simple radiobuttons as mapping -->
-          <div class="flex flex-col">
+          <div class="flex flex-col no-bold">
             {#each config.mappings as mapping, i (mapping.then)}
               <!-- Even though we have a list of 'mappings' already, we still iterate over the list as to keep the original indices-->
               <TagRenderingMappingInput
@@ -432,7 +434,7 @@
           </div>
         {:else if config.mappings !== undefined && config.multiAnswer}
           <!-- Multiple answers can be chosen: checkboxes -->
-          <div class="flex flex-col">
+          <div class="flex flex-col no-bold">
             {#each config.mappings as mapping, i (mapping.then)}
               <TagRenderingMappingInput
                 {mapping}
@@ -475,6 +477,8 @@
             {/if}
           </div>
         {/if}
+
+        <!-- Save and cancel buttons, in a logintoggle -->
         <LoginToggle {state}>
           <Loading slot="loading" />
           <SubtleButton slot="not-logged-in" on:click={() => state?.osmConnection?.AttemptLogin()}>
diff --git a/src/index.css b/src/index.css
index eccbdb3b4..1c0a498bf 100644
--- a/src/index.css
+++ b/src/index.css
@@ -538,6 +538,10 @@ a.link-underline {
   background-color: #f2f2f2;
 }
 
+.no-bold b {
+    font-weight: normal;
+}
+
 /************************* MISC ELEMENTS *************************/
 
 .selected svg:not(.noselect *) path.selectable {

From 4168ef01e333784f738fafa15d1eb7d7c4c527c7 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Wed, 28 Aug 2024 12:02:04 +0200
Subject: [PATCH 03/10] Fix: chromium browsers don't handle spaces in
 `tel:`-links well

---
 assets/layers/questions/questions.json |  14 +-
 src/UI/Base/DynLink.svelte             |   3 +-
 src/UI/Base/Link.svelte                |   6 +-
 src/UI/SpecialVisualizations.ts        | 492 ++++++++++++-------------
 src/Utils.ts                           |  79 ++--
 5 files changed, 315 insertions(+), 279 deletions(-)

diff --git a/assets/layers/questions/questions.json b/assets/layers/questions/questions.json
index d5d4551f7..5e979b128 100644
--- a/assets/layers/questions/questions.json
+++ b/assets/layers/questions/questions.json
@@ -175,13 +175,23 @@
         "cs": "Jaké je telefonní číslo {title()}?"
       },
       "render": {
-        "*": "<a href='tel:{phone}'>{phone}</a>"
+          "special": {
+            "type": "link",
+            "href": "tel:{phone}",
+            "text": "{phone}"
+          }
       },
       "icon": "./assets/layers/questions/phone.svg",
       "mappings": [
         {
           "if": "contact:phone~*",
-          "then": "<a href='tel:{contact:phone}'>{contact:phone}</a>",
+          "then":{
+            "special": {
+              "type": "link",
+              "href": "tel:{contact:phone}",
+              "text": "{contact:phone}"
+            }
+          },
           "hideInAnswer": true,
           "icon": "./assets/layers/questions/phone.svg"
         }
diff --git a/src/UI/Base/DynLink.svelte b/src/UI/Base/DynLink.svelte
index 9337a5ff6..91deac7e9 100644
--- a/src/UI/Base/DynLink.svelte
+++ b/src/UI/Base/DynLink.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { ImmutableStore, Store } from "../../Logic/UIEventSource"
   import Icon from "../Map/Icon.svelte"
+  import { Utils } from "../../Utils"
 
   export let text: Store<string>
   export let href: Store<string>
@@ -13,7 +14,7 @@
 </script>
 
 <a
-  href={$href}
+  href={Utils.prepareHref($href)}
   aria-label={$ariaLabel}
   title={$ariaLabel}
   target={$newTab ? "_blank" : undefined}
diff --git a/src/UI/Base/Link.svelte b/src/UI/Base/Link.svelte
index f7bae099f..6512856ee 100644
--- a/src/UI/Base/Link.svelte
+++ b/src/UI/Base/Link.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
+  import { Utils } from "../../Utils"
+
   export let text: string
   export let href: string
+
+
   export let classnames: string = undefined
   export let download: string = undefined
   export let ariaLabel: string = undefined
@@ -9,7 +13,7 @@
 </script>
 
 <a
-  {href}
+  href={Utils.prepareHref(href)}
   aria-label={ariaLabel}
   title={ariaLabel}
   target={newTab ? "_blank" : undefined}
diff --git a/src/UI/SpecialVisualizations.ts b/src/UI/SpecialVisualizations.ts
index f3480f521..43841d828 100644
--- a/src/UI/SpecialVisualizations.ts
+++ b/src/UI/SpecialVisualizations.ts
@@ -5,7 +5,7 @@ import Title from "./Base/Title"
 import {
     RenderingSpecification,
     SpecialVisualization,
-    SpecialVisualizationState,
+    SpecialVisualizationState
 } from "./SpecialVisualization"
 import { HistogramViz } from "./Popup/HistogramViz"
 import MinimapViz from "./Popup/MinimapViz.svelte"
@@ -108,13 +108,13 @@ class NearbyImageVis implements SpecialVisualization {
         {
             name: "mode",
             defaultValue: "closed",
-            doc: "Either `open` or `closed`. If `open`, then the image carousel will always be shown",
+            doc: "Either `open` or `closed`. If `open`, then the image carousel will always be shown"
         },
         {
             name: "readonly",
             required: false,
-            doc: "If 'readonly', will not show the 'link'-button",
-        },
+            doc: "If 'readonly', will not show the 'link'-button"
+        }
     ]
     docs =
         "A component showing nearby images loaded from various online services such as Mapillary. In edit mode and when used on a feature, the user can select an image to add to the feature"
@@ -138,7 +138,7 @@ class NearbyImageVis implements SpecialVisualization {
             lat,
             feature,
             layer,
-            linkable: !readonly,
+            linkable: !readonly
         })
     }
 }
@@ -152,13 +152,13 @@ class StealViz implements SpecialVisualization {
         {
             name: "featureId",
             doc: "The key of the attribute which contains the id of the feature from which to use the tags",
-            required: true,
+            required: true
         },
         {
             name: "tagRenderingId",
             doc: "The layer-id and tagRenderingId to render. Can be multiple value if ';'-separated (in which case every value must also contain the layerId, e.g. `layerId.tagRendering0; layerId.tagRendering1`). Note: this can cause layer injection",
-            required: true,
-        },
+            required: true
+        }
     ]
     needsUrls = []
     svelteBased = true
@@ -192,7 +192,7 @@ class StealViz implements SpecialVisualization {
                                 tags: otherTags,
                                 selectedElement: otherFeature,
                                 state,
-                                layer,
+                                layer
                             })
                         )
                     }
@@ -225,38 +225,36 @@ class CloseNoteViz implements SpecialVisualization {
         {
             name: "text",
             doc: "Text to show on this button",
-            required: true,
+            required: true
         },
         {
             name: "icon",
             doc: "Icon to show",
-            defaultValue: "checkmark.svg",
+            defaultValue: "checkmark.svg"
         },
         {
             name: "idkey",
             doc: "The property name where the ID of the note to close can be found",
-            defaultValue: "id",
+            defaultValue: "id"
         },
         {
             name: "comment",
-            doc: "Text to add onto the note when closing",
+            doc: "Text to add onto the note when closing"
         },
         {
             name: "minZoom",
-            doc: "If set, only show the closenote button if zoomed in enough",
+            doc: "If set, only show the closenote button if zoomed in enough"
         },
         {
             name: "zoomButton",
-            doc: "Text to show if not zoomed in enough",
-        },
+            doc: "Text to show if not zoomed in enough"
+        }
     ]
 
     public constr(
         state: SpecialVisualizationState,
         tags: UIEventSource<Record<string, string>>,
-        args: string[],
-        feature: Feature,
-        layer: LayerConfig
+        args: string[]
     ): SvelteUIElement {
         const { text, icon, idkey, comment, minZoom, zoomButton } = Utils.ParseVisArgs(
             this.args,
@@ -271,7 +269,7 @@ class CloseNoteViz implements SpecialVisualization {
             message: comment,
             text: Translations.T(text),
             minzoom: minZoom,
-            zoomMoreMessage: zoomButton,
+            zoomMoreMessage: zoomButton
         })
     }
 }
@@ -287,12 +285,12 @@ export class QuestionViz implements SpecialVisualization {
     args = [
         {
             name: "labels",
-            doc: "One or more ';'-separated labels. If these are given, only questions with these labels will be given. Use `unlabeled` for all questions that don't have an explicit label. If none given, all questions will be shown",
+            doc: "One or more ';'-separated labels. If these are given, only questions with these labels will be given. Use `unlabeled` for all questions that don't have an explicit label. If none given, all questions will be shown"
         },
         {
             name: "blacklisted-labels",
-            doc: "One or more ';'-separated labels of questions which should _not_ be included",
-        },
+            doc: "One or more ';'-separated labels of questions which should _not_ be included"
+        }
     ]
     svelteBased = true
 
@@ -317,7 +315,7 @@ export class QuestionViz implements SpecialVisualization {
             selectedElement: feature,
             state,
             onlyForLabels: labels,
-            notForLabels: blacklist,
+            notForLabels: blacklist
         }).SetClass("w-full")
     }
 }
@@ -353,18 +351,18 @@ export default class SpecialVisualizations {
             viz.docs,
             viz.args.length > 0
                 ? MarkdownUtils.table(
-                      ["name", "default", "description"],
-                      viz.args.map((arg) => {
-                          let defaultArg = arg.defaultValue ?? "_undefined_"
-                          if (defaultArg == "") {
-                              defaultArg = "_empty string_"
-                          }
-                          return [arg.name, defaultArg, arg.doc]
-                      })
-                  )
+                    ["name", "default", "description"],
+                    viz.args.map((arg) => {
+                        let defaultArg = arg.defaultValue ?? "_undefined_"
+                        if (defaultArg == "") {
+                            defaultArg = "_empty string_"
+                        }
+                        return [arg.name, defaultArg, arg.doc]
+                    })
+                )
                 : undefined,
             "#### Example usage of " + viz.funcName,
-            "<code>" + example + "</code>",
+            "<code>" + example + "</code>"
         ].join("\n\n")
     }
 
@@ -400,24 +398,24 @@ export default class SpecialVisualizations {
                                 argname: "some_arg",
                                 message: {
                                     en: "some other really long message",
-                                    nl: "een boodschap in een andere taal",
+                                    nl: "een boodschap in een andere taal"
                                 },
-                                other_arg_name: "more args",
+                                other_arg_name: "more args"
                             },
                             before: {
                                 en: "Some text to prefix before the special element (e.g. a title)",
-                                nl: "Een tekst om voor het element te zetten (bv. een titel)",
+                                nl: "Een tekst om voor het element te zetten (bv. een titel)"
                             },
                             after: {
-                                en: "Some text to put after the element, e.g. a footer",
-                            },
-                        },
+                                en: "Some text to put after the element, e.g. a footer"
+                            }
+                        }
                     },
                     null,
                     "  "
                 )
             ).SetClass("code"),
-            'In other words: use `{ "before": ..., "after": ..., "special": {"type": ..., "argname": ...argvalue...}`. The args are in the `special` block; an argvalue can be a string, a translation or another value. (Refer to class `RewriteSpecial` in case of problems)',
+            "In other words: use `{ \"before\": ..., \"after\": ..., \"special\": {\"type\": ..., \"argname\": ...argvalue...}`. The args are in the `special` block; an argvalue can be a string, a translation or another value. (Refer to class `RewriteSpecial` in case of problems)"
         ])
             .SetClass("flex flex-col")
             .AsMarkdown()
@@ -437,9 +435,9 @@ export default class SpecialVisualizations {
                     const [lon, lat] = GeoOperations.centerpointCoordinates(feature)
                     return new SvelteUIElement(AddNewPoint, {
                         state,
-                        coordinate: { lon, lat },
+                        coordinate: { lon, lat }
                     }).SetClass("w-full h-full overflow-auto")
-                },
+                }
             },
             {
                 funcName: "language_picker",
@@ -456,11 +454,11 @@ export default class SpecialVisualizations {
                                 availableLanguages: languages,
                                 preferredLanguages: state.osmConnection.userDetails.map(
                                     (ud) => ud.languages
-                                ),
+                                )
                             })
                         })
                     )
-                },
+                }
             },
             {
                 funcName: "logout",
@@ -470,7 +468,7 @@ export default class SpecialVisualizations {
 
                 constr(state: SpecialVisualizationState): BaseUIElement {
                     return new SvelteUIElement(LogoutButton, { osmConnection: state.osmConnection })
-                },
+                }
             },
             new HistogramViz(),
             new StealViz(),
@@ -482,13 +480,13 @@ export default class SpecialVisualizations {
                     {
                         doc: "The (maximum) zoomlevel: the target zoomlevel after fitting the entire feature. The minimap will fit the entire feature, then zoom out to this zoom level. The higher, the more zoomed in with 1 being the entire world and 19 being really close",
                         name: "zoomlevel",
-                        defaultValue: "18",
+                        defaultValue: "18"
                     },
                     {
                         doc: "(Matches all resting arguments) This argument should be the key of a property of the feature. The corresponding value is interpreted as either the id or the a list of ID's. The features with these ID's will be shown on this minimap. (Note: if the key is 'id', list interpration is disabled)",
                         name: "idKey",
-                        defaultValue: "id",
-                    },
+                        defaultValue: "id"
+                    }
                 ],
                 example:
                     "`{minimap()}`, `{minimap(17, id, _list_of_embedded_feature_ids_calculated_by_calculated_tag):height:10rem; border: 2px solid black}`",
@@ -500,7 +498,7 @@ export default class SpecialVisualizations {
                     feature: Feature
                 ): SvelteUIElement {
                     return new SvelteUIElement(MinimapViz, { state, args, feature, tagSource })
-                },
+                }
             },
             {
                 funcName: "split_button",
@@ -521,7 +519,7 @@ export default class SpecialVisualizations {
                                 return undefined
                             })
                     )
-                },
+                }
             },
             {
                 funcName: "move_button",
@@ -542,9 +540,9 @@ export default class SpecialVisualizations {
                     return new SvelteUIElement(MoveWizard, {
                         state,
                         featureToMove: feature,
-                        layer,
+                        layer
                     })
-                },
+                }
             },
             {
                 funcName: "delete_button",
@@ -566,9 +564,9 @@ export default class SpecialVisualizations {
                         deleteConfig: layer.deletion,
                         state,
                         feature,
-                        layer,
+                        layer
                     }).SetClass("p-0 m-0")
-                },
+                }
             },
             new ShareLinkViz(),
             new ExportAsGpxViz(),
@@ -589,9 +587,9 @@ export default class SpecialVisualizations {
                     const [lon, lat] = GeoOperations.centerpointCoordinates(feature)
                     return new SvelteUIElement(CreateNewNote, {
                         state,
-                        coordinate: new UIEventSource({ lon, lat }),
+                        coordinate: new UIEventSource({ lon, lat })
                     })
-                },
+                }
             },
             new CloseNoteViz(),
             new PlantNetDetectionViz(),
@@ -610,8 +608,8 @@ export default class SpecialVisualizations {
                     {
                         name: "keyToShowWikipediaFor",
                         doc: "Use the wikidata entry from this key to show the wikipedia article for. Multiple keys can be given (separated by ';'), in which case the first matching value is used",
-                        defaultValue: "wikidata;wikipedia",
-                    },
+                        defaultValue: "wikidata;wikipedia"
+                    }
                 ],
                 needsUrls: [...Wikidata.neededUrls, ...Wikipedia.neededUrls],
 
@@ -624,9 +622,9 @@ export default class SpecialVisualizations {
                         return tags[key]?.split(";")?.map((id) => id.trim()) ?? []
                     })
                     return new SvelteUIElement(WikipediaPanel, {
-                        wikiIds,
+                        wikiIds
                     })
-                },
+                }
             },
             {
                 funcName: "wikidata_label",
@@ -635,8 +633,8 @@ export default class SpecialVisualizations {
                     {
                         name: "keyToShowWikidataFor",
                         doc: "Use the wikidata entry from this key to show the label",
-                        defaultValue: "wikidata",
-                    },
+                        defaultValue: "wikidata"
+                    }
                 ],
                 needsUrls: Wikidata.neededUrls,
                 example:
@@ -660,7 +658,7 @@ export default class SpecialVisualizations {
                                     })
                                 )
                             })
-                    ),
+                    )
             },
             new MapillaryLinkVis(),
             new LanguageElement(),
@@ -674,7 +672,7 @@ export default class SpecialVisualizations {
                     _,
                     __,
                     layer: LayerConfig
-                ) => new SvelteUIElement(AllTagsPanel, { tags, layer }),
+                ) => new SvelteUIElement(AllTagsPanel, { tags, layer })
             },
             {
                 funcName: "image_carousel",
@@ -683,8 +681,8 @@ export default class SpecialVisualizations {
                     {
                         name: "image_key",
                         defaultValue: AllImageProviders.defaultKeys.join(","),
-                        doc: "The keys given to the images, e.g. if <span class='literal-code'>image</span> is given, the first picture URL will be added as <span class='literal-code'>image</span>, the second as <span class='literal-code'>image:0</span>, the third as <span class='literal-code'>image:1</span>, etc... Multiple values are allowed if ';'-separated ",
-                    },
+                        doc: "The keys given to the images, e.g. if <span class='literal-code'>image</span> is given, the first picture URL will be added as <span class='literal-code'>image</span>, the second as <span class='literal-code'>image:0</span>, the third as <span class='literal-code'>image:1</span>, etc... Multiple values are allowed if ';'-separated "
+                    }
                 ],
                 needsUrls: AllImageProviders.apiUrls,
                 constr: (state, tags, args) => {
@@ -697,7 +695,7 @@ export default class SpecialVisualizations {
                         tags,
                         state
                     )
-                },
+                }
             },
             {
                 funcName: "image_upload",
@@ -707,13 +705,13 @@ export default class SpecialVisualizations {
                     {
                         name: "image-key",
                         doc: "Image tag to add the URL to (or image-tag:0, image-tag:1 when multiple images are added)",
-                        required: false,
+                        required: false
                     },
                     {
                         name: "label",
                         doc: "The text to show on the button",
-                        required: false,
-                    },
+                        required: false
+                    }
                 ],
                 constr: (state, tags, args) => {
                     const targetKey = args[0] === "" ? undefined : args[0]
@@ -722,9 +720,9 @@ export default class SpecialVisualizations {
                         tags,
                         targetKey,
                         labelText: args[1],
-                        image: args[2],
+                        image: args[2]
                     })
-                },
+                }
             },
             {
                 funcName: "rating",
@@ -734,12 +732,12 @@ export default class SpecialVisualizations {
                     {
                         name: "subjectKey",
                         defaultValue: "name",
-                        doc: "The key to use to determine the subject. If the value is specified, the subject will be <b>tags[subjectKey]</b> and will use this to filter the reviews.",
+                        doc: "The key to use to determine the subject. If the value is specified, the subject will be <b>tags[subjectKey]</b> and will use this to filter the reviews."
                     },
                     {
                         name: "fallback",
-                        doc: "The identifier to use, if <i>tags[subjectKey]</i> as specified above is not available. This is effectively a fallback value",
-                    },
+                        doc: "The identifier to use, if <i>tags[subjectKey]</i> as specified above is not available. This is effectively a fallback value"
+                    }
                 ],
                 constr: (state, tags, args, feature) => {
                     const nameKey = args[0] ?? "name"
@@ -750,14 +748,14 @@ export default class SpecialVisualizations {
                         state.userRelatedState.mangroveIdentity,
                         {
                             nameKey: nameKey,
-                            fallbackName,
+                            fallbackName
                         },
                         state.featureSwitchIsTesting
                     )
                     return new SvelteUIElement(StarsBarIcon, {
-                        score: reviews.average,
+                        score: reviews.average
                     })
-                },
+                }
             },
 
             {
@@ -768,12 +766,12 @@ export default class SpecialVisualizations {
                     {
                         name: "subjectKey",
                         defaultValue: "name",
-                        doc: "The key to use to determine the subject. If specified, the subject will be <b>tags[subjectKey]</b>",
+                        doc: "The key to use to determine the subject. If specified, the subject will be <b>tags[subjectKey]</b>"
                     },
                     {
                         name: "fallback",
-                        doc: "The identifier to use, if <i>tags[subjectKey]</i> as specified above is not available. This is effectively a fallback value",
-                    },
+                        doc: "The identifier to use, if <i>tags[subjectKey]</i> as specified above is not available. This is effectively a fallback value"
+                    }
                 ],
                 constr: (state, tags, args, feature, layer) => {
                     const nameKey = args[0] ?? "name"
@@ -784,12 +782,12 @@ export default class SpecialVisualizations {
                         state.userRelatedState?.mangroveIdentity,
                         {
                             nameKey: nameKey,
-                            fallbackName,
+                            fallbackName
                         },
                         state.featureSwitchIsTesting
                     )
                     return new SvelteUIElement(ReviewForm, { reviews, state, tags, feature, layer })
-                },
+                }
             },
             {
                 funcName: "list_reviews",
@@ -799,12 +797,12 @@ export default class SpecialVisualizations {
                     {
                         name: "subjectKey",
                         defaultValue: "name",
-                        doc: "The key to use to determine the subject. If specified, the subject will be <b>tags[subjectKey]</b>",
+                        doc: "The key to use to determine the subject. If specified, the subject will be <b>tags[subjectKey]</b>"
                     },
                     {
                         name: "fallback",
-                        doc: "The identifier to use, if <i>tags[subjectKey]</i> as specified above is not available. This is effectively a fallback value",
-                    },
+                        doc: "The identifier to use, if <i>tags[subjectKey]</i> as specified above is not available. This is effectively a fallback value"
+                    }
                 ],
                 constr: (state, tags, args, feature, layer) => {
                     const nameKey = args[0] ?? "name"
@@ -815,12 +813,12 @@ export default class SpecialVisualizations {
                         state.userRelatedState?.mangroveIdentity,
                         {
                             nameKey: nameKey,
-                            fallbackName,
+                            fallbackName
                         },
                         state.featureSwitchIsTesting
                     )
                     return new SvelteUIElement(AllReviews, { reviews, state, tags, feature, layer })
-                },
+                }
             },
             {
                 funcName: "reviews",
@@ -831,12 +829,12 @@ export default class SpecialVisualizations {
                     {
                         name: "subjectKey",
                         defaultValue: "name",
-                        doc: "The key to use to determine the subject. If specified, the subject will be <b>tags[subjectKey]</b>",
+                        doc: "The key to use to determine the subject. If specified, the subject will be <b>tags[subjectKey]</b>"
                     },
                     {
                         name: "fallback",
-                        doc: "The identifier to use, if <i>tags[subjectKey]</i> as specified above is not available. This is effectively a fallback value",
-                    },
+                        doc: "The identifier to use, if <i>tags[subjectKey]</i> as specified above is not available. This is effectively a fallback value"
+                    }
                 ],
                 constr(
                     state: SpecialVisualizationState,
@@ -859,9 +857,9 @@ export default class SpecialVisualizations {
                             args,
                             feature,
                             layer
-                        ),
+                        )
                     ])
-                },
+                }
             },
             {
                 funcName: "import_mangrove_key",
@@ -869,8 +867,8 @@ export default class SpecialVisualizations {
                 args: [
                     {
                         name: "text",
-                        doc: "The text that is shown on the button",
-                    },
+                        doc: "The text that is shown on the button"
+                    }
                 ],
                 needsUrls: [],
                 constr(
@@ -880,7 +878,7 @@ export default class SpecialVisualizations {
                 ): BaseUIElement {
                     const [text] = argument
                     return new SvelteUIElement(ImportReviewIdentity, { state, text })
-                },
+                }
             },
             {
                 funcName: "opening_hours_table",
@@ -889,18 +887,18 @@ export default class SpecialVisualizations {
                     {
                         name: "key",
                         defaultValue: "opening_hours",
-                        doc: "The tagkey from which the table is constructed.",
+                        doc: "The tagkey from which the table is constructed."
                     },
                     {
                         name: "prefix",
                         defaultValue: "",
-                        doc: "Remove this string from the start of the value before parsing. __Note: use `&LPARENs` to indicate `(` if needed__",
+                        doc: "Remove this string from the start of the value before parsing. __Note: use `&LPARENs` to indicate `(` if needed__"
                     },
                     {
                         name: "postfix",
                         defaultValue: "",
-                        doc: "Remove this string from the end of the value before parsing. __Note: use `&RPARENs` to indicate `)` if needed__",
-                    },
+                        doc: "Remove this string from the end of the value before parsing. __Note: use `&RPARENs` to indicate `)` if needed__"
+                    }
                 ],
                 needsUrls: [Constants.countryCoderEndpoint],
                 example:
@@ -908,7 +906,7 @@ export default class SpecialVisualizations {
                 constr: (state, tagSource: UIEventSource<any>, args) => {
                     const [key, prefix, postfix] = args
                     return new OpeningHoursVisualization(tagSource, key, prefix, postfix)
-                },
+                }
             },
             {
                 funcName: "opening_hours_state",
@@ -917,18 +915,18 @@ export default class SpecialVisualizations {
                     {
                         name: "key",
                         defaultValue: "opening_hours",
-                        doc: "The tagkey from which the opening hours are read.",
+                        doc: "The tagkey from which the opening hours are read."
                     },
                     {
                         name: "prefix",
                         defaultValue: "",
-                        doc: "Remove this string from the start of the value before parsing. __Note: use `&LPARENs` to indicate `(` if needed__",
+                        doc: "Remove this string from the start of the value before parsing. __Note: use `&LPARENs` to indicate `(` if needed__"
                     },
                     {
                         name: "postfix",
                         defaultValue: "",
-                        doc: "Remove this string from the end of the value before parsing. __Note: use `&RPARENs` to indicate `)` if needed__",
-                    },
+                        doc: "Remove this string from the end of the value before parsing. __Note: use `&RPARENs` to indicate `)` if needed__"
+                    }
                 ],
                 constr(
                     state: SpecialVisualizationState,
@@ -943,9 +941,9 @@ export default class SpecialVisualizations {
                         keyToUse,
                         tags,
                         prefix,
-                        postfix,
+                        postfix
                     })
-                },
+                }
             },
             {
                 funcName: "canonical",
@@ -957,8 +955,8 @@ export default class SpecialVisualizations {
                     {
                         name: "key",
                         doc: "The key of the tag to give the canonical text for",
-                        required: true,
-                    },
+                        required: true
+                    }
                 ],
                 constr: (state, tagSource, args) => {
                     const key = args[0]
@@ -982,7 +980,7 @@ export default class SpecialVisualizations {
                                 return unit.asHumanLongValue(value, getCountry)
                             })
                     )
-                },
+                }
             },
             {
                 funcName: "export_as_geojson",
@@ -996,7 +994,7 @@ export default class SpecialVisualizations {
                         new SvelteUIElement(ArrowDownTray),
                         new Combine([
                             t.downloadFeatureAsGeojson.SetClass("font-bold text-lg"),
-                            t.downloadGeoJsonHelper.SetClass("subtle"),
+                            t.downloadGeoJsonHelper.SetClass("subtle")
                         ]).SetClass("flex flex-col")
                     )
                         .onClick(() => {
@@ -1009,12 +1007,12 @@ export default class SpecialVisualizations {
                                 data,
                                 title + "_mapcomplete_export.geojson",
                                 {
-                                    mimetype: "application/vnd.geo+json",
+                                    mimetype: "application/vnd.geo+json"
                                 }
                             )
                         })
                         .SetClass("w-full")
-                },
+                }
             },
             {
                 funcName: "open_in_iD",
@@ -1024,9 +1022,9 @@ export default class SpecialVisualizations {
                 constr: (state, feature) => {
                     return new SvelteUIElement(OpenIdEditor, {
                         mapProperties: state.mapProperties,
-                        objectId: feature.data.id,
+                        objectId: feature.data.id
                     })
-                },
+                }
             },
             {
                 funcName: "open_in_josm",
@@ -1036,7 +1034,7 @@ export default class SpecialVisualizations {
 
                 constr: (state) => {
                     return new SvelteUIElement(OpenJosm, { state })
-                },
+                }
             },
             {
                 funcName: "clear_location_history",
@@ -1051,7 +1049,7 @@ export default class SpecialVisualizations {
                         state.historicalUserLocations.features.setData([])
                         state.selectedElement.setData(undefined)
                     })
-                },
+                }
             },
             {
                 funcName: "visualize_note_comments",
@@ -1060,13 +1058,13 @@ export default class SpecialVisualizations {
                     {
                         name: "commentsKey",
                         doc: "The property name of the comments, which should be stringified json",
-                        defaultValue: "comments",
+                        defaultValue: "comments"
                     },
                     {
                         name: "start",
                         doc: "Drop the first 'start' comments",
-                        defaultValue: "0",
-                    },
+                        defaultValue: "0"
+                    }
                 ],
                 needsUrls: [Constants.osmAuthConfig.url],
                 constr: (state, tags, args) =>
@@ -1088,7 +1086,7 @@ export default class SpecialVisualizations {
                                         )
                                 ).SetClass("flex flex-col")
                             })
-                    ),
+                    )
             },
             {
                 funcName: "add_image_to_note",
@@ -1097,8 +1095,8 @@ export default class SpecialVisualizations {
                     {
                         name: "Id-key",
                         doc: "The property name where the ID of the note to close can be found",
-                        defaultValue: "id",
-                    },
+                        defaultValue: "id"
+                    }
                 ],
                 needsUrls: [Imgur.apiUrl],
 
@@ -1107,7 +1105,7 @@ export default class SpecialVisualizations {
                     tags = state.featureProperties.getStore(id)
                     console.log("Id is", id)
                     return new SvelteUIElement(UploadImage, { state, tags })
-                },
+                }
             },
             {
                 funcName: "title",
@@ -1137,12 +1135,12 @@ export default class SpecialVisualizations {
                                 tags: tagsSource,
                                 state,
                                 feature,
-                                layer,
+                                layer
                             })
                                 .SetClass("px-1")
                                 .setSpan()
                         })
-                    ),
+                    )
             },
             {
                 funcName: "maproulette_task",
@@ -1186,7 +1184,7 @@ export default class SpecialVisualizations {
                         })
                     )
                 },
-                docs: "Fetches the metadata of MapRoulette campaign that this task is part of and shows those details (namely `title`, `description` and `instruction`).\n\nThis reads the property `mr_challengeId` to detect the parent campaign.",
+                docs: "Fetches the metadata of MapRoulette campaign that this task is part of and shows those details (namely `title`, `description` and `instruction`).\n\nThis reads the property `mr_challengeId` to detect the parent campaign."
             },
             {
                 funcName: "maproulette_set_status",
@@ -1197,15 +1195,15 @@ export default class SpecialVisualizations {
                     "\n" +
                     "```json\n" +
                     "{\n" +
-                    '   "id": "mark_duplicate",\n' +
-                    '   "render": {\n' +
-                    '      "special": {\n' +
-                    '         "type": "maproulette_set_status",\n' +
-                    '         "message": {\n' +
-                    '            "en": "Mark as not found or false positive"\n' +
+                    "   \"id\": \"mark_duplicate\",\n" +
+                    "   \"render\": {\n" +
+                    "      \"special\": {\n" +
+                    "         \"type\": \"maproulette_set_status\",\n" +
+                    "         \"message\": {\n" +
+                    "            \"en\": \"Mark as not found or false positive\"\n" +
                     "         },\n" +
-                    '         "status": "2",\n' +
-                    '         "image": "close"\n' +
+                    "         \"status\": \"2\",\n" +
+                    "         \"image\": \"close\"\n" +
                     "      }\n" +
                     "   }\n" +
                     "}\n" +
@@ -1213,32 +1211,32 @@ export default class SpecialVisualizations {
                 args: [
                     {
                         name: "message",
-                        doc: "A message to show to the user",
+                        doc: "A message to show to the user"
                     },
                     {
                         name: "image",
                         doc: "Image to show",
-                        defaultValue: "confirm",
+                        defaultValue: "confirm"
                     },
                     {
                         name: "message_confirm",
-                        doc: "What to show when the task is closed, either by the user or was already closed.",
+                        doc: "What to show when the task is closed, either by the user or was already closed."
                     },
                     {
                         name: "status",
                         doc: "A statuscode to apply when the button is clicked. 1 = `close`, 2 = `false_positive`, 3 = `skip`, 4 = `deleted`, 5 = `already fixed` (on the map, e.g. for duplicates), 6 = `too hard`",
-                        defaultValue: "1",
+                        defaultValue: "1"
                     },
                     {
                         name: "maproulette_id",
                         doc: "The property name containing the maproulette id",
-                        defaultValue: "mr_taskId",
+                        defaultValue: "mr_taskId"
                     },
                     {
                         name: "ask_feedback",
                         doc: "If not an empty string, this will be used as question to ask some additional feedback. A text field will be added",
-                        defaultValue: "",
-                    },
+                        defaultValue: ""
+                    }
                 ],
 
                 constr: (state, tagsSource, args) => {
@@ -1248,7 +1246,7 @@ export default class SpecialVisualizations {
                         message_closed,
                         statusToSet,
                         maproulette_id_key,
-                        askFeedback,
+                        askFeedback
                     ] = args
                     if (image === "") {
                         image = "confirm"
@@ -1265,9 +1263,9 @@ export default class SpecialVisualizations {
                         message_closed,
                         statusToSet,
                         maproulette_id_key,
-                        askFeedback,
+                        askFeedback
                     })
-                },
+                }
             },
             {
                 funcName: "statistics",
@@ -1294,7 +1292,7 @@ export default class SpecialVisualizations {
                                 [state.mapProperties.bounds]
                             )
                     )
-                },
+                }
             },
             {
                 funcName: "send_email",
@@ -1303,29 +1301,29 @@ export default class SpecialVisualizations {
                     {
                         name: "to",
                         doc: "Who to send the email to?",
-                        required: true,
+                        required: true
                     },
                     {
                         name: "subject",
                         doc: "The subject of the email",
-                        required: true,
+                        required: true
                     },
                     {
                         name: "body",
                         doc: "The text in the email",
-                        required: true,
+                        required: true
                     },
 
                     {
                         name: "button_text",
                         doc: "The text shown on the button in the UI",
-                        required: true,
-                    },
+                        required: true
+                    }
                 ],
 
                 constr(__, tags, args) {
                     return new SvelteUIElement(SendEmail, { args, tags })
-                },
+                }
             },
             {
                 funcName: "link",
@@ -1334,36 +1332,36 @@ export default class SpecialVisualizations {
                     {
                         name: "text",
                         doc: "Text to be shown",
-                        required: true,
+                        required: true
                     },
                     {
                         name: "href",
                         doc: "The URL to link to. Note that this will be URI-encoded before ",
-                        required: true,
+                        required: true
                     },
                     {
                         name: "class",
-                        doc: "CSS-classes to add to the element",
+                        doc: "CSS-classes to add to the element"
                     },
                     {
                         name: "download",
-                        doc: "Expects a string which denotes the filename to download the contents of `href` into. If set, this link will act as a download-button.",
+                        doc: "Expects a string which denotes the filename to download the contents of `href` into. If set, this link will act as a download-button."
                     },
                     {
                         name: "arialabel",
-                        doc: "If set, this text will be used as aria-label",
+                        doc: "If set, this text will be used as aria-label"
                     },
                     {
                         name: "icon",
-                        doc: "If set, show this icon next to the link. You might want to combine this with `class: button`",
-                    },
+                        doc: "If set, show this icon next to the link. You might want to combine this with `class: button`"
+                    }
                 ],
 
                 constr(
                     state: SpecialVisualizationState,
                     tagSource: UIEventSource<Record<string, string>>,
                     args: string[]
-                ): BaseUIElement {
+                ): SvelteUIElement {
                     let [text, href, classnames, download, ariaLabel, icon] = args
                     if (download === "") {
                         download = undefined
@@ -1371,11 +1369,7 @@ export default class SpecialVisualizations {
                     const newTab = download === undefined && !href.startsWith("#")
                     const textStore = tagSource.map((tags) => Utils.SubstituteKeys(text, tags))
                     const hrefStore = tagSource.map(
-                        (tags) =>
-                            Utils.SubstituteKeys(href, tags).replaceAll(
-                                / /g,
-                                "%20"
-                            ) /* Chromium based browsers eat the spaces */
+                        (tags) => Utils.SubstituteKeys(href, tags)
                     )
                     return new SvelteUIElement(DynLink, {
                         text: textStore,
@@ -1384,9 +1378,9 @@ export default class SpecialVisualizations {
                         download: tagSource.map((tags) => Utils.SubstituteKeys(download, tags)),
                         ariaLabel: tagSource.map((tags) => Utils.SubstituteKeys(ariaLabel, tags)),
                         newTab: new ImmutableStore(newTab),
-                        icon: tagSource.map((tags) => Utils.SubstituteKeys(icon, tags)),
+                        icon: tagSource.map((tags) => Utils.SubstituteKeys(icon, tags))
                     }).setSpan()
-                },
+                }
             },
             {
                 funcName: "multi",
@@ -1400,10 +1394,10 @@ export default class SpecialVisualizations {
                                     type: "multi",
                                     key: "_doors_from_building_properties",
                                     tagrendering: {
-                                        en: "The building containing this feature has a <a href='#{id}'>door</a> of width {entrance:width}",
-                                    },
-                                },
-                            },
+                                        en: "The building containing this feature has a <a href='#{id}'>door</a> of width {entrance:width}"
+                                    }
+                                }
+                            }
                         },
                         null,
                         "  "
@@ -1413,17 +1407,17 @@ export default class SpecialVisualizations {
                     {
                         name: "key",
                         doc: "The property to read and to interpret as a list of properties",
-                        required: true,
+                        required: true
                     },
                     {
                         name: "tagrendering",
                         doc: "An entire tagRenderingConfig",
-                        required: true,
+                        required: true
                     },
                     {
                         name: "classes",
-                        doc: "CSS-classes to apply on every individual item. Seperated by `space`",
-                    },
+                        doc: "CSS-classes to apply on every individual item. Seperated by `space`"
+                    }
                 ],
                 constr(
                     state: SpecialVisualizationState,
@@ -1459,14 +1453,14 @@ export default class SpecialVisualizations {
                                     tags: new ImmutableStore(property),
                                     state,
                                     feature,
-                                    layer,
+                                    layer
                                 }).SetClass(classes)
                                 elements.push(subsTr)
                             }
                             return elements
                         })
                     )
-                },
+                }
             },
             {
                 funcName: "translated",
@@ -1476,8 +1470,8 @@ export default class SpecialVisualizations {
                     {
                         name: "key",
                         doc: "The attribute to interpret as json",
-                        defaultValue: "value",
-                    },
+                        defaultValue: "value"
+                    }
                 ],
                 constr(
                     state: SpecialVisualizationState,
@@ -1498,7 +1492,7 @@ export default class SpecialVisualizations {
                             }
                         })
                     )
-                },
+                }
             },
             {
                 funcName: "fediverse_link",
@@ -1507,8 +1501,8 @@ export default class SpecialVisualizations {
                     {
                         name: "key",
                         doc: "The attribute-name containing the link",
-                        required: true,
-                    },
+                        required: true
+                    }
                 ],
 
                 constr(
@@ -1532,13 +1526,13 @@ export default class SpecialVisualizations {
                                 const normalLink = new SvelteUIElement(Link, {
                                     text: fediAccount,
                                     href: "https://" + host + "/@" + username,
-                                    newTab: true,
+                                    newTab: true
                                 })
 
                                 const loggedInContributorMastodon =
                                     state.userRelatedState?.preferencesAsTags?.data?.[
                                         "_mastodon_link"
-                                    ]
+                                        ]
                                 console.log(
                                     "LoggedinContributorMastodon",
                                     loggedInContributorMastodon
@@ -1554,12 +1548,12 @@ export default class SpecialVisualizations {
                                     new SvelteUIElement(Link, {
                                         href: homeHost + "/" + fediAccount,
                                         text: Translations.t.validation.fediverse.onYourServer,
-                                        newTab: true,
-                                    }).SetClass("button"),
+                                        newTab: true
+                                    }).SetClass("button")
                                 ])
                             })
                     )
-                },
+                }
             },
             {
                 funcName: "braced",
@@ -1569,8 +1563,8 @@ export default class SpecialVisualizations {
                     {
                         name: "text",
                         required: true,
-                        doc: "The value to show",
-                    },
+                        doc: "The value to show"
+                    }
                 ],
                 constr(
                     state: SpecialVisualizationState,
@@ -1580,7 +1574,7 @@ export default class SpecialVisualizations {
                     layer: LayerConfig
                 ): BaseUIElement {
                     return new FixedUiElement("{" + args[0] + "}")
-                },
+                }
             },
             {
                 funcName: "tags",
@@ -1590,8 +1584,8 @@ export default class SpecialVisualizations {
                     {
                         name: "key",
                         defaultValue: "value",
-                        doc: "The key to look for the tags",
-                    },
+                        doc: "The key to look for the tags"
+                    }
                 ],
                 constr(
                     state: SpecialVisualizationState,
@@ -1616,14 +1610,14 @@ export default class SpecialVisualizations {
                             } catch (e) {
                                 return new FixedUiElement(
                                     "Could not parse this tag: " +
-                                        JSON.stringify(value) +
-                                        " due to " +
-                                        e
+                                    JSON.stringify(value) +
+                                    " due to " +
+                                    e
                                 ).SetClass("alert")
                             }
                         })
                     )
-                },
+                }
             },
             {
                 funcName: "giggity",
@@ -1631,8 +1625,8 @@ export default class SpecialVisualizations {
                     {
                         name: "giggityUrl",
                         required: true,
-                        doc: "The URL of the giggity-XML",
-                    },
+                        doc: "The URL of the giggity-XML"
+                    }
                 ],
                 docs: "Shows events that are happening based on a Giggity URL",
                 needsUrls: (args) => args[0],
@@ -1646,7 +1640,7 @@ export default class SpecialVisualizations {
                 ): BaseUIElement {
                     const giggityUrl = argument[0]
                     return new SvelteUIElement(Giggity, { tags: tagSource, state, giggityUrl })
-                },
+                }
             },
             {
                 funcName: "gps_all_tags",
@@ -1669,10 +1663,10 @@ export default class SpecialVisualizations {
                         new SvelteUIElement(OrientationDebugPanel, {}),
                         new SvelteUIElement(AllTagsPanel, {
                             state,
-                            tags,
-                        }),
+                            tags
+                        })
                     ])
-                },
+                }
             },
             {
                 funcName: "favourite_status",
@@ -1691,9 +1685,9 @@ export default class SpecialVisualizations {
                         tags: tagSource,
                         state,
                         layer,
-                        feature,
+                        feature
                     })
-                },
+                }
             },
             {
                 funcName: "favourite_icon",
@@ -1711,9 +1705,9 @@ export default class SpecialVisualizations {
                         tags: tagSource,
                         state,
                         layer,
-                        feature,
+                        feature
                     }).SetClass("w-full h-full")
-                },
+                }
             },
             {
                 funcName: "direction_indicator",
@@ -1728,7 +1722,7 @@ export default class SpecialVisualizations {
                     layer: LayerConfig
                 ): BaseUIElement {
                     return new SvelteUIElement(DirectionIndicator, { state, feature })
-                },
+                }
             },
             {
                 funcName: "qr_code",
@@ -1741,7 +1735,7 @@ export default class SpecialVisualizations {
                     feature: Feature
                 ): SvelteUIElement {
                     return new SvelteUIElement(QrCode, { state, tags, feature })
-                },
+                }
             },
             {
                 funcName: "direction_absolute",
@@ -1750,8 +1744,8 @@ export default class SpecialVisualizations {
                     {
                         name: "key",
                         doc: "The attribute containing the degrees",
-                        defaultValue: "_direction:centerpoint",
-                    },
+                        defaultValue: "_direction:centerpoint"
+                    }
                 ],
 
                 constr(
@@ -1774,7 +1768,7 @@ export default class SpecialVisualizations {
                                 return Translations.t.general.visualFeedback.directionsAbsolute[dir]
                             })
                     )
-                },
+                }
             },
             {
                 funcName: "compare_data",
@@ -1783,18 +1777,18 @@ export default class SpecialVisualizations {
                     {
                         name: "url",
                         required: true,
-                        doc: "The attribute containing the url where to fetch more data",
+                        doc: "The attribute containing the url where to fetch more data"
                     },
                     {
                         name: "host",
                         required: true,
-                        doc: "The domain name(s) where data might be fetched from - this is needed to set the CSP. A domain must include 'https', e.g. 'https://example.com'. For multiple domains, separate them with ';'. If you don't know the possible domains, use '*'. ",
+                        doc: "The domain name(s) where data might be fetched from - this is needed to set the CSP. A domain must include 'https', e.g. 'https://example.com'. For multiple domains, separate them with ';'. If you don't know the possible domains, use '*'. "
                     },
                     {
                         name: "readonly",
                         required: false,
-                        doc: "If 'yes', will not show 'apply'-buttons",
-                    },
+                        doc: "If 'yes', will not show 'apply'-buttons"
+                    }
                 ],
                 docs: "Gives an interactive element which shows a tag comparison between the OSM-object and the upstream object. This allows to copy some or all tags into OSM",
                 constr(
@@ -1814,9 +1808,9 @@ export default class SpecialVisualizations {
                         layer,
                         feature,
                         readonly,
-                        externalData,
+                        externalData
                     })
-                },
+                }
             },
             {
                 funcName: "login_button",
@@ -1835,7 +1829,7 @@ export default class SpecialVisualizations {
                         new SvelteUIElement(LoginButton, { osmConnection: state.osmConnection }),
                         state.osmConnection.isLoggedIn
                     )
-                },
+                }
             },
             {
                 funcName: "linked_data_from_website",
@@ -1844,26 +1838,26 @@ export default class SpecialVisualizations {
                     {
                         name: "key",
                         defaultValue: "website",
-                        doc: "Attempt to load ld+json from the specified URL. This can be in an embedded <script type='ld+json'>",
+                        doc: "Attempt to load ld+json from the specified URL. This can be in an embedded <script type='ld+json'>"
                     },
                     {
                         name: "useProxy",
                         defaultValue: "yes",
-                        doc: "If 'yes', uses the provided proxy server. This proxy server will scrape HTML and search for a script with `lang='ld+json'`. If `no`, the data will be downloaded and expects a linked-data-json directly",
+                        doc: "If 'yes', uses the provided proxy server. This proxy server will scrape HTML and search for a script with `lang='ld+json'`. If `no`, the data will be downloaded and expects a linked-data-json directly"
                     },
                     {
                         name: "host",
-                        doc: "If not using a proxy, define what host the website is allowed to connect to",
+                        doc: "If not using a proxy, define what host the website is allowed to connect to"
                     },
                     {
                         name: "mode",
-                        doc: "If `display`, only show the data in tabular and readonly form, ignoring already existing tags. This is used to explicitly show all the tags. If unset or anything else, allow to apply/import on OSM",
+                        doc: "If `display`, only show the data in tabular and readonly form, ignoring already existing tags. This is used to explicitly show all the tags. If unset or anything else, allow to apply/import on OSM"
                     },
                     {
                         name: "collapsed",
                         defaultValue: "yes",
-                        doc: "If the containing accordion should be closed",
-                    },
+                        doc: "If the containing accordion should be closed"
+                    }
                 ],
                 needsUrls: [Constants.linkedDataProxy, "http://www.schema.org"],
                 constr(
@@ -1953,12 +1947,12 @@ export default class SpecialVisualizations {
                             externalData,
                             sourceUrl,
                             readonly,
-                            collapsed: isClosed,
+                            collapsed: isClosed
                         }),
                         undefined,
                         url.map((url) => !!url)
                     )
-                },
+                }
             },
             {
                 funcName: "if_nothing_known",
@@ -1966,9 +1960,9 @@ export default class SpecialVisualizations {
                     {
                         name: "text",
                         doc: "Text to show",
-                        required: true,
+                        required: true
                     },
-                    { name: "cssClasses", doc: "Classes to apply onto the text" },
+                    { name: "cssClasses", doc: "Classes to apply onto the text" }
                 ],
                 docs: "Shows a 'nothing is currently known-message if there is at least one unanswered question and no known (answerable) question",
                 constr(
@@ -1985,9 +1979,9 @@ export default class SpecialVisualizations {
                         tags: tagSource,
                         layer,
                         text,
-                        cssClasses,
+                        cssClasses
                     })
-                },
+                }
             },
             {
                 funcName: "preset_description",
@@ -2029,7 +2023,7 @@ export default class SpecialVisualizations {
                         return mostShadowed?.description ?? matchingPresets[0]?.description
                     })
                     return new VariableUiElement(translation)
-                },
+                }
             },
             {
                 funcName: "pending_changes",
@@ -2043,7 +2037,7 @@ export default class SpecialVisualizations {
                     layer: LayerConfig
                 ): BaseUIElement {
                     return new SvelteUIElement(PendingChangesIndicator, { state, compact: false })
-                },
+                }
             },
             {
                 funcName: "clear_caches",
@@ -2052,8 +2046,8 @@ export default class SpecialVisualizations {
                     {
                         name: "text",
                         required: true,
-                        doc: "The text to show on the button",
-                    },
+                        doc: "The text to show on the button"
+                    }
                 ],
                 constr(
                     state: SpecialVisualizationState,
@@ -2063,9 +2057,9 @@ export default class SpecialVisualizations {
                     layer: LayerConfig
                 ): SvelteUIElement {
                     return new SvelteUIElement<any, any, any>(ClearCaches, {
-                        msg: argument[0] ?? "Clear local caches",
+                        msg: argument[0] ?? "Clear local caches"
                     })
-                },
+                }
             },
             {
                 funcName: "group",
@@ -2073,12 +2067,12 @@ export default class SpecialVisualizations {
                 args: [
                     {
                         name: "header",
-                        doc: "The _identifier_ of a single tagRendering. This will be used as header",
+                        doc: "The _identifier_ of a single tagRendering. This will be used as header"
                     },
                     {
                         name: "labels",
-                        doc: "A `;`-separated list of either identifiers or label names. All tagRenderings matching this value will be shown in the accordion",
-                    },
+                        doc: "A `;`-separated list of either identifiers or label names. All tagRenderings matching this value will be shown in the accordion"
+                    }
                 ],
                 constr(
                     state: SpecialVisualizationState,
@@ -2095,9 +2089,9 @@ export default class SpecialVisualizations {
                         selectedElement,
                         layer,
                         header,
-                        labels,
+                        labels
                     })
-                },
+                }
             },
             {
                 funcName: "preset_type_select",
@@ -2119,9 +2113,9 @@ export default class SpecialVisualizations {
                             icon: "auto",
                             then: (pr.description ? t.typeDescription : t.typeTitle).Subs({
                                 title: pr.title,
-                                description: pr.description,
-                            }).translations,
-                        })),
+                                description: pr.description
+                            }).translations
+                        }))
                     }
                     const config = new TagRenderingConfig(question)
                     return new SvelteUIElement(TagRenderingEditable, {
@@ -2129,10 +2123,10 @@ export default class SpecialVisualizations {
                         tags,
                         selectedElement,
                         state,
-                        layer,
+                        layer
                     })
-                },
-            },
+                }
+            }
         ]
 
         specialVisualizations.push(new AutoApplyButton(specialVisualizations))
@@ -2147,7 +2141,7 @@ export default class SpecialVisualizations {
                 "Invalid special visualisation found: funcName is undefined or doesn't match " +
                 regex +
                 invalid.map((sp) => sp.i).join(", ") +
-                '. Did you perhaps type \n  funcName: "funcname" // type declaration uses COLON\ninstead of:\n  funcName = "funcName" // value definition uses EQUAL'
+                ". Did you perhaps type \n  funcName: \"funcname\" // type declaration uses COLON\ninstead of:\n  funcName = \"funcName\" // value definition uses EQUAL"
             )
         }
 
diff --git a/src/Utils.ts b/src/Utils.ts
index 874b327b4..f90c51f55 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -114,7 +114,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
         "version",
         "wayHandling",
         "widenFactor",
-        "width",
+        "width"
     ]
     private static extraKeys = [
         "nl",
@@ -133,7 +133,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
         "yes",
         "no",
         "true",
-        "false",
+        "false"
     ]
     private static injectedDownloads = {}
     private static _download_cache = new Map<
@@ -150,7 +150,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
         if (Utils.runningFromConsole) {
             return
         }
-        DOMPurify.addHook("afterSanitizeAttributes", function (node) {
+        DOMPurify.addHook("afterSanitizeAttributes", function(node) {
             // set all elements owning target to target=_blank + add noopener noreferrer
             const target = node.getAttribute("target")
             if (target) {
@@ -163,7 +163,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
     public static purify(src: string): string {
         return DOMPurify.sanitize(src, {
             USE_PROFILES: { html: true },
-            ADD_ATTR: ["target"], // Don't remove target='_blank'. Note that Utils.initDomPurify does add a hook which automatically adds 'rel=noopener'
+            ADD_ATTR: ["target"] // Don't remove target='_blank'. Note that Utils.initDomPurify does add a hook which automatically adds 'rel=noopener'
         })
     }
 
@@ -344,7 +344,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
                     console.error("Error while calculating a lazy property", e)
                     return undefined
                 }
-            },
+            }
         })
     }
 
@@ -368,7 +368,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
                         whenDone()
                     }
                 })
-            },
+            }
         })
     }
 
@@ -651,7 +651,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
                     if (!Array.isArray(targetV)) {
                         throw new Error(
                             "Cannot concatenate: value to add is not an array: " +
-                                JSON.stringify(targetV)
+                            JSON.stringify(targetV)
                         )
                     }
                     if (Array.isArray(sourceV)) {
@@ -659,9 +659,9 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
                     } else {
                         throw new Error(
                             "Could not merge concatenate " +
-                                JSON.stringify(sourceV) +
-                                " and " +
-                                JSON.stringify(targetV)
+                            JSON.stringify(sourceV) +
+                            " and " +
+                            JSON.stringify(targetV)
                         )
                     }
                 } else {
@@ -922,7 +922,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
                 continue
             }
             const i = part.charCodeAt(0)
-            result += '"' + keys[i] + '":' + part.substring(1)
+            result += "\"" + keys[i] + "\":" + part.substring(1)
         }
 
         return result
@@ -960,6 +960,11 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
             if (!result["error"]) {
                 return result
             }
+            const error = result.error
+            if (error.statuscode === 429 || error.statuscode === 509) {
+                // rate limited
+                return result
+            }
             console.log(
                 `Request to ${url} failed, Trying again in a moment. Attempt ${
                     i + 1
@@ -1000,7 +1005,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
                     resolve({
                         error: "other error: " + xhr.statusText + ", " + xhr.responseText,
                         url,
-                        statuscode: xhr.status,
+                        statuscode: xhr.status
                     })
                 }
             }
@@ -1014,12 +1019,12 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
             xhr.onerror = (ev: ProgressEvent<EventTarget>) =>
                 reject(
                     "Could not get " +
-                        url +
-                        ", xhr status code is " +
-                        xhr.status +
-                        " (" +
-                        xhr.statusText +
-                        ")"
+                    url +
+                    ", xhr status code is " +
+                    xhr.status +
+                    " (" +
+                    xhr.statusText +
+                    ")"
                 )
         })
     }
@@ -1077,12 +1082,13 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
         }
         const promise =
             /*NO AWAIT as we work with the promise directly */ Utils.downloadJsonAdvanced<T>(
-                url,
-                headers
-            )
+            url,
+            headers
+        )
         Utils._download_cache.set(url, { promise, timestamp: new Date().getTime() })
         return await promise
     }
+
     public static async downloadJson<T = object | []>(
         url: string,
         headers?: Record<string, string>
@@ -1271,7 +1277,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
     ): T[] {
         const withDistance: [T, number][] = ts.map((t) => [
             t,
-            Utils.levenshteinDistance(getName(t), reference),
+            Utils.levenshteinDistance(getName(t), reference)
         ])
         withDistance.sort(([_, a], [__, b]) => a - b)
         return withDistance.map((n) => n[0])
@@ -1393,7 +1399,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
             return {
                 r: Utils.percentageToNumber(match[1]),
                 g: Utils.percentageToNumber(match[2]),
-                b: Utils.percentageToNumber(match[3]),
+                b: Utils.percentageToNumber(match[3])
             }
         }
 
@@ -1404,14 +1410,14 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
             return {
                 r: parseInt(hex.substr(1, 1), 16),
                 g: parseInt(hex.substr(2, 1), 16),
-                b: parseInt(hex.substr(3, 1), 16),
+                b: parseInt(hex.substr(3, 1), 16)
             }
         }
 
         return {
             r: parseInt(hex.substr(1, 2), 16),
             g: parseInt(hex.substr(3, 2), 16),
-            b: parseInt(hex.substr(5, 2), 16),
+            b: parseInt(hex.substr(5, 2), 16)
         }
     }
 
@@ -1586,7 +1592,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
             line: Number(line),
             column: Number(column),
             markdownLocation,
-            filename: path.substring(path.lastIndexOf("/") + 1),
+            filename: path.substring(path.lastIndexOf("/") + 1)
         }
     }
 
@@ -1705,6 +1711,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
     }
 
     private static readonly _metrixPrefixes = ["", "k", "M", "G", "T", "P", "E"]
+
     /**
      * Converts a big number (e.g. 1000000) into a rounded postfixed verion (e.g. 1M)
      *
@@ -1727,6 +1734,26 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
         }
     }
 
+    /**
+     * Removes or rewrites some characters in links, as some blink/chromium based browsers are picky about them
+     *
+     * Utils.prepareHref("tel:+32 123 456") // => "tel:+32123456"
+     * Utils.prepareHref("https://osm.org/user/User Name") // => "https://osm.org/user/User%20Name"
+     */
+    static prepareHref(href: string): string {
+        if (href.startsWith("tel:")) {
+            // Telephone numbers are not allowed to contain spaces in chromium-based browsers
+            href = "tel:" + href.replaceAll(/[^+0-9]/g, "")
+        }
+
+        /* Chromium based browsers eat the spaces */
+        href = href.replaceAll(
+            / /g,
+            "%20"
+        )
+        return href
+    }
+
     private static emojiRegex = /[\p{Extended_Pictographic}🛰️]$/u
 
     /**

From ac632206e9e2a5634ad537a86f2c8007fbffc919 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Wed, 28 Aug 2024 14:23:51 +0200
Subject: [PATCH 04/10] Chore: formatting

---
 assets/layers/questions/questions.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/assets/layers/questions/questions.json b/assets/layers/questions/questions.json
index 5e979b128..633d151e6 100644
--- a/assets/layers/questions/questions.json
+++ b/assets/layers/questions/questions.json
@@ -175,17 +175,17 @@
         "cs": "Jaké je telefonní číslo {title()}?"
       },
       "render": {
-          "special": {
-            "type": "link",
-            "href": "tel:{phone}",
-            "text": "{phone}"
-          }
+        "special": {
+          "type": "link",
+          "href": "tel:{phone}",
+          "text": "{phone}"
+        }
       },
       "icon": "./assets/layers/questions/phone.svg",
       "mappings": [
         {
           "if": "contact:phone~*",
-          "then":{
+          "then": {
             "special": {
               "type": "link",
               "href": "tel:{contact:phone}",

From 8465b59c7f4ece18b830899e9cc7b680ae100c13 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Wed, 28 Aug 2024 15:07:18 +0200
Subject: [PATCH 05/10] UX: improve attribution display, add magnifying class

---
 langs/en.json                        |  1 +
 public/css/index-tailwind-output.css | 32 +++++++------
 src/UI/Image/AttributedImage.svelte  | 29 ++++++++----
 src/UI/Image/ImageAttribution.svelte | 67 +++++++++++++++++-----------
 src/UI/Image/ImageOperations.svelte  |  4 +-
 src/UI/Image/LinkableImage.svelte    | 26 ++++++-----
 src/UI/Image/NearbyImages.svelte     |  2 +-
 7 files changed, 97 insertions(+), 64 deletions(-)

diff --git a/langs/en.json b/langs/en.json
index 23b50736e..c37154f37 100644
--- a/langs/en.json
+++ b/langs/en.json
@@ -193,6 +193,7 @@
             },
             "josmNotOpened": "JOSM could not be reached. Make sure it is opened and remote control is enabled",
             "josmOpened": "JOSM is opened",
+            "madeBy": "Mady by <b>{author}</b>",
             "mapContributionsBy": "The current visible data has edits made by {contributors}",
             "mapContributionsByAndHidden": "The current visible data has edits made by {contributors} and {hiddenCount} more contributors",
             "mapDataByOsm": "Map data: OpenStreetMap",
diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css
index a17c7a81a..d31b30538 100644
--- a/public/css/index-tailwind-output.css
+++ b/public/css/index-tailwind-output.css
@@ -2073,6 +2073,12 @@ video {
   margin-bottom: calc(0px * var(--tw-space-y-reverse));
 }
 
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -2097,12 +2103,6 @@ video {
   margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.space-x-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(1rem * var(--tw-space-x-reverse));
-  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
 .space-y-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2431,6 +2431,10 @@ video {
   border-top-right-radius: 0.25rem;
 }
 
+.rounded-bl-full {
+  border-bottom-left-radius: 9999px;
+}
+
 .rounded-tl {
   border-top-left-radius: 0.25rem;
 }
@@ -3454,6 +3458,14 @@ video {
   padding-top: 0px;
 }
 
+.pl-3 {
+  padding-left: 0.75rem;
+}
+
+.pb-3 {
+  padding-bottom: 0.75rem;
+}
+
 .pl-4 {
   padding-left: 1rem;
 }
@@ -3462,14 +3474,6 @@ video {
   padding-right: 1rem;
 }
 
-.pl-3 {
-  padding-left: 0.75rem;
-}
-
-.pr-3 {
-  padding-right: 0.75rem;
-}
-
 .pl-1 {
   padding-left: 0.25rem;
 }
diff --git a/src/UI/Image/AttributedImage.svelte b/src/UI/Image/AttributedImage.svelte
index 5c64ccfdc..c95b45d2b 100644
--- a/src/UI/Image/AttributedImage.svelte
+++ b/src/UI/Image/AttributedImage.svelte
@@ -6,6 +6,7 @@
   import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
   import { Mapillary } from "../../Logic/ImageProviders/Mapillary"
   import { UIEventSource } from "../../Logic/UIEventSource"
+  import { MagnifyingGlassPlusIcon } from "@babeard/svelte-heroicons/outline"
 
   export let image: Partial<ProvidedImage>
   let fallbackImage: string = undefined
@@ -16,25 +17,35 @@
   let imgEl: HTMLImageElement
   export let imgClass: string = undefined
   export let previewedImage: UIEventSource<ProvidedImage> = undefined
+  export let attributionFormat: "minimal" | "medium" | "large" = "medium"
+  let canZoom = previewedImage !== undefined // We check if there is a SOURCE, not if there is data in it!
 </script>
 
 <div class="relative shrink-0">
-  <img
-    bind:this={imgEl}
-    class={imgClass ?? ""}
-    class:cursor-pointer={previewedImage !== undefined}
-    on:click={() => {
+  <div class="relative w-fit">
+    <img
+      bind:this={imgEl}
+      class={imgClass ?? ""}
+      class:cursor-zoom-in={previewedImage !== undefined}
+      on:click={() => {
       previewedImage?.setData(image)
     }}
-    on:error={() => {
+      on:error={() => {
       if (fallbackImage) {
         imgEl.src = fallbackImage
       }
     }}
-    src={image.url}
-  />
+      src={image.url}
+    />
 
+    {#if canZoom}
+      <div class="absolute right-0 top-0 bg-black-transparent rounded-bl-full">
+      <MagnifyingGlassPlusIcon class="w-8 h-8 pl-3 pb-3 cursor-zoom-in" color="white" />
+      </div>
+    {/if}
+
+  </div>
   <div class="absolute bottom-0 left-0">
-    <ImageAttribution {image} />
+    <ImageAttribution {image} {attributionFormat} />
   </div>
 </div>
diff --git a/src/UI/Image/ImageAttribution.svelte b/src/UI/Image/ImageAttribution.svelte
index b62ce1baf..cd7c9847a 100644
--- a/src/UI/Image/ImageAttribution.svelte
+++ b/src/UI/Image/ImageAttribution.svelte
@@ -4,11 +4,15 @@
   import { Store, UIEventSource } from "../../Logic/UIEventSource"
   import ToSvelte from "../Base/ToSvelte.svelte"
   import { EyeIcon } from "@rgossiaux/svelte-heroicons/solid"
+  import Tr from "../Base/Tr.svelte"
+  import Translations from "../i18n/Translations"
 
   /**
    * A small element showing the attribution of a single image
    */
   export let image: Partial<ProvidedImage> & { id: string; url: string }
+  export let attributionFormat: "minimal" | "medium" | "large" = "medium"
+
   let license: Store<LicenseInfo> = UIEventSource.FromPromise(
     image.provider?.DownloadAttribution(image)
   )
@@ -16,50 +20,59 @@
 </script>
 
 {#if $license !== undefined}
-  <div class="no-images flex items-center rounded-lg bg-black p-0.5 pl-3 pr-3 text-sm text-white">
+  <div class="no-images flex items-center rounded-lg bg-black-transparent p-0.5 px-3 text-sm text-white">
     {#if icon !== undefined}
       <div class="mr-2 h-6 w-6">
         <ToSvelte construct={icon} />
       </div>
     {/if}
 
-    <div class="flex flex-col">
-      {#if $license.title}
-        {#if $license.informationLocation}
-          <a href={$license.informationLocation.href} target="_blank" rel="noopener nofollower">
-            {$license.title}
-          </a>
-        {:else}
-          $license.title
+    <div class="flex gap-x-2" class:flex-col={attributionFormat !== "minimal"}>
+      {#if attributionFormat !== "minimal" }
+        {#if $license.title}
+          {#if $license.informationLocation}
+            <a href={$license.informationLocation.href} target="_blank" rel="noopener nofollower">
+              {$license.title}
+            </a>
+          {:else}
+            $license.title
+          {/if}
         {/if}
       {/if}
 
       {#if $license.artist}
-        <div class="font-bold">
-          {@html $license.artist}
-        </div>
+        {#if attributionFormat === "large"}
+          <Tr t={Translations.t.general.attribution.madeBy.Subs({author: $license.artist})} />
+        {:else}
+          <div class="font-bold">
+            {@html $license.artist}
+          </div>
+        {/if}
       {/if}
 
-      <div class="flex w-full justify-between gap-x-1">
-        {#if $license.license !== undefined || $license.licenseShortName !== undefined}
-          <div>
-            {$license?.license ?? $license?.licenseShortName}
-          </div>
-        {/if}
-
-        {#if $license.views}
-          <div class="flex justify-around self-center">
-            <EyeIcon class="h-4 w-4 pr-1" />
-            {$license.views}
-          </div>
-        {/if}
-      </div>
-
       {#if $license.date}
         <div>
           {$license.date.toLocaleDateString()}
         </div>
       {/if}
+
+      {#if attributionFormat !== "minimal"}
+        <div class="flex w-full justify-between gap-x-1">
+          {#if ($license.license !== undefined || $license.licenseShortName !== undefined)}
+            <div>
+              {$license?.license ?? $license?.licenseShortName}
+            </div>
+          {/if}
+
+          {#if $license.views}
+            <div class="flex justify-around self-center text-xs">
+              <EyeIcon class="h-4 w-4 pr-1" />
+              {$license.views}
+            </div>
+          {/if}
+        </div>
+      {/if}
+
     </div>
   </div>
 {/if}
diff --git a/src/UI/Image/ImageOperations.svelte b/src/UI/Image/ImageOperations.svelte
index 0152e9cf5..7d131e2e0 100644
--- a/src/UI/Image/ImageOperations.svelte
+++ b/src/UI/Image/ImageOperations.svelte
@@ -38,9 +38,9 @@
     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 opacity-50 transition-colors duration-200 hover:opacity-100"
+      class="pointer-events-auto m-1 w-fit transition-colors duration-200"
     >
-      <ImageAttribution {image} />
+      <ImageAttribution {image} attributionFormat="large"/>
     </div>
 
     <button
diff --git a/src/UI/Image/LinkableImage.svelte b/src/UI/Image/LinkableImage.svelte
index d1abd41d3..da3cbfbf6 100644
--- a/src/UI/Image/LinkableImage.svelte
+++ b/src/UI/Image/LinkableImage.svelte
@@ -14,6 +14,8 @@
   import AttributedImage from "./AttributedImage.svelte"
   import SpecialTranslation from "../Popup/TagRendering/SpecialTranslation.svelte"
   import LoginToggle from "../Base/LoginToggle.svelte"
+  import ImagePreview from "./ImagePreview.svelte"
+  import FloatOver from "../Base/FloatOver.svelte"
 
   export let tags: UIEventSource<OsmTags>
   export let state: SpecialVisualizationState
@@ -31,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) {
@@ -42,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 {
@@ -51,24 +53,26 @@
         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)
         }
       }
     }
   }
+
   isLinked.addCallback((isLinked) => applyLink(isLinked))
+
 </script>
 
-<div class="flex w-fit shrink-0 flex-col">
-  <div class="cursor-zoom-in" on:click={() => state.previewedImage.setData(providedImage)}>
-    <AttributedImage
-      image={providedImage}
-      imgClass="max-h-64 w-auto"
-      previewedImage={state.previewedImage}
-    />
-  </div>
+<div class="flex w-fit shrink-0 flex-col rounded-lg overflow-hidden" class:border-interactive={$isLinked}
+     style="border-width: 2px">
+  <AttributedImage
+    image={providedImage}
+    imgClass="max-h-64 w-auto"
+    previewedImage={state.previewedImage}
+    attributionFormat="minimal"
+  />
   <LoginToggle {state} silentFail={true}>
     {#if linkable}
       <label>
diff --git a/src/UI/Image/NearbyImages.svelte b/src/UI/Image/NearbyImages.svelte
index 753d6c8d9..665490c2b 100644
--- a/src/UI/Image/NearbyImages.svelte
+++ b/src/UI/Image/NearbyImages.svelte
@@ -60,7 +60,7 @@
       <Tr t={Translations.t.image.nearby.noNearbyImages} cls="alert" />
     {/if}
   {:else}
-    <div class="flex w-full space-x-1 overflow-x-auto" style="scroll-snap-type: x proximity">
+    <div class="flex w-full space-x-4 overflow-x-auto" style="scroll-snap-type: x proximity">
       {#each $result as image (image.pictureUrl)}
         <span class="w-fit shrink-0" style="scroll-snap-align: start">
           <LinkableImage {tags} {image} {state} {feature} {layer} {linkable} />

From 2ba461d9578b515b23ff25a8a99d9a2b03779653 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Thu, 29 Aug 2024 12:37:01 +0200
Subject: [PATCH 06/10] Themes: add icons to access question in toilets

---
 assets/layers/toilet/toilet.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/assets/layers/toilet/toilet.json b/assets/layers/toilet/toilet.json
index 3e386b052..743e495f1 100644
--- a/assets/layers/toilet/toilet.json
+++ b/assets/layers/toilet/toilet.json
@@ -206,6 +206,7 @@
         },
         {
           "if": "access=customers",
+          "icon": "key",
           "then": {
             "en": "Only access to customers",
             "de": "Der Zugang ist nur für Kunden",
@@ -220,6 +221,7 @@
         },
         {
           "if": "access=no",
+          "icon": "lock",
           "alsoShowIf": "access=private",
           "then": {
             "en": "Not accessible",
@@ -236,6 +238,7 @@
         },
         {
           "if": "access=key",
+          "icon": "key",
           "then": {
             "en": "Accessible, but one has to ask a key to enter",
             "de": "Der Zugang ist möglich, aber man muss nach einen Schlüssel fragen",

From c9751a3eb570f1865966fa3861fac5ff5c761f1a Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Thu, 29 Aug 2024 21:47:11 +0200
Subject: [PATCH 07/10] Themes: Change text type

---
 assets/themes/ghostsigns/ghostsigns.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/themes/ghostsigns/ghostsigns.json b/assets/themes/ghostsigns/ghostsigns.json
index e58696d19..8c1eb728c 100644
--- a/assets/themes/ghostsigns/ghostsigns.json
+++ b/assets/themes/ghostsigns/ghostsigns.json
@@ -91,7 +91,7 @@
           },
           "freeform": {
             "key": "inscription",
-            "type": "string",
+            "type": "text",
             "placeholder": {
               "en": "Text on the sign",
               "de": "Text auf dem Schild",

From 5302ec3342ef60e9bfc79d0cd2b95f5f0394344d Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Thu, 29 Aug 2024 21:49:11 +0200
Subject: [PATCH 08/10] Linting of 'generate translations'

---
 scripts/generateTranslations.ts | 204 +++++++++++++++++---------------
 1 file changed, 107 insertions(+), 97 deletions(-)

diff --git a/scripts/generateTranslations.ts b/scripts/generateTranslations.ts
index 7add3c57b..901518039 100644
--- a/scripts/generateTranslations.ts
+++ b/scripts/generateTranslations.ts
@@ -6,6 +6,7 @@ import Script from "./Script"
 
 const knownLanguages = ["en", "nl", "de", "fr", "es", "gl", "ca"]
 const ignoreTerms = ["searchTerms"]
+
 class TranslationPart {
     contents: Map<string, TranslationPart | string> = new Map<string, TranslationPart | string>()
 
@@ -14,7 +15,8 @@ class TranslationPart {
         const rootTranslation = new TranslationPart()
         for (const file of files) {
             const content = JSON.parse(readFileSync(file, { encoding: "utf8" }))
-            rootTranslation.addTranslation(file.substr(0, file.length - ".json".length), content)
+            const language = file.substr(0, file.length - ".json".length)
+            rootTranslation.addTranslation(language, content)
         }
         return rootTranslation
     }
@@ -46,18 +48,14 @@ class TranslationPart {
             return
         }
         for (const translationsKey in translations) {
-            if (!translations.hasOwnProperty(translationsKey)) {
-                continue
-            }
-
             const v = translations[translationsKey]
             if (typeof v != "string") {
                 console.error(
                     `Non-string object at ${context} in translation while trying to add the translation ` +
-                        JSON.stringify(v) +
-                        ` to '` +
-                        translationsKey +
-                        "'. The offending object which _should_ be a translation is: ",
+                    JSON.stringify(v) +
+                    ` to '` +
+                    translationsKey +
+                    "'. The offending object which _should_ be a translation is: ",
                     v,
                     "\n\nThe current object is (only showing en):",
                     this.toJson(),
@@ -96,17 +94,14 @@ class TranslationPart {
             if (noTranslate !== undefined) {
                 console.log(
                     "Ignoring some translations for " +
-                        context +
-                        ": " +
-                        dontTranslateKeys.join(", ")
+                    context +
+                    ": " +
+                    dontTranslateKeys.join(", ")
                 )
             }
         }
 
         for (let key in object) {
-            if (!object.hasOwnProperty(key)) {
-                continue
-            }
             if (ignoreTerms.indexOf(key) >= 0) {
                 continue
             }
@@ -155,13 +150,13 @@ class TranslationPart {
                 this.contents.set(key, new TranslationPart())
             }
 
-            ;(this.contents.get(key) as TranslationPart).recursiveAdd(v, context + "." + key)
+            (this.contents.get(key) as TranslationPart).recursiveAdd(v, context + "." + key)
         }
     }
 
     knownLanguages(): string[] {
         const languages = []
-        for (let key of Array.from(this.contents.keys())) {
+        for (const key of Array.from(this.contents.keys())) {
             const value = this.contents.get(key)
 
             if (typeof value === "string") {
@@ -180,20 +175,20 @@ class TranslationPart {
         const parts = []
         let keys = Array.from(this.contents.keys())
         keys = keys.sort()
-        for (let key of keys) {
+        for (const key of keys) {
             let value = this.contents.get(key)
 
             if (typeof value === "string") {
-                value = value.replace(/"/g, '\\"').replace(/\n/g, "\\n")
+                value = value.replace(/"/g, "\\\"").replace(/\n/g, "\\n")
                 if (neededLanguage === undefined) {
-                    parts.push(`\"${key}\": \"${value}\"`)
+                    parts.push(`"${key}": "${value}"`)
                 } else if (key === neededLanguage) {
                     return `"${value}"`
                 }
             } else {
                 const sub = (value as TranslationPart).toJson(neededLanguage)
                 if (sub !== "") {
-                    parts.push(`\"${key}\": ${sub}`)
+                    parts.push(`"${key}": ${sub}`)
                 }
             }
         }
@@ -234,7 +229,7 @@ class TranslationPart {
             } else if (!isLeaf) {
                 errors.push({
                     error: "Mixed node: non-leaf node has translation strings",
-                    path: path,
+                    path: path
                 })
             }
 
@@ -285,7 +280,7 @@ class TranslationPart {
                                 value +
                                 "\n" +
                                 fixLink,
-                            path: path,
+                            path: path
                         })
                     }
                     return
@@ -297,7 +292,7 @@ class TranslationPart {
                             error: `The translation for ${key} does not have the required subpart ${part} (in ${usedByLanguage}).
     \tThe full translation is ${value}
     \t${fixLink}`,
-                            path: path,
+                            path: path
                         })
                     }
                 }
@@ -334,24 +329,6 @@ class TranslationPart {
     }
 }
 
-/**
- * Checks that the given object only contains string-values
- * @param tr
- */
-function isTranslation(tr: any): boolean {
-    if (tr["#"] === "no-translations") {
-        return false
-    }
-    if (tr["special"]) {
-        return false
-    }
-    for (const key in tr) {
-        if (typeof tr[key] !== "string") {
-            return false
-        }
-    }
-    return true
-}
 
 /**
  * Converts a translation object into something that can be added to the 'generated translations'.
@@ -361,9 +338,10 @@ function isTranslation(tr: any): boolean {
 function transformTranslation(
     obj: any,
     path: string[] = [],
-    languageWhitelist: string[] = undefined
+    languageWhitelist: string[] = undefined,
+    shortNotation = false
 ) {
-    if (isTranslation(obj)) {
+    if (GenerateTranslations.isTranslation(obj)) {
         return `new Translation( ${JSON.stringify(obj)} )`
     }
 
@@ -380,7 +358,7 @@ function transformTranslation(
         }
         let value = obj[key]
 
-        if (isTranslation(value)) {
+        if (GenerateTranslations.isTranslation(value)) {
             if (languageWhitelist !== undefined) {
                 const nv = {}
                 for (const ln of languageWhitelist) {
@@ -395,7 +373,7 @@ function transformTranslation(
                 )}.${key}\n\tThe translations in other languages are ${JSON.stringify(value)}`
             }
             const subParts: string[] = value["en"].match(/{[^}]*}/g)
-            let expr = `return new Translation(${JSON.stringify(value)}, "core:${path.join(
+            let expr = `new Translation(${JSON.stringify(value)}, "core:${path.join(
                 "."
             )}.${key}")`
             if (subParts !== null) {
@@ -409,12 +387,16 @@ function transformTranslation(
                         "."
                     )}: A subpart contains invalid characters: ${subParts.join(", ")}`
                 }
-                expr = `return new TypedTranslation<{ ${types.join(", ")} }>(${JSON.stringify(
+                expr = `new TypedTranslation<{ ${types.join(", ")} }>(${JSON.stringify(
                     value
                 )}, "core:${path.join(".")}.${key}")`
             }
+            if (shortNotation) {
+                values.push(`${spaces} ${key}: ${expr}`)
 
-            values.push(`${spaces}get ${key}() { ${expr} }`)
+            } else {
+                values.push(`${spaces}get ${key}() { return ${expr} }`)
+            }
         } else {
             values.push(
                 spaces + key + ": " + transformTranslation(value, [...path, key], languageWhitelist)
@@ -469,54 +451,11 @@ function formatFile(path) {
     writeFileSync(path, JSON.stringify(contents, null, "    ") + (endsWithNewline ? "\n" : ""))
 }
 
-/**
- * Generates the big compiledTranslations file
- */
-function genTranslations() {
-    if (!fs.existsSync("./src/assets/generated/")) {
-        fs.mkdirSync("./src/assets/generated/")
-    }
-    const translations = JSON.parse(
-        fs.readFileSync("./src/assets/generated/translations.json", "utf-8")
-    )
-    const transformed = transformTranslation(translations)
-
-    let module = `import {Translation, TypedTranslation} from "../../UI/i18n/Translation"\n\nexport default class CompiledTranslations {\n\n`
-    module += " public static t = " + transformed
-    module += "\n    }"
-
-    fs.writeFileSync("./src/assets/generated/CompiledTranslations.ts", module)
-}
 
 /**
  * Reads 'lang/*.json', writes them into to 'assets/generated/translations.json'.
  * This is only for the core translations
  */
-function compileTranslationsFromWeblate() {
-    const translations = ScriptUtils.readDirRecSync("./langs", 1).filter(
-        (path) => path.indexOf(".json") > 0
-    )
-
-    const allTranslations = new TranslationPart()
-
-    allTranslations.validateStrict()
-
-    for (const translationFile of translations) {
-        try {
-            const contents = JSON.parse(readFileSync(translationFile, "utf-8"))
-            let language = translationFile.substring(translationFile.lastIndexOf("/") + 1)
-            language = language.substring(0, language.length - 5)
-            allTranslations.add(language, contents)
-        } catch (e) {
-            throw "Could not read file " + translationFile + " due to " + e
-        }
-    }
-
-    writeFileSync(
-        "./src/assets/generated/translations.json",
-        JSON.stringify(JSON.parse(allTranslations.toJson()), null, "    ")
-    )
-}
 
 /**
  * Get all the strings out of the layers; writes them onto the weblate paths
@@ -608,7 +547,7 @@ function MergeTranslation(source: any, target: any, language: string, context: s
             if (targetV[language] !== undefined && targetV[language] !== sourceV) {
                 was = " (overwritten " + targetV[language] + ")"
             }
-            console.log("   + ", context + "." + language, "-->", sourceV, was)
+            // console.log("   + ", context + "." + language, "-->", sourceV, was)
             continue
         }
         if (typeof sourceV === "object") {
@@ -697,7 +636,7 @@ function removeNonEnglishTranslations(object: any) {
             leaf["en"] = en
         },
         (possibleLeaf) =>
-            possibleLeaf !== null && typeof possibleLeaf === "object" && isTranslation(possibleLeaf)
+            possibleLeaf !== null && typeof possibleLeaf === "object" && GenerateTranslations.isTranslation(possibleLeaf)
     )
 }
 
@@ -732,6 +671,25 @@ class GenerateTranslations extends Script {
         super("Syncs translations from/to the theme and layer files")
     }
 
+    /**
+     * Checks that the given object only contains string-values
+     * @param tr
+     */
+    static isTranslation(tr: Record<string, string | object>): boolean {
+        if (tr["#"] === "no-translations") {
+            return false
+        }
+        if (tr["special"]) {
+            return false
+        }
+        for (const key in tr) {
+            if (typeof tr[key] !== "string") {
+                return false
+            }
+        }
+        return true
+    }
+
     /**
      * OUtputs the 'used_languages.json'-file
      */
@@ -754,22 +712,74 @@ class GenerateTranslations extends Script {
         }
     }
 
+
+    /**
+     * Generates the big compiledTranslations file based on 'translations.json'
+     */
+    genTranslations(englishOnly?: boolean) {
+        if (!fs.existsSync("./src/assets/generated/")) {
+            fs.mkdirSync("./src/assets/generated/")
+        }
+        const translations = JSON.parse(
+            fs.readFileSync("./src/assets/generated/translations.json", "utf-8")
+        )
+        const transformed = transformTranslation(translations, undefined, englishOnly ? ["en"] : undefined, englishOnly)
+
+        let module = `import {Translation, TypedTranslation} from "../../UI/i18n/Translation"\n\nexport default class CompiledTranslations {\n\n`
+        module += " public static t = " + transformed
+        module += "\n    }"
+
+        fs.writeFileSync("./src/assets/generated/CompiledTranslations.ts", module)
+    }
+
+    compileTranslationsFromWeblate(englishOnly: boolean) {
+        const translations = ScriptUtils.readDirRecSync("./langs", 1).filter(
+            (path) => path.indexOf(".json") > 0
+        )
+
+        const allTranslations = new TranslationPart()
+
+        allTranslations.validateStrict()
+
+        for (const translationFile of translations) {
+            try {
+                const contents = JSON.parse(readFileSync(translationFile, "utf-8"))
+                let language = translationFile.substring(translationFile.lastIndexOf("/") + 1)
+                language = language.substring(0, language.length - 5)
+                if (englishOnly && language !== "en") {
+                    continue
+                }
+                allTranslations.add(language, contents)
+            } catch (e) {
+                throw "Could not read file " + translationFile + " due to " + e
+            }
+        }
+
+        writeFileSync(
+            "./src/assets/generated/translations.json",
+            JSON.stringify(JSON.parse(allTranslations.toJson()), null, "    ")
+        )
+    }
+
     async main(args: string[]): Promise<void> {
         if (!existsSync("./langs/themes")) {
             mkdirSync("./langs/themes")
         }
         const themeOverwritesWeblate = args[0] === "--ignore-weblate"
         const englishOnly = args[0] === "--english-only"
+        if (englishOnly) {
+            console.log("ENGLISH ONLY")
+        }
         if (!themeOverwritesWeblate) {
-            mergeLayerTranslations()
-            mergeThemeTranslations()
-            compileTranslationsFromWeblate()
+            mergeLayerTranslations(englishOnly)
+            mergeThemeTranslations(englishOnly)
+            this.compileTranslationsFromWeblate(englishOnly)
         } else {
             console.log("Ignore weblate")
         }
 
         this.detectUsedLanguages()
-        genTranslations()
+        this.genTranslations(englishOnly)
         {
             const allTranslationFiles = ScriptUtils.readDirRecSync("langs").filter((path) =>
                 path.endsWith(".json")

From df40dbbff16d1524eb31d2bfc1f9c27bbf9d194b Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Thu, 29 Aug 2024 21:49:25 +0200
Subject: [PATCH 09/10] Remove unused import

---
 src/UI/i18n/Translations.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/UI/i18n/Translations.ts b/src/UI/i18n/Translations.ts
index 2006a5e89..ea95dc47c 100644
--- a/src/UI/i18n/Translations.ts
+++ b/src/UI/i18n/Translations.ts
@@ -3,7 +3,6 @@ import { Translation, TypedTranslation } from "./Translation"
 import BaseUIElement from "../BaseUIElement"
 import CompiledTranslations from "../../assets/generated/CompiledTranslations"
 import LanguageUtils from "../../Utils/LanguageUtils"
-import { ClickableToggle } from "../Input/Toggle"
 import { Store } from "../../Logic/UIEventSource"
 import Locale from "./Locale"
 import { Utils } from "../../Utils"

From 9a194c69f05abf97ee1bfc4b3f906a3c553082f4 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Thu, 29 Aug 2024 23:12:25 +0200
Subject: [PATCH 10/10] UX: only load magnifying button when image is loaded

---
 src/UI/Image/AttributedImage.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/UI/Image/AttributedImage.svelte b/src/UI/Image/AttributedImage.svelte
index c95b45d2b..91f8bfd86 100644
--- a/src/UI/Image/AttributedImage.svelte
+++ b/src/UI/Image/AttributedImage.svelte
@@ -19,12 +19,14 @@
   export let previewedImage: UIEventSource<ProvidedImage> = undefined
   export let attributionFormat: "minimal" | "medium" | "large" = "medium"
   let canZoom = previewedImage !== undefined // We check if there is a SOURCE, not if there is data in it!
+  let loaded = false
 </script>
 
 <div class="relative shrink-0">
   <div class="relative w-fit">
     <img
       bind:this={imgEl}
+      on:load={() => loaded = true}
       class={imgClass ?? ""}
       class:cursor-zoom-in={previewedImage !== undefined}
       on:click={() => {
@@ -38,7 +40,7 @@
       src={image.url}
     />
 
-    {#if canZoom}
+    {#if canZoom && loaded}
       <div class="absolute right-0 top-0 bg-black-transparent rounded-bl-full">
       <MagnifyingGlassPlusIcon class="w-8 h-8 pl-3 pb-3 cursor-zoom-in" color="white" />
       </div>