From 75ca5fff64fa5c79f1b7e6b721558ab4929e7dc0 Mon Sep 17 00:00:00 2001
From: root <root@claude.deathstar-home.one>
Date: Tue, 31 Mar 2026 10:22:07 -0500
Subject: [PATCH] Fix Discover page: stringify IDs for Set comparisons, show
 result count

---
 frontend/src/pages/Discover.tsx | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/Discover.tsx b/frontend/src/pages/Discover.tsx
index 48b05b1..667487a 100644
--- a/frontend/src/pages/Discover.tsx
+++ b/frontend/src/pages/Discover.tsx
@@ -87,36 +87,38 @@ export default function Discover() {
   }
 
   const handleToggleSave = async (id: string) => {
-    setSavingIds((prev) => new Set(prev).add(id))
+    const sid = String(id)
+    setSavingIds((prev) => new Set(prev).add(sid))
     try {
-      const { saved } = await toggleSaveRecommendation(id)
+      const { saved } = await toggleSaveRecommendation(sid)
       setResults((prev) =>
-        prev.map((r) => (r.id === id ? { ...r, saved } : r))
+        prev.map((r) => (String(r.id) === sid ? { ...r, saved } : r))
       )
     } catch {
       // silent
     } finally {
       setSavingIds((prev) => {
         const next = new Set(prev)
-        next.delete(id)
+        next.delete(sid)
         return next
       })
     }
   }
 
   const handleDislike = async (id: string) => {
-    setDislikingIds((prev) => new Set(prev).add(id))
+    const sid = String(id)
+    setDislikingIds((prev) => new Set(prev).add(sid))
     try {
-      const { disliked } = await dislikeRecommendation(id)
+      const { disliked } = await dislikeRecommendation(sid)
       setResults((prev) =>
-        prev.map((r) => (r.id === id ? { ...r, disliked } : r))
+        prev.map((r) => (String(r.id) === sid ? { ...r, disliked } : r))
       )
     } catch {
       // silent
     } finally {
       setDislikingIds((prev) => {
         const next = new Set(prev)
-        next.delete(id)
+        next.delete(sid)
         return next
       })
     }
@@ -298,7 +300,7 @@ export default function Discover() {
       {results.length > 0 && (
         <div>
           <h2 className="text-lg font-semibold text-charcoal mb-4">
-            Your Recommendations
+            Your Recommendations ({results.length})
           </h2>
           <div className="space-y-3">
             {results.map((rec) => (
@@ -307,13 +309,19 @@ export default function Discover() {
                 recommendation={rec}
                 onToggleSave={handleToggleSave}
                 onDislike={handleDislike}
-                saving={savingIds.has(rec.id)}
-                disliking={dislikingIds.has(rec.id)}
+                saving={savingIds.has(String(rec.id))}
+                disliking={dislikingIds.has(String(rec.id))}
               />
             ))}
           </div>
         </div>
       )}
+
+      {!discovering && results.length === 0 && !error && (selectedPlaylist || query.trim()) && (
+        <p className="text-charcoal-muted text-sm text-center py-4">
+          Click "Discover Music" to get recommendations
+        </p>
+      )}
     </div>
   )
 }