Add effect to highlight input box on Trending prompt click

[thomshutt]

PR Type

Enhancement

---

Description

• Add input highlight animations on trending click

• Extend PromptForm with highlight prop

• Manage highlight state in PromptPanel

• Define custom Tailwind highlight animations

---

Changes walkthrough 📝

	Relevant files
Enhancement	PromptForm.tsx Add highlight prop and conditional animations                        apps/app/components/home/PromptForm.tsx Introduce optional highlight prop Apply conditional CSS classes for animations Animate textarea border and button on highlight +11/-1    PromptPanel.tsx Implement highlight trigger in PromptPanel                              apps/app/components/home/PromptPanel.tsx Import useState and useEffect Add highlightInput state for animation trigger Trigger highlight on trending prompt click Pass highlight flag into PromptForm +11/-1
Configuration changes	tailwind.config.ts Configure custom highlight animations                                        apps/app/tailwind.config.ts Define glow, wiggle, pulse keyframes Add glow-pulse, wiggle, attention-pulse animations Extend Tailwind configuration for highlight effects +15/-0

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
pipelines-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 3, 2025 0:23am

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Timer Cleanup The setTimeout in handleTrendingPromptClick may trigger a state update after the component has unmounted, causing potential React warnings. Consider storing the timeout ID and clearing it in a cleanup effect or using a mounted flag. setHighlightInput(true); // Reset the highlight effect after animation completes setTimeout(() => { setHighlightInput(false); }, 2400); // Increased time to match our animations Unused Import useEffect is imported at the top of this file but never used. Removing the unused import will prevent lint warnings and reduce confusion. import React, { RefObject, useMemo, useState, useEffect } from "react";

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	Merge dual animations into one Tailwind only applies one animation property, so chaining two animation classes will override the first. Define a single custom animation key that combines both pulse and glow, then reference that in one animate-… class. apps/app/components/home/PromptForm.tsx [123-125] highlight - ? "animate-attention-pulse border-blue-400 animate-glow-pulse" + ? "animate-attention-glow border-blue-400" : "" Suggestion importance[1-10]: 7 __ Why: Chaining two Tailwind animation classes overrides the first, so merging into a single custom animation ensures both effects apply correctly.	Medium
	Specify ring-offset color You’re adding a ring offset without specifying its color, so it defaults to transparent. Include an explicit offset color (e.g. white or background) so the gap shows correctly. apps/app/components/home/PromptForm.tsx [146-148] highlight - ? "animate-wiggle ring-2 ring-blue-400 ring-offset-2" + ? "animate-wiggle ring-2 ring-blue-400 ring-offset-2 ring-offset-white" : "" Suggestion importance[1-10]: 5 __ Why: Adding an explicit ring-offset-white ensures the ring offset gap is visible, as it defaults to transparent otherwise.	Low
Possible issue	UseEffect for highlight cleanup Move the timeout logic into a useEffect hook so you can clear it on unmount or when highlightInput changes, preventing overlapping timers and memory leaks. apps/app/components/home/PromptPanel.tsx [146-154] +const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null); + const handleTrendingPromptClick = (prompt: string) => { setPromptValue(prompt); - // Add highlight effect when a trending prompt is clicked setHighlightInput(true); - - // Reset the highlight effect after animation completes - setTimeout(() => { - setHighlightInput(false); - }, 2400); // Increased time to match our animations }; +useEffect(() => { + if (highlightInput) { + timeoutRef.current = setTimeout(() => { + setHighlightInput(false); + }, 2400); + } + return () => { + if (timeoutRef.current) clearTimeout(timeoutRef.current); + }; +}, [highlightInput]); + Suggestion importance[1-10]: 7 __ Why: Moving the timeout into a useEffect allows proper cleanup and avoids overlapping timers or memory leaks when highlightInput changes or the component unmounts.	Medium