Rename things

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

@@ -1,8 +1,8 @@
 <script lang="ts">
   import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
   import AssetLayout from '$lib/components/timeline/base-components/AssetLayout.svelte';
-  import BaseTimelineViewer from '$lib/components/timeline/base-components/base-timeline-viewer.svelte';
-  import SelectableTimelineMonth from '$lib/components/timeline/internal-components/selectable-timeline-month.svelte';
+  import BaseTimelineViewer from '$lib/components/timeline/base-components/Stream.svelte';
+  import SelectableTimelineMonth from '$lib/components/timeline/internal-components/SelectableSegment.svelte';
   import Skeleton from '$lib/elements/Skeleton.svelte';
   import { SearchStreamManager } from '$lib/managers/timeline-manager/SearchStreamManager.svelte';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';

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

@@ -1,10 +1,10 @@
 <script lang="ts">
   import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
   import TimelineKeyboardActions from '$lib/components/timeline/actions/timeline-keyboard-actions.svelte';
-  import BaseTimeline from '$lib/components/timeline/base-components/base-timeline.svelte';
-  import TimelineMonth from '$lib/components/timeline/base-components/timeline-month.svelte';
-  import SelectableTimelineDaygroup from '$lib/components/timeline/internal-components/selectable-timeline-daygroup.svelte';
-  import SelectableTimelineMonth from '$lib/components/timeline/internal-components/selectable-timeline-month.svelte';
+  import StreamWithScrubber from '$lib/components/timeline/base-components/StreamWithScrubber.svelte';
+  import TimelineMonth from '$lib/components/timeline/base-components/Segment.svelte';
+  import SelectableDayGroup from '$lib/components/timeline/internal-components/SelectableDayGroup.svelte';
+  import SelectableSegment from '$lib/components/timeline/internal-components/SelectableSegment.svelte';
   import TimelineAssetViewer from '$lib/components/timeline/internal-components/timeline-asset-viewer.svelte';
   import type { AssetAction } from '$lib/constants';
   import Portal from '$lib/elements/Portal.svelte';
@@ -71,11 +71,11 @@
     empty,
   }: Props = $props();
 
-  let viewer: BaseTimeline | undefined = $state();
+  let viewer: StreamWithScrubber | undefined = $state();
   let showSkeleton: boolean = $state(true);
 </script>
 
-<BaseTimeline
+<StreamWithScrubber
   bind:this={viewer}
   {enableRouting}
   {timelineManager}
@@ -91,7 +91,7 @@
     />
   {/snippet}
   {#snippet segment({ segment, onScrollCompensationMonthInDOM })}
-    <SelectableTimelineMonth
+    <SelectableSegment
       {segment}
       {onScrollCompensationMonthInDOM}
       {timelineManager}
@@ -100,7 +100,7 @@
       {singleSelect}
     >
       {#snippet content({ onAssetOpen, onAssetSelect, onHover })}
-        <SelectableTimelineDaygroup {timelineManager} {assetInteraction} {onAssetSelect}>
+        <SelectableDayGroup {timelineManager} {assetInteraction} {onAssetSelect}>
           {#snippet content({ onDayGroupSelect, onDayGroupAssetSelect })}
             <TimelineMonth
               {assetInteraction}
@@ -132,11 +132,11 @@
               {/snippet}
             </TimelineMonth>
           {/snippet}
-        </SelectableTimelineDaygroup>
+        </SelectableDayGroup>
       {/snippet}
-    </SelectableTimelineMonth>
+    </SelectableSegment>
   {/snippet}
-</BaseTimeline>
+</StreamWithScrubber>
 
 <TimelineKeyboardActions
   scrollToAsset={(asset) => viewer?.scrollToAsset(asset) ?? false}

web/src/lib/components/timeline/base-components/StreamWithScrubber.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import BaseTimelineViewer from '$lib/components/timeline/base-components/base-timeline-viewer.svelte';
+  import BaseTimelineViewer from '$lib/components/timeline/base-components/Stream.svelte';
   import Scrubber from '$lib/components/timeline/Scrubber.svelte';
   import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
   import type { PhotostreamSegment } from '$lib/managers/timeline-manager/PhotostreamSegment.svelte';

web/src/lib/components/timeline/base-components/month-group-segment.svelte

@@ -1,73 +0,0 @@
-<script lang="ts">
-  import Skeleton from '$lib/elements/Skeleton.svelte';
-  import type { DayGroup } from '$lib/managers/timeline-manager/day-group.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 type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { type Snippet } from 'svelte';
-
-  interface Props {
-    segment: MonthGroup;
-    timelineManager: TimelineManager;
-    customThumbnailLayout?: Snippet<[TimelineAsset]>;
-    isSelectionMode?: boolean;
-    singleSelect?: boolean;
-    assetInteraction: AssetInteraction;
-    withStacked?: boolean;
-    showArchiveIcon?: boolean;
-    scrollToFunction: (top: number) => void;
-    onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => void;
-    onSelect?: (asset: TimelineAsset) => void;
-    onTriggeredScrollCompensation: (compensation: { heightDelta?: number; scrollTop?: number }) => void;
-  }
-
-  let {
-    segment: monthGroup,
-    timelineManager,
-    customThumbnailLayout,
-    isSelectionMode = false,
-    singleSelect = false,
-    assetInteraction,
-    withStacked = false,
-    showArchiveIcon = false,
-    scrollToFunction,
-    onAssetOpen,
-    onSelect,
-    onTriggeredScrollCompensation,
-  }: Props = $props();
-
-  const shouldDisplay = $derived(monthGroup.intersecting);
-  const absoluteHeight = $derived(monthGroup.top);
-</script>
-
-<p id="a">a</p>
-{#if !shouldDisplay}
-  <div
-    style:height={monthGroup.height + 'px'}
-    style:position="absolute"
-    style:transform={`translate3d(0,${monthGroup.top}px,0)`}
-    style:width="100%"
-  >
-    <Skeleton height={monthGroup.height - monthGroup.timelineManager.headerHeight} title={monthGroup.monthGroupTitle} />
-  </div>
-{:else}
-  <div
-    class="month-group"
-    style:height={monthGroup.height + 'px'}
-    style:position="absolute"
-    style:transform={`translate3d(0,${monthGroup.top}px,0)`}
-    style:width="100%"
-  >
-    {@render contents()}
-  </div>
-{/if}
-
-<style>
-  .month-group {
-    contain: layout size paint;
-    transform-style: flat;
-    backface-visibility: hidden;
-    transform-origin: center center;
-  }
-</style>

web/src/lib/components/timeline/base-components/skeleton.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-  interface Props {
-    height: number;
-    title: string;
-  }
-
-  let { height = 0, title }: Props = $props();
-</script>
-
-<div class="overflow-clip" style:height={height + 'px'}>
-  <div
-    class="flex pt-7 pb-5 h-6 place-items-center text-xs font-medium text-immich-fg bg-light dark:text-immich-dark-fg md:text-sm"
-  >
-    {title}
-  </div>
-  <div class="animate-pulse absolute h-full w-full" data-skeleton="true"></div>
-</div>
-
-<style>
-  [data-skeleton] {
-    background-image: url('/light_skeleton.png');
-    background-repeat: repeat;
-    background-size: 235px, 235px;
-  }
-  @media (max-width: 767px) {
-    [data-skeleton] {
-      background-size: 100px, 100px;
-    }
-  }
-  :global(.dark) [data-skeleton] {
-    background-image: url('/dark_skeleton.png');
-  }
-  @keyframes delayedVisibility {
-    to {
-      visibility: visible;
-    }
-  }
-  [data-skeleton] {
-    visibility: hidden;
-    animation:
-      0s linear 0.1s forwards delayedVisibility,
-      pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  }
-</style>