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/user-settings-page/app-settings.svelte

@@ -1,22 +1,20 @@
 <script lang="ts">
-  import { invalidateAll } from '$app/navigation';
   import type { ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
   import SettingCombobox from '$lib/components/shared-components/settings/setting-combobox.svelte';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
-  import { defaultLang, fallbackLocale, langs, locales } from '$lib/constants';
+  import SettingsLanguageSelector from '$lib/components/shared-components/settings/settings-language-selector.svelte';
+  import { fallbackLocale, locales } from '$lib/constants';
   import { themeManager } from '$lib/managers/theme-manager.svelte';
   import {
     alwaysLoadOriginalFile,
-    lang,
     locale,
     loopVideo,
     playVideoThumbnailOnHover,
     showDeleteModal,
   } from '$lib/stores/preferences.store';
   import { findLocale } from '$lib/utils';
-  import { getClosestAvailableLocale, langCodes } from '$lib/utils/i18n';
   import { onMount } from 'svelte';
-  import { locale as i18nLocale, t } from 'svelte-i18n';
+  import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
 
   let time = $state(new Date());
@@ -44,24 +42,6 @@
     $locale = $locale ? undefined : fallbackLocale.code;
   };
 
-  const langOptions = langs
-    .map((lang) => ({ label: lang.name, value: lang.code }))
-    .sort((a, b) => {
-      if (b.label.startsWith('Development')) {
-        return -1;
-      }
-      return a.label.localeCompare(b.label);
-    });
-  const defaultLangOption = { label: defaultLang.name, value: defaultLang.code };
-
-  const handleLanguageChange = async (newLang: string | undefined) => {
-    if (newLang) {
-      $lang = newLang;
-      await i18nLocale.set(newLang);
-      await invalidateAll();
-    }
-  };
-
   const handleLocaleChange = (newLocale: string | undefined) => {
     if (newLocale) {
       $locale = newLocale;
@@ -87,7 +67,6 @@
     value: findLocale(editedLocale).code || fallbackLocale.code,
     label: findLocale(editedLocale).name || fallbackLocale.name,
   });
-  let closestLanguage = $derived(getClosestAvailableLocale([$lang], langCodes));
 </script>
 
 <section class="my-4">
@@ -103,14 +82,7 @@
       </div>
 
       <div class="ms-4">
-        <SettingCombobox
-          comboboxPlaceholder={$t('language')}
-          selectedOption={langOptions.find(({ value }) => value === closestLanguage) || defaultLangOption}
-          options={langOptions}
-          title={$t('language')}
-          subtitle={$t('language_setting_description')}
-          onSelect={(combobox) => handleLanguageChange(combobox?.value)}
-        />
+        <SettingsLanguageSelector showSettingDescription />
       </div>
 
       <div class="ms-4">