- 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
Moves common asset operation methods (upsertAssets, removeAssets,
updateAssetOperation) from TimelineManager into PhotostreamManager
base class, making them available to all photostream implementations.
Updates all consuming components to use the more accurate 'upsertAssets'
naming instead of separate 'addAssets' and 'updateAssets' methods.
- Move asset operation methods to PhotostreamManager base class
- Replace addAssets/updateAssets calls with unified upsertAssets method
- Update type imports to use PhotostreamManager instead of TimelineManager
- Remove operations-support.svelte.ts (functionality moved to base class)
- Add abstract upsertAssetIntoSegment method for subclass customization
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.
* Fix issue with context menu jank by only applying overflow styling when transition is complete
* Remove comment
Co-authored-by: Alex <alex.tran1502@gmail.com>
---------
Co-authored-by: Alex <alex.tran1502@gmail.com>
