UX: move some items behind login-toggles, add a 'login to add pictures' button again (fix #1698)

src/UI/Image/UploadImage.svelte

@@ -12,6 +12,7 @@
     import UploadingImageCounter from "./UploadingImageCounter.svelte"
     import FileSelector from "../Base/FileSelector.svelte"
     import Camera_plus from "../../assets/svg/Camera_plus.svelte"
+    import LoginButton from "../Base/LoginButton.svelte"
 
     export let state: SpecialVisualizationState
 
@@ -44,7 +45,9 @@
 </script>
 
 <LoginToggle {state}>
-  <Tr slot="not-logged-in" t={t.pleaseLogin} />
+  <LoginButton slot="not-logged-in" clss="small w-full">
+    <Tr t={Translations.t.image.pleaseLogin} />
+  </LoginButton>
   <div class="flex flex-col">
     <UploadingImageCounter {state} {tags} />
     <FileSelector

src/UI/Popup/DeleteFlow/DeleteWizard.svelte

@@ -66,7 +66,7 @@
                     theme: state?.layout?.id ?? "unknown",
                     specialMotivation: deleteReason,
                 },
-        canBeDeleted.data
+                canBeDeleted.data,
             )
         } else {
             // no _delete_reason is given, which implies that this is _not_ a deletion but merely a retagging via a nonDeleteMapping
@@ -82,6 +82,7 @@
         currentState = "deleted"
     }
 </script>
+<LoginToggle ignoreLoading={true} {state}>
 
   {#if $canBeDeleted === false && !hasSoftDeletion}
     <div class="low-interaction flex flex-col">
@@ -89,7 +90,6 @@
       <Tr cls="subtle" t={t.useSomethingElse} />
     </div>
   {:else}
-  <LoginToggle ignoreLoading={true} {state}>
     {#if currentState === "start"}
       <button
         class="flex items-center"
@@ -158,5 +158,5 @@
         <Tr t={t.isDeleted} />
       </div>
     {/if}
-  </LoginToggle>
   {/if}
+</LoginToggle>

src/UI/Popup/NearbyImages.svelte

@@ -14,6 +14,7 @@
     import AllImageProviders from "../../Logic/ImageProviders/AllImageProviders"
     import Tr from "../Base/Tr.svelte"
     import Translations from "../i18n/Translations"
+    import LoginToggle from "../Base/LoginToggle.svelte"
 
     export let tags: Store<OsmTags>
     export let state: SpecialVisualizationState
@@ -31,13 +32,13 @@
             allowSpherical: new UIEventSource<boolean>(false),
             blacklist: AllImageProviders.LoadImagesFor(tags),
         },
-    state.indexedFeatures
+        state.indexedFeatures,
     )
 
     let images: Store<P4CPicture[]> = imagesProvider.store.map((images) => images.slice(0, 20))
     let allDone = imagesProvider.allDone
 </script>
-
+<LoginToggle {state}>
   <div class="interactive border-interactive rounded-2xl p-2">
     <div class="flex justify-between">
       <h4>
@@ -59,3 +60,4 @@
       </div>
     {/if}
   </div>
+</LoginToggle>

src/UI/Popup/NearbyImagesCollapsed.svelte

@@ -12,6 +12,7 @@
   import { XCircleIcon } from "@babeard/svelte-heroicons/solid"
   import exp from "constants"
   import Camera_plus from "../../assets/svg/Camera_plus.svelte"
+  import LoginToggle from "../Base/LoginToggle.svelte"
 
   export let tags: Store<OsmTags>
   export let state: SpecialVisualizationState
@@ -25,6 +26,7 @@
 
   let expanded = false
 </script>
+<LoginToggle {state}>
   
 {#if expanded}
   <NearbyImages {tags} {state} {lon} {lat} {feature} {linkable}>
@@ -47,3 +49,4 @@
     <Tr t={t.seeNearby} />
   </button>
 {/if}
+</LoginToggle>