From 3f2f6abefaf7eb7087516373886b81b395686cef Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Tue, 23 Dec 2025 13:55:04 -0800 Subject: [PATCH] preserve list filters when navigating back from detail pages --- .../database/DatabaseGridWithProvider.svelte | 3 ++ .../database/DatabasePageHeader.svelte | 16 ++----- src/lib/utils/listNavigation.ts | 46 +++++++++++++++++++ .../characters/[granblueId]/+page.svelte | 3 +- .../characters/[granblueId]/edit/+page.svelte | 6 +-- .../summons/[granblueId]/+page.svelte | 3 +- .../summons/[granblueId]/edit/+page.svelte | 6 +-- .../weapons/[granblueId]/+page.svelte | 3 +- .../weapons/[granblueId]/edit/+page.svelte | 6 +-- 9 files changed, 62 insertions(+), 30 deletions(-) create mode 100644 src/lib/utils/listNavigation.ts diff --git a/src/lib/components/database/DatabaseGridWithProvider.svelte b/src/lib/components/database/DatabaseGridWithProvider.svelte index 84e99c0d..144e928d 100644 --- a/src/lib/components/database/DatabaseGridWithProvider.svelte +++ b/src/lib/components/database/DatabaseGridWithProvider.svelte @@ -23,6 +23,7 @@ } from '$lib/utils/filterParams' import Button from '$lib/components/ui/Button.svelte' import Icon from '$lib/components/Icon.svelte' + import { storeListUrl } from '$lib/utils/listNavigation' import type { Snippet } from 'svelte' @@ -232,6 +233,8 @@ // Find the row data to get the granblueId const rowData = data.find((item: any) => item.id === rowId) if (rowData && rowData.granblueId) { + // Store current list URL before navigating so Back button can return here + storeListUrl($page.url.href, resource) goto(`/database/${resource}/${rowData.granblueId}`) } } diff --git a/src/lib/components/database/DatabasePageHeader.svelte b/src/lib/components/database/DatabasePageHeader.svelte index 273f1993..ca898b4f 100644 --- a/src/lib/components/database/DatabasePageHeader.svelte +++ b/src/lib/components/database/DatabasePageHeader.svelte @@ -9,24 +9,16 @@ title: string /** Custom right action content */ rightAction?: Snippet | undefined - /** Click handler for back button - defaults to history.back() */ - onBack?: (() => void) | undefined + /** URL to navigate to when back is clicked */ + backHref: string } - let { title, rightAction, onBack }: Props = $props() - - function handleBack() { - if (onBack) { - onBack() - } else { - history.back() - } - } + let { title, rightAction, backHref }: Props = $props()
-
diff --git a/src/lib/utils/listNavigation.ts b/src/lib/utils/listNavigation.ts new file mode 100644 index 00000000..582aac0e --- /dev/null +++ b/src/lib/utils/listNavigation.ts @@ -0,0 +1,46 @@ +/** + * Utilities for preserving list navigation state + * Stores the list URL when navigating to a detail page so the Back button + * can return to the filtered list + */ + +const STORAGE_KEY = 'database_list_url' + +interface StoredListUrl { + url: string + resource: 'characters' | 'weapons' | 'summons' +} + +/** + * Store the current list URL before navigating to a detail page + */ +export function storeListUrl(url: string, resource: 'characters' | 'weapons' | 'summons'): void { + try { + const data: StoredListUrl = { url, resource } + sessionStorage.setItem(STORAGE_KEY, JSON.stringify(data)) + } catch { + // sessionStorage not available + } +} + +/** + * Get the stored list URL for a resource, or return the base path as fallback + */ +export function getListUrl(resource: 'characters' | 'weapons' | 'summons'): string { + const basePath = `/database/${resource}` + + try { + const stored = sessionStorage.getItem(STORAGE_KEY) + if (stored) { + const data: StoredListUrl = JSON.parse(stored) + // Only use stored URL if it matches the current resource + if (data.resource === resource) { + return data.url + } + } + } catch { + // sessionStorage not available or invalid data + } + + return basePath +} diff --git a/src/routes/(app)/database/characters/[granblueId]/+page.svelte b/src/routes/(app)/database/characters/[granblueId]/+page.svelte index a897017b..af74f7c0 100644 --- a/src/routes/(app)/database/characters/[granblueId]/+page.svelte +++ b/src/routes/(app)/database/characters/[granblueId]/+page.svelte @@ -39,6 +39,7 @@ import Button from '$lib/components/ui/Button.svelte' import CharacterTags from '$lib/components/tags/CharacterTags.svelte' import DatabasePageHeader from '$lib/components/database/DatabasePageHeader.svelte' + import { getListUrl } from '$lib/utils/listNavigation' // Types import type { PageData } from './$types' @@ -193,7 +194,7 @@
- + {#snippet rightAction()} {#if canEdit && editUrl} diff --git a/src/routes/(app)/database/characters/[granblueId]/edit/+page.svelte b/src/routes/(app)/database/characters/[granblueId]/edit/+page.svelte index 96e3d18f..c8d58056 100644 --- a/src/routes/(app)/database/characters/[granblueId]/edit/+page.svelte +++ b/src/routes/(app)/database/characters/[granblueId]/edit/+page.svelte @@ -276,10 +276,6 @@ } } - function handleCancel() { - goto(`/database/characters/${character?.granblueId}`) - } - // Helper function for character grid image function getCharacterGridImage(character: any): string { return getCharacterImage(character?.granblueId, 'grid', '01') @@ -292,7 +288,7 @@
- + {#snippet rightAction()} diff --git a/src/routes/(app)/database/summons/[granblueId]/edit/+page.svelte b/src/routes/(app)/database/summons/[granblueId]/edit/+page.svelte index d0615955..09d90026 100644 --- a/src/routes/(app)/database/summons/[granblueId]/edit/+page.svelte +++ b/src/routes/(app)/database/summons/[granblueId]/edit/+page.svelte @@ -205,10 +205,6 @@ } } - function handleCancel() { - goto(`/database/summons/${summon?.granblueId}`) - } - // Helper function for summon grid image function getSummonGridImage(summon: any): string { return getSummonImage(summon?.granblueId, 'grid') @@ -216,7 +212,7 @@
- + {#snippet rightAction()} diff --git a/src/routes/(app)/database/weapons/[granblueId]/edit/+page.svelte b/src/routes/(app)/database/weapons/[granblueId]/edit/+page.svelte index ba6dc21b..76dec8e3 100644 --- a/src/routes/(app)/database/weapons/[granblueId]/edit/+page.svelte +++ b/src/routes/(app)/database/weapons/[granblueId]/edit/+page.svelte @@ -228,10 +228,6 @@ } } - function handleCancel() { - goto(`/database/weapons/${weapon?.granblueId}`) - } - // Helper function for weapon grid image function getWeaponImage(weapon: any): string { return getWeaponGridImage(weapon?.granblueId, weapon?.element, weapon?.instanceElement) @@ -239,7 +235,7 @@
- + {#snippet rightAction()}