Favourites: include _all_ tagRenderings

src/UI/BigComponents/UploadTraceToOsmUI.ts

@@ -121,9 +121,9 @@ export default class UploadTraceToOsmUI extends LoginToggle {
                     ]).SetClass("flex p-2 rounded-xl border-2 subtle-border items-center"),
                     new Toggle(
                         confirmPanel,
-                        new SubtleButton(new SvelteUIElement(Upload), t.title).onClick(() =>
-                            clicked.setData(true)
-                        ),
+                        new SubtleButton(new SvelteUIElement(Upload), t.title)
+                            .onClick(() => clicked.setData(true))
+                            .SetClass("w-full"),
                         clicked
                     ),
                     uploadFinished

src/UI/Favourites/FavouriteSummary.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+
+  export let properties: Record<string, string>
+</script>
+
+<div>
+  {JSON.stringify(properties)}
+  {properties?.id ?? "undefined"}
+  <a href={properties._backend +"/"+ properties?.id}>OSM</a>
+</div>

src/UI/Favourites/Favourites.svelte

@@ -1,8 +1,19 @@
 <script lang="ts">
-  import { SpecialVisualization } from "../SpecialVisualization";
+  import type { SpecialVisualizationState } from "../SpecialVisualization";
+  import FavouriteSummary from "./FavouriteSummary.svelte";
 
   /**
    * A panel showing all your favourites
    */
-  export let state: SpecialVisualizationState
+  export let state: SpecialVisualizationState;
+  let favourites = state.favourites.allFavourites;
 </script>
+
+<div class="flex flex-col">
+  You marked {$favourites.length} locations as a favourite location.
+  
+  This list is only visible to you
+{#each $favourites as f}
+  <FavouriteSummary properties={f.properties} />
+{/each}
+</div>

src/UI/Popup/ExportAsGpxViz.ts

@@ -31,14 +31,16 @@ export class ExportAsGpxViz implements SpecialVisualization {
                 t.downloadFeatureAsGpx.SetClass("font-bold text-lg"),
                 t.downloadGpxHelper.SetClass("subtle"),
             ]).SetClass("flex flex-col")
-        ).onClick(() => {
-            console.log("Exporting as GPX!")
-            const tags = tagSource.data
-            const title = layer.title?.GetRenderValue(tags)?.Subs(tags)?.txt ?? "gpx_track"
-            const gpx = GeoOperations.toGpx(<Feature<LineString>>feature, title)
-            Utils.offerContentsAsDownloadableFile(gpx, title + "_mapcomplete_export.gpx", {
-                mimetype: "{gpx=application/gpx+xml}",
+        )
+            .SetClass("w-full")
+            .onClick(() => {
+                console.log("Exporting as GPX!")
+                const tags = tagSource.data
+                const title = layer.title?.GetRenderValue(tags)?.Subs(tags)?.txt ?? "gpx_track"
+                const gpx = GeoOperations.toGpx(<Feature<LineString>>feature, title)
+                Utils.offerContentsAsDownloadableFile(gpx, title + "_mapcomplete_export.gpx", {
+                    mimetype: "{gpx=application/gpx+xml}",
+                })
             })
-        })
     }
 }

src/UI/SpecialVisualizations.ts

@@ -534,6 +534,9 @@ export default class SpecialVisualizations {
                     feature: Feature,
                     layer: LayerConfig
                 ): BaseUIElement {
+                    if (!layer.deletion) {
+                        return undefined
+                    }
                     return new SvelteUIElement(DeleteWizard, {
                         tags: tagSource,
                         deleteConfig: layer.deletion,
@@ -873,20 +876,22 @@ export default class SpecialVisualizations {
                             t.downloadFeatureAsGeojson.SetClass("font-bold text-lg"),
                             t.downloadGeoJsonHelper.SetClass("subtle"),
                         ]).SetClass("flex flex-col")
-                    ).onClick(() => {
-                        console.log("Exporting as Geojson")
-                        const tags = tagSource.data
-                        const title =
-                            layer?.title?.GetRenderValue(tags)?.Subs(tags)?.txt ?? "geojson"
-                        const data = JSON.stringify(feature, null, "  ")
-                        Utils.offerContentsAsDownloadableFile(
-                            data,
-                            title + "_mapcomplete_export.geojson",
-                            {
-                                mimetype: "application/vnd.geo+json",
-                            }
-                        )
-                    })
+                    )
+                        .onClick(() => {
+                            console.log("Exporting as Geojson")
+                            const tags = tagSource.data
+                            const title =
+                                layer?.title?.GetRenderValue(tags)?.Subs(tags)?.txt ?? "geojson"
+                            const data = JSON.stringify(feature, null, "  ")
+                            Utils.offerContentsAsDownloadableFile(
+                                data,
+                                title + "_mapcomplete_export.geojson",
+                                {
+                                    mimetype: "application/vnd.geo+json",
+                                }
+                            )
+                        })
+                        .SetClass("w-full")
                 },
             },
             {

src/UI/ThemeViewGUI.svelte

@@ -15,7 +15,7 @@
   import type { MapProperties } from "../Models/MapProperties";
   import Geosearch from "./BigComponents/Geosearch.svelte";
   import Translations from "./i18n/Translations";
-  import { CogIcon, EyeIcon, MenuIcon, XCircleIcon } from "@rgossiaux/svelte-heroicons/solid";
+  import { CogIcon, EyeIcon, HeartIcon, MenuIcon, XCircleIcon } from "@rgossiaux/svelte-heroicons/solid";
   import Tr from "./Base/Tr.svelte";
   import CommunityIndexView from "./BigComponents/CommunityIndexView.svelte";
   import FloatOver from "./Base/FloatOver.svelte";
@@ -64,6 +64,8 @@
   import Community from "../assets/svg/Community.svelte";
   import Download from "../assets/svg/Download.svelte";
   import Share from "../assets/svg/Share.svelte";
+  import FavouriteSummary from "./Favourites/FavouriteSummary.svelte";
+  import Favourites from "./Favourites/Favourites.svelte";
 
   export let state: ThemeViewState;
   let layout = state.layout;
@@ -493,22 +495,31 @@
       </div>
 
       <div class="flex" slot="title2">
+        <HeartIcon class="h-6 w-6" />
+        Your favourites
+      </div>
+
+      <div class="flex flex-col" slot="content2">
+        <h3>Your favourite locations</h3>
+        <Favourites {state}/>
+      </div>
+      <div class="flex" slot="title3">
         <Community class="w-6 h-6"/>
         <Tr t={Translations.t.communityIndex.title} />
       </div>
-      <div class="m-2" slot="content2">
+      <div class="m-2" slot="content3">
         <CommunityIndexView location={state.mapProperties.location} />
       </div>
-      <div class="flex" slot="title3">
+      <div class="flex" slot="title4">
         <EyeIcon class="w-6" />
         <Tr t={Translations.t.privacy.title} />
       </div>
-      <div class="m-2" slot="content3">
+      <div class="m-2" slot="content4">
         <ToSvelte construct={() => new PrivacyPolicy()} />
       </div>
 
-      <Tr slot="title4" t={Translations.t.advanced.title} />
-      <div class="m-2 flex flex-col" slot="content4">
+      <Tr slot="title5" t={Translations.t.advanced.title} />
+      <div class="m-2 flex flex-col" slot="content5">
         <If condition={featureSwitches.featureSwitchEnableLogin}>
           <OpenIdEditor mapProperties={state.mapProperties} />
           <OpenJosm {state}/>