feat(web): improved user onboarding (#18782)

* wip

* added user metadata key

* wip

* restructure onboarding system and add initial locale

* update language card and fix translation updating

* remove prints

* new card formattings

* fix cursed unmount effect

* add OAuth route onboarding

* remove required admin auth for onboarding

* delete the hotwire button

* update open-api files

* delete import

* fix failing oauth onboarding fields

* fix e2e test

* fix web e2e test

* add onboarding to user registration e2e test

* remove todo

this was a holdover during dev and didn't get deleted

* fix server small tests

* use onDestroy to save settings rather than a bind:this

* change to false for isOnboarded

* fix other auth small test

* provide type annotation in user factory metadata field

* remove onboardingCompelted from UserDto

* move translations to onboarding steps array and mark as derived so they update

* break language selector out into its own component as per @danieldietzler suggestion

* remove hello header on card

* fix flixkering on server privacy card

* label/id fixes

* openapi

---------

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

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

@@ -1,15 +1,32 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
+  import { Button } from '@immich/ui';
+  import { mdiArrowLeft, mdiArrowRight, mdiCheck } from '@mdi/js';
   import type { Snippet } from 'svelte';
+  import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
 
   interface Props {
     title?: string | undefined;
     icon?: string | undefined;
     children?: Snippet;
+    previousTitle?: string | undefined;
+    nextTitle?: string | undefined;
+    onNext?: () => void;
+    onPrevious?: () => void;
+    onLeave?: () => void;
   }
 
-  let { title = undefined, icon = undefined, children }: Props = $props();
+  let {
+    title = undefined,
+    icon = undefined,
+    children,
+    previousTitle,
+    nextTitle,
+    onLeave,
+    onNext,
+    onPrevious,
+  }: Props = $props();
 </script>
 
 <div
@@ -30,4 +47,37 @@
     </div>
   {/if}
   {@render children?.()}
+
+  <div class="flex pt-4">
+    {#if previousTitle}
+      <div class="w-full flex place-content-start">
+        <Button
+          shape="round"
+          leadingIcon={mdiArrowLeft}
+          class="flex gap-2 place-content-center"
+          onclick={() => {
+            onLeave?.();
+            onPrevious?.();
+          }}
+        >
+          <p>{previousTitle}</p>
+        </Button>
+      </div>
+    {/if}
+
+    <div class="flex w-full place-content-end">
+      <Button
+        shape="round"
+        trailingIcon={nextTitle ? mdiArrowRight : mdiCheck}
+        onclick={() => {
+          onLeave?.();
+          onNext?.();
+        }}
+      >
+        <span class="flex place-content-center place-items-center gap-2">
+          {nextTitle ?? $t('done')}
+        </span>
+      </Button>
+    </div>
+  </div>
 </div>