From f5767ff55eb08f32d59bc1e779132b20f73fdd1c Mon Sep 17 00:00:00 2001
From: Senko-san <senko@Senko-sans-Mac-mini.local>
Date: Sat, 13 Jun 2026 17:49:06 +0300
Subject: [PATCH] feat(track): show now-playing bars overlay on cover art

Overlay the accent-coloured "hopping bars" PlayingIndicator on a
track's cover art wherever TrackRow appears when it's the active
player track, and reuse the same component/overlay for the current
entry's cover in the queue panel.
---
 src/components/player/QueuePanel.tsx |  9 +++++++-
 src/components/track/TrackRow.tsx    | 11 ++++++----
 src/styles/shell.css                 | 32 ++++++++++++++++++++++++++++
 3 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/src/components/player/QueuePanel.tsx b/src/components/player/QueuePanel.tsx
index 98606ff..c2382ba 100644
--- a/src/components/player/QueuePanel.tsx
+++ b/src/components/player/QueuePanel.tsx
@@ -248,7 +248,14 @@ function QueueRow({
           <Icon name="dots-six-vertical" />
         </span>
       )}
-      <ArtTile seed={albumTitle} size={36} label={albumTitle} src={artUrl} />
+      <div className="qart">
+        <ArtTile seed={albumTitle} size={36} label={albumTitle} src={artUrl} />
+        {isCurrent && (
+          <div className="cover-playing">
+            <PlayingIndicator animate={isPlaying} />
+          </div>
+        )}
+      </div>
       <div className="qt">
         <div className="t">{resolved?.title ?? entry.title}</div>
         <div className="r">{resolved?.artistName ?? entry.artistName}</div>
diff --git a/src/components/track/TrackRow.tsx b/src/components/track/TrackRow.tsx
index 9b58fff..fe5b154 100644
--- a/src/components/track/TrackRow.tsx
+++ b/src/components/track/TrackRow.tsx
@@ -4,6 +4,7 @@ import { TrackContextMenu } from './TrackContextMenu';
 import { AvailabilityBadge } from './AvailabilityBadge';
 import { MetadataStatusBadge } from './MetadataStatusBadge';
 import { Icon } from '../common/Icon';
+import { PlayingIndicator } from '../common/PlayingIndicator';
 import { formatDuration } from '../../lib/format';
 import { useAppDispatch, useAppSelector } from '../../hooks/useAppDispatch';
 import { playNow } from '../../store/slices/queue';
@@ -73,10 +74,7 @@ export function TrackRow({
       >
         {isActive && isPlaying ? '▶' : index !== undefined ? index + 1 : ''}
       </span>
-      <div
-        className="track-art"
-        style={{ position: 'relative', width: 36, height: 36 }}
-      >
+      <div className="track-art">
         {artUrl ? (
           <img
             src={artUrl}
@@ -95,6 +93,11 @@ export function TrackRow({
             }}
           />
         )}
+        {isActive && (
+          <div className="cover-playing">
+            <PlayingIndicator animate={isPlaying} />
+          </div>
+        )}
         <button
           type="button"
           className="track-art-play"
diff --git a/src/styles/shell.css b/src/styles/shell.css
index 551ea63..52efa5d 100644
--- a/src/styles/shell.css
+++ b/src/styles/shell.css
@@ -955,6 +955,14 @@
 /* ============================================================
    TRACK ROW — cover art play overlay
    ============================================================ */
+.track-art {
+  position: relative;
+  width: 36px;
+  height: 36px;
+  flex-shrink: 0;
+  border-radius: 4px;
+  overflow: hidden;
+}
 .track-art-play {
   position: absolute;
   inset: 0;
@@ -976,3 +984,27 @@
 .track-art-play:hover {
   color: var(--lime);
 }
+
+/* Now-playing overlay shown on a cover when its track is the active one
+   (track lists and the queue panel both use this). */
+.cover-playing {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.45);
+}
+.track-art:hover .cover-playing {
+  opacity: 0;
+}
+
+/* Queue row cover-art wrapper, sized to match the 36px ArtTile */
+.qart {
+  position: relative;
+  width: 36px;
+  height: 36px;
+  flex-shrink: 0;
+  border-radius: 6px;
+  overflow: hidden;
+}