fix(frontend): implement infinite scrolling for the font selection dropdown menu

[Jonathanthedeveloper]

Summary by cubic

Adds infinite scrolling to the font selection dropdown so users can browse all Google Fonts and all search matches without the 50-item cap. Loads more fonts as you scroll and resets cleanly on search or menu close.

• New Features

  • Infinite scroll using an IntersectionObserver sentinel that loads items in small batches.
  • Spacer element preserves scroll height without rendering all items at once.

• Bug Fixes

  • All search matches are now accessible (no truncation to the initial limit).
  • List resets on query or menu close, and dropdown placement stays in sync with the displayed count.

^{Written for commit 35091bd. Summary will update on new commits. Review in cubic}

[vercel]

@Jonathanthedeveloper is attempting to deploy a commit to the Akinkunmi Team on Vercel.

A member of the Team first needs to authorize it.

[cubic-dev-ai]

1 issue found across 1 file

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="frontend/src/components/text-format-toolbar.tsx">

<violation number="1" location="frontend/src/components/text-format-toolbar.tsx:116">
P2: IntersectionObserver effect misses sentinel remounts because `displayCount` is not in dependencies, which can break continued infinite loading.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: IntersectionObserver effect misses sentinel remounts because displayCount is not in dependencies, which can break continued infinite loading.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At frontend/src/components/text-format-toolbar.tsx, line 116:

<comment>IntersectionObserver effect misses sentinel remounts because `displayCount` is not in dependencies, which can break continued infinite loading.</comment>

<file context>
@@ -82,22 +84,43 @@ export default function TextFormatToolbar({
+    )
+    if (sentinelRef.current) observer.observe(sentinelRef.current)
+    return () => observer.disconnect()
+  }, [fontOpen, allFilteredFonts.length])
+
+
</file context>

Suggested change

	}, [fontOpen, allFilteredFonts.length])
	}, [fontOpen, allFilteredFonts.length, displayCount])