refactor: user page modals (#18147)

web/src/lib/components/user-settings-page/partner-selection-modal.svelte

@@ -1,79 +0,0 @@
-<script lang="ts">
-  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
-  import { getPartners, PartnerDirection, searchUsers, type UserResponseDto } from '@immich/sdk';
-  import { onMount } from 'svelte';
-  import { t } from 'svelte-i18n';
-  import UserAvatar from '../shared-components/user-avatar.svelte';
-  import { Button } from '@immich/ui';
-
-  interface Props {
-    user: UserResponseDto;
-    onClose: () => void;
-    onAddUsers: (users: UserResponseDto[]) => void;
-  }
-
-  let { user, onClose, onAddUsers }: Props = $props();
-
-  let availableUsers: UserResponseDto[] = $state([]);
-  let selectedUsers: UserResponseDto[] = $state([]);
-
-  onMount(async () => {
-    let users = await searchUsers();
-
-    // remove current user
-    users = users.filter((_user) => _user.id !== user.id);
-
-    // exclude partners from the list of users available for selection
-    const partners = await getPartners({ direction: PartnerDirection.SharedBy });
-    const partnerIds = new Set(partners.map((partner) => partner.id));
-    availableUsers = users.filter((user) => !partnerIds.has(user.id));
-  });
-
-  const selectUser = (user: UserResponseDto) => {
-    selectedUsers = selectedUsers.includes(user)
-      ? selectedUsers.filter((selectedUser) => selectedUser.id !== user.id)
-      : [...selectedUsers, user];
-  };
-</script>
-
-<FullScreenModal title={$t('add_partner')} showLogo {onClose}>
-  <div class="immich-scrollbar max-h-[300px] overflow-y-auto">
-    {#if availableUsers.length > 0}
-      {#each availableUsers as user (user.id)}
-        <button
-          type="button"
-          onclick={() => selectUser(user)}
-          class="flex w-full place-items-center gap-4 px-5 py-4 transition-all hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl"
-        >
-          {#if selectedUsers.includes(user)}
-            <span
-              class="flex h-12 w-12 place-content-center place-items-center rounded-full border bg-immich-primary text-3xl text-white dark:border-immich-dark-gray dark:bg-immich-dark-primary dark:text-immich-dark-bg"
-              >✓</span
-            >
-          {:else}
-            <UserAvatar {user} size="lg" />
-          {/if}
-
-          <div class="text-start">
-            <p class="text-immich-fg dark:text-immich-dark-fg">
-              {user.name}
-            </p>
-            <p class="text-xs">
-              {user.email}
-            </p>
-          </div>
-        </button>
-      {/each}
-    {:else}
-      <p class="py-5 text-sm">
-        {$t('photo_shared_all_users')}
-      </p>
-    {/if}
-
-    {#if selectedUsers.length > 0}
-      <div class="pt-5">
-        <Button shape="round" fullWidth onclick={() => onAddUsers(selectedUsers)}>{$t('add')}</Button>
-      </div>
-    {/if}
-  </div>
-</FullScreenModal>

web/src/lib/components/user-settings-page/partner-settings.svelte

@@ -2,6 +2,8 @@
   import { dialogController } from '$lib/components/shared-components/dialog/dialog';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
+  import { modalManager } from '$lib/managers/modal-manager.svelte';
+  import PartnerSelectionModal from '$lib/modals/PartnerSelectionModal.svelte';
   import {
     createPartner,
     getPartners,
@@ -18,7 +20,6 @@
   import { handleError } from '../../utils/handle-error';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import Icon from '../elements/icon.svelte';
-  import PartnerSelectionModal from './partner-selection-modal.svelte';
 
   interface PartnerSharing {
     user: UserResponseDto;
@@ -33,8 +34,6 @@
 
   let { user }: Props = $props();
 
-  let createPartnerFlag = $state(false);
-  // let removePartnerDto: PartnerResponseDto | null = null;
   let partners: Array<PartnerSharing> = $state([]);
 
   onMount(async () => {
@@ -99,14 +98,19 @@
     }
   };
 
-  const handleCreatePartners = async (users: UserResponseDto[]) => {
+  const handleCreatePartners = async () => {
+    const users = await modalManager.open(PartnerSelectionModal, { user });
+
+    if (!users) {
+      return;
+    }
+
     try {
       for (const user of users) {
         await createPartner({ id: user.id });
       }
 
       await refreshPartners();
-      createPartnerFlag = false;
     } catch (error) {
       handleError(error, $t('errors.unable_to_add_partners'));
     }
@@ -189,10 +193,6 @@
   {/if}
 
   <div class="flex justify-end mt-5">
-    <Button shape="round" size="small" onclick={() => (createPartnerFlag = true)}>{$t('add_partner')}</Button>
+    <Button shape="round" size="small" onclick={() => handleCreatePartners()}>{$t('add_partner')}</Button>
   </div>
 </section>
-
-{#if createPartnerFlag}
-  <PartnerSelectionModal {user} onClose={() => (createPartnerFlag = false)} onAddUsers={handleCreatePartners} />
-{/if}

web/src/lib/components/user-settings-page/user-api-key-list.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { dialogController } from '$lib/components/shared-components/dialog/dialog';
+  import { modalManager } from '$lib/managers/modal-manager.svelte';
+  import ApiKeyModal from '$lib/modals/ApiKeyModal.svelte';
+  import ApiKeySecretModal from '$lib/modals/ApiKeySecretModal.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import {
     createApiKey,
@@ -15,8 +18,6 @@
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
   import { handleError } from '../../utils/handle-error';
-  import APIKeyForm from '../forms/api-key-form.svelte';
-  import APIKeySecret from '../forms/api-key-secret.svelte';
   import { notificationController, NotificationType } from '../shared-components/notification/notification';
 
   interface Props {
@@ -25,10 +26,6 @@
 
   let { keys = $bindable() }: Props = $props();
 
-  let newKey: { name: string } | null = $state(null);
-  let editKey: ApiKeyResponseDto | null = $state(null);
-  let secret = $state('');
-
   const format: Intl.DateTimeFormatOptions = {
     month: 'short',
     day: 'numeric',
@@ -39,30 +36,46 @@
     keys = await getApiKeys();
   }
 
-  const handleCreate = async ({ name }: { name: string }) => {
-    try {
-      const data = await createApiKey({
-        apiKeyCreateDto: {
-          name,
-          permissions: [Permission.All],
-        },
-      });
-      secret = data.secret;
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_create_api_key'));
-    } finally {
-      await refreshKeys();
-      newKey = null;
-    }
-  };
+  const handleCreate = async () => {
+    const result = await modalManager.open(ApiKeyModal, {
+      title: $t('new_api_key'),
+      apiKey: { name: 'API Key' },
+      submitText: $t('create'),
+    });
 
-  const handleUpdate = async (detail: Partial<ApiKeyResponseDto>) => {
-    if (!editKey || !detail.name) {
+    if (!result) {
       return;
     }
 
     try {
-      await updateApiKey({ id: editKey.id, apiKeyUpdateDto: { name: detail.name } });
+      const { secret } = await createApiKey({
+        apiKeyCreateDto: {
+          name: result.name,
+          permissions: [Permission.All],
+        },
+      });
+
+      await modalManager.open(ApiKeySecretModal, { secret });
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_create_api_key'));
+    } finally {
+      await refreshKeys();
+    }
+  };
+
+  const handleUpdate = async (key: ApiKeyResponseDto) => {
+    const result = await modalManager.open(ApiKeyModal, {
+      title: $t('api_key'),
+      submitText: $t('save'),
+      apiKey: key,
+    });
+
+    if (!result) {
+      return;
+    }
+
+    try {
+      await updateApiKey({ id: key.id, apiKeyUpdateDto: { name: result.name } });
       notificationController.show({
         message: $t('saved_api_key'),
         type: NotificationType.Info,
@@ -71,7 +84,6 @@
       handleError(error, $t('errors.unable_to_save_api_key'));
     } finally {
       await refreshKeys();
-      editKey = null;
     }
   };
 
@@ -95,34 +107,10 @@
   };
 </script>
 
-{#if newKey}
-  <APIKeyForm
-    title={$t('new_api_key')}
-    submitText={$t('create')}
-    apiKey={newKey}
-    onSubmit={(key) => handleCreate(key)}
-    onCancel={() => (newKey = null)}
-  />
-{/if}
-
-{#if secret}
-  <APIKeySecret {secret} onDone={() => (secret = '')} />
-{/if}
-
-{#if editKey}
-  <APIKeyForm
-    title={$t('api_key')}
-    submitText={$t('save')}
-    apiKey={editKey}
-    onSubmit={(key) => handleUpdate(key)}
-    onCancel={() => (editKey = null)}
-  />
-{/if}
-
 <section class="my-4">
   <div class="flex flex-col gap-2" in:fade={{ duration: 500 }}>
     <div class="mb-2 flex justify-end">
-      <Button shape="round" size="small" onclick={() => (newKey = { name: $t('api_key') })}>{$t('new_api_key')}</Button>
+      <Button shape="round" size="small" onclick={() => handleCreate()}>{$t('new_api_key')}</Button>
     </div>
 
     {#if keys.length > 0}
@@ -153,7 +141,7 @@
                   icon={mdiPencilOutline}
                   title={$t('edit_key')}
                   size="16"
-                  onclick={() => (editKey = key)}
+                  onclick={() => handleUpdate(key)}
                 />
                 <CircleIconButton
                   color="primary"