feat(discovery-v2): Qobuz-style hover overlay with 3 action buttons
Replaces the bottom-gradient + corner play button with the full-cover
hover overlay pattern from the Qobuz web player:
- Dark scrim covers the whole artwork on hover (rgba(0,0,0,0.6)
instead of bottom-fade gradient). Single `::after` element, pure
opacity transition.
- Three outline-style action buttons centered on the cover:
* Primary play (filled white circle, 44px)
* Favorite/heart (outlined circle, 36px; fills + accent color
when isFavorite=true)
* Menu/kebab (outlined circle, 36px; emits onMenu — parent will
wire to context menu in a follow-up)
- All three only visible on hover via opacity + pointer-events. No
slide-in keyframes, no scale-up entrance, no blur. The buttons sit
on a separate `.actions` container above the scrim — both fade in
together via the same 150ms transition.
DiscoveryView subscribes to `albumFavoritesStore` and bumps a `$state`
version counter on each notification so per-card `isFavorite` reads in
the snippet re-evaluate when the favorites set changes. `onFavorite`
toggles via `toggleAlbumFavorite(albumId)` which already handles the
optimistic V2 round-trip + cache sync.
i18n: adds `actions.toggleFavorite` and `actions.moreActions` across
the five locales (en/es/de/fr/pt) for aria-label.
The `onMenu` callback is stubbed at the DiscoveryView level — clicking
the kebab does nothing yet. Wiring it to a context menu with the queue
/ share / download actions the parent already exposes via Props is the
next iteration.
cc
This commit is contained in:
7 files changed
+134
-35
No files matched your search
@@ -52,6 +52,8 @@
|
||||
"goToAlbum": "Ir para Álbum",
|
||||
"trackInfo": "Informações da Faixa",
|
||||
"more": "Mais",
|
||||
"toggleFavorite": "Alternar favorito",
|
||||
"moreActions": "Mais ações",
|
||||
"back": "Voltar",
|
||||
"seeAll": "Ver Tudo",
|
||||
"cancel": "Cancelar",
|
||||
|
||||
Reference in new issue
Block a user