Onboarding can be triggered again + issues link in footer

src/components/Dashboard.svelte

@@ -10,6 +10,7 @@
   import Img from 'flowbite-svelte/Img.svelte'
   import Logo from '../assets/icons/icon-128.png'
   import packageJson from '../../package.json'
+  import A from 'flowbite-svelte/A.svelte'
 
   export let forcedState: DashboardForcedState = undefined
 
@@ -59,7 +60,11 @@
     <footer class="flex items-center mt-9">
       <Img src={Logo} imgClass="w-6 h-6 mr-4 opacity-40" />
       <h5 class="text-gray-300 text-lg">
-        Scream For Papers v. {packageJson.version}
+        Scream For Papers v. {packageJson.version} / <A
+          href="https://github.com/mkrl/screamforpapers/issues/new"
+          target="_blank"
+          class="underline text-gray-400">report an issue</A
+        >
       </h5>
     </footer>
   </aside>

src/components/Secrets.svelte

@@ -3,11 +3,12 @@
   import Button from 'flowbite-svelte/Button.svelte'
   import Input from 'flowbite-svelte/Input.svelte'
   import Label from 'flowbite-svelte/Label.svelte'
-  import Toast from 'flowbite-svelte/Toast.svelte'
+  import ButtonGroup from 'flowbite-svelte/ButtonGroup.svelte'
   import { onMount } from 'svelte'
 
   let token: string
   let repo: string
+  const isOnboarding = window.location.search.includes('welcome')
 
   let successMessage: string | null = null
 
@@ -25,6 +26,13 @@
       successMessage = null
     }, 3000)
   }
+
+  const onboard = () => {
+    const { origin, pathname } = window.location
+    window.location.href = `${origin}${pathname}${
+      isOnboarding ? '' : '?welcome'
+    }`
+  }
 </script>
 
 <Label for="token">Github Token:</Label>
@@ -44,7 +52,15 @@
   placeholder="Can be private, be sure the token has read access to it!"
 />
 
-<Button pill on:click={save}>Save GitHub settings</Button>
+<div class="flex justify-between">
+  <Button pill on:click={save} color="primary">Save GitHub settings</Button>
+  <Button pill on:click={onboard} color="alternative"
+    >{isOnboarding
+      ? 'Skip the tour, let me cook'
+      : 'Open onboarding tour'}</Button
+  >
+</div>
+
 {#if successMessage}
   <span class="ml-4 text-gray-400 italic text-base">{successMessage}</span>
 {/if}

src/components/ui/Onboarding.svelte

@@ -4,6 +4,7 @@
   import TimelineItem from 'flowbite-svelte/TimelineItem.svelte'
   import A from 'flowbite-svelte/A.svelte'
   import Img from 'flowbite-svelte/Img.svelte'
+  import Kbd from 'flowbite-svelte/Kbd.svelte'
 
   import repoSelectImage from '../../assets/onboarding/repository.png'
   import permissionsSelectImage from '../../assets/onboarding/permissions.png'
@@ -98,6 +99,9 @@
       <p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
         Click on the "Sync now!" button to pull your topics and personal info
         from GitHub.
+        <br />
+        Make sure all of your files are in the root of your repository and have the
+        <Kbd>.md</Kbd> extension.
       </p>
     </TimelineItem>
     <TimelineItem title="Start applying">
@@ -107,7 +111,16 @@
         <br />
         <br />
         Go to any CFP page and click on the extension icon in the top right corner
-        of your browser to open the sidebar.
+        of your browser to open the popup.
+      </p>
+    </TimelineItem>
+    <TimelineItem title="Submit">
+      <p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
+        When you're done filling out the form, click on the "I'm done" button in
+        the extension popup <b>before</b> submitting the CFP form itself.
+        <br />
+        <br />
+        Yes, it's a bit annoying, but no software it perfect from the start!
       </p>
     </TimelineItem>
     <TimelineItem title="Your synced data only persists per-device">