peter
76358a0d77
E32 S3. The compiler skipped 93 functions; it now skips 29 (try/finally shapes, two suppressions,
VirtualGrid). react-hooks/refs hits 245 -> 31.
- Popover engine: `ref={pop.refs.setReference}` made the compiler treat the whole popover handle as
a ref, so every component holding one was skipped (21 call sites, the engine and its surface
among them). The setter is destructured now; the same for useScrollFade and useReturnFocus.
- Render-phase `ref.current = x` writes moved to `useEffectEvent` where only effects read them,
else to the new `useLatest` (written in a layout effect) / `useStableCallback`.
- FocusSafeButton (under every Button) read the focused element during render; it reads it through
useSyncExternalStore, which React asks on every render instead of a cached memo.
Bugs this surfaced, fixed:
- Combobox: a chip could keep showing its raw id. The label cache was a ref an effect filled after
the render that needed it; it is state merged during render now (test seen RED).
- useUndoable rendered from a ref plus a forced re-render; compiled, that memoizes a stale value.
The history is state now, mirrored in a ref for the stable callbacks.
- ConfigPanel and the saved-views editor re-seeded their drafts in an effect, painting the stale
draft for a frame; both adjust during render against the remembered key.
- Toaster's handover is written after commit instead of during render; a new test pins that the
inherited set is taken once, at the takeover (seen RED on a per-render re-read).
- IssueComposer mutated a ref prop as a one-shot focus token; it is plain state.
- PlexBrowse wrote its info-scroll memory from an effect declared before the ref, past its own
"one writer" rule; the writer comes first now and the effect goes through it.
The compiler ratchet drops to the measured 29 and now also requires FocusSafeButton and the popover
engine to compile.
77 lines
3.2 KiB
TypeScript
77 lines
3.2 KiB
TypeScript
import { useState } from "react";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { qk } from "../lib/queryKeys";
|
|
import { api } from "../lib/api";
|
|
import ChannelAboutContent from "./ChannelAbout";
|
|
import { PopoverSurface } from "./ui/AnchoredPopover";
|
|
import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
|
|
import { SURFACE } from "./ui/surfaces";
|
|
|
|
/**
|
|
* A channel-description cell: one truncated line in the table, revealing the FULL channel "About"
|
|
* (the same content as the detail page's About tab — description, links, country, language, topics,
|
|
* keywords) in a glass hover card. The detail is fetched ON DEMAND on hover/focus, sharing the
|
|
* ["channel", id] react-query cache with the channel page, so the list stays light. The card is
|
|
* interactive (scrollable, links clickable) — the platform's safePolygon lets the cursor travel the
|
|
* gap, replacing the hand-rolled 160 ms hide-timer bridge. Shared by the subscribed + discovery
|
|
* tables.
|
|
*
|
|
* The card keeps the platform's default hover role (`tooltip`); making this rich, interactive panel
|
|
* properly keyboard-reachable belongs to R9 (focus/a11y), not to the mechanical migration.
|
|
*/
|
|
export default function AboutCell({ text, channelId }: { text: string | null; channelId: string }) {
|
|
const preview = (text ?? "").trim();
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const pop = useAnchoredPopover({
|
|
open: open && !!preview,
|
|
onOpenChange: setOpen,
|
|
mode: "hover",
|
|
offset: 6,
|
|
// Pop instantly like the old cell did; the close grace lets the cursor reach the card.
|
|
hoverDelay: { open: 0, close: 160 },
|
|
// Cap the panel to the space between the trigger and the viewport edge (publishes --fit-max-h) so a
|
|
// long About never runs its top off-screen — at high browser zoom the short viewport made a fixed
|
|
// max-height overflow above the top edge, where the scroll container can't reach.
|
|
fitHeight: true,
|
|
});
|
|
|
|
const { setReference } = pop.refs;
|
|
|
|
const { data: ch } = useQuery({
|
|
queryKey: qk.channel(channelId),
|
|
queryFn: () => api.channelDetail(channelId),
|
|
enabled: open && !!channelId,
|
|
staleTime: 5 * 60_000,
|
|
});
|
|
|
|
if (!preview) return <span className="text-muted">—</span>;
|
|
|
|
return (
|
|
<>
|
|
<span
|
|
ref={setReference}
|
|
{...pop.getReferenceProps()}
|
|
tabIndex={0}
|
|
className="block max-w-88 truncate text-muted cursor-help rounded-sm outline-hidden focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
|
|
>
|
|
{preview}
|
|
</span>
|
|
<PopoverSurface
|
|
popover={pop}
|
|
className={`${SURFACE.popover} w-120 overflow-y-auto px-3.5 py-3 animate-[fadeIn_0.12s_ease]`}
|
|
// min(design cap, available space): keeps the 28rem cap on a tall viewport, shrinks to fit on a
|
|
// short one (high zoom). --fit-max-h is set by the fitHeight `size` middleware once positioned.
|
|
style={{ maxHeight: "min(28rem, var(--fit-max-h, 28rem))" }}
|
|
>
|
|
{/* Full About once the detail loads; until then the list's truncated description. */}
|
|
{ch ? (
|
|
<ChannelAboutContent ch={ch} />
|
|
) : (
|
|
<p className="text-sm whitespace-pre-wrap wrap-break-word leading-relaxed">{preview}</p>
|
|
)}
|
|
</PopoverSurface>
|
|
</>
|
|
);
|
|
}
|