web/src/lib/components/DiscoverResultCard.svelte

@@ -15,7 +15,9 @@
     title,
     subtitle,
     imageUrl,
-    state,
+    // Renamed inside the component: a binding called `state` would make
+    // `$state` read as a store subscription instead of the rune.
+    state: cardState,
     attribution,
     onRequest,
     onSnooze,
@@ -48,13 +50,13 @@
   );
 
   function handleRequest() {
-    if (state === 'requestable') onRequest?.();
+    if (cardState === 'requestable') onRequest?.();
   }
 </script>
 
 <article
   class="card rounded-lg border border-border bg-surface p-3"
-  data-state={state}
+  data-state={cardState}
 >
   <div
     class="art flex aspect-square w-full items-center justify-center overflow-hidden rounded-md bg-surface-hover"
@@ -83,16 +85,16 @@
       </div>
     {/if}
     <div class="badge-row" data-testid="badge-row">
-      {#if state === 'kept'}
+      {#if cardState === 'kept'}
         <span class="kept-pill" role="status">Kept</span>
-      {:else if state === 'snoozed'}
+      {:else if cardState === 'snoozed'}
         <span class="snoozed-pill" role="status">Not right now</span>
       {/if}
     </div>
   </div>
 
   <div class="actions pt-3" data-testid="actions">
-    {#if state === 'snoozed'}
+    {#if cardState === 'snoozed'}
       <button
         type="button"
         aria-label={`Bring ${title} back`}
@@ -101,7 +103,7 @@
       >
         Undo
       </button>
-    {:else if state === 'requestable'}
+    {:else if cardState === 'requestable'}
       <div class="flex items-center gap-2">
         <button
           type="button"
@@ -129,7 +131,7 @@
           </button>
         {/if}
       </div>
-    {:else if state === 'kept'}
+    {:else if cardState === 'kept'}
       <button
         type="button"
         disabled