- Dim non-hovered person thumbnails to 40% opacity when any face is active
- Add ring highlight on the active person's thumbnail
- Add focus-visible outline styling for keyboard navigation
- Apply same treatment to both detail panel people section and edit faces side panel
Change-Id: I4ac10fe4568b95f3e0e8d9104133180f6a6a6964
Co-authored-by: Alex <alex.tran1502@gmail.com>
- Add subtle drop shadow to the asset viewer nav bar for better visual
separation from the image behind it
- Add drop shadow to the OCR text recognition button in the lower right
- Prevent nav bar action buttons from shrinking to nothing by adding
*:shrink-0 to the flex container, with p-1/-m-1 to avoid clipping
focus outlines
Change-Id: I61cdc0ec66a65cde1c95b40c2c5428006a6a6964
When hovering over a detected face in the photo viewer, an SVG mask overlay
dims the rest of the image (40% black) while leaving the hovered face fully
visible. The overlay fades in/out smoothly via CSS opacity transition by
freezing the last highlighted box positions in state, preventing the overlay
from popping off instantly when the mouse leaves.
Change-Id: I07e2eb2b297820ec89812785fe7943846a6a6964
- Precise font sizing using canvas measureText instead of character-count heuristic
- Fix overlay repositioning on viewport resize by computing metrics from reactive state instead of DOM reads
- Fix animation delay on resize by using transition-colors instead of transition-all
- Add keyboard accessibility: OCR boxes are focusable via Tab with reading-order sort
- Show text on focus (same styling as hover) with proper ARIA attributes
* feat(web): adaptive progressive image loading for photo viewer
Replace ImageManager with a new AdaptiveImageLoader that progressively
loads images through quality tiers (thumbnail → preview → original).
New components and utilities:
- AdaptiveImage: layered image renderer with thumbhash, thumbnail,
preview, and original layers with visibility managed by load state
- AdaptiveImageLoader: state machine driving the quality progression
with per-quality callbacks and error handling
- ImageLayer/Image: low-level image elements with load/error lifecycle
- PreloadManager: preloads adjacent assets for instant navigation
- AlphaBackground/DelayedLoadingSpinner: loading state UI
Zoom is handled via a derived CSS transform applied to the content
wrapper in AdaptiveImage, with the zoom library (zoomTarget: null)
only tracking state without manipulating the DOM directly.
Also adds scaleToCover to container-utils and getAssetUrls to utils.
* fix: don't partially render images in firefox
* add passive loading indicator to asset-viewer
---------
Co-authored-by: Alex <alex.tran1502@gmail.com>
* feat(web): when hovering over a face already deteced, display the bounding box also shown when hovering over the person in the details-pane.
* prevent lint error
* fix unused var
