Favourites: improve overview, update all features from OSM when loading

src/UI/Base/ToSvelte.svelte

@@ -9,7 +9,7 @@
     const uiElem = typeof construct === "function" ? construct() : construct
     html = uiElem?.ConstructElement()
     if (html !== undefined) {
-      elem.replaceWith(html)
+      elem?.replaceWith(html)
     }
   })
 

src/UI/Favourites/FavouriteSummary.svelte

@@ -49,14 +49,14 @@
 
 </script>
 
-<div class="px-1 my-1 border-2 border-dashed border-gray-300 rounded flex justify-between items-center">
-  <h3 on:click={() => select()} class="cursor-pointer ml-1 m-0">
+<div class="px-1 my-1 border-2 border-dashed border-gray-300 rounded grid grid-cols-3 items-center no-weblate">
+  <button on:click={() => select()} class="cursor-pointer ml-1 m-0 link justify-self-start">
     <TagRenderingAnswer extraClasses="underline" config={titleConfig} layer={favConfig} selectedElement={feature} {tags} />
-  </h3>
+  </button>
 
   {$distance}
   
-  <div class="flex items-center">
+  <div class="flex items-center justify-self-end title-icons links-as-button gap-x-0.5 p-1 pt-0.5 sm:pt-1">
     {#each favConfig.titleIcons as titleIconConfig}
       {#if (titleIconBlacklist.indexOf(titleIconConfig.id) < 0) && (titleIconConfig.condition?.matchesProperties(properties) ?? true) && (titleIconConfig.metacondition?.matchesProperties( { ...properties, ...state.userRelatedState.preferencesAsTags.data } ) ?? true) && titleIconConfig.IsKnown(properties)}
         <div class={titleIconConfig.renderIconClass ?? "flex h-8 w-8 items-center"}>
@@ -71,6 +71,7 @@
         </div>
       {/if}
     {/each}
+    
     <button on:click={() => center()} class="p-1" ><Center class="w-6 h-6"/></button>
   </div>
 </div>

src/UI/Favourites/Favourites.svelte

@@ -1,19 +1,58 @@
 <script lang="ts">
   import type { SpecialVisualizationState } from "../SpecialVisualization";
   import FavouriteSummary from "./FavouriteSummary.svelte";
+  import Translations from "../i18n/Translations";
+  import Tr from "../Base/Tr.svelte";
+  import { DownloadIcon } from "@rgossiaux/svelte-heroicons/solid";
+  import { Utils } from "../../Utils";
+  import { GeoOperations } from "../../Logic/GeoOperations";
+  import type { Feature, LineString, Point } from "geojson";
 
   /**
    * A panel showing all your favourites
    */
   export let state: SpecialVisualizationState;
   let favourites = state.favourites.allFavourites;
+
+  function downloadGeojson() {
+    const contents = { features: favourites.data, type: "FeatureCollection" };
+    Utils.offerContentsAsDownloadableFile(
+      JSON.stringify(contents),
+      "mapcomplete-favourites-" + (new Date().toISOString()) + ".geojson",
+      {
+        mimetype: "application/vnd.geo+json"
+      }
+    );
+  }
+
+  function downloadGPX() {
+    const gpx = GeoOperations.toGpxPoints(<Feature<Point>>favourites.data, "MapComplete favourites");
+    Utils.offerContentsAsDownloadableFile(gpx,
+      "mapcomplete-favourites-" + (new Date().toISOString()) + ".gpx",
+      {
+        mimetype: "{gpx=application/gpx+xml}"
+      });
+
+  }
+  
 </script>
 
-<div class="flex flex-col">
-  You marked {$favourites.length} locations as a favourite location.
+<div class="flex flex-col" on:keypress={(e) => console.log("Got keypress", e)}>
+  <Tr t={Translations.t.favouritePoi.intro.Subs({length: $favourites?.length ?? 0})} />
+  <Tr t={Translations.t.favouritePoi.privacy} />
 
-  This list is only visible to you
   {#each $favourites as feature (feature.properties.id)}
     <FavouriteSummary {feature} {state} />
   {/each}
+
+  <div class="mt-8">
+    <button class="flex p-2" on:click={() => downloadGeojson()}>
+      <DownloadIcon class="h-6 w-6" />
+      <Tr t={Translations.t.favouritePoi.downloadGeojson} />
+    </button>
+    <button class="flex p-2" on:click={() => downloadGPX()}>
+      <DownloadIcon class="h-6 w-6" />
+      <Tr t={Translations.t.favouritePoi.downloadGpx} />
+    </button>
+  </div>
 </div>