From b453555a3d766e3214615713b204a24dd0f461e6 Mon Sep 17 00:00:00 2001
From: yiekheng <yiekheng@04080616.xyz>
Date: Sun, 10 May 2026 01:02:51 +0800
Subject: [PATCH] feat(web): dedicated Delete card per account on the list

Replace the corner trash icon with a separate destructive-themed card
stacked beneath each account card. Whole card is the confirm-dialog
trigger.

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

diff --git a/apps/web/src/app/accounts/page.tsx b/apps/web/src/app/accounts/page.tsx
index 6ebf3ab..53df973 100644
--- a/apps/web/src/app/accounts/page.tsx
+++ b/apps/web/src/app/accounts/page.tsx
@@ -41,7 +41,7 @@ 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) => (
-            <div key={account.id} className="relative">
+            <div key={account.id} className="flex flex-col gap-2">
               <Link
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 href={`/accounts/${account.id}` as any}
@@ -50,7 +50,7 @@ export default async function AccountsPage() {
                 <Card className="h-full transition-all hover:shadow-md hover:ring-primary/30 cursor-pointer">
                   <CardHeader>
                     <div className="flex items-start justify-between gap-2">
-                      <CardTitle className="text-base leading-snug pr-8">
+                      <CardTitle className="text-base leading-snug">
                         {account.label}
                       </CardTitle>
                       <AccountStatusBadge status={account.status} />
@@ -83,16 +83,28 @@ export default async function AccountsPage() {
                 </Card>
               </Link>
 
-              {/* Floating delete trigger — sits over the card without
-                  blocking the link target on the rest of the surface. */}
+              {/* Dedicated Delete card — entire card is the dialog trigger. */}
               <Dialog>
                 <DialogTrigger asChild>
                   <button
                     type="button"
-                    aria-label={`Delete ${account.label}`}
-                    className="absolute right-2 top-2 z-10 flex size-7 items-center justify-center rounded-full bg-background/80 text-muted-foreground hover:bg-destructive/10 hover:text-destructive backdrop-blur-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive"
+                    className="block w-full text-left rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive focus-visible:ring-offset-2"
                   >
-                    <Trash2Icon className="size-3.5" />
+                    <Card className="transition-all hover:shadow-md hover:ring-destructive/30 cursor-pointer">
+                      <CardContent className="flex items-center gap-3 py-3 px-4">
+                        <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-destructive/10">
+                          <Trash2Icon className="size-4 text-destructive" />
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <p className="text-sm font-medium text-destructive">
+                            Delete account
+                          </p>
+                          <p className="text-xs text-muted-foreground truncate">
+                            Remove {account.label} and its reminders & groups
+                          </p>
+                        </div>
+                      </CardContent>
+                    </Card>
                   </button>
                 </DialogTrigger>
                 <DialogContent>