From 6486908716e563b3b8970b9ec7b73989d7ee72be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Falc=C3=B3n?= <victoor89@gmail.com>
Date: Tue, 9 Jun 2026 11:04:32 +0200
Subject: [PATCH] fix(transactions): tidy filter bar into two balanced rows
 (#510)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## What

Tidies the transactions filter bar so it lays out as **two balanced
rows** — a control on the left and on the right of each — instead of
wrapping awkwardly once **Transaction analysis** is enabled (the
saved-filters button was crowding the row).

- **Row 1:** `Filters` (left) · search input (grows, middle) ·
saved-filters bookmark (right)
- **Row 2:** `Analysis / Categorize / + Transaction / ▾` (left) ·
`Columns` (right)

Actions row dropped `flex-wrap` + `sm:justify-end` in favour of a clean
`justify-between`; the saved-filters/clear group is now grouped to the
right with `ml-auto`.

## Screenshots

**Desktop**


![Desktop](https://github.com/whisper-money/whisper-money/blob/assets/transaction-filters-screenshots/screenshots/transactions-desktop.png?raw=true)

**Mobile**


![Mobile](https://github.com/whisper-money/whisper-money/blob/assets/transaction-filters-screenshots/screenshots/transactions-mobile.png?raw=true)

## Notes

- Screenshots are hosted on a throwaway
`assets/transaction-filters-screenshots` branch so they render here
without landing in `main`. Safe to delete after merge.
---
 .../transactions/transaction-actions-menu.tsx |  7 ++-
 .../transactions/transaction-filters.tsx      | 50 ++++++++++---------
 resources/js/pages/transactions/index.tsx     |  2 +-
 3 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/resources/js/components/transactions/transaction-actions-menu.tsx b/resources/js/components/transactions/transaction-actions-menu.tsx
index 0570beb3..82faad76 100644
--- a/resources/js/components/transactions/transaction-actions-menu.tsx
+++ b/resources/js/components/transactions/transaction-actions-menu.tsx
@@ -132,16 +132,17 @@ export function TransactionActionsMenu({
                     (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" />
-                            {__('Analysis')}
                         </Button>
                     ) : (
                         <TooltipProvider>
@@ -224,7 +225,9 @@ export function TransactionActionsMenu({
                                 aria-label={__('Add transaction')}
                             >
                                 <Plus className="h-5 w-5" />
-                                {__('Transaction')}
+                                <span className="hidden sm:inline">
+                                    {__('Transaction')}
+                                </span>
                             </Button>
                         </TooltipTrigger>
                         <TooltipContent>
diff --git a/resources/js/components/transactions/transaction-filters.tsx b/resources/js/components/transactions/transaction-filters.tsx
index 9e377898..08bfd125 100644
--- a/resources/js/components/transactions/transaction-filters.tsx
+++ b/resources/js/components/transactions/transaction-filters.tsx
@@ -239,13 +239,6 @@ export function TransactionFilters({
         <div className="space-y-4">
             <div className="flex flex-col gap-3">
                 <div className="flex w-full flex-row items-center gap-2">
-                    <Input
-                        placeholder={__('Search description or notes...')}
-                        value={searchText}
-                        onChange={(e) => setSearchText(e.target.value)}
-                        className="hidden min-w-0 flex-1 md:block md:min-w-[350px]"
-                    />
-
                     <Popover open={isOpen} onOpenChange={setIsOpen}>
                         <PopoverTrigger asChild>
                             <Button variant="outline">
@@ -704,24 +697,33 @@ export function TransactionFilters({
                         </PopoverContent>
                     </Popover>
 
-                    {enableSavedFilters && features.transactionAnalysis && (
-                        <SavedFilters
-                            filters={filters}
-                            onLoad={onFiltersChange}
-                        />
-                    )}
+                    <Input
+                        placeholder={__('Search description or notes...')}
+                        value={searchText}
+                        onChange={(e) => setSearchText(e.target.value)}
+                        className="hidden min-w-0 flex-1 md:block md:min-w-[350px]"
+                    />
 
-                    {activeFilterCount > 0 && (
-                        <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={clearFilters}
-                            className="h-9"
-                        >
-                            <X className="mr-1 h-4 w-4" />
-                            {__('Clear')}
-                        </Button>
-                    )}
+                    <div className="ml-auto flex items-center gap-2">
+                        {enableSavedFilters && features.transactionAnalysis && (
+                            <SavedFilters
+                                filters={filters}
+                                onLoad={onFiltersChange}
+                            />
+                        )}
+
+                        {activeFilterCount > 0 && (
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={clearFilters}
+                                className="h-9"
+                            >
+                                <X className="mr-1 h-4 w-4" />
+                                {__('Clear')}
+                            </Button>
+                        )}
+                    </div>
                 </div>
 
                 {actions ? <div className="w-full">{actions}</div> : null}
diff --git a/resources/js/pages/transactions/index.tsx b/resources/js/pages/transactions/index.tsx
index c01b228d..a573704f 100644
--- a/resources/js/pages/transactions/index.tsx
+++ b/resources/js/pages/transactions/index.tsx
@@ -1167,7 +1167,7 @@ export default function Transactions({
                         isKeySet={true}
                         enableSavedFilters={true}
                         actions={
-                            <div className="flex w-full flex-wrap justify-between gap-2 sm:justify-end">
+                            <div className="flex w-full items-center justify-between gap-2">
                                 <TransactionActionsMenu
                                     categories={categories}
                                     accounts={accounts}