feat(web): shared link card tweaks (#24192)

web/src/lib/components/sharedlinks-page/covers/share-cover.svelte

@@ -15,7 +15,7 @@
   let { sharedLink, preload = false, class: className = '' }: Props = $props();
 </script>
 
-<div class="relative shrink-0 size-24">
+<div class="relative shrink-0 size-22">
   {#if sharedLink?.album}
     <AlbumCover album={sharedLink.album} class={className} {preload} />
   {:else if sharedLink.assets[0]}

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

@@ -2,11 +2,10 @@
   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 { ContextMenuButton, MenuItemType } from '@immich/ui';
+  import { Badge, ContextMenuButton, MenuItemType, Text } from '@immich/ui';
   import { DateTime, type ToRelativeUnit } from 'luxon';
   import { t } from 'svelte-i18n';
 
@@ -45,53 +44,50 @@
   >
     <ShareCover class="transition-all duration-300 hover:shadow-lg" {sharedLink} />
 
-    <div class="flex flex-col justify-between">
+    <div class="flex flex-col gap-2">
-      <div class="info-top">
+      <Text size="large" color="primary" class="flex place-items-center gap-2 break-all">
-        <div class="font-mono text-xs font-semibold text-gray-500 dark:text-gray-400">
+        {#if sharedLink.type === SharedLinkType.Album}
-          {#if isExpired}
+          {sharedLink.album?.albumName}
-            <p class="font-bold text-red-600 dark:text-red-400">{$t('expired')}</p>
+        {:else if sharedLink.type === SharedLinkType.Individual}
-          {:else if expiresAt}
+          {$t('individual_share')}
-            <p>
+        {/if}
-              {$t('expires_date', { values: { date: getCountDownExpirationDate(expiresAt, now) } })}
+      </Text>
-            </p>
-          {:else}
-            <p>{$t('expires_date', { values: { date: '∞' } })}</p>
-          {/if}
-        </div>
 
-        <div class="text-sm pb-2">
+      <div class="flex flex-wrap gap-1">
-          <p class="flex place-items-center gap-2 text-primary break-all uppercase">
+        {#if isExpired}
-            {#if sharedLink.type === SharedLinkType.Album}
+          <Badge size="small" color="danger">{$t('expired')}</Badge>
-              {sharedLink.album?.albumName}
+        {:else if expiresAt}
-            {:else if sharedLink.type === SharedLinkType.Individual}
+          <Badge size="small" color="secondary">
-              {$t('individual_share')}
+            {$t('expires_date', { values: { date: getCountDownExpirationDate(expiresAt, now) } })}
-            {/if}
+          </Badge>
-          </p>
+        {:else}
-
+          <Badge size="small" color="secondary">{$t('expires_date', { values: { date: '∞' } })}</Badge>
-          <p class="text-sm">{sharedLink.description ?? ''}</p>
-        </div>
-      </div>
-
-      <div class="flex flex-wrap gap-2 text-xl">
-        {#if sharedLink.allowUpload}
-          <Badge rounded="full"><span class="text-xs px-1">{$t('upload')}</span></Badge>
         {/if}
 
-        {#if sharedLink.allowDownload}
+        {#if sharedLink.slug}
-          <Badge rounded="full"><span class="text-xs px-1">{$t('download')}</span></Badge>
+          <Badge size="small" color="secondary">{$t('custom_url')}</Badge>
+        {/if}
+
+        {#if sharedLink.allowUpload}
+          <Badge size="small" color="secondary">{$t('upload')}</Badge>
+        {/if}
+
+        {#if sharedLink.showMetadata && sharedLink.allowDownload}
+          <Badge size="small" color="secondary">{$t('download')}</Badge>
         {/if}
 
         {#if sharedLink.showMetadata}
-          <Badge rounded="full"><span class="uppercase text-xs px-1">{$t('exif')}</span></Badge>
+          <Badge size="small" color="secondary">{$t('exif')}</Badge>
         {/if}
 
         {#if sharedLink.password}
-          <Badge rounded="full"><span class="text-xs px-1">{$t('password')}</span></Badge>
+          <Badge size="small" color="secondary">{$t('password')}</Badge>
-        {/if}
-        {#if sharedLink.slug}
-          <Badge rounded="full"><span class="text-xs px-1">{$t('custom_url')}</span></Badge>
         {/if}
       </div>
+
+      {#if sharedLink.description}
+        <Text size="small" class="line-clamp-1">{sharedLink.description}</Text>
+      {/if}
     </div>
   </svelte:element>
   <div class="flex flex-auto flex-col place-content-center place-items-end text-end ms-4">

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

@@ -17,19 +17,19 @@ import {
   type SharedLinkResponseDto,
 } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
-import { mdiCircleEditOutline, mdiContentCopy, mdiDelete, mdiQrcode } from '@mdi/js';
+import { mdiContentCopy, mdiPencilOutline, mdiQrcode, mdiTrashCanOutline } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
 
 export const getSharedLinkActions = ($t: MessageFormatter, sharedLink: SharedLinkResponseDto) => {
   const Edit: ActionItem = {
     title: $t('edit_link'),
-    icon: mdiCircleEditOutline,
+    icon: mdiPencilOutline,
     onAction: () => void goto(`${AppRoute.SHARED_LINKS}/${sharedLink.id}`),
   };
 
   const Delete: ActionItem = {
     title: $t('delete_link'),
-    icon: mdiDelete,
+    icon: mdiTrashCanOutline,
     color: 'danger',
     onAction: () => void handleDeleteSharedLink(sharedLink),
   };