From 24bfdf3263f2c5fa8b2dd8a109e6389484b378ed Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Thu, 16 Oct 2025 17:49:12 -0400
Subject: [PATCH] fix(web): immich-form-label usage (#23006)

---
 .../shared-components/combobox.svelte         |  4 +-
 web/src/lib/modals/ApiKeySecretModal.svelte   | 14 +----
 .../lib/modals/AssetChangeDateModal.svelte    | 37 +++++-------
 .../AssetSelectionChangeDateModal.svelte      | 58 ++++++++-----------
 4 files changed, 43 insertions(+), 70 deletions(-)

diff --git a/web/src/lib/components/shared-components/combobox.svelte b/web/src/lib/components/shared-components/combobox.svelte
index 725b456912..955ca64565 100644
--- a/web/src/lib/components/shared-components/combobox.svelte
+++ b/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 }}
diff --git a/web/src/lib/modals/ApiKeySecretModal.svelte b/web/src/lib/modals/ApiKeySecretModal.svelte
index e3c8d13fb8..66c58543c2 100644
--- a/web/src/lib/modals/ApiKeySecretModal.svelte
+++ b/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>
diff --git a/web/src/lib/modals/AssetChangeDateModal.svelte b/web/src/lib/modals/AssetChangeDateModal.svelte
index 99c923863f..7034493924 100644
--- a/web/src/lib/modals/AssetChangeDateModal.svelte
+++ b/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>
-        <DateInput
-          class="immich-form-input text-gray-700 w-full"
-          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')}
-          />
-        </div>
-      {/if}
-    </VStack>
+    <Label for="datetime" class="block mb-1">{$t('date_and_time')}</Label>
+    <DateInput
+      class="immich-form-input text-gray-700 w-full mb-2"
+      id="datetime"
+      type="datetime-local"
+      bind:value={selectedDate}
+    />
+    {#if timezoneInput}
+      <div class="w-full">
+        <Combobox bind:selectedOption label={$t('timezone')} options={timezones} placeholder={$t('search_timezone')} />
+      </div>
+    {/if}
   </ModalBody>
   <ModalFooter>
     <HStack fullWidth>
diff --git a/web/src/lib/modals/AssetSelectionChangeDateModal.svelte b/web/src/lib/modals/AssetSelectionChangeDateModal.svelte
index ae9bfeb1d0..8eb1a481cc 100644
--- a/web/src/lib/modals/AssetSelectionChangeDateModal.svelte
+++ b/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>
-      <HStack fullWidth>
-        <Field label={$t('edit_date_and_time_by_offset')}>
-          <Switch data-testid="edit-by-offset-switch" bind:checked={showRelative} />
-        </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>
-      {: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>
-      {/if}
-      <div class="w-full">
-        <Combobox
-          bind:selectedOption
-          label={$t('timezone')}
-          options={timezones}
-          placeholder={$t('search_timezone')}
-          onSelect={(option) => (lastSelectedTimezone = option as ZoneOption)}
-        ></Combobox>
-      </div>
-      <!-- <Card color="secondary" class={!showRelative || !currentInterval ? 'invisible' : ''}>
+    <Field label={$t('edit_date_and_time_by_offset')}>
+      <Switch data-testid="edit-by-offset-switch" bind:checked={showRelative} class="mb-2" />
+    </Field>
+    {#if showRelative}
+      <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}
+      <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
+        bind:selectedOption
+        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>