Use text color of enable/disable shared link properties

web/src/lib/components/sharedlinks-page/SharedLinkCard.svelte

@@ -5,8 +5,7 @@
   import { getSharedLinkActions } from '$lib/services/shared-link.service';
   import { locale } from '$lib/stores/preferences.store';
   import { SharedLinkType, type SharedLinkResponseDto } from '@immich/sdk';
-  import { ContextMenuButton, Icon, MenuItemType, Text } from '@immich/ui';
-  import { mdiDownload, mdiInformationOutline, mdiLink, mdiLock, mdiUpload } from '@mdi/js';
+  import { ContextMenuButton, MenuItemType, Text } from '@immich/ui';
   import { DateTime, type ToRelativeUnit } from 'luxon';
   import { t } from 'svelte-i18n';
 
@@ -33,6 +32,28 @@
   };
 
   const { Edit, Copy, Delete } = $derived(getSharedLinkActions($t, sharedLink));
+
+  const capabilities = $derived.by(() => {
+    const items = [];
+
+    if (sharedLink.allowUpload) {
+      items.push($t('upload'));
+    }
+
+    if (sharedLink.allowDownload) {
+      items.push($t('download'));
+    }
+
+    if (sharedLink.showMetadata) {
+      items.push($t('exif'));
+    }
+
+    if (sharedLink.password) {
+      items.push($t('password'));
+    }
+
+    return items;
+  });
 </script>
 
 <div
@@ -70,26 +91,15 @@
         {/if}
       </div>
 
-      <div class="flex flex-wrap gap-1">
-        {#if sharedLink.slug}
-          <Icon icon={mdiLink} size="18" title={$t('custom_url')} />
-        {/if}
-
-        {#if sharedLink.allowUpload}
-          <Icon icon={mdiUpload} size="18" title={$t('upload')} />
-        {/if}
-
-        {#if sharedLink.showMetadata && sharedLink.allowDownload}
-          <Icon icon={mdiDownload} size="18" title={$t('download')} />
-        {/if}
-
-        {#if sharedLink.showMetadata}
-          <Icon icon={mdiInformationOutline} size="18" title={$t('exif')} />
-        {/if}
-
-        {#if sharedLink.password}
-          <Icon icon={mdiLock} size="18" title={$t('password')} />
-        {/if}
+      <div class="flex flex-wrap items-center gap-2">
+        {#each capabilities as capability, index (index)}
+          <Text size="small" color="primary" class="font-medium">
+            {capability}
+          </Text>
+          {#if index < capabilities.length - 1}
+            <Text size="small" color="muted">•</Text>
+          {/if}
+        {/each}
       </div>
     </div>
   </svelte:element>

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

@@ -17,7 +17,7 @@ import {
   type SharedLinkResponseDto,
 } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
-import { mdiContentCopy, mdiDeleteOutline, mdiPencilOutline, 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) => {
@@ -29,7 +29,7 @@ export const getSharedLinkActions = ($t: MessageFormatter, sharedLink: SharedLin
 
   const Delete: ActionItem = {
     title: $t('delete_link'),
-    icon: mdiDeleteOutline,
+    icon: mdiTrashCanOutline,
     color: 'danger',
     onAction: () => handleDeleteSharedLink(sharedLink),
   };