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:
vicrodh committed 2026-05-11 23:03:13 -06:00
1 parent c15102016f
commit 871e550da3
7 files changed
+134 -35

No files matched your search

+2
View File
@@ -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",