From 4428a4576c7489f852c15fb9ffa5fa7facb8b5ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Tue, 5 Nov 2024 15:51:54 +0100
Subject: [PATCH] Make issue state button reactive to issue state

---
 src/components/IssueStateButton.svelte | 14 +++++++++-----
 src/views/repo/Issue.svelte            |  4 ++--
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/IssueStateButton.svelte b/src/components/IssueStateButton.svelte
index f97f95ae2..2eb159ab6 100644
--- a/src/components/IssueStateButton.svelte
+++ b/src/components/IssueStateButton.svelte
@@ -14,10 +14,10 @@
 
   const {
     save,
-    ...rest
+    issueState,
   }: {
-    state: State;
     save: (state: State) => Promise<void>;
+    issueState: State;
   } = $props();
 
   const actions: { caption: string; state: State }[] = [
@@ -29,10 +29,14 @@
     { caption: "Close as other", state: { status: "closed", reason: "other" } },
   ];
 
-  // Pick a default for the action button when the issue state changes.
   let selectedAction = $state(
-    rest.state.status === "open" ? actions[1] : actions[0],
+    issueState.status === "open" ? actions[1] : actions[0],
   );
+
+  // React to state changes that come from outside of this button.
+  $effect(() => {
+    selectedAction = issueState.status === "open" ? actions[1] : actions[0];
+  });
 </script>
 
 <style>
@@ -65,7 +69,7 @@
     {#snippet popover()}
       <Border variant="ghost">
         <DropdownList
-          items={actions.filter(a => !isEqual(a.state, rest.state))}>
+          items={actions.filter(a => !isEqual(a.state, issueState))}>
           {#snippet item(action)}
             <DropdownListItem
               selected={isEqual(selectedAction, action)}
diff --git a/src/views/repo/Issue.svelte b/src/views/repo/Issue.svelte
index 0c33c22f7..803f0cc11 100644
--- a/src/views/repo/Issue.svelte
+++ b/src/views/repo/Issue.svelte
@@ -404,7 +404,7 @@
                 updatedTitle = issue.title;
                 editingTitle = !editingTitle;
               }} />
-            <IssueStateButton state={issue.state} save={saveState} />
+            <IssueStateButton issueState={issue.state} save={saveState} />
           </div>
         </div>
       {:else}
@@ -416,7 +416,7 @@
                 styleCursor="pointer"
                 name="pen"
                 onclick={() => (editingTitle = !editingTitle)} />
-              <IssueStateButton state={issue.state} save={saveState} />
+              <IssueStateButton issueState={issue.state} save={saveState} />
             </div>
           {/if}
         </div>