Studio: Add introductory slideshow to Studio

src/UI/Walkthrough/Walkthrough.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+
+  import * as nmd from "nano-markdown";
+  import { createEventDispatcher } from "svelte";
+  import WalkthroughStep from "./WalkthroughStep.svelte";
+  import FromHtml from "../Base/FromHtml.svelte";
+
+  /**
+   * Markdown
+   */
+  export let pages: string[];
+
+  let currentPage: number = 0;
+
+  const dispatch = createEventDispatcher<{ done }>();
+
+  function step(incr: number) {
+    if (incr > 0 && currentPage + 1 === pages.length) {
+      dispatch("done");
+      currentPage = 0
+      return
+    }
+    currentPage = Math.min(Math.max(0, currentPage + incr), pages.length);
+  }
+
+</script>
+
+
+<WalkthroughStep on:back={() => step(-1)} on:next={() => step(1)}>
+  <FromHtml src={nmd(pages[currentPage])} />
+</WalkthroughStep>
+

src/UI/Walkthrough/WalkthroughStep.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+
+  import BackButton from "../Base/BackButton.svelte";
+  import NextButton from "../Base/NextButton.svelte";
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher<{ back, next }>();
+  export let islast = false;
+  export let isFirst = false
+</script>
+
+
+<div class="flex flex-col h-full w-full justify-between">
+
+  <div class="overflow-y-auto">
+    <slot />
+  </div>
+
+  <div class="flex w-full">
+    {#if !isFirst}
+    <BackButton clss="w-full" on:click={() => dispatch("back")}>
+      Back
+    </BackButton>
+      {/if}
+    <NextButton clss="primary w-full" on:click={() => dispatch("next")}>
+      {#if islast}
+        Finish
+      {:else}
+        Next
+      {/if}
+    </NextButton>
+  </div>
+
+</div>