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-storage-template.svelte

@@ -5,18 +5,7 @@
   import { featureFlags } from '$lib/stores/server-config.store';
   import { user } from '$lib/stores/user.store';
   import { getConfig, type SystemConfigDto } from '@immich/sdk';
-  import { Button } from '@immich/ui';
-  import { mdiArrowLeft, mdiCheck, mdiHarddisk } from '@mdi/js';
   import { onMount } from 'svelte';
-  import { t } from 'svelte-i18n';
-  import OnboardingCard from './onboarding-card.svelte';
-
-  interface Props {
-    onDone: () => void;
-    onPrevious: () => void;
-  }
-
-  let { onDone, onPrevious }: Props = $props();
 
   let config: SystemConfigDto | undefined = $state();
   let adminSettingsComponent = $state<ReturnType<typeof AdminSettings>>();
@@ -24,9 +13,13 @@
   onMount(async () => {
     config = await getConfig();
   });
+
+  export const save = async () => {
+    await adminSettingsComponent?.handleSave({ storageTemplate: config?.storageTemplate });
+  };
 </script>
 
-<OnboardingCard title={$t('admin.storage_template_settings')} icon={mdiHarddisk}>
+<div class="flex flex-col">
   <p>
     <FormatMessage key="admin.storage_template_onboarding_description">
       {#snippet children({ message })}
@@ -48,36 +41,9 @@
             onSave={(config) => adminSettingsComponent?.handleSave(config)}
             onReset={(options) => adminSettingsComponent?.handleReset(options)}
             duration={0}
-          >
-            <div class="flex pt-4">
-              <div class="w-full flex place-content-start">
-                <Button
-                  shape="round"
-                  leadingIcon={mdiArrowLeft}
-                  class="flex gap-2 place-content-center"
-                  onclick={() => onPrevious()}
-                >
-                  <p>{$t('privacy')}</p>
-                </Button>
-              </div>
-              <div class="flex w-full place-content-end">
-                <Button
-                  shape="round"
-                  trailingIcon={mdiCheck}
-                  onclick={() => {
-                    adminSettingsComponent?.handleSave({ storageTemplate: config?.storageTemplate });
-                    onDone();
-                  }}
-                >
-                  <span class="flex place-content-center place-items-center gap-2">
-                    {$t('done')}
-                  </span>
-                </Button>
-              </div>
-            </div>
-          </StorageTemplateSettings>
+          />
         {/if}
       {/snippet}
     </AdminSettings>
   {/if}
-</OnboardingCard>
+</div>