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,89 +208,98 @@
     </a>
   </div>
 
-  <div class="flex">
-    <button class:primary={mode === "map"} on:click={() => (mode = "map")}>
-      <Tr t={t.mapView} />
-    </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>
+  <TabGroup class="flex-grow flex flex-col">
+    <TabList class="tablist">
+      <Tab class={({ selected }) => ("tab "+ (selected ? "tab-selected" : "tab-unselected"))}>
 
-  {#if mode === "map"}
-    {#if $selectedElement !== undefined}
-      <!-- right modal with the selected element view -->
-      <Drawer
-        placement="right"
-        transitionType="fly"
-        activateClickOutside={false}
-        backdrop={false}
-        id="drawer-right"
-        width="w-full md:w-6/12 lg:w-5/12 xl:w-4/12"
-        rightOffset="inset-y-0 right-0"
-        transitionParams={{
+        <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
+            placement="right"
+            transitionType="fly"
+            activateClickOutside={false}
+            backdrop={false}
+            id="drawer-right"
+            width="w-full md:w-6/12 lg:w-5/12 xl:w-4/12"
+            rightOffset="inset-y-0 right-0"
+            transitionParams={{
           x: 640,
           duration: 0,
           easing: linear,
         }}
-        divClass="overflow-y-auto z-50 bg-white"
-        hidden={$selectedElement === undefined}
-        on:close={() => {
+            divClass="overflow-y-auto z-50 bg-white"
+            hidden={$selectedElement === undefined}
+            on:close={() => {
           selectedElement.setData(undefined)
         }}
-      >
-        <TitledPanel>
-          <div slot="title" class="flex justify-between">
-            <a
-              target="_blank"
-              rel="noopener"
-              href={"https://osm.org/" + $selectedElement.properties.id}
-            >
-              {$selectedElement.properties.id}
-            </a>
-            <XCircleIcon class="h-6 w-6" on:click={() => selectedElement.set(undefined)} />
-          </div>
+          >
+            <TitledPanel>
+              <div slot="title" class="flex justify-between">
+                <a
+                  target="_blank"
+                  rel="noopener"
+                  href={"https://osm.org/" + $selectedElement.properties.id}
+                >
+                  {$selectedElement.properties.id}
+                </a>
+                <XCircleIcon class="h-6 w-6" on:click={() => selectedElement.set(undefined)} />
+              </div>
 
-          <History onlyShowChangesBy={$username.split(";")} id={$selectedElement.properties.id} />
-        </TitledPanel>
-      </Drawer>
-    {/if}
-
-    <div class="relative m-1 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
-          on:search={() => search()}
-          isFocused={searchIsFocussed}
-          value={searchvalue}
-          on:focus={() => state.searchState.showSearchDrawer.set(true)}
-        />
-        {#if $searchSuggestions?.length > 0 || $searchIsFocussed}
-          <GeocodeResults {state} on:select={(event) => search(event.detail)} />
+              <History onlyShowChangesBy={$username.split(";")} id={$selectedElement.properties.id} />
+            </TitledPanel>
+          </Drawer>
         {/if}
-      </div>
-    </div>
-  {:else if mode === "table"}
-    <div class="m-2 h-full overflow-y-auto">
-      {#each $featuresStore as f}
-        <History onlyShowChangesBy={$username?.split(";")} id={f.properties.id} />
-      {/each}
-    </div>
-  {:else if mode === "aggregate"}
-    <div class="m-2 h-full overflow-y-auto">
-      <AggregateView features={$featuresStore} onlyShowUsername={$username?.split(";")} />
-    </div>
-  {:else if mode === "images"}
-    <div class="m-2 h-full overflow-y-auto">
-      <AggregateImages features={$featuresStore} onlyShowUsername={$username?.split(";")} />
-    </div>
-  {/if}
+
+        <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
+              on:search={() => search()}
+              isFocused={searchIsFocussed}
+              value={searchvalue}
+              on:focus={() => state.searchState.showSearchDrawer.set(true)}
+            />
+            {#if $searchSuggestions?.length > 0 || $searchIsFocussed}
+              <GeocodeResults {state} on:select={(event) => search(event.detail)} />
+            {/if}
+          </div>
+        </div>
+
+      </TabPanel>
+
+      <TabPanel class="overflow-auto grow-0">
+        {#each $featuresStore as f}
+          <History onlyShowChangesBy={$username?.split(";")} id={f.properties.id} />
+        {/each}
+      </TabPanel>
+      <TabPanel >
+        <AggregateView features={$featuresStore} onlyShowUsername={$username?.split(";")} />
+      </TabPanel>
+      <TabPanel>
+        <AggregateImages features={$featuresStore} onlyShowUsername={$username?.split(";")} />
+      </TabPanel>
+
+    </TabPanels>
+  </TabGroup>
 </div>
 
 <Page shown={showPreviouslyVisited}>