refactor(playlists): scope module state in PlaylistsProvider

Lift the Playlists module's shared local state (rail name filter + selected
playlist) out of App into a split-context PlaylistsProvider, mirroring
FeedFiltersProvider. Header, PlaylistsRail, and the Playlists detail pane read
it via usePlaylists()/usePlaylistsActions() instead of props drilled through
App; the modules take only a uniform `me` prop now. App loses two useStates and
the selected-playlist persistence helper. (Platform S6b.2)
This commit is contained in:
2026-07-18 23:43:19 +02:00
parent f4a68575c5
commit d0fc061795
6 changed files with 95 additions and 48 deletions
+7 -11
View File
@@ -31,7 +31,7 @@ import {
X,
Youtube,
} from "lucide-react";
import { api, type Video } from "../lib/api";
import { api, type Me, type Video } from "../lib/api";
import { formatDuration } from "../lib/format";
import { notify } from "../lib/notifications";
import { notifyYouTubeActionError } from "../lib/youtubeErrors";
@@ -40,6 +40,7 @@ const PlayerModal = lazy(() => import("./PlayerModal"));
import UndoToolbar from "./UndoToolbar";
import { PageToolbar } from "./PageShell";
import { useConfirm } from "./ConfirmProvider";
import { usePlaylists, usePlaylistsActions } from "./PlaylistsProvider";
type SortKey = "manual" | "title" | "duration" | "channel";
type SortDir = "asc" | "desc";
@@ -178,17 +179,12 @@ function Row({
);
}
export default function Playlists({
canWrite,
selectedId,
setSelectedId,
}: {
canWrite: boolean;
// The selected playlist is App state, shared with the App-level PlaylistsRail (which owns the
export default function Playlists({ me }: { me: Me }) {
const canWrite = me.can_write;
// The selected playlist lives in PlaylistsProvider, shared with the PlaylistsRail (which owns the
// list + its rail controls). This detail pane reacts to the selection.
selectedId: number | null;
setSelectedId: (id: number | null) => void;
}) {
const { selectedId } = usePlaylists();
const { setSelectedId } = usePlaylistsActions();
const { t } = useTranslation();
const qc = useQueryClient();
const confirm = useConfirm();