From 66a2eae02ab3d07f2429ebb9b402834e34bd8557 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Thu, 16 Jan 2025 16:37:08 +0100
Subject: [PATCH] Make dismiss button work

---
 src/lib/helpers/onboarding.ts                          |  9 +++++++++
 .../project-[project]/overview/+layout.svelte          |  3 ++-
 .../(console)/project-[project]/overview/header.svelte |  3 ++-
 .../project-[project]/overview/onboardnew.svelte       | 10 +++++++++-
 4 files changed, 22 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/helpers/onboarding.ts

diff --git a/src/lib/helpers/onboarding.ts b/src/lib/helpers/onboarding.ts
new file mode 100644
index 000000000..2d7096f8a
--- /dev/null
+++ b/src/lib/helpers/onboarding.ts
@@ -0,0 +1,9 @@
+export function hasOnboardingDismissed(projectId: string) {
+    const val = localStorage.getItem(`onboardingDismissed-${projectId}`) === 'true';
+    console.log('val');
+    return val;
+}
+
+export function setHasOnboardingDismissed(projectId: string) {
+    localStorage.setItem(`onboardingDismissed-${projectId}`, 'true');
+}
diff --git a/src/routes/(console)/project-[project]/overview/+layout.svelte b/src/routes/(console)/project-[project]/overview/+layout.svelte
index 51b43a215..1b3cf54ea 100644
--- a/src/routes/(console)/project-[project]/overview/+layout.svelte
+++ b/src/routes/(console)/project-[project]/overview/+layout.svelte
@@ -27,6 +27,7 @@
     import type { Metric } from '$lib/sdk/usage';
     import { periodToDates } from '$lib/layout/usage.svelte';
     import { canWriteProjects } from '$lib/stores/roles';
+    import { hasOnboardingDismissed } from '$lib/helpers/onboarding';
 
     $: projectId = $page.params.project;
     $: path = `${base}/project-${projectId}/overview`;
@@ -82,7 +83,7 @@
 </svelte:head>
 
 {#if $project}
-    {#if $onboarding}
+    {#if $onboarding && !hasOnboardingDismissed(projectId)}
         <Onboardnew {projectId} />
     {:else}
         <Container overlapCover>
diff --git a/src/routes/(console)/project-[project]/overview/header.svelte b/src/routes/(console)/project-[project]/overview/header.svelte
index ab48495f6..91e0ca211 100644
--- a/src/routes/(console)/project-[project]/overview/header.svelte
+++ b/src/routes/(console)/project-[project]/overview/header.svelte
@@ -2,9 +2,10 @@
     import { Id } from '$lib/components';
     import { Cover, CoverTitle } from '$lib/layout';
     import { onboarding, project } from '../store';
+    import { hasOnboardingDismissed } from '$lib/helpers/onboarding';
 </script>
 
-{#if !$onboarding}
+{#if !$onboarding || hasOnboardingDismissed($project.$id)}
     <Cover>
         <svelte:fragment slot="header">
             <CoverTitle>
diff --git a/src/routes/(console)/project-[project]/overview/onboardnew.svelte b/src/routes/(console)/project-[project]/overview/onboardnew.svelte
index 2bbfff387..37f95f4b9 100644
--- a/src/routes/(console)/project-[project]/overview/onboardnew.svelte
+++ b/src/routes/(console)/project-[project]/overview/onboardnew.svelte
@@ -9,6 +9,8 @@
     import DiscordImgSource from './assets/discord.png';
     import DiscordImgSourceDark from './assets/discord-dark.png';
     import { base } from '$app/paths';
+    import { setHasOnboardingDismissed } from '$lib/helpers/onboarding';
+    import { goto } from '$app/navigation';
 
     export let projectId: string;
 </script>
@@ -18,7 +20,13 @@
         <h1>Welcome, Jacob</h1>
         <span>Follow a few quick steps to get started with Appwrite</span>
     </div>
-    <Button.Button variant="secondary" size="s">Dismiss this page</Button.Button>
+    <Button.Button
+        variant="secondary"
+        size="s"
+        on:click={() => {
+            setHasOnboardingDismissed(projectId);
+            goto(`${base}/project-${projectId}`);
+        }}>Dismiss this page</Button.Button>
 </div>
 <div class="dashboard-content">
     <Step.List>