refactor: user page modals (#18147)

web/src/lib/modals/ApiKeyModal.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { mdiKeyVariant } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  interface Props {
+    apiKey: { name: string };
+    title: string;
+    cancelText?: string;
+    submitText?: string;
+    onClose: (apiKey?: { name: string }) => void;
+  }
+
+  let { apiKey = $bindable(), title, cancelText = $t('cancel'), submitText = $t('save'), onClose }: Props = $props();
+
+  const handleSubmit = () => {
+    if (apiKey.name) {
+      onClose({ name: apiKey.name });
+    } else {
+      notificationController.show({
+        message: $t('api_key_empty'),
+        type: NotificationType.Warning,
+      });
+    }
+  };
+
+  const onsubmit = (event: Event) => {
+    event.preventDefault();
+    handleSubmit();
+  };
+</script>
+
+<Modal {title} icon={mdiKeyVariant} {onClose} size="small">
+  <ModalBody>
+    <form {onsubmit} autocomplete="off" id="api-key-form">
+      <div class="mb-4 flex flex-col gap-2">
+        <label class="immich-form-label" for="name">{$t('name')}</label>
+        <input class="immich-form-input" id="name" name="name" type="text" bind:value={apiKey.name} />
+      </div>
+    </form>
+  </ModalBody>
+
+  <ModalFooter>
+    <div class="flex gap-3 w-full">
+      <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{cancelText}</Button>
+      <Button shape="round" type="submit" fullWidth form="api-key-form">{submitText}</Button>
+    </div>
+  </ModalFooter>
+</Modal>

web/src/lib/modals/ApiKeySecretModal.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { copyToClipboard } from '$lib/utils';
+  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { mdiKeyVariant } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  interface Props {
+    secret?: string;
+    onClose: () => void;
+  }
+
+  let { secret = '', onClose }: Props = $props();
+</script>
+
+<Modal title={$t('api_key')} icon={mdiKeyVariant} {onClose} size="small">
+  <ModalBody>
+    <div class="text-immich-primary dark:text-immich-dark-primary">
+      <p class="text-sm dark:text-immich-dark-fg">
+        {$t('api_key_description')}
+      </p>
+    </div>
+
+    <div class="my-4 flex flex-col gap-2">
+      <!-- <label class="immich-form-label" for="secret">{ $t("api_key") }</label> -->
+      <textarea class="immich-form-input" id="secret" name="secret" readonly={true} value={secret}></textarea>
+    </div>
+  </ModalBody>
+
+  <ModalFooter>
+    <div class="flex gap-3 w-full">
+      <Button shape="round" onclick={() => copyToClipboard(secret)} fullWidth>{$t('copy_to_clipboard')}</Button>
+      <Button shape="round" onclick={onClose} fullWidth>{$t('done')}</Button>
+    </div>
+  </ModalFooter>
+</Modal>

web/src/lib/modals/PartnerSelectionModal.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
+  import { getPartners, PartnerDirection, searchUsers, type UserResponseDto } from '@immich/sdk';
+  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { onMount } from 'svelte';
+  import { t } from 'svelte-i18n';
+
+  interface Props {
+    user: UserResponseDto;
+    onClose: (users?: UserResponseDto[]) => void;
+  }
+
+  let { user, onClose }: 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>
+
+<Modal title={$t('add_partner')} {onClose} size="small">
+  <ModalBody>
+    <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}
+
+      <ModalFooter>
+        {#if selectedUsers.length > 0}
+          <Button shape="round" fullWidth onclick={() => onClose(selectedUsers)}>{$t('add')}</Button>
+        {/if}
+      </ModalFooter>
+    </div>
+  </ModalBody>
+</Modal>