feat(playlists): say which lists YouTube's API cannot give us

The module shows fewer lists than youtube.com, and without a word about it that read as a Siftlode bug (the owner's ask, 2026-09-03). Owner's pick from the S7 mockups (2026-09-19): one quiet line at the foot of the rail, "Missing a list? Why?", whose Why? opens three facts — YouTube's own Watch later and History are closed to its API (the Watch later list here is Siftlode's own), only lists you own sync, and an account with no YouTube channel has no playlists at all.
2026-09-19 17:58:40 +02:00
parent db8ed5a004
commit 7afaba0547
5 changed files with 115 additions and 2 deletions
@@ -0,0 +1,49 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Info } from "lucide-react";
+
+import { PopoverSurface } from "./ui/AnchoredPopover";
+import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
+
+// The playlists module shows fewer lists than youtube.com does, and without a word about it that
+// reads as Siftlode being broken (the owner's ask, 2026-09-03: say it is YouTube's API, up front).
+// Three facts, behind one quiet line at the foot of the rail — the owner's pick from the S7 mockups
+// (2026-09-19): always there to find again, never in the way.
+export default function PlaylistLimitsHint() {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const pop = useAnchoredPopover({
+    open,
+    onOpenChange: setOpen,
+    mode: "dialog",
+    role: "dialog",
+    placement: "right-end",
+    offset: 8,
+  });
+  return (
+    <div className="mt-2 flex items-center gap-1.5 border-t border-border/60 px-1 pt-2 text-2xs text-muted">
+      <Info className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
+      <span>{t("playlists.limits.hint")}</span>
+      <button
+        type="button"
+        ref={pop.refs.setReference}
+        {...pop.getReferenceProps()}
+        className="text-accent hover:underline"
+      >
+        {t("playlists.limits.why")}
+      </button>
+      <PopoverSurface
+        popover={pop}
+        ariaLabel={t("playlists.limits.title")}
+        className="glass-menu w-80 max-w-[calc(100vw-2rem)] rounded-xl p-3.5 text-xs leading-relaxed text-fg animate-[popIn_0.16s_ease]"
+      >
+        <p className="mb-2 font-semibold">{t("playlists.limits.title")}</p>
+        <ul className="list-disc space-y-1.5 pl-4 text-muted">
+          <li>{t("playlists.limits.closed")}</li>
+          <li>{t("playlists.limits.ownOnly")}</li>
+          <li>{t("playlists.limits.noChannel")}</li>
+        </ul>
+      </PopoverSurface>
+    </div>
+  );
+}