UX: Small tweaks to walkthrough: show page number, show link underline

src/UI/Walkthrough/Walkthrough.svelte

@@ -28,6 +28,8 @@
   on:next={() => step(1)}
   isFirst={currentPage === 0}
   islast={currentPage + 1 === pages.length}
+  totalPages={pages.length}
+  pageNumber={currentPage}
 >
   <FromHtml src={nmd(pages[currentPage])} />
 </WalkthroughStep>

src/UI/Walkthrough/WalkthroughStep.svelte

@@ -1,30 +1,42 @@
 <script lang="ts">
-  import BackButton from "../Base/BackButton.svelte"
-  import NextButton from "../Base/NextButton.svelte"
-  import { createEventDispatcher } from "svelte"
+  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
+  const dispatch = createEventDispatcher<{ back; next }>();
+  export let islast = false;
+  export let isFirst = false;
+  export let pageNumber: number = undefined;
+  export let totalPages: number = undefined;
 </script>
 
-<div class="flex h-full w-full flex-col justify-between">
+<div class="flex h-full w-full flex-col justify-between link-underline">
   <div class="overflow-y-auto">
     <slot />
   </div>
 
-  <div class="flex w-full">
-    {#if !isFirst}
-      <BackButton clss="w-full" on:click={() => dispatch("back")}>Back</BackButton>
-    {:else}
-      <div class="w-full" />
+  <div class="flex flex-col">
+
+    {#if pageNumber !== undefined && totalPages !== undefined}
+      <div class="flex justify-end">
+      <div class="subtle">{pageNumber+1}/{totalPages}</div>
+      </div>
     {/if}
-    <NextButton clss="primary w-full" on:click={() => dispatch("next")}>
-      {#if islast}
-        Finish
+    <div class="flex w-full">
+      {#if !isFirst}
+        <BackButton clss="w-full" on:click={() => dispatch("back")}>Back</BackButton>
       {:else}
-        Next
+        <div class="w-full" />
       {/if}
-    </NextButton>
+      <NextButton clss="primary w-full" on:click={() => dispatch("next")}>
+        {#if islast}
+          Finish
+        {:else}
+          Next
+        {/if}
+      </NextButton>
+
+
+    </div>
   </div>
 </div>