Feature(grb): add popup feature to validate e.g. a user profile

src/UI/ThemeViewGUI.svelte

@@ -49,6 +49,8 @@
   import Loading from "./Base/Loading.svelte"
   import { WithSearchState } from "../Models/ThemeViewState/WithSearchState"
   import TitleHandler from "../Logic/Actors/TitleHandler"
+  import Popup from "./Base/Popup.svelte"
+  import TagRenderingAnswer from "./Popup/TagRendering/TagRenderingAnswer.svelte"
 
   export let state: WithSearchState
   new TitleHandler(state.selectedElement, state)
@@ -76,6 +78,7 @@
   let mapproperties: MapProperties = state.mapProperties
   let searchOpened = state.searchState.showSearchDrawer
 
+  let metatags = state.userRelatedState.preferencesAsTags
   Orientation.singleton.startMeasurements()
 
   let slideDuration = 150 // ms
@@ -148,7 +151,7 @@
     const bottomRight = mlmap.unproject([rect.right, rect.bottom])
     const bbox = new BBox([
       [topLeft.lng, topLeft.lat],
-      [bottomRight.lng, bottomRight.lat],
+      [bottomRight.lng, bottomRight.lat]
     ])
     state.visualFeedbackViewportBounds.setData(bbox)
   }
@@ -500,5 +503,24 @@
     {/if}
   {/if}
 
+  {#each theme.popups as popup}
+    {#if popup.condition.matchesProperties($metatags)}
+      <Popup shown={new UIEventSource(true)} dismissable={popup.dismissible}>
+        <TagRenderingAnswer slot="header" config={popup.title} {state}
+                            tags={metatags}
+                            layer={undefined}
+                            selectedElement={({type: "Feature", properties: $metatags, geometry: {type: "Point", coordinates: [0,0]}})} />
+        <div class="flex flex-col">
+          {#each popup.body as body}
+            <TagRenderingAnswer config={body} {state}
+                                tags={metatags}
+                                layer={undefined}
+                                selectedElement={({type: "Feature", properties: $metatags, geometry: {type: "Point", coordinates: [0,0]}})} />
+          {/each}
+          <span class="subtle">{popup.id}</span>
+        </div>
+      </Popup>
+    {/if}
+  {/each}
   <MenuDrawer onlyLink={false} {state} />
 </main>