From 560dbd3c65e7657e0d6aa5f374e5f4f80b2e7c5b Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Mon, 1 Jul 2024 00:34:52 +0200
Subject: [PATCH] fix(web): shared link card (#10702)

---
 .../covers/share-cover.svelte                 |  2 +-
 .../sharedlinks-page/shared-link-card.svelte  | 94 ++++++-------------
 2 files changed, 32 insertions(+), 64 deletions(-)

diff --git a/web/src/lib/components/sharedlinks-page/covers/share-cover.svelte b/web/src/lib/components/sharedlinks-page/covers/share-cover.svelte
index a82db72b7798c..63d50d60e65c7 100644
--- a/web/src/lib/components/sharedlinks-page/covers/share-cover.svelte
+++ b/web/src/lib/components/sharedlinks-page/covers/share-cover.svelte
@@ -12,7 +12,7 @@
   export { className as class };
 </script>
 
-<div class="relative aspect-square">
+<div class="relative aspect-square shrink-0">
   {#if link?.album}
     <AlbumCover album={link.album} class={className} {preload} />
   {:else if link.assets[0]}
diff --git a/web/src/lib/components/sharedlinks-page/shared-link-card.svelte b/web/src/lib/components/sharedlinks-page/shared-link-card.svelte
index 06dad3913aac2..6f375ded48869 100644
--- a/web/src/lib/components/sharedlinks-page/shared-link-card.svelte
+++ b/web/src/lib/components/sharedlinks-page/shared-link-card.svelte
@@ -1,71 +1,55 @@
 <script lang="ts">
+  import Badge from '$lib/components/elements/badge.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
+  import ShareCover from '$lib/components/sharedlinks-page/covers/share-cover.svelte';
   import { AppRoute } from '$lib/constants';
+  import { locale } from '$lib/stores/preferences.store';
   import { SharedLinkType, type SharedLinkResponseDto } from '@immich/sdk';
   import { mdiCircleEditOutline, mdiContentCopy, mdiDelete, mdiOpenInNew } from '@mdi/js';
-  import * as luxon from 'luxon';
+  import { DateTime, type ToRelativeUnit } from 'luxon';
   import { createEventDispatcher } from 'svelte';
-  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
-  import { locale } from '$lib/stores/preferences.store';
-  import ShareCover from '$lib/components/sharedlinks-page/covers/share-cover.svelte';
   import { t } from 'svelte-i18n';
+  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
 
   export let link: SharedLinkResponseDto;
 
-  let expirationCountdown: luxon.DurationObjectUnits;
   const dispatch = createEventDispatcher<{
     delete: void;
     copy: void;
     edit: void;
   }>();
 
-  const getCountDownExpirationDate = () => {
-    if (!link.expiresAt) {
-      return;
+  let now = DateTime.now();
+  $: expiresAt = link.expiresAt ? DateTime.fromISO(link.expiresAt) : undefined;
+  $: isExpired = expiresAt ? now > expiresAt : false;
+
+  const getCountDownExpirationDate = (expiresAtDate: DateTime, now: DateTime) => {
+    const relativeUnits: ToRelativeUnit[] = ['days', 'hours', 'minutes', 'seconds'];
+    const expirationCountdown = expiresAtDate.diff(now, relativeUnits).toObject();
+
+    for (const unit of relativeUnits) {
+      const value = expirationCountdown[unit];
+      if (value && value > 0) {
+        return expiresAtDate.toRelativeCalendar({ base: now, locale: $locale, unit });
+      }
     }
-
-    const expiresAtDate = luxon.DateTime.fromISO(new Date(link.expiresAt).toISOString(), { locale: $locale });
-    const now = luxon.DateTime.now();
-
-    expirationCountdown = expiresAtDate.diff(now, ['days', 'hours', 'minutes', 'seconds']).toObject();
-
-    if (expirationCountdown.days && expirationCountdown.days > 0) {
-      return expiresAtDate.toRelativeCalendar({ base: now, locale: $locale, unit: 'days' });
-    } else if (expirationCountdown.hours && expirationCountdown.hours > 0) {
-      return expiresAtDate.toRelativeCalendar({ base: now, locale: $locale, unit: 'hours' });
-    } else if (expirationCountdown.minutes && expirationCountdown.minutes > 0) {
-      return expiresAtDate.toRelativeCalendar({ base: now, locale: $locale, unit: 'minutes' });
-    } else if (expirationCountdown.seconds && expirationCountdown.seconds > 0) {
-      return expiresAtDate.toRelativeCalendar({ base: now, locale: $locale, unit: 'seconds' });
-    }
-  };
-
-  const isExpired = (expiresAt: string) => {
-    const now = Date.now();
-    const expiration = new Date(expiresAt).getTime();
-
-    return now > expiration;
   };
 </script>
 
 <div
   class="flex w-full gap-4 border-b border-gray-200 py-4 transition-all hover:border-immich-primary dark:border-gray-600 dark:text-immich-gray dark:hover:border-immich-dark-primary"
 >
-  <div>
-    <ShareCover class="h-[100px] w-[100px] transition-all duration-300 hover:shadow-lg" {link} />
-  </div>
+  <ShareCover class="size-24 transition-all duration-300 hover:shadow-lg" {link} />
 
   <div class="flex flex-col justify-between">
     <div class="info-top">
       <div class="font-mono text-xs font-semibold text-gray-500 dark:text-gray-400">
-        {#if link.expiresAt}
-          {#if isExpired(link.expiresAt)}
-            <p class="font-bold text-red-600 dark:text-red-400">{$t('expired')}</p>
-          {:else}
-            <p>
-              {$t('expires_date', { values: { date: getCountDownExpirationDate() } })}
-            </p>
-          {/if}
+        {#if isExpired}
+          <p class="font-bold text-red-600 dark:text-red-400">{$t('expired')}</p>
+        {:else if expiresAt}
+          <p>
+            {$t('expires_date', { values: { date: getCountDownExpirationDate(expiresAt, now) } })}
+          </p>
         {:else}
           <p>{$t('expires_date', { values: { date: '∞' } })}</p>
         {/if}
@@ -81,7 +65,7 @@
             <p>{$t('individual_share').toUpperCase()}</p>
           {/if}
 
-          {#if !link.expiresAt || !isExpired(link.expiresAt)}
+          {#if !isExpired}
             <a href="{AppRoute.SHARE}/{link.key}" title={$t('go_to_share_page')}>
               <Icon path={mdiOpenInNew} />
             </a>
@@ -92,37 +76,21 @@
       </div>
     </div>
 
-    <div class="info-bottom flex gap-4">
+    <div class="info-bottom flex gap-4 text-xl">
       {#if link.allowUpload}
-        <div
-          class="flex w-[80px] place-content-center place-items-center rounded-full bg-immich-primary px-2 py-1 text-xs text-white dark:bg-immich-dark-primary dark:text-immich-dark-gray"
-        >
-          {$t('upload')}
-        </div>
+        <Badge rounded="full"><span class="text-xs px-1">{$t('upload')}</span></Badge>
       {/if}
 
       {#if link.allowDownload}
-        <div
-          class="flex w-[100px] place-content-center place-items-center rounded-full bg-immich-primary px-2 py-1 text-xs text-white dark:bg-immich-dark-primary dark:text-immich-dark-gray"
-        >
-          {$t('download')}
-        </div>
+        <Badge rounded="full"><span class="text-xs px-1">{$t('download')}</span></Badge>
       {/if}
 
       {#if link.showMetadata}
-        <div
-          class="flex w-[60px] place-content-center place-items-center rounded-full bg-immich-primary px-2 py-1 text-xs text-white dark:bg-immich-dark-primary dark:text-immich-dark-gray"
-        >
-          {$t('exif').toUpperCase()}
-        </div>
+        <Badge rounded="full"><span class="text-xs px-1">{$t('exif').toUpperCase()}</span></Badge>
       {/if}
 
       {#if link.password}
-        <div
-          class="flex w-[100px] place-content-center place-items-center rounded-full bg-immich-primary px-2 py-1 text-xs text-white dark:bg-immich-dark-primary dark:text-immich-dark-gray"
-        >
-          {$t('password')}
-        </div>
+        <Badge rounded="full"><span class="text-xs px-1">{$t('password')}</span></Badge>
       {/if}
     </div>
   </div>