fix(ui): open cover/artist lightbox on single click

[InstaZDLL]

Summary

• Three zoomable images (NowPlayingPanel cover, ArtistDetailView photo, AlbumDetailView cover) showed cursor-zoom-in but were wired to onDoubleClick, so a single click did nothing and double-click only landed half the time.
• Swap the three handlers to onClick so the interaction matches the cursor cue and the lightbox opens on the first try.
• The artist edit-pencil button is unaffected — it already lives inside the standard pointer-events-none wrapper + pointer-events-auto button pattern.

Test plan

• bun run tauri dev
• Open « En cours de lecture » → 1 clic sur la pochette ouvre la lightbox immédiatement.
• Sur la page artiste, 1 clic sur la photo ronde ouvre la lightbox (le crayon en bas à droite reste cliquable et indépendant).
• Sur la page album, 1 clic sur la pochette ouvre la lightbox.
• bun run typecheck && bun run lint — déjà verts en local.

[coderabbitai]

Warning

Rate limit exceeded

@InstaZDLL has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 59 minutes and 16 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 30bd2973-8eed-418b-a160-0408795d3661

📥 Commits

Reviewing files that changed from the base of the PR and between d826129 and 5ad6e9d.

⛔ Files ignored due to path filters (2)

• bun.lock is excluded by !**/*.lock, !bun.lock, !*.lock
• src-tauri/Cargo.lock is excluded by !**/*.lock, !src-tauri/Cargo.lock

📒 Files selected for processing (3)

• src/components/layout/NowPlayingPanel.tsx
• src/components/views/AlbumDetailView.tsx
• src/components/views/ArtistDetailView.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/image-lightbox-single-click

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[qodo-code-review]

Review Summary by Qodo

Fix image lightbox opening on single click instead of double click

🐞 Bug fix

Walkthroughs

Description

• Changed three image lightbox triggers from onDoubleClick to onClick
• Aligns cursor feedback (cursor-zoom-in) with actual interaction behavior
• Affects Now Playing panel cover, Artist detail photo, and Album detail cover
• Updated related comment documenting the pointer-events pattern

Diagram

flowchart LR
  A["onDoubleClick handlers"] -- "replaced with" --> B["onClick handlers"]
  B -- "applied to" --> C["NowPlayingPanel cover"]
  B -- "applied to" --> D["ArtistDetailView photo"]
  B -- "applied to" --> E["AlbumDetailView cover"]
  C -- "matches" --> F["cursor-zoom-in cursor"]
  D -- "matches" --> F
  E -- "matches" --> F

Loading

File Changes

1. src/components/layout/NowPlayingPanel.tsx 🐞 Bug fix +1/-1

Now Playing panel cover single-click lightbox

• Changed artwork container from onDoubleClick to onClick handler
• Maintains conditional check for currentTrack.artwork_path before opening lightbox
• Preserves cursor-zoom-in class styling

src/components/layout/NowPlayingPanel.tsx

---

2. src/components/views/AlbumDetailView.tsx 🐞 Bug fix +1/-1

Album detail cover single-click lightbox

• Changed album cover container from onDoubleClick to onClick handler
• Maintains conditional check for album.artwork_path before opening lightbox
• Preserves cursor-zoom-in class styling

src/components/views/AlbumDetailView.tsx

---

3. src/components/views/ArtistDetailView.tsx 🐞 Bug fix +2/-2

Artist detail photo single-click lightbox

• Changed artist photo <img> element from onDoubleClick to onClick handler
• Updated inline comment to reflect onClick instead of onDoubleClick
• Maintains pointer-events pattern for edit button overlay functionality

src/components/views/ArtistDetailView.tsx

---

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (1) 📘 Rule violations (0)

1. Mouse-only lightbox trigger 🐞 Bug ⚙ Maintainability

Description

NowPlayingPanel, AlbumDetailView, and ArtistDetailView open their lightboxes via onClick on
non-interactive elements (<div> and <img>) that are not keyboard-focusable and lack key handlers,
making the interaction mouse-only and inaccessible to keyboard users. This also degrades
useModalA11y focus restoration because the opener often won’t be the document.activeElement at open
time, so focus can’t reliably return to the trigger on close.

Code

src/components/layout/NowPlayingPanel.tsx[R142-145]

            <div
-              onDoubleClick={() => {
+              onClick={() => {
                if (currentTrack.artwork_path) setIsLightboxOpen(true);
              }}

Evidence

In NowPlayingPanel and AlbumDetailView, the lightbox opener is attached to a plain <div onClick>,
and in ArtistDetailView it is attached directly to an <img onClick>; neither element is
keyboard-focusable by default nor provides built-in keyboard activation. The app’s modal
accessibility helper (useModalA11y) captures document.activeElement when opening the modal and
uses it for focus restoration on close, but because these triggers are non-focusable they won’t
reliably be the active element when clicked, which both blocks keyboard activation and undermines
correct focus return behavior.

src/components/layout/NowPlayingPanel.tsx[140-160]
src/hooks/useModalA11y.ts[28-77]
src/components/views/AlbumDetailView.tsx[209-233]
src/components/views/ArtistDetailView.tsx[250-283]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Multiple lightbox triggers are implemented with `onClick` on non-interactive elements (`<div>` in `NowPlayingPanel`/`AlbumDetailView` and `<img>` in `ArtistDetailView`). This makes the lightbox mouse-only (not keyboard-activatable), and it also interferes with `useModalA11y` focus management because the trigger element is unlikely to be `document.activeElement` when the modal opens, preventing reliable focus restoration on close.

## Issue Context
- `useModalA11y` captures `document.activeElement` on modal open and restores focus to it on close; non-focusable openers won’t reliably be captured as the active element.
- `ArtistDetailView` already uses an overlay edit button with a `pointer-events-none` / `pointer-events-auto` pattern; the lightbox trigger needs to remain compatible with that overlay while becoming keyboard accessible.
- In some views the trigger should be disabled/omitted when artwork is missing (e.g., `currentTrack.artwork_path` / `album.artwork_path`).

## Fix Focus Areas
- src/components/layout/NowPlayingPanel.tsx[140-160]
- src/components/views/AlbumDetailView.tsx[209-233]
- src/components/views/ArtistDetailView.tsx[250-283]
- src/hooks/useModalA11y.ts[28-77]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

[Copilot]

Pull request overview

This PR updates zoomable artwork interactions so the Now Playing cover, artist photo, and album cover open their lightbox on a single click instead of a double click.

Changes:

• Replaced onDoubleClick with onClick for three lightbox triggers.
• Updated the artist image overlay comment to match the new click behavior.
• Includes unrelated lockfile dependency bumps.

Reviewed changes

Copilot reviewed 3 out of 5 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/components/views/ArtistDetailView.tsx	Makes the artist photo lightbox open on click and updates the overlay comment.
src/components/views/AlbumDetailView.tsx	Makes the album cover lightbox open on click.
src/components/layout/NowPlayingPanel.tsx	Makes the now-playing artwork lightbox open on click.
src-tauri/Cargo.lock	Updates transitive Rust crate versions unrelated to the UI change.
bun.lock	Updates typescript-eslint lockfile metadata unrelated to the UI change.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.