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">
+    <Text size="small" class="mb-4">{$t('api_key_description')}</Text>
-      <p class="text-sm dark:text-immich-dark-fg">
+    <Textarea bind:value={secret} readonly />
-        {$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>
   </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>
+    <Label for="datetime" class="block mb-1">{$t('date_and_time')}</Label>
-      <HStack fullWidth>
+    <DateInput
-        <label class="immich-form-label" for="datetime">{$t('date_and_time')}</label>
+      class="immich-form-input text-gray-700 w-full mb-2"
-      </HStack>
+      id="datetime"
-      <HStack fullWidth>
+      type="datetime-local"
-        <DateInput
+      bind:value={selectedDate}
-          class="immich-form-input text-gray-700 w-full"
+    />
-          id="datetime"
+    {#if timezoneInput}
-          type="datetime-local"
+      <div class="w-full">
-          bind:value={selectedDate}
+        <Combobox bind:selectedOption label={$t('timezone')} options={timezones} placeholder={$t('search_timezone')} />
-        />
+      </div>
-      </HStack>
+    {/if}
-      {#if timezoneInput}
-        <div class="w-full">
-          <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,37 +65,30 @@
 
 <Modal title={$t('edit_date_and_time')} icon={mdiCalendarEdit} onClose={() => onClose(false)} size="small">
   <ModalBody>
-    <VStack fullWidth>
+    <Field label={$t('edit_date_and_time_by_offset')}>
-      <HStack fullWidth>
+      <Switch data-testid="edit-by-offset-switch" bind:checked={showRelative} class="mb-2" />
-        <Field label={$t('edit_date_and_time_by_offset')}>
+    </Field>
-          <Switch data-testid="edit-by-offset-switch" bind:checked={showRelative} />
+    {#if showRelative}
-        </Field>
+      <Label for="relativedatetime" class="block mb-1">{$t('offset')}</Label>
-      </HStack>
+      <DurationInput
-      {#if showRelative}
+        class="immich-form-input w-full text-gray-700 mb-2"
-        <HStack fullWidth>
+        id="relativedatetime"
-          <label class="immich-form-label" for="relativedatetime">{$t('offset')}</label>
+        bind:value={selectedDuration}
-        </HStack>
+      />
-        <HStack fullWidth>
+    {:else}
-          <DurationInput class="immich-form-input text-gray-700" id="relativedatetime" bind:value={selectedDuration} />
+      <Label for="datetime" class="block mb-1">{$t('date_and_time')}</Label>
-        </HStack>
+      <DateInput class="immich-form-input w-full mb-2" id="datetime" type="datetime-local" bind:value={selectedDate} />
-      {:else}
+    {/if}
-        <HStack fullWidth>
+    <div class="w-full">
-          <label class="immich-form-label" for="datetime">{$t('date_and_time')}</label>
+      <Combobox
-        </HStack>
+        bind:selectedOption
-        <HStack fullWidth>
+        label={$t('timezone')}
-          <DateInput class="immich-form-input" id="datetime" type="datetime-local" bind:value={selectedDate} />
+        options={timezones}
-        </HStack>
+        placeholder={$t('search_timezone')}
-      {/if}
+        onSelect={(option) => (lastSelectedTimezone = option as ZoneOption)}
-      <div class="w-full">
+      ></Combobox>
-        <Combobox
+    </div>
-          bind:selectedOption
+    <!-- <Card color="secondary" class={!showRelative || !currentInterval ? 'invisible' : ''}>
-          label={$t('timezone')}
-          options={timezones}
-          placeholder={$t('search_timezone')}
-          onSelect={(option) => (lastSelectedTimezone = option as ZoneOption)}
-        ></Combobox>
-      </div>
-      <!-- <Card color="secondary" class={!showRelative || !currentInterval ? 'invisible' : ''}>
         <CardBody class="p-2">
           <div class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-3 items-center">
             <div class="col-span-2 immich-form-label" data-testid="interval-preview">Preview</div>
@@ -121,7 +114,6 @@
           </div>
         </CardBody>
       </Card> -->
-    </VStack>
   </ModalBody>
   <ModalFooter>
     <HStack fullWidth>