- Create new StreamWithViewer component to handle asset viewer lifecycle
and navigation
- Move beforeNavigate/afterNavigate hooks from Timeline to StreamWithViewer
- Extract asset viewer Portal rendering and close handler to wrapper
component
- Move timeline segment loading logic for viewed assets to StreamWithViewer
- Simplify Timeline component by removing ~76 lines of navigation/viewer
code
- Remove showSkeleton state management from Timeline (now handled by
PhotostreamWithScrubber)
This separation of concerns makes the Timeline component more focused on
rendering while StreamWithViewer handles all viewer-related navigation and state
management.The new component can be reused by other photostream-like components that
need asset viewer functionality.
- Add configurable header height props for responsive layouts
(smallHeaderHeight/largeHeaderHeight)
- Add style customization props: styleMarginContentHorizontal,
styleMarginTop, alwaysShowScrollbar
- Replace hardcoded layout values with configurable props
- Change root element from <section> to custom <photostream> element for
better semantic structure
- Move viewport width binding to inner timeline element for more accurate
measurements
- Simplify HMR handler by removing file-specific checks
- Add segment loading check to prevent rendering unloaded segments
- Add spacing margin between month groups using layout options
- Change scrollbar-width from 'auto' to 'thin' for consistency
- Remove unused UpdatePayload type import
- Extract common timeline functionality into Photostream.svelte
base component
- Create PhotostreamWithScrubber.svelte to handle scrubber
integration
- Simplify Timeline.svelte by removing ~300 lines of
scrolling/scrubber logic
- Add findMonthAtScrollPosition utility with binary search for
better performance
- Maintain all existing functionality while improving code
organization
- Move asset selection, range selection, and keyboard interaction logic
to SelectableSegment
- Extract day group selection logic to SelectableDay component
- Simplify Timeline component by removing selection-related state and
handlers
- Fix scroll compensation handling with dedicated while loop
- Remove unused keyboard handlers from Scrubber component
- Extracts the asset grid rendering logic from `MonthSegment` into a
dedicated `AssetLayout` component
- Simplifies `MonthSegment` by delegating layout responsibilities
while maintaining all existing functionality
- Renames `customLayout` prop to `customThumbnailLayout` for clarity
across Timeline components
## Changes
- Created new `AssetLayout.svelte` component that handles:
- Asset grid rendering with proper positioning
- Animation transitions
- Filtering of intersecting viewer assets
- Updated `MonthSegment.svelte` to use `AssetLayout` via composition
pattern
- Renamed `customLayout` to `customThumbnailLayout` in Timeline and
related components
- Moved thumbnail click and selection logic to Timeline parent
component using snippets
Create abstract PhotostreamManager and PhotostreamSegment base classes to enable reusable
timeline-like components. This refactoring extracts common viewport management, scroll
handling, and segment operations from TimelineManager and MonthGroup into reusable
abstractions.
Changes:
- Add PhotostreamManager.svelte.ts with viewport and scroll management
- Add PhotostreamSegment.svelte.ts with segment positioning and intersection logic
- Refactor TimelineManager to extend PhotostreamManager
- Refactor MonthGroup to extend PhotostreamSegment
- Add utility functions for segment identification and date formatting
- Update tests to reflect new inheritance structure
- Extracted asset viewer navigation and action handling logic from Timeline.svelte into a dedicated TimelineAssetViewer component
- Reduces Timeline.svelte complexity by ~150 lines and improves separation of concerns
- No functional changes - purely a refactoring to improve code organization
## Changes
- Created new TimelineAssetViewer.svelte component containing all asset viewer-related logic
- Moved handlePrevious, handleNext, handleRandom, handleClose, handlePreAction, and handleAction methods
- Timeline.svelte now only passes required props to the new component
- Maintained all existing functionality including navigation, asset actions, and stack management
Extracts keyboard shortcuts and related functionality from Timeline component into a dedicated TimelineKeyboardActions component for better separation of concerns and maintainability.
