Function FontRow

packages/app-core/src/components/SettingsModal.tsx:4477–4717

({
  label,
  description,
  value,
  options,
  settingId,
  onChange
}: {
  label: string
  description?: string
  value: string | null
  options: string[]
  settingId?: string
  onChange: (next: string | null) => void
})

}

function FontRow({
  label,
  description,
  value,
  options,
  settingId,
  onChange
}: {
  label: string
  description?: string
  value: string | null
  options: string[]
  settingId?: string
  onChange: (next: string | null) => void
}): JSX.Element {
  const [open, setOpen] = useState(false)
  const [query, setQuery] = useState('')
  const [activeIdx, setActiveIdx] = useState(0)
  const buttonRef = useRef<HTMLButtonElement | null>(null)
  const searchRef = useRef<HTMLInputElement | null>(null)
  const listRef = useRef<HTMLDivElement | null>(null)
  const [rect, setRect] = useState<{ left: number; top: number; width: number } | null>(
    null
  )

  // Reset the search box whenever the popover opens.
  useEffect(() => {
    if (open) {
      setQuery('')
      setActiveIdx(0)
      setTimeout(() => searchRef.current?.focus(), 0)
    }
  }, [open])

  // Close on outside click.
  useEffect(() => {
    if (!open) return
    const onDown = (e: MouseEvent): void => {
      const target = e.target as Node
      if (buttonRef.current?.contains(target)) return
      const portalRoot = document.getElementById('zen-font-portal')
      if (portalRoot?.contains(target)) return
      setOpen(false)
    }
    const onKey = (e: KeyboardEvent): void => {
      if (e.key === 'Escape') setOpen(false)
    }
    window.addEventListener('mousedown', onDown)
    window.addEventListener('keydown', onKey)
    return () => {
      window.removeEventListener('mousedown', onDown)
      window.removeEventListener('keydown', onKey)
    }
  }, [open])

  // Position the popover below the button; reposition on scroll/resize.
  useLayoutEffect(() => {
    if (!open) return