)
}
diff --git a/frontend/src/components/filter/FilterPill.tsx b/frontend/src/components/filter/FilterPill.tsx
new file mode 100644
index 0000000..a9f71bd
--- /dev/null
+++ b/frontend/src/components/filter/FilterPill.tsx
@@ -0,0 +1,107 @@
+import { useEffect, useRef, useState } from 'react'
+import { ChevronDown, X } from 'lucide-react'
+import clsx from 'clsx'
+
+interface FilterPillProps {
+ /** Category label, always shown ("Date", "Type", etc.). */
+ label: string
+ /** When the filter is active, a short summary of its current value
+ * ("≥ 3★", "RAW + Photo", "Mar 2024 → Apr 2026"). Renders inside the
+ * pill so the user sees the state without opening the popover. */
+ value?: string | null
+ isActive?: boolean
+ /** When provided + isActive, an X appears inside the pill that clears
+ * this filter without opening the popover. */
+ onClear?: () => void
+ /** Popover contents — usually the existing control for this filter. */
+ children: React.ReactNode
+ /** Force the popover open programmatically (rare). */
+ defaultOpen?: boolean
+ /** Right-align the popover instead of left (for pills near the right
+ * edge so they don't overflow the viewport). */
+ alignRight?: boolean
+}
+
+/**
+ * A toolbar pill that hosts a filter category. Click the pill to open a
+ * small popover with the actual control; the popover closes on outside
+ * click or Escape. Active filters tint the pill primary and show their
+ * current value inline.
+ */
+export function FilterPill({
+ label,
+ value,
+ isActive = false,
+ onClear,
+ children,
+ defaultOpen = false,
+ alignRight = false,
+}: FilterPillProps) {
+ const [open, setOpen] = useState(defaultOpen)
+ const wrapperRef = useRef(null)
+
+ // Close on outside click + Escape.
+ useEffect(() => {
+ if (!open) return
+ const onDocMouseDown = (e: MouseEvent) => {
+ if (!wrapperRef.current) return
+ if (!wrapperRef.current.contains(e.target as Node)) {
+ setOpen(false)
+ }
+ }
+ const onKey = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') setOpen(false)
+ }
+ document.addEventListener('mousedown', onDocMouseDown)
+ document.addEventListener('keydown', onKey)
+ return () => {
+ document.removeEventListener('mousedown', onDocMouseDown)
+ document.removeEventListener('keydown', onKey)
+ }
+ }, [open])
+
+ return (
+
+
+
+ {open && (
+
+ {children}
+
+ )}
+
+ )
+}
diff --git a/frontend/src/components/layout/TopBar.tsx b/frontend/src/components/layout/TopBar.tsx
index 83ce6d8..dd1f86a 100644
--- a/frontend/src/components/layout/TopBar.tsx
+++ b/frontend/src/components/layout/TopBar.tsx
@@ -1,12 +1,6 @@
import { useState, useEffect, useRef } from 'react'
-import {
- Search,
- SlidersHorizontal,
- X,
- ShoppingBasket,
-} from 'lucide-react'
-import clsx from 'clsx'
-import { useFilterStore, hasActiveFilters } from '../../store/filterStore'
+import { Search, X, ShoppingBasket } from 'lucide-react'
+import { useFilterStore } from '../../store/filterStore'
import { useHeapsQuery } from '../../hooks/useHeapsQuery'
import muliLogo from '../../assets/muli-logo.png'
@@ -17,10 +11,6 @@ export function TopBar() {
// mirror so typing stays responsive while we debounce store updates.
const storeQ = useFilterStore((s) => s.q)
const setStoreQ = useFilterStore((s) => s.setQ)
- const filterBarOpen = useFilterStore((s) => s.filterBarOpen)
- const toggleFilterBar = useFilterStore((s) => s.toggleFilterBar)
- const filterState = useFilterStore()
- const filtersActive = hasActiveFilters(filterState) || filterBarOpen
const [searchQuery, setSearchQuery] = useState(storeQ)
@@ -101,24 +91,8 @@ export function TopBar() {
- {/* Right — filter toggle */}
-
-
-
+ {/* Right — reserved for future actions */}
+
)
}
diff --git a/frontend/src/hooks/useKeyboardShortcuts.ts b/frontend/src/hooks/useKeyboardShortcuts.ts
index cc5467f..4d675c2 100644
--- a/frontend/src/hooks/useKeyboardShortcuts.ts
+++ b/frontend/src/hooks/useKeyboardShortcuts.ts
@@ -1,7 +1,6 @@
import { useHotkeys } from 'react-hotkeys-hook'
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { usePhotoStore } from '../store/photoStore'
-import { useFilterStore } from '../store/filterStore'
import { photos as photosApi, heaps as heapsApi, type Heap } from '../services/api'
import { HEAPS_QUERY_KEY } from './useHeapsQuery'
import { toast } from '../components/ToastContainer'
@@ -222,9 +221,7 @@ export function useKeyboardShortcuts(props: KeyboardShortcutsProps) {
useHotkeys('tab', onToggleLeftSidebar, HK_OPTS)
useHotkeys('i', onToggleRightSidebar, HK_OPTS)
- // Filter bar toggle (\) and search focus (/ or Cmd/Ctrl+F).
- useHotkeys('\\', () => useFilterStore.getState().toggleFilterBar(), HK_OPTS)
-
+ // Search focus (/ or Cmd/Ctrl+F).
const focusSearch = () => {
const el = document.getElementById('topbar-search') as HTMLInputElement | null
el?.focus()
diff --git a/frontend/src/store/filterStore.ts b/frontend/src/store/filterStore.ts
index 93386d8..b53ad5b 100644
--- a/frontend/src/store/filterStore.ts
+++ b/frontend/src/store/filterStore.ts
@@ -43,8 +43,6 @@ export interface FilterState {
export const ALL_PHOTOS_SECTION = 'all-photos'
interface FilterStore extends FilterState {
- filterBarOpen: boolean
-
/** The active section id. Changes via navigateToSection. */
currentSection: string
/** Per-section snapshot of filter state, in-memory. Restored on return. */
@@ -72,9 +70,6 @@ interface FilterStore extends FilterState {
setSortOrder: (order: SortOrder) => void
toggleSortOrder: () => void
- setFilterBarOpen: (open: boolean) => void
- toggleFilterBar: () => void
-
/** Navigate to a section. Saves the current section's filter state into
* the in-memory map under the OLD section id, then loads the saved
* state for the destination — or, if none exists, applies the preset
@@ -132,7 +127,6 @@ function snapshotFilters(s: FilterState): FilterState {
export const useFilterStore = create((set) => ({
...INITIAL_FILTERS,
- filterBarOpen: false,
currentSection: ALL_PHOTOS_SECTION,
sectionFilters: {},
sectionPresets: { [ALL_PHOTOS_SECTION]: {} },
@@ -165,9 +159,6 @@ export const useFilterStore = create((set) => ({
toggleSortOrder: () =>
set((s) => ({ sortOrder: s.sortOrder === 'desc' ? 'asc' : 'desc' })),
- setFilterBarOpen: (filterBarOpen) => set({ filterBarOpen }),
- toggleFilterBar: () => set((s) => ({ filterBarOpen: !s.filterBarOpen })),
-
navigateToSection: (sectionId, presetOverrides = {}) =>
set((s) => {
// Snapshot the current section's filters before switching.