From 9ed6a00f5f22380bfb9b4c3f9273adb90e8e8f88 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sat, 20 Sep 2025 21:36:49 -0700 Subject: [PATCH] feat: auto-close sidebar on navigation - Added beforeNavigate hook to close sidebar when navigating between pages - Prevents search sidebar from staying open when browsing different sections - Ensures clean UI state transitions between pages --- src/lib/components/party/Party.svelte | 30 ++++------- src/routes/+layout.svelte | 6 +++ src/routes/teams/new/+page.svelte | 74 ++++++++++++++++++--------- 3 files changed, 65 insertions(+), 45 deletions(-) diff --git a/src/lib/components/party/Party.svelte b/src/lib/components/party/Party.svelte index 7963b8c7..d1e62cad 100644 --- a/src/lib/components/party/Party.svelte +++ b/src/lib/components/party/Party.svelte @@ -9,7 +9,7 @@ import WeaponGrid from '$lib/components/grids/WeaponGrid.svelte' import SummonGrid from '$lib/components/grids/SummonGrid.svelte' import CharacterGrid from '$lib/components/grids/CharacterGrid.svelte' - import SearchSidebar from '$lib/components/panels/SearchSidebar.svelte' + import { openSearchSidebar } from '$lib/features/search/openSearchSidebar.svelte' import PartySegmentedControl from '$lib/components/party/PartySegmentedControl.svelte' import type { SearchResult } from '$lib/api/resources/search' import { GridType } from '$lib/types/enums' @@ -42,8 +42,6 @@ let activeTab = $state(GridType.Weapon) let loading = $state(false) let error = $state(null) - let pickerOpen = $state(false) - let pickerTitle = $state('Search') let selectedSlot = $state(0) let editDialogOpen = $state(false) let editingTitle = $state('') @@ -383,12 +381,10 @@ } // If there's another empty slot, update selectedSlot to it - // Otherwise close the picker (grid is full) if (nextEmptySlot !== -999) { selectedSlot = nextEmptySlot - } else { - pickerOpen = false } + // Note: Sidebar stays open for continuous adding } catch (err: any) { error = err.message || 'Failed to add item' } finally { @@ -577,8 +573,13 @@ : opts.type === 'summon' ? GridType.Summon : GridType.Character - pickerTitle = `Search ${opts.type}s` - pickerOpen = true + + // Open the search sidebar with the appropriate type + openSearchSidebar({ + type: opts.type, + onAddItems: handleAddItems, + canAddMore: true + }) } }) @@ -586,7 +587,7 @@ setContext('drag-drop', dragContext) -
+
@@ -680,17 +681,6 @@ {/if}
- (pickerOpen = false)} - onAddItems={handleAddItems} - canAddMore={true} - />
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 50880f96..1b7c1695 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -7,6 +7,7 @@ import Sidebar from '$lib/components/ui/Sidebar.svelte' import { sidebar } from '$lib/stores/sidebar.svelte' import { Tooltip } from 'bits-ui' + import { beforeNavigate } from '$app/navigation' // Get `data` and `children` from the router via $props() // Use a more flexible type that allows additional properties from child pages @@ -14,6 +15,11 @@ data: any // Allow any data to pass through from child pages children: () => any }>() + + // Close sidebar when navigating to a different page + beforeNavigate(() => { + sidebar.close() + }) diff --git a/src/routes/teams/new/+page.svelte b/src/routes/teams/new/+page.svelte index 0b27b316..3a70c490 100644 --- a/src/routes/teams/new/+page.svelte +++ b/src/routes/teams/new/+page.svelte @@ -4,7 +4,7 @@ import WeaponGrid from '$lib/components/grids/WeaponGrid.svelte' import SummonGrid from '$lib/components/grids/SummonGrid.svelte' import CharacterGrid from '$lib/components/grids/CharacterGrid.svelte' - import SearchSidebar from '$lib/components/panels/SearchSidebar.svelte' + import { openSearchSidebar, closeSearchSidebar } from '$lib/features/search/openSearchSidebar.svelte' import PartySegmentedControl from '$lib/components/party/PartySegmentedControl.svelte' import { GridType } from '$lib/types/enums' import { setContext } from 'svelte' @@ -21,16 +21,45 @@ // Local, client-only state for tab selection (Svelte 5 runes) let activeTab = $state(GridType.Weapon) + // Open search sidebar on mount + let hasOpenedSidebar = $state(false) + $effect(() => { + if (!hasOpenedSidebar) { + hasOpenedSidebar = true + // Small delay to let the page render first + setTimeout(() => { + openSearchSidebar({ + type: 'weapon', + onAddItems: handleAddItems, + canAddMore: true + }) + }, 100) + } + }) + function selectTab(gridType: GridType) { activeTab = gridType - sidebarOpen = true // Auto-open sidebar when switching tabs + // Open sidebar when switching tabs + openSearchSidebar({ + type: gridType === GridType.Weapon ? 'weapon' : + gridType === GridType.Summon ? 'summon' : + 'character', + onAddItems: handleAddItems, + canAddMore: !isGridFull(gridType) + }) + } + + // Helper to check if a grid is full + function isGridFull(gridType: GridType): boolean { + if (gridType === GridType.Weapon) return weapons.length >= 10 + if (gridType === GridType.Summon) return summons.length >= 6 + return characters.length >= 5 } // Grid state let weapons = $state([]) let summons = $state([]) let characters = $state([]) - let sidebarOpen = $state(true) // Start with sidebar open let selectedSlot = $state(null) let isFirstItemForSlot = false // Track if this is the first item after clicking empty cell @@ -45,17 +74,6 @@ let errorMessage = $state('') let errorDetails = $state([]) - // Update CSS variable when sidebar opens/closes - $effect(() => { - if (typeof document !== 'undefined') { - const root = document.documentElement - if (sidebarOpen) { - root.style.setProperty('--main-max-width', '1140px') - } else { - root.style.setProperty('--main-max-width', '820px') - } - } - }) // Calculate if grids are full let isWeaponGridFull = $derived(weapons.length >= 10) // 1 mainhand + 9 grid slots @@ -494,7 +512,15 @@ }, openPicker: (opts: { type: 'weapon' | 'summon' | 'character'; position: number; item?: any }) => { selectedSlot = opts.position - sidebarOpen = true + openSearchSidebar({ + type: opts.type, + onAddItems: handleAddItems, + canAddMore: !isGridFull( + opts.type === 'weapon' ? GridType.Weapon : + opts.type === 'summon' ? GridType.Summon : + GridType.Character + ) + }) } }) @@ -507,8 +533,14 @@

Create a new team

Search and click items to add them to your grid

- @@ -535,14 +567,6 @@ {/if} - - sidebarOpen = false} - onAddItems={handleAddItems} - canAddMore={canAddMore} - />