feat(playlists): unify Saved into a built-in Watch later playlist

The old per-video status='saved' becomes membership in a built-in, undeletable
'watch_later' playlist. Migration 0012 moves existing saved videos into each user's
Watch later list and demotes the states to 'new'. The feed/playlist serializers now
expose a 'saved' boolean (EXISTS in watch_later); the card bookmark toggles watch_later
via new /api/playlists/watch-later add/remove endpoints (create-on-demand) instead of
setting a status. Removed the 'saved' show-filter and status. Watch later shows a
localized name and hides rename/delete in the Playlists page and add-to-playlist popover.
This commit is contained in:
npeter83 2026-06-15 15:33:53 +02:00
parent 86844b0bdd
commit 2f66196816
12 changed files with 260 additions and 36 deletions

View file

@ -137,6 +137,11 @@ export default function Playlists() {
useSensor(PointerSensor, { activationConstraint: { distance: 4 } })
);
// Watch later is a built-in playlist: show a localized name and no rename/delete.
const plName = (p: { kind: string; name: string }) =>
p.kind === "watch_later" ? t("playlists.watchLater") : p.name;
const builtin = detail?.kind === "watch_later";
const createMut = useMutation({
mutationFn: (name: string) => api.createPlaylist(name),
onSuccess: (pl: Playlist) => {
@ -230,7 +235,7 @@ export default function Playlists() {
)}
</div>
<div className="min-w-0">
<div className="text-[13px] text-fg truncate">{pl.name}</div>
<div className="text-[13px] text-fg truncate">{plName(pl)}</div>
<div className="text-[11px] text-muted">
{t("playlists.itemCount", { count: pl.item_count })}
</div>
@ -287,17 +292,19 @@ export default function Playlists() {
/>
) : (
<div className="flex items-center gap-2">
<h2 className="text-lg font-semibold truncate">{detail.name}</h2>
<button
onClick={() => {
setRenameValue(detail.name);
setRenaming(true);
}}
title={t("playlists.rename")}
className="text-muted hover:text-fg"
>
<Pencil className="w-3.5 h-3.5" />
</button>
<h2 className="text-lg font-semibold truncate">{plName(detail)}</h2>
{!builtin && (
<button
onClick={() => {
setRenameValue(detail.name);
setRenaming(true);
}}
title={t("playlists.rename")}
className="text-muted hover:text-fg"
>
<Pencil className="w-3.5 h-3.5" />
</button>
)}
</div>
)}
<div className="text-xs text-muted mt-0.5">
@ -311,12 +318,14 @@ export default function Playlists() {
>
<Play className="w-3.5 h-3.5 fill-current" /> {t("playlists.playAll")}
</button>
<button
onClick={deletePlaylist}
className="inline-flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg border border-border text-muted hover:text-fg hover:border-accent transition"
>
<Trash2 className="w-3.5 h-3.5" /> {t("playlists.delete")}
</button>
{!builtin && (
<button
onClick={deletePlaylist}
className="inline-flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg border border-border text-muted hover:text-fg hover:border-accent transition"
>
<Trash2 className="w-3.5 h-3.5" /> {t("playlists.delete")}
</button>
)}
</div>
</div>
</div>