fixes

packages/frontend/src/components/RecommendationCard.tsx

@@ -17,6 +17,7 @@ const CATEGORY_COLORS: Record<CuratorCategory, string> = {
 
 export function RecommendationCard({ show, existingFeedback, onFeedback }: RecommendationCardProps) {
   const [selectedStars, setSelectedStars] = useState(existingFeedback?.stars ?? 0);
+  const [hoverStar, setHoverStar] = useState(0);
   const [comment, setComment] = useState(existingFeedback?.feedback ?? '');
   const [showComment, setShowComment] = useState(false);
   const [submitted, setSubmitted] = useState(!!existingFeedback);
@@ -49,16 +50,21 @@ export function RecommendationCard({ show, existingFeedback, onFeedback }: Recom
 
       <div class="card-feedback">
         <div class="star-rating">
-          {[1, 2, 3].map((star) => (
-            <button
-              key={star}
-              class={`star-btn${selectedStars >= star ? ' star-active' : ''}`}
-              onClick={() => handleStarClick(star)}
-              aria-label={`Rate ${star} star${star > 1 ? 's' : ''}`}
-            >
-              {selectedStars >= star ? '★' : '☆'}
-            </button>
-          ))}
+          {[1, 2, 3].map((star) => {
+            const effective = hoverStar || selectedStars;
+            return (
+              <button
+                key={star}
+                class={`star-btn${effective >= star ? ' star-active' : ''}`}
+                onClick={() => handleStarClick(star)}
+                onMouseEnter={() => setHoverStar(star)}
+                onMouseLeave={() => setHoverStar(0)}
+                aria-label={`Rate ${star} star${star > 1 ? 's' : ''}`}
+              >
+                {effective >= star ? '★' : '☆'}
+              </button>
+            );
+          })}
           {submitted && <span class="feedback-saved">Saved</span>}
         </div>