From 867f52358c3fce3b380b4dde5c934c466802ce4b Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Fri, 9 Oct 2026 21:12:59 -0400
Subject: [PATCH] fix: the result card's state prop no longer shadows the
 $state rune (M502 #5519)

svelte-check read `$state(false)` as a subscription to the `state` prop.
The prop keeps its name for callers and is bound as cardState inside.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../lib/components/DiscoverResultCard.svelte   | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/web/src/lib/components/DiscoverResultCard.svelte b/web/src/lib/components/DiscoverResultCard.svelte
index 7730db02..c25fc94d 100644
--- a/web/src/lib/components/DiscoverResultCard.svelte
+++ b/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