Refactoring: move error logic into svelte component

src/UI/CustomThemeError.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import ArrowDownTray from "@babeard/svelte-heroicons/mini/ArrowDownTray"
+  import { Utils } from "../Utils"
+
+  export let customDefinition: string
+  export let stack: string[]
+
+  function offerDefinitionForDownload() {
+    Utils.offerContentsAsDownloadableFile(
+      customDefinition,
+      "mapcomplete-theme.json",
+      { mimetype: "application/json" }
+    )
+  }
+
+</script>
+
+<div class="flex flex-col w-full h-full m-8 justify-center items-center">
+
+  <h1>Something went wrong</h1>
+  <div class="alert">{stack[0]}</div>
+  {#each stack.slice(1) as stck}
+    <div>{stck}</div>
+  {/each}
+  {#if customDefinition}
+    <button on:click={() => offerDefinitionForDownload()}>
+      <ArrowDownTray class="w-16 h-16" />
+      Download the theme definition file
+    </button>
+  {/if}
+</div>

src/index.ts

@@ -1,19 +1,13 @@
 import DetermineTheme from "./Logic/DetermineTheme"
-import SvelteUIElement from "./UI/Base/SvelteUIElement"
-import { FixedUiElement } from "./UI/Base/FixedUiElement"
-import Combine from "./UI/Base/Combine"
-import { SubtleButton } from "./UI/Base/SubtleButton"
-import { Utils } from "./Utils"
-import ArrowDownTray from "@babeard/svelte-heroicons/mini/ArrowDownTray"
 import SingleThemeGui from "./UI/SingleThemeGui.svelte"
+import CustomThemeError from "./UI/CustomThemeError.svelte"
 
 
 async function main() {
+    const target = document.getElementById("maindiv")
+    const childs = Array.from(target.children)
     try {
-
         const theme = await DetermineTheme.getTheme()
-        const target = document.getElementById("maindiv")
-        const childs = Array.from(target.children)
         new SingleThemeGui({
             target,
             props: { theme }
@@ -25,22 +19,15 @@ async function main() {
     } catch (err) {
         console.error("Error while initializing: ", err, err.stack)
         const customDefinition = DetermineTheme.getCustomDefinition()
-        new Combine([
-            new FixedUiElement(err.toString().split("\n").join("<br/>")).SetClass("block alert"),
 
-            customDefinition?.length > 0
-                ? new SubtleButton(
-                      new SvelteUIElement(ArrowDownTray),
-                      "Download the raw file"
-                  ).onClick(() =>
-                      Utils.offerContentsAsDownloadableFile(
-                          DetermineTheme.getCustomDefinition(),
-                          "mapcomplete-theme.json",
-                          { mimetype: "application/json" }
-                      )
-                  )
-                : undefined,
-        ]).AttachTo("maindiv")
+        new CustomThemeError({
+            target,
+            props: {
+                stack: err.toString().split("\n"),
+                customDefinition
+            }
+        })
+
     }
 }