Add contextual "?" help icons linking into Docs (ticket 021)
New HelpIcon component + a DocsNavProvider context (webapp/src/lib/docsNav.tsx) let any component request "open Docs to section X", bumping a nonce each time so a repeat click re-triggers even if Docs is already open to that section. NavMenu forwards that request into DocsPanel as a `target` prop, which expands the right accordion section, scrolls it into view, and flashes it (a brief accent-tinted background/border, settling back after 1.2s) — verified visually with a live server + Playwright. Opening Docs via the plain NavMenu button explicitly clears any pending target, so that path is unchanged: no forced section, no flash. Added a "?" icon to FilterBar, LogTimeline, LogPreview, Metrics, Dashboards, and NavMenu's own Settings/Presets panels, plus new Docs sections for Timeline, Log preview, Settings, and Presets (previously undocumented). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
ce711ab70e
commit
abc061a7b1
@@ -0,0 +1,35 @@
|
||||
import { createContext, useCallback, useContext, useMemo, useRef, useState, type ReactNode } from 'react'
|
||||
|
||||
/** One request to open the Docs panel scrolled to a specific section (ticket 021). */
|
||||
export interface DocsTarget {
|
||||
sectionId: string
|
||||
/** Bumped on every request, even to the same section, so a repeat click re-triggers the flash. */
|
||||
nonce: number
|
||||
}
|
||||
|
||||
interface DocsNavValue {
|
||||
target: DocsTarget | null
|
||||
openSection: (sectionId: string) => void
|
||||
}
|
||||
|
||||
const DocsNavContext = createContext<DocsNavValue | null>(null)
|
||||
|
||||
/** Wraps the app so any component can open Docs to a specific section via `useDocsNav`. */
|
||||
export function DocsNavProvider({ children }: { children: ReactNode }) {
|
||||
const [target, setTarget] = useState<DocsTarget | null>(null)
|
||||
const nonceRef = useRef(0)
|
||||
|
||||
const openSection = useCallback((sectionId: string) => {
|
||||
nonceRef.current += 1
|
||||
setTarget({ sectionId, nonce: nonceRef.current })
|
||||
}, [])
|
||||
|
||||
const value = useMemo(() => ({ target, openSection }), [target, openSection])
|
||||
return <DocsNavContext.Provider value={value}>{children}</DocsNavContext.Provider>
|
||||
}
|
||||
|
||||
export function useDocsNav(): DocsNavValue {
|
||||
const ctx = useContext(DocsNavContext)
|
||||
if (!ctx) throw new Error('useDocsNav must be used within a DocsNavProvider')
|
||||
return ctx
|
||||
}
|
||||
Reference in New Issue
Block a user