feat(plex): Playlists Phase 1 — per-user ordered watch-lists (Siftlode-native)

Personal ordered lists of Plex items, kept in Siftlode's own DB (works for users
without a Plex account, like watch-state) — the "your own lists" counterpart to
shared collections. Plex-direction sync is a later phase (plex_rating_key
reserved).

Backend: migration 0048 (plex_playlists + plex_playlist_items with position),
PlexPlaylist/PlexPlaylistItem models, and per-user CRUD endpoints under
/api/plex/playlists (list [+?contains for the add dialog], create [seeded],
detail [ordered cards], rename, delete, add/remove item, reorder). _leaf_card
handles the movie/episode mix. Frontend: "Add to playlist" dialog from the movie
info page (all users), a Playlists section in PlexSidebar (list + create),
PlexPlaylistView (reorder up/down, remove, rename, delete, Play all), and
PlexPlayer gained an optional `queue` so play-through follows the list order
(prev/next + auto-advance). i18n en/hu/de. Verified end-to-end on localdev
(backend CRUD + the create→add→view→play-through UI flow).

frontend/src/components/PlexSidebar.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-import { useQuery } from "@tanstack/react-query";
-import { ChevronRight, Film, Layers, SlidersHorizontal, Tv2, X } from "lucide-react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { ChevronRight, Film, Layers, ListMusic, Plus, SlidersHorizontal, Tv2, X } from "lucide-react";
 import { api, EMPTY_PLEX_FILTERS, plexFilterCount, type PlexFilters } from "../lib/api";
 import { useDebounced } from "../lib/useDebounced";
 
@@ -20,6 +20,7 @@ type Props = {
   setSort: (v: string) => void;
   filters: PlexFilters;
   setFilters: (f: PlexFilters) => void;
+  onOpenPlaylist: (id: number) => void;
   collapsed: boolean;
   onToggleCollapse: () => void;
 };
@@ -45,11 +46,23 @@ export default function PlexSidebar({
   setSort,
   filters,
   setFilters,
+  onOpenPlaylist,
   collapsed,
   onToggleCollapse,
 }: Props) {
   const { t } = useTranslation();
   const libsQ = useQuery({ queryKey: ["plex-libraries"], queryFn: api.plexLibraries });
+  const playlistsQ = useQuery({ queryKey: ["plex-playlists"], queryFn: () => api.plexPlaylists() });
+  const [newPlaylist, setNewPlaylist] = useState("");
+  const qc = useQueryClient();
+  async function createPlaylist() {
+    const title = newPlaylist.trim();
+    if (!title) return;
+    const pl = await api.plexCreatePlaylist(title);
+    setNewPlaylist("");
+    qc.invalidateQueries({ queryKey: ["plex-playlists"] });
+    onOpenPlaylist(pl.id);
+  }
   const libs = libsQ.data?.libraries ?? [];
   const activeLib = libs.find((l) => l.key === library);
   const isMovieLib = activeLib?.kind === "movie";
@@ -143,6 +156,45 @@ export default function PlexSidebar({
         </div>
       </Section>
 
+      {/* Playlists — per-user, Siftlode-native ordered watch-lists. Near the top: it's navigation, not
+          a filter. Available in any library. */}
+      <Section label={t("plex.playlist.section")}>
+        <div className="mb-1.5 flex gap-1.5">
+          <input
+            value={newPlaylist}
+            onChange={(e) => setNewPlaylist(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && createPlaylist()}
+            placeholder={t("plex.playlist.newPlaceholder")}
+            className="glass-card min-w-0 flex-1 rounded-lg px-2 py-1 text-xs outline-none focus:border-accent"
+          />
+          <button
+            onClick={createPlaylist}
+            disabled={!newPlaylist.trim()}
+            title={t("plex.playlist.create")}
+            className="glass-card glass-hover shrink-0 rounded-lg p-1.5 disabled:opacity-50"
+          >
+            <Plus className="h-3.5 w-3.5" />
+          </button>
+        </div>
+        {(playlistsQ.data?.playlists ?? []).length === 0 ? (
+          <p className="text-xs text-muted">{t("plex.playlist.none")}</p>
+        ) : (
+          <div className="space-y-0.5">
+            {playlistsQ.data!.playlists.map((p) => (
+              <button
+                key={p.id}
+                onClick={() => onOpenPlaylist(p.id)}
+                className="glass-hover flex w-full items-center gap-2 rounded px-1.5 py-1 text-left text-sm"
+              >
+                <ListMusic className="h-3.5 w-3.5 shrink-0 text-muted" />
+                <span className="min-w-0 flex-1 truncate">{p.title}</span>
+                <span className="shrink-0 text-xs text-muted">{p.item_count}</span>
+              </button>
+            ))}
+          </div>
+        )}
+      </Section>
+
       {anyActive && (
         <button
           onClick={clearAll}