+ {isInActiveHeap && (
+
+
+
)}
{photo.is_discarded && (
diff --git a/frontend/src/components/timeline/Timeline.tsx b/frontend/src/components/timeline/Timeline.tsx
index 530a0c1..1ee098e 100644
--- a/frontend/src/components/timeline/Timeline.tsx
+++ b/frontend/src/components/timeline/Timeline.tsx
@@ -3,6 +3,7 @@ import { useVirtualizer } from '@tanstack/react-virtual'
import { usePhotoStore } from '../../store/photoStore'
import { PhotoThumbnail } from './PhotoThumbnail'
import { usePhotosQuery } from '../../hooks/usePhotosQuery'
+import { useActiveHeapMembers } from '../../hooks/useActiveHeapMembersQuery'
import type { Photo } from '../../types/photo'
export function Timeline() {
@@ -48,6 +49,11 @@ export function Timeline() {
// they share one cache entry, regardless of filter state.
const { data: photos = [], isLoading } = usePhotosQuery()
+ // Membership in the active heap (for the basket affordance). Subscribed
+ // once at this level so we don't have hundreds of thumbnails each
+ // subscribing to the same query.
+ const { memberIds: activeHeapMembers } = useActiveHeapMembers()
+
// Group photos into rows for grid layout
const rows = useMemo(() => {
const result: Photo[][] = []
@@ -212,6 +218,7 @@ export function Timeline() {
photo={photo}
size={thumbnailSize}
isSelected={selectedPhotos.includes(photo.id)}
+ isInActiveHeap={activeHeapMembers.has(photo.id)}
onClick={(e) => {
if (e.shiftKey && lastSelectedIndex !== null) {
selectRange(globalIndex)
diff --git a/frontend/src/hooks/useActiveHeapMembersQuery.ts b/frontend/src/hooks/useActiveHeapMembersQuery.ts
new file mode 100644
index 0000000..b1bb4e9
--- /dev/null
+++ b/frontend/src/hooks/useActiveHeapMembersQuery.ts
@@ -0,0 +1,39 @@
+import { useMemo } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { useHeapsQuery } from './useHeapsQuery'
+import { heaps as heapsApi } from '../services/api'
+
+const EMPTY_SET: ReadonlySet
= new Set()
+
+/**
+ * Returns the photo ids that belong to the active heap as a Set, plus the
+ * active heap itself. Used by PhotoThumbnail to render the basket affordance
+ * and by the P shortcut to decide between add vs remove.
+ *
+ * If no heap is active, the Set is empty (and shared across renders).
+ */
+export function useActiveHeapMembers(): {
+ activeHeap: ReturnType['data'] extends (infer T)[] | undefined
+ ? T | null
+ : never
+ memberIds: ReadonlySet
+} {
+ const { data: heaps } = useHeapsQuery()
+ const activeHeap = heaps?.find((h) => h.is_active) ?? null
+
+ const { data: ids } = useQuery({
+ queryKey: ['heap-photo-ids', activeHeap?.id],
+ queryFn: () => heapsApi.photoIds(activeHeap!.id),
+ enabled: !!activeHeap,
+ staleTime: 30_000,
+ })
+
+ const memberIds = useMemo(
+ () => (ids ? new Set(ids) : EMPTY_SET),
+ [ids]
+ )
+
+ return { activeHeap: activeHeap as any, memberIds }
+}
+
+export const ACTIVE_HEAP_MEMBERS_QUERY_KEY_PREFIX = ['heap-photo-ids'] as const
diff --git a/frontend/src/hooks/useFilterUrlSync.ts b/frontend/src/hooks/useFilterUrlSync.ts
index c165999..8f92976 100644
--- a/frontend/src/hooks/useFilterUrlSync.ts
+++ b/frontend/src/hooks/useFilterUrlSync.ts
@@ -16,7 +16,7 @@ const ALLOWED_COLORS: ColorLabel[] = [
'blue',
'purple',
]
-const ALLOWED_FLAGS: FlagFilter[] = ['any', 'picked', 'discarded', 'unflagged']
+const ALLOWED_FLAGS: FlagFilter[] = ['any', 'discarded']
function parseUrl(): Partial {
const sp = new URLSearchParams(window.location.search)
diff --git a/frontend/src/hooks/useKeyboardShortcuts.ts b/frontend/src/hooks/useKeyboardShortcuts.ts
index 81c306b..7ef6871 100644
--- a/frontend/src/hooks/useKeyboardShortcuts.ts
+++ b/frontend/src/hooks/useKeyboardShortcuts.ts
@@ -15,7 +15,6 @@ interface KeyboardShortcutsProps {
interface PhotoUpdate {
rating?: number
- is_picked?: boolean
is_discarded?: boolean
color_label?: string | null
}
@@ -62,50 +61,77 @@ export function useKeyboardShortcuts(props: KeyboardShortcutsProps) {
updateMutation.mutate({ id, data })
}
- // T key: add the current selection to the active heap. If no heap is
- // active or no photos are selected, it's a no-op with a toast hint.
- const addToHeapMutation = useMutation({
- mutationFn: ({ heapId, photoIds }: { heapId: string; photoIds: string[] }) =>
- heapsApi.addPhotos(heapId, photoIds),
+ // P key (Pick): toggle the current selection's membership in the active
+ // heap. If every selected photo is already a member, remove them; otherwise
+ // add the missing ones. No active heap → toast hint.
+ const heapMutation = useMutation({
+ mutationFn: ({
+ heapId,
+ photoIds,
+ remove,
+ }: {
+ heapId: string
+ photoIds: string[]
+ remove: boolean
+ }) =>
+ remove
+ ? heapsApi.removePhotos(heapId, photoIds)
+ : heapsApi.addPhotos(heapId, photoIds),
onSuccess: (data, vars) => {
- const added = data?.added ?? 0
- const already = data?.already_present ?? 0
const heap = (queryClient.getQueryData(HEAPS_QUERY_KEY) ?? []).find(
(h) => h.id === vars.heapId
)
const heapName = heap?.name ?? 'heap'
- if (added > 0) {
- toast.success(
- `Added to ${heapName}`,
- `${added} photo${added > 1 ? 's' : ''}${already > 0 ? ` (${already} already present)` : ''}`
- )
- } else if (already > 0) {
- toast.info(`Already in ${heapName}`, `${already} photo${already > 1 ? 's' : ''}`)
+ if (vars.remove) {
+ const removed = data?.removed ?? 0
+ toast.success(`Removed from ${heapName}`, `${removed} photo${removed === 1 ? '' : 's'}`)
+ } else {
+ const added = data?.added ?? 0
+ const already = data?.already_present ?? 0
+ if (added > 0) {
+ toast.success(
+ `Added to ${heapName}`,
+ `${added} photo${added > 1 ? 's' : ''}${already > 0 ? ` (${already} already present)` : ''}`
+ )
+ }
}
queryClient.invalidateQueries({ queryKey: HEAPS_QUERY_KEY })
+ queryClient.invalidateQueries({ queryKey: ['heap-photo-ids', vars.heapId] })
queryClient.invalidateQueries({ queryKey: ['photos'] })
},
- onError: (e: any) => toast.error('Failed to add to heap', e.message || 'Unknown error'),
+ onError: (e: any) => toast.error('Heap update failed', e.message || 'Unknown error'),
})
- const addSelectionToActiveHeap = () => {
+ const togglePickOnSelection = () => {
const state = usePhotoStore.getState()
- const ids = state.selectedPhotos.length > 0
- ? state.selectedPhotos
- : state.activePhotoId
- ? [state.activePhotoId]
- : []
+ const ids =
+ state.selectedPhotos.length > 0
+ ? state.selectedPhotos
+ : state.activePhotoId
+ ? [state.activePhotoId]
+ : []
if (ids.length === 0) {
- toast.info('Nothing selected', 'Select photos first, then press T')
+ toast.info('Nothing selected', 'Select photos first, then press P')
return
}
const heapsList = queryClient.getQueryData(HEAPS_QUERY_KEY) ?? []
const active = heapsList.find((h) => h.is_active)
if (!active) {
- toast.info('No active heap', 'Click the target icon next to a heap to set it as active')
+ toast.info('No active heap', 'Set an active heap (target icon next to a heap)')
return
}
- addToHeapMutation.mutate({ heapId: active.id, photoIds: ids })
+ // Determine direction: if every selected photo is already a member, this
+ // press REMOVES them; otherwise it ADDS the missing ones. Mirrors how
+ // Lightroom's flag-toggle works.
+ const memberIds =
+ queryClient.getQueryData(['heap-photo-ids', active.id]) ?? []
+ const memberSet = new Set(memberIds)
+ const allMembers = ids.every((id) => memberSet.has(id))
+ heapMutation.mutate({
+ heapId: active.id,
+ photoIds: ids,
+ remove: allMembers,
+ })
}
// Toggle sidebars
@@ -151,26 +177,14 @@ export function useKeyboardShortcuts(props: KeyboardShortcutsProps) {
useHotkeys('0', () => updateActive({ rating: 0 }), HK_OPTS)
- // Pick / discard / unflag. Discard is a soft flag that hides the photo
- // from the default timeline view; restore via the Discarded view (or the
- // U shortcut).
- useHotkeys(
- 'p',
- () => updateActive({ is_picked: true, is_discarded: false }),
- HK_OPTS
- )
+ // P (Pick) is unified with "add to active heap" — Pick a photo and you're
+ // adding it to the heap you set as active. Toggling on already-picked
+ // photos removes them from the heap.
+ useHotkeys('p', togglePickOnSelection, HK_OPTS)
- useHotkeys(
- 'x',
- () => updateActive({ is_discarded: true, is_picked: false }),
- HK_OPTS
- )
+ useHotkeys('x', () => updateActive({ is_discarded: true }), HK_OPTS)
- useHotkeys(
- 'u',
- () => updateActive({ is_picked: false, is_discarded: false }),
- HK_OPTS
- )
+ useHotkeys('u', () => updateActive({ is_discarded: false }), HK_OPTS)
// Color labels 6-9 (red/orange/yellow/green per spec §6.4).
useHotkeys(
@@ -182,6 +196,4 @@ export function useKeyboardShortcuts(props: KeyboardShortcutsProps) {
HK_OPTS
)
- // T: add selection (or active photo) to the active heap.
- useHotkeys('t', addSelectionToActiveHeap, HK_OPTS)
}
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
index 7a8d9bc..101141b 100644
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -147,6 +147,13 @@ export const heaps = {
await api.delete(`/heaps/${heapId}`)
},
+ /** Lightweight: just the photo ids in a heap, for client-side membership
+ * lookups (the basket affordance on thumbnails). */
+ photoIds: async (heapId: string): Promise => {
+ const response = await api.get(`/heaps/${heapId}/photo_ids`)
+ return response.data
+ },
+
addPhotos: async (heapId: string, photoIds: string[]) => {
const response = await api.post(`/heaps/${heapId}/photos`, {
photo_ids: photoIds,
diff --git a/frontend/src/store/filterStore.ts b/frontend/src/store/filterStore.ts
index a447352..a70e105 100644
--- a/frontend/src/store/filterStore.ts
+++ b/frontend/src/store/filterStore.ts
@@ -2,7 +2,7 @@ import { create } from 'zustand'
export type MediaType = 'photo' | 'video' | 'raw' | 'heic'
export type ColorLabel = 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'purple'
-export type FlagFilter = 'any' | 'picked' | 'discarded' | 'unflagged'
+export type FlagFilter = 'any' | 'discarded'
export interface FilterState {
q: string
@@ -82,9 +82,7 @@ export function filtersToParams(f: FilterState): Record
if (f.mediaTypes.length > 0) params.media_type = f.mediaTypes.join(',')
if (f.ratingMin > 0) params.rating_min = f.ratingMin
if (f.colorLabel) params.color_label = f.colorLabel
- if (f.flag === 'picked') params.is_picked = 'true'
- else if (f.flag === 'discarded') params.is_discarded = 'true'
- else if (f.flag === 'unflagged') params.is_picked = 'false'
+ if (f.flag === 'discarded') params.is_discarded = 'true'
if (f.heapId) params.heap_id = f.heapId
return params
}
diff --git a/frontend/src/types/photo.ts b/frontend/src/types/photo.ts
index e187a34..9aab62e 100644
--- a/frontend/src/types/photo.ts
+++ b/frontend/src/types/photo.ts
@@ -7,7 +7,6 @@ export interface Photo {
height: number | null
taken_at: string | null
rating: number
- is_picked: boolean
is_discarded: boolean
file_hash: string
thumb_small?: string