Use text color of enable/disable shared link properties

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

@@ -5,7 +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 { Badge, ContextMenuButton, MenuItemType, Text } from '@immich/ui';
+  import { ContextMenuButton, MenuItemType, Text } from '@immich/ui';
   import { DateTime, type ToRelativeUnit } from 'luxon';
   import { t } from 'svelte-i18n';
 
@@ -44,50 +44,64 @@
   >
     <ShareCover class="transition-all duration-300 hover:shadow-lg" {sharedLink} />
 
-    <div class="flex flex-col gap-2">
-      <Text size="large" color="primary" class="flex place-items-center gap-2 break-all">
-        {#if sharedLink.type === SharedLinkType.Album}
-          {sharedLink.album?.albumName}
-        {:else if sharedLink.type === SharedLinkType.Individual}
-          {$t('individual_share')}
-        {/if}
-      </Text>
-
-      <div class="flex flex-wrap gap-1">
-        {#if isExpired}
-          <Badge size="small" color="danger">{$t('expired')}</Badge>
-        {:else if expiresAt}
-          <Badge size="small" color="secondary">
+    <div class="flex flex-col gap-4 justify-between">
+      <div class="flex flex-col">
+        <Text size="tiny" color={isExpired ? 'danger' : 'muted'} class="font-medium">
+          {#if isExpired}
+            {$t('expired')}
+          {:else if expiresAt}
             {$t('expires_date', { values: { date: getCountDownExpirationDate(expiresAt, now) } })}
-          </Badge>
-        {:else}
-          <Badge size="small" color="secondary">{$t('expires_date', { values: { date: '∞' } })}</Badge>
-        {/if}
+          {:else}
+            {$t('expires_date', { values: { date: '∞' } })}
+          {/if}
+        </Text>
 
-        {#if sharedLink.slug}
-          <Badge size="small" color="secondary">{$t('custom_url')}</Badge>
-        {/if}
+        <Text size="large" color="primary" class="flex place-items-center gap-2 break-all font-medium">
+          {#if sharedLink.type === SharedLinkType.Album}
+            {sharedLink.album?.albumName}
+          {:else if sharedLink.type === SharedLinkType.Individual}
+            {$t('individual_share')}
+          {/if}
+        </Text>
 
-        {#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 size="small" color="secondary">{$t('exif')}</Badge>
-        {/if}
-
-        {#if sharedLink.password}
-          <Badge size="small" color="secondary">{$t('password')}</Badge>
+        {#if sharedLink.description}
+          <Text size="small" class="line-clamp-1">{sharedLink.description}</Text>
         {/if}
       </div>
 
-      {#if sharedLink.description}
-        <Text size="small" class="line-clamp-1">{sharedLink.description}</Text>
-      {/if}
+      <div class="flex flex-wrap items-center gap-2">
+        <Text
+          size="small"
+          color={sharedLink.allowUpload ? 'primary' : 'muted'}
+          class={sharedLink.allowUpload ? 'font-medium' : 'opacity-50'}
+        >
+          {$t('upload')}
+        </Text>
+        <Text size="small" color="muted">•</Text>
+        <Text
+          size="small"
+          color={sharedLink.allowDownload ? 'primary' : 'muted'}
+          class={sharedLink.allowDownload ? 'font-medium' : 'opacity-50'}
+        >
+          {$t('download')}
+        </Text>
+        <Text size="small" color="muted">•</Text>
+        <Text
+          size="small"
+          color={sharedLink.showMetadata ? 'primary' : 'muted'}
+          class={sharedLink.showMetadata ? 'font-medium' : 'opacity-50'}
+        >
+          {$t('exif')}
+        </Text>
+        <Text size="small" color="muted">•</Text>
+        <Text
+          size="small"
+          color={sharedLink.password ? 'primary' : 'muted'}
+          class={sharedLink.password ? 'font-medium' : 'opacity-50'}
+        >
+          {$t('password')}
+        </Text>
+      </div>
     </div>
   </svelte:element>
   <div class="flex flex-auto flex-col place-content-center place-items-end text-end ms-4">

web/src/lib/modals/SharedLinkCreateModal.svelte

@@ -4,6 +4,7 @@
   import { SharedLinkType } from '@immich/sdk';
   import { Button, Field, HStack, Input, Modal, ModalBody, ModalFooter, PasswordInput, Switch, Text } from '@immich/ui';
   import { mdiLink } from '@mdi/js';
+  import { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -18,6 +19,7 @@
   let allowDownload = $state(true);
   let allowUpload = $state(false);
   let showMetadata = $state(true);
+  let expirationOption: number = $state(0);
   let password = $state('');
   let slug = $state('');
   let expiresAt = $state<string | null>(null);
@@ -35,7 +37,7 @@
       type: shareType,
       albumId,
       assetIds,
-      expiresAt,
+      expiresAt: expirationOption > 0 ? DateTime.now().plus(expirationOption).toISO() : undefined,
       allowUpload,
       description,
       password,

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

@@ -3,7 +3,7 @@
   import { page } from '$app/state';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
-  import SharedLinkCard from '$lib/components/sharedlinks-page/shared-link-card.svelte';
+  import SharedLinkCard from '$lib/components/sharedlinks-page/SharedLinkCard.svelte';
   import { AppRoute } from '$lib/constants';
   import GroupTab from '$lib/elements/GroupTab.svelte';
   import SharedLinkUpdateModal from '$lib/modals/SharedLinkUpdateModal.svelte';