feat(web): immich/ui select component (#25268)

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

web/src/lib/modals/AlbumOptionsModal.svelte

@@ -19,7 +19,7 @@
     type SharedLinkResponseDto,
     type UserResponseDto,
   } from '@immich/sdk';
-  import { Field, HStack, Modal, ModalBody, Select, Stack, Switch, Text } from '@immich/ui';
+  import { Field, HStack, Modal, ModalBody, Select, Stack, Switch, Text, type SelectOption } from '@immich/ui';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
 
@@ -30,21 +30,6 @@
 
   let { album, onClose }: Props = $props();
 
-  const orderOptions = [
-    { label: $t('newest_first'), value: AssetOrder.Desc },
-    { label: $t('oldest_first'), value: AssetOrder.Asc },
-  ];
-
-  const roleOptions: Array<{ label: string; value: AlbumUserRole | 'none'; icon?: string }> = [
-    { label: $t('role_editor'), value: AlbumUserRole.Editor },
-    { label: $t('role_viewer'), value: AlbumUserRole.Viewer },
-    { label: $t('remove_user'), value: 'none' },
-  ];
-
-  const selectedOrderOption = $derived(
-    album.order ? orderOptions.find(({ value }) => value === album.order) : orderOptions[0],
-  );
-
   const handleRoleSelect = async (user: UserResponseDto, role: AlbumUserRole | 'none') => {
     if (role === 'none') {
       await handleRemoveUserFromAlbum(album, user);
@@ -97,9 +82,12 @@
           {#if album.order}
             <Field label={$t('display_order')}>
               <Select
-                data={orderOptions}
-                value={selectedOrderOption}
-                onChange={({ value }) => handleUpdateAlbum(album, { order: value })}
+                value={album.order}
+                options={[
+                  { label: $t('newest_first'), value: AssetOrder.Desc },
+                  { label: $t('oldest_first'), value: AssetOrder.Asc },
+                ]}
+                onChange={(value) => handleUpdateAlbum(album, { order: value })}
               />
             </Field>
           {/if}
@@ -124,7 +112,7 @@
             </div>
             <Text class="w-full" size="small">{$user.name}</Text>
             <Field disabled class="w-32 shrink-0">
-              <Select data={[{ label: $t('owner'), value: 'owner' }]} value={{ label: $t('owner'), value: 'owner' }} />
+              <Select options={[{ label: $t('owner'), value: 'owner' }]} value="owner" />
             </Field>
           </div>
 
@@ -138,9 +126,13 @@
               </div>
               <Field class="w-32">
                 <Select
-                  data={roleOptions}
-                  value={roleOptions.find(({ value }) => value === role)}
-                  onChange={({ value }) => handleRoleSelect(user, value)}
+                  value={role}
+                  options={[
+                    { label: $t('role_editor'), value: AlbumUserRole.Editor },
+                    { label: $t('role_viewer'), value: AlbumUserRole.Viewer },
+                    { label: $t('remove_user'), value: 'none' },
+                  ] as SelectOption<AlbumUserRole | 'none'>[]}
+                  onChange={(value) => handleRoleSelect(user, value)}
                 />
               </Field>
             </div>

web/src/lib/modals/MapSettingsModal.svelte

@@ -1,16 +1,15 @@
 <script lang="ts">
-  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
   import DateInput from '$lib/elements/DateInput.svelte';
   import type { MapSettings } from '$lib/stores/preferences.store';
-  import { Button, Field, FormModal, Stack, Switch } from '@immich/ui';
+  import { Button, Field, FormModal, Select, Stack, Switch } from '@immich/ui';
   import { Duration } from 'luxon';
   import { t } from 'svelte-i18n';
   import { fly } from 'svelte/transition';
 
-  interface Props {
+  type Props = {
     settings: MapSettings;
     onClose: (settings?: MapSettings) => void;
-  }
+  };
 
   let { settings: initialValues, onClose }: Props = $props();
   let settings = $state(initialValues);
@@ -73,37 +72,37 @@
       </div>
     {:else}
       <div in:fly={{ y: -10, duration: 200 }} class="flex flex-col gap-1">
-        <SettingSelect
-          label={$t('date_range')}
-          name="date-range"
-          bind:value={settings.relativeDate}
-          options={[
-            {
-              value: '',
-              text: $t('all'),
-            },
-            {
-              value: Duration.fromObject({ hours: 24 }).toISO() || '',
-              text: $t('past_durations.hours', { values: { hours: 24 } }),
-            },
-            {
-              value: Duration.fromObject({ days: 7 }).toISO() || '',
-              text: $t('past_durations.days', { values: { days: 7 } }),
-            },
-            {
-              value: Duration.fromObject({ days: 30 }).toISO() || '',
-              text: $t('past_durations.days', { values: { days: 30 } }),
-            },
-            {
-              value: Duration.fromObject({ years: 1 }).toISO() || '',
-              text: $t('past_durations.years', { values: { years: 1 } }),
-            },
-            {
-              value: Duration.fromObject({ years: 3 }).toISO() || '',
-              text: $t('past_durations.years', { values: { years: 3 } }),
-            },
-          ]}
-        />
+        <Field label={$t('date_range')}>
+          <Select
+            bind:value={settings.relativeDate}
+            options={[
+              {
+                label: $t('all'),
+                value: '',
+              },
+              {
+                label: $t('past_durations.hours', { values: { hours: 24 } }),
+                value: Duration.fromObject({ hours: 24 }).toISO() || '',
+              },
+              {
+                label: $t('past_durations.days', { values: { days: 7 } }),
+                value: Duration.fromObject({ days: 7 }).toISO() || '',
+              },
+              {
+                label: $t('past_durations.days', { values: { days: 30 } }),
+                value: Duration.fromObject({ days: 30 }).toISO() || '',
+              },
+              {
+                label: $t('past_durations.years', { values: { years: 1 } }),
+                value: Duration.fromObject({ years: 1 }).toISO() || '',
+              },
+              {
+                label: $t('past_durations.years', { values: { years: 3 } }),
+                value: Duration.fromObject({ years: 3 }).toISO() || '',
+              },
+            ]}
+          />
+        </Field>
         <div class="text-xs">
           <Button
             color="primary"

web/src/lib/modals/ObtainiumConfigModal.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
   import { handleCreateApiKey } from '$lib/services/api-key.service';
   import { Permission } from '@immich/sdk';
-  import { Button, Field, Input, Modal, ModalBody, obtainiumBadge, Text } from '@immich/ui';
+  import { Button, Field, Input, Modal, ModalBody, obtainiumBadge, Select, Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
   let inputUrl = $state(location.origin);
   let inputApiKey = $state('');
@@ -29,6 +28,18 @@
   <ModalBody>
     <Text color="muted" size="small">{$t('obtainium_configurator_instructions')}</Text>
 
+    <Field label={$t('app_architecture_variant')} class="mt-4">
+      <Select
+        bind:value={archVariant}
+        options={[
+          { label: 'arm64-v8a', value: 'arm64-v8a-release' },
+          { label: 'armeabi-v7a', value: 'armeabi-v7a-release' },
+          { label: 'universal', value: 'release' },
+          { label: 'x86_64', value: 'x86_64-release' },
+        ]}
+      />
+    </Field>
+
     <Field label={$t('url')} class="mt-4">
       <Input bind:value={inputUrl} />
     </Field>
@@ -41,17 +52,6 @@
       <Button size="small" onclick={handleCreate}>{$t('create_api_key')}</Button>
     </div>
 
-    <SettingSelect
-      label={$t('app_architecture_variant')}
-      bind:value={archVariant}
-      options={[
-        { value: 'arm64-v8a-release', text: 'arm64-v8a' },
-        { value: 'armeabi-v7a-release', text: 'armeabi-v7a' },
-        { value: 'release', text: 'universal' },
-        { value: 'x86_64-release', text: 'x86_64' },
-      ]}
-    />
-
     {#if inputUrl && inputApiKey && archVariant}
       <div class="content-center">
         <hr />