refactor: shared-link service (#23770)

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.43.0
-        version: 0.40.2(@internationalized/date@3.8.2)(svelte@5.43.0)
+        version: 0.43.0(@internationalized/date@3.8.2)(svelte@5.43.0)
       '@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.43.0':
-    resolution: {integrity: sha512-6NS4yVx0VoyH+AaM7TISDaoIzZe3RuDOi6xMkK2LrOPQbKwTuheD2iagxsRYzUtJ9IPrmCPrwRBc9Jq5BkvmBQ==}
+    resolution: {integrity: sha512-dwWIURsGghsbeFnqxCqUyWslyRU2vQjih7uewNr0nsW68bJ5/esl+V/Kiw2opiNiwI4Q3HEcuTRY57k4Hq+X3Q==}
     peerDependencies:
       svelte: ^5.0.0
 
@@ -14346,13 +14346,13 @@ snapshots:
 
   '@immich/justified-layout-wasm@0.4.3': {}
 
-  '@immich/svelte-markdown-preprocess@0.0.1(svelte@5.43.0)':
+  '@immich/svelte-markdown-preprocess@0.1.0(svelte@5.43.0)':
     dependencies:
       svelte: 5.43.0
 
-  '@immich/ui@0.40.2(@internationalized/date@3.8.2)(svelte@5.43.0)':
+  '@immich/ui@0.43.0(@internationalized/date@3.8.2)(svelte@5.43.0)':
     dependencies:
-      '@immich/svelte-markdown-preprocess': 0.0.1(svelte@5.43.0)
+      '@immich/svelte-markdown-preprocess': 0.1.0(svelte@5.43.0)
       '@mdi/js': 7.4.47
       bits-ui: 2.9.8(@internationalized/date@3.8.2)(svelte@5.43.0)
       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.43.0",
     "@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-shared-link.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-  import SharedLinkCopy from '$lib/components/sharedlinks-page/actions/shared-link-copy.svelte';
+  import ActionButton from '$lib/components/ActionButton.svelte';
-  import { handleShowSharedLinkQrCode } from '$lib/services/shared-link.service';
+  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';
 
@@ -32,6 +31,8 @@
     ]
       .filter(Boolean)
       .join(' • ');
+
+  const SharedLinkActions = $derived(getSharedLinkActions($t, sharedLink));
 </script>
 
 <div class="flex justify-between items-center">
@@ -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={() => handleShowSharedLinkQrCode(sharedLink)}
-    />
-    <SharedLinkCopy {sharedLink} />
   </div>
 </div>

web/src/lib/components/shared-components/search-bar/search-bar.svelte

@@ -92,7 +92,7 @@
     }
 
     const result = modalManager.open(SearchFilterModal, { searchQuery });
-    close = () => result.close(undefined);
+    close = () => result.close();
     closeDropdown();
 
     const searchResult = await result.onClose;

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

@@ -1,28 +0,0 @@
-<script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import { handleCopySharedLinkUrl } from '$lib/services/shared-link.service';
-  import type { SharedLinkResponseDto } from '@immich/sdk';
-  import { IconButton } from '@immich/ui';
-  import { mdiContentCopy } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    sharedLink: SharedLinkResponseDto;
-    menuItem?: boolean;
-  }
-
-  let { sharedLink, menuItem = false }: Props = $props();
-</script>
-
-{#if menuItem}
-  <MenuOption text={$t('copy_link')} icon={mdiContentCopy} onClick={() => handleCopySharedLinkUrl(sharedLink)} />
-{:else}
-  <IconButton
-    color="secondary"
-    shape="round"
-    variant="ghost"
-    aria-label={$t('copy_link')}
-    icon={mdiContentCopy}
-    onclick={() => handleCopySharedLinkUrl(sharedLink)}
-  />
-{/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,23 +1,19 @@
 <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 {
     sharedLink: SharedLinkResponseDto;
-    onDelete: () => void;
   }
 
-  let { sharedLink, onDelete }: Props = $props();
+  let { sharedLink }: Props = $props();
 
   let now = DateTime.now();
   let expiresAt = $derived(sharedLink.expiresAt ? DateTime.fromISO(sharedLink.expiresAt) : undefined);
@@ -34,6 +30,8 @@
       }
     }
   };
+
+  const SharedLinkActions = $derived(getSharedLinkActions($t, sharedLink));
 </script>
 
 <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} />
+      <ActionButton action={SharedLinkActions.Edit} />
-      <SharedLinkCopy {sharedLink} />
+      <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} />
-        <SharedLinkCopy menuItem {sharedLink} />
-        <SharedLinkDelete menuItem {onDelete} />
-      </ButtonContextMenu>
     </div>
   </div>
 </div>

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

@@ -10,6 +10,7 @@ export type Events = {
   ThemeChange: [ThemeSetting];
   SharedLinkCreate: [SharedLinkResponseDto];
   SharedLinkUpdate: [SharedLinkResponseDto];
+  SharedLinkDelete: [SharedLinkResponseDto];
 };
 
 type Listener<EventMap extends Record<string, unknown[]>, K extends keyof EventMap> = (...params: EventMap[K]) => void;

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

@@ -1,3 +1,5 @@
+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';
@@ -6,15 +8,58 @@ import { handleError } from '$lib/utils/handle-error';
 import { getFormatter } from '$lib/utils/i18n';
 import {
   createSharedLink,
+  removeSharedLink,
   updateSharedLink,
   type SharedLinkCreateDto,
   type SharedLinkEditDto,
   type SharedLinkResponseDto,
 } from '@immich/sdk';
-import { modalManager, toastManager } from '@immich/ui';
+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';
 
-const makeSharedLinkUrl = (sharedLink: SharedLinkResponseDto) => {
+export const getSharedLinkActions = ($t: MessageFormatter, sharedLink: SharedLinkResponseDto) => {
+  const Edit: MenuItem = {
+    title: $t('edit_link'),
+    icon: mdiCircleEditOutline,
+    onSelect: () => void goto(`${AppRoute.SHARED_LINKS}/${sharedLink.id}`),
+  };
+
+  const Delete: MenuItem = {
+    title: $t('delete_link'),
+    icon: mdiDelete,
+    color: 'danger',
+    onSelect: () => void handleDeleteSharedLink(sharedLink),
+  };
+
+  const Copy: MenuItem = {
+    title: $t('copy_link'),
+    icon: mdiContentCopy,
+    onSelect: () => void copyToClipboard(asUrl(sharedLink)),
+  };
+
+  const ViewQrCode: MenuItem = {
+    title: $t('view_qr_code'),
+    icon: mdiQrcode,
+    onSelect: () => void handleShowSharedLinkQrCode(sharedLink),
+  };
+
+  const ContextMenu: MenuItem = {
+    title: $t('shared_link_options'),
+    icon: mdiDotsVertical,
+    onSelect: ({ event }) =>
+      void menuManager.show({
+        target: event.currentTarget as HTMLElement,
+        position: 'top-right',
+        items: [Edit, Copy, MenuItemType.Divider, Delete],
+      }),
+  };
+
+  return { Edit, Delete, Copy, ViewQrCode, ContextMenu };
+};
+
+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;
 };
@@ -54,11 +99,34 @@ export const handleUpdateSharedLink = async (sharedLink: SharedLinkResponseDto,
   }
 };
 
-export const handleShowSharedLinkQrCode = async (sharedLink: SharedLinkResponseDto) => {
+export const handleDeleteSharedLink = async (sharedLink: SharedLinkResponseDto): Promise<boolean> => {
   const $t = await getFormatter();
-  await modalManager.show(QrCodeModal, { title: $t('view_link'), value: makeSharedLinkUrl(sharedLink) });
+
+  const success = await modalManager.showDialog({
+    title: $t('delete_shared_link'),
+    prompt: $t('confirm_delete_shared_link'),
+    confirmText: $t('delete'),
+  });
+
+  if (!success) {
+    return false;
+  }
+
+  try {
+    await removeSharedLink({ id: sharedLink.id });
+
+    eventManager.emit('SharedLinkDelete', sharedLink);
+
+    toastManager.success($t('deleted_shared_link'));
+
+    return true;
+  } catch (error) {
+    handleError(error, $t('errors.unable_to_delete_shared_link'));
+    return false;
+  }
 };
 
-export const handleCopySharedLinkUrl = async (sharedLink: SharedLinkResponseDto) => {
+const handleShowSharedLinkQrCode = async (sharedLink: SharedLinkResponseDto) => {
-  await copyToClipboard(makeSharedLinkUrl(sharedLink));
+  const $t = await getFormatter();
+  await modalManager.show(QrCodeModal, { title: $t('view_link'), value: asUrl(sharedLink) });
 };

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

@@ -7,9 +7,7 @@
   import { AppRoute } from '$lib/constants';
   import GroupTab from '$lib/elements/GroupTab.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 { modalManager, toastManager } from '@immich/ui';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
@@ -31,26 +29,6 @@
     await refresh();
   });
 
-  const handleDeleteLink = async (id: string) => {
-    const isConfirmed = await modalManager.showDialog({
-      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'));
-    }
-  };
-
   type Filter = 'all' | 'album' | 'individual';
 
   const filterMap: Record<Filter, string> = {
@@ -87,9 +65,13 @@
       sharedLinks[index] = sharedLink;
     }
   };
+
+  const onSharedLinkDelete = (sharedLink: SharedLinkResponseDto) => {
+    sharedLinks = sharedLinks.filter(({ id }) => id !== sharedLink.id);
+  };
 </script>
 
-<OnEvents {onSharedLinkUpdate} />
+<OnEvents {onSharedLinkUpdate} {onSharedLinkDelete} />
 
 <UserPageLayout title={data.meta.title}>
   {#snippet buttons()}
@@ -108,7 +90,7 @@
     {:else}
       <div class="flex flex-col gap-2">
         {#each filteredSharedLinks as sharedLink (sharedLink.id)}
-          <SharedLinkCard {sharedLink} onDelete={() => handleDeleteLink(sharedLink.id)} />
+          <SharedLinkCard {sharedLink} />
         {/each}
       </div>
     {/if}