refactor(web): rename DayGroup to TimelineDay (#27446)

Rename DayGroup class to TimelineDay to better convey that it represents
a single day within the timeline. Updates the file, class, and all
references across 13 files.

Change-Id: I9faef9bad73cd5b11f40daaf5eb140dd6a6a6964

web/src/lib/components/album-page/album-viewer.svelte

@@ -48,7 +48,7 @@
     const asset =
       $slideshowNavigation === SlideshowNavigation.Shuffle
         ? await timelineManager.getRandomAsset()
-        : timelineManager.months[0]?.dayGroups[0]?.viewerAssets[0]?.asset;
+        : timelineManager.months[0]?.timelineDays[0]?.viewerAssets[0]?.asset;
     if (asset) {
       handlePromiseError(
         assetViewerManager.setAssetId(asset.id).then(() => ($slideshowState = SlideshowState.PlaySlideshow)),

web/src/lib/components/timeline/Month.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import AssetLayout from '$lib/components/timeline/AssetLayout.svelte';
   import type { AssetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
-  import { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
+  import { TimelineDay } from '$lib/managers/timeline-manager/timeline-day.svelte';
   import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { assetsSnapshot, filterIsInOrNearViewport } from '$lib/managers/timeline-manager/utils.svelte';
@@ -19,7 +19,7 @@
         {
           asset: TimelineAsset;
           position: CommonPosition;
-          dayGroup: DayGroup;
+          timelineDay: TimelineDay;
           groupIndex: number;
         },
       ]
@@ -29,7 +29,7 @@
     assetInteraction: AssetMultiSelectManager;
     monthGroup: MonthGroup;
     manager: VirtualScrollManager;
-    onDayGroupSelect: (dayGroup: DayGroup, assets: TimelineAsset[]) => void;
+    onTimelineDaySelect: (timelineDay: TimelineDay, assets: TimelineAsset[]) => void;
   };
   let {
     thumbnail: thumbnailWithGroup,
@@ -38,27 +38,27 @@
     assetInteraction,
     monthGroup,
     manager,
-    onDayGroupSelect,
+    onTimelineDaySelect,
   }: Props = $props();
 
   let { isUploading } = uploadAssetsStore;
-  let hoveredDayGroup = $state<string | null>(null);
+  let hoveredTimelineDay = $state<string | null>(null);
 
   const transitionDuration = $derived(monthGroup.timelineManager.suspendTransitions && !$isUploading ? 0 : 150);
 
-  const getDayGroupFullDate = (dayGroup: DayGroup): string => {
-    const { month, year } = dayGroup.monthGroup.yearMonth;
+  const getTimelineDayFullDate = (timelineDay: TimelineDay): string => {
+    const { month, year } = timelineDay.monthGroup.yearMonth;
     const date = fromTimelinePlainDate({
       year,
       month,
-      day: dayGroup.day,
+      day: timelineDay.day,
     });
     return getDateLocaleString(date);
   };
 </script>
 
-{#each filterIsInOrNearViewport(monthGroup.dayGroups) as dayGroup, groupIndex (dayGroup.day)}
-  {@const isDayGroupSelected = assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
+{#each filterIsInOrNearViewport(monthGroup.timelineDays) as timelineDay, groupIndex (timelineDay.day)}
+  {@const isTimelineDaySelected = assetInteraction.selectedGroup.has(timelineDay.groupTitle)}
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <section
     class={[
@@ -67,24 +67,25 @@
     ]}
     data-group
     style:position="absolute"
-    style:inset-inline-start={dayGroup.start + 'px'}
-    style:top={dayGroup.top + 'px'}
-    onmouseenter={() => (hoveredDayGroup = dayGroup.groupTitle)}
-    onmouseleave={() => (hoveredDayGroup = null)}
+    style:inset-inline-start={timelineDay.start + 'px'}
+    style:top={timelineDay.top + 'px'}
+    onmouseenter={() => (hoveredTimelineDay = timelineDay.groupTitle)}
+    onmouseleave={() => (hoveredTimelineDay = null)}
   >
     <!-- Day title -->
     <div
       class="flex pt-7 pb-5 max-md:pt-5 max-md:pb-3 h-6 place-items-center text-xs font-medium text-immich-fg dark:text-immich-dark-fg md:text-sm"
-      style:width={dayGroup.width + 'px'}
+      style:width={timelineDay.width + 'px'}
     >
       {#if !singleSelect}
         <div
           class="hover:cursor-pointer transition-all duration-200 ease-out overflow-hidden w-0"
-          class:w-8={hoveredDayGroup === dayGroup.groupTitle || assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
-          onclick={() => onDayGroupSelect(dayGroup, assetsSnapshot(dayGroup.getAssets()))}
-          onkeydown={() => onDayGroupSelect(dayGroup, assetsSnapshot(dayGroup.getAssets()))}
+          class:w-8={hoveredTimelineDay === timelineDay.groupTitle ||
+            assetInteraction.selectedGroup.has(timelineDay.groupTitle)}
+          onclick={() => onTimelineDaySelect(timelineDay, assetsSnapshot(timelineDay.getAssets()))}
+          onkeydown={() => onTimelineDaySelect(timelineDay, assetsSnapshot(timelineDay.getAssets()))}
         >
-          {#if isDayGroupSelected}
+          {#if isTimelineDaySelected}
             <Icon icon={mdiCheckCircle} size="24" class="text-primary" />
           {:else}
             <Icon icon={mdiCircleOutline} size="24" class="text-light-500" />
@@ -92,20 +93,20 @@
         </div>
       {/if}
 
-      <span class="w-full truncate first-letter:capitalize" title={getDayGroupFullDate(dayGroup)}>
-        {dayGroup.groupTitle}
+      <span class="w-full truncate first-letter:capitalize" title={getTimelineDayFullDate(timelineDay)}>
+        {timelineDay.groupTitle}
       </span>
     </div>
 
     <AssetLayout
       {manager}
-      viewerAssets={dayGroup.viewerAssets}
-      height={dayGroup.height}
-      width={dayGroup.width}
+      viewerAssets={timelineDay.viewerAssets}
+      height={timelineDay.height}
+      width={timelineDay.width}
       {customThumbnailLayout}
     >
       {#snippet thumbnail({ asset, position })}
-        {@render thumbnailWithGroup({ asset, position, dayGroup, groupIndex })}
+        {@render thumbnailWithGroup({ asset, position, timelineDay, groupIndex })}
       {/snippet}
     </AssetLayout>
   </section>

web/src/lib/components/timeline/Timeline.svelte

@@ -13,7 +13,7 @@
   import Skeleton from '$lib/elements/Skeleton.svelte';
   import type { AssetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
-  import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
+  import type { TimelineDay } from '$lib/managers/timeline-manager/timeline-day.svelte';
   import { isIntersecting } from '$lib/managers/timeline-manager/internal/intersection-support.svelte';
   import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
@@ -52,7 +52,7 @@
     onThumbnailClick?: (
       asset: TimelineAsset,
       timelineManager: TimelineManager,
-      dayGroup: DayGroup,
+      timelineDay: TimelineDay,
       onClick: (
         timelineManager: TimelineManager,
         assets: TimelineAsset[],
@@ -390,8 +390,8 @@
     lastAssetMouseEvent = asset;
   };
 
-  const handleGroupSelect = (dayGroup: DayGroup, assets: TimelineAsset[]) => {
-    const group = dayGroup.groupTitle;
+  const handleGroupSelect = (timelineDay: TimelineDay, assets: TimelineAsset[]) => {
+    const group = timelineDay.groupTitle;
     if (assetInteraction.selectedGroup.has(group)) {
       assetInteraction.removeGroupFromMultiselectGroup(group);
       for (const asset of assets) {
@@ -468,12 +468,12 @@
         const monthGroup = monthGroups[index];
 
         // Split month group into day groups and check each group
-        for (const dayGroup of monthGroup.dayGroups) {
-          const dayGroupTitle = dayGroup.groupTitle;
-          if (dayGroup.getAssets().every((a) => assetInteraction.hasSelectedAsset(a.id))) {
-            assetInteraction.addGroupToMultiselectGroup(dayGroupTitle);
+        for (const timelineDay of monthGroup.timelineDays) {
+          const timelineDayTitle = timelineDay.groupTitle;
+          if (timelineDay.getAssets().every((a) => assetInteraction.hasSelectedAsset(a.id))) {
+            assetInteraction.addGroupToMultiselectGroup(timelineDayTitle);
           } else {
-            assetInteraction.removeGroupFromMultiselectGroup(dayGroupTitle);
+            assetInteraction.removeGroupFromMultiselectGroup(timelineDayTitle);
           }
         }
       }
@@ -524,16 +524,18 @@
   const assetSelectHandler = (
     timelineManager: TimelineManager,
     asset: TimelineAsset,
-    assetsInDayGroup: TimelineAsset[],
+    assetsInTimelineDay: TimelineAsset[],
     groupTitle: string,
   ) => {
     void onSelectAssets(asset);
 
     // Check if all assets are selected in a group to toggle the group selection's icon
-    let selectedAssetsInGroupCount = assetsInDayGroup.filter(({ id }) => assetInteraction.hasSelectedAsset(id)).length;
+    let selectedAssetsInGroupCount = assetsInTimelineDay.filter(({ id }) =>
+      assetInteraction.hasSelectedAsset(id),
+    ).length;
 
     // if all assets are selected in a group, add the group to selected group
-    if (selectedAssetsInGroupCount === assetsInDayGroup.length) {
+    if (selectedAssetsInGroupCount === assetsInTimelineDay.length) {
       assetInteraction.addGroupToMultiselectGroup(groupTitle);
     } else {
       assetInteraction.removeGroupFromMultiselectGroup(groupTitle);
@@ -668,9 +670,9 @@
             {singleSelect}
             {monthGroup}
             manager={timelineManager}
-            onDayGroupSelect={handleGroupSelect}
+            onTimelineDaySelect={handleGroupSelect}
           >
-            {#snippet thumbnail({ asset, position, dayGroup, groupIndex })}
+            {#snippet thumbnail({ asset, position, timelineDay, groupIndex })}
               {@const isAssetSelectionCandidate = assetInteraction.hasSelectionCandidate(asset.id)}
               {@const isAssetSelected =
                 assetInteraction.hasSelectedAsset(asset.id) || timelineManager.albumAssets.has(asset.id)}
@@ -683,14 +685,14 @@
                 {groupIndex}
                 onClick={(asset) => {
                   if (typeof onThumbnailClick === 'function') {
-                    onThumbnailClick(asset, timelineManager, dayGroup, _onClick);
+                    onThumbnailClick(asset, timelineManager, timelineDay, _onClick);
                   } else {
-                    _onClick(timelineManager, dayGroup.getAssets(), dayGroup.groupTitle, asset);
+                    _onClick(timelineManager, timelineDay.getAssets(), timelineDay.groupTitle, asset);
                   }
                 }}
                 onSelect={() => {
                   if (isSelectionMode || assetInteraction.selectionActive) {
-                    assetSelectHandler(timelineManager, asset, dayGroup.getAssets(), dayGroup.groupTitle);
+                    assetSelectHandler(timelineManager, asset, timelineDay.getAssets(), timelineDay.groupTitle);
                     return;
                   }
                   void onSelectAssets(asset);