Merge master

src/UI/Base/LoginToggle.svelte

@@ -5,7 +5,7 @@
   import { Translation } from "../i18n/Translation"
   import Translations from "../i18n/Translations"
   import Tr from "./Tr.svelte"
-  import { ImmutableStore, UIEventSource } from "../../Logic/UIEventSource"
+  import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
   import Invalid from "../../assets/svg/Invalid.svelte"
   import ArrowPath from "@babeard/svelte-heroicons/mini/ArrowPath"
 
@@ -21,6 +21,10 @@
    * Only show the 'successful' state, don't show loading or error messages
    */
   export let silentFail: boolean = false
+  /**
+   * If set and the OSM-api  fails, do _not_ show any error messages nor the successful state, just hide
+   */
+  export let hiddenFail: boolean = false
   let loadingStatus = state?.osmConnection?.loadingStatus ?? new ImmutableStore("logged-in")
   let badge = state?.featureSwitches?.featureSwitchEnableLogin ?? new ImmutableStore(true)
   const t = Translations.t.general
@@ -30,7 +34,7 @@
     unknown: t.loginFailedUnreachableMode,
     readonly: t.loginFailedReadonlyMode,
   }
-  const apiState =
+  const apiState: Store<string> =
     state?.osmConnection?.apiIsOnline ?? new ImmutableStore<OsmServiceState>("online")
 </script>
 
@@ -39,19 +43,21 @@
     <slot name="loading">
       <Loading />
     </slot>
-  {:else if !silentFail && $loadingStatus === "error"}
-    <slot name="error">
-      <div class="alert flex flex-col items-center">
-        <div class="max-w-64 flex items-center">
-          <Invalid class="m-2 h-8 w-8 shrink-0" />
-          <Tr t={offlineModes[$apiState] ?? t.loginFailedUnreachableMode} />
+  {:else if !silentFail && ($loadingStatus === "error" || $apiState === "readonly" || $apiState === "offline")}
+    {#if !hiddenFail}
+      <slot name="error">
+        <div class="alert flex flex-col items-center">
+          <div class="max-w-64 flex items-center">
+            <Invalid class="m-2 h-8 w-8 shrink-0" />
+            <Tr t={offlineModes[$apiState] ?? t.loginFailedUnreachableMode} />
+          </div>
+          <button class="h-fit" on:click={() => state.osmConnection.AttemptLogin()}>
+            <ArrowPath class="h-6 w-6" />
+            <Tr t={t.retry} />
+          </button>
         </div>
-        <button class="h-fit" on:click={() => state.osmConnection.AttemptLogin()}>
-          <ArrowPath class="h-6 w-6" />
-          <Tr t={t.retry} />
-        </button>
-      </div>
-    </slot>
+      </slot>
+    {/if}
   {:else if $loadingStatus === "logged-in"}
     <slot />
   {:else if !silentFail && $loadingStatus === "not-attempted"}

src/UI/BigComponents/MenuDrawer.svelte

@@ -124,7 +124,7 @@
       </svelte:fragment>
 
       <!-- All shown components are set by 'usersettings.json', which happily uses some special visualisations created specifically for it -->
-      <LoginToggle {state}>
+      <LoginToggle {state} silentFail>
         <div class="flex flex-col" slot="not-logged-in">
           <LanguagePicker availableLanguages={theme.language} />
           <Tr cls="alert" t={Translations.t.userinfo.notLoggedIn} />
@@ -144,7 +144,7 @@
       </LoginToggle>
     </Page>
 
-    <LoginToggle {state}>
+    <LoginToggle {state} silentFail>
       <Page {onlyLink} shown={pg.favourites}>
         <svelte:fragment slot="header">
           <HeartIcon />

src/UI/Popup/MarkAsFavouriteMini.svelte

@@ -24,7 +24,7 @@
   }
 </script>
 
-<LoginToggle ignoreLoading={true} {state}>
+<LoginToggle ignoreLoading={true} hiddenFail {state}>
   {#if $isFavourite}
     <button
       class="soft no-image-background m-0 h-8 w-8 p-0"

src/UI/Popup/TagRendering/TagRenderingEditable.svelte

@@ -85,6 +85,8 @@
   }
   let answerId = "answer-" + Utils.randomString(5)
   let debug = state?.featureSwitches?.featureSwitchIsDebugging ?? new ImmutableStore(false)
+
+  let apiState: Store<string> = state?.osmConnection?.apiIsOnline ?? new ImmutableStore("online")
 </script>
 
 <div bind:this={htmlElem} class={twMerge(clss, "tr-" + config.id)}>
@@ -126,7 +128,7 @@
           {layer}
           extraClasses="my-2"
         />
-        {#if !editingEnabled || $editingEnabled}
+        {#if (!editingEnabled || $editingEnabled) && $apiState !== "readonly" && $apiState !== "offline"}
           <EditButton
             arialabel={config.editButtonAriaLabel}
             ariaLabelledBy={answerId}

src/UI/Popup/TagRendering/TagRenderingQuestion.svelte

@@ -355,9 +355,11 @@
     disabledInTheme.set(newList)
     menuIsOpened.set(false)
   }
+
+  let apiState = state.osmConnection.apiIsOnline
 </script>
 
-{#if question !== undefined}
+{#if question !== undefined && $apiState !== "readonly" && $apiState !== "offline"}
   <div class={clss}>
     {#if layer.isNormal()}
       <LoginToggle {state}>

src/UI/ThemeViewGUI.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Store, UIEventSource } from "../Logic/UIEventSource"
+  import { ImmutableStore, Store, UIEventSource } from "../Logic/UIEventSource"
   import { Map as MlMap } from "maplibre-gl"
   import MaplibreMap from "./Map/MaplibreMap.svelte"
   import FeatureSwitchState from "../Logic/State/FeatureSwitchState"
@@ -105,11 +105,11 @@
 
   let canZoomIn = mapproperties.maxzoom.map(
     (mz) => mapproperties.zoom.data < mz,
-    [mapproperties.zoom]
+    [mapproperties.zoom],
   )
   let canZoomOut = mapproperties.minzoom.map(
     (mz) => mapproperties.zoom.data > mz,
-    [mapproperties.zoom]
+    [mapproperties.zoom],
   )
 
   let rasterLayerName =
@@ -118,7 +118,7 @@
   onDestroy(
     rasterLayer.addCallbackAndRunD((l) => {
       rasterLayerName = l.properties.name
-    })
+    }),
   )
 
   debug.addCallbackAndRun((dbg) => {
@@ -165,6 +165,8 @@
     const animation = mlmap.keyboard?.keydown(e)
     animation?.cameraAnimation(mlmap)
   }
+
+  let apiState = state?.osmConnection?.apiIsOnline ?? new ImmutableStore("online")
 </script>
 
 <main>
@@ -173,7 +175,7 @@
     <MaplibreMap map={maplibremap} mapProperties={mapproperties} autorecovery={true} />
   </div>
 
-  <LoginToggle ignoreLoading={true} {state}>
+  <LoginToggle ignoreLoading={true} silentFail {state}>
     {#if ($showCrosshair === "yes" && $currentZoom >= 17) || $showCrosshair === "always" || $visualFeedback}
       <!-- Don't use h-full: h-full does _not_ include the area under the URL-bar, which offsets the crosshair a bit -->
       <div
@@ -216,7 +218,8 @@
               {#if $currentZoom < Constants.minZoomLevelToAddNewPoint}
                 <Tr t={Translations.t.general.add.zoomInFurther} />
               {:else if state.theme.hasPresets()}
-                ✨ <Tr t={Translations.t.general.add.title} />
+                ✨
+                <Tr t={Translations.t.general.add.title} />
               {:else}
                 <Tr t={Translations.t.notes.createNote} />
               {/if}
@@ -417,6 +420,9 @@
       <If condition={state.featureSwitches.featureSwitchFakeUser}>
         <div class="alert w-fit">Faking a user (Testmode)</div>
       </If>
+      {#if $apiState !== "online"}
+        <div class="alert w-fit">API is {$apiState}</div>
+      {/if}
     </div>
 
     <div class="flex w-full flex-col items-center justify-center">
@@ -427,11 +433,13 @@
     </div>
   </div>
 
-  <DrawerLeft shown={state.guistate.pageStates.menu}>
-    <div class="h-screen overflow-y-auto">
-      <MenuDrawer onlyLink={true} {state} />
-    </div>
-  </DrawerLeft>
+  <div class="h-full overflow-hidden">
+    <DrawerLeft shown={state.guistate.pageStates.menu}>
+      <div class="h-screen overflow-y-auto">
+        <MenuDrawer onlyLink={true} {state} />
+      </div>
+    </DrawerLeft>
+  </div>
 
   {#if $selectedElement !== undefined && $selectedLayer !== undefined && !$selectedLayer.popupInFloatover}
     <!-- right modal with the selected element view -->