feat: view album shared links (#15943)

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import SharedLinkCopy from '$lib/components/sharedlinks-page/actions/shared-link-copy.svelte';
+  import { locale } from '$lib/stores/preferences.store';
+  import type { AlbumResponseDto, SharedLinkResponseDto } from '@immich/sdk';
+  import { Text } from '@immich/ui';
+  import { DateTime } from 'luxon';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    album: AlbumResponseDto;
+    sharedLink: SharedLinkResponseDto;
+  };
+
+  const { album, sharedLink }: Props = $props();
+</script>
+
+<div class="flex justify-between items-center">
+  <div class="flex flex-col gap-1">
+    <Text size="small">{sharedLink.description || album.albumName}</Text>
+    <Text size="tiny" color="muted"
+      >{[
+        DateTime.fromISO(sharedLink.createdAt).toLocaleString(
+          {
+            month: 'long',
+            day: 'numeric',
+            year: 'numeric',
+          },
+          { locale: $locale },
+        ),
+        sharedLink.allowUpload && $t('upload'),
+        sharedLink.allowDownload && $t('download'),
+        sharedLink.showMetadata && $t('exif'),
+        sharedLink.password && $t('password'),
+      ]
+        .filter(Boolean)
+        .join(' • ')}</Text
+    >
+  </div>
+  <SharedLinkCopy link={sharedLink} />
+</div>

web/src/lib/components/album-page/user-selection-modal.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import AlbumSharedLink from '$lib/components/album-page/album-shared-link.svelte';
   import Dropdown from '$lib/components/elements/dropdown.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
@@ -12,11 +13,11 @@
     type SharedLinkResponseDto,
     type UserResponseDto,
   } from '@immich/sdk';
-  import { mdiCheck, mdiEye, mdiLink, mdiPencil, mdiShareCircle } from '@mdi/js';
+  import { Button, Link, Stack, Text } from '@immich/ui';
+  import { mdiCheck, mdiEye, mdiLink, mdiPencil } from '@mdi/js';
   import { onMount } from 'svelte';
-  import Button from '../elements/buttons/button.svelte';
-  import UserAvatar from '../shared-components/user-avatar.svelte';
   import { t } from 'svelte-i18n';
+  import UserAvatar from '../shared-components/user-avatar.svelte';
 
   interface Props {
     album: AlbumResponseDto;
@@ -38,7 +39,7 @@
 
   let sharedLinks: SharedLinkResponseDto[] = $state([]);
   onMount(async () => {
-    await getSharedLinks();
+    sharedLinks = await getAllSharedLinks({ albumId: album.id });
     const data = await searchUsers();
 
     // remove album owner
@@ -50,11 +51,6 @@
     }
   });
 
-  const getSharedLinks = async () => {
-    const data = await getAllSharedLinks();
-    sharedLinks = data.filter((link) => link.album?.id === album.id);
-  };
-
   const handleToggle = (user: UserResponseDto) => {
     if (Object.keys(selectedUsers).includes(user.id)) {
       delete selectedUsers[user.id];
@@ -72,10 +68,10 @@
   };
 </script>
 
-<FullScreenModal title={$t('invite_to_album')} showLogo {onClose}>
+<FullScreenModal title={$t('share')} showLogo {onClose}>
   {#if Object.keys(selectedUsers).length > 0}
     <div class="mb-2 py-2 sticky">
-      <p class="text-xs font-medium">{$t('selected').toUpperCase()}</p>
+      <p class="text-xs font-medium">{$t('selected')}</p>
       <div class="my-2">
         {#each Object.values(selectedUsers) as { user }}
           {#key user.id}
@@ -117,7 +113,7 @@
 
   <div class="immich-scrollbar max-h-[500px] overflow-y-auto">
     {#if users.length > 0 && users.length !== Object.keys(selectedUsers).length}
-      <p class="text-xs font-medium">{$t('suggestions').toUpperCase()}</p>
+      <Text>{$t('users')}</Text>
 
       <div class="my-2">
         {#each users as user}
@@ -144,9 +140,9 @@
   {#if users.length > 0}
     <div class="py-3">
       <Button
-        size="sm"
-        fullwidth
-        rounded="full"
+        size="small"
+        fullWidth
+        shape="round"
         disabled={Object.keys(selectedUsers).length === 0}
         onclick={() =>
           onSelect(Object.values(selectedUsers).map(({ user, ...rest }) => ({ userId: user.id, ...rest })))}
@@ -155,26 +151,20 @@
     </div>
   {/if}
 
-  <hr />
+  <hr class="my-4" />
 
-  <div id="shared-buttons" class="mt-4 flex place-content-center place-items-center justify-around">
-    <button
-      type="button"
-      class="flex flex-col place-content-center place-items-center gap-2 hover:cursor-pointer"
-      onclick={onShare}
-    >
-      <Icon path={mdiLink} size={24} />
-      <p class="text-sm">{$t('create_link')}</p>
-    </button>
+  <Stack gap={6}>
+    <div class="flex justify-between items-center">
+      <Text>{$t('shared_links')}</Text>
+      <Link href={AppRoute.SHARED_LINKS} class="text-sm">{$t('view_all')}</Link>
+    </div>
 
-    {#if sharedLinks.length}
-      <a
-        href={AppRoute.SHARED_LINKS}
-        class="flex flex-col place-content-center place-items-center gap-2 hover:cursor-pointer"
-      >
-        <Icon path={mdiShareCircle} size={24} />
-        <p class="text-sm">{$t('view_links')}</p>
-      </a>
-    {/if}
-  </div>
+    <Stack gap={4}>
+      {#each sharedLinks as sharedLink}
+        <AlbumSharedLink {album} {sharedLink} />
+      {/each}
+    </Stack>
+
+    <Button leadingIcon={mdiLink} size="small" shape="round" fullWidth onclick={onShare}>{$t('create_link')}</Button>
+  </Stack>
 </FullScreenModal>