fix: lint errors in widget-renderer.tsx and layout.tsx

[jerelvelarde]

Description

The pnpm lint CI check is failing with 2 errors and 2 warnings.

Errors

1. react-hooks/set-state-in-effect in widget-renderer.tsx:414

// apps/app/src/components/generative-ui/widget-renderer.tsx
useEffect(() => {
 if (!active) return;
 setIndex(0); // ← setState called synchronously in effect
 const interval = setInterval(() => {
 setIndex((i) => (i + 1) % LOADING_PHRASES.length);
 }, 1800);
 return () => clearInterval(interval);
}, [active]);

Fix: Reset the index outside the effect (e.g. derive from active changing, or use a ref).

2. react-hooks/set-state-in-effect in widget-renderer.tsx:457

useEffect(() => {
 if (!html || !iframeRef.current) return;
 if (html === committedHtmlRef.current) return;
 committedHtmlRef.current = html;
 iframeRef.current.srcdoc = assembleDocument(html);
 setLoaded(false); // ← setState called synchronously in effect
 setHeight(0);
}, [html]);

Fix: Restructure so loaded/height are derived from html changes without synchronous setState in the effect body.

Warnings

3. Unused description prop — widget-renderer.tsx:424

export function WidgetRenderer({ title, description, html }: WidgetRendererProps) {
// ^^^^^^^^^^^ defined but never used

Fix: Either use the prop or prefix with underscore (_description).

4. Custom font loaded in layout.tsx instead of next/font — layout.tsx:15

<link
 href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap"
 rel="stylesheet"
/>

Fix: Use next/font/google to load Plus Jakarta Sans for automatic optimization and self-hosting.