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}

src/UI/SpecialVisualisations/SettingsVisualisations.ts

@@ -151,15 +151,23 @@ export class SettingsVisualisations {
             },
             {
                 funcName: "qr_login",
-                args: [],
+                args: [{
+                    name: "text",
+                    doc: "Extra text on the side of the QR-code"
+                }, {
+                    name: "textClass",
+                    doc: "CSS class of the the side text"
+                }],
                 docs: "A QR-code which shares the current URL and adds the login token. Anyone with this login token will have the same permissions as you currently have. Logging out from this session will also log them out",
                 group: "settings",
                 constr(state: SpecialVisualizationState, tags: UIEventSource<Record<string, string>>, argument: string[], feature: Feature, layer: LayerConfig): SvelteUIElement {
                     const shared_oauth_cookie = state.osmConnection.getToken()
+                    const sideText = argument[0]
+                    const sideTextClass = argument[1] ?? ""
                     return new SvelteUIElement(QrCode, {
                         state,
                         tags,
-                        feature,
+                        sideText, sideTextClass,
                         extraUrlParams: { shared_oauth_cookie }
                     })
                 }

src/UI/SpecialVisualisations/UISpecialVisualisations.ts

@@ -174,7 +174,13 @@ export class UISpecialVisualisations {
             },
             {
                 funcName: "qr_code",
-                args: [],
+                args: [{
+                    name: "text",
+                    doc: "Extra text on the side of the QR-code"
+                }, {
+                    name: "textClass",
+                    doc: "CSS class of the the side text"
+                }],
                 group: "default",
                 docs: "Generates a QR-code to share the selected object",
                 constr(
@@ -183,7 +189,9 @@ export class UISpecialVisualisations {
                     argument: string[],
                     feature: Feature
                 ): SvelteUIElement {
-                    return new SvelteUIElement(QrCode, { state, tags, feature })
+                    const sideText = argument[0]
+                    const sideTextClass = argument[1] ?? ""
+                    return new SvelteUIElement(QrCode, { state, tags, feature, sideText, sideTextClass })
                 },
             },
             {