feat: context menus

pnpm-lock.yaml

@@ -684,8 +684,8 @@ importers:
         specifier: file:../open-api/typescript-sdk
         version: link:../open-api/typescript-sdk
       '@immich/ui':
-        specifier: ^0.40.2
+        specifier: ^0.42.2
-        version: 0.40.2(@internationalized/date@3.8.2)(svelte@5.41.3)
+        version: 0.42.2(@internationalized/date@3.8.2)(svelte@5.41.3)
       '@mapbox/mapbox-gl-rtl-text':
         specifier: 0.2.3
         version: 0.2.3(mapbox-gl@1.13.3)
@@ -2776,13 +2776,13 @@ packages:
   '@immich/justified-layout-wasm@0.4.3':
     resolution: {integrity: sha512-fpcQ7zPhP3Cp1bEXhONVYSUeIANa2uzaQFGKufUZQo5FO7aFT77szTVChhlCy4XaVy5R4ZvgSkA/1TJmeORz7Q==}
 
-  '@immich/svelte-markdown-preprocess@0.0.1':
+  '@immich/svelte-markdown-preprocess@0.1.0':
-    resolution: {integrity: sha512-1vWoT4LO6fEyxrKwLKiNFECEkRVbuvpYPDvA7LavObTt2ijnonPYBDgfTwCPTofjxcocIGYUayv3CzgOzFiMOA==}
+    resolution: {integrity: sha512-jgSOJEGLPKEXQCNRI4r4YUayeM2b0ZYLdzgKGl891jZBhOQIetlY7rU44kPpV1AA3/8wGDwNFKduIQZZ/qJYzg==}
     peerDependencies:
       svelte: ^5.0.0
 
-  '@immich/ui@0.40.2':
+  '@immich/ui@0.42.2':
-    resolution: {integrity: sha512-6NS4yVx0VoyH+AaM7TISDaoIzZe3RuDOi6xMkK2LrOPQbKwTuheD2iagxsRYzUtJ9IPrmCPrwRBc9Jq5BkvmBQ==}
+    resolution: {integrity: sha512-4+Kwjqtf4tU6orW2l/1njHB2nRuw2PwEtLJyt2GYv8UBcp1Sxi0Qpwh5b0T0TIyZlDJatggY+yPl4cRQojI4oA==}
     peerDependencies:
       svelte: ^5.0.0
 
@@ -14343,13 +14343,13 @@ snapshots:
 
   '@immich/justified-layout-wasm@0.4.3': {}
 
-  '@immich/svelte-markdown-preprocess@0.0.1(svelte@5.41.3)':
+  '@immich/svelte-markdown-preprocess@0.1.0(svelte@5.41.3)':
     dependencies:
       svelte: 5.41.3
 
-  '@immich/ui@0.40.2(@internationalized/date@3.8.2)(svelte@5.41.3)':
+  '@immich/ui@0.42.2(@internationalized/date@3.8.2)(svelte@5.41.3)':
     dependencies:
-      '@immich/svelte-markdown-preprocess': 0.0.1(svelte@5.41.3)
+      '@immich/svelte-markdown-preprocess': 0.1.0(svelte@5.41.3)
       '@mdi/js': 7.4.47
       bits-ui: 2.9.8(@internationalized/date@3.8.2)(svelte@5.41.3)
       luxon: 3.7.2

web/package.json

@@ -28,7 +28,7 @@
     "@formatjs/icu-messageformat-parser": "^2.9.8",
     "@immich/justified-layout-wasm": "^0.4.3",
     "@immich/sdk": "file:../open-api/typescript-sdk",
-    "@immich/ui": "^0.40.2",
+    "@immich/ui": "^0.42.2",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.11.5",

web/src/lib/components/ActionButton.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { IconButton, type MenuItem } from '@immich/ui';
+
+  type Props = {
+    action: MenuItem;
+  };
+
+  const { action }: Props = $props();
+  const { title, icon, onSelect } = $derived(action);
+</script>
+
+<IconButton
+  shape="round"
+  color="secondary"
+  variant="ghost"
+  {icon}
+  aria-label={title}
+  onclick={(event: Event) => onSelect?.({ event, item: action })}
+/>

web/src/lib/components/album-page/album-card-group.svelte

@@ -70,14 +70,7 @@
           animate:flip={{ duration: 400 }}
           oncontextmenu={(event) => oncontextmenu(event, album)}
         >
-          <AlbumCard
+          <AlbumCard {album} {showOwner} {showDateRange} {showItemCount} preload={index < 20} />
-            {album}
-            {showOwner}
-            {showDateRange}
-            {showItemCount}
-            preload={index < 20}
-            onShowContextMenu={onShowContextMenu ? (position) => showContextMenu(position, album) : undefined}
-          />
         </a>
       {/each}
     </div>

web/src/lib/components/album-page/album-card.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
+  import ActionButton from '$lib/components/ActionButton.svelte';
   import AlbumCover from '$lib/components/album-page/album-cover.svelte';
+  import { getAlbumActions } from '$lib/services/album.service';
   import { user } from '$lib/stores/user.store';
-  import { getContextMenuPositionFromEvent, type ContextMenuPosition } from '$lib/utils/context-menu';
   import { getShortDateRange } from '$lib/utils/date-time';
   import type { AlbumResponseDto } from '@immich/sdk';
-  import { IconButton } from '@immich/ui';
-  import { mdiDotsVertical } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -14,47 +13,24 @@
     showDateRange?: boolean;
     showItemCount?: boolean;
     preload?: boolean;
-    onShowContextMenu?: ((position: ContextMenuPosition) => unknown) | undefined;
   }
 
-  let {
+  let { album, showOwner = false, showDateRange = false, showItemCount = false, preload = false }: Props = $props();
-    album,
-    showOwner = false,
-    showDateRange = false,
-    showItemCount = false,
-    preload = false,
-    onShowContextMenu = undefined,
-  }: Props = $props();
 
-  const showAlbumContextMenu = (e: MouseEvent) => {
+  const AlbumActions = $derived(getAlbumActions($t, album));
-    e.stopPropagation();
-    e.preventDefault();
-    onShowContextMenu?.(getContextMenuPositionFromEvent(e));
-  };
 </script>
 
 <div
   class="group relative rounded-2xl border border-transparent p-5 hover:bg-gray-100 hover:border-gray-200 dark:hover:border-gray-800 dark:hover:bg-gray-900"
   data-testid="album-card"
 >
-  {#if onShowContextMenu}
+  <div
-    <div
+    id="icon-{album.id}"
-      id="icon-{album.id}"
+    class="absolute end-6 top-6 opacity-0 group-hover:opacity-100 focus-within:opacity-100"
-      class="absolute end-6 top-6 opacity-0 group-hover:opacity-100 focus-within:opacity-100"
+    data-testid="context-button-parent"
-      data-testid="context-button-parent"
+  >
-    >
+    <ActionButton action={AlbumActions.ContextMenu} />
-      <IconButton
+  </div>
-        color="secondary"
-        aria-label={$t('show_album_options')}
-        icon={mdiDotsVertical}
-        shape="round"
-        variant="filled"
-        size="medium"
-        class="icon-white-drop-shadow"
-        onclick={showAlbumContextMenu}
-      />
-    </div>
-  {/if}
 
   <AlbumCover {album} {preload} class="transition-all duration-300 hover:shadow-lg" />
 

web/src/lib/components/album-page/album-shared-link.svelte

@@ -1,19 +1,20 @@
 <script lang="ts">
-  import SharedLinkCopy from '$lib/components/sharedlinks-page/actions/shared-link-copy.svelte';
+  import ActionButton from '$lib/components/ActionButton.svelte';
+  import { getSharedLinkActions } from '$lib/services/shared-link.service';
   import { locale } from '$lib/stores/preferences.store';
   import type { AlbumResponseDto, SharedLinkResponseDto } from '@immich/sdk';
-  import { IconButton, Text } from '@immich/ui';
+  import { Text } from '@immich/ui';
-  import { mdiQrcode } from '@mdi/js';
   import { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
 
   type Props = {
     album: AlbumResponseDto;
     sharedLink: SharedLinkResponseDto;
-    onViewQrCode: () => void;
   };
 
-  const { album, sharedLink, onViewQrCode }: Props = $props();
+  const { album, sharedLink }: Props = $props();
+
+  const SharedLinkActions = $derived(getSharedLinkActions($t, sharedLink));
 
   const getShareProperties = () =>
     [
@@ -40,14 +41,7 @@
     <Text size="tiny" color="muted">{getShareProperties()}</Text>
   </div>
   <div class="flex">
-    <IconButton
+    <ActionButton action={SharedLinkActions.ViewQrCode} />
-      aria-label={$t('view_qr_code')}
+    <ActionButton action={SharedLinkActions.Copy} />
-      shape="round"
-      color="secondary"
-      variant="ghost"
-      icon={mdiQrcode}
-      onclick={onViewQrCode}
-    />
-    <SharedLinkCopy link={sharedLink} />
   </div>
 </div>

web/src/lib/components/album-page/albums-list.svelte

@@ -1,16 +1,10 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
-  import { resolve } from '$app/paths';
   import AlbumCardGroup from '$lib/components/album-page/album-card-group.svelte';
   import AlbumsTable from '$lib/components/album-page/albums-table.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import RightClickContextMenu from '$lib/components/shared-components/context-menu/right-click-context-menu.svelte';
-  import ToastAction from '$lib/components/ToastAction.svelte';
+  import { eventManager } from '$lib/managers/event-manager.svelte';
-  import { AppRoute } from '$lib/constants';
+  import { handleDeleteAlbum, onEditAlbum, onShareAlbum } from '$lib/services/album.service';
-  import AlbumEditModal from '$lib/modals/AlbumEditModal.svelte';
-  import AlbumShareModal from '$lib/modals/AlbumShareModal.svelte';
-  import QrCodeModal from '$lib/modals/QrCodeModal.svelte';
-  import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
   import {
     AlbumFilter,
     AlbumGroupBy,
@@ -22,23 +16,14 @@
   } from '$lib/stores/preferences.store';
   import { user } from '$lib/stores/user.store';
   import { userInteraction } from '$lib/stores/user.svelte';
-  import { makeSharedLinkUrl } from '$lib/utils';
+  import { getSelectedAlbumGroupOption, sortAlbums, stringToSortOrder, type AlbumGroup } from '$lib/utils/album-utils';
-  import {
-    confirmAlbumDelete,
-    getSelectedAlbumGroupOption,
-    sortAlbums,
-    stringToSortOrder,
-    type AlbumGroup,
-  } from '$lib/utils/album-utils';
   import { downloadAlbum } from '$lib/utils/asset-utils';
   import type { ContextMenuPosition } from '$lib/utils/context-menu';
-  import { handleError } from '$lib/utils/handle-error';
   import { normalizeSearchString } from '$lib/utils/string-utils';
-  import { addUsersToAlbum, deleteAlbum, isHttpError, type AlbumResponseDto, type AlbumUserAddDto } from '@immich/sdk';
+  import { type AlbumResponseDto } from '@immich/sdk';
-  import { modalManager, toastManager } from '@immich/ui';
   import { mdiDeleteOutline, mdiDownload, mdiRenameOutline, mdiShareVariantOutline } from '@mdi/js';
   import { groupBy } from 'lodash-es';
-  import { onMount, type Snippet } from 'svelte';
+  import { onDestroy, onMount, type Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
   import { run } from 'svelte/legacy';
 
@@ -141,11 +126,8 @@
 
   let albumGroupOption: string = $state(AlbumGroupBy.None);
 
-  let albumToShare: AlbumResponseDto | null = $state(null);
-  let albumToDelete: AlbumResponseDto | null = null;
-
   let contextMenuPosition: ContextMenuPosition = $state({ x: 0, y: 0 });
-  let contextMenuTargetAlbum: AlbumResponseDto | undefined = $state();
+  let selectedAlbum: AlbumResponseDto | undefined = $state();
   let isOpen = $state(false);
 
   // Step 1: Filter between Owned and Shared albums, or both.
@@ -198,18 +180,22 @@
     albumGroupIds = groupedAlbums.map(({ id }) => id);
   });
 
-  let showFullContextMenu = $derived(
+  let showFullContextMenu = $derived(allowEdit && selectedAlbum && selectedAlbum.ownerId === $user.id);
-    allowEdit && contextMenuTargetAlbum && contextMenuTargetAlbum.ownerId === $user.id,
-  );
 
   onMount(async () => {
     if (allowEdit) {
       await removeAlbumsIfEmpty();
     }
+
+    eventManager.on('album.update', onUpdate).on('album.delete', onDelete);
+  });
+
+  onDestroy(() => {
+    return () => void eventManager.off('album.update', onUpdate).off('album.delete', onDelete);
   });
 
   const showAlbumContextMenu = (contextMenuDetail: ContextMenuPosition, album: AlbumResponseDto) => {
-    contextMenuTargetAlbum = album;
+    selectedAlbum = album;
     contextMenuPosition = {
       x: contextMenuDetail.x,
       y: contextMenuDetail.y,
@@ -222,79 +208,31 @@
   };
 
   const handleDownloadAlbum = async () => {
-    if (contextMenuTargetAlbum) {
+    if (selectedAlbum) {
-      const album = contextMenuTargetAlbum;
       closeAlbumContextMenu();
-      await downloadAlbum(album);
+      await downloadAlbum(selectedAlbum);
     }
   };
 
-  const handleDeleteAlbum = async (albumToDelete: AlbumResponseDto) => {
+  const handleDelete = async (album: AlbumResponseDto) => {
-    try {
-      await deleteAlbum({
-        id: albumToDelete.id,
-      });
-    } catch (error) {
-      // In rare cases deleting an album completes after the list of albums has been requested,
-      // leading to a bad request error.
-      // Since the album is already deleted, the error is ignored.
-      const isBadRequest = isHttpError(error) && error.status === 400;
-      if (!isBadRequest) {
-        throw error;
-      }
-    }
-
-    ownedAlbums = ownedAlbums.filter(({ id }) => id !== albumToDelete.id);
-    sharedAlbums = sharedAlbums.filter(({ id }) => id !== albumToDelete.id);
-  };
-
-  const setAlbumToDelete = async () => {
-    albumToDelete = contextMenuTargetAlbum ?? null;
     closeAlbumContextMenu();
-    await deleteSelectedAlbum();
+    await handleDeleteAlbum(album);
   };
 
   const handleEdit = async (album: AlbumResponseDto) => {
     closeAlbumContextMenu();
-    const editedAlbum = await modalManager.show(AlbumEditModal, {
+    await onEditAlbum(album);
-      album,
-    });
-    if (editedAlbum) {
-      successEditAlbumInfo(editedAlbum);
-    }
-  };
-
-  const deleteSelectedAlbum = async () => {
-    if (!albumToDelete) {
-      return;
-    }
-
-    const isConfirmed = await confirmAlbumDelete(albumToDelete);
-
-    if (!isConfirmed) {
-      return;
-    }
-
-    try {
-      await handleDeleteAlbum(albumToDelete);
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_delete_album'));
-    } finally {
-      albumToDelete = null;
-    }
   };
 
   const removeAlbumsIfEmpty = async () => {
     const albumsToRemove = ownedAlbums.filter((album) => album.assetCount === 0 && !album.albumName);
-    await Promise.allSettled(albumsToRemove.map((album) => handleDeleteAlbum(album)));
+    await Promise.allSettled(albumsToRemove.map((album) => handleDeleteAlbum(album, { prompt: false })));
   };
 
-  const updateAlbumInfo = (album: AlbumResponseDto) => {
+  const onUpdate = (album: AlbumResponseDto) => {
     ownedAlbums[ownedAlbums.findIndex(({ id }) => id === album.id)] = album;
     sharedAlbums[sharedAlbums.findIndex(({ id }) => id === album.id)] = album;
-  };
 
-  const updateRecentAlbumInfo = (album: AlbumResponseDto) => {
     for (const cachedAlbum of userInteraction.recentAlbums || []) {
       if (cachedAlbum.id === album.id) {
         Object.assign(cachedAlbum, { ...cachedAlbum, ...album });
@@ -303,77 +241,18 @@
     }
   };
 
-  const successEditAlbumInfo = (album: AlbumResponseDto) => {
+  const onDelete = (album: AlbumResponseDto) => {
-    toastManager.custom({
+    ownedAlbums = ownedAlbums.filter(({ id }) => id !== album.id);
-      component: ToastAction,
+    sharedAlbums = sharedAlbums.filter(({ id }) => id !== album.id);
-      props: {
-        color: 'primary',
-        title: $t('success'),
-        description: $t('album_info_updated'),
-        button: {
-          text: $t('view_album'),
-          color: 'primary',
-          onClick() {
-            return goto(resolve(`${AppRoute.ALBUMS}/${album.id}`));
-          },
-        },
-      },
-    });
-
-    updateAlbumInfo(album);
-    updateRecentAlbumInfo(album);
-  };
-
-  const handleAddUsers = async (albumUsers: AlbumUserAddDto[]) => {
-    if (!albumToShare) {
-      return;
-    }
-    try {
-      const album = await addUsersToAlbum({
-        id: albumToShare.id,
-        addUsersDto: {
-          albumUsers,
-        },
-      });
-      updateAlbumInfo(album);
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_add_album_users'));
-    } finally {
-      albumToShare = null;
-    }
-  };
-
-  const handleSharedLinkCreated = (album: AlbumResponseDto) => {
-    album.shared = true;
-    album.hasSharedLink = true;
-    updateAlbumInfo(album);
   };
 
   const openShareModal = async () => {
-    if (!contextMenuTargetAlbum) {
+    if (!selectedAlbum) {
       return;
     }
 
-    albumToShare = contextMenuTargetAlbum;
     closeAlbumContextMenu();
-    const result = await modalManager.show(AlbumShareModal, { album: albumToShare });
+    await onShareAlbum(selectedAlbum);
-
-    switch (result?.action) {
-      case 'sharedUsers': {
-        await handleAddUsers(result.data);
-        return;
-      }
-
-      case 'sharedLink': {
-        const sharedLink = await modalManager.show(SharedLinkCreateModal, { albumId: albumToShare.id });
-
-        if (sharedLink) {
-          handleSharedLinkCreated(albumToShare);
-          await modalManager.show(QrCodeModal, { title: $t('view_link'), value: makeSharedLinkUrl(sharedLink) });
-        }
-        return;
-      }
-    }
   };
 </script>
 
@@ -415,12 +294,16 @@
     <MenuOption
       icon={mdiRenameOutline}
       text={$t('edit_album')}
-      onClick={() => contextMenuTargetAlbum && handleEdit(contextMenuTargetAlbum)}
+      onClick={() => selectedAlbum && handleEdit(selectedAlbum)}
     />
     <MenuOption icon={mdiShareVariantOutline} text={$t('share')} onClick={() => openShareModal()} />
   {/if}
   <MenuOption icon={mdiDownload} text={$t('download')} onClick={() => handleDownloadAlbum()} />
   {#if showFullContextMenu}
-    <MenuOption icon={mdiDeleteOutline} text={$t('delete')} onClick={() => setAlbumToDelete()} />
+    <MenuOption
+      icon={mdiDeleteOutline}
+      text={$t('delete')}
+      onClick={() => selectedAlbum && handleDelete(selectedAlbum)}
+    />
   {/if}
 </RightClickContextMenu>

web/src/lib/components/asset-viewer/actions/share-action.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-  import QrCodeModal from '$lib/modals/QrCodeModal.svelte';
   import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
-  import { makeSharedLinkUrl } from '$lib/utils';
   import type { AssetResponseDto } from '@immich/sdk';
   import { IconButton, modalManager } from '@immich/ui';
   import { mdiShareVariantOutline } from '@mdi/js';
@@ -14,11 +12,7 @@
   let { asset }: Props = $props();
 
   const handleClick = async () => {
-    const sharedLink = await modalManager.show(SharedLinkCreateModal, { assetIds: [asset.id] });
+    await modalManager.show(SharedLinkCreateModal, { assetIds: [asset.id] });
-
-    if (sharedLink) {
-      await modalManager.show(QrCodeModal, { title: $t('view_link'), value: makeSharedLinkUrl(sharedLink) });
-    }
   };
 </script>
 

web/src/lib/components/sharedlinks-page/actions/shared-link-copy.svelte

@@ -1,32 +0,0 @@
-<script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import { copyToClipboard, makeSharedLinkUrl } from '$lib/utils';
-  import type { SharedLinkResponseDto } from '@immich/sdk';
-  import { IconButton } from '@immich/ui';
-  import { mdiContentCopy } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    link: SharedLinkResponseDto;
-    menuItem?: boolean;
-  }
-
-  let { link, menuItem = false }: Props = $props();
-
-  const handleCopy = async () => {
-    await copyToClipboard(makeSharedLinkUrl(link));
-  };
-</script>
-
-{#if menuItem}
-  <MenuOption text={$t('copy_link')} icon={mdiContentCopy} onClick={handleCopy} />
-{:else}
-  <IconButton
-    color="secondary"
-    shape="round"
-    variant="ghost"
-    aria-label={$t('copy_link')}
-    icon={mdiContentCopy}
-    onclick={handleCopy}
-  />
-{/if}

web/src/lib/components/sharedlinks-page/actions/shared-link-delete.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import { IconButton } from '@immich/ui';
-  import { mdiDelete } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    menuItem?: boolean;
-    onDelete: () => void;
-  }
-
-  let { menuItem = false, onDelete }: Props = $props();
-</script>
-
-{#if menuItem}
-  <MenuOption text={$t('delete_link')} icon={mdiDelete} onClick={onDelete} />
-{:else}
-  <IconButton
-    color="secondary"
-    shape="round"
-    variant="ghost"
-    aria-label={$t('delete_link')}
-    icon={mdiDelete}
-    onclick={onDelete}
-  />
-{/if}

web/src/lib/components/sharedlinks-page/actions/shared-link-edit.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-  import { goto } from '$app/navigation';
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import { AppRoute } from '$lib/constants';
-  import type { SharedLinkResponseDto } from '@immich/sdk';
-  import { IconButton } from '@immich/ui';
-  import { mdiCircleEditOutline } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    menuItem?: boolean;
-    sharedLink: SharedLinkResponseDto;
-  }
-
-  let { sharedLink, menuItem = false }: Props = $props();
-
-  const onEdit = async () => {
-    await goto(`${AppRoute.SHARED_LINKS}/${sharedLink.id}`);
-  };
-</script>
-
-{#if menuItem}
-  <MenuOption text={$t('edit_link')} icon={mdiCircleEditOutline} onClick={onEdit} />
-{:else}
-  <IconButton
-    shape="round"
-    color="secondary"
-    variant="ghost"
-    aria-label={$t('edit_link')}
-    icon={mdiCircleEditOutline}
-    onclick={onEdit}
-  />
-{/if}

web/src/lib/components/sharedlinks-page/shared-link-card.svelte

@@ -1,26 +1,22 @@
 <script lang="ts">
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
+  import ActionButton from '$lib/components/ActionButton.svelte';
-  import SharedLinkCopy from '$lib/components/sharedlinks-page/actions/shared-link-copy.svelte';
-  import SharedLinkDelete from '$lib/components/sharedlinks-page/actions/shared-link-delete.svelte';
-  import SharedLinkEdit from '$lib/components/sharedlinks-page/actions/shared-link-edit.svelte';
   import ShareCover from '$lib/components/sharedlinks-page/covers/share-cover.svelte';
   import { AppRoute } from '$lib/constants';
   import Badge from '$lib/elements/Badge.svelte';
+  import { getSharedLinkActions } from '$lib/services/shared-link.service';
   import { locale } from '$lib/stores/preferences.store';
   import { SharedLinkType, type SharedLinkResponseDto } from '@immich/sdk';
-  import { mdiDotsVertical } from '@mdi/js';
   import { DateTime, type ToRelativeUnit } from 'luxon';
   import { t } from 'svelte-i18n';
 
   interface Props {
-    link: SharedLinkResponseDto;
+    sharedLink: SharedLinkResponseDto;
-    onDelete: () => void;
   }
 
-  let { link, onDelete }: Props = $props();
+  let { sharedLink }: Props = $props();
 
   let now = DateTime.now();
-  let expiresAt = $derived(link.expiresAt ? DateTime.fromISO(link.expiresAt) : undefined);
+  let expiresAt = $derived(sharedLink.expiresAt ? DateTime.fromISO(sharedLink.expiresAt) : undefined);
   let isExpired = $derived(expiresAt ? now > expiresAt : false);
 
   const getCountDownExpirationDate = (expiresAtDate: DateTime, now: DateTime) => {
@@ -34,6 +30,8 @@
       }
     }
   };
+
+  const SharedLinkActions = $derived(getSharedLinkActions($t, sharedLink));
 </script>
 
 <div
@@ -41,10 +39,10 @@
 >
   <svelte:element
     this={isExpired ? 'div' : 'a'}
-    href={isExpired ? undefined : `${AppRoute.SHARE}/${link.key}`}
+    href={isExpired ? undefined : `${AppRoute.SHARE}/${sharedLink.key}`}
     class="flex gap-4 w-full py-4"
   >
-    <ShareCover class="transition-all duration-300 hover:shadow-lg" {link} />
+    <ShareCover class="transition-all duration-300 hover:shadow-lg" link={sharedLink} />
 
     <div class="flex flex-col justify-between">
       <div class="info-top">
@@ -52,7 +50,7 @@
           {#if isExpired}
             <p class="font-bold text-red-600 dark:text-red-400">{$t('expired')}</p>
           {:else if expiresAt}
-            <p>
+            Delete <p>
               {$t('expires_date', { values: { date: getCountDownExpirationDate(expiresAt, now) } })}
             </p>
           {:else}
@@ -62,34 +60,34 @@
 
         <div class="text-sm pb-2">
           <p class="flex place-items-center gap-2 text-primary break-all uppercase">
-            {#if link.type === SharedLinkType.Album}
+            {#if sharedLink.type === SharedLinkType.Album}
-              {link.album?.albumName}
+              {sharedLink.album?.albumName}
-            {:else if link.type === SharedLinkType.Individual}
+            {:else if sharedLink.type === SharedLinkType.Individual}
               {$t('individual_share')}
             {/if}
           </p>
 
-          <p class="text-sm">{link.description ?? ''}</p>
+          <p class="text-sm">{sharedLink.description ?? ''}</p>
         </div>
       </div>
 
       <div class="flex flex-wrap gap-2 text-xl">
-        {#if link.allowUpload}
+        {#if sharedLink.allowUpload}
           <Badge rounded="full"><span class="text-xs px-1">{$t('upload')}</span></Badge>
         {/if}
 
-        {#if link.allowDownload}
+        {#if sharedLink.allowDownload}
           <Badge rounded="full"><span class="text-xs px-1">{$t('download')}</span></Badge>
         {/if}
 
-        {#if link.showMetadata}
+        {#if sharedLink.showMetadata}
           <Badge rounded="full"><span class="uppercase text-xs px-1">{$t('exif')}</span></Badge>
         {/if}
 
-        {#if link.password}
+        {#if sharedLink.password}
           <Badge rounded="full"><span class="text-xs px-1">{$t('password')}</span></Badge>
         {/if}
-        {#if link.slug}
+        {#if sharedLink.slug}
           <Badge rounded="full"><span class="text-xs px-1">{$t('custom_url')}</span></Badge>
         {/if}
       </div>
@@ -97,23 +95,13 @@
   </svelte:element>
   <div class="flex flex-auto flex-col place-content-center place-items-end text-end ms-4">
     <div class="sm:flex hidden">
-      <SharedLinkEdit sharedLink={link} />
+      <ActionButton action={SharedLinkActions.Edit} />
-      <SharedLinkCopy {link} />
+      <ActionButton action={SharedLinkActions.Copy} />
-      <SharedLinkDelete {onDelete} />
+      <ActionButton action={SharedLinkActions.Delete} />
     </div>
 
     <div class="sm:hidden">
-      <ButtonContextMenu
+      <ActionButton action={SharedLinkActions.ContextMenu} />
-        color="primary"
-        title={$t('shared_link_options')}
-        icon={mdiDotsVertical}
-        size="large"
-        hideContent
-      >
-        <SharedLinkEdit menuItem sharedLink={link} />
-        <SharedLinkCopy menuItem {link} />
-        <SharedLinkDelete menuItem {onDelete} />
-      </ButtonContextMenu>
     </div>
   </div>
 </div>

web/src/lib/components/timeline/actions/CreateSharedLinkAction.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
   import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
-  import QrCodeModal from '$lib/modals/QrCodeModal.svelte';
   import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
-  import { makeSharedLinkUrl } from '$lib/utils';
   import { IconButton, modalManager } from '@immich/ui';
   import { mdiShareVariantOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
@@ -10,13 +8,7 @@
   const { getAssets } = getAssetControlContext();
 
   const handleClick = async () => {
-    const sharedLink = await modalManager.show(SharedLinkCreateModal, {
+    await modalManager.show(SharedLinkCreateModal, { assetIds: [...getAssets()].map(({ id }) => id) });
-      assetIds: [...getAssets()].map(({ id }) => id),
-    });
-
-    if (sharedLink) {
-      await modalManager.show(QrCodeModal, { title: $t('view_link'), value: makeSharedLinkUrl(sharedLink) });
-    }
   };
 </script>
 

web/src/lib/managers/event-manager.svelte.ts

@@ -1,5 +1,5 @@
 import type { ThemeSetting } from '$lib/managers/theme-manager.svelte';
-import type { LoginResponseDto } from '@immich/sdk';
+import type { AlbumResponseDto, LoginResponseDto, SharedLinkResponseDto } from '@immich/sdk';
 
 type Listener<EventMap extends Record<string, unknown[]>, K extends keyof EventMap> = (...params: EventMap[K]) => void;
 
@@ -58,4 +58,7 @@ export const eventManager = new EventManager<{
   'auth.logout': [];
   'language.change': [{ name: string; code: string; rtl?: boolean }];
   'theme.change': [ThemeSetting];
+  'sharedLink.delete': [SharedLinkResponseDto];
+  'album.update': [AlbumResponseDto];
+  'album.delete': [AlbumResponseDto];
 }>();

web/src/lib/modals/AlbumEditModal.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   import AlbumCover from '$lib/components/album-page/album-cover.svelte';
-  import { handleError } from '$lib/utils/handle-error';
+  import { handleEditAlbum } from '$lib/services/album.service';
-  import { updateAlbumInfo, type AlbumResponseDto } from '@immich/sdk';
+  import { type AlbumResponseDto } from '@immich/sdk';
   import { Button, Field, HStack, Input, Modal, ModalBody, ModalFooter, Textarea } from '@immich/ui';
   import { mdiRenameOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
   type Props = {
     album: AlbumResponseDto;
-    onClose: (album?: AlbumResponseDto) => void;
+    onClose: () => void;
   };
 
   let { album = $bindable(), onClose }: Props = $props();
@@ -21,16 +21,11 @@
     event.preventDefault();
 
     isSubmitting = true;
+    const success = await handleEditAlbum(album, { albumName, description });
+    isSubmitting = false;
 
-    try {
+    if (success) {
-      await updateAlbumInfo({ id: album.id, updateAlbumDto: { albumName, description } });
+      onClose();
-      album.albumName = albumName;
-      album.description = description;
-      onClose(album);
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_update_album_info'));
-    } finally {
-      isSubmitting = false;
     }
   };
 </script>

web/src/lib/modals/AlbumShareModal.svelte

@@ -1,27 +1,25 @@
 <script lang="ts">
   import AlbumSharedLink from '$lib/components/album-page/album-shared-link.svelte';
+  import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
   import { AppRoute } from '$lib/constants';
   import Dropdown from '$lib/elements/Dropdown.svelte';
-  import QrCodeModal from '$lib/modals/QrCodeModal.svelte';
+  import { handleAddAlbumUsers, handleCreateAlbumSharedLink } from '$lib/services/album.service';
-  import { makeSharedLinkUrl } from '$lib/utils';
   import {
     AlbumUserRole,
     getAllSharedLinks,
     searchUsers,
     type AlbumResponseDto,
-    type AlbumUserAddDto,
     type SharedLinkResponseDto,
     type UserResponseDto,
   } from '@immich/sdk';
-  import { Button, Icon, Link, Modal, ModalBody, modalManager, Stack, Text } from '@immich/ui';
+  import { Button, Icon, Link, Modal, ModalBody, Stack, Text } from '@immich/ui';
   import { mdiCheck, mdiEye, mdiLink, mdiPencil } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
-  import UserAvatar from '../components/shared-components/user-avatar.svelte';
 
   interface Props {
     album: AlbumResponseDto;
-    onClose: (result?: { action: 'sharedLink' } | { action: 'sharedUsers'; data: AlbumUserAddDto[] }) => void;
+    onClose: () => void;
   }
 
   let { album, onClose }: Props = $props();
@@ -29,13 +27,6 @@
   let users: UserResponseDto[] = $state([]);
   let selectedUsers: Record<string, { user: UserResponseDto; role: AlbumUserRole }> = $state({});
 
-  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 }> = [
     { title: $t('role_editor'), value: AlbumUserRole.Editor, icon: mdiPencil },
     { title: $t('role_viewer'), value: AlbumUserRole.Viewer, icon: mdiEye },
@@ -71,6 +62,21 @@
       selectedUsers[user.id].role = role;
     }
   };
+
+  const handleAddUsers = async () => {
+    const users = Object.values(selectedUsers).map(({ user, ...rest }) => ({ userId: user.id, ...rest }));
+    const success = await handleAddAlbumUsers(album, users);
+    if (success) {
+      onClose();
+    }
+  };
+
+  const handleCreateLink = async () => {
+    const success = await handleCreateAlbumSharedLink(album);
+    if (success) {
+      onClose();
+    }
+  };
 </script>
 
 <Modal size="small" title={$t('share')} {onClose}>
@@ -154,11 +160,7 @@
           fullWidth
           shape="round"
           disabled={Object.keys(selectedUsers).length === 0}
-          onclick={() =>
+          onclick={handleAddUsers}>{$t('add')}</Button
-            onClose({
-              action: 'sharedUsers',
-              data: Object.values(selectedUsers).map(({ user, ...rest }) => ({ userId: user.id, ...rest })),
-            })}>{$t('add')}</Button
         >
       </div>
     {/if}
@@ -174,17 +176,13 @@
 
         <Stack gap={4}>
           {#each sharedLinks as sharedLink (sharedLink.id)}
-            <AlbumSharedLink {album} {sharedLink} onViewQrCode={() => handleViewQrCode(sharedLink)} />
+            <AlbumSharedLink {album} {sharedLink} />
           {/each}
         </Stack>
       {/if}
 
-      <Button
+      <Button leadingIcon={mdiLink} size="small" shape="round" fullWidth onclick={handleCreateLink}
-        leadingIcon={mdiLink}
+        >{$t('create_link')}</Button
-        size="small"
-        shape="round"
-        fullWidth
-        onclick={() => onClose({ action: 'sharedLink' })}>{$t('create_link')}</Button
       >
     </Stack>
   </ModalBody>

web/src/lib/modals/SharedLinkCreateModal.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
+  import { handleCreateSharedLink } from '$lib/services/shared-link.service';
   import { locale } from '$lib/stores/preferences.store';
   import { handleError } from '$lib/utils/handle-error';
-  import { SharedLinkType, createSharedLink, updateSharedLink, type SharedLinkResponseDto } from '@immich/sdk';
+  import { SharedLinkType, updateSharedLink, type SharedLinkResponseDto } from '@immich/sdk';
   import {
     Button,
     Field,
@@ -81,27 +82,23 @@
     assetIds = editingLink.assets.map(({ id }) => id);
   }
 
-  const handleCreateSharedLink = async () => {
+  const handleCreate = async () => {
     const expirationDate = expirationOption > 0 ? DateTime.now().plus(expirationOption).toISO() : undefined;
+    const sharedLink = await handleCreateSharedLink({
+      type: shareType,
+      albumId,
+      assetIds,
+      expiresAt: expirationDate,
+      allowUpload,
+      description,
+      password,
+      allowDownload,
+      showMetadata,
+      slug,
+    });
 
-    try {
+    if (sharedLink) {
-      const data = await createSharedLink({
+      onClose(sharedLink);
-        sharedLinkCreateDto: {
-          type: shareType,
-          albumId,
-          assetIds,
-          expiresAt: expirationDate,
-          allowUpload,
-          description,
-          password,
-          allowDownload,
-          showMetadata,
-          slug,
-        },
-      });
-      onClose(data);
-    } catch (error) {
-      handleError(error, $t('errors.failed_to_create_shared_link'));
     }
   };
 
@@ -221,7 +218,7 @@
     {#if editingLink}
       <Button fullWidth onclick={handleEditLink}>{$t('confirm')}</Button>
     {:else}
-      <Button fullWidth onclick={handleCreateSharedLink}>{$t('create_link')}</Button>
+      <Button fullWidth onclick={handleCreate}>{$t('create_link')}</Button>
     {/if}
   </ModalFooter>
 </Modal>

web/src/lib/services/album.service.ts

@@ -0,0 +1,157 @@
+import { goto } from '$app/navigation';
+import { resolve } from '$app/paths';
+import ToastAction from '$lib/components/ToastAction.svelte';
+import { AppRoute } from '$lib/constants';
+import { eventManager } from '$lib/managers/event-manager.svelte';
+import AlbumEditModal from '$lib/modals/AlbumEditModal.svelte';
+import AlbumShareModal from '$lib/modals/AlbumShareModal.svelte';
+import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
+import { downloadArchive } from '$lib/utils/asset-utils';
+import { handleError } from '$lib/utils/handle-error';
+import { getFormatter } from '$lib/utils/i18n';
+import {
+  addUsersToAlbum,
+  deleteAlbum,
+  updateAlbumInfo,
+  type AlbumResponseDto,
+  type AlbumUserAddDto,
+  type UpdateAlbumDto,
+} from '@immich/sdk';
+import { MenuItemType, menuManager, modalManager, toastManager, type MenuItem } from '@immich/ui';
+import { mdiDeleteOutline, mdiDotsVertical, mdiRenameOutline, mdiShareVariantOutline } from '@mdi/js';
+import type { MessageFormatter } from 'svelte-i18n';
+
+export const getAlbumActions = ($t: MessageFormatter, album: AlbumResponseDto) => {
+  return {
+    Edit: {
+      title: $t('edit_album'),
+      icon: mdiRenameOutline,
+      onSelect: () => void onEditAlbum(album),
+    },
+    Share: {
+      title: $t('share'),
+      icon: mdiShareVariantOutline,
+      onSelect: () => void onShareAlbum(album),
+    },
+    Download: {
+      title: $t('download'),
+      icon: mdiShareVariantOutline,
+      onSelect: () => void handleDownloadAlbum(album),
+    },
+    Delete: {
+      title: $t('delete'),
+      icon: mdiDeleteOutline,
+      color: 'danger',
+      onSelect: () => void handleDeleteAlbum(album),
+    },
+    ContextMenu: {
+      title: $t('show_album_options'),
+      icon: mdiDotsVertical,
+      onSelect: ({ event }) => onOpenContextMenu(event as MouseEvent, album),
+    },
+  } satisfies Record<string, MenuItem>;
+};
+
+export const onOpenContextMenu = async (event: MouseEvent, album: AlbumResponseDto) => {
+  event.stopPropagation();
+  event.preventDefault();
+  const { currentTarget, clientX, clientY } = event;
+
+  const AlbumActions = getAlbumActions(await getFormatter(), album);
+
+  await menuManager.show({ currentTarget, clientX, clientY } as MouseEvent, {
+    items: [AlbumActions.Edit, AlbumActions.Share, AlbumActions.Download, MenuItemType.Divider, AlbumActions.Delete],
+  });
+};
+
+export const handleDeleteAlbum = async (album: AlbumResponseDto, options?: { prompt?: boolean }) => {
+  const $t = await getFormatter();
+  const { prompt = true } = options ?? {};
+
+  if (prompt) {
+    const confirmation =
+      album.albumName.length > 0
+        ? $t('album_delete_confirmation', { values: { album: album.albumName } })
+        : $t('unnamed_album_delete_confirmation');
+    const description = $t('album_delete_confirmation_description');
+
+    const isConfirmed = await modalManager.showDialog({ prompt: `${confirmation} ${description}` });
+    if (!isConfirmed) {
+      return false;
+    }
+  }
+
+  try {
+    await deleteAlbum({ id: album.id });
+    eventManager.emit('album.delete', album);
+    return true;
+  } catch (error) {
+    handleError(error, $t('errors.unable_to_delete_album'));
+    return false;
+  }
+};
+
+export const handleDownloadAlbum = async (album: AlbumResponseDto) => {
+  await downloadArchive(`${album.albumName}.zip`, { albumId: album.id });
+};
+
+export const onShareAlbum = async (album: AlbumResponseDto) => {
+  await modalManager.show(AlbumShareModal, { album });
+};
+
+export const handleAddAlbumUsers = async (album: AlbumResponseDto, albumUsers: AlbumUserAddDto[]) => {
+  try {
+    const newAlbum = await addUsersToAlbum({ id: album.id, addUsersDto: { albumUsers } });
+    await eventManager.emit('album.update', newAlbum);
+    return true;
+  } catch (error) {
+    const $t = await getFormatter();
+    handleError(error, $t('errors.unable_to_add_album_users'));
+    return false;
+  }
+};
+
+export const handleCreateAlbumSharedLink = async (album: AlbumResponseDto) => {
+  const sharedLink = await modalManager.show(SharedLinkCreateModal, { albumId: album.id });
+  if (sharedLink) {
+    album.shared = true;
+    album.hasSharedLink = true;
+    eventManager.emit('album.update', album);
+    return true;
+  }
+
+  return false;
+};
+
+export const onEditAlbum = async (album: AlbumResponseDto) => {
+  await modalManager.show(AlbumEditModal, { album });
+};
+
+export const handleEditAlbum = async (album: AlbumResponseDto, dto: UpdateAlbumDto) => {
+  const $t = await getFormatter();
+
+  try {
+    const newAlbum = await updateAlbumInfo({ id: album.id, updateAlbumDto: dto });
+    eventManager.emit('album.update', newAlbum);
+    toastManager.custom({
+      component: ToastAction,
+      props: {
+        color: 'primary',
+        title: $t('success'),
+        description: $t('album_info_updated'),
+        button: {
+          text: $t('view_album'),
+          color: 'primary',
+          onClick() {
+            return goto(resolve(`${AppRoute.ALBUMS}/${album.id}`));
+          },
+        },
+      },
+    });
+
+    return true;
+  } catch (error) {
+    handleError(error, $t('errors.unable_to_update_album_info'));
+    return false;
+  }
+};

web/src/lib/services/shared-link.service.ts

@@ -0,0 +1,109 @@
+import { goto } from '$app/navigation';
+import { AppRoute } from '$lib/constants';
+import { eventManager } from '$lib/managers/event-manager.svelte';
+import QrCodeModal from '$lib/modals/QrCodeModal.svelte';
+import { serverConfig } from '$lib/stores/server-config.store';
+import { copyToClipboard } from '$lib/utils';
+import { handleError } from '$lib/utils/handle-error';
+import { getFormatter } from '$lib/utils/i18n';
+import { createSharedLink, removeSharedLink, type SharedLinkCreateDto, type SharedLinkResponseDto } from '@immich/sdk';
+import { MenuItemType, menuManager, modalManager, toastManager, type MenuItem } from '@immich/ui';
+import { mdiCircleEditOutline, mdiContentCopy, mdiDelete, mdiDotsVertical, mdiQrcode } from '@mdi/js';
+import type { MessageFormatter } from 'svelte-i18n';
+import { get } from 'svelte/store';
+
+export const getSharedLinkActions = ($t: MessageFormatter, sharedLink: SharedLinkResponseDto) => {
+  return {
+    Edit: {
+      title: $t('edit_link'),
+      icon: mdiCircleEditOutline,
+      onSelect: () => void onEditSharedLink(sharedLink),
+    },
+    Copy: {
+      title: $t('copy_link'),
+      icon: mdiContentCopy,
+      onSelect: () => void handleCopySharedLink(sharedLink),
+    },
+    Delete: {
+      title: $t('delete_link'),
+      icon: mdiDelete,
+      color: 'danger',
+      onSelect: () => void handleDeleteSharedLink(sharedLink),
+    },
+    ViewQrCode: {
+      title: $t('view_qr_code'),
+      icon: mdiQrcode,
+      onSelect: () => void onViewSharedLinkQrCode(sharedLink),
+    },
+    ContextMenu: {
+      title: $t('shared_link_options'),
+      icon: mdiDotsVertical,
+      onSelect: ({ event }) => void onOpenContextMenu(event as MouseEvent, sharedLink),
+    },
+  } satisfies Record<string, MenuItem>;
+};
+
+const onOpenContextMenu = async (
+  { currentTarget, clientX, clientY }: MouseEvent,
+  sharedLink: SharedLinkResponseDto,
+) => {
+  const SharedLinkActions = getSharedLinkActions(await getFormatter(), sharedLink);
+  await menuManager.show({ currentTarget, clientX, clientY } as MouseEvent, {
+    position: 'top-right',
+    items: [SharedLinkActions.Edit, MenuItemType.Divider, SharedLinkActions.Copy, SharedLinkActions.Delete],
+  });
+};
+
+const asUrl = (sharedLink: SharedLinkResponseDto) => {
+  const path = sharedLink.slug ? `s/${sharedLink.slug}` : `share/${sharedLink.key}`;
+  return new URL(path, get(serverConfig).externalDomain || globalThis.location.origin).href;
+};
+
+const handleCopySharedLink = async (sharedLink: SharedLinkResponseDto) => {
+  await copyToClipboard(asUrl(sharedLink));
+};
+
+const onViewSharedLinkQrCode = async (sharedLink: SharedLinkResponseDto) => {
+  const $t = await getFormatter();
+  await modalManager.show(QrCodeModal, { title: $t('view_link'), value: asUrl(sharedLink) });
+};
+
+export const handleCreateSharedLink = async (dto: SharedLinkCreateDto) => {
+  try {
+    const sharedLink = await createSharedLink({ sharedLinkCreateDto: dto });
+    // prevent nested modals
+    void onViewSharedLinkQrCode(sharedLink);
+    return sharedLink;
+  } catch (error) {
+    const $t = await getFormatter();
+    handleError(error, $t('errors.failed_to_create_shared_link'));
+  }
+};
+
+const onEditSharedLink = async (sharedLink: SharedLinkResponseDto) => {
+  await goto(`${AppRoute.SHARED_LINKS}/${sharedLink.id}`);
+};
+
+const handleDeleteSharedLink = async (sharedLink: SharedLinkResponseDto): Promise<boolean> => {
+  const $t = await getFormatter();
+
+  const isConfirmed = await modalManager.showDialog({
+    title: $t('delete_shared_link'),
+    prompt: $t('confirm_delete_shared_link'),
+    confirmText: $t('delete'),
+  });
+
+  if (!isConfirmed) {
+    return false;
+  }
+
+  try {
+    await removeSharedLink({ id: sharedLink.id });
+    toastManager.success($t('deleted_shared_link'));
+    eventManager.emit('sharedLink.delete', sharedLink);
+    return true;
+  } catch (error) {
+    handleError(error, $t('errors.unable_to_delete_shared_link'));
+    return false;
+  }
+};

web/src/lib/utils.ts

@@ -1,7 +1,6 @@
 import { defaultLang, langs, locales } from '$lib/constants';
 import { authManager } from '$lib/managers/auth-manager.svelte';
 import { lang } from '$lib/stores/preferences.store';
-import { serverConfig } from '$lib/stores/server-config.store';
 import { handleError } from '$lib/utils/handle-error';
 import {
   AssetJobName,
@@ -269,11 +268,6 @@ export const copyToClipboard = async (secret: string) => {
   }
 };
 
-export const makeSharedLinkUrl = (sharedLink: SharedLinkResponseDto) => {
-  const path = sharedLink.slug ? `s/${sharedLink.slug}` : `share/${sharedLink.key}`;
-  return new URL(path, get(serverConfig).externalDomain || globalThis.location.origin).href;
-};
-
 export const oauth = {
   isCallback: (location: Location) => {
     const search = location.search;

web/src/lib/utils/album-utils.ts

@@ -12,7 +12,6 @@ import {
 import { handleError } from '$lib/utils/handle-error';
 import type { AlbumResponseDto } from '@immich/sdk';
 import * as sdk from '@immich/sdk';
-import { modalManager } from '@immich/ui';
 import { orderBy } from 'lodash-es';
 import { t } from 'svelte-i18n';
 import { get } from 'svelte/store';
@@ -203,19 +202,6 @@ export const expandAllAlbumGroups = () => {
   collapseAllAlbumGroups([]);
 };
 
-export const confirmAlbumDelete = async (album: AlbumResponseDto) => {
-  const $t = get(t);
-  const confirmation =
-    album.albumName.length > 0
-      ? $t('album_delete_confirmation', { values: { album: album.albumName } })
-      : $t('unnamed_album_delete_confirmation');
-
-  const description = $t('album_delete_confirmation_description');
-  const prompt = `${confirmation} ${description}`;
-
-  return modalManager.showDialog({ prompt });
-};
-
 interface AlbumSortOption {
   [option: string]: (order: SortOrder, albums: AlbumResponseDto[]) => AlbumResponseDto[];
 }

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

@@ -32,17 +32,15 @@
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import AlbumOptionsModal from '$lib/modals/AlbumOptionsModal.svelte';
-  import AlbumShareModal from '$lib/modals/AlbumShareModal.svelte';
   import AlbumUsersModal from '$lib/modals/AlbumUsersModal.svelte';
-  import QrCodeModal from '$lib/modals/QrCodeModal.svelte';
   import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
+  import { handleDeleteAlbum, onShareAlbum } from '$lib/services/album.service';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { featureFlags } 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, makeSharedLinkUrl } from '$lib/utils';
+  import { handlePromiseError } 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';
   import { handleError } from '$lib/utils/handle-error';
@@ -58,11 +56,9 @@
     AssetOrder,
     AssetVisibility,
     addAssetsToAlbum,
-    addUsersToAlbum,
     deleteAlbum,
     getAlbumInfo,
     updateAlbumInfo,
-    type AlbumUserAddDto,
   } from '@immich/sdk';
   import { Button, Icon, IconButton, modalManager, toastManager } from '@immich/ui';
   import {
@@ -217,42 +213,17 @@
     await setModeToView();
   };
 
-  const handleAddUsers = async (albumUsers: AlbumUserAddDto[]) => {
-    try {
-      await addUsersToAlbum({
-        id: album.id,
-        addUsersDto: {
-          albumUsers,
-        },
-      });
-      await refreshAlbum();
-
-      viewMode = AlbumPageViewMode.VIEW;
-    } catch (error) {
-      handleError(error, $t('errors.error_adding_users_to_album'));
-    }
-  };
-
   const handleDownloadAlbum = async () => {
     await downloadAlbum(album);
   };
 
-  const handleRemoveAlbum = async () => {
+  const handleDelete = async () => {
-    const isConfirmed = await confirmAlbumDelete(album);
+    const success = await handleDeleteAlbum(album);
-
+    if (success) {
-    if (!isConfirmed) {
-      viewMode = AlbumPageViewMode.VIEW;
-      return;
-    }
-
-    try {
-      await deleteAlbum({ id: album.id });
       await goto(backUrl);
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_delete_album'));
-    } finally {
-      viewMode = AlbumPageViewMode.VIEW;
     }
+
+    viewMode = AlbumPageViewMode.VIEW;
   };
 
   const handleSetVisibility = (assetIds: string[]) => {
@@ -373,32 +344,20 @@
   );
 
   const handleShare = async () => {
-    const result = await modalManager.show(AlbumShareModal, { album });
+    await onShareAlbum(album);
-
+    await refreshAlbum();
-    switch (result?.action) {
+    viewMode = AlbumPageViewMode.VIEW;
-      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) {
       await refreshAlbum();
-      await modalManager.show(QrCodeModal, { title: $t('view_link'), value: makeSharedLinkUrl(sharedLink) });
     }
   };
 
   const handleEditUsers = async () => {
     const changed = await modalManager.show(AlbumUsersModal, { album });
-
     if (changed) {
       await refreshAlbum();
     }
@@ -674,7 +633,7 @@
                   <MenuOption icon={mdiCogOutline} text={$t('options')} onClick={handleOptions} />
                 {/if}
 
-                <MenuOption icon={mdiDeleteOutline} text={$t('delete_album')} onClick={() => handleRemoveAlbum()} />
+                <MenuOption icon={mdiDeleteOutline} text={$t('delete_album')} onClick={() => handleDelete()} />
               </ButtonContextMenu>
             {/if}
 

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

@@ -5,11 +5,10 @@
   import SharedLinkCard from '$lib/components/sharedlinks-page/shared-link-card.svelte';
   import { AppRoute } from '$lib/constants';
   import GroupTab from '$lib/elements/GroupTab.svelte';
+  import { eventManager } from '$lib/managers/event-manager.svelte';
   import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
-  import { handleError } from '$lib/utils/handle-error';
+  import { getAllSharedLinks, SharedLinkType, type SharedLinkResponseDto } from '@immich/sdk';
-  import { getAllSharedLinks, removeSharedLink, SharedLinkType, type SharedLinkResponseDto } from '@immich/sdk';
+  import { onDestroy, onMount } from 'svelte';
-  import { modalManager, toastManager } from '@immich/ui';
-  import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
 
@@ -26,29 +25,18 @@
     sharedLinks = await getAllSharedLinks({});
   };
 
+  const onDelete = ({ id }: SharedLinkResponseDto) => {
+    sharedLinks = sharedLinks.filter((sharedLink) => sharedLink.id !== id);
+  };
+
   onMount(async () => {
     await refresh();
+    eventManager.on('sharedLink.delete', onDelete);
   });
 
-  const handleDeleteLink = async (id: string) => {
+  onDestroy(() => {
-    const isConfirmed = await modalManager.showDialog({
+    return () => eventManager.off('sharedLink.delete', onDelete);
-      title: $t('delete_shared_link'),
+  });
-      prompt: $t('confirm_delete_shared_link'),
-      confirmText: $t('delete'),
-    });
-
-    if (!isConfirmed) {
-      return;
-    }
-
-    try {
-      await removeSharedLink({ id });
-      toastManager.success($t('deleted_shared_link'));
-      await refresh();
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_delete_shared_link'));
-    }
-  };
 
   const handleEditDone = async (updatedLink?: SharedLinkResponseDto) => {
     if (updatedLink) {
@@ -109,8 +97,8 @@
       </div>
     {:else}
       <div class="flex flex-col gap-2">
-        {#each filteredSharedLinks as link (link.id)}
+        {#each filteredSharedLinks as sharedLink (sharedLink.id)}
-          <SharedLinkCard {link} onDelete={() => handleDeleteLink(link.id)} />
+          <SharedLinkCard {sharedLink} />
         {/each}
       </div>
     {/if}