chore: drop duplicate selected count + Discard button from TopBar

Both were redundant:
- "N selected" is already shown by the contextual KeyboardHints pill
  below the FilterBar
- The Discard action is in the RightSidebar Flag section and bound
  to X (and exists as a per-photo button on the thumbnail when
  is_discarded)

Also removes the no-longer-used discardPhotosMutation, the photos
api import, the toast import, the useMutation/useQueryClient imports,
and the usePhotoStore selectedPhotos read — TopBar is leaner now.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-07 23:22:30 +02:00
parent 351ccd7bb4
commit 324cc0298b

View File

@@ -8,16 +8,11 @@ import {
Upload, Upload,
Settings, Settings,
Menu, Menu,
Trash2,
X, X,
ShoppingBasket, ShoppingBasket,
} from 'lucide-react' } from 'lucide-react'
import clsx from 'clsx' import clsx from 'clsx'
import { usePhotoStore } from '../../store/photoStore'
import { useFilterStore, hasActiveFilters } from '../../store/filterStore' import { useFilterStore, hasActiveFilters } from '../../store/filterStore'
import { photos } from '../../services/api'
import { toast } from '../ToastContainer'
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { useHeapsQuery } from '../../hooks/useHeapsQuery' import { useHeapsQuery } from '../../hooks/useHeapsQuery'
import muliLogo from '../../assets/muli-logo.png' import muliLogo from '../../assets/muli-logo.png'
@@ -55,31 +50,12 @@ export function TopBar() {
}, [searchQuery, storeQ, setStoreQ]) }, [searchQuery, storeQ, setStoreQ])
const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid') const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid')
const selectedPhotos = usePhotoStore((state) => state.selectedPhotos)
const clearSelection = usePhotoStore((state) => state.clearSelection)
const selectedCount = selectedPhotos.length
const queryClient = useQueryClient()
// Currently active heap (for the T shortcut). Shown as a pill so the user // Currently active heap. Shown as a pill so the user always knows where
// always knows where their next T-press will land. // their next P-press will land.
const { data: heapsList = [] } = useHeapsQuery() const { data: heapsList = [] } = useHeapsQuery()
const activeHeap = heapsList.find((h) => h.is_active) const activeHeap = heapsList.find((h) => h.is_active)
// Mutation for discarding selected photos
const discardPhotosMutation = useMutation({
mutationFn: async () => {
await photos.bulkUpdate(selectedPhotos, { discard: true })
},
onSuccess: () => {
toast.success('Discarded', `${selectedCount} photo${selectedCount > 1 ? 's' : ''} discarded`)
clearSelection()
queryClient.invalidateQueries({ queryKey: ['photos'] })
},
onError: (error: any) => {
toast.error('Failed to discard', error.message || 'An error occurred')
},
})
return ( return (
<header className="flex h-12 items-center justify-between border-b border-border bg-surface px-4"> <header className="flex h-12 items-center justify-between border-b border-border bg-surface px-4">
{/* Left Section - Menu and App Name */} {/* Left Section - Menu and App Name */}
@@ -100,28 +76,12 @@ export function TopBar() {
{activeHeap && ( {activeHeap && (
<span <span
className="flex items-center gap-1 rounded bg-primary/20 px-2 py-0.5 text-xs text-primary" className="flex items-center gap-1 rounded bg-primary/20 px-2 py-0.5 text-xs text-primary"
title="Active heap — press T to add the selected photos here" title="Active heap — press P to add selected photos here"
> >
<ShoppingBasket className="h-3 w-3" /> <ShoppingBasket className="h-3 w-3" />
{activeHeap.name} {activeHeap.name}
</span> </span>
)} )}
{selectedCount > 0 && (
<>
<span className="rounded bg-primary/20 px-2 py-0.5 text-sm text-primary">
{selectedCount} selected
</span>
<button
onClick={() => discardPhotosMutation.mutate()}
disabled={discardPhotosMutation.isPending}
className="flex items-center gap-1 rounded bg-reject/20 px-2 py-0.5 text-sm text-reject hover:bg-reject/30 disabled:opacity-50"
title="Discard"
>
<Trash2 className="h-3.5 w-3.5" />
Discard
</button>
</>
)}
</div> </div>
{/* Center Section - Search */} {/* Center Section - Search */}