feat(ui): unified floating side panels for filters and playlists

Replace the full-height filter rails with one shared floating glass SidePanel
used by Feed, Plex and Playlists. Each collapses to a slim tab beside the nav;
its sections are reorderable "islands" (drag / hide / per-group collapse) with a
per-panel saved layout; the body hides its scrollbar with a soft top/bottom edge
fade. The nav rail becomes a matching floating rounded card.

- New shared SidePanel / PanelGroup / PanelGroups + useScrollFade hook.
- Generalise the feed-only sidebarLayout into a per-panel panelLayout (feed keeps
  its storage key; plex/playlists get their own; persisted per account).
- Lift the Playlists rail to App level (selected playlist is now App state) so it
  floats and collapses like the filter rails; remove the old CollapsedFilterRail.
- The floating top header's fixed offset accounts for the panels' margins.

frontend/src/lib/useScrollFade.ts

@@ -0,0 +1,39 @@
+import { useEffect, useState, type CSSProperties } from "react";
+
+// Scroll-affordance for a scroll container whose native scrollbar is hidden (`.no-scrollbar`):
+// fades the top/bottom edge of the content to hint there's more to scroll, but only on the edge
+// that's actually clipped (no fade at a boundary, none when it all fits). Returns a callback ref
+// to attach to the scroller and the mask `style` to spread onto it. Uses a node-state callback
+// ref (not useRef) so the effect (re)runs whenever the element attaches — e.g. a SidePanel that
+// mounts collapsed and only renders its scroll body once expanded still wires up correctly.
+export function useScrollFade(fadePx = 20): {
+  ref: (node: HTMLDivElement | null) => void;
+  style: CSSProperties;
+} {
+  const [el, setEl] = useState<HTMLDivElement | null>(null);
+  const [fade, setFade] = useState({ up: false, down: false });
+
+  useEffect(() => {
+    if (!el) return;
+    const update = () =>
+      setFade({
+        up: el.scrollTop > 1,
+        down: el.scrollTop + el.clientHeight < el.scrollHeight - 1,
+      });
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    // Observe the content wrapper too (if present) so growth/shrink of the list re-evaluates.
+    if (el.firstElementChild) ro.observe(el.firstElementChild);
+    return () => {
+      el.removeEventListener("scroll", update);
+      ro.disconnect();
+    };
+  }, [el]);
+
+  const mask = `linear-gradient(to bottom, transparent, #000 ${fade.up ? fadePx : 0}px, #000 calc(100% - ${
+    fade.down ? fadePx : 0
+  }px), transparent)`;
+  return { ref: setEl, style: { maskImage: mask, WebkitMaskImage: mask } };
+}