fix(web): immich-form-label usage (#23006)

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

@@ -23,7 +23,7 @@
   import { focusOutside } from '$lib/actions/focus-outside';
   import { shortcuts } from '$lib/actions/shortcut';
   import { generateId } from '$lib/utils/generate-id';
-  import { Icon, IconButton } from '@immich/ui';
+  import { Icon, IconButton, Label } from '@immich/ui';
   import { mdiClose, mdiMagnify, mdiUnfoldMoreHorizontal } from '@mdi/js';
   import { onMount, tick } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -251,7 +251,7 @@
 </script>
 
 <svelte:window onresize={onPositionChange} />
-<label class="immich-form-label" class:sr-only={hideLabel} for={inputId}>{label}</label>
+<Label class="block mb-1 {hideLabel ? 'sr-only' : ''}" for={inputId}>{label}</Label>
 <div
   class="relative w-full dark:text-gray-300 text-gray-700 text-base"
   use:focusOutside={{ onFocusOut: deactivate }}

web/src/lib/modals/ApiKeySecretModal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { copyToClipboard } from '$lib/utils';
-  import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { Button, HStack, Modal, ModalBody, ModalFooter, Text, Textarea } from '@immich/ui';
   import { mdiKeyVariant } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -14,16 +14,8 @@
 
 <Modal title={$t('api_key')} icon={mdiKeyVariant} {onClose} size="small">
   <ModalBody>
-    <div class="text-primary">
-      <p class="text-sm dark:text-immich-dark-fg">
-        {$t('api_key_description')}
-      </p>
-    </div>
-
-    <div class="my-4 flex flex-col gap-2">
-      <!-- <label class="immich-form-label" for="secret">{ $t("api_key") }</label> -->
-      <textarea class="immich-form-input" id="secret" name="secret" readonly={true} value={secret}></textarea>
-    </div>
+    <Text size="small" class="mb-4">{$t('api_key_description')}</Text>
+    <Textarea bind:value={secret} readonly />
   </ModalBody>
 
   <ModalFooter>

web/src/lib/modals/AssetChangeDateModal.svelte

@@ -5,7 +5,7 @@
   import { getPreferredTimeZone, getTimezones, toIsoDate } from '$lib/modals/timezone-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { updateAsset } from '@immich/sdk';
-  import { Button, HStack, Modal, ModalBody, ModalFooter, VStack } from '@immich/ui';
+  import { Button, HStack, Label, Modal, ModalBody, ModalFooter } from '@immich/ui';
   import { mdiCalendarEdit } from '@mdi/js';
   import { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
@@ -51,29 +51,18 @@
 
 <Modal title={$t('edit_date_and_time')} icon={mdiCalendarEdit} onClose={() => onClose(false)} size="small">
   <ModalBody>
-    <VStack fullWidth>
-      <HStack fullWidth>
-        <label class="immich-form-label" for="datetime">{$t('date_and_time')}</label>
-      </HStack>
-      <HStack fullWidth>
+    <Label for="datetime" class="block mb-1">{$t('date_and_time')}</Label>
     <DateInput
-          class="immich-form-input text-gray-700 w-full"
+      class="immich-form-input text-gray-700 w-full mb-2"
       id="datetime"
       type="datetime-local"
       bind:value={selectedDate}
     />
-      </HStack>
     {#if timezoneInput}
       <div class="w-full">
-          <Combobox
-            bind:selectedOption
-            label={$t('timezone')}
-            options={timezones}
-            placeholder={$t('search_timezone')}
-          />
+        <Combobox bind:selectedOption label={$t('timezone')} options={timezones} placeholder={$t('search_timezone')} />
       </div>
     {/if}
-    </VStack>
   </ModalBody>
   <ModalFooter>
     <HStack fullWidth>

web/src/lib/modals/AssetSelectionChangeDateModal.svelte

@@ -8,7 +8,7 @@
   import { getOwnedAssetsWithWarning } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { updateAssets } from '@immich/sdk';
-  import { Button, Field, HStack, Modal, ModalBody, ModalFooter, Switch, VStack } from '@immich/ui';
+  import { Button, Field, HStack, Label, Modal, ModalBody, ModalFooter, Switch } from '@immich/ui';
   import { mdiCalendarEdit } from '@mdi/js';
   import { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
@@ -65,26 +65,19 @@
 
 <Modal title={$t('edit_date_and_time')} icon={mdiCalendarEdit} onClose={() => onClose(false)} size="small">
   <ModalBody>
-    <VStack fullWidth>
-      <HStack fullWidth>
     <Field label={$t('edit_date_and_time_by_offset')}>
-          <Switch data-testid="edit-by-offset-switch" bind:checked={showRelative} />
+      <Switch data-testid="edit-by-offset-switch" bind:checked={showRelative} class="mb-2" />
     </Field>
-      </HStack>
     {#if showRelative}
-        <HStack fullWidth>
-          <label class="immich-form-label" for="relativedatetime">{$t('offset')}</label>
-        </HStack>
-        <HStack fullWidth>
-          <DurationInput class="immich-form-input text-gray-700" id="relativedatetime" bind:value={selectedDuration} />
-        </HStack>
+      <Label for="relativedatetime" class="block mb-1">{$t('offset')}</Label>
+      <DurationInput
+        class="immich-form-input w-full text-gray-700 mb-2"
+        id="relativedatetime"
+        bind:value={selectedDuration}
+      />
     {:else}
-        <HStack fullWidth>
-          <label class="immich-form-label" for="datetime">{$t('date_and_time')}</label>
-        </HStack>
-        <HStack fullWidth>
-          <DateInput class="immich-form-input" id="datetime" type="datetime-local" bind:value={selectedDate} />
-        </HStack>
+      <Label for="datetime" class="block mb-1">{$t('date_and_time')}</Label>
+      <DateInput class="immich-form-input w-full mb-2" id="datetime" type="datetime-local" bind:value={selectedDate} />
     {/if}
     <div class="w-full">
       <Combobox
@@ -121,7 +114,6 @@
           </div>
         </CardBody>
       </Card> -->
-    </VStack>
   </ModalBody>
   <ModalFooter>
     <HStack fullWidth>