chore: Refactor external library modals (#18655)

web/src/lib/modals/LibraryImportPathModal.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { mdiFolderSync } from '@mdi/js';
+  import { onMount } from 'svelte';
+  import { t } from 'svelte-i18n';
+
+  interface Props {
+    importPath: string | null;
+    importPaths?: string[];
+    title?: string;
+    cancelText?: string;
+    submitText?: string;
+    isEditing?: boolean;
+    onClose: (data?: { action: 'delete' } | { action: 'submit'; importPath: string | null }) => void;
+  }
+
+  let {
+    importPath = $bindable(),
+    importPaths = $bindable([]),
+    title = $t('import_path'),
+    cancelText = $t('cancel'),
+    submitText = $t('save'),
+    isEditing = false,
+    onClose,
+  }: Props = $props();
+
+  onMount(() => {
+    if (isEditing) {
+      importPaths = importPaths.filter((path) => path !== importPath);
+    }
+  });
+
+  let isDuplicate = $derived(importPath !== null && importPaths.includes(importPath));
+  let canSubmit = $derived(importPath !== '' && importPath !== null && !importPaths.includes(importPath));
+
+  const onsubmit = (event: Event) => {
+    event.preventDefault();
+    if (canSubmit) {
+      onClose({ action: 'submit', importPath });
+    }
+  };
+</script>
+
+<Modal {title} icon={mdiFolderSync} {onClose} size="small">
+  <ModalBody>
+    <form {onsubmit} autocomplete="off" id="library-import-path-form">
+      <p class="py-5 text-sm">{$t('admin.library_import_path_description')}</p>
+
+      <div class="my-4 flex flex-col gap-2">
+        <label class="immich-form-label" for="path">{$t('path')}</label>
+        <input class="immich-form-input" id="path" name="path" type="text" bind:value={importPath} />
+      </div>
+
+      <div class="mt-8 flex w-full gap-4">
+        {#if isDuplicate}
+          <p class="text-red-500 text-sm">{$t('errors.import_path_already_exists')}</p>
+        {/if}
+      </div>
+    </form>
+  </ModalBody>
+
+  <ModalFooter>
+    <div class="flex gap-2 w-full">
+      <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{cancelText}</Button>
+      {#if isEditing}
+        <Button shape="round" color="danger" fullWidth onclick={() => onClose({ action: 'delete' })}>
+          {$t('delete')}
+        </Button>
+      {/if}
+      <Button shape="round" type="submit" disabled={!canSubmit} fullWidth form="library-import-path-form">
+        {submitText}
+      </Button>
+    </div>
+  </ModalFooter>
+</Modal>

web/src/lib/modals/LibraryRenameModal.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import type { LibraryResponseDto } from '@immich/sdk';
+  import { Button, Field, Input, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { mdiRenameOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  interface Props {
+    library: Partial<LibraryResponseDto>;
+    onClose: (library?: Partial<LibraryResponseDto>) => void;
+  }
+
+  let { library, onClose }: Props = $props();
+
+  let newName = $state(library.name);
+
+  const onsubmit = (event: Event) => {
+    event.preventDefault();
+    onClose({ ...library, name: newName });
+  };
+</script>
+
+<Modal icon={mdiRenameOutline} title={$t('rename')} {onClose} size="small">
+  <ModalBody>
+    <form {onsubmit} autocomplete="off" id="rename-library-form">
+      <Field label={$t('name')}>
+        <Input bind:value={newName} />
+      </Field>
+    </form>
+  </ModalBody>
+
+  <ModalFooter>
+    <div class="flex gap-2 w-full">
+      <Button shape="round" fullWidth color="secondary" onclick={() => onClose()}>{$t('cancel')}</Button>
+      <Button shape="round" fullWidth type="submit" form="rename-library-form">{$t('save')}</Button>
+    </div>
+  </ModalFooter>
+</Modal>

web/src/lib/modals/LibraryUserPickerModal.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
+  import { user } from '$lib/stores/user.store';
+  import { searchUsersAdmin } from '@immich/sdk';
+  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { mdiFolderSync } from '@mdi/js';
+  import { onMount } from 'svelte';
+  import { t } from 'svelte-i18n';
+
+  interface Props {
+    onClose: (ownerId?: string) => void;
+  }
+
+  let { onClose }: Props = $props();
+
+  let ownerId: string = $state($user.id);
+
+  let userOptions: { value: string; text: string }[] = $state([]);
+
+  onMount(async () => {
+    const users = await searchUsersAdmin({});
+    userOptions = users.map((user) => ({ value: user.id, text: user.name }));
+  });
+
+  const onsubmit = (event: Event) => {
+    event.preventDefault();
+    onClose(ownerId);
+  };
+</script>
+
+<Modal title={$t('select_library_owner')} icon={mdiFolderSync} {onClose} size="small">
+  <ModalBody>
+    <form {onsubmit} autocomplete="off" id="select-library-owner-form">
+      <p class="p-5 text-sm">{$t('admin.note_cannot_be_changed_later')}</p>
+
+      <SettingSelect bind:value={ownerId} options={userOptions} name="user" />
+    </form>
+  </ModalBody>
+
+  <ModalFooter>
+    <div class="flex gap-2 w-full">
+      <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
+      <Button shape="round" type="submit" fullWidth form="select-library-owner-form">{$t('create')}</Button>
+    </div>
+  </ModalFooter>
+</Modal>