feat(filters): surface active saved filter and allow updating in place

The Saved control now shows the saved filter the current selection matches (or is based on), with an unsaved-changes indicator. When the filters are edited, the menu offers "Update" to save over the existing filter instead of only creating a new one. Adds the PATCH endpoint and an order-insensitive fingerprint to detect matches.
2026-06-01 15:51:05 +02:00 · 2026-06-01 15:51:05 +02:00 · 9fb6f67d89
parent f18c3ba61e
commit 9fb6f67d89
6 changed files with 221 additions and 12 deletions
--- a/app/Http/Controllers/Api/SavedFilterController.php
+++ b/app/Http/Controllers/Api/SavedFilterController.php
@ -4,6 +4,7 @@ namespace App\Http\Controllers\Api;

 use App\Http\Controllers\Controller;
 use App\Http\Requests\Api\StoreSavedFilterRequest;
+use App\Http\Requests\Api\UpdateSavedFilterRequest;
 use App\Models\SavedFilter;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
@ -33,6 +34,17 @@ class SavedFilterController extends Controller
        ], 201);
    }

+    public function update(UpdateSavedFilterRequest $request, SavedFilter $savedFilter): JsonResponse
+    {
+        abort_unless($savedFilter->user_id === $request->user()->id, 403);
+
+        $savedFilter->update(['filters' => $request->validated('filters')]);
+
+        return response()->json([
+            'data' => $savedFilter->only(['id', 'name', 'filters']),
+        ]);
+    }
+
    public function destroy(Request $request, SavedFilter $savedFilter): JsonResponse
    {
        abort_unless($savedFilter->user_id === $request->user()->id, 403);
--- a/app/Http/Requests/Api/UpdateSavedFilterRequest.php
+++ b/app/Http/Requests/Api/UpdateSavedFilterRequest.php
@ -0,0 +1,34 @@
+<?php
+
+namespace App\Http\Requests\Api;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class UpdateSavedFilterRequest extends FormRequest
+{
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /** @return array<string, mixed> */
+    public function rules(): array
+    {
+        return [
+            'filters' => ['required', 'array'],
+            'filters.date_from' => ['nullable', 'date'],
+            'filters.date_to' => ['nullable', 'date'],
+            'filters.amount_min' => ['nullable', 'numeric'],
+            'filters.amount_max' => ['nullable', 'numeric'],
+            'filters.category_ids' => ['nullable', 'array'],
+            'filters.category_ids.*' => ['string'],
+            'filters.account_ids' => ['nullable', 'array'],
+            'filters.account_ids.*' => ['string'],
+            'filters.label_ids' => ['nullable', 'array'],
+            'filters.label_ids.*' => ['string'],
+            'filters.creditor_name' => ['nullable', 'string', 'max:255'],
+            'filters.debtor_name' => ['nullable', 'string', 'max:255'],
+            'filters.search' => ['nullable', 'string', 'max:200'],
+        ];
+    }
+}
--- a/resources/js/components/transactions/saved-filters.tsx
+++ b/resources/js/components/transactions/saved-filters.tsx
@ -18,16 +18,25 @@ import {
 import { Input } from '@/components/ui/input';
 import {
    deserializeFilters,
+    filtersFingerprint,
    hasActiveFilters,
    type SerializedFilters,
    serializeFilters,
 } from '@/lib/transaction-filter-serialization';
+import { cn } from '@/lib/utils';
 import { type TransactionFilters } from '@/types/transaction';
 import { type UUID } from '@/types/uuid';
 import { __ } from '@/utils/i18n';
 import axios from 'axios';
-import { Bookmark, Plus, Trash2 } from 'lucide-react';
-import { useEffect, useState } from 'react';
+import {
+    Bookmark,
+    BookmarkCheck,
+    Check,
+    Plus,
+    Save,
+    Trash2,
+} from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
 import { toast } from 'sonner';

 interface SavedFilter {
@ -43,12 +52,44 @@ interface SavedFiltersProps {

 export function SavedFilters({ filters, onLoad }: SavedFiltersProps) {
    const [savedFilters, setSavedFilters] = useState<SavedFilter[]>([]);
+    const [activeId, setActiveId] = useState<UUID | null>(null);
    const [saveDialogOpen, setSaveDialogOpen] = useState(false);
    const [name, setName] = useState('');
    const [isSaving, setIsSaving] = useState(false);

    const canSave = hasActiveFilters(filters);

+    const currentFingerprint = useMemo(
+        () => filtersFingerprint(serializeFilters(filters)),
+        [filters],
+    );
+
+    // The saved filter that exactly matches the current filters, if any.
+    const matchingSaved = useMemo(
+        () =>
+            savedFilters.find(
+                (savedFilter) =>
+                    filtersFingerprint(savedFilter.filters) ===
+                    currentFingerprint,
+            ) ?? null,
+        [savedFilters, currentFingerprint],
+    );
+
+    // Keep track of the saved filter we're working from: it follows an exact
+    // match, and otherwise sticks around (so edits can be saved over it) until
+    // the filters are cleared.
+    useEffect(() => {
+        if (matchingSaved) {
+            setActiveId(matchingSaved.id);
+        } else if (!canSave) {
+            setActiveId(null);
+        }
+    }, [matchingSaved, canSave]);
+
+    const activeFilter =
+        savedFilters.find((savedFilter) => savedFilter.id === activeId) ?? null;
+    const isDirty = activeFilter !== null && matchingSaved === null;
+
    useEffect(() => {
        let active = true;

@ -69,6 +110,7 @@ export function SavedFilters({ filters, onLoad }: SavedFiltersProps) {
    }, []);

    function handleLoad(savedFilter: SavedFilter) {
+        setActiveId(savedFilter.id);
        onLoad(deserializeFilters(savedFilter.filters));
    }

@ -77,6 +119,9 @@ export function SavedFilters({ filters, onLoad }: SavedFiltersProps) {
        setSavedFilters((current) =>
            current.filter((item) => item.id !== savedFilter.id),
        );
+        if (activeId === savedFilter.id) {
+            setActiveId(null);
+        }

        try {
            await axios.delete(`/api/saved-filters/${savedFilter.id}`);
@ -87,6 +132,26 @@ export function SavedFilters({ filters, onLoad }: SavedFiltersProps) {
        }
    }

+    async function handleUpdate(savedFilter: SavedFilter) {
+        try {
+            const response = await axios.patch<{ data: SavedFilter }>(
+                `/api/saved-filters/${savedFilter.id}`,
+                { filters: serializeFilters(filters) },
+            );
+
+            setSavedFilters((current) =>
+                current.map((item) =>
+                    item.id === savedFilter.id ? response.data.data : item,
+                ),
+            );
+            setActiveId(savedFilter.id);
+            toast.success(__('Filter updated'));
+        } catch (error) {
+            console.error('Failed to update saved filter:', error);
+            toast.error(__('Failed to update the saved filter'));
+        }
+    }
+
    async function handleSave() {
        const trimmedName = name.trim();
        if (!trimmedName || isSaving) {
@ -108,6 +173,7 @@ export function SavedFilters({ filters, onLoad }: SavedFiltersProps) {
                    a.name.localeCompare(b.name),
                ),
            );
+            setActiveId(response.data.data.id);
            setSaveDialogOpen(false);
            setName('');
            toast.success(__('Filter saved'));
@ -127,13 +193,34 @@ export function SavedFilters({ filters, onLoad }: SavedFiltersProps) {
        <>
            <DropdownMenu>
                <DropdownMenuTrigger asChild>
-                    <Button
-                        variant="outline"
-                        size="icon"
-                        aria-label={__('Saved filters')}
-                    >
-                        <Bookmark className="h-4 w-4" />
-                    </Button>
+                    {activeFilter ? (
+                        <Button
+                            variant="secondary"
+                            className="max-w-[200px]"
+                            aria-label={__('Saved filters')}
+                        >
+                            <BookmarkCheck className="mr-1 h-4 w-4 shrink-0" />
+                            <span className="truncate">
+                                {activeFilter.name}
+                            </span>
+                            {isDirty && (
+                                <span
+                                    className="ml-1 text-muted-foreground"
+                                    title={__('Unsaved changes')}
+                                >
+                                    •
+                                </span>
+                            )}
+                        </Button>
+                    ) : (
+                        <Button
+                            variant="outline"
+                            size="icon"
+                            aria-label={__('Saved filters')}
+                        >
+                            <Bookmark className="h-4 w-4" />
+                        </Button>
+                    )}
                </DropdownMenuTrigger>
                <DropdownMenuContent align="start" className="w-64">
                    <DropdownMenuLabel>{__('Saved filters')}</DropdownMenuLabel>
@ -150,8 +237,18 @@ export function SavedFilters({ filters, onLoad }: SavedFiltersProps) {
                                onSelect={() => handleLoad(savedFilter)}
                                className="group justify-between gap-2"
                            >
-                                <span className="truncate">
-                                    {savedFilter.name}
+                                <span className="flex min-w-0 items-center gap-2">
+                                    <Check
+                                        className={cn(
+                                            'h-3.5 w-3.5 shrink-0',
+                                            matchingSaved?.id === savedFilter.id
+                                                ? 'opacity-100'
+                                                : 'opacity-0',
+                                        )}
+                                    />
+                                    <span className="truncate">
+                                        {savedFilter.name}
+                                    </span>
                                </span>
                                <button
                                    type="button"
@ -170,6 +267,19 @@ export function SavedFilters({ filters, onLoad }: SavedFiltersProps) {
                    )}

                    <DropdownMenuSeparator />
+
+                    {isDirty && activeFilter && (
+                        <DropdownMenuItem
+                            onSelect={(event) => {
+                                event.preventDefault();
+                                handleUpdate(activeFilter);
+                            }}
+                        >
+                            <Save className="mr-1 h-4 w-4" />
+                            {__('Update “:name”', { name: activeFilter.name })}
+                        </DropdownMenuItem>
+                    )}
+
                    <DropdownMenuItem
                        disabled={!canSave}
                        onSelect={(event) => {
@ -178,7 +288,7 @@ export function SavedFilters({ filters, onLoad }: SavedFiltersProps) {
                        }}
                    >
                        <Plus className="mr-1 h-4 w-4" />
-                        {__('Save current filters…')}
+                        {__('Save as new filter…')}
                    </DropdownMenuItem>
                </DropdownMenuContent>
            </DropdownMenu>
--- a/resources/js/lib/transaction-filter-serialization.ts
+++ b/resources/js/lib/transaction-filter-serialization.ts
@ -76,3 +76,23 @@ export function deserializeFilters(
 export function hasActiveFilters(filters: TransactionFilters): boolean {
    return Object.keys(serializeFilters(filters)).length > 0;
 }
+
+/**
+ * Stable, order-insensitive fingerprint of a serialized filter set, so two
+ * filter sets that select the same things compare equal regardless of the
+ * order ids were added or which empty keys are present.
+ */
+export function filtersFingerprint(filters: SerializedFilters): string {
+    return JSON.stringify({
+        date_from: filters.date_from ?? null,
+        date_to: filters.date_to ?? null,
+        amount_min: filters.amount_min ?? null,
+        amount_max: filters.amount_max ?? null,
+        category_ids: [...(filters.category_ids ?? [])].sort(),
+        account_ids: [...(filters.account_ids ?? [])].sort(),
+        label_ids: [...(filters.label_ids ?? [])].sort(),
+        creditor_name: filters.creditor_name ?? '',
+        debtor_name: filters.debtor_name ?? '',
+        search: filters.search ?? '',
+    });
+}
--- a/routes/api.php
+++ b/routes/api.php
@ -65,5 +65,6 @@ Route::middleware(['web', 'auth'])->group(function () {
    // Saved filters (shared between transactions and analysis screens)
    Route::get('saved-filters', [SavedFilterController::class, 'index'])->name('api.saved-filters.index');
    Route::post('saved-filters', [SavedFilterController::class, 'store'])->name('api.saved-filters.store');
+    Route::patch('saved-filters/{savedFilter}', [SavedFilterController::class, 'update'])->name('api.saved-filters.update');
    Route::delete('saved-filters/{savedFilter}', [SavedFilterController::class, 'destroy'])->name('api.saved-filters.destroy');
 });
--- a/tests/Feature/SavedFilterTest.php
+++ b/tests/Feature/SavedFilterTest.php
@ -72,6 +72,38 @@ test('the same name can be reused by a different user', function () {
        ->assertCreated();
 });

+test('a user can update their own saved filter', function () {
+    $savedFilter = SavedFilter::factory()->create([
+        'user_id' => $this->user->id,
+        'filters' => ['search' => 'old'],
+    ]);
+
+    $response = $this->patchJson("/api/saved-filters/{$savedFilter->id}", [
+        'filters' => ['search' => 'new', 'category_ids' => ['food']],
+    ])->assertOk();
+
+    expect($response->json('data.filters.search'))->toBe('new');
+
+    $this->assertDatabaseHas('saved_filters', [
+        'id' => $savedFilter->id,
+        'name' => $savedFilter->name,
+    ]);
+    expect($savedFilter->fresh()->filters)->toBe([
+        'search' => 'new',
+        'category_ids' => ['food'],
+    ]);
+});
+
+test('a user cannot update another user saved filter', function () {
+    $savedFilter = SavedFilter::factory()->create(['filters' => ['search' => 'old']]);
+
+    $this->patchJson("/api/saved-filters/{$savedFilter->id}", [
+        'filters' => ['search' => 'hacked'],
+    ])->assertForbidden();
+
+    expect($savedFilter->fresh()->filters)->toBe(['search' => 'old']);
+});
+
 test('a user can delete their own saved filter', function () {
    $savedFilter = SavedFilter::factory()->create(['user_id' => $this->user->id]);