From 15105bf60c177cfa496b4e02ec807611d3dedc6e Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Fri, 27 Sep 2024 14:41:27 -0400
Subject: [PATCH 01/12] Install driver.js

---
 package-lock.json | 6 ++++++
 package.json      | 1 +
 2 files changed, 7 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 35d71f91..e366601f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
         "body-scroll-lock": "^2.6.4",
         "core-js": "^3.37.1",
         "dompurify": "^3.0.8",
+        "driver.js": "^1.3.1",
         "fast-copy": "^2.1.0",
         "fast-deep-equal": "^3.1.3",
         "filesize": "^10.1.1",
@@ -15691,6 +15692,11 @@
         "node": ">=12"
       }
     },
+    "node_modules/driver.js": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/driver.js/-/driver.js-1.3.1.tgz",
+      "integrity": "sha512-MvUdXbqSgEsgS/H9KyWb5Rxy0aE6BhOVT4cssi2x2XjmXea6qQfgdx32XKVLLSqTaIw7q/uxU5Xl3NV7+cN6FQ=="
+    },
     "node_modules/duplexify": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz",
diff --git a/package.json b/package.json
index 08d44d1f..eaaf7d64 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "body-scroll-lock": "^2.6.4",
     "core-js": "^3.37.1",
     "dompurify": "^3.0.8",
+    "driver.js": "^1.3.1",
     "fast-copy": "^2.1.0",
     "fast-deep-equal": "^3.1.3",
     "filesize": "^10.1.1",

From 5a8e2877b54e66df3c8f6f85b34d5865ee8a1b72 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Fri, 27 Sep 2024 14:42:10 -0400
Subject: [PATCH 02/12] Scaffolds GuidedTour

Refactor GuidedTour

Improve help menu display
---
 src/lib/components/layouts/Sidebar.svelte     |   2 +-
 src/lib/components/navigation/HelpMenu.svelte |  39 ++++--
 .../components/onboarding/GuidedTour.svelte   | 115 ++++++++++++++++++
 src/lib/components/onboarding/scripts.ts      |  41 +++++++
 4 files changed, 188 insertions(+), 9 deletions(-)
 create mode 100644 src/lib/components/onboarding/GuidedTour.svelte
 create mode 100644 src/lib/components/onboarding/scripts.ts

diff --git a/src/lib/components/layouts/Sidebar.svelte b/src/lib/components/layouts/Sidebar.svelte
index e91d36a2..7f8535ae 100644
--- a/src/lib/components/layouts/Sidebar.svelte
+++ b/src/lib/components/layouts/Sidebar.svelte
@@ -59,7 +59,7 @@
 <svelte:window bind:innerWidth={viewWidth} />
 
 {#if isOpen}
-  <aside class="sidebarContainer {position}" transition:fly={flyOptions}>
+  <aside class="sidebarContainer {position}" {id} transition:fly={flyOptions}>
     <header class:reverse={position === "left"}>
       {#if $$slots.title}
         <span class="title"><slot name="title" /></span>
diff --git a/src/lib/components/navigation/HelpMenu.svelte b/src/lib/components/navigation/HelpMenu.svelte
index ab411611..40197c1a 100644
--- a/src/lib/components/navigation/HelpMenu.svelte
+++ b/src/lib/components/navigation/HelpMenu.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
-  import Dropdown from "@/common/Dropdown2.svelte";
+  import Dropdown, { closeDropdown } from "@/common/Dropdown2.svelte";
   import Menu from "@/common/Menu.svelte";
 
   import {
@@ -16,8 +16,21 @@
   } from "svelte-octicons";
   import SidebarItem from "../sidebar/SidebarItem.svelte";
   import Premium from "@/common/icons/Premium.svelte";
+  import { startTour, isTourAvailable } from "../onboarding/GuidedTour.svelte";
+  import { page } from "$app/stores";
 
   export let position = "bottom right";
+
+  function close() {
+    closeDropdown("help");
+  }
+
+  function onTourClick() {
+    close();
+    startTour();
+  }
+
+  $: showTour = isTourAvailable($page.route.id);
 </script>
 
 <!-- Help Menu -->
@@ -33,31 +46,41 @@
     </div>
   </SidebarItem>
   <Menu>
-    <SidebarItem href="/help/faq/">
+    {#if showTour}
+      <SidebarItem hover on:click={onTourClick}>
+        <Milestone16 slot="start" />
+        Guided Tour
+      </SidebarItem>
+    {/if}
+    <SidebarItem href="/help/faq/" on:click={close}>
       <CommentDiscussion16 slot="start" />
       {$_("authSection.help.faq")}
     </SidebarItem>
-    <SidebarItem href="/help/search/">
+    <SidebarItem href="/help/search/" on:click={close}>
       <Search16 slot="start" />
       {$_("authSection.help.searchDocs")}
     </SidebarItem>
-    <SidebarItem href="/help/api/">
+    <SidebarItem href="/help/api/" on:click={close}>
       <Code16 slot="start" />
       {$_("authSection.help.apiDocs")}
     </SidebarItem>
-    <SidebarItem href="/help/add-ons/">
+    <SidebarItem href="/help/add-ons/" on:click={close}>
       <Plug16 slot="start" />
       {$_("authSection.help.addOns")}
     </SidebarItem>
-    <SidebarItem href="/help/premium/">
+    <SidebarItem href="/help/premium/" on:click={close}>
       <Premium slot="start" />
       {$_("authSection.help.premium")}
     </SidebarItem>
-    <SidebarItem href="https://www.muckrock.com/donate/">
+    <SidebarItem href="https://www.muckrock.com/donate/" on:click={close}>
       <Gift16 slot="start" />
       {$_("authSection.help.donate")}
     </SidebarItem>
-    <SidebarItem href="mailto:info@documentcloud.org" target="_blank">
+    <SidebarItem
+      href="mailto:info@documentcloud.org"
+      target="_blank"
+      on:click={close}
+    >
       <Mail16 slot="start" />
       {$_("authSection.help.emailUs")}
     </SidebarItem>
diff --git a/src/lib/components/onboarding/GuidedTour.svelte b/src/lib/components/onboarding/GuidedTour.svelte
new file mode 100644
index 00000000..b180f883
--- /dev/null
+++ b/src/lib/components/onboarding/GuidedTour.svelte
@@ -0,0 +1,115 @@
+<!-- @component
+  The GuidedTour will run on different routes, introducing that page's
+  UI to new users. We keep track of which tours the user has already
+  taken in a LocalStorage object. If a script exists for the current route,
+  and if the user hasn't already taken it, we'll prompt them to take the guided tour.
+ -->
+<script lang="ts" context="module">
+  import { get } from "svelte/store";
+  import { page } from "$app/stores";
+  import { driver, type Driver, type DriveStep, type Config } from "driver.js";
+  import "driver.js/dist/driver.css";
+  import { StorageManager } from "$lib/utils/storage";
+  import type { Maybe } from "$lib/api/types";
+  import { scripts } from "./scripts";
+
+  const storage = new StorageManager("guided-tour");
+
+  let driverObj: Driver;
+
+  const driverConfig: Config = {
+    showProgress: true,
+    popoverClass: "dc-driver",
+    overlayColor: "rgba(92, 113, 124, 0.5)",
+  };
+
+  type Tours = Record<string, boolean>;
+
+  export function getRoute(): Maybe<string> {
+    return get(page)?.route.id;
+  }
+
+  export function getScript(route?: string): Maybe<DriveStep[]> {
+    const currentRoute = route ?? getRoute();
+    return scripts[currentRoute];
+  }
+
+  export function getTourHistory(): Tours {
+    return storage.get<Tours, {}>("tours", {});
+  }
+
+  export function startTour(): void {
+    driverObj?.drive();
+  }
+
+  export function endTour(): void {
+    const route = getRoute();
+    const history = getTourHistory();
+    storage.set("tours", { ...history, [route]: false });
+    driverObj.destroy();
+  }
+
+  export function isTourAvailable(route?: string): boolean {
+    return Boolean(getScript(route));
+  }
+</script>
+
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  onMount(() => {
+    const currentRoute = getRoute();
+    const history = getTourHistory();
+    const offerTour = history[currentRoute] ?? true;
+    driverObj = driver({
+      ...driverConfig,
+      steps: getScript(),
+      onDestroyStarted: endTour,
+    });
+    if (offerTour) {
+      startTour();
+    }
+  });
+</script>
+
+<slot />
+
+<style>
+  :global(
+      .driver-popover,
+      .driver-popover-title,
+      .driver-popover-description,
+      .driver-popover-progress-text,
+      .driver-popover-footer button
+    ) {
+    font-family: var(--font-sans);
+  }
+  :global(.driver-popover-title) {
+    font-weight: var(--font-semibold);
+    line-height: 1.2;
+    font-size: var(--font-lg);
+    color: var(--gray-5);
+  }
+  :global(.driver-popover-description) {
+    font-size: var(--font-sm);
+    line-height: 1.4;
+    color: var(--gray-5);
+  }
+  :global(.driver-popover-progress-text) {
+    color: var(--gray-4);
+  }
+  :global(.driver-popover-footer button) {
+    font-weight: var(--font-semibold);
+  }
+  :global(button.driver-popover-next-btn) {
+    border-color: var(--blue-4);
+    background-color: var(--blue-3);
+    color: var(--white);
+    text-shadow: none;
+  }
+  :global(button.driver-popover-next-btn:hover) {
+    background-color: var(--blue-4);
+    color: var(--white);
+    text-shadow: none;
+  }
+</style>
diff --git a/src/lib/components/onboarding/scripts.ts b/src/lib/components/onboarding/scripts.ts
new file mode 100644
index 00000000..312b50c3
--- /dev/null
+++ b/src/lib/components/onboarding/scripts.ts
@@ -0,0 +1,41 @@
+import type { DriveStep } from "driver.js";
+
+export const scripts: Record<string, DriveStep[]> = {
+  "/documents": [
+    {
+      popover: {
+        title: "Welcome to the new DocumentCloud",
+        description:
+          "We've rebuilt DocumentCloud to be faster and easier to use than ever. Let's take a look around!",
+        align: "center",
+      },
+    },
+    {
+      element: "#navigation",
+      popover: {
+        title: "Find your way",
+        description:
+          "The navigation sidebar contains quick links for searching documents, and more.",
+        align: "center",
+      },
+    },
+    {
+      element: "#content",
+      popover: {
+        title: "Search and browse documents",
+        description:
+          "Documents now load in as you scroll down. You can search by keyword or filters.",
+        side: "left",
+        align: "center",
+      },
+    },
+    {
+      element: "#action",
+      popover: {
+        title: "Take action",
+        description: "The action sidebar shows you everything you can do",
+        align: "center",
+      },
+    },
+  ],
+};

From e03326dd2c5a7c5b08425ee0f24f4bd7585c7ead Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Fri, 4 Oct 2024 09:56:10 -0400
Subject: [PATCH 03/12] Scripts for `/documents` and `/documents/[id]-[slug]`

---
 src/lib/components/onboarding/scripts.ts      | 59 ++++++++++++++++++-
 .../components/sidebar/SidebarGroup.svelte    |  2 +-
 2 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/onboarding/scripts.ts b/src/lib/components/onboarding/scripts.ts
index 312b50c3..0d0c5e0b 100644
--- a/src/lib/components/onboarding/scripts.ts
+++ b/src/lib/components/onboarding/scripts.ts
@@ -19,12 +19,21 @@ export const scripts: Record<string, DriveStep[]> = {
         align: "center",
       },
     },
+    {
+      element: "#projects",
+      popover: {
+        title: "Stay organized with Projects",
+        description:
+          "Projects group documents together. Pin projects to keep them available in the sidebar. Explore projects to browse all of your projects, projects shared with you, and all public projects across DocumentCloud.",
+        align: "center",
+      },
+    },
     {
       element: "#content",
       popover: {
         title: "Search and browse documents",
         description:
-          "Documents now load in as you scroll down. You can search by keyword or filters.",
+          "Documents now load in as you scroll down. You can search by keyword or filters. Select documents to take bulk actions, like editing metadata or running an add-on.",
         side: "left",
         align: "center",
       },
@@ -33,7 +42,53 @@ export const scripts: Record<string, DriveStep[]> = {
       element: "#action",
       popover: {
         title: "Take action",
-        description: "The action sidebar shows you everything you can do",
+        description: "The action sidebar shows you everything you can do.",
+        align: "center",
+      },
+    },
+    {
+      element: "#add-ons",
+      popover: {
+        title: "Go further with Add-Ons",
+        description:
+          "Add-ons provide extended functionality from the DocumentCloud community. Your pinned add-ons will appear here for quick access. Explore add-ons to search and browse by category, and see how much you can get done!",
+        align: "center",
+      },
+    },
+  ],
+  "/documents/[id]-[slug]": [
+    {
+      popover: {
+        title: "This is the new document viewer",
+        description:
+          "We've made reading, annotating, and redacting your documents better than ever. Would you like to see what's new?",
+        align: "center",
+      },
+    },
+    {
+      element: "#navigation",
+      popover: {
+        title: "Quick links",
+        description:
+          "See and quickly view this document's projects, metadata, and notes. If you own this document, quickly access editing controls from here, as well.",
+        align: "center",
+      },
+    },
+    {
+      element: "#content",
+      popover: {
+        title: "A whole new view",
+        description:
+          "We now render your PDFs directly in your browser, with improved text-selection and navigation controls. Switch views from the top toolbar.",
+        align: "center",
+      },
+    },
+    {
+      element: "#actions",
+      popover: {
+        title: "Take action",
+        description:
+          "Everything you can do with a document is available here, including sharing and embedding. Your pinned add-ons will show up here, too.",
         align: "center",
       },
     },
diff --git a/src/lib/components/sidebar/SidebarGroup.svelte b/src/lib/components/sidebar/SidebarGroup.svelte
index c25ed3d2..b7a1b582 100644
--- a/src/lib/components/sidebar/SidebarGroup.svelte
+++ b/src/lib/components/sidebar/SidebarGroup.svelte
@@ -36,7 +36,7 @@
   });
 </script>
 
-<div class="container">
+<div class="container" id={name}>
   {#if $$slots.title || $$slots.action}
     <header
       role="button"

From edc26703dc343fb081022d956d6b5acc27f3796b Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Fri, 4 Oct 2024 10:05:00 -0400
Subject: [PATCH 04/12] Renders GuidedTour on document browser and viewer pages

---
 src/routes/(app)/documents/+page.svelte             | 2 ++
 src/routes/(app)/documents/[id]-[slug]/+page.svelte | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/routes/(app)/documents/+page.svelte b/src/routes/(app)/documents/+page.svelte
index 6833d436..beacbe30 100644
--- a/src/routes/(app)/documents/+page.svelte
+++ b/src/routes/(app)/documents/+page.svelte
@@ -15,6 +15,7 @@
   import Projects from "../documents/sidebar/Projects.svelte";
 
   import DocumentBrowser from "$lib/components/layouts/DocumentBrowser.svelte";
+  import GuidedTour from "$lib/components/onboarding/GuidedTour.svelte";
 
   import {
     canUploadFiles,
@@ -60,3 +61,4 @@
     {/if}
   </svelte:fragment>
 </SidebarLayout>
+<GuidedTour />
diff --git a/src/routes/(app)/documents/[id]-[slug]/+page.svelte b/src/routes/(app)/documents/[id]-[slug]/+page.svelte
index 9417b590..a2f500ff 100644
--- a/src/routes/(app)/documents/[id]-[slug]/+page.svelte
+++ b/src/routes/(app)/documents/[id]-[slug]/+page.svelte
@@ -9,6 +9,7 @@
   import { _ } from "svelte-i18n";
 
   import DocumentLayout from "$lib/components/layouts/DocumentLayout.svelte";
+  import GuidedTour from "$lib/components/onboarding/GuidedTour.svelte";
 
   // config and utils
   import {
@@ -76,3 +77,4 @@
 </svelte:head>
 
 <DocumentLayout {document} {asset_url} {text} {query} {action} {addons} />
+<GuidedTour />

From 94919eff326fe847c5b71d3697a7979138c63595 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Fri, 4 Oct 2024 10:46:40 -0400
Subject: [PATCH 05/12] Fix missing import

---
 src/lib/components/navigation/HelpMenu.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/navigation/HelpMenu.svelte b/src/lib/components/navigation/HelpMenu.svelte
index 40197c1a..9ae4d5cd 100644
--- a/src/lib/components/navigation/HelpMenu.svelte
+++ b/src/lib/components/navigation/HelpMenu.svelte
@@ -10,6 +10,7 @@
     CommentDiscussion16,
     Gift16,
     Mail16,
+    Milestone16,
     Plug16,
     Question24,
     Search16,

From 27e2eaa2d53ec026d8746792b70fa02e001fe814 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Fri, 4 Oct 2024 10:51:00 -0400
Subject: [PATCH 06/12] Fix $page access

---
 .storybook/preview.ts                           | 1 +
 src/lib/components/navigation/HelpMenu.svelte   | 2 +-
 src/lib/components/onboarding/GuidedTour.svelte | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 14822047..f871d718 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -31,6 +31,7 @@ const preview: Preview = {
       stores: {
         page: {
           url: "/",
+          route: { id: "/" },
           data: {
             breadcrumbs: [],
           },
diff --git a/src/lib/components/navigation/HelpMenu.svelte b/src/lib/components/navigation/HelpMenu.svelte
index 9ae4d5cd..aa8bf737 100644
--- a/src/lib/components/navigation/HelpMenu.svelte
+++ b/src/lib/components/navigation/HelpMenu.svelte
@@ -31,7 +31,7 @@
     startTour();
   }
 
-  $: showTour = isTourAvailable($page.route.id);
+  $: showTour = isTourAvailable($page?.route?.id);
 </script>
 
 <!-- Help Menu -->
diff --git a/src/lib/components/onboarding/GuidedTour.svelte b/src/lib/components/onboarding/GuidedTour.svelte
index b180f883..23641a29 100644
--- a/src/lib/components/onboarding/GuidedTour.svelte
+++ b/src/lib/components/onboarding/GuidedTour.svelte
@@ -26,7 +26,7 @@
   type Tours = Record<string, boolean>;
 
   export function getRoute(): Maybe<string> {
-    return get(page)?.route.id;
+    return get(page)?.route?.id;
   }
 
   export function getScript(route?: string): Maybe<DriveStep[]> {

From 87db5b1ccc9f4b0e8dca6346c205af059d65fd1f Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Fri, 4 Oct 2024 11:16:31 -0400
Subject: [PATCH 07/12] Fixes script route names (adds `(app)`)

---
 src/lib/components/onboarding/scripts.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/onboarding/scripts.ts b/src/lib/components/onboarding/scripts.ts
index 0d0c5e0b..4a7e1d85 100644
--- a/src/lib/components/onboarding/scripts.ts
+++ b/src/lib/components/onboarding/scripts.ts
@@ -1,7 +1,7 @@
 import type { DriveStep } from "driver.js";
 
 export const scripts: Record<string, DriveStep[]> = {
-  "/documents": [
+  "/(app)/documents": [
     {
       popover: {
         title: "Welcome to the new DocumentCloud",
@@ -56,7 +56,7 @@ export const scripts: Record<string, DriveStep[]> = {
       },
     },
   ],
-  "/documents/[id]-[slug]": [
+  "/(app)/documents/[id]-[slug]": [
     {
       popover: {
         title: "This is the new document viewer",

From 2a18f2a485994ad285024e20a262875c8bb8348e Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Fri, 4 Oct 2024 11:44:43 -0400
Subject: [PATCH 08/12] Fix script id anchors

---
 src/lib/components/onboarding/scripts.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/onboarding/scripts.ts b/src/lib/components/onboarding/scripts.ts
index 4a7e1d85..e55928d8 100644
--- a/src/lib/components/onboarding/scripts.ts
+++ b/src/lib/components/onboarding/scripts.ts
@@ -47,7 +47,7 @@ export const scripts: Record<string, DriveStep[]> = {
       },
     },
     {
-      element: "#add-ons",
+      element: "#addons",
       popover: {
         title: "Go further with Add-Ons",
         description:
@@ -84,7 +84,7 @@ export const scripts: Record<string, DriveStep[]> = {
       },
     },
     {
-      element: "#actions",
+      element: "#action",
       popover: {
         title: "Take action",
         description:

From b002b5025f0c803bbc33cfbd9a5dff5acc703c4c Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Fri, 4 Oct 2024 11:48:32 -0400
Subject: [PATCH 09/12] Script fixes

---
 src/lib/components/common/Button.svelte      |  2 ++
 src/lib/components/layouts/Navigation.svelte |  1 +
 src/lib/components/onboarding/scripts.ts     | 13 +++++++++++--
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/common/Button.svelte b/src/lib/components/common/Button.svelte
index b6db230f..6dd0c561 100644
--- a/src/lib/components/common/Button.svelte
+++ b/src/lib/components/common/Button.svelte
@@ -40,6 +40,7 @@
     class:ghost
     class:full
     class:minW
+    {...$$restProps}
   >
     <slot>{label}</slot>
   </a>
@@ -56,6 +57,7 @@
     class:ghost
     class:full
     class:minW
+    {...$$restProps}
   >
     <slot>{label}</slot>
   </button>
diff --git a/src/lib/components/layouts/Navigation.svelte b/src/lib/components/layouts/Navigation.svelte
index fef38a62..d3d4d056 100644
--- a/src/lib/components/layouts/Navigation.svelte
+++ b/src/lib/components/layouts/Navigation.svelte
@@ -66,6 +66,7 @@
       ghost
       mode="primary"
       on:click={() => (feedbackOpen = true)}
+      id="feedback"
     >
       {$_("common.feedback")}
     </Button>
diff --git a/src/lib/components/onboarding/scripts.ts b/src/lib/components/onboarding/scripts.ts
index e55928d8..b23ad077 100644
--- a/src/lib/components/onboarding/scripts.ts
+++ b/src/lib/components/onboarding/scripts.ts
@@ -55,11 +55,20 @@ export const scripts: Record<string, DriveStep[]> = {
         align: "center",
       },
     },
+    {
+      element: "#feedback",
+      popover: {
+        title: "Let us know what you think",
+        description:
+          "We're constantly fixing bugs and improving DocumentCloud. If you have thoughts, questions, or problems, send us your feedback.",
+        align: "center",
+      },
+    },
   ],
   "/(app)/documents/[id]-[slug]": [
     {
       popover: {
-        title: "This is the new document viewer",
+        title: "This is our new document viewer",
         description:
           "We've made reading, annotating, and redacting your documents better than ever. Would you like to see what's new?",
         align: "center",
@@ -79,7 +88,7 @@ export const scripts: Record<string, DriveStep[]> = {
       popover: {
         title: "A whole new view",
         description:
-          "We now render your PDFs directly in your browser, with improved text-selection and navigation controls. Switch views from the top toolbar.",
+          "We now render PDFs directly in your browser, with improved text-selection and navigation controls. Switch views from the top toolbar.",
         align: "center",
       },
     },

From 48450f4471564ac4059a44f94670ec86d73a14d4 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Fri, 4 Oct 2024 11:57:08 -0400
Subject: [PATCH 10/12] Update snapshot

---
 .../tests/__snapshots__/Mailkey.test.ts.snap   | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/accounts/tests/__snapshots__/Mailkey.test.ts.snap b/src/lib/components/accounts/tests/__snapshots__/Mailkey.test.ts.snap
index f4ecf9ee..7b31fbcd 100644
--- a/src/lib/components/accounts/tests/__snapshots__/Mailkey.test.ts.snap
+++ b/src/lib/components/accounts/tests/__snapshots__/Mailkey.test.ts.snap
@@ -12,10 +12,9 @@ exports[`Mailkey 1`] = `
         class="svelte-65lbzd"
       >
         <button
-          class="primary normal svelte-141617s ghost"
+          class="primary normal ghost svelte-141617s"
           title=""
           type="button"
-          value="undefined"
         >
           <svg
             class="octicon octicon-x-circle"
@@ -75,20 +74,18 @@ exports[`Mailkey 1`] = `
           style="display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 1rem;"
         >
           <button
-            class="primary normal svelte-141617s minW"
+            class="primary normal minW svelte-141617s"
             title=""
             type="button"
-            value="undefined"
           >
             Create new email address
           </button>
           
            
           <button
-            class="danger normal svelte-141617s minW"
+            class="danger normal minW svelte-141617s"
             title=""
             type="button"
-            value="undefined"
           >
             Delete existing address
           </button>
@@ -112,10 +109,9 @@ exports[`Mailkey 2`] = `
         class="svelte-65lbzd"
       >
         <button
-          class="primary normal svelte-141617s ghost"
+          class="primary normal ghost svelte-141617s"
           title=""
           type="button"
-          value="undefined"
         >
           <svg
             class="octicon octicon-x-circle"
@@ -180,20 +176,18 @@ exports[`Mailkey 2`] = `
           style="display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 1rem;"
         >
           <button
-            class="primary normal svelte-141617s minW"
+            class="primary normal minW svelte-141617s"
             title=""
             type="button"
-            value="undefined"
           >
             Create new email address
           </button>
           
            
           <button
-            class="danger normal svelte-141617s minW"
+            class="danger normal minW svelte-141617s"
             title=""
             type="button"
-            value="undefined"
           >
             Delete existing address
           </button>

From 27a7acd10c7c9f737054b3ad83e4cc298073c996 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Fri, 4 Oct 2024 12:04:55 -0400
Subject: [PATCH 11/12] Clean up tour-start logic to avoid missing steps error

---
 .../components/onboarding/GuidedTour.svelte   | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/onboarding/GuidedTour.svelte b/src/lib/components/onboarding/GuidedTour.svelte
index 23641a29..013ce792 100644
--- a/src/lib/components/onboarding/GuidedTour.svelte
+++ b/src/lib/components/onboarding/GuidedTour.svelte
@@ -58,16 +58,21 @@
   import { onMount } from "svelte";
 
   onMount(() => {
-    const currentRoute = getRoute();
-    const history = getTourHistory();
-    const offerTour = history[currentRoute] ?? true;
-    driverObj = driver({
-      ...driverConfig,
-      steps: getScript(),
-      onDestroyStarted: endTour,
-    });
-    if (offerTour) {
-      startTour();
+    // do we have a tour?
+    const steps = getScript();
+    if (steps) {
+      driverObj = driver({
+        ...driverConfig,
+        steps,
+        onDestroyStarted: endTour,
+      });
+      // should we start the tour?
+      const currentRoute = getRoute();
+      const history = getTourHistory();
+      const offerTour = history[currentRoute] ?? true;
+      if (offerTour) {
+        startTour();
+      }
     }
   });
 </script>

From 270acb3a0dc0514ea6303e58ee0c0a8d4138b2ea Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Fri, 4 Oct 2024 12:32:09 -0400
Subject: [PATCH 12/12] formatting

---
 src/lib/components/navigation/HelpMenu.svelte   | 10 ++++++----
 src/lib/components/onboarding/GuidedTour.svelte | 10 +++++++---
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/navigation/HelpMenu.svelte b/src/lib/components/navigation/HelpMenu.svelte
index aa8bf737..280db507 100644
--- a/src/lib/components/navigation/HelpMenu.svelte
+++ b/src/lib/components/navigation/HelpMenu.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-  import { _ } from "svelte-i18n";
-  import Dropdown, { closeDropdown } from "@/common/Dropdown2.svelte";
-  import Menu from "@/common/Menu.svelte";
+  import { page } from "$app/stores";
 
+  import { _ } from "svelte-i18n";
   import {
     ChevronDown12,
     ChevronUp12,
@@ -15,10 +14,13 @@
     Question24,
     Search16,
   } from "svelte-octicons";
+
+  import Dropdown, { closeDropdown } from "@/common/Dropdown2.svelte";
+  import Menu from "@/common/Menu.svelte";
   import SidebarItem from "../sidebar/SidebarItem.svelte";
   import Premium from "@/common/icons/Premium.svelte";
+
   import { startTour, isTourAvailable } from "../onboarding/GuidedTour.svelte";
-  import { page } from "$app/stores";
 
   export let position = "bottom right";
 
diff --git a/src/lib/components/onboarding/GuidedTour.svelte b/src/lib/components/onboarding/GuidedTour.svelte
index 013ce792..c5e585cd 100644
--- a/src/lib/components/onboarding/GuidedTour.svelte
+++ b/src/lib/components/onboarding/GuidedTour.svelte
@@ -5,12 +5,16 @@
   and if the user hasn't already taken it, we'll prompt them to take the guided tour.
  -->
 <script lang="ts" context="module">
-  import { get } from "svelte/store";
+  import type { Maybe } from "$lib/api/types";
+
+  import "driver.js/dist/driver.css";
+
   import { page } from "$app/stores";
+
   import { driver, type Driver, type DriveStep, type Config } from "driver.js";
-  import "driver.js/dist/driver.css";
+  import { get } from "svelte/store";
+
   import { StorageManager } from "$lib/utils/storage";
-  import type { Maybe } from "$lib/api/types";
   import { scripts } from "./scripts";
 
   const storage = new StorageManager("guided-tour");