improvement(scroll): fade every capped list's clipped edges

The sweep's own three (the thread, the Plex collections filter, the tag manager)
plus the seven the spec missed — the playlist picker, the row tag menu, the Plex
playlist/collection dialogs, the player's track menu, the video description and
the table's multi-select filter. Same idiom throughout: a height-capped list that
silently clipped its content now says so, and hides its scrollbar like the rail
and the panels already do.

The table's option list is its own module-level component because it owns a hook:
FilterPopover is redeclared per DataTable render, so React remounts it.

frontend/src/components/AddToPlaylist.tsx

@@ -5,6 +5,7 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Check, ListPlus, Plus, Youtube } from "lucide-react";
 import { api, type Playlist } from "../lib/api";
 import { useDismiss } from "../lib/useDismiss";
+import { useScrollFade } from "../lib/useScrollFade";
 
 // A small popover (portaled to body, so the feed grid can't clip it) for toggling a
 // video's membership in the user's playlists, with inline "new playlist" creation.
@@ -17,6 +18,7 @@ export default function AddToPlaylist({
 }) {
   const { t } = useTranslation();
   const qc = useQueryClient();
+  const fade = useScrollFade();
   const triggerRef = useRef<HTMLButtonElement | null>(null);
   const panelRef = useRef<HTMLDivElement | null>(null);
   const [open, setOpen] = useState(false);
@@ -134,7 +136,7 @@ export default function AddToPlaylist({
             <div className="text-xs text-muted px-1.5 pb-1.5">
               {t("playlists.addToPlaylist")}
             </div>
-            <div className="max-h-56 overflow-y-auto">
+            <div ref={fade.ref} style={fade.style} className="max-h-56 overflow-y-auto no-scrollbar">
               {lists.length === 0 && !membership.isLoading && (
                 <div className="text-xs text-muted px-1.5 py-2">
                   {t("playlists.noneYet")}