From 522199483ce8a5c00dfbd366660b5da4688911d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20Falco=CC=81n?= <victoor89@gmail.com>
Date: Sat, 20 Jun 2026 19:41:43 +0200
Subject: [PATCH] feat(accounts): swap the account type icon with the drag
 handle on hover

Revert to the icon-swap handle: on the dashboard card the drag handle
takes the place of the account type icon (top-right) on hover.

On the accounts list card, add the account type icon in the bottom-left
of the actions row (buttons follow it) and apply the same hover swap, so
both screens reveal the drag handle the same way.
---
 .../components/accounts/account-list-card.tsx | 29 ++++--
 .../dashboard/account-balance-card.tsx        | 88 ++++++++++---------
 resources/js/components/sortable-grid.tsx     |  4 +-
 3 files changed, 68 insertions(+), 53 deletions(-)

diff --git a/resources/js/components/accounts/account-list-card.tsx b/resources/js/components/accounts/account-list-card.tsx
index a6ecd7ba..6416df9c 100644
--- a/resources/js/components/accounts/account-list-card.tsx
+++ b/resources/js/components/accounts/account-list-card.tsx
@@ -1,11 +1,13 @@
 import { show } from '@/actions/App/Http/Controllers/AccountController';
 import { AccountName } from '@/components/accounts/account-name';
 import { BankLogo } from '@/components/bank-logo';
+import { AccountTypeIcon } from '@/components/dashboard/account-type-icon';
 import { AmountTrendIndicator } from '@/components/dashboard/amount-trend-indicator';
 import { AmountDisplay } from '@/components/ui/amount-display';
 import { Card, CardContent } from '@/components/ui/card';
 import { useChartColors } from '@/hooks/use-chart-color-scheme';
 import { AccountWithMetrics } from '@/hooks/use-dashboard-data';
+import { cn } from '@/lib/utils';
 import { formatAccountType, supportsInvestedAmount } from '@/types/account';
 import { __ } from '@/utils/i18n';
 import { Link } from '@inertiajs/react';
@@ -139,12 +141,11 @@ export function AccountListCard({
             <CardContent className="p-4">
                 <div className="flex flex-col gap-4">
                     <div className="flex max-w-full flex-col sm:flex-row sm:items-center sm:justify-between">
-                        <div className="flex min-w-0 items-start">
-                            {dragHandle}
+                        <div className="flex min-w-0 items-start gap-3">
                             <div className="flex min-w-0 flex-col gap-1">
                                 <Link
                                     href={show.url(account.id)}
-                                    className="-my-1 flex min-w-0 items-center rounded-md px-1.5 py-1 transition-colors hover:bg-muted"
+                                    className="-my-1 -ml-1.5 flex min-w-0 items-center rounded-md px-1.5 py-1 transition-colors hover:bg-muted"
                                 >
                                     <h3 className="flex min-w-0 items-center gap-2 font-semibold">
                                         {account.bank && (
@@ -429,7 +430,22 @@ export function AccountListCard({
                             </LineChart>
                         </ResponsiveContainer>
                     </div>
-                    <div className="flex justify-between">
+                    <div className="flex items-center gap-2">
+                        <div className="relative size-5 shrink-0 text-muted-foreground">
+                            <AccountTypeIcon
+                                type={account.type}
+                                className={cn(
+                                    'transition-opacity',
+                                    dragHandle && 'group-hover:opacity-0',
+                                )}
+                            />
+                            {dragHandle && (
+                                <span className="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100">
+                                    {dragHandle}
+                                </span>
+                            )}
+                        </div>
+
                         {!isConnected && (
                             <Button
                                 className="cursor-pointer"
@@ -444,10 +460,7 @@ export function AccountListCard({
                             </Button>
                         )}
 
-                        <Link
-                            href={show.url(account.id)}
-                            className={isConnected ? 'ml-auto' : ''}
-                        >
+                        <Link href={show.url(account.id)} className="ml-auto">
                             <Button className="cursor-pointer" variant="ghost">
                                 {__('Details')} &rarr;
                             </Button>
diff --git a/resources/js/components/dashboard/account-balance-card.tsx b/resources/js/components/dashboard/account-balance-card.tsx
index c92a51bc..8d169829 100644
--- a/resources/js/components/dashboard/account-balance-card.tsx
+++ b/resources/js/components/dashboard/account-balance-card.tsx
@@ -6,6 +6,7 @@ import { AmountDisplay } from '@/components/ui/amount-display';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { useChartColors } from '@/hooks/use-chart-color-scheme';
 import { AccountWithMetrics } from '@/hooks/use-dashboard-data';
+import { cn } from '@/lib/utils';
 import { supportsInvestedAmount } from '@/types/account';
 import { __ } from '@/utils/i18n';
 import { Link } from '@inertiajs/react';
@@ -157,54 +158,57 @@ export function AccountBalanceCard({
     return (
         <Card>
             <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <div className="flex min-w-0 items-start">
-                    {dragHandle}
-                    <div className="flex min-w-0 flex-col gap-0.5">
-                        <CardTitle className="text-sm font-medium">
-                            <Link
-                                href={show.url(account.id)}
-                                className="-my-1 flex items-center rounded-md px-1.5 py-1 transition-colors hover:bg-muted"
-                            >
-                                <BankLogo
-                                    src={account.bank?.logo ?? null}
-                                    name={account.bank?.name}
-                                    className="mr-2 inline-block size-5"
-                                />
+                <div className="flex flex-col gap-0.5">
+                    <CardTitle className="text-sm font-medium">
+                        <Link
+                            href={show.url(account.id)}
+                            className="-my-1 -ml-1.5 flex items-center rounded-md px-1.5 py-1 transition-colors hover:bg-muted"
+                        >
+                            <BankLogo
+                                src={account.bank?.logo ?? null}
+                                name={account.bank?.name}
+                                className="mr-2 inline-block size-5"
+                            />
 
-                                <AccountName
-                                    account={account}
-                                    length={{ min: 5, max: 15 }}
+                            <AccountName
+                                account={account}
+                                length={{ min: 5, max: 15 }}
+                            />
+                        </Link>
+                    </CardTitle>
+                    {hasMortgage && linkedLoanMetrics.loanAccount && (
+                        <span className="flex items-center gap-1 pt-0.5 text-xs text-muted-foreground">
+                            {__('Mortgage at')}{' '}
+                            {linkedLoanMetrics.loanAccount.bank && (
+                                <BankLogo
+                                    src={
+                                        linkedLoanMetrics.loanAccount.bank.logo
+                                    }
+                                    name={
+                                        linkedLoanMetrics.loanAccount.bank.name
+                                    }
+                                    className="size-3.5 shrink-0"
+                                    fallback="letter"
                                 />
-                            </Link>
-                        </CardTitle>
-                        {hasMortgage && linkedLoanMetrics.loanAccount && (
-                            <span className="flex items-center gap-1 pt-0.5 text-xs text-muted-foreground">
-                                {__('Mortgage at')}{' '}
-                                {linkedLoanMetrics.loanAccount.bank && (
-                                    <BankLogo
-                                        src={
-                                            linkedLoanMetrics.loanAccount.bank
-                                                .logo
-                                        }
-                                        name={
-                                            linkedLoanMetrics.loanAccount.bank
-                                                .name
-                                        }
-                                        className="size-3.5 shrink-0"
-                                        fallback="letter"
-                                    />
-                                )}
-                                {linkedLoanMetrics.loanAccount.bank?.name ??
-                                    linkedLoanMetrics.loanAccount.name}
-                            </span>
-                        )}
-                    </div>
+                            )}
+                            {linkedLoanMetrics.loanAccount.bank?.name ??
+                                linkedLoanMetrics.loanAccount.name}
+                        </span>
+                    )}
                 </div>
-                <div className="text-xs font-medium text-muted-foreground">
+                <div className="relative mr-1 size-5 shrink-0">
                     <AccountTypeIcon
                         type={account.type}
-                        className="mr-1 inline-block"
+                        className={cn(
+                            'transition-opacity',
+                            dragHandle && 'group-hover:opacity-0',
+                        )}
                     />
+                    {dragHandle && (
+                        <span className="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100">
+                            {dragHandle}
+                        </span>
+                    )}
                 </div>
             </CardHeader>
             <CardContent>
diff --git a/resources/js/components/sortable-grid.tsx b/resources/js/components/sortable-grid.tsx
index 97c54bc2..0ea26701 100644
--- a/resources/js/components/sortable-grid.tsx
+++ b/resources/js/components/sortable-grid.tsx
@@ -110,14 +110,12 @@ function SortableItem({
         isDragging,
     } = useSortable({ id });
 
-    // Collapsed to zero width by default; on card hover it expands and slides
-    // in, pushing the card's leading content (logo + name) to the right.
     const dragHandle = (
         <button
             ref={setActivatorNodeRef}
             type="button"
             aria-label={__('Drag to reorder')}
-            className="flex w-0 shrink-0 cursor-grab touch-none items-center overflow-hidden text-muted-foreground/70 opacity-0 transition-all duration-200 ease-out group-hover:w-6 group-hover:opacity-100 hover:text-foreground active:cursor-grabbing"
+            className="cursor-grab touch-none text-muted-foreground transition-colors hover:text-foreground active:cursor-grabbing"
             {...attributes}
             {...listeners}
         >