Small usability tweaks

assets/layers/shops/shops.json

@@ -109,11 +109,6 @@
             "override": {
               "render": "./assets/layers/id_presets/maki-shop.svg",
               "+mappings": [
-                {
-                  "#": "Layer icon rendering",
-                  "if": "id=",
-                  "then": "./assets/layers/id_presets/maki-shop.svg"
-                },
                 {
                   "if": {
                     "or": [
@@ -133,6 +128,11 @@
                 {
                   "if": "craft=key_cutter",
                   "then": "./assets/layers/id_presets/fas-key.svg"
+                },
+                {
+                  "#": "Layer icon rendering",
+                  "if": "id=",
+                  "then": "./assets/layers/id_presets/maki-shop.svg"
                 }
               ]
             }
@@ -204,15 +204,15 @@
       },
       "description": {
         "en": "Add a new shop",
-        "fr": "Ajouter un nouveau magasin",
-        "ru": "Добавить новый магазин",
-        "ja": "新しい店を追加する",
-        "nl": "Voeg een nieuwe winkel toe",
+        "ca": "Afegir una botiga nova",
+        "cs": "Přidat nový obchod",
         "de": "Ein neues Geschäft hinzufügen",
         "eo": "Enmeti novan butikon",
         "es": "Añadir una nueva tienda",
-        "ca": "Afegir una botiga nova",
-        "cs": "Přidat nový obchod"
+        "fr": "Ajouter un nouveau magasin",
+        "ja": "新しい店を追加する",
+        "nl": "Voeg een nieuwe winkel toe",
+        "ru": "Добавить новый магазин"
       }
     }
   ],

langs/en.json

@@ -667,9 +667,10 @@
         "question_opinion": "How was your experience?",
         "rate": "Rate {n} stars",
         "rated": "Rated {n} stars",
+        "reviewPlaceholder": "Describe your experience…",
         "reviewing_as": "Reviewing as {nickname}",
         "reviewing_as_anonymous": "Reviewing as anonymous",
-        "save": "Save",
+        "save": "Save review",
         "saved": "Review saved. Thanks for sharing!",
         "saving_review": "Saving…",
         "title": "{count} reviews",

src/UI/BigComponents/SelectedElementView.svelte

@@ -36,7 +36,9 @@
 </script>
 
 {#if $tags._deleted === "yes"}
-  <Tr t={Translations.t.delete.isDeleted} />
+  <div aria-live="assertive">
+    <Tr t={Translations.t.delete.isDeleted} />
+  </div>
   <button class="w-full" on:click={() => state.selectedElement.setData(undefined)}>
     <Tr t={Translations.t.general.returnToTheMap} />
   </button>

src/UI/Map/Icon.svelte

@@ -28,6 +28,8 @@
   import Not_found from "../../assets/svg/Not_found.svelte"
   import { twMerge } from "tailwind-merge"
   import Direction_gradient from "../../assets/svg/Direction_gradient.svelte"
+  import Mastodon from "../../assets/svg/Mastodon.svelte"
+  import Party from "../../assets/svg/Party.svelte"
 
   /**
    * Renders a single icon.
@@ -105,6 +107,10 @@
     <Direction_gradient class={clss} {color} />
   {:else if icon === "not_found"}
     <Not_found class={twMerge(clss, "no-image-background")} {color} />
+  {:else if icon === "mastodon"}
+    <Mastodon {color} class={clss} />
+  {:else if icon === "party"}
+    <Party {color} class={clss} />
   {:else}
     <img class={clss ?? "h-full w-full"} src={icon} aria-hidden="true" alt="" />
   {/if}

src/UI/Reviews/ReviewForm.svelte

@@ -13,6 +13,7 @@
   import Loading from "../Base/Loading.svelte"
   import { Review } from "mangrove-reviews-typescript"
   import { Utils } from "../../Utils"
+  import { placeholder } from "../../Utils/placeholder"
 
   export let state: SpecialVisualizationState
   export let tags: UIEventSource<Record<string, string>>
@@ -83,7 +84,8 @@
 
     {#if confirmedScore !== undefined}
       <Tr cls="font-bold mt-2" t={t.question_opinion} />
-      <textarea bind:value={$opinion} inputmode="text" rows="3" class="mb-1 w-full" />
+      <textarea autofocus bind:value={$opinion} inputmode="text" rows="3" class="mb-1 w-full" 
+      use:placeholder={t.reviewPlaceholder}/>
       <Checkbox selected={isAffiliated}>
         <div class="flex flex-col">
           <Tr t={t.i_am_affiliated} />

src/UI/SpecialVisualizations.ts

@@ -1569,14 +1569,23 @@ export default class SpecialVisualizations {
                     feature: Feature,
                     layer: LayerConfig
                 ): BaseUIElement {
-                    const url =
-                        window.location.protocol +
-                        "//" +
-                        window.location.host +
-                        window.location.pathname +
-                        "#" +
-                        feature.properties.id
-                    return new Img(new Qr(url).toImageElement(75)).SetStyle("width: 75px")
+                    return new VariableUiElement(
+                        tagSource
+                            .map((tags) => tags.id)
+                            .map((id) => {
+                                if (id.startsWith("node/-")) {
+                                    // Not yet uploaded
+                                    return undefined
+                                }
+                                const [lon, lat] = GeoOperations.centerpointCoordinates(feature)
+                                const url =
+                                    `${window.location.protocol}//${window.location.host}${window.location.pathname}?lat=${lat}&lon=${lon}&z=15` +
+                                    `#${id}`
+                                return new Img(new Qr(url).toImageElement(75)).SetStyle(
+                                    "width: 75px"
+                                )
+                            })
+                    )
                 },
             },
         ]

src/Utils/placeholder.ts

@@ -1,6 +1,6 @@
 import { Translation } from "../UI/i18n/Translation"
 
-export function placeholder(htmlElement: HTMLInputElement, t: Translation) {
+export function placeholder(htmlElement: HTMLInputElement | HTMLTextAreaElement, t: Translation) {
     let destroy: () => void = undefined
 
     t.current.map(