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/OverlayScrollArea.tsx

@@ -20,8 +20,6 @@ export type OverlayScrollAreaProps = {
   viewportScrollBehaviorAuto?: boolean;
   /** Ref to the scrollable element (querySelector, scrollIntoView, etc.). */
   viewportRef?: React.Ref<HTMLDivElement>;
-  /** Ref to the outer wrapper (incl. overlay scrollbar rail). */
-  wrapRef?: React.Ref<HTMLDivElement>;
   /** Optional id on the viewport (e.g. main app scroll for route pages). */
   viewportId?: string;
   /** Optional wheel handler on the scrollable viewport. */
@@ -51,7 +49,6 @@ export default function OverlayScrollArea({
   railInset = 'none',
   viewportScrollBehaviorAuto = false,
   viewportRef: viewportRefProp,
-  wrapRef: wrapRefProp,
   viewportId,
   viewportOnWheel,
   viewportOnTouchMove,
@@ -112,11 +109,6 @@ export default function OverlayScrollArea({
     assignRef(viewportRefProp, el);
   };
 
-  const setWrapNode = (el: HTMLDivElement | null) => {
-    wrapRef.current = el;
-    assignRef(wrapRefProp, el);
-  };
-
   const rootClass = [
     'overlay-scroll',
     RAIL_INSET_CLASS[railInset],
@@ -129,7 +121,7 @@ export default function OverlayScrollArea({
   const viewportClass = ['overlay-scroll__viewport', viewportClassName].filter(Boolean).join(' ');
 
   return (
-    <div ref={setWrapNode} className={rootClass} onMouseMove={onMouseMove}>
+    <div ref={wrapRef} className={rootClass} onMouseMove={onMouseMove}>
       <div
         id={viewportId}
         ref={setViewportNode}