From 8e18acff853c92e156da9fb1b688d9ad389583a3 Mon Sep 17 00:00:00 2001
From: Sergey Kondrikov <sergey.kondrikov@gmail.com>
Date: Mon, 3 Jul 2023 15:04:46 +0300
Subject: [PATCH] feat(web): enhance date group title (#3094)

Co-authored-by: Alex <alex.tran1502@gmail.com>
---
 .../photos-page/asset-date-group.svelte       | 42 +++++++++++++++++--
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/photos-page/asset-date-group.svelte b/web/src/lib/components/photos-page/asset-date-group.svelte
index 6298c19a05..c7dc0b67a1 100644
--- a/web/src/lib/components/photos-page/asset-date-group.svelte
+++ b/web/src/lib/components/photos-page/asset-date-group.svelte
@@ -9,7 +9,6 @@
   } from '$lib/stores/asset-interaction.store';
   import { assetStore } from '$lib/stores/assets.store';
   import { locale } from '$lib/stores/preferences.store';
-  import { getAssetRatio } from '$lib/utils/asset-utils';
   import type { AssetResponseDto } from '@api';
   import justifiedLayout from 'justified-layout';
   import lodash from 'lodash-es';
@@ -17,6 +16,8 @@
   import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
   import CircleOutline from 'svelte-material-icons/CircleOutline.svelte';
   import { fly } from 'svelte/transition';
+  import { DateTime, Interval } from 'luxon';
+  import { getAssetRatio } from '$lib/utils/asset-utils';
   import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
 
   export let assets: AssetResponseDto[];
@@ -161,6 +162,41 @@
       dispatch('selectAssetCandidates', { asset });
     }
   };
+
+  const formatGroupTitle = (date: DateTime): string => {
+    const today = DateTime.now().startOf('day');
+
+    // Today
+    if (today.hasSame(date, 'day')) {
+      return 'Today';
+    }
+
+    // Yesterday
+    if (Interval.fromDateTimes(date, today).length('days') == 1) {
+      return 'Yesterday';
+    }
+
+    // Last week
+    if (Interval.fromDateTimes(date, today).length('weeks') < 1) {
+      return date.toLocaleString({ weekday: 'long' });
+    }
+
+    // This year
+    if (today.hasSame(date, 'year')) {
+      return date.toLocaleString({
+        weekday: 'short',
+        month: 'short',
+        day: 'numeric',
+      });
+    }
+
+    return date.toLocaleString({
+      weekday: 'short',
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  };
 </script>
 
 <section
@@ -170,7 +206,7 @@
   bind:clientWidth={viewportWidth}
 >
   {#each assetsGroupByDate as assetsInDateGroup, groupIndex (assetsInDateGroup[0].id)}
-    {@const dateGroupTitle = new Date(assetsInDateGroup[0].fileCreatedAt).toLocaleDateString($locale, groupDateFormat)}
+    {@const dateGroupTitle = formatGroupTitle(DateTime.fromISO(assetsInDateGroup[0].fileCreatedAt).startOf('day'))}
     <!-- Asset Group By Date -->
 
     <div
@@ -204,7 +240,7 @@
           </div>
         {/if}
 
-        <span class="truncate" title={dateGroupTitle}>
+        <span class="first-letter:capitalize truncate" title={dateGroupTitle}>
           {dateGroupTitle}
         </span>
       </p>