refactor(web): user app settings (#25177)

web/src/lib/components/shared-components/settings/setting-combobox.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
+  import { Label, Text } from '@immich/ui';
   import type { Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
   import { quintOut } from 'svelte/easing';
@@ -28,25 +29,21 @@
   }: Props = $props();
 </script>
 
-<div class="grid grid-cols-2">
-  <div>
-    <div class="flex h-6.5 place-items-center gap-1">
-      <label class="font-medium text-primary text-sm" for={title}>
-        {title}
-      </label>
-      {#if isEdited}
-        <div
-          transition:fly={{ x: 10, duration: 200, easing: quintOut }}
-          class="rounded-full bg-orange-100 px-2 text-[10px] text-orange-900"
-        >
-          {$t('unsaved_change')}
-        </div>
-      {/if}
-    </div>
-
-    <p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
+<div>
+  <div class="flex h-6.5 place-items-center gap-1">
+    <Label>{title}</Label>
+    {#if isEdited}
+      <div
+        transition:fly={{ x: 10, duration: 200, easing: quintOut }}
+        class="rounded-full bg-orange-100 px-2 text-[10px] text-orange-900"
+      >
+        {$t('unsaved_change')}
+      </div>
+    {/if}
   </div>
-  <div class="flex items-center">
+
+  <Text size="small" color="muted">{subtitle}</Text>
+  <div class="flex items-center mt-2 max-w-[300px]">
     <Combobox label={title} hideLabel={true} {selectedOption} {options} placeholder={comboboxPlaceholder} {onSelect} />
     {@render children?.()}
   </div>

web/src/lib/components/shared-components/settings/settings-language-selector.svelte

@@ -4,6 +4,7 @@
   import { defaultLang, langs } from '$lib/constants';
   import { lang } from '$lib/stores/preferences.store';
   import { getClosestAvailableLocale, langCodes } from '$lib/utils/i18n';
+  import { Label, Text } from '@immich/ui';
   import { locale as i18nLocale, t } from 'svelte-i18n';
 
   interface Props {
@@ -34,16 +35,14 @@
   let closestLanguage = $derived(getClosestAvailableLocale([$lang], langCodes));
 </script>
 
-<div class={showSettingDescription ? 'grid grid-cols-2' : ''}>
+<div class="max-w-[300px]">
   {#if showSettingDescription}
     <div>
       <div class="flex h-6.5 place-items-center gap-1">
-        <label class="font-medium text-primary text-sm" for={$t('language')}>
-          {$t('language')}
-        </label>
+        <Label>{$t('language')}</Label>
       </div>
 
-      <p class="text-sm dark:text-immich-dark-fg">{$t('language_setting_description')}</p>
+      <Text size="small" color="muted">{$t('language_setting_description')}</Text>
     </div>
   {/if}