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>