refactor: form modals (#24790)

web/src/lib/modals/AlbumEditModal.svelte

@@ -24,7 +24,7 @@
   };
 </script>
 
-<FormModal icon={mdiRenameOutline} title={$t('edit_album')} size="medium" {onClose} {onSubmit} submitText={$t('save')}>
+<FormModal icon={mdiRenameOutline} title={$t('edit_album')} size="medium" {onClose} {onSubmit}>
   <div class="flex items-center gap-8 m-4">
     <AlbumCover {album} class="h-50 w-50 shadow-lg hidden sm:flex" />
 

web/src/lib/modals/ApiKeyUpdateModal.svelte

@@ -34,7 +34,7 @@
   };
 </script>
 
-<FormModal title={$t('api_key')} icon={mdiKeyVariant} {onClose} {onSubmit} size="giant" submitText={$t('save')}>
+<FormModal title={$t('api_key')} icon={mdiKeyVariant} {onClose} {onSubmit} size="giant">
   <div class="mb-4 flex flex-col gap-2">
     <Field label={$t('name')}>
       <Input bind:value={name} />

web/src/lib/modals/AssetTagModal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { tagAssets } from '$lib/utils/asset-utils';
   import { getAllTags, upsertTags, type TagResponseDto } from '@immich/sdk';
-  import { Button, HStack, Icon, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { FormModal, Icon } from '@immich/ui';
   import { mdiClose, mdiTag } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -25,7 +25,11 @@
     allTags = await getAllTags();
   });
 
-  const handleSubmit = async () => {
+  const onSubmit = async () => {
+    if (selectedIds.size === 0) {
+      return;
+    }
+
     await tagAssets({ tagIds: [...selectedIds], assetIds, showNotification: false });
     onClose(true);
   };
@@ -47,60 +51,52 @@
   const handleRemove = (tag: string) => {
     selectedIds.delete(tag);
   };
-
-  const onsubmit = async (event: Event) => {
-    event.preventDefault();
-    await handleSubmit();
-  };
 </script>
 
-<Modal size="small" title={$t('tag_assets')} icon={mdiTag} {onClose}>
-  <ModalBody>
-    <form {onsubmit} autocomplete="off" id="create-tag-form">
-      <div class="my-4 flex flex-col gap-2">
-        <Combobox
-          onSelect={handleSelect}
-          label={$t('tag')}
-          {allowCreate}
-          defaultFirstOption
-          options={allTags.map((tag) => ({ id: tag.id, label: tag.value, value: tag.id }))}
-          placeholder={$t('search_tags')}
-          forceFocus
-        />
-      </div>
-    </form>
+<FormModal
+  size="small"
+  title={$t('tag_assets')}
+  icon={mdiTag}
+  {onClose}
+  {onSubmit}
+  submitText={$t('tag_assets')}
+  {disabled}
+>
+  <div class="my-4 flex flex-col gap-2">
+    <Combobox
+      onSelect={handleSelect}
+      label={$t('tag')}
+      {allowCreate}
+      defaultFirstOption
+      options={allTags.map((tag) => ({ id: tag.id, label: tag.value, value: tag.id }))}
+      placeholder={$t('search_tags')}
+      forceFocus
+    />
+  </div>
 
-    <section class="flex flex-wrap pt-2 gap-1">
-      {#each selectedIds as tagId (tagId)}
-        {@const tag = tagMap[tagId]}
-        {#if tag}
-          <div class="flex group transition-all">
-            <span
-              class="inline-block h-min whitespace-nowrap ps-3 pe-1 group-hover:ps-3 py-1 text-center align-baseline leading-none text-gray-100 dark:text-immich-dark-gray bg-primary roudned-s-full hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
-            >
-              <p class="text-sm">
-                {tag.value}
-              </p>
-            </span>
+  <section class="flex flex-wrap pt-2 gap-1">
+    {#each selectedIds as tagId (tagId)}
+      {@const tag = tagMap[tagId]}
+      {#if tag}
+        <div class="flex group transition-all">
+          <span
+            class="inline-block h-min whitespace-nowrap ps-3 pe-1 group-hover:ps-3 py-1 text-center align-baseline leading-none text-gray-100 dark:text-immich-dark-gray bg-primary roudned-s-full hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
+          >
+            <p class="text-sm">
+              {tag.value}
+            </p>
+          </span>
 
-            <button
-              type="button"
-              class="text-gray-100 dark:text-immich-dark-gray bg-immich-primary/95 dark:bg-immich-dark-primary/95 rounded-e-full place-items-center place-content-center pe-2 ps-1 py-1 hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
-              title={$t('remove_tag')}
-              onclick={() => handleRemove(tagId)}
-            >
-              <Icon icon={mdiClose} />
-            </button>
-          </div>
-        {/if}
-      {/each}
-    </section>
-  </ModalBody>
-
-  <ModalFooter>
-    <HStack fullWidth>
-      <Button shape="round" fullWidth color="secondary" onclick={() => onClose()}>{$t('cancel')}</Button>
-      <Button type="submit" shape="round" fullWidth form="create-tag-form" {disabled}>{$t('tag_assets')}</Button>
-    </HStack>
-  </ModalFooter>
-</Modal>
+          <button
+            type="button"
+            class="text-gray-100 dark:text-immich-dark-gray bg-immich-primary/95 dark:bg-immich-dark-primary/95 rounded-e-full place-items-center place-content-center pe-2 ps-1 py-1 hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
+            title={$t('remove_tag')}
+            onclick={() => handleRemove(tagId)}
+          >
+            <Icon icon={mdiClose} />
+          </button>
+        </div>
+      {/if}
+    {/each}
+  </section>
+</FormModal>

web/src/lib/modals/LibraryExclusionPatternAddModal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { handleAddLibraryExclusionPattern } from '$lib/services/library.service';
   import type { LibraryResponseDto } from '@immich/sdk';
-  import { Button, Field, HStack, Input, Modal, ModalBody, ModalFooter, Text } from '@immich/ui';
+  import { Field, FormModal, Input, Text } from '@immich/ui';
   import { mdiFolderSync } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -11,33 +11,26 @@
   };
 
   const { library, onClose }: Props = $props();
-  let exclusionPattern = $state('');
+  let value = $state('');
 
-  const onsubmit = async () => {
-    const success = await handleAddLibraryExclusionPattern(library, exclusionPattern);
+  const onSubmit = async () => {
+    const success = await handleAddLibraryExclusionPattern(library, value);
     if (success) {
       onClose();
     }
   };
 </script>
 
-<Modal title={$t('add_exclusion_pattern')} icon={mdiFolderSync} {onClose} size="small">
-  <ModalBody>
-    <form {onsubmit} autocomplete="off" id="library-exclusion-pattern-form">
-      <Text size="small" class="mb-4">{$t('admin.exclusion_pattern_description')}</Text>
-
-      <Field label={$t('pattern')}>
-        <Input bind:value={exclusionPattern} />
-      </Field>
-    </form>
-  </ModalBody>
-
-  <ModalFooter>
-    <HStack fullWidth>
-      <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
-      <Button shape="round" type="submit" fullWidth form="library-exclusion-pattern-form">
-        {$t('add')}
-      </Button>
-    </HStack>
-  </ModalFooter>
-</Modal>
+<FormModal
+  title={$t('add_exclusion_pattern')}
+  icon={mdiFolderSync}
+  {onClose}
+  {onSubmit}
+  submitText={$t('add')}
+  size="small"
+>
+  <Text size="small" class="mb-4">{$t('admin.exclusion_pattern_description')}</Text>
+  <Field label={$t('pattern')}>
+    <Input bind:value />
+  </Field>
+</FormModal>

web/src/lib/modals/LibraryExclusionPatternEditModal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { handleEditExclusionPattern } from '$lib/services/library.service';
   import type { LibraryResponseDto } from '@immich/sdk';
-  import { Button, Field, HStack, Input, Modal, ModalBody, ModalFooter, Text } from '@immich/ui';
+  import { Field, FormModal, Input, Text } from '@immich/ui';
   import { mdiFolderSync } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -11,35 +11,20 @@
     onClose: () => void;
   };
 
-  const { library, exclusionPattern, onClose }: Props = $props();
+  const { library, exclusionPattern: oldValue, onClose }: Props = $props();
+  let newValue = $state(oldValue);
 
-  let newExclusionPattern = $state(exclusionPattern);
-
-  const onsubmit = async () => {
-    const success = await handleEditExclusionPattern(library, exclusionPattern, newExclusionPattern);
+  const onSubmit = async () => {
+    const success = await handleEditExclusionPattern(library, oldValue, newValue);
     if (success) {
       onClose();
     }
   };
 </script>
 
-<Modal title={$t('edit_exclusion_pattern')} icon={mdiFolderSync} {onClose} size="small">
-  <ModalBody>
-    <form {onsubmit} autocomplete="off" id="library-exclusion-pattern-form">
-      <Text size="small" class="mb-4">{$t('admin.exclusion_pattern_description')}</Text>
-
-      <Field label={$t('pattern')}>
-        <Input bind:value={newExclusionPattern} />
-      </Field>
-    </form>
-  </ModalBody>
-
-  <ModalFooter>
-    <HStack fullWidth>
-      <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
-      <Button shape="round" type="submit" fullWidth form="library-exclusion-pattern-form">
-        {$t('save')}
-      </Button>
-    </HStack>
-  </ModalFooter>
-</Modal>
+<FormModal title={$t('edit_exclusion_pattern')} icon={mdiFolderSync} {onClose} {onSubmit} size="small">
+  <Text size="small" class="mb-4">{$t('admin.exclusion_pattern_description')}</Text>
+  <Field label={$t('pattern')}>
+    <Input bind:value={newValue} />
+  </Field>
+</FormModal>

web/src/lib/modals/LibraryFolderAddModal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { handleAddLibraryFolder } from '$lib/services/library.service';
   import type { LibraryResponseDto } from '@immich/sdk';
-  import { Button, Field, HStack, Input, Modal, ModalBody, ModalFooter, Text } from '@immich/ui';
+  import { Field, FormModal, Input, Text } from '@immich/ui';
   import { mdiFolderSync } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -11,34 +11,26 @@
   };
 
   const { library, onClose }: Props = $props();
-  let folder = $state('');
-
-  const onsubmit = async () => {
-    const success = await handleAddLibraryFolder(library, folder);
+  let value = $state('');
 
+  const onSubmit = async () => {
+    const success = await handleAddLibraryFolder(library, value);
     if (success) {
       onClose();
     }
   };
 </script>
 
-<Modal title={$t('library_add_folder')} icon={mdiFolderSync} {onClose} size="small">
-  <ModalBody>
-    <form {onsubmit} autocomplete="off" id="library-import-path-form">
-      <Text size="small" class="mb-4">{$t('admin.library_folder_description')}</Text>
-
-      <Field label={$t('path')}>
-        <Input bind:value={folder} />
-      </Field>
-    </form>
-  </ModalBody>
-
-  <ModalFooter>
-    <HStack fullWidth>
-      <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
-      <Button shape="round" type="submit" fullWidth form="library-import-path-form">
-        {$t('add')}
-      </Button>
-    </HStack>
-  </ModalFooter>
-</Modal>
+<FormModal
+  title={$t('library_add_folder')}
+  icon={mdiFolderSync}
+  {onClose}
+  {onSubmit}
+  size="small"
+  submitText={$t('add')}
+>
+  <Text size="small" class="mb-4">{$t('admin.library_folder_description')}</Text>
+  <Field label={$t('path')}>
+    <Input bind:value />
+  </Field>
+</FormModal>

web/src/lib/modals/LibraryFolderEditModal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { handleEditLibraryFolder } from '$lib/services/library.service';
   import type { LibraryResponseDto } from '@immich/sdk';
-  import { Button, Field, HStack, Input, Modal, ModalBody, ModalFooter, Text } from '@immich/ui';
+  import { Field, FormModal, Input, Text } from '@immich/ui';
   import { mdiFolderSync } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -11,35 +11,21 @@
     onClose: () => void;
   };
 
-  const { library, folder, onClose }: Props = $props();
+  const { library, folder: oldValue, onClose }: Props = $props();
 
-  let newFolder = $state(folder);
+  let newValue = $state(oldValue);
 
-  const onsubmit = async () => {
-    const success = await handleEditLibraryFolder(library, folder, newFolder);
+  const onSubmit = async () => {
+    const success = await handleEditLibraryFolder(library, oldValue, newValue);
     if (success) {
       onClose();
     }
   };
 </script>
 
-<Modal title={$t('library_edit_folder')} icon={mdiFolderSync} {onClose} size="small">
-  <ModalBody>
-    <form {onsubmit} autocomplete="off" id="library-import-path-form">
-      <Text size="small" class="mb-4">{$t('admin.library_folder_description')}</Text>
-
-      <Field label={$t('path')}>
-        <Input bind:value={newFolder} />
-      </Field>
-    </form>
-  </ModalBody>
-
-  <ModalFooter>
-    <HStack fullWidth>
-      <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
-      <Button shape="round" type="submit" fullWidth form="library-import-path-form">
-        {$t('save')}
-      </Button>
-    </HStack>
-  </ModalFooter>
-</Modal>
+<FormModal title={$t('library_edit_folder')} icon={mdiFolderSync} {onClose} {onSubmit} size="small">
+  <Text size="small" class="mb-4">{$t('admin.library_folder_description')}</Text>
+  <Field label={$t('path')}>
+    <Input bind:value={newValue} />
+  </Field>
+</FormModal>

web/src/lib/modals/SharedLinkCreateModal.svelte

@@ -2,7 +2,7 @@
   import SharedLinkExpiration from '$lib/components/SharedLinkExpiration.svelte';
   import { handleCreateSharedLink } from '$lib/services/shared-link.service';
   import { SharedLinkType } from '@immich/sdk';
-  import { Button, Field, HStack, Input, Modal, ModalBody, ModalFooter, PasswordInput, Switch, Text } from '@immich/ui';
+  import { Field, FormModal, Input, PasswordInput, Switch, Text } from '@immich/ui';
   import { mdiLink } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -22,7 +22,7 @@
   let slug = $state('');
   let expiresAt = $state<string | null>(null);
 
-  let shareType = $derived(albumId ? SharedLinkType.Album : SharedLinkType.Individual);
+  let type = $derived(albumId ? SharedLinkType.Album : SharedLinkType.Individual);
 
   $effect(() => {
     if (!showMetadata) {
@@ -30,9 +30,9 @@
     }
   });
 
-  const onCreate = async () => {
+  const onSubmit = async () => {
     const success = await handleCreateSharedLink({
-      type: shareType,
+      type,
       albumId,
       assetIds,
       expiresAt,
@@ -43,61 +43,58 @@
       showMetadata,
       slug,
     });
-
     if (success) {
       onClose(true);
     }
   };
 </script>
 
-<Modal title={$t('create_link_to_share')} icon={mdiLink} size="small" {onClose}>
-  <ModalBody>
-    {#if shareType === SharedLinkType.Album}
-      <div>{$t('album_with_link_access')}</div>
-    {/if}
+<FormModal
+  title={$t('create_link_to_share')}
+  icon={mdiLink}
+  size="small"
+  {onClose}
+  {onSubmit}
+  submitText={$t('create_link')}
+>
+  {#if type === SharedLinkType.Album}
+    <div>{$t('album_with_link_access')}</div>
+  {/if}
 
-    {#if shareType === SharedLinkType.Individual}
-      <div>{$t('create_link_to_share_description')}</div>
-    {/if}
+  {#if type === SharedLinkType.Individual}
+    <div>{$t('create_link_to_share_description')}</div>
+  {/if}
 
-    <div class="flex flex-col gap-4 mt-4">
-      <div>
-        <Field label={$t('custom_url')} description={$t('shared_link_custom_url_description')}>
-          <Input bind:value={slug} autocomplete="off" />
-        </Field>
-        {#if slug}
-          <Text size="tiny" color="muted" class="pt-2 break-all">/s/{encodeURIComponent(slug)}</Text>
-        {/if}
-      </div>
-
-      <Field label={$t('password')} description={$t('shared_link_password_description')}>
-        <PasswordInput bind:value={password} autocomplete="new-password" />
-      </Field>
-
-      <Field label={$t('description')}>
-        <Input bind:value={description} autocomplete="off" />
-      </Field>
-
-      <SharedLinkExpiration bind:expiresAt />
-
-      <Field label={$t('show_metadata')}>
-        <Switch bind:checked={showMetadata} />
-      </Field>
-
-      <Field label={$t('allow_public_user_to_download')} disabled={!showMetadata}>
-        <Switch bind:checked={allowDownload} />
-      </Field>
-
-      <Field label={$t('allow_public_user_to_upload')}>
-        <Switch bind:checked={allowUpload} />
+  <div class="flex flex-col gap-4 mt-4">
+    <div>
+      <Field label={$t('custom_url')} description={$t('shared_link_custom_url_description')}>
+        <Input bind:value={slug} autocomplete="off" />
       </Field>
+      {#if slug}
+        <Text size="tiny" color="muted" class="pt-2 break-all">/s/{encodeURIComponent(slug)}</Text>
+      {/if}
     </div>
-  </ModalBody>
 
-  <ModalFooter>
-    <HStack fullWidth>
-      <Button color="secondary" shape="round" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
-      <Button fullWidth shape="round" onclick={onCreate}>{$t('create_link')}</Button>
-    </HStack>
-  </ModalFooter>
-</Modal>
+    <Field label={$t('password')} description={$t('shared_link_password_description')}>
+      <PasswordInput bind:value={password} autocomplete="new-password" />
+    </Field>
+
+    <Field label={$t('description')}>
+      <Input bind:value={description} autocomplete="off" />
+    </Field>
+
+    <SharedLinkExpiration bind:expiresAt />
+
+    <Field label={$t('show_metadata')}>
+      <Switch bind:checked={showMetadata} />
+    </Field>
+
+    <Field label={$t('allow_public_user_to_download')} disabled={!showMetadata}>
+      <Switch bind:checked={allowDownload} />
+    </Field>
+
+    <Field label={$t('allow_public_user_to_upload')}>
+      <Switch bind:checked={allowUpload} />
+    </Field>
+  </div>
+</FormModal>