refactor: tag create/update modal (#19389)

refactor: tag modals

web/src/lib/modals/TagCreateModal.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import { SettingInputFieldType } from '$lib/constants';
+  import type { TreeNode } from '$lib/utils/tree-utils';
+  import { upsertTags, type TagResponseDto } from '@immich/sdk';
+  import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { mdiTag } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    onClose: (tag?: TagResponseDto) => void;
+    baseTag?: TreeNode;
+  };
+
+  const { onClose, baseTag }: Props = $props();
+
+  let tagValue = $state(baseTag?.value ? `${baseTag.value}/` : '');
+
+  const createTag = async () => {
+    const [tag] = await upsertTags({ tagUpsertDto: { tags: [tagValue] } });
+
+    if (!tag) {
+      return;
+    }
+
+    notificationController.show({
+      message: $t('tag_created', { values: { tag: tag.value } }),
+      type: NotificationType.Info,
+    });
+
+    onClose(tag);
+  };
+</script>
+
+<Modal size="small" title={$t('create_tag')} icon={mdiTag} {onClose}>
+  <ModalBody>
+    <div class="text-immich-primary dark:text-immich-dark-primary">
+      <p class="text-sm dark:text-immich-dark-fg">
+        {$t('create_tag_description')}
+      </p>
+    </div>
+
+    <form onsubmit={createTag} autocomplete="off" id="create-tag-form">
+      <div class="my-4 flex flex-col gap-2">
+        <SettingInputField
+          inputType={SettingInputFieldType.TEXT}
+          label={$t('tag').toUpperCase()}
+          bind:value={tagValue}
+          required={true}
+          autofocus={true}
+        />
+      </div>
+    </form>
+  </ModalBody>
+
+  <ModalFooter>
+    <HStack fullWidth>
+      <Button color="secondary" fullWidth shape="round" onclick={() => onClose()}>{$t('cancel')}</Button>
+      <Button type="submit" fullWidth shape="round" form="create-tag-form">{$t('create')}</Button>
+    </HStack>
+  </ModalFooter>
+</Modal>

web/src/lib/modals/TagEditModal.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import { SettingInputFieldType } from '$lib/constants';
+  import type { TreeNode } from '$lib/utils/tree-utils';
+  import { updateTag, type TagResponseDto } from '@immich/sdk';
+  import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { mdiTag } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    tag: TreeNode;
+    onClose: (updatedTag?: TagResponseDto) => void;
+  };
+
+  const { tag, onClose }: Props = $props();
+
+  let tagColor = $state(tag.color ?? '');
+
+  const handleEdit = async () => {
+    if (!tag.id) {
+      return;
+    }
+
+    const updatedTag = await updateTag({ id: tag.id, tagUpdateDto: { color: tagColor } });
+
+    notificationController.show({
+      message: $t('tag_updated', { values: { tag: tag.value } }),
+      type: NotificationType.Info,
+    });
+
+    onClose(updatedTag);
+  };
+</script>
+
+<Modal title={$t('edit_tag')} icon={mdiTag} {onClose}>
+  <ModalBody>
+    <form onsubmit={handleEdit} autocomplete="off" id="edit-tag-form">
+      <div class="my-4 flex flex-col gap-2">
+        <SettingInputField
+          inputType={SettingInputFieldType.COLOR}
+          label={$t('color').toUpperCase()}
+          bind:value={tagColor}
+        />
+      </div>
+    </form>
+  </ModalBody>
+
+  <ModalFooter>
+    <HStack fullWidth>
+      <Button color="secondary" fullWidth shape="round" onclick={() => onClose()}>{$t('cancel')}</Button>
+      <Button type="submit" fullWidth shape="round" form="edit-tag-form">{$t('save')}</Button>
+    </HStack>
+  </ModalFooter>
+</Modal>

web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -3,22 +3,19 @@
   import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
   import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte';
   import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
-  import {
-    notificationController,
-    NotificationType,
-  } from '$lib/components/shared-components/notification/notification';
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
   import Breadcrumbs from '$lib/components/shared-components/tree/breadcrumbs.svelte';
   import TreeItemThumbnails from '$lib/components/shared-components/tree/tree-item-thumbnails.svelte';
   import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte';
   import Sidebar from '$lib/components/sidebar/sidebar.svelte';
-  import { AppRoute, AssetAction, QueryParameter, SettingInputFieldType } from '$lib/constants';
+  import { AppRoute, AssetAction, QueryParameter } from '$lib/constants';
   import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+  import TagCreateModal from '$lib/modals/TagCreateModal.svelte';
+  import TagEditModal from '$lib/modals/TagEditModal.svelte';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { joinPaths, TreeNode } from '$lib/utils/tree-utils';
-  import { deleteTag, getAllTags, updateTag, upsertTags, type TagResponseDto } from '@immich/sdk';
+  import { deleteTag, getAllTags, type TagResponseDto } from '@immich/sdk';
-  import { Button, HStack, Modal, ModalBody, ModalFooter, Text } from '@immich/ui';
+  import { Button, HStack, Text } from '@immich/ui';
   import { mdiPencil, mdiPlus, mdiTag, mdiTagMultiple, mdiTrashCanOutline } from '@mdi/js';
   import { onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -50,49 +47,18 @@
 
   const navigateToView = (path: string) => goto(getLink(path));
 
-  let isNewOpen = $state(false);
+  const handleCreate = async () => {
-  let newTagValue = $state('');
+    await modalManager.show(TagCreateModal, { baseTag: tag });
-  const handleCreate = () => {
+    tags = await getAllTags();
-    newTagValue = tag ? tag.value + '/' : '';
-    isNewOpen = true;
   };
 
-  let isEditOpen = $state(false);
+  const handleEdit = async () => {
-  let newTagColor = $state('');
+    if (!tag) {
-  const handleEdit = () => {
+      return;
-    newTagColor = tag?.color ?? '';
-    isEditOpen = true;
-  };
-
-  const handleCancel = () => {
-    isNewOpen = false;
-    isEditOpen = false;
-  };
-
-  const handleSubmit = async () => {
-    if (tag && isEditOpen && newTagColor) {
-      await updateTag({ id: tag.id!, tagUpdateDto: { color: newTagColor } });
-
-      notificationController.show({
-        message: $t('tag_updated', { values: { tag: tag.value } }),
-        type: NotificationType.Info,
-      });
-
-      tags = await getAllTags();
-      isEditOpen = false;
     }
 
-    if (isNewOpen && newTagValue) {
+    await modalManager.show(TagEditModal, { tag });
-      const [newTag] = await upsertTags({ tagUpsertDto: { tags: [newTagValue] } });
+    tags = await getAllTags();
-
-      notificationController.show({
-        message: $t('tag_created', { values: { tag: newTag.value } }),
-        type: NotificationType.Info,
-      });
-
-      tags = await getAllTags();
-      isNewOpen = false;
-    }
   };
 
   const handleDelete = async () => {
@@ -116,11 +82,6 @@
     // navigate to parent
     await navigateToView(tag.parent ? tag.parent.path : '');
   };
-
-  const onsubmit = async (event: Event) => {
-    event.preventDefault();
-    await handleSubmit();
-  };
 </script>
 
 <UserPageLayout title={data.meta.title}>
@@ -167,57 +128,3 @@
     {/if}
   </section>
 </UserPageLayout>
-
-{#if isNewOpen}
-  <Modal size="small" title={$t('create_tag')} icon={mdiTag} onClose={handleCancel}>
-    <ModalBody>
-      <div class="text-immich-primary dark:text-immich-dark-primary">
-        <p class="text-sm dark:text-immich-dark-fg">
-          {$t('create_tag_description')}
-        </p>
-      </div>
-
-      <form {onsubmit} autocomplete="off" id="create-tag-form">
-        <div class="my-4 flex flex-col gap-2">
-          <SettingInputField
-            inputType={SettingInputFieldType.TEXT}
-            label={$t('tag').toUpperCase()}
-            bind:value={newTagValue}
-            required={true}
-            autofocus={true}
-          />
-        </div>
-      </form>
-    </ModalBody>
-
-    <ModalFooter>
-      <HStack fullWidth>
-        <Button color="secondary" fullWidth shape="round" onclick={() => handleCancel()}>{$t('cancel')}</Button>
-        <Button type="submit" fullWidth shape="round" form="create-tag-form">{$t('create')}</Button>
-      </HStack>
-    </ModalFooter>
-  </Modal>
-{/if}
-
-{#if isEditOpen}
-  <Modal title={$t('edit_tag')} icon={mdiTag} onClose={handleCancel}>
-    <ModalBody>
-      <form {onsubmit} autocomplete="off" id="edit-tag-form">
-        <div class="my-4 flex flex-col gap-2">
-          <SettingInputField
-            inputType={SettingInputFieldType.COLOR}
-            label={$t('color').toUpperCase()}
-            bind:value={newTagColor}
-          />
-        </div>
-      </form>
-    </ModalBody>
-
-    <ModalFooter>
-      <HStack fullWidth>
-        <Button color="secondary" fullWidth shape="round" onclick={() => handleCancel()}>{$t('cancel')}</Button>
-        <Button type="submit" fullWidth shape="round" form="edit-tag-form">{$t('save')}</Button>
-      </HStack>
-    </ModalFooter>
-  </Modal>
-{/if}