From 7cf9adc6f109831339a0309f6d54648d1dd82f57 Mon Sep 17 00:00:00 2001
From: QSchlegel <quirin.schlegel@icloud.com>
Date: Sat, 13 Jun 2026 13:08:50 +0200
Subject: [PATCH] =?UTF-8?q?feat(governance):=20clearer=20ballot=20voting?=
 =?UTF-8?q?=20UX=20=E2=80=94=20segmented=20vote=20+=20one=20entry=20per=20?=
 =?UTF-8?q?action?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The per-proposal voting controls were confusing: a raw OS <select> for the
Yes/No/Abstain choice, plus TWO competing actions (a green "Add to Ballot"
button in proposals.tsx AND a mystery ballot icon in VoteButton).

- Replace the native <select> with a shadcn segmented Yes/No/Abstain control
  (color-coded selected state, icons). Guard `(v) => v && setVoteKind(v)` so a
  re-click can't blank the vote read into the tx.
- One clear primary: the Vote button now states the choice ("Vote Yes",
  "Vote Yes (Proxy)") and uses the themed primary style.
- One ballot entry: the icon-only ballot button becomes a labeled "Add to
  ballot" / "In N ballots" secondary, with a tooltip distinguishing the two
  flows (vote on-chain now vs collect for co-signers).
- Remove the now-duplicate green "Add to Ballot" buttons (mobile + desktop) in
  proposals.tsx; keep the View links.

vote()/voteProxy() bodies, proxy path, keepRelevant, metadata label 674, the
closed-vote Lock state, and all toasts are unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../governance/proposal/voteButtton.tsx       | 119 +++++++++---------
 .../pages/wallet/governance/proposals.tsx     |  26 +---
 2 files changed, 62 insertions(+), 83 deletions(-)

diff --git a/src/components/pages/wallet/governance/proposal/voteButtton.tsx b/src/components/pages/wallet/governance/proposal/voteButtton.tsx
index d2895043..717a7182 100644
--- a/src/components/pages/wallet/governance/proposal/voteButtton.tsx
+++ b/src/components/pages/wallet/governance/proposal/voteButtton.tsx
@@ -7,14 +7,7 @@ import { keepRelevant, Quantity, Unit, UTxO } from "@meshsdk/core";
 import { Wallet } from "@/types/wallet";
 import { useWalletsStore } from "@/lib/zustand/wallets";
 import { useToast } from "@/hooks/use-toast";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { ToastAction } from "@/components/ui/toast";
 import useMultisigWallet from "@/hooks/useMultisigWallet";
 import { api } from "@/utils/api";
@@ -32,7 +25,7 @@ import {
 } from "@/components/ui/dialog";
 import type { BallotType } from "../ballot/ballot";
 import { useBallotModal } from "@/hooks/useBallotModal";
-import { Plus, Info, Lock, FileText, CheckCircle2, Vote } from "lucide-react";
+import { Plus, Info, Lock, FileText, CheckCircle2, XCircle, MinusCircle, Vote } from "lucide-react";
 import { ProposalDetails } from "@/types/governance";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { getProposalStatus, parseProposalId } from "@/lib/governance";
@@ -375,23 +368,38 @@ export default function VoteButton({
       ) : (
         // Active proposal state
         <>
-          <Select
+          <span className="text-xs font-medium text-muted-foreground">
+            Your vote
+          </span>
+          <ToggleGroup
+            type="single"
             value={voteKind}
-            onValueChange={(value) =>
-              setVoteKind(value as "Yes" | "No" | "Abstain")
-            }
+            // ToggleGroup emits "" when the active item is re-clicked; the
+            // guard keeps voteKind a valid choice so vote()/voteProxy() never
+            // read an empty vote into the on-chain tx.
+            onValueChange={(v) => v && setVoteKind(v as "Yes" | "No" | "Abstain")}
+            variant="outline"
+            className="grid w-full grid-cols-3 gap-1"
           >
-            <SelectTrigger className="w-full rounded-md border border-gray-300 dark:border-gray-600 px-3 sm:px-4 py-2 text-sm sm:text-base focus:ring-2 focus:ring-gray-500 bg-white dark:bg-gray-800">
-              <SelectValue placeholder="Select Vote Kind" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectGroup>
-                <SelectItem value="Yes">Yes</SelectItem>
-                <SelectItem value="No">No</SelectItem>
-                <SelectItem value="Abstain">Abstain</SelectItem>
-              </SelectGroup>
-            </SelectContent>
-          </Select>
+            <ToggleGroupItem
+              value="Yes"
+              className="h-10 flex-1 gap-1.5 data-[state=on]:bg-green-100 data-[state=on]:text-green-800 dark:data-[state=on]:bg-green-900/30 dark:data-[state=on]:text-green-300"
+            >
+              <CheckCircle2 className="h-4 w-4" /> Yes
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="No"
+              className="h-10 flex-1 gap-1.5 data-[state=on]:bg-red-100 data-[state=on]:text-red-800 dark:data-[state=on]:bg-red-900/30 dark:data-[state=on]:text-red-300"
+            >
+              <XCircle className="h-4 w-4" /> No
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="Abstain"
+              className="h-10 flex-1 gap-1.5 data-[state=on]:bg-gray-100 data-[state=on]:text-gray-800 dark:data-[state=on]:bg-gray-800 dark:data-[state=on]:text-gray-300"
+            >
+              <MinusCircle className="h-4 w-4" /> Abstain
+            </ToggleGroupItem>
+          </ToggleGroup>
 
           {isProxyEnabled && proxies && proxies.length > 0 && !selectedProxyId && (
             <div className="w-full p-3 bg-yellow-50 dark:bg-yellow-950/20 border border-yellow-200 dark:border-yellow-800 rounded-md">
@@ -412,50 +420,43 @@ export default function VoteButton({
           <Button
             onClick={hasValidProxy ? voteProxy : vote}
             disabled={loading || utxos.length === 0}
-            className="w-full rounded-md bg-gray-600 dark:bg-gray-500 px-4 sm:px-6 py-2 text-sm sm:text-base font-semibold text-white shadow hover:bg-gray-700 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
+            className="w-full"
           >
             {loading
               ? "Voting..."
               : utxos.length > 0
-                ? `Vote${hasValidProxy ? " (Proxy)" : ""}`
+                ? `Vote ${voteKind}${hasValidProxy ? " (Proxy)" : ""}`
                 : "No UTxOs Available"}
           </Button>
         </>
       )}
 
-      <div className="flex justify-center">
-        <TooltipProvider delayDuration={200}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                onClick={() => {
-                  setCurrentProposal(proposalId, proposalTitle);
-                  openModal();
-                }}
-                variant="outline"
-                size="sm"
-                className="h-9 w-9 p-0 rounded-md border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:border-gray-400 dark:hover:border-gray-500 flex items-center justify-center transition-colors relative"
-              >
-                {isOnAnyBallot ? (
-                  <>
-                    <Vote className="h-4 w-4" />
-                    {ballotCount > 0 && (
-                      <span className="absolute -top-1 -right-1 h-4 w-4 flex items-center justify-center text-[10px] font-semibold bg-green-500 dark:bg-green-600 text-white rounded-full border-2 border-white dark:border-gray-800">
-                        {ballotCount}
-                      </span>
-                    )}
-                  </>
-                ) : (
-                  <Vote className="h-4 w-4" />
-                )}
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="top">
-              <p>{isOnAnyBallot ? `Manage in ${ballotCount} ballot${ballotCount !== 1 ? 's' : ''}` : "Add to Ballot"}</p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      </div>
+      <TooltipProvider delayDuration={200}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              onClick={() => {
+                setCurrentProposal(proposalId, proposalTitle);
+                openModal();
+              }}
+              variant="outline"
+              size="sm"
+              className="w-full"
+            >
+              <Vote className="mr-2 h-4 w-4" />
+              {isOnAnyBallot
+                ? `In ${ballotCount} ballot${ballotCount !== 1 ? "s" : ""}`
+                : "Add to ballot"}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="top">
+            <p className="max-w-[240px] text-xs">
+              Vote casts your DRep vote on-chain now. Add to ballot collects
+              this proposal so co-signers can vote together.
+            </p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
     </div>
   );
 }
diff --git a/src/components/pages/wallet/governance/proposals.tsx b/src/components/pages/wallet/governance/proposals.tsx
index 5a1631df..81604ff4 100644
--- a/src/components/pages/wallet/governance/proposals.tsx
+++ b/src/components/pages/wallet/governance/proposals.tsx
@@ -31,7 +31,7 @@ import VoteButton from "./proposal/voteButtton";
 import { UTxO } from "@meshsdk/core";
 import useMultisigWallet from "@/hooks/useMultisigWallet";
 import { Badge } from "@/components/ui/badge";
-import { CheckCircle2, XCircle, MinusCircle, ChevronDown, ChevronUp, Clock, Calendar, Coins, Hash, FileText, Plus } from "lucide-react";
+import { CheckCircle2, XCircle, MinusCircle, ChevronDown, ChevronUp, Clock, Calendar, Coins, Hash, FileText } from "lucide-react";
 import { useProxy } from "@/hooks/useProxy";
 import { useProxyData } from "@/lib/zustand/proxy";
 import { useBallotModal } from "@/hooks/useBallotModal";
@@ -844,17 +844,6 @@ export default function AllProposals({ appWallet, utxos, selectedBallotId, onSel
                               View Full Details
                             </Button>
                           </Link>
-                <Button
-                  variant="default"
-                  className="w-full text-sm bg-green-600 hover:bg-green-700 dark:bg-green-600 dark:hover:bg-green-700 text-white py-2.5"
-                  onClick={() => {
-                    setCurrentProposal(proposalId, proposal.json_metadata.body.title);
-                    openModal();
-                  }}
-                >
-                  <Plus className="mr-2 h-4 w-4" />
-                  Add to Ballot
-                </Button>
                           <VoteButton
                             utxos={utxos}
                             appWallet={appWallet}
@@ -1129,19 +1118,8 @@ function ProposalRow({
                 </div>
               )}
               <div className="flex flex-col sm:flex-row gap-2">
-                <Button
-                  variant="default"
-                  className="w-full sm:w-auto text-sm bg-green-600 hover:bg-green-700 dark:bg-green-600 dark:hover:bg-green-700 text-white"
-                  onClick={() => {
-                    setCurrentProposal(proposalId, proposal.json_metadata.body.title);
-                    openModal();
-                  }}
-                >
-                  <Plus className="mr-2 h-4 w-4" />
-                  Add to Ballot
-                </Button>
                 <Link href={`/wallets/${appWallet.id}/governance/proposal/${proposal.tx_hash}:${proposal.cert_index}`}>
-                  <Button variant="default" className="w-full sm:w-auto text-sm">
+                  <Button variant="outline" className="w-full sm:w-auto text-sm">
                     View Full Proposal
                   </Button>
                 </Link>