From 2d816e89ad819f7f9ddefe9476ab1e439763ed22 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Wed, 17 Sep 2025 17:23:42 -0400
Subject: [PATCH] refactor(web): prefer modal manager (#22152)

---
 web/src/lib/modals/AlbumShareModal.svelte | 214 +++++++++++-----------
 1 file changed, 106 insertions(+), 108 deletions(-)

diff --git a/web/src/lib/modals/AlbumShareModal.svelte b/web/src/lib/modals/AlbumShareModal.svelte
index 6bde18000b..7aa59cbd22 100644
--- a/web/src/lib/modals/AlbumShareModal.svelte
+++ b/web/src/lib/modals/AlbumShareModal.svelte
@@ -13,7 +13,7 @@
     type SharedLinkResponseDto,
     type UserResponseDto,
   } from '@immich/sdk';
-  import { Button, Icon, Link, Modal, ModalBody, Stack, Text } from '@immich/ui';
+  import { Button, Icon, Link, Modal, ModalBody, modalManager, Stack, Text } from '@immich/ui';
   import { mdiCheck, mdiEye, mdiLink, mdiPencil } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -29,9 +29,11 @@
   let users: UserResponseDto[] = $state([]);
   let selectedUsers: Record<string, { user: UserResponseDto; role: AlbumUserRole }> = $state({});
 
-  let sharedLinkUrl = $state('');
-  const handleViewQrCode = (sharedLink: SharedLinkResponseDto) => {
-    sharedLinkUrl = makeSharedLinkUrl(sharedLink);
+  const handleViewQrCode = async (sharedLink: SharedLinkResponseDto) => {
+    await modalManager.show(QrCodeModal, {
+      title: $t('view_link'),
+      value: makeSharedLinkUrl(sharedLink),
+    });
   };
 
   const roleOptions: Array<{ title: string; value: AlbumUserRole | 'none'; icon?: string }> = [
@@ -71,25 +73,64 @@
   };
 </script>
 
-{#if sharedLinkUrl}
-  <QrCodeModal title={$t('view_link')} onClose={() => (sharedLinkUrl = '')} value={sharedLinkUrl} />
-{:else}
-  <Modal size="small" title={$t('share')} {onClose}>
-    <ModalBody>
-      {#if Object.keys(selectedUsers).length > 0}
-        <div class="mb-2 py-2 sticky">
-          <p class="text-xs font-medium">{$t('selected')}</p>
-          <div class="my-2">
-            {#each Object.values(selectedUsers) as { user } (user.id)}
-              {#key user.id}
-                <div class="flex place-items-center gap-4 p-4">
-                  <div
-                    class="flex h-10 w-10 items-center justify-center rounded-full border bg-green-600 text-3xl text-white"
-                  >
-                    <Icon icon={mdiCheck} size="24" />
-                  </div>
+<Modal size="small" title={$t('share')} {onClose}>
+  <ModalBody>
+    {#if Object.keys(selectedUsers).length > 0}
+      <div class="mb-2 py-2 sticky">
+        <p class="text-xs font-medium">{$t('selected')}</p>
+        <div class="my-2">
+          {#each Object.values(selectedUsers) as { user } (user.id)}
+            {#key user.id}
+              <div class="flex place-items-center gap-4 p-4">
+                <div
+                  class="flex h-10 w-10 items-center justify-center rounded-full border bg-green-600 text-3xl text-white"
+                >
+                  <Icon icon={mdiCheck} size="24" />
+                </div>
 
-                  <!-- <UserAvatar {user} size="md" /> -->
+                <!-- <UserAvatar {user} size="md" /> -->
+                <div class="text-start grow">
+                  <p class="text-immich-fg dark:text-immich-dark-fg">
+                    {user.name}
+                  </p>
+                  <p class="text-xs">
+                    {user.email}
+                  </p>
+                </div>
+
+                <Dropdown
+                  title={$t('role')}
+                  options={roleOptions}
+                  render={({ title, icon }) => ({ title, icon })}
+                  onSelect={({ value }) => handleChangeRole(user, value)}
+                />
+              </div>
+            {/key}
+          {/each}
+        </div>
+      </div>
+    {/if}
+
+    {#if users.length + Object.keys(selectedUsers).length === 0}
+      <p class="p-5 text-sm">
+        {$t('album_share_no_users')}
+      </p>
+    {/if}
+
+    <div class="immich-scrollbar max-h-[500px] overflow-y-auto">
+      {#if users.length > 0 && users.length !== Object.keys(selectedUsers).length}
+        <Text>{$t('users')}</Text>
+
+        <div class="my-2">
+          {#each users as user (user.id)}
+            {#if !Object.keys(selectedUsers).includes(user.id)}
+              <div class="flex place-items-center transition-all hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl">
+                <button
+                  type="button"
+                  onclick={() => handleToggle(user)}
+                  class="flex w-full place-items-center gap-4 p-4"
+                >
+                  <UserAvatar {user} size="md" />
                   <div class="text-start grow">
                     <p class="text-immich-fg dark:text-immich-dark-fg">
                       {user.name}
@@ -98,96 +139,53 @@
                       {user.email}
                     </p>
                   </div>
-
-                  <Dropdown
-                    title={$t('role')}
-                    options={roleOptions}
-                    render={({ title, icon }) => ({ title, icon })}
-                    onSelect={({ value }) => handleChangeRole(user, value)}
-                  />
-                </div>
-              {/key}
-            {/each}
-          </div>
+                </button>
+              </div>
+            {/if}
+          {/each}
         </div>
       {/if}
+    </div>
 
-      {#if users.length + Object.keys(selectedUsers).length === 0}
-        <p class="p-5 text-sm">
-          {$t('album_share_no_users')}
-        </p>
-      {/if}
-
-      <div class="immich-scrollbar max-h-[500px] overflow-y-auto">
-        {#if users.length > 0 && users.length !== Object.keys(selectedUsers).length}
-          <Text>{$t('users')}</Text>
-
-          <div class="my-2">
-            {#each users as user (user.id)}
-              {#if !Object.keys(selectedUsers).includes(user.id)}
-                <div class="flex place-items-center transition-all hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl">
-                  <button
-                    type="button"
-                    onclick={() => handleToggle(user)}
-                    class="flex w-full place-items-center gap-4 p-4"
-                  >
-                    <UserAvatar {user} size="md" />
-                    <div class="text-start grow">
-                      <p class="text-immich-fg dark:text-immich-dark-fg">
-                        {user.name}
-                      </p>
-                      <p class="text-xs">
-                        {user.email}
-                      </p>
-                    </div>
-                  </button>
-                </div>
-              {/if}
-            {/each}
-          </div>
-        {/if}
-      </div>
-
-      {#if users.length > 0}
-        <div class="py-3">
-          <Button
-            size="small"
-            fullWidth
-            shape="round"
-            disabled={Object.keys(selectedUsers).length === 0}
-            onclick={() =>
-              onClose({
-                action: 'sharedUsers',
-                data: Object.values(selectedUsers).map(({ user, ...rest }) => ({ userId: user.id, ...rest })),
-              })}>{$t('add')}</Button
-          >
-        </div>
-      {/if}
-
-      <hr class="my-4" />
-
-      <Stack gap={6}>
-        {#if sharedLinks.length > 0}
-          <div class="flex justify-between items-center">
-            <Text>{$t('shared_links')}</Text>
-            <Link href={AppRoute.SHARED_LINKS} onclick={() => onClose()} class="text-sm">{$t('view_all')}</Link>
-          </div>
-
-          <Stack gap={4}>
-            {#each sharedLinks as sharedLink (sharedLink.id)}
-              <AlbumSharedLink {album} {sharedLink} onViewQrCode={() => handleViewQrCode(sharedLink)} />
-            {/each}
-          </Stack>
-        {/if}
-
+    {#if users.length > 0}
+      <div class="py-3">
         <Button
-          leadingIcon={mdiLink}
           size="small"
-          shape="round"
           fullWidth
-          onclick={() => onClose({ action: 'sharedLink' })}>{$t('create_link')}</Button
+          shape="round"
+          disabled={Object.keys(selectedUsers).length === 0}
+          onclick={() =>
+            onClose({
+              action: 'sharedUsers',
+              data: Object.values(selectedUsers).map(({ user, ...rest }) => ({ userId: user.id, ...rest })),
+            })}>{$t('add')}</Button
         >
-      </Stack>
-    </ModalBody>
-  </Modal>
-{/if}
+      </div>
+    {/if}
+
+    <hr class="my-4" />
+
+    <Stack gap={6}>
+      {#if sharedLinks.length > 0}
+        <div class="flex justify-between items-center">
+          <Text>{$t('shared_links')}</Text>
+          <Link href={AppRoute.SHARED_LINKS} onclick={() => onClose()} class="text-sm">{$t('view_all')}</Link>
+        </div>
+
+        <Stack gap={4}>
+          {#each sharedLinks as sharedLink (sharedLink.id)}
+            <AlbumSharedLink {album} {sharedLink} onViewQrCode={() => handleViewQrCode(sharedLink)} />
+          {/each}
+        </Stack>
+      {/if}
+
+      <Button
+        leadingIcon={mdiLink}
+        size="small"
+        shape="round"
+        fullWidth
+        onclick={() => onClose({ action: 'sharedLink' })}>{$t('create_link')}</Button
+      >
+    </Stack>
+  </ModalBody>
+</Modal>