refactor: share modals (#18183)

web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -7,7 +7,6 @@
   import AlbumSummary from '$lib/components/album-page/album-summary.svelte';
   import AlbumTitle from '$lib/components/album-page/album-title.svelte';
   import ShareInfoModal from '$lib/components/album-page/share-info-modal.svelte';
-  import UserSelectionModal from '$lib/components/album-page/user-selection-modal.svelte';
   import ActivityStatus from '$lib/components/asset-viewer/activity-status.svelte';
   import ActivityViewer from '$lib/components/asset-viewer/activity-viewer.svelte';
   import Button from '$lib/components/elements/buttons/button.svelte';
@@ -29,7 +28,6 @@
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
-  import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
   import {
     NotificationType,
     notificationController,
@@ -37,12 +35,17 @@
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
   import { AlbumPageViewMode, AppRoute } from '$lib/constants';
   import { activityManager } from '$lib/managers/activity-manager.svelte';
+  import { modalManager } from '$lib/managers/modal-manager.svelte';
+  import AlbumShareModal from '$lib/modals/AlbumShareModal.svelte';
+  import QrCodeModal from '$lib/modals/QrCodeModal.svelte';
+  import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { AssetStore } from '$lib/stores/assets-store.svelte';
+  import { serverConfig } from '$lib/stores/server-config.store';
   import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { preferences, user } from '$lib/stores/user.store';
-  import { handlePromiseError } from '$lib/utils';
+  import { handlePromiseError, makeSharedLinkUrl } from '$lib/utils';
   import { confirmAlbumDelete } from '$lib/utils/album-utils';
   import { cancelMultiselect, downloadAlbum } from '$lib/utils/asset-utils';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
@@ -178,10 +181,6 @@
 
   const handleEscape = async () => {
     assetStore.suspendTransitions = true;
-    if (viewMode === AlbumPageViewMode.SELECT_USERS) {
-      viewMode = AlbumPageViewMode.VIEW;
-      return;
-    }
     if (viewMode === AlbumPageViewMode.SELECT_THUMBNAIL) {
       viewMode = AlbumPageViewMode.VIEW;
       return;
@@ -190,10 +189,6 @@
       await handleCloseSelectAssets();
       return;
     }
-    if (viewMode === AlbumPageViewMode.LINK_SHARING) {
-      viewMode = AlbumPageViewMode.VIEW;
-      return;
-    }
     if (viewMode === AlbumPageViewMode.OPTIONS) {
       viewMode = AlbumPageViewMode.VIEW;
       return;
@@ -423,6 +418,31 @@
   const currentAssetIntersection = $derived(
     viewMode === AlbumPageViewMode.SELECT_ASSETS ? timelineInteraction : assetInteraction,
   );
+
+  const handleShare = async () => {
+    const result = await modalManager.show(AlbumShareModal, { album });
+
+    switch (result?.action) {
+      case 'sharedLink': {
+        await handleShareLink();
+        return;
+      }
+
+      case 'sharedUsers': {
+        await handleAddUsers(result.data);
+        return;
+      }
+    }
+  };
+
+  const handleShareLink = async () => {
+    const sharedLink = await modalManager.show(SharedLinkCreateModal, { albumId: album.id });
+
+    if (sharedLink) {
+      const url = makeSharedLinkUrl($serverConfig.externalDomain, sharedLink.key);
+      await modalManager.show(QrCodeModal, { title: $t('view_link'), value: url });
+    }
+  };
 </script>
 
 <div class="flex overflow-hidden" use:scrollMemoryClearer={{ routeStartsWith: AppRoute.ALBUMS }}>
@@ -496,11 +516,7 @@
             {/if}
 
             {#if isOwned}
-              <CircleIconButton
-                title={$t('share')}
-                onclick={() => (viewMode = AlbumPageViewMode.SELECT_USERS)}
-                icon={mdiShareVariantOutline}
-              />
+              <CircleIconButton title={$t('share')} onclick={handleShare} icon={mdiShareVariantOutline} />
             {/if}
 
             <AlbumMap {album} />
@@ -530,12 +546,7 @@
             {/if}
 
             {#if isCreatingSharedAlbum && album.albumUsers.length === 0}
-              <Button
-                size="sm"
-                rounded="lg"
-                disabled={album.assetCount === 0}
-                onclick={() => (viewMode = AlbumPageViewMode.SELECT_USERS)}
-              >
+              <Button size="sm" rounded="lg" disabled={album.assetCount === 0} onclick={handleShare}>
                 {$t('share')}
               </Button>
             {/if}
@@ -619,7 +630,7 @@
                       color="gray"
                       size="20"
                       icon={mdiLink}
-                      onclick={() => (viewMode = AlbumPageViewMode.LINK_SHARING)}
+                      onclick={handleShareLink}
                     />
                   {/if}
 
@@ -651,7 +662,7 @@
                       color="gray"
                       size="20"
                       icon={mdiPlus}
-                      onclick={() => (viewMode = AlbumPageViewMode.SELECT_USERS)}
+                      onclick={handleShare}
                       title={$t('add_more_users')}
                     />
                   {/if}
@@ -714,18 +725,6 @@
     </div>
   {/if}
 </div>
-{#if viewMode === AlbumPageViewMode.SELECT_USERS}
-  <UserSelectionModal
-    {album}
-    onSelect={handleAddUsers}
-    onShare={() => (viewMode = AlbumPageViewMode.LINK_SHARING)}
-    onClose={() => (viewMode = AlbumPageViewMode.VIEW)}
-  />
-{/if}
-
-{#if viewMode === AlbumPageViewMode.LINK_SHARING}
-  <CreateSharedLinkModal albumId={album.id} onClose={() => (viewMode = AlbumPageViewMode.VIEW)} />
-{/if}
 
 {#if viewMode === AlbumPageViewMode.VIEW_USERS}
   <ShareInfoModal
@@ -749,7 +748,7 @@
     onRefreshAlbum={refreshAlbum}
     onClose={() => (viewMode = AlbumPageViewMode.VIEW)}
     onToggleEnabledActivity={handleToggleEnableActivity}
-    onShowSelectSharedUser={() => (viewMode = AlbumPageViewMode.SELECT_USERS)}
+    onShowSelectSharedUser={handleShare}
   />
 {/if}
 

web/src/routes/(user)/shared-links/[[id=id]]/+page.svelte

@@ -3,7 +3,6 @@
   import { page } from '$app/state';
   import GroupTab from '$lib/components/elements/group-tab.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
   import { dialogController } from '$lib/components/shared-components/dialog/dialog';
   import {
     notificationController,
@@ -11,6 +10,7 @@
   } from '$lib/components/shared-components/notification/notification';
   import SharedLinkCard from '$lib/components/sharedlinks-page/shared-link-card.svelte';
   import { AppRoute } from '$lib/constants';
+  import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { getAllSharedLinks, removeSharedLink, SharedLinkType, type SharedLinkResponseDto } from '@immich/sdk';
   import { onMount } from 'svelte';
@@ -113,7 +113,7 @@
     {/if}
 
     {#if sharedLink}
-      <CreateSharedLinkModal editingLink={sharedLink} onClose={handleEditDone} />
+      <SharedLinkCreateModal editingLink={sharedLink} onClose={handleEditDone} />
     {/if}
   </div>
 </UserPageLayout>