feat: visually highlight the recommended video ai button

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) => (
+              {links.map((link, i) => {
-                <button
+                const isRecommended = Boolean(
-                  key={i}
+                  current.tool_recommendation &&
-                  type="button"
+                  current.tool_recommendation.toLowerCase().includes(link.name.toLowerCase())
-                  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}`}
+                return (
-                >
+                  <button
-                  {link.name}
+                    key={i}
-                  <FontAwesomeIcon icon={faExternalLinkAlt} className="w-3 h-3" />
+                    type="button"
-                </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>