refactor: shared-link service (#23770)

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 { handleShowSharedLinkQrCode } from '$lib/services/shared-link.service';
+  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 { mdiQrcode } from '@mdi/js';
+  import { Text } from '@immich/ui';
   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
-      aria-label={$t('view_qr_code')}
-      shape="round"
-      color="secondary"
-      variant="ghost"
-      icon={mdiQrcode}
-      onclick={() => handleShowSharedLinkQrCode(sharedLink)}
-    />
-    <SharedLinkCopy {sharedLink} />
+    <ActionButton action={SharedLinkActions.ViewQrCode} />
+    <ActionButton action={SharedLinkActions.Copy} />
   </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 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 ActionButton from '$lib/components/ActionButton.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} />
-      <SharedLinkCopy {sharedLink} />
-      <SharedLinkDelete {onDelete} />
+      <ActionButton action={SharedLinkActions.Edit} />
+      <ActionButton action={SharedLinkActions.Copy} />
+      <ActionButton action={SharedLinkActions.Delete} />
     </div>
 
     <div class="sm:hidden">
-      <ButtonContextMenu
-        color="primary"
-        title={$t('shared_link_options')}
-        icon={mdiDotsVertical}
-        size="large"
-        hideContent
-      >
-        <SharedLinkEdit menuItem {sharedLink} />
-        <SharedLinkCopy menuItem {sharedLink} />
-        <SharedLinkDelete menuItem {onDelete} />
-      </ButtonContextMenu>
+      <ActionButton action={SharedLinkActions.ContextMenu} />
     </div>
   </div>
 </div>