Themes: improve favourite panel

src/UI/Favourites/FavouriteSummary.svelte

@@ -1,10 +1,59 @@
 <script lang="ts">
 
-  export let properties: Record<string, string>
+  import type { SpecialVisualizationState } from "../SpecialVisualization";
+  import TagRenderingAnswer from "../Popup/TagRendering/TagRenderingAnswer.svelte";
+  import type { Feature } from "geojson";
+  import { ImmutableStore } from "../../Logic/UIEventSource";
+  import { GeoOperations } from "../../Logic/GeoOperations";
+  import Center from "../../assets/svg/Center.svelte";
+
+  export let feature: Feature;
+  let properties: Record<string, string> = feature.properties;
+  export let state: SpecialVisualizationState;
+  let tags = state.featureProperties.getStore(properties.id) ?? new ImmutableStore(properties);
+
+  const favLayer = state.layerState.filteredLayers.get("favourite");
+  const favConfig = favLayer.layerDef;
+  const titleConfig = favConfig.title;
+  
+  function center(){
+    const [lon, lat] = GeoOperations.centerpointCoordinates(feature)
+    state.mapProperties.location.setData(
+      {lon, lat}
+    )
+    state.guistate.menuIsOpened.setData(false)
+  }
+  
+  function select(){
+    state.selectedLayer.setData(favConfig)
+    state.selectedElement.setData(feature)
+    center()
+  }
+  
+  const titleIconBlacklist = ["osmlink","sharelink","favourite_title_icon"]
+
 </script>
 
-<div>
-  {JSON.stringify(properties)}
-  {properties?.id ?? "undefined"}
-  <a href={properties._backend +"/"+ properties?.id}>OSM</a>
+<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">
+    <TagRenderingAnswer config={titleConfig} layer={favConfig} selectedElement={feature} {tags} />
+  </h3>
+
+  <div class="flex items-center">
+    {#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"}>
+          <TagRenderingAnswer
+            config={titleIconConfig}
+            {tags}
+            selectedElement={feature}
+            {state}
+            layer={favLayer}
+            extraClasses="h-full justify-center"
+          />
+        </div>
+      {/if}
+    {/each}
+    <button on:click={() => center()} class="p-1" ><Center class="w-6 h-6"/></button>
+  </div>
 </div>

src/UI/Favourites/Favourites.svelte

@@ -11,9 +11,9 @@
 
 <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}
+  {#each $favourites as feature (feature.properties.id)}
+    <FavouriteSummary {feature} {state} />
+  {/each}
 </div>

src/UI/ThemeViewGUI.svelte

@@ -64,7 +64,6 @@
   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;
@@ -499,7 +498,7 @@
         Your favourites
       </div>
 
-      <div class="flex flex-col" slot="content2">
+      <div class="flex flex-col m-2" slot="content2">
         <h3>Your favourite locations</h3>
         <Favourites {state}/>
       </div>