feat: queue-ux-improvements (#419)

* feat(queue): add ETA display, equalizer indicator and collapsible now playing

* deleted endsAt and showDuration strings, changed eta update to 30s

* feat(queue): ETA tooltip, persistent Now Playing collapse, EQ bar pause, remove redundant Play icon

* feat(queue): fold ETA into existing total/remaining toggle as third mode

The standalone ETA span next to the track counter is removed; instead the
clickable duration label in the queue header now rotates through three
modes per click: total → remaining → eta → total. Counter (N/M) stays
where it was.

ETA mode keeps the live-feel treatment from the original PR (accent
colour while playing, muted at 50% opacity when paused). The other two
modes use plain accent.

i18n: queue.etaTooltip removed (no longer a separate descriptive label),
queue.showEta added as the action tooltip ('Show estimated end time')
in all 8 locales — matches the showRemaining / showTotal pattern.

* docs(changelog): add #419 queue UX improvements entry

Adds the [1.45.0] / Added entry for this PR's queue panel refinements
(position counter, tri-state duration toggle including ETA, collapsible
Now Playing section, animated EQ indicator).

---------

Co-authored-by: Psychotoxical <171614930+Psychotoxical@users.noreply.github.com>

src/components/AlbumRow.tsx

@@ -13,11 +13,9 @@ interface Props {
   moreText?: string;
   onLoadMore?: () => Promise<void>;
   showRating?: boolean;
-  /** Optional content rendered in the row header, left of the scroll-nav. */
-  headerExtra?: React.ReactNode;
 }
 
-export default function AlbumRow({ title, titleLink, albums, moreLink, moreText, onLoadMore, showRating, headerExtra }: Props) {
+export default function AlbumRow({ title, titleLink, albums, moreLink, moreText, onLoadMore, showRating }: Props) {
   const { t } = useTranslation();
   const scrollRef = useRef<HTMLDivElement>(null);
   const navigate = useNavigate();
@@ -73,16 +71,15 @@ export default function AlbumRow({ title, titleLink, albums, moreLink, moreText,
           <h2 className="section-title" style={{ marginBottom: 0 }}>{title}</h2>
         )}
         <div className="album-row-nav">
-          {headerExtra}
-          <button
-            className={`nav-btn ${!showLeft ? 'disabled' : ''}`}
+          <button 
+            className={`nav-btn ${!showLeft ? 'disabled' : ''}`} 
             onClick={() => scroll('left')}
             disabled={!showLeft}
           >
             <ChevronLeft size={20} />
           </button>
-          <button
-            className={`nav-btn ${!showRight ? 'disabled' : ''}`}
+          <button 
+            className={`nav-btn ${!showRight ? 'disabled' : ''}`} 
             onClick={() => scroll('right')}
             disabled={!showRight}
           >