UX: usersetting visual cleanup, add 'clear caches'-option, version bump

src/UI/Base/DynLink.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { ImmutableStore, Store } from "../../Logic/UIEventSource"
+  import Icon from "../Map/Icon.svelte"
 
   export let text: Store<string>
   export let href: Store<string>
@@ -8,6 +9,7 @@
   export let ariaLabel: Store<string> = undefined
 
   export let newTab: Store<boolean> = new ImmutableStore(false)
+  export let icon: Store<string> = undefined
 </script>
 
 <a
@@ -18,5 +20,8 @@
   download={$download}
   class={$classnames}
 >
+  {#if $icon}
+    <Icon clss="w-8 h-8" icon={$icon}/>
+    {/if}
   {@html $text}
 </a>

src/UI/Base/LogoutButton.svelte

@@ -9,7 +9,6 @@
 </script>
 
 <button
-  class="as-link"
   on:click={() => {
     osmConnection.LogOut()
   }}

src/UI/Base/ToSvelte.svelte

@@ -32,12 +32,19 @@
 </script>
 
 {#if isSvelte}
-  <svelte:component
-    this={svelteElem?._svelteComponent}
-    {...svelteElem._props}
-    class={svelteElem.getClass()}
-    style={svelteElem.getStyle()}
-  />
+  {#if svelteElem.getClass() || svelteElem.getStyle()}
+    <svelte:component
+      this={svelteElem?._svelteComponent}
+      {...svelteElem._props}
+      class={svelteElem.getClass()}
+      style={svelteElem.getStyle()}
+    />
+  {:else}
+    <svelte:component
+      this={svelteElem?._svelteComponent}
+      {...svelteElem._props}
+    />
+  {/if}
 {:else}
   <span bind:this={elem} />
 {/if}

src/UI/Base/WeblateLink.svelte

@@ -2,6 +2,7 @@
   import Locale from "../i18n/Locale"
   import LinkToWeblate from "./LinkToWeblate"
   import Translate from "../../assets/svg/Translate.svelte"
+  import { LanguageIcon } from "@babeard/svelte-heroicons/solid"
 
   /**
    * Shows a small icon which will open up weblate; a contributor can translate the item for 'context' there
@@ -26,11 +27,11 @@
   {:else if $linkToWeblate}
     <a
       href={LinkToWeblate.hrefToWeblate($language, context)}
-      class="weblate-link hidden-on-mobile mx-1"
+      class="weblate-link hidden-on-mobile"
       target="_blank"
       tabindex="-1"
     >
-      <Translate class="font-gray inline-block" />
+      <LanguageIcon class="font-gray"/>
     </a>
   {/if}
 {/if}

src/UI/InputElement/LanguagePicker.svelte

@@ -46,7 +46,7 @@
       <LanguageIcon class="mr-1 h-4 w-4 shrink-0" aria-hidden="true" />
     </label>
 
-    <Dropdown cls="max-w-full" value={assignTo} id="pick-language">
+    <Dropdown cls="max-w-full" value={assignTo}>
       {#if preferredFiltered}
         {#each preferredFiltered as language}
           <option value={language} class="font-bold">

src/UI/Popup/ClearCaches.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+
+
+  import { IdbLocalStorage } from "../../Logic/Web/IdbLocalStorage"
+  import { Utils } from "../../Utils"
+
+  function clearCaches(){
+    IdbLocalStorage.clearAll()
+    Utils.download("./service-worker-clear")
+  }
+  export let msg : string
+</script>
+
+<button on:click={() => clearCaches()} class="flex gap-x-2">
+  {msg}
+</button>

src/UI/SpecialVisualizations.ts

@@ -96,8 +96,8 @@ import { CombinedFetcher } from "../Logic/Web/NearbyImagesSearch"
 import { And } from "../Logic/Tags/And"
 import CloseNoteButton from "./Popup/Notes/CloseNoteButton.svelte"
 import PendingChangesIndicator from "./BigComponents/PendingChangesIndicator.svelte"
-import Loading from "./Base/Loading"
 import QrCode from "./Popup/QrCode.svelte"
+import ClearCaches from "./Popup/ClearCaches.svelte"
 
 class NearbyImageVis implements SpecialVisualization {
     // Class must be in SpecialVisualisations due to weird cyclical import that breaks the tests
@@ -1304,6 +1304,10 @@ export default class SpecialVisualizations {
                     {
                         name: "arialabel",
                         doc: "If set, this text will be used as aria-label"
+                    },
+                    {
+                        name: "icon",
+                        doc: "If set, show this icon next to the link. You might want to combine this with `class: button`"
                     }
                 ],
 
@@ -1312,7 +1316,7 @@ export default class SpecialVisualizations {
                     tagSource: UIEventSource<Record<string, string>>,
                     args: string[]
                 ): BaseUIElement {
-                    let [text, href, classnames, download, ariaLabel] = args
+                    let [text, href, classnames, download, ariaLabel, icon] = args
                     if (download === "") {
                         download = undefined
                     }
@@ -1979,6 +1983,20 @@ export default class SpecialVisualizations {
                 constr(state: SpecialVisualizationState, tagSource: UIEventSource<Record<string, string>>, argument: string[], feature: Feature, layer: LayerConfig): BaseUIElement {
                     return new SvelteUIElement(PendingChangesIndicator, {state, compact: false})
                 }
+            },
+            {
+                funcName: "clear_caches",
+                docs: "A button which clears the locally downloaded data and the service worker. Login status etc will be kept",
+                args:[
+                    {
+                        name: "text",
+                        required: true,
+                        doc: "The text to show on the button"
+                    }
+                ],
+                constr(state: SpecialVisualizationState, tagSource: UIEventSource<Record<string, string>>, argument: string[], feature: Feature, layer: LayerConfig): SvelteUIElement {
+                    return new SvelteUIElement<any, any, any>(ClearCaches, {msg: argument[0] ?? "Clear local caches"})
+                }
             }
         ]
 

src/UI/ThemeViewGUI.svelte

@@ -620,7 +620,7 @@
           <Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} />
         </div>
 
-        <div class="links-as-button" slot="content1">
+        <div class="links-as-button py-8" slot="content1">
           <!-- All shown components are set by 'usersettings.json', which happily uses some special visualisations created specifically for it -->
           <LoginToggle {state}>
             <div class="flex flex-col" slot="not-logged-in">