Fix: cleanup of wikipedia panel, fix #1570

src/UI/Wikipedia/WikipediaArticle.svelte

@@ -1,35 +1,38 @@
 <script lang="ts">
-  import type { FullWikipediaDetails } from "../../Logic/Web/Wikipedia"
+  import type { FullWikipediaDetails } from "../../Logic/Web/Wikipedia";
-  import { Store } from "../../Logic/UIEventSource"
+  import { Store } from "../../Logic/UIEventSource";
-  import FromHtml from "../Base/FromHtml.svelte"
+  import FromHtml from "../Base/FromHtml.svelte";
-  import Loading from "../Base/Loading.svelte"
+  import Loading from "../Base/Loading.svelte";
-  import { Disclosure, DisclosureButton, DisclosurePanel } from "@rgossiaux/svelte-headlessui"
+  import { Disclosure, DisclosureButton, DisclosurePanel } from "@rgossiaux/svelte-headlessui";
-  import { ChevronRightIcon } from "@rgossiaux/svelte-heroicons/solid"
+  import { ChevronRightIcon } from "@rgossiaux/svelte-heroicons/solid";
-  import ToSvelte from "../Base/ToSvelte.svelte"
+  import ToSvelte from "../Base/ToSvelte.svelte";
-  import WikidataPreviewBox from "./WikidataPreviewBox"
+  import WikidataPreviewBox from "./WikidataPreviewBox";
-  import Tr from "../Base/Tr.svelte"
+  import Tr from "../Base/Tr.svelte";
-  import Translations from "../i18n/Translations"
+  import Translations from "../i18n/Translations";
 
   /**
    * Small helper
    */
-  export let wikipediaDetails: Store<FullWikipediaDetails>
+  export let wikipediaDetails: Store<FullWikipediaDetails>;
 </script>
 
-<a class="flex" href={$wikipediaDetails.articleUrl} rel="noreferrer" target="_blank">
+{#if $wikipediaDetails.articleUrl}
+
+  <a class="flex" href={$wikipediaDetails.articleUrl} rel="noreferrer" target="_blank">
     <img class="h-6 w-6" src="./assets/svg/wikipedia.svg" />
     <Tr t={Translations.t.general.wikipedia.fromWikipedia} />
-</a>
+  </a>
-
+{/if}
 {#if $wikipediaDetails.wikidata}
   <ToSvelte construct={WikidataPreviewBox.WikidataResponsePreview($wikipediaDetails.wikidata)} />
 {/if}
+{#if $wikipediaDetails.articleUrl}
 
-{#if $wikipediaDetails.firstParagraph === "" || $wikipediaDetails.firstParagraph === undefined}
+  {#if $wikipediaDetails.firstParagraph === "" || $wikipediaDetails.firstParagraph === undefined}
     <Loading>
       <Tr t={Translations.t.general.wikipedia.loading} />
     </Loading>
-{:else}
+  {:else}
   <span class="wikipedia-article">
     <FromHtml src={$wikipediaDetails.firstParagraph} />
     <Disclosure let:open>
@@ -47,4 +50,5 @@
       </DisclosurePanel>
     </Disclosure>
   </span>
+  {/if}
 {/if}

src/UI/Wikipedia/WikipediaPanel.svelte

@@ -2,31 +2,34 @@
   /**
    * Shows one or more wikidata info boxes or wikipedia articles in a tabbed component.
    */
-  import type { FullWikipediaDetails } from "../../Logic/Web/Wikipedia"
+  import type { FullWikipediaDetails } from "../../Logic/Web/Wikipedia";
-  import Wikipedia from "../../Logic/Web/Wikipedia"
+  import Wikipedia from "../../Logic/Web/Wikipedia";
-  import Locale from "../i18n/Locale"
+  import Locale from "../i18n/Locale";
-  import { Store } from "../../Logic/UIEventSource"
+  import { Store } from "../../Logic/UIEventSource";
-  import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@rgossiaux/svelte-headlessui"
+  import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@rgossiaux/svelte-headlessui";
-  import WikipediaTitle from "./WikipediaTitle.svelte"
+  import WikipediaTitle from "./WikipediaTitle.svelte";
-  import WikipediaArticle from "./WikipediaArticle.svelte"
+  import WikipediaArticle from "./WikipediaArticle.svelte";
-  import { onDestroy } from "svelte"
+  import { onDestroy } from "svelte";
 
   /**
    * Either a wikidata item or a '<language>:<article>' link
    */
-  export let wikiIds: Store<string[]>
+  export let wikiIds: Store<string[]>;
   let wikipediaStores: Store<Store<FullWikipediaDetails>[]> = Locale.language.bind((language) =>
     wikiIds.map((wikiIds) => wikiIds.map((id) => Wikipedia.fetchArticleAndWikidata(id, language)))
-  )
+  );
-  let _wikipediaStores
+  let _wikipediaStores;
   onDestroy(
     wikipediaStores.addCallbackAndRunD((wikipediaStores) => {
-      _wikipediaStores = wikipediaStores
+      _wikipediaStores = wikipediaStores;
     })
-  )
+  );
 </script>
 
 {#if _wikipediaStores !== undefined}
+  {#if _wikipediaStores.length === 1}
+    <WikipediaArticle wikipediaDetails={_wikipediaStores[0]} />
+  {:else}
     <TabGroup>
       <TabList>
         {#each _wikipediaStores as store (store.tag)}
@@ -43,14 +46,17 @@
         {/each}
       </TabPanels>
     </TabGroup>
+  {/if}
 {/if}
 
 <style>
+    /* Actually used, don't remove*/
     .tab-selected {
         background-color: rgb(59 130 246);
         color: rgb(255 255 255);
     }
 
+    /* Actually used, don't remove*/
     .tab-unselected {
         background-color: rgb(255 255 255);
         color: rgb(0 0 0);