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

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Check, Plus } from "lucide-react";
 import { api } from "../lib/api";
+import { useScrollFade } from "../lib/useScrollFade";
 import Modal from "./Modal";
 import { useConfirm } from "./ConfirmProvider";
 
@@ -26,6 +27,8 @@ export default function PlexCollectionEditor({
   const { t } = useTranslation();
   const qc = useQueryClient();
   const confirm = useConfirm();
+  const editableFade = useScrollFade();
+  const othersFade = useScrollFade();
   const [members, setMembers] = useState<Set<string>>(() => new Set(memberOf));
   const [q, setQ] = useState("");
   const [newName, setNewName] = useState("");
@@ -146,7 +149,11 @@ export default function PlexCollectionEditor({
       )}
 
       {/* Editable collections with in/out toggle */}
-      <div className="max-h-80 space-y-1 overflow-y-auto">
+      <div
+        ref={editableFade.ref}
+        style={editableFade.style}
+        className="max-h-80 space-y-1 overflow-y-auto no-scrollbar"
+      >
         {listQ.isLoading ? (
           <p className="py-4 text-center text-sm text-muted">{t("plex.loading")}</p>
         ) : shown.length === 0 ? (
@@ -197,7 +204,11 @@ export default function PlexCollectionEditor({
           <summary className="cursor-pointer text-xs text-muted hover:text-fg">
             {t("plex.collEditor.others", { count: eligible.length })}
           </summary>
-          <div className="mt-2 max-h-40 space-y-1 overflow-y-auto">
+          <div
+            ref={othersFade.ref}
+            style={othersFade.style}
+            className="mt-2 max-h-40 space-y-1 overflow-y-auto no-scrollbar"
+          >
             {eligible.map((c) => (
               <div key={c.id} className="glass-card flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm">
                 <span className="min-w-0 flex-1 truncate">{c.title}</span>