From 4f6f79a392a81a9f6d80dcdcaed369016bf8a933 Mon Sep 17 00:00:00 2001
From: martin <74269598+martabal@users.noreply.github.com>
Date: Thu, 4 Jan 2024 18:20:19 +0100
Subject: [PATCH] feat(web): go back on the onboarding (#6171)

* feat: go back on the onboarding

* fix: state

* rename variable
---
 .../onboarding-page/onboarding-theme.svelte   |  9 +++++--
 web/src/routes/auth/onboarding/+page.svelte   | 27 +++++++++++++++----
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/web/src/lib/components/onboarding-page/onboarding-theme.svelte b/web/src/lib/components/onboarding-page/onboarding-theme.svelte
index ba9c8286e5..918a7f74e7 100644
--- a/web/src/lib/components/onboarding-page/onboarding-theme.svelte
+++ b/web/src/lib/components/onboarding-page/onboarding-theme.svelte
@@ -28,7 +28,10 @@
 
   <div class="flex gap-4 mb-6">
     <button
-      class="w-1/2 aspect-square bg-immich-bg rounded-3xl transition-all shadow-sm hover:shadow-xl"
+      class="w-1/2 aspect-square bg-immich-bg rounded-3xl transition-all shadow-sm hover:shadow-xl {$colorTheme ==
+      'light'
+        ? 'border-[3px] border-immich-dark-primary/80 border-immich-primary'
+        : 'border border-transparent'}"
       on:click={toggleLightTheme}
     >
       <div
@@ -39,7 +42,9 @@
       </div>
     </button>
     <button
-      class="w-1/2 aspect-square bg-immich-dark-bg rounded-3xl border border-transparent"
+      class="w-1/2 aspect-square bg-immich-dark-bg rounded-3xl {$colorTheme == 'dark'
+        ? 'border-[3px] border-immich-dark-primary/80 border-immich-primary'
+        : 'border border-transparent'}"
       on:click={toggleDarkTheme}
     >
       <div
diff --git a/web/src/routes/auth/onboarding/+page.svelte b/web/src/routes/auth/onboarding/+page.svelte
index d65cc016a4..66687d12e0 100644
--- a/web/src/routes/auth/onboarding/+page.svelte
+++ b/web/src/routes/auth/onboarding/+page.svelte
@@ -5,21 +5,38 @@
   import { api } from '@api';
   import { goto } from '$app/navigation';
   import { AppRoute } from '$lib/constants';
+  import { page } from '$app/stores';
 
   let index = 0;
 
-  let onboardingSteps = [OnboardingHello, OnboardingTheme, OnboadingStorageTemplate];
+  interface OnboardingStep {
+    name: string;
+    component: typeof OnboardingHello | typeof OnboardingTheme | typeof OnboadingStorageTemplate;
+  }
+
+  let onboardingSteps: OnboardingStep[] = [
+    { name: 'hello', component: OnboardingHello },
+    { name: 'theme', component: OnboardingTheme },
+    { name: 'storage', component: OnboadingStorageTemplate },
+  ];
+
+  $: {
+    const stepState = $page.url.searchParams.get('step');
+    const tempIndex = onboardingSteps.findIndex((step) => step.name === stepState);
+    index = tempIndex >= 0 ? tempIndex : 0;
+  }
 
   const handleDoneClicked = async () => {
-    index++;
-
-    if (index >= onboardingSteps.length) {
+    if (index >= onboardingSteps.length - 1) {
       await api.serverInfoApi.setAdminOnboarding();
       goto(AppRoute.PHOTOS);
+    } else {
+      index++;
+      goto(`${AppRoute.AUTH_ONBOARDING}?step=${onboardingSteps[index].name}`);
     }
   };
 </script>
 
 <section id="onboarding-page" class="min-w-screen flex min-h-screen place-content-center place-items-center p-4">
-  <svelte:component this={onboardingSteps[index]} on:done={handleDoneClicked} />
+  <svelte:component this={onboardingSteps[index].component} on:done={handleDoneClicked} />
 </section>