Move various tabs into buttons, more work on a11y

src/UI/BigComponents/MapillaryLink.svelte

@@ -4,6 +4,7 @@
   import Tr from "../Base/Tr.svelte"
   import Mapillary_black from "../../assets/svg/Mapillary_black.svelte"
   import { Mapillary } from "../../Logic/ImageProviders/Mapillary"
+  import { twMerge } from "tailwind-merge"
 
   /*
       A subtleButton which opens mapillary in a new tab at the current location
@@ -16,12 +17,17 @@
   let location = mapProperties.location
   let zoom = mapProperties.zoom
   let mapillaryLink = Mapillary.createLink($location, $zoom)
+  export let large: boolean = true
 </script>
 
-<a class="button flex items-center" href={mapillaryLink} target="_blank">
-  <Mapillary_black class="m-2 mr-4 h-12 w-12 shrink-0" />
-  <div class="flex flex-col">
+<a class="flex items-center" href={mapillaryLink} target="_blank">
+  <Mapillary_black class={twMerge("shrink-0",large ? "m-2 mr-4 h-12 w-12" : "w-6 h-6 pr-2")} />
+  {#if large}
+    <div class="flex flex-col">
+      <Tr t={Translations.t.general.attribution.openMapillary} />
+      <Tr cls="subtle" t={Translations.t.general.attribution.mapillaryHelp} />
+    </div>
+  {:else}
     <Tr t={Translations.t.general.attribution.openMapillary} />
-    <Tr cls="subtle" t={Translations.t.general.attribution.mapillaryHelp} />
-  </div>
+  {/if}
 </a>

src/UI/BigComponents/OpenIdEditor.svelte

@@ -26,7 +26,7 @@
   }/${$location?.lon ?? 0}`
 </script>
 
-<a class="button flex items-center" target="_blank" href={idLink}>
-  <PencilIcon class="h-12 w-12 p-2 pr-4" />
+<a class="flex items-center" target="_blank" href={idLink}>
+  <PencilIcon class="h-6 w-6 pr-2" />
   <Tr t={Translations.t.general.attribution.editId} />
 </a>

src/UI/BigComponents/ReverseGeocoding.svelte

@@ -4,6 +4,9 @@
 import Motion from "../../Sensors/Motion"
 import { Geocoding } from "../../Logic/Osm/Geocoding"
 import type { MapProperties } from "../../Models/MapProperties"
+import Hotkeys from "../Base/Hotkeys"
+import Translations from "../i18n/Translations"
+import Locale from "../i18n/Locale"
 
 export let mapProperties: MapProperties
 let lastDisplayed: Date = undefined
@@ -14,32 +17,36 @@ async function displayLocation() {
   let result = await Geocoding.reverse(
     mapProperties.location.data,
     mapProperties.zoom.data,
+    Locale.language.data
   )
-  console.log("Got result", result)
   let properties = result.features[0].properties
   currentLocation = properties.display_name
   window.setTimeout(() => {
+    if(properties.display_name !== currentLocation){
+      return
+    }
     currentLocation = undefined
   }, 5000)
 }
 
 Motion.singleton.lastShakeEvent.addCallbackD(shaken => {
-  console.log("Got a shaken event")
-  if (shaken.getTime() - lastDisplayed.getTime() < 1000) {
-    console.log("To soon:",shaken.getTime() - lastDisplayed.getTime())
-   // return
+  if (lastDisplayed !== undefined && shaken.getTime() - lastDisplayed.getTime() < 2000) {
+    return
   }
   displayLocation()
 })
+Hotkeys.RegisterHotkey({ nomod: "q" },
+  Translations.t.hotkeyDocumentation.queryCurrentLocation,
+  () => {
+    displayLocation()
+  })
+
 
 Motion.singleton.startListening()
-mapProperties.location.stabilized(500).addCallbackAndRun(loc => {
-  displayLocation()
-})
 </script>
 
 {#if currentLocation}
-  <div role="alert" aria-live="assertive" class="normal-background">
+  <div role="alert" aria-live="assertive" class="normal-background rounded-full border-interactive px-2">
     {currentLocation}
   </div>
 {/if}

src/UI/BigComponents/SelectedElementTitle.svelte

@@ -55,7 +55,7 @@
 
     <button on:click={() => state.selectedElement.setData(undefined)}
             use:ariaLabel={Translations.t.general.backToMap}
-            class="border-none p-0">
+            class="border-none p-0 rounded-full">
       <XCircleIcon aria-hidden={true} class="h-8 w-8" />
     </button>
   </div>

src/UI/BigComponents/VisualFeedbackPanel.svelte

@@ -7,10 +7,14 @@
   import ThemeViewState from "../../Models/ThemeViewState"
   import Summary from "./Summary.svelte"
   import Tr from "../Base/Tr.svelte"
-  import { UIEventSource } from "../../Logic/UIEventSource"
+  import { Store, UIEventSource } from "../../Logic/UIEventSource"
   import type { KeyNavigationEvent } from "../../Models/MapProperties"
+  import type { Feature } from "geojson"
 
   export let state: ThemeViewState
+  export let featuresInViewPort: Store<Feature[]>
+  console.log("Visual feedback panel:", featuresInViewPort)
+  const t = Translations.t.general.visualFeedback
   let centerFeatures = state.closestFeatures.features
 
   let lastAction: UIEventSource<KeyNavigationEvent> = new UIEventSource<KeyNavigationEvent>(undefined)
@@ -22,12 +26,12 @@
 <div aria-live="assertive" class="p-1" role="alert">
 
   {#if $lastAction !== undefined}
-    <Tr t={Translations.t.general.visualFeedback[$lastAction.key]} />
+    <Tr t={t[$lastAction.key]} />
   {:else if $centerFeatures.length === 0}
-    <Tr t={Translations.t.general.visualFeedback.noCloseFeatures} />
+    <Tr t={t.noCloseFeatures} />
   {:else}
     <div class="pointer-events-auto">
-      <Tr t={Translations.t.general.visualFeedback.closestFeaturesAre} />
+      <Tr t={t.closestFeaturesAre.Subs({n: $featuresInViewPort?.length})} />
       <ol class="list-none">
         {#each $centerFeatures as feat, i (feat.properties.id)}
           <li class="flex">