From ade33edc6d1ab457690a8d603401ce285e28f225 Mon Sep 17 00:00:00 2001
From: orfelorfel23 <jannik.mueller.jannik+git@googlemail.com>
Date: Thu, 4 Jun 2026 20:20:05 +0200
Subject: [PATCH] feat: visually highlight the recommended video ai button

---
 src/components/cards/VideoPromptsCard.tsx | 38 +++++++++++++++--------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/components/cards/VideoPromptsCard.tsx b/src/components/cards/VideoPromptsCard.tsx
index 05e1fdb..a8d05fc 100644
--- a/src/components/cards/VideoPromptsCard.tsx
+++ b/src/components/cards/VideoPromptsCard.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import { ResultCard } from "../ResultCard";
 import { CopyButton } from "../CopyButton";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faVideo, faUndo } from "@fortawesome/free-solid-svg-icons";
+import { faVideo, faUndo, faStar } from "@fortawesome/free-solid-svg-icons";
 import { useAutoHeight } from "../../lib/useAutoHeight";
 import {
   NEGATIVE_VIDEO_PROMPT,
@@ -151,18 +151,30 @@ export function VideoPromptsCard({
 
           {links && links.length > 0 && (
             <div className="pt-2 flex flex-wrap gap-2">
-              {links.map((link, i) => (
-                <button
-                  key={i}
-                  type="button"
-                  onClick={() => handleToolClick(link.url)}
-                  className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-bold uppercase tracking-wide bg-accent-primary/10 text-accent-primary hover:bg-accent-primary hover:text-white transition-all duration-150 border border-accent-primary/20 hover:border-accent-primary"
-                  title={`Copy prompt and open ${link.name}`}
-                >
-                  {link.name}
-                  <FontAwesomeIcon icon={faExternalLinkAlt} className="w-3 h-3" />
-                </button>
-              ))}
+              {links.map((link, i) => {
+                const isRecommended = Boolean(
+                  current.tool_recommendation &&
+                  current.tool_recommendation.toLowerCase().includes(link.name.toLowerCase())
+                );
+                
+                return (
+                  <button
+                    key={i}
+                    type="button"
+                    onClick={() => handleToolClick(link.url)}
+                    className={
+                      isRecommended
+                        ? "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-bold uppercase tracking-wide bg-accent-primary text-white shadow-lg shadow-accent-primary/30 transition-all duration-150 border border-accent-primary hover:bg-accent-primary/90"
+                        : "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-bold uppercase tracking-wide bg-bg-card text-fg-muted hover:text-fg hover:bg-bg-hover transition-all duration-150 border border-border hover:border-accent-primary/40"
+                    }
+                    title={isRecommended ? `Recommended! Copy prompt and open ${link.name}` : `Copy prompt and open ${link.name}`}
+                  >
+                    {isRecommended && <FontAwesomeIcon icon={faStar} className="w-3 h-3 text-yellow-300" />}
+                    {link.name}
+                    <FontAwesomeIcon icon={faExternalLinkAlt} className={isRecommended ? "w-3 h-3 opacity-90" : "w-3 h-3 opacity-60"} />
+                  </button>
+                );
+              })}
             </div>
           )}
         </div>