From 3223824edb03d3f5657af55dc8b01a8e79259f06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Falc=C3=B3n?= <victoor89@gmail.com>
Date: Fri, 12 Jun 2026 16:21:23 +0200
Subject: [PATCH] fix(transactions): improve mobile analysis button affordance
 (#520)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Improves the transaction actions menu on mobile:

- **Tap-to-show tooltip instead of a modal** — when the Analysis button
is tapped with no filter applied, it now shows the same tooltip used on
desktop ("Apply a filter to enable this button") via a controlled Radix
tooltip, instead of opening a separate modal dialog.
- **Always show the "Analysis" label on mobile** — previously the mobile
button was icon-only, which made it hard to understand. It now shows the
icon + label like desktop.
- **Move "Add transaction" into the more-actions dropdown on mobile** —
frees up horizontal space so the Analysis label fits. On desktop the
standalone Add transaction button is unchanged.

## Notes

- Reuses the existing `Add transaction` translation key (already in
`lang/es.json`).
- Removed the now-unused `Dialog` import/markup.

## Test plan

- [ ] On mobile, tap Analysis with no filter → tooltip appears on tap,
dismisses on tap outside.
- [ ] On mobile, the Analysis button shows its label.
- [ ] On mobile, "Add transaction" appears in the more-actions (⌄)
dropdown.
- [ ] On desktop, behavior is unchanged (hover tooltip, standalone Add
transaction button).
---
 .../transactions/transaction-actions-menu.tsx | 128 ++++++++++--------
 1 file changed, 69 insertions(+), 59 deletions(-)

diff --git a/resources/js/components/transactions/transaction-actions-menu.tsx b/resources/js/components/transactions/transaction-actions-menu.tsx
index 82faad76..7e7d1bae 100644
--- a/resources/js/components/transactions/transaction-actions-menu.tsx
+++ b/resources/js/components/transactions/transaction-actions-menu.tsx
@@ -1,13 +1,6 @@
 import { categorize } from '@/actions/App/Http/Controllers/TransactionController';
 import { Button } from '@/components/ui/button';
 import { ButtonGroup } from '@/components/ui/button-group';
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogHeader,
-    DialogTitle,
-} from '@/components/ui/dialog';
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -84,7 +77,7 @@ export function TransactionActionsMenu({
     const handleAnalysisClick = () => {
         if (!canAnalyze) {
             if (isMobile) {
-                setAnalysisHintOpen(true);
+                setAnalysisHintOpen((open) => !open);
             }
             return;
         }
@@ -130,20 +123,35 @@ export function TransactionActionsMenu({
             <ButtonGroup>
                 {features.transactionAnalysis &&
                     (isMobile ? (
-                        <Button
-                            variant="outline"
-                            size="icon"
-                            className={
-                                !canAnalyze
-                                    ? 'cursor-not-allowed opacity-50'
-                                    : ''
-                            }
-                            aria-disabled={!canAnalyze}
-                            aria-label={__('Analysis')}
-                            onClick={handleAnalysisClick}
-                        >
-                            <BarChart3 className="h-5 w-5" />
-                        </Button>
+                        <TooltipProvider>
+                            <Tooltip
+                                open={!canAnalyze && analysisHintOpen}
+                                onOpenChange={setAnalysisHintOpen}
+                            >
+                                <TooltipTrigger asChild>
+                                    <Button
+                                        variant="outline"
+                                        className={
+                                            !canAnalyze
+                                                ? 'cursor-not-allowed opacity-50'
+                                                : ''
+                                        }
+                                        aria-disabled={!canAnalyze}
+                                        onClick={handleAnalysisClick}
+                                    >
+                                        <BarChart3 className="h-5 w-5" />
+                                        {__('Analysis')}
+                                    </Button>
+                                </TooltipTrigger>
+                                {!canAnalyze && (
+                                    <TooltipContent>
+                                        {__(
+                                            'Apply a filter to enable this button',
+                                        )}
+                                    </TooltipContent>
+                                )}
+                            </Tooltip>
+                        </TooltipProvider>
                     ) : (
                         <TooltipProvider>
                             <Tooltip>
@@ -211,32 +219,36 @@ export function TransactionActionsMenu({
                     </Tooltip>
                 </TooltipProvider>
 
-                <TooltipProvider>
-                    <Tooltip>
-                        <TooltipTrigger asChild>
-                            <Button
-                                variant="outline"
-                                className={
-                                    !isKeySet
-                                        ? 'cursor-not-allowed opacity-50'
-                                        : ''
-                                }
-                                onClick={handleAddTransaction}
-                                aria-label={__('Add transaction')}
-                            >
-                                <Plus className="h-5 w-5" />
-                                <span className="hidden sm:inline">
-                                    {__('Transaction')}
-                                </span>
-                            </Button>
-                        </TooltipTrigger>
-                        <TooltipContent>
-                            {!isKeySet
-                                ? __('Unlock encryption to add transactions')
-                                : __('Create a new transaction')}
-                        </TooltipContent>
-                    </Tooltip>
-                </TooltipProvider>
+                {!isMobile && (
+                    <TooltipProvider>
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <Button
+                                    variant="outline"
+                                    className={
+                                        !isKeySet
+                                            ? 'cursor-not-allowed opacity-50'
+                                            : ''
+                                    }
+                                    onClick={handleAddTransaction}
+                                    aria-label={__('Add transaction')}
+                                >
+                                    <Plus className="h-5 w-5" />
+                                    <span className="hidden sm:inline">
+                                        {__('Transaction')}
+                                    </span>
+                                </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                                {!isKeySet
+                                    ? __(
+                                          'Unlock encryption to add transactions',
+                                      )
+                                    : __('Create a new transaction')}
+                            </TooltipContent>
+                        </Tooltip>
+                    </TooltipProvider>
+                )}
 
                 <DropdownMenu>
                     <TooltipProvider>
@@ -258,6 +270,15 @@ export function TransactionActionsMenu({
                         </Tooltip>
                     </TooltipProvider>
                     <DropdownMenuContent align="end">
+                        {isMobile && (
+                            <DropdownMenuItem
+                                onClick={handleAddTransaction}
+                                disabled={!isKeySet}
+                            >
+                                <Plus className="mr-2 h-4 w-4" />
+                                {__('Add transaction')}
+                            </DropdownMenuItem>
+                        )}
                         <DropdownMenuItem
                             onClick={handleOpenImportDrawer}
                             disabled={!isKeySet}
@@ -293,17 +314,6 @@ export function TransactionActionsMenu({
                     filters={filters}
                 />
             )}
-
-            <Dialog open={analysisHintOpen} onOpenChange={setAnalysisHintOpen}>
-                <DialogContent>
-                    <DialogHeader>
-                        <DialogTitle>{__('Analysis')}</DialogTitle>
-                        <DialogDescription>
-                            {__('Apply a filter to enable this button')}
-                        </DialogDescription>
-                    </DialogHeader>
-                </DialogContent>
-            </Dialog>
         </>
     );
 }