UI(Inspector): update tabgroups, fix import

src/UI/History/AggregateView.svelte

@@ -12,9 +12,9 @@
   import Translations from "../i18n/Translations"
   import type { TagRenderingConfigJson } from "../../Models/ThemeConfig/Json/TagRenderingConfigJson"
   import { Or } from "../../Logic/Tags/Or"
-  import { Utils } from "../../Utils"
   import ChartJs from "../Base/ChartJs.svelte"
   import { ChartJsUtils } from "../Base/ChartJsUtils"
+  import { Lists } from "../../Utils/Lists"
 
   export let onlyShowUsername: string[]
   export let features: Feature[]

src/UI/InspectorGUI.svelte

@@ -33,6 +33,9 @@
   import GeocodeResults from "./Search/GeocodeResults.svelte"
   import MagnifyingGlassCircle from "@babeard/svelte-heroicons/mini/MagnifyingGlassCircle"
   import type { GeocodeResult } from "../Logic/Search/GeocodingProvider"
+  import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@rgossiaux/svelte-headlessui"
+  import WikipediaTitle from "./Wikipedia/WikipediaTitle.svelte"
+  import WikipediaArticle from "./Wikipedia/WikipediaArticle.svelte"
 
   console.log("Loading inspector GUI")
   let username = QueryParameters.GetQueryParameter("user", undefined, "Inspect this user")
@@ -49,7 +52,7 @@
     new CoordinateSearch(),
     new OpenLocationCodeSearch(),
     new PhotonSearch(true, 2),
-    new PhotonSearch()
+    new PhotonSearch(),
   )
   let showSearchDrawer = new UIEventSource(true)
   let searchIsFocussed = new UIEventSource(false)
@@ -138,7 +141,7 @@
     const overpass = new Overpass(
       Constants.defaultOverpassUrls[0],
       undefined,
-      user.split(";").map((user) => 'nw(user_touched:"' + user + '");')
+      user.split(";").map((user) => "nw(user_touched:\"" + user + "\");"),
     )
     if (!maplibremap.bounds.data) {
       return
@@ -161,8 +164,6 @@
     return true
   })
 
-  let mode: "map" | "table" | "aggregate" | "images" = "map"
-
   let showPreviouslyVisited = new UIEventSource(true)
   const t = Translations.t.inspector
 
@@ -207,22 +208,29 @@
     </a>
   </div>
 
-  <div class="flex">
+  <TabGroup class="flex-grow flex flex-col">
-    <button class:primary={mode === "map"} on:click={() => (mode = "map")}>
+    <TabList class="tablist">
-      <Tr t={t.mapView} />
+      <Tab class={({ selected }) => ("tab "+ (selected ? "tab-selected" : "tab-unselected"))}>
-    </button>
-    <button class:primary={mode === "table"} on:click={() => (mode = "table")}>
-      <Tr t={t.tableView} />
-    </button>
-    <button class:primary={mode === "aggregate"} on:click={() => (mode = "aggregate")}>
-      <Tr t={t.aggregateView} />
-    </button>
-    <button class:primary={mode === "images"} on:click={() => (mode = "images")}>
-      <Tr t={t.images} />
-    </button>
-  </div>
 
-  {#if mode === "map"}
+        <Tr t={t.mapView} />
+      </Tab>
+      <Tab class={({ selected }) => ("tab "+ (selected ? "tab-selected" : "tab-unselected"))}>
+
+        <Tr t={t.tableView} />
+      </Tab>
+      <Tab class={({ selected }) => ("tab "+ (selected ? "tab-selected" : "tab-unselected"))}>
+
+        <Tr t={t.aggregateView} />
+      </Tab>
+      <Tab class={({ selected }) => ("tab "+ (selected ? "tab-selected" : "tab-unselected"))}>
+
+        <Tr t={t.images} />
+      </Tab>
+    </TabList>
+    <TabPanels class="flex-grow flex flex-col">
+
+
+      <TabPanel class="flex-grow">
         {#if $selectedElement !== undefined}
           <!-- right modal with the selected element view -->
           <Drawer
@@ -261,7 +269,7 @@
           </Drawer>
         {/if}
 
-    <div class="relative m-1 flex-grow overflow-hidden rounded-xl">
+        <div class="relative m-1 h-full flex-grow overflow-hidden rounded-xl">
           <MaplibreMap {map} mapProperties={maplibremap} autorecovery={true} />
           <div class="absolute right-0 top-0 w-1/4 p-4">
             <Searchbar
@@ -275,21 +283,23 @@
             {/if}
           </div>
         </div>
-  {:else if mode === "table"}
+
-    <div class="m-2 h-full overflow-y-auto">
+      </TabPanel>
+
+      <TabPanel class="overflow-auto grow-0">
         {#each $featuresStore as f}
           <History onlyShowChangesBy={$username?.split(";")} id={f.properties.id} />
         {/each}
-    </div>
+      </TabPanel>
-  {:else if mode === "aggregate"}
+      <TabPanel >
-    <div class="m-2 h-full overflow-y-auto">
         <AggregateView features={$featuresStore} onlyShowUsername={$username?.split(";")} />
-    </div>
+      </TabPanel>
-  {:else if mode === "images"}
+      <TabPanel>
-    <div class="m-2 h-full overflow-y-auto">
         <AggregateImages features={$featuresStore} onlyShowUsername={$username?.split(";")} />
-    </div>
+      </TabPanel>
-  {/if}
+
+    </TabPanels>
+  </TabGroup>
 </div>
 
 <Page shown={showPreviouslyVisited}>