Multiplayer: Move Trending box down to be just above input box

[thomshutt]

PR Type

Enhancement

---

Description

• Move desktop trending prompts below main panel

• Relocate prompt submission form outside panel

• Simplify current prompt item rendering logic

• Adjust layout wrappers and styling margins

---

Changes walkthrough 📝

	Relevant files
Enhancement	PromptPanel.tsx Reposition trending and form                                                          apps/app/app/PromptPanel.tsx Desktop trending prompts moved below main panel Mobile trending section repositioned outside panel Prompt form relocated beneath trending prompts Removed conditional branch for current prompts +103/-105

---

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 6, 2025 11:10am

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

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

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Unconditional Render The new prompt-current block is always returned for every item due to missing type check, potentially rendering current prompts for past items. Wrap it in a condition like item.type === "current". return ( <div key={`prompt-current-${item.prompt.id}`} className="p-3 px-4 text-sm md:text-base text-white md:text-black font-bold flex items-center animate-fadeSlideIn relative alwaysAnimatedButton bg-white/90 rounded-xl w-full cursor-pointer hover:bg-white" style={{ transition: "all 0.3s ease-out", borderRadius: "12px", }} onClick={() => handlePastPromptClick(item.prompt.text)} > <div className="min-w-0 flex-1"> <span className="truncate block w-full"> {item.prompt.text} </span> </div> </div> ); Key Prop Usage Trending prompts are using the array index as key, which can lead to rendering issues when the list changes. Consider using a stable unique identifier instead. <TrackedButton key={index} variant="outline" size="sm" className="alwaysAnimatedButton rounded-md text-xs flex-1 min-w-0" onClick={() => handleTrendingPromptClick(item.prompt)} trackingEvent="trending_prompt_clicked" trackingProperties={{ prompt: item.prompt, display_text: item.display, index, }} disabled={isSubmitting} > <span className="truncate">{item.display}</span> </TrackedButton> ))} Duplicate Layout The desktop and mobile trending sections share nearly identical markup. Extract a reusable component to avoid duplication and simplify maintenance. {!isMobile && ( <div className="w-full mt-4 mb-3"> <div className="w-full bg-white rounded-lg p-3" style={{ boxShadow: "0 2px 6px rgba(0,0,0,0.05)", borderRadius: "8px", }} > <div className="flex items-center gap-1.5 mb-3"> <Flame className="h-4 w-4 text-orange-500" /> <div className="text-sm font-semibold text-black">Trending</div> </div> <div className="flex gap-2"> {trendingPrompts.map((item, index) => ( <TrackedButton key={index} variant="outline" size="sm" className="alwaysAnimatedButton rounded-md text-xs flex-1 min-w-0" onClick={() => handleTrendingPromptClick(item.prompt)} trackingEvent="trending_prompt_clicked" trackingProperties={{ prompt: item.prompt, display_text: item.display, index, }} disabled={isSubmitting} > <span className="truncate">{item.display}</span> </TrackedButton> ))} </div> </div> </div> )} {/* Mobile trending prompts */} <div className={cn( "flex flex-row gap-2 overflow-x-auto mb-2 px-4", isMobile ? "flex" : "hidden", )} > {trendingPrompts.map((item, index) => ( <TrackedButton key={index} variant="outline" size="sm" className="text-xs flex-1 min-w-0 bg-white rounded-full" onClick={() => handleTrendingPromptClick(item.prompt)} trackingEvent="trending_prompt_clicked" trackingProperties={{ prompt: item.prompt, display_text: item.display, index, }} disabled={isSubmitting} > <span className="truncate">{item.display}</span> </TrackedButton> ))} </div>

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Filter only current prompts Ensure only prompts of type "current" are rendered by adding a guard before returning the JSX. This prevents unintended rendering of other item types. apps/app/app/PromptPanel.tsx [175-191] {selectedPrompts.map((item, index) => { + if (item.type !== "current") return null; return ( <div key={`prompt-current-${item.prompt.id}`} className="p-3 px-4 text-sm md:text-base text-white md:text-black font-bold flex items-center animate-fadeSlideIn relative alwaysAnimatedButton bg-white/90 rounded-xl w-full cursor-pointer hover:bg-white" style={{ transition: "all 0.3s ease-out", borderRadius: "12px", }} onClick={() => handlePastPromptClick(item.prompt.text)} > <div className="min-w-0 flex-1"> <span className="truncate block w-full"> {item.prompt.text} </span> </div> </div> ); })} Suggestion importance[1-10]: 6 __ Why: The mapping no longer guards for item.type === "current", causing unintended rendering; adding this check restores correct filtering.	Low
General	Use stable keys for trending list Use a stable, unique key such as the prompt text instead of the array index to avoid reconciliation issues when the list updates. apps/app/app/PromptPanel.tsx [226-243] {trendingPrompts.map((item, index) => ( <TrackedButton - key={index} + key={item.prompt} variant="outline" size="sm" className="alwaysAnimatedButton rounded-md text-xs flex-1 min-w-0" onClick={() => handleTrendingPromptClick(item.prompt)} trackingEvent="trending_prompt_clicked" trackingProperties={{ prompt: item.prompt, display_text: item.display, index, }} disabled={isSubmitting} > <span className="truncate">{item.display}</span> </TrackedButton> ))} Suggestion importance[1-10]: 5 __ Why: Replacing array indices with item.prompt as keys improves list reconciliation and avoids potential UI issues when the list changes.	Low