feat(feed): hover infobox on feed cards — full title, description, tags (E8·S3)

2026-08-26 00:44:27 +02:00
parent edcea87ea5
commit fbb961b5b7
5 changed files with 303 additions and 5 deletions
@@ -0,0 +1,143 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useQuery } from "@tanstack/react-query";
+import { Info } from "lucide-react";
+import { qk } from "../lib/queryKeys";
+import { api, type Video } from "../lib/api";
+import { formatDate, formatDuration, formatViews } from "../lib/format";
+import { linkify } from "../lib/linkify";
+import Avatar from "./Avatar";
+import { PopoverSurface, useAnchoredPopover } from "./AnchoredPopover";
+
+// The feed card's "more than the card face" hover infobox (E8·S3, decision D3): full (un-clamped)
+// title, channel, views·duration·date, a description snippet, and the channel's tags. It hangs off a
+// small ⓘ button — a thumbnail-corner overlay in the four thumbnailed views, an inline button beside
+// the actions in the one-line row (see the caller). It reveals only with the other hover controls on a
+// mouse and is dropped entirely on touch (`.reveal-hover`), where a tap already plays/resumes and a
+// hover card would only be an invisible trap. Hover mode also opens it on keyboard focus, so it stays
+// reachable by Tab.
+//
+// The card face already carries title/channel/date/duration/views, so the box's real added value is
+// the FULL title (the card clamps to 2 lines) plus the description + tags, which aren't in the feed
+// list payload. Both are fetched ON DEMAND on open (like AboutCell): the description via
+// `videoDetail`, the tags by resolving the channel's `tag_ids` (from `channelDetail`, shared with the
+// channel page's cache) against the tag list. Until they land the header still shows from the Video
+// we already have, so the box is never empty.
+//
+// The caller owns the trigger's placement + reveal via `className`: a thumbnail-corner overlay for the
+// four thumbnailed views, an inline button beside the actions for the one-line row. The action ROW
+// itself is budgeted to exactly six buttons (a seventh wraps in every view — see VideoCard's ROW_COL),
+// so the trigger deliberately lives OUTSIDE it.
+export default function VideoInfoCard({
+  video,
+  className,
+}: {
+  video: Video;
+  /** Trigger-button classes (placement + hover-reveal + skin). The reveal/touch-suppression rules
+   *  live here so each host can match its surface (overlay vs inline). */
+  className?: string;
+}) {
+  const { t, i18n } = useTranslation();
+  const [open, setOpen] = useState(false);
+
+  const pop = useAnchoredPopover({
+    open,
+    onOpenChange: setOpen,
+    mode: "hover",
+    placement: "bottom-end",
+    offset: 6,
+    // A touch of open intent (so brushing past the button while reaching another control doesn't
+    // pop it), a longer close grace so the cursor can travel into the interactive card.
+    hoverDelay: { open: 140, close: 160 },
+    fitHeight: true,
+  });
+
+  const { data: detail } = useQuery({
+    queryKey: qk.videoDetail(video.id),
+    queryFn: () => api.videoDetail(video.id),
+    enabled: open,
+    staleTime: 5 * 60_000,
+  });
+  const { data: channel } = useQuery({
+    queryKey: qk.channel(video.channel_id),
+    queryFn: () => api.channelDetail(video.channel_id),
+    enabled: open && !!video.channel_id,
+    staleTime: 5 * 60_000,
+  });
+  const { data: tags } = useQuery({
+    queryKey: qk.tags(),
+    queryFn: () => api.tags(),
+    enabled: open,
+    staleTime: 5 * 60_000,
+  });
+
+  // The channel's tags (`tag_ids`), in the channel's own id order, resolved to names via the tag list.
+  // These are the channel-tags the channel actually carries; an unknown id (a just-deleted tag) drops.
+  const tagNames =
+    channel && tags
+      ? channel.tag_ids
+          .map((id) => tags.find((tg) => tg.id === id))
+          .filter((tg): tg is NonNullable<typeof tg> => !!tg)
+      : [];
+
+  const description = detail?.description?.trim();
+  const metaBits = [
+    video.view_count != null ? `${formatViews(video.view_count)} ${t("card.views")}` : null,
+    video.duration_seconds != null ? formatDuration(video.duration_seconds) : null,
+    video.published_at ? formatDate(video.published_at, i18n.language) : null,
+  ].filter(Boolean);
+
+  return (
+    <>
+      <button
+        type="button"
+        ref={pop.refs.setReference}
+        {...pop.getReferenceProps()}
+        // The overlay trigger sits inside the thumbnail's <a> (like the play buttons), so a click must
+        // both preventDefault (no navigation) and stopPropagation (no card open); harmless inline too.
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}
+        aria-label={t("card.info")}
+        title={t("card.info")}
+        className={className}
+      >
+        <Info className="w-4 h-4" />
+      </button>
+      <PopoverSurface
+        popover={pop}
+        ariaLabel={t("card.info")}
+        className="glass w-[340px] max-w-[92vw] overflow-y-auto rounded-lg px-3.5 py-3 animate-[fadeIn_0.12s_ease]"
+        style={{ maxHeight: "min(26rem, var(--fit-max-h, 26rem))" }}
+      >
+        <p className="text-sm font-medium leading-snug wrap-break-word">{video.title}</p>
+        <div className="mt-2 flex items-center gap-2">
+          <Avatar
+            src={video.channel_thumbnail}
+            fallback={video.channel_title ?? ""}
+            className="w-6 h-6 rounded-full shrink-0"
+          />
+          <span className="text-xs text-muted truncate">{video.channel_title}</span>
+        </div>
+        {metaBits.length > 0 && <p className="mt-1.5 text-xs text-muted">{metaBits.join(" · ")}</p>}
+        {description ? (
+          <p className="mt-2.5 text-xs leading-relaxed text-muted line-clamp-5 wrap-break-word">
+            {linkify(description)}
+          </p>
+        ) : detail ? (
+          <p className="mt-2.5 text-xs italic text-muted">{t("card.noDescription")}</p>
+        ) : null}
+        {tagNames.length > 0 && (
+          <div className="mt-3 flex flex-wrap gap-1.5">
+            {tagNames.map((tg) => (
+              <span key={tg.id} className="glass-card px-2 py-0.5 rounded-full text-2xs">
+                {tg.name}
+              </span>
+            ))}
+          </div>
+        )}
+      </PopoverSurface>
+    </>
+  );
+}