Split asset date group into (temp) generic and selection-aware components

• Rename asset-date-group.svelte to asset-date-group-comp.svelte as generic base
• Create asset-date-group-selection-aware.svelte wrapper for selection logic
• Extract selection-specific callbacks into separate handlers
• Update onDateGroupSelect to onDayGroupSelect with DayGroup parameter

.vscode/settings.json

@@ -50,7 +50,7 @@
     "editor.formatOnSave": true,
     "editor.tabSize": 2
   },
-  "cSpell.words": ["immich"],
+  "cSpell.words": ["immich", "intersectable", "intersectables"],
   "editor.formatOnSave": true,
   "eslint.validate": ["javascript", "svelte"],
   "explorer.fileNesting.enabled": true,

web/src/lib/components/photos-page/asset-date-group-comp.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
+  import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import { assetSnapshot, assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
+  import { uploadAssetsStore } from '$lib/stores/upload';
+
+  import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
+
+  import { flip } from 'svelte/animate';
+  import { fly, scale } from 'svelte/transition';
+
+  import { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
+  import type { Snippet } from 'svelte';
+
+  let { isUploading } = uploadAssetsStore;
+
+  interface Props {
+    isSelectionMode: boolean;
+    singleSelect: boolean;
+    withStacked: boolean;
+    showArchiveIcon: boolean;
+    monthGroup: MonthGroup;
+    timelineManager: TimelineManager;
+    customLayout?: Snippet<[TimelineAsset]>;
+
+    onScrollCompensation: (compensation: { heightDelta?: number; scrollTop?: number }) => void;
+
+    onHover: (dayGroup: DayGroup, asset: TimelineAsset) => void;
+    onAssetOpen: (dayGroup: DayGroup, asset: TimelineAsset) => void;
+    onAssetSelect: (dayGroup: DayGroup, asset: TimelineAsset) => void;
+    onDayGroupSelect: (dayGroup: DayGroup, assets: TimelineAsset[]) => void;
+
+    // these should be replaced with reactive properties in timelinemanager
+    isDayGroupSelected: (dayGroup: DayGroup) => boolean;
+    isAssetSelected: (asset: TimelineAsset) => boolean;
+    isAssetSelectionCandidate: (asset: TimelineAsset) => boolean;
+    isAssetDisabled: (asset: TimelineAsset) => boolean;
+  }
+
+  let {
+    singleSelect,
+    withStacked,
+    showArchiveIcon,
+    monthGroup,
+    timelineManager,
+    customLayout,
+
+    onScrollCompensation,
+
+    onHover,
+    onAssetOpen,
+    onAssetSelect,
+    onDayGroupSelect,
+
+    isDayGroupSelected,
+    isAssetSelected,
+    isAssetSelectionCandidate,
+    isAssetDisabled,
+  }: Props = $props();
+
+  let isMouseOverGroup = $state(false);
+  let hoveredDayGroup = $state();
+
+  const transitionDuration = $derived.by(() =>
+    monthGroup.timelineManager.suspendTransitions && !$isUploading ? 0 : 150,
+  );
+  const scaleDuration = $derived(transitionDuration === 0 ? 0 : transitionDuration + 100);
+
+  function filterIntersecting<R extends { intersecting: boolean }>(intersectables: R[]) {
+    return intersectables.filter((intersectable) => intersectable.intersecting);
+  }
+
+  $effect.root(() => {
+    if (timelineManager.scrollCompensation.monthGroup === monthGroup) {
+      onScrollCompensation(timelineManager.scrollCompensation);
+      timelineManager.clearScrollCompensation();
+    }
+  });
+</script>
+
+{#each filterIntersecting(monthGroup.dayGroups) as dayGroup, groupIndex (dayGroup.day)}
+  {@const absoluteWidth = dayGroup.left}
+
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <section
+    class={[
+      { 'transition-all': !monthGroup.timelineManager.suspendTransitions },
+      !monthGroup.timelineManager.suspendTransitions && `delay-${transitionDuration}`,
+    ]}
+    data-group
+    style:position="absolute"
+    style:transform={`translate3d(${absoluteWidth}px,${dayGroup.top}px,0)`}
+    onmouseenter={() => {
+      isMouseOverGroup = true;
+      hoveredDayGroup = dayGroup.groupTitle;
+    }}
+    onmouseleave={() => {
+      isMouseOverGroup = false;
+      hoveredDayGroup = null;
+    }}
+  >
+    <!-- Date group 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'}
+    >
+      {#if !singleSelect && ((hoveredDayGroup === dayGroup.groupTitle && isMouseOverGroup) || isDayGroupSelected(dayGroup))}
+        <div
+          transition:fly={{ x: -24, duration: 200, opacity: 0.5 }}
+          class="inline-block pe-2 hover:cursor-pointer"
+          onclick={() => onDayGroupSelect(dayGroup, assetsSnapshot(dayGroup.getAssets()))}
+          onkeydown={() => onDayGroupSelect(dayGroup, assetsSnapshot(dayGroup.getAssets()))}
+        >
+          {#if isDayGroupSelected(dayGroup)}
+            <Icon path={mdiCheckCircle} size="24" class="text-primary" />
+          {:else}
+            <Icon path={mdiCircleOutline} size="24" color="#757575" />
+          {/if}
+        </div>
+      {/if}
+
+      <span class="w-full truncate first-letter:capitalize" title={dayGroup.groupTitle}>
+        {dayGroup.groupTitle}
+      </span>
+    </div>
+
+    <!-- Image grid -->
+    <div
+      data-image-grid
+      class="relative overflow-clip"
+      style:height={dayGroup.height + 'px'}
+      style:width={dayGroup.width + 'px'}
+    >
+      {#each filterIntersecting(dayGroup.viewerAssets) as viewerAsset (viewerAsset.id)}
+        {@const position = viewerAsset.position!}
+        {@const asset = viewerAsset.asset!}
+
+        <!-- note: don't remove data-asset-id - its used by web e2e tests -->
+        <div
+          data-asset-id={asset.id}
+          class="absolute"
+          style:top={position.top + 'px'}
+          style:left={position.left + 'px'}
+          style:width={position.width + 'px'}
+          style:height={position.height + 'px'}
+          out:scale|global={{ start: 0.1, duration: scaleDuration }}
+          animate:flip={{ duration: transitionDuration }}
+        >
+          <Thumbnail
+            showStackedIcon={withStacked}
+            {showArchiveIcon}
+            {asset}
+            {groupIndex}
+            onClick={() => onAssetOpen(dayGroup, assetSnapshot(asset))}
+            onSelect={() => onAssetSelect(dayGroup, assetSnapshot(asset))}
+            onMouseEvent={() => onHover(dayGroup, assetSnapshot(asset))}
+            selected={isAssetSelected(asset)}
+            selectionCandidate={isAssetSelectionCandidate(asset)}
+            disabled={isAssetDisabled(asset)}
+            thumbnailWidth={position.width}
+            thumbnailHeight={position.height}
+          />
+          {#if customLayout}
+            {@render customLayout(asset)}
+          {/if}
+        </div>
+      {/each}
+    </div>
+  </section>
+{/each}
+
+<style>
+  section {
+    contain: layout paint style;
+  }
+  [data-image-grid] {
+    user-select: none;
+  }
+</style>

web/src/lib/components/photos-page/asset-date-group-selection-aware.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+  import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
+  import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+  import { isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
+  import { uploadAssetsStore } from '$lib/stores/upload';
+  import { navigate } from '$lib/utils/navigation';
+
+  import AssetDateGroupComp from '$lib/components/photos-page/asset-date-group-comp.svelte';
+  import { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
+  import { onMount, type Snippet } from 'svelte';
+  import { DateGroupActionLib } from './date-group-actions-lib.svelte';
+
+  let { isUploading } = uploadAssetsStore;
+
+  interface Props {
+    isSelectionMode: boolean;
+    singleSelect: boolean;
+    withStacked: boolean;
+    showArchiveIcon: boolean;
+    monthGroup: MonthGroup;
+    timelineManager: TimelineManager;
+    assetInteraction: AssetInteraction;
+    customLayout?: Snippet<[TimelineAsset]>;
+    onSelect: (asset: TimelineAsset) => void;
+    onScrollCompensation: (compensation: { heightDelta?: number; scrollTop?: number }) => void;
+    onScrollToTop: () => void;
+    onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => void;
+  }
+
+  let {
+    isSelectionMode,
+    singleSelect,
+    withStacked,
+    showArchiveIcon,
+    monthGroup = $bindable(),
+    assetInteraction,
+    timelineManager,
+    customLayout,
+    onSelect,
+    onScrollCompensation,
+    onScrollToTop,
+    onAssetOpen,
+  }: Props = $props();
+
+  const actionLib = new DateGroupActionLib();
+
+  onMount(() => {
+    actionLib.assetInteraction = assetInteraction;
+    actionLib.timelineManager = timelineManager;
+    actionLib.singleSelect = singleSelect;
+    actionLib.onSelect = onSelect;
+    actionLib.onScrollToTop = onScrollToTop;
+  });
+
+  const defaultAssetOpen = (dayGroup: DayGroup, asset: TimelineAsset) => {
+    if (isSelectionMode || assetInteraction.selectionActive) {
+      handleAssetSelect(dayGroup, asset);
+      return;
+    }
+    void navigate({ targetRoute: 'current', assetId: asset.id });
+  };
+
+  const handleOnAssetOpen = (dayGroup: DayGroup, asset: TimelineAsset) => {
+    if (onAssetOpen) {
+      onAssetOpen(dayGroup, asset, () => defaultAssetOpen(dayGroup, asset));
+      return;
+    }
+    defaultAssetOpen(dayGroup, asset);
+  };
+
+  // called when clicking asset with shift key pressed or with mouse
+  const handleAssetSelect = (dayGroup: DayGroup, asset: TimelineAsset) => {
+    void actionLib.onSelectAssets(asset);
+
+    const assetsInDayGroup = dayGroup.getAssets();
+    const groupTitle = dayGroup.groupTitle;
+    // Check if all assets are selected in a group to toggle the group selection's icon
+    let selectedAssetsInGroupCount = assetsInDayGroup.filter((asset) =>
+      assetInteraction.hasSelectedAsset(asset.id),
+    ).length;
+
+    // if all assets are selected in a group, add the group to selected group
+    if (selectedAssetsInGroupCount == assetsInDayGroup.length) {
+      assetInteraction.addGroupToMultiselectGroup(groupTitle);
+    } else {
+      assetInteraction.removeGroupFromMultiselectGroup(groupTitle);
+    }
+
+    if (timelineManager.assetCount == assetInteraction.selectedAssets.length) {
+      isSelectingAllAssets.set(true);
+    } else {
+      isSelectingAllAssets.set(false);
+    }
+  };
+
+  const handleOnHover = (dayGroup: DayGroup, asset: TimelineAsset) => {
+    if (assetInteraction.selectionActive) {
+      actionLib.onSelectAssetCandidates(asset);
+    }
+  };
+</script>
+
+<svelte:document onkeydown={actionLib.onKeyDown} onkeyup={actionLib.onKeyUp} />
+
+<AssetDateGroupComp
+  {customLayout}
+  {isSelectionMode}
+  {singleSelect}
+  {withStacked}
+  {showArchiveIcon}
+  {monthGroup}
+  {timelineManager}
+  {onScrollCompensation}
+  onHover={handleOnHover}
+  onAssetOpen={handleOnAssetOpen}
+  onAssetSelect={handleAssetSelect}
+  onDayGroupSelect={actionLib.onDayGroupSelect}
+  isDayGroupSelected={(dayGroup: DayGroup) => true}
+  isAssetSelected={(asset) => true}
+  isAssetSelectionCandidate={(asset) => true}
+  isAssetDisabled={(asset) => true}
+></AssetDateGroupComp>

web/src/lib/components/photos-page/asset-date-group.svelte

@@ -184,10 +184,8 @@
         <div
           transition:fly={{ x: -24, duration: 200, opacity: 0.5 }}
           class="inline-block pe-2 hover:cursor-pointer"
-          onclick={() =>
-            actionLib.onDateGroupSelect({ title: dayGroup.groupTitle, assets: assetsSnapshot(dayGroup.getAssets()) })}
-          onkeydown={() =>
-            actionLib.onDateGroupSelect({ title: dayGroup.groupTitle, assets: assetsSnapshot(dayGroup.getAssets()) })}
+          onclick={() => actionLib.onDayGroupSelect(dayGroup, assetsSnapshot(dayGroup.getAssets()))}
+          onkeydown={() => actionLib.onDayGroupSelect(dayGroup, assetsSnapshot(dayGroup.getAssets()))}
         >
           {#if assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
             <Icon path={mdiCheckCircle} size="24" class="text-primary" />

web/src/lib/components/photos-page/date-group-actions-lib.svelte.ts

@@ -1,3 +1,4 @@
+import { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
 import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
 import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
 import { assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
@@ -67,7 +68,8 @@ export class DateGroupActionLib {
     this.lastAssetMouseEvent = asset;
   };
 
-  onDateGroupSelect = ({ title: group, assets }: { title: string; assets: TimelineAsset[] }) => {
+  onDayGroupSelect = (dayGroup: DayGroup, assets: TimelineAsset[]) => {
+    const group = dayGroup.groupTitle;
     if (this.assetInteraction.selectedGroup.has(group)) {
       this.assetInteraction.removeGroupFromMultiselectGroup(group);
       for (const asset of assets) {