refactor(web): convert timeline layout options to derived state

- Replace createLayoutOptions() method with derived layoutOptions property for better reactivity. 
- Remove duplicate refreshLayout() implementation 
- Simplify setLayoutOptions() by removing unnecessary change tracking.

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

@@ -230,7 +230,7 @@
 
       <div
         class="month-group"
-        style:margin-bottom={timelineManager.createLayoutOptions().spacing + 'px'}
+        style:margin-bottom={timelineManager.layoutOptions.spacing + 'px'}
         style:position="absolute"
         style:transform={`translate3d(0,${absoluteHeight}px,0)`}
         style:height={`${monthGroup.height}px`}

web/src/lib/managers/photostream-manager/PhotostreamManager.svelte.ts

@@ -30,6 +30,13 @@ export abstract class PhotostreamManager {
     bottom: this.#scrollTop + this.viewportHeight,
   }));
 
+  layoutOptions = $derived({
+    spacing: 2,
+    heightTolerance: 0.15,
+    rowHeight: this.rowHeight,
+    rowWidth: Math.floor(this.viewportWidth),
+  });
+
   protected initTask = new CancellableTask(
     () => (this.isInitialized = true),
     () => (this.isInitialized = false),
@@ -53,13 +60,9 @@ export abstract class PhotostreamManager {
   abstract get months(): PhotostreamSegment[];
 
   setLayoutOptions({ headerHeight = 48, rowHeight = 235, gap = 12 }: TimelineManagerLayoutOptions) {
-    let changed = false;
-    changed ||= this.#setHeaderHeight(headerHeight);
-    changed ||= this.#setGap(gap);
-    changed ||= this.#setRowHeight(rowHeight);
-    if (changed) {
-      this.refreshLayout();
-    }
+    this.#setHeaderHeight(headerHeight);
+    this.#setGap(gap);
+    this.#setRowHeight(rowHeight);
   }
 
   #setHeaderHeight(value: number) {
@@ -203,17 +206,6 @@ export abstract class PhotostreamManager {
     this.updateIntersections();
   }
 
-  createLayoutOptions() {
-    const viewportWidth = this.viewportWidth;
-
-    return {
-      spacing: 2,
-      heightTolerance: 0.15,
-      rowHeight: this.#rowHeight,
-      rowWidth: Math.floor(viewportWidth),
-    };
-  }
-
   async loadSegment(identifier: SegmentIdentifier, options?: { cancelable: boolean }): Promise<void> {
     let cancelable = true;
     if (options) {
@@ -248,13 +240,6 @@ export abstract class PhotostreamManager {
     return Promise.resolve(void 0);
   }
 
-  refreshLayout() {
-    for (const month of this.months) {
-      updateGeometry(this, month, { invalidateHeight: true });
-    }
-    this.updateIntersections();
-  }
-
   getMaxScrollPercent() {
     const totalHeight = this.timelineHeight + this.bottomSectionHeight + this.topSectionHeight;
     return (totalHeight - this.viewportHeight) / totalHeight;

web/src/lib/managers/searchresults-manager/SearchResultsSegment.svelte.ts

@@ -74,7 +74,7 @@ export class SearchResultsSegment extends PhotostreamSegment {
 
   layout(): void {
     const timelineAssets = this.#viewerAssets.map((viewerAsset) => viewerAsset.asset);
-    const layoutOptions = this.timelineManager.createLayoutOptions();
+    const layoutOptions = this.timelineManager.layoutOptions;
     const geometry = getJustifiedLayoutFromAssets(timelineAssets, layoutOptions);
 
     this.height = timelineAssets.length === 0 ? 0 : geometry.containerHeight + this.timelineManager.headerHeight;

web/src/lib/managers/timeline-manager/internal/layout-support.svelte.ts

@@ -34,7 +34,7 @@ export function layoutMonthGroup(timelineManager: TimelineManager, month: MonthG
   let dayGroupRow = 0;
   let dayGroupCol = 0;
 
-  const options = timelineManager.createLayoutOptions();
+  const options = timelineManager.layoutOptions;
   for (const dayGroup of month.dayGroups) {
     dayGroup.layout(options, noDefer);
 

web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts

@@ -14,7 +14,6 @@ import { isEqual } from 'lodash-es';
 import { SvelteDate, SvelteMap, SvelteSet } from 'svelte/reactivity';
 
 import { PhotostreamManager } from '$lib/managers/photostream-manager/PhotostreamManager.svelte';
-import { updateGeometry } from '$lib/managers/timeline-manager/internal/layout-support.svelte';
 import {
   addAssetsToMonthGroups,
   runAssetOperation,
@@ -264,13 +263,6 @@ export class TimelineManager extends PhotostreamManager {
     return [...unprocessedIds];
   }
 
-  refreshLayout() {
-    for (const month of this.months) {
-      updateGeometry(this, month, { invalidateHeight: true });
-    }
-    this.updateIntersections();
-  }
-
   getFirstAsset(): TimelineAsset | undefined {
     return this.months[0]?.getFirstAsset();
   }