feat(web): onboarding (#6066)

* feat(web): onboarding

* feat: openapi

* feat: modulization

* feat: page advancing

* Animation

* Add storage templaete settings

* sql

* more style

* Theme

* information and styling

* hide/show table

* Styling

* Update user property

* fix test

* fix test:

* fix e2e

* test

* Update web/src/lib/components/onboarding-page/onboarding-hello.svelte

Co-authored-by: bo0tzz <git@bo0tzz.me>

* naming

* use System Metadata

* better return type

* onboarding using server metadata

* revert previous changes in user entity

* sql

* test web

* fix test server

* server/web test

* more test

* consolidate color theme change logic

* consolidate save button to storage template

* merge main

* fix web

---------

Co-authored-by: bo0tzz <git@bo0tzz.me>

web/src/lib/components/onboarding-page/onboarding-card.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+</script>
+
+<div
+  id="onboarding-card"
+  class="flex w-full max-w-4xl flex-col gap-4 rounded-3xl border-2 border-gray-500 px-8 py-14 dark:border-immich-dark-gray dark:bg-immich-dark-gray text-black dark:text-immich-dark-fg bg-gray-50"
+  in:fade={{ duration: 250 }}
+>
+  <slot />
+</div>

web/src/lib/components/onboarding-page/onboarding-hello.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import OnboardingCard from './onboarding-card.svelte';
+  import Button from '$lib/components/elements/buttons/button.svelte';
+  import { mdiArrowRight } from '@mdi/js';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { createEventDispatcher } from 'svelte';
+  import ImmichLogo from '../shared-components/immich-logo.svelte';
+  import { user } from '$lib/stores/user.store';
+
+  const dispatch = createEventDispatcher<{
+    done: void;
+  }>();
+</script>
+
+<OnboardingCard>
+  <ImmichLogo class="w-12 h-12" />
+  <p class="font-medium text-6xl my-6 text-immich-primary dark:text-immich-dark-primary">
+    Welcome, {$user.name}
+  </p>
+  <p class="text-3xl pb-6 font-light">Let's get your instance set up with some common settings.</p>
+
+  <div class="w-full flex place-content-end">
+    <Button class="flex gap-2 place-content-center" on:click={() => dispatch('done')}>
+      <p>Theme</p>
+      <Icon path={mdiArrowRight} size="18" />
+    </Button>
+  </div>
+</OnboardingCard>

web/src/lib/components/onboarding-page/onboarding-storage-template.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import OnboardingCard from './onboarding-card.svelte';
+  import { createEventDispatcher, onMount } from 'svelte';
+  import { featureFlags } from '$lib/stores/server-config.store';
+  import StorageTemplateSettings from '../admin-page/settings/storage-template/storage-template-settings.svelte';
+  import { SystemConfigDto, api } from '@api';
+  import { user } from '$lib/stores/user.store';
+
+  const dispatch = createEventDispatcher<{
+    done: void;
+  }>();
+
+  let configs: SystemConfigDto | null = null;
+
+  onMount(async () => {
+    const { data } = await api.systemConfigApi.getConfig();
+    configs = data;
+  });
+</script>
+
+<OnboardingCard>
+  <p class="text-xl text-immich-primary dark:text-immich-dark-primary">STORAGE TEMPLATE</p>
+
+  <p>
+    The storage template is used to determine the folder structure and file name of your media files. You can use
+    variables to customize the template to your liking.
+  </p>
+
+  {#if configs && $user}
+    <StorageTemplateSettings
+      minified
+      disabled={$featureFlags.configFile}
+      storageConfig={configs.storageTemplate}
+      on:save={() => dispatch('done')}
+    />
+  {/if}
+</OnboardingCard>

web/src/lib/components/onboarding-page/onboarding-theme.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { mdiArrowRight, mdiWhiteBalanceSunny, mdiMoonWaningCrescent } from '@mdi/js';
+  import Button from '../elements/buttons/button.svelte';
+  import Icon from '../elements/icon.svelte';
+  import OnboardingCard from './onboarding-card.svelte';
+  import { createEventDispatcher } from 'svelte';
+  import { colorTheme } from '$lib/stores/preferences.store';
+
+  const dispatch = createEventDispatcher<{
+    done: void;
+  }>();
+
+  const toggleLightTheme = () => {
+    $colorTheme = 'light';
+  };
+
+  const toggleDarkTheme = () => {
+    $colorTheme = 'dark';
+  };
+</script>
+
+<OnboardingCard>
+  <p class="text-xl text-immich-primary dark:text-immich-dark-primary">COLOR THEME</p>
+
+  <div>
+    <p class="pb-6 font-light">Choose a color theme for your instance. You can change this later in your settings.</p>
+  </div>
+
+  <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"
+      on:click={toggleLightTheme}
+    >
+      <div
+        class="flex flex-col place-items-center place-content-center justify-around h-full w-full text-immich-primary"
+      >
+        <Icon path={mdiWhiteBalanceSunny} size="96" />
+        <p class="font-semibold text-4xl">LIGHT</p>
+      </div>
+    </button>
+    <button
+      class="w-1/2 aspect-square bg-immich-dark-bg rounded-3xl border border-transparent"
+      on:click={toggleDarkTheme}
+    >
+      <div
+        class="flex flex-col place-items-center place-content-center justify-around h-full w-full text-immich-dark-primary"
+      >
+        <Icon path={mdiMoonWaningCrescent} size="96" />
+        <p class="font-semibold text-4xl">DARK</p>
+      </div>
+    </button>
+  </div>
+
+  <div class="w-full flex place-content-end">
+    <Button class="flex gap-2 place-content-center" on:click={() => dispatch('done')}>
+      <p>Storage Template</p>
+      <Icon path={mdiArrowRight} size="18" />
+    </Button>
+  </div>
+</OnboardingCard>