peter
c3d88d9b20
The 43 react-refresh/only-export-components warnings the gate let through meant an edit to a provider (or AnchoredPopover, Toaster, plexDetailUi, …) could not be hot-swapped: Fast Refresh reloads a module that also exports hooks or helpers. - Each provider's contexts, the types its hooks return and the hooks themselves live in a sibling context module (navigationContext.ts, channelsContext.ts, …); the provider file keeps the component. loadAccountFilters moved next to the feed filters' defaults (feedFiltersInit.ts), following navigationInit/playlistsInit. - Helpers that sat in component files have their own modules: welcomeMode, downloadTitle, plexPlayable, channelSync, ui/anchoredPopoverHooks, ui/pageToolbarSlot, ui/pagerContent, ui/toastLevels, ui/overlayOrder, ui/tableAlign, lib/plexDetail; the cells of the channel columns and the registry's page wrappers are components files of their own (channelCells, modulePages). - usePersistedTab, an alias of useAccountPersistedState, is gone; its callers use the original. npm run lint is now eslint --max-warnings 0, so a warning fails the gate like an error does.
74 lines
3.2 KiB
TypeScript
74 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";
|
|
|
|
/**
|
|
* 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 { 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={pop.refs.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="glass w-[480px] overflow-y-auto px-3.5 py-3 rounded-lg 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>
|
|
</>
|
|
);
|
|
}
|