feat(web): previous button for on-boarding steps (#6178)

* feat: previous on the onboarding

* fix: storage full screen

* feat: transition

* use svelte files for svg

* fix: use icon component

* fix: additional check

* styling'

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

web/src/routes/auth/onboarding/+page.svelte

@@ -14,7 +14,7 @@
     component: typeof OnboardingHello | typeof OnboardingTheme | typeof OnboadingStorageTemplate;
   }
 
-  let onboardingSteps: OnboardingStep[] = [
+  const onboardingSteps: OnboardingStep[] = [
     { name: 'hello', component: OnboardingHello },
     { name: 'theme', component: OnboardingTheme },
     { name: 'storage', component: OnboadingStorageTemplate },
@@ -35,8 +35,29 @@
       goto(`${AppRoute.AUTH_ONBOARDING}?step=${onboardingSteps[index].name}`);
     }
   };
+
+  const handlePrevious = () => {
+    if (index >= 1) {
+      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].component} on:done={handleDoneClicked} />
+<section id="onboarding-page" class="min-w-screen flex min-h-screen p-4">
+  <div class="flex flex-col w-full">
+    <div class="w-full bg-gray-300 dark:bg-gray-600 rounded-md h-2">
+      <div
+        class="progress-bar bg-immich-primary dark:bg-immich-dark-primary h-2 rounded-md transition-all duration-200 ease-out"
+        style="width: {(index / (onboardingSteps.length - 1)) * 100}%"
+      ></div>
+    </div>
+    <div class="w-full min-w-screen py-8 flex h-full place-content-center place-items-center">
+      <svelte:component
+        this={onboardingSteps[index].component}
+        on:done={handleDoneClicked}
+        on:previous={handlePrevious}
+      />
+    </div>
+  </div>
 </section>