From 2ef64c9192a388cb34ce510afd5db92526ce40cd Mon Sep 17 00:00:00 2001
From: yiekheng <yiekheng@04080616.xyz>
Date: Sun, 10 May 2026 00:35:01 +0800
Subject: [PATCH] feat(web): show Re-pair/Delete on accounts list cards

Surface state-aware quick actions directly on each card so the user
doesn't have to drill into the detail page just to delete or re-pair an
account. Re-pair shows when status != connected; Delete (with
destructive confirm dialog) is always available.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/web/src/app/accounts/page.tsx | 134 ++++++++++++++++++++---------
 1 file changed, 95 insertions(+), 39 deletions(-)

diff --git a/apps/web/src/app/accounts/page.tsx b/apps/web/src/app/accounts/page.tsx
index cfd50da..d7e0405 100644
--- a/apps/web/src/app/accounts/page.tsx
+++ b/apps/web/src/app/accounts/page.tsx
@@ -1,16 +1,25 @@
 import Link from "next/link";
-import { PlusIcon, SmartphoneIcon, CalendarIcon } from "lucide-react";
+import { PlusIcon, SmartphoneIcon, CalendarIcon, PowerIcon, Trash2Icon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
   CardHeader,
   CardTitle,
-  CardDescription,
 } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import { AccountStatusBadge } from "@/components/account-status-badge";
 import { getSeededOperator } from "@/lib/operator";
 import { listAccounts } from "@/lib/queries";
+import { pairAccountAction, deleteAccountAction } from "@/actions/accounts";
 
 export default async function AccountsPage() {
   const op = await getSeededOperator();
@@ -25,7 +34,7 @@ export default async function AccountsPage() {
           {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
           <Link href={"/accounts/new" as any}>
             <PlusIcon />
-            Pair New Account
+            Add Account
           </Link>
         </Button>
       </div>
@@ -34,45 +43,92 @@ export default async function AccountsPage() {
       {accounts.length > 0 ? (
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {accounts.map((account) => (
-            <Link
+            <Card
               key={account.id}
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              href={`/accounts/${account.id}` as any}
-              className="block rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+              className="h-full transition-shadow hover:shadow-md hover:ring-foreground/20"
             >
-              <Card className="h-full transition-shadow hover:shadow-md hover:ring-foreground/20">
-                <CardHeader>
-                  <div className="flex items-start justify-between gap-2">
-                    <CardTitle className="text-base leading-snug">{account.label}</CardTitle>
-                    <AccountStatusBadge status={account.status} />
+              <CardHeader>
+                <div className="flex items-start justify-between gap-2">
+                  <CardTitle className="text-base leading-snug">
+                    {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+                    <Link href={`/accounts/${account.id}` as any} className="hover:underline">
+                      {account.label}
+                    </Link>
+                  </CardTitle>
+                  <AccountStatusBadge status={account.status} />
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                {account.phoneNumber ? (
+                  <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+                    <SmartphoneIcon className="size-3.5 shrink-0" />
+                    <span>{account.phoneNumber}</span>
                   </div>
-                </CardHeader>
-                <CardContent className="space-y-2">
-                  {account.phoneNumber ? (
-                    <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
-                      <SmartphoneIcon className="size-3.5 shrink-0" />
-                      <span>{account.phoneNumber}</span>
-                    </div>
-                  ) : (
-                    <p className="text-sm text-muted-foreground/60 italic">No phone number</p>
+                ) : (
+                  <p className="text-sm text-muted-foreground/60 italic">Not paired yet</p>
+                )}
+                {account.lastConnectedAt ? (
+                  <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                    <CalendarIcon className="size-3 shrink-0" />
+                    <span>
+                      Last connected{" "}
+                      {account.lastConnectedAt.toLocaleDateString("en-MY", {
+                        timeZone: "Asia/Kuala_Lumpur",
+                        year: "numeric",
+                        month: "short",
+                        day: "numeric",
+                      })}
+                    </span>
+                  </div>
+                ) : null}
+                {/* Quick actions */}
+                <div className="flex items-center gap-2 pt-1">
+                  {account.status !== "connected" && (
+                    <form action={pairAccountAction}>
+                      <input type="hidden" name="accountId" value={account.id} />
+                      <Button type="submit" size="sm" variant="default">
+                        <PowerIcon />
+                        {account.status === "unpaired" ? "Pair" : "Re-pair"}
+                      </Button>
+                    </form>
                   )}
-                  {account.lastConnectedAt ? (
-                    <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                      <CalendarIcon className="size-3 shrink-0" />
-                      <span>
-                        Last connected{" "}
-                        {account.lastConnectedAt.toLocaleDateString("en-MY", {
-                          timeZone: "Asia/Kuala_Lumpur",
-                          year: "numeric",
-                          month: "short",
-                          day: "numeric",
-                        })}
-                      </span>
-                    </div>
-                  ) : null}
-                </CardContent>
-              </Card>
-            </Link>
+                  <Button asChild size="sm" variant="outline">
+                    {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+                    <Link href={`/accounts/${account.id}` as any}>Open</Link>
+                  </Button>
+                  <Dialog>
+                    <DialogTrigger asChild>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        className="text-destructive hover:bg-destructive/10 hover:text-destructive ml-auto"
+                      >
+                        <Trash2Icon />
+                        Delete
+                      </Button>
+                    </DialogTrigger>
+                    <DialogContent>
+                      <DialogHeader>
+                        <DialogTitle>Delete this account?</DialogTitle>
+                        <DialogDescription>
+                          <strong>{account.label}</strong> and all its reminders, groups,
+                          and history will be permanently removed. This cannot be undone.
+                        </DialogDescription>
+                      </DialogHeader>
+                      <DialogFooter showCloseButton>
+                        <form action={deleteAccountAction}>
+                          <input type="hidden" name="accountId" value={account.id} />
+                          <Button type="submit" variant="destructive" size="sm">
+                            <Trash2Icon />
+                            Yes, delete
+                          </Button>
+                        </form>
+                      </DialogFooter>
+                    </DialogContent>
+                  </Dialog>
+                </div>
+              </CardContent>
+            </Card>
           ))}
         </div>
       ) : (
@@ -89,7 +145,7 @@ export default async function AccountsPage() {
               {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
               <Link href={"/accounts/new" as any}>
                 <PlusIcon />
-                Pair New Account
+                Add Account
               </Link>
             </Button>
           </CardContent>