From 5fb43e464d6999947a7940f404e5e5450dac0fcc Mon Sep 17 00:00:00 2001 From: InstaZDLL Date: Tue, 19 May 2026 13:40:17 +0200 Subject: [PATCH 1/2] fix(ui): open cover/artist lightbox on single click The three zoomable images (Now Playing panel cover, artist photo on the Artist page, album cover on the Album page) showed a `cursor-zoom-in` on hover but were wired to `onDoubleClick`, so a single click did nothing and double-click only fired about half the time. Swap to `onClick` so the interaction matches the cursor cue and lands on the first try. --- src/components/layout/NowPlayingPanel.tsx | 2 +- src/components/views/AlbumDetailView.tsx | 2 +- src/components/views/ArtistDetailView.tsx | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/layout/NowPlayingPanel.tsx b/src/components/layout/NowPlayingPanel.tsx index abef69d..b7e93bd 100644 --- a/src/components/layout/NowPlayingPanel.tsx +++ b/src/components/layout/NowPlayingPanel.tsx @@ -140,7 +140,7 @@ export function NowPlayingPanel({ onNavigateToArtist }: NowPlayingPanelProps) {
{/* Large artwork */}
{ + onClick={() => { if (currentTrack.artwork_path) setIsLightboxOpen(true); }} className={ diff --git a/src/components/views/AlbumDetailView.tsx b/src/components/views/AlbumDetailView.tsx index cc54022..d8126d7 100644 --- a/src/components/views/AlbumDetailView.tsx +++ b/src/components/views/AlbumDetailView.tsx @@ -214,7 +214,7 @@ export function AlbumDetailView({ when the side lyrics panel is open. */}
{ + onClick={() => { if (album.artwork_path) setIsLightboxOpen(true); }} className={album.artwork_path ? "cursor-zoom-in" : undefined} diff --git a/src/components/views/ArtistDetailView.tsx b/src/components/views/ArtistDetailView.tsx index fc03663..96c3eeb 100644 --- a/src/components/views/ArtistDetailView.tsx +++ b/src/components/views/ArtistDetailView.tsx @@ -257,7 +257,7 @@ export function ArtistDetailView({ {artist.name} setIsLightboxOpen(true)} + onClick={() => setIsLightboxOpen(true)} className="w-48 h-48 rounded-full object-cover shadow-lg cursor-zoom-in" /> ) : ( @@ -268,7 +268,7 @@ export function ArtistDetailView({
)} {/* The wrapper is pointer-events-none so the underlying - keeps receiving onDoubleClick (lightbox); the inner button + keeps receiving onClick (lightbox); the inner button re-enables pointer events for the small pencil hit area. */}