feat(playlists): fix the playlist header, scroll only the list

Lift the playlist detail header — cover/title/actions (Play all, sync,
delete) and the sort/group controls row — into the shell's fixed band via
PageToolbar, so only the video list scrolls under it. Matches the
feed/channel/manager pattern. Verified with a 40-item playlist: the header
holds at a fixed offset while the list scrolls. Suite 15/15, tsc + knip.

frontend/src/components/Playlists.tsx

@@ -38,6 +38,7 @@ import { notifyYouTubeActionError } from "../lib/youtubeErrors";
 import { useUndoable } from "../lib/useUndoable";
 const PlayerModal = lazy(() => import("./PlayerModal"));
 import UndoToolbar from "./UndoToolbar";
+import { PageToolbar } from "./PageShell";
 import { useConfirm } from "./ConfirmProvider";
 
 type SortKey = "manual" | "title" | "duration" | "channel";
@@ -443,13 +444,17 @@ export default function Playlists({
   }
 
   return (
-    <div className="px-4 pb-4">
+    <div className="px-4 pb-4 pt-3">
         {selectedId == null || !detail ? (
           <div className="text-muted text-sm p-4">
             {selectedId == null ? t("playlists.pickOne") : t("playlists.loading")}
           </div>
         ) : (
           <>
+            {/* Header (title, actions, sort/group) is fixed chrome — it portals into the shell's
+                fixed band, so only the video list scrolls. */}
+            <PageToolbar>
+            <div className="px-4 pt-3 pb-2">
             <div className="flex gap-3 items-start mb-4">
               <div className="w-24 h-[54px] rounded-lg bg-card overflow-hidden shrink-0">
                 {items[0]?.thumbnail_url && (
@@ -624,6 +629,8 @@ export default function Playlists({
                 </div>
               </div>
             )}
+            </div>
+            </PageToolbar>
 
             {items.length === 0 ? (
               <div className="text-sm text-muted grid place-items-center text-center py-12">