From 1bac7fc846d23234afce8104b7d8bb814ba613a6 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Fri, 19 Dec 2025 12:26:38 -0800 Subject: [PATCH] selection mode ui tweaks: element-ghost buttons, clear button, fixed nav height --- src/lib/components/ui/Button.svelte | 6 + .../[username]/collection/+layout.svelte | 117 +++++++++++------- 2 files changed, 78 insertions(+), 45 deletions(-) diff --git a/src/lib/components/ui/Button.svelte b/src/lib/components/ui/Button.svelte index 6b4d9ae1..e4301b8d 100644 --- a/src/lib/components/ui/Button.svelte +++ b/src/lib/components/ui/Button.svelte @@ -508,6 +508,7 @@ color: var(--wind-button-bg); &:hover:not(:disabled) { background-color: var(--wind-nav-selected-bg); + color: var(--wind-nav-selected-text); } } @@ -515,6 +516,7 @@ color: var(--fire-button-bg); &:hover:not(:disabled) { background-color: var(--fire-nav-selected-bg); + color: var(--fire-nav-selected-text); } } @@ -522,6 +524,7 @@ color: var(--water-button-bg); &:hover:not(:disabled) { background-color: var(--water-nav-selected-bg); + color: var(--water-nav-selected-text); } } @@ -529,6 +532,7 @@ color: var(--earth-button-bg); &:hover:not(:disabled) { background-color: var(--earth-nav-selected-bg); + color: var(--earth-nav-selected-text); } } @@ -536,6 +540,7 @@ color: var(--dark-button-bg); &:hover:not(:disabled) { background-color: var(--dark-nav-selected-bg); + color: var(--dark-nav-selected-text); } } @@ -543,6 +548,7 @@ color: var(--light-button-bg); &:hover:not(:disabled) { background-color: var(--light-nav-selected-bg); + color: var(--light-nav-selected-text); } } diff --git a/src/routes/(app)/[username]/collection/+layout.svelte b/src/routes/(app)/[username]/collection/+layout.svelte index 78f1f1b7..8aa27812 100644 --- a/src/routes/(app)/[username]/collection/+layout.svelte +++ b/src/routes/(app)/[username]/collection/+layout.svelte @@ -3,13 +3,12 @@ import { page } from '$app/stores' import { goto } from '$app/navigation' import { setContext } from 'svelte' - import { DropdownMenu } from 'bits-ui' + import { createQuery } from '@tanstack/svelte-query' import ProfileHeader from '$lib/components/profile/ProfileHeader.svelte' import SegmentedControl from '$lib/components/ui/segmented-control/SegmentedControl.svelte' import Segment from '$lib/components/ui/segmented-control/Segment.svelte' import Button from '$lib/components/ui/Button.svelte' - import Icon from '$lib/components/Icon.svelte' - import DropdownItem from '$lib/components/ui/dropdown/DropdownItem.svelte' + import DropdownMenu from '$lib/components/ui/DropdownMenu.svelte' import AddToCollectionModal from '$lib/components/collection/AddToCollectionModal.svelte' import BulkDeleteConfirmModal from '$lib/components/collection/BulkDeleteConfirmModal.svelte' import { openAddArtifactSidebar } from '$lib/features/collection/openAddArtifactSidebar' @@ -25,9 +24,18 @@ useBulkRemoveSummonsFromCollection } from '$lib/api/mutations/collection.mutations' import { useBulkDeleteCollectionArtifacts } from '$lib/api/mutations/artifact.mutations' + import { collectionQueries } from '$lib/api/queries/collection.queries' let { data, children }: { data: LayoutData; children: any } = $props() + // Query for collection counts + const countsQuery = createQuery(() => collectionQueries.counts(data.user?.id ?? '')) + + // User's element for elemental styling + const userElement = $derived( + data.user?.avatar?.element as 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light' | undefined + ) + // Bulk delete mutations const bulkDeleteCharacters = useBulkRemoveCharactersFromCollection() const bulkDeleteWeapons = useBulkRemoveWeaponsFromCollection() @@ -102,6 +110,10 @@ selectionMode.selectAll(loadedIds) } + function handleClearSelection() { + selectionMode.clearSelection() + } + function handleDeleteClick() { if (selectionMode.selectedCount > 0) { confirmDeleteOpen = true @@ -169,7 +181,16 @@
{selectionMode.selectedCount} selected - +
+ + {#if selectionMode.selectedCount > 0} + + {/if} +
{/if} - - - {#snippet child({ props })} - - - - - + + {#snippet trigger({ props })} + + {/snippet} +
{/if} {/if} @@ -288,6 +322,7 @@ justify-content: space-between; gap: $unit-2x; padding: $unit-2x; + min-height: 74px; } .content { @@ -302,11 +337,6 @@ gap: $unit; } - // Dropdown menu z-index fix - :global(.collection-dropdown-menu) { - z-index: 200; - } - // Selection mode controls .selection-controls-left { display: flex; @@ -315,24 +345,14 @@ } .selection-count { - font-size: $font-regular; + font-size: $font-small; font-weight: $medium; color: var(--text-primary); } - .select-all-link { - background: none; - border: none; - padding: 0; - font-size: $font-small; - font-weight: $medium; - color: var(--accent-color); - cursor: pointer; - text-decoration: none; - - &:hover { - text-decoration: underline; - } + .selection-buttons { + display: flex; + gap: $unit; } .selection-controls-right { @@ -340,4 +360,11 @@ align-items: center; gap: $unit; } + + // Count badge in segment tabs + .count { + margin-left: $unit-half; + color: inherit; + opacity: 0.7; + }