Make issue state button reactive to issue state — radicle-desktop

👉 Workflow runs 👉 Branch on GitHub

   const {
     save,
     ...rest
     issueState,
   }: {
     state: State;
     save: (state: State) => Promise<void>;
     issueState: State;
   } = $props();
   const actions: { caption: string; state: State }[] = [

     { 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>

     {#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)}

                 updatedTitle = issue.title;
                 editingTitle = !editingTitle;
               }} />
             <IssueStateButton state={issue.state} save={saveState} />
             <IssueStateButton issueState={issue.state} save={saveState} />
           </div>
         </div>
       {:else}

                 styleCursor="pointer"
                 name="pen"
                 onclick={() => (editingTitle = !editingTitle)} />
               <IssueStateButton state={issue.state} save={saveState} />
               <IssueStateButton issueState={issue.state} save={saveState} />
             </div>
           {/if}
         </div>