feat(playlists): frontend foundation — page, add-to-playlist, nav

Add the Playlists page (left rail of playlists + detail with drag&drop reorder,
inline rename, one-step delete, remove item, Play all / row-click playback via the
existing PlayerModal) and an AddToPlaylist popover (portaled, multi-toggle +
inline new-playlist) wired into the VideoCard hover overlay and the PlayerModal.
New api client methods + Playlist types, a 'playlists' page route + account-menu
entry, and trilingual strings. Local only — YouTube sync comes in later phases.

frontend/src/components/AddToPlaylist.tsx

@@ -0,0 +1,173 @@
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Check, ListPlus, Plus } from "lucide-react";
+import { api, type Playlist } from "../lib/api";
+
+// A small popover (portaled to body, so the feed grid can't clip it) for toggling a
+// video's membership in the user's playlists, with inline "new playlist" creation.
+export default function AddToPlaylist({
+  videoId,
+  className,
+}: {
+  videoId: string;
+  className?: string;
+}) {
+  const { t } = useTranslation();
+  const qc = useQueryClient();
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+  const panelRef = useRef<HTMLDivElement | null>(null);
+  const [open, setOpen] = useState(false);
+  const [coords, setCoords] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
+  const [newName, setNewName] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  const membership = useQuery({
+    queryKey: ["playlist-membership", videoId],
+    queryFn: () => api.playlists(videoId),
+    enabled: open,
+  });
+
+  function place() {
+    const r = triggerRef.current?.getBoundingClientRect();
+    if (!r) return;
+    const width = 240;
+    setCoords({
+      top: Math.round(r.bottom + 6),
+      left: Math.round(Math.min(r.left, window.innerWidth - width - 8)),
+    });
+  }
+
+  function toggleOpen(e: React.MouseEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!open) place();
+    setOpen((o) => !o);
+  }
+
+  useEffect(() => {
+    if (!open) return;
+    function onDoc(e: MouseEvent) {
+      if (
+        !panelRef.current?.contains(e.target as Node) &&
+        !triggerRef.current?.contains(e.target as Node)
+      )
+        setOpen(false);
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("mousedown", onDoc);
+    document.addEventListener("keydown", onKey);
+    window.addEventListener("resize", place);
+    window.addEventListener("scroll", place, true);
+    return () => {
+      document.removeEventListener("mousedown", onDoc);
+      document.removeEventListener("keydown", onKey);
+      window.removeEventListener("resize", place);
+      window.removeEventListener("scroll", place, true);
+    };
+  }, [open]);
+
+  function refresh() {
+    qc.invalidateQueries({ queryKey: ["playlist-membership", videoId] });
+    qc.invalidateQueries({ queryKey: ["playlists"] });
+  }
+
+  async function toggle(pl: Playlist) {
+    if (busy) return;
+    setBusy(true);
+    try {
+      if (pl.has_video) await api.removeFromPlaylist(pl.id, videoId);
+      else await api.addToPlaylist(pl.id, videoId);
+      refresh();
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function createAndAdd(e: React.FormEvent) {
+    e.preventDefault();
+    const name = newName.trim();
+    if (!name || busy) return;
+    setBusy(true);
+    try {
+      const pl = await api.createPlaylist(name);
+      await api.addToPlaylist(pl.id, videoId);
+      setNewName("");
+      refresh();
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const lists = membership.data ?? [];
+
+  return (
+    <>
+      <button
+        ref={triggerRef}
+        onClick={toggleOpen}
+        title={t("playlists.addToPlaylist")}
+        aria-label={t("playlists.addToPlaylist")}
+        className={className ?? "p-1.5 rounded-md hover:bg-surface text-muted hover:text-fg"}
+      >
+        <ListPlus className="w-4 h-4" />
+      </button>
+
+      {open &&
+        createPortal(
+          <div
+            ref={panelRef}
+            style={{ position: "fixed", top: coords.top, left: coords.left, width: 240 }}
+            className="z-50 glass rounded-xl p-2 shadow-2xl"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="text-xs text-muted px-1.5 pb-1.5">
+              {t("playlists.addToPlaylist")}
+            </div>
+            <div className="max-h-56 overflow-y-auto">
+              {lists.length === 0 && !membership.isLoading && (
+                <div className="text-xs text-muted px-1.5 py-2">
+                  {t("playlists.noneYet")}
+                </div>
+              )}
+              {lists.map((pl) => (
+                <button
+                  key={pl.id}
+                  onClick={() => toggle(pl)}
+                  disabled={busy}
+                  className="w-full flex items-center gap-2 text-sm px-1.5 py-1.5 rounded-lg text-fg hover:bg-card/60 transition disabled:opacity-50"
+                >
+                  <span
+                    className={`grid place-items-center w-4 h-4 rounded border ${
+                      pl.has_video
+                        ? "bg-accent border-accent text-accent-fg"
+                        : "border-border"
+                    }`}
+                  >
+                    {pl.has_video && <Check className="w-3 h-3" />}
+                  </span>
+                  <span className="truncate">{pl.name}</span>
+                </button>
+              ))}
+            </div>
+            <form
+              onSubmit={createAndAdd}
+              className="flex items-center gap-1.5 border-t border-border mt-1.5 pt-1.5"
+            >
+              <Plus className="w-3.5 h-3.5 text-muted shrink-0" />
+              <input
+                value={newName}
+                onChange={(e) => setNewName(e.target.value)}
+                placeholder={t("playlists.newPlaylist")}
+                className="flex-1 min-w-0 bg-card border border-border rounded-md px-2 py-1 text-xs outline-none focus:border-accent"
+              />
+            </form>
+          </div>,
+          document.body
+        )}
+    </>
+  );
+}