UX: put text next to QR-code, regenerate all translations

src/UI/Popup/QrCode.svelte

@@ -1,19 +1,20 @@
 <script lang="ts">
-  import { Store, UIEventSource } from "../../Logic/UIEventSource"
+  import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
   import type { SpecialVisualizationState } from "../SpecialVisualization"
   import type { Feature } from "geojson"
   import Loading from "../Base/Loading.svelte"
   import Qr from "../../Utils/Qr"
   import { GeoOperations } from "../../Logic/GeoOperations"
-
+  import { Utils } from "../../Utils"
   const smallSize = 100
   const bigSize = 200
   let size = new UIEventSource(smallSize)
-
   export let state: SpecialVisualizationState
   export let tags: UIEventSource<Record<string, string>>
   export let feature: Feature
   export let extraUrlParams: Record<string, string> = {}
+  export let sideText: string = undefined
+  export let sideTextClass: string = undefined
 
   const includeLayout = window.location.pathname.split("/").at(-1).startsWith("theme")
   let id: Store<string> = tags.mapD((tags) => tags.id)
@@ -26,9 +27,11 @@
     extraUrlParams["lon"] ??= "" + lon
     extraUrlParams["lat"] ??= "" + lat
   } else if (state?.mapProperties?.location?.data) {
-    const l = state?.mapProperties?.location?.data
-    extraUrlParams["lon"] ??= "" + l.lon
-    extraUrlParams["lat"] ??= "" + l.lat
+    const l: { lon: number; lat: number } = state?.mapProperties?.location?.data
+    if (l.lon !== 0 && l.lat !== 0) {
+      extraUrlParams["lon"] ??= "" + l.lon
+      extraUrlParams["lat"] ??= "" + l.lat
+    }
   }
 
   const params = []
@@ -55,16 +58,22 @@
     }
   }
 
-  url.addCallbackAndRunD(url => console.log("URL IS", url))
+  let sideTextSub = (tags ?? new ImmutableStore({})).map(tgs => Utils.SubstituteKeys(sideText, tgs))
 </script>
 
 {#if $id?.startsWith("node/-")}
   <!-- Not yet uploaded, doesn't have a fixed ID -->
   <Loading />
 {:else}
-  <img
+  <div class="flex w-full items-center my-4">
+    <img
+      class="shrink-0"
     on:click={() => toggleSize()}
     src={new Qr($url).toImageElement($size)}
     style={`width: ${$size}px; height: ${$size}px`}
   />
+    {#if sideText}
+      <div class={sideTextClass}>{ $sideTextSub}</div>
+    {/if}
+  </div>
 {/if}