diff --git a/client/src/document/code/playground.ts b/client/src/document/code/playground.ts index e93d21159895..79fc30cfdae8 100644 --- a/client/src/document/code/playground.ts +++ b/client/src/document/code/playground.ts @@ -126,6 +126,20 @@ export function collectCode(input?: HTMLInputElement): EditorContent { }; } +export function highlight( + header: Element, + highlightedQueueExample: string | null +) { + // Highlight the header if it's the one we're mouse-overing + // on the corresponding item in the queue. + const id = header.querySelector('[type="checkbox"]')?.id; + if (highlightedQueueExample === id) { + header.classList.add("active"); + } else { + header.classList.remove("active"); + } +} + export function addCollectButton( element: Element | null, id: string, diff --git a/client/src/document/hooks.ts b/client/src/document/hooks.ts index 68af9e0b3ee8..1d6c9e432103 100644 --- a/client/src/document/hooks.ts +++ b/client/src/document/hooks.ts @@ -9,8 +9,10 @@ import { addCollectButton, getCodeAndNodesForIframe, getCodeAndNodesForIframeBySampleClass, + highlight, } from "./code/playground"; import { addCopyToClipboardButton } from "./code/copy"; +import { useUIStatus } from "../ui-context"; export function useDocumentURL() { const locale = useLocale(); @@ -25,6 +27,7 @@ export function useDocumentURL() { export function useCollectSample(doc: any) { const isServer = useIsServer(); const locale = useLocale(); + const { highlightedQueueExample } = useUIStatus(); useEffect(() => { if (isServer) { @@ -40,8 +43,9 @@ export function useCollectSample(doc: any) { ) .forEach((header) => { addCollectButton(header, "collect", locale); + highlight(header, highlightedQueueExample); }); - }, [doc, isServer, locale]); + }, [doc, isServer, locale, highlightedQueueExample]); } export function useRunSample(doc: Doc | undefined) { diff --git a/client/src/playground/queue/index.tsx b/client/src/playground/queue/index.tsx index 78a4304dcf9c..51fdb3049b9f 100644 --- a/client/src/playground/queue/index.tsx +++ b/client/src/playground/queue/index.tsx @@ -19,14 +19,18 @@ function PQEntry({ unqueue: () => void; }) { const gleanClick = useGleanClick(); + const { setHighlightedQueueExample } = useUIStatus(); const getHeader = () => { const element = document.getElementById(id); return element?.parentElement?.parentElement; }; const setActive = (value: boolean) => { - const header = getHeader(); - if (header instanceof HTMLElement) { - header.classList.toggle("active", value); + if (setHighlightedQueueExample) { + if (value) { + setHighlightedQueueExample(id); + } else { + setHighlightedQueueExample(null); + } } }; const intoView = () => { @@ -39,8 +43,8 @@ function PQEntry({ return (