feat: filter collection by purchase price, added date, and multiple sets

Add paid:, added:, is:paid and is:unpaid collection search predicates,
a multi-set picker in the filter modal, and shift+click range selection
in the collection grid.

Author: cfbender

assets/react/src/components/card-tile.tsx

@@ -120,7 +120,8 @@ export function CardTile({
   name: ReactNode
   onSelect?: () => void
   onToggleForTrade?: () => void
-  onToggleSelected?: () => void
+  // selectRange is true for shift+click, letting the owner select a span of tiles.
+  onToggleSelected?: (selectRange?: boolean) => void
   primaryActionLabel?: string
   primaryActionRole?: "button" | "link"
   price?: ReactNode
@@ -203,20 +204,26 @@ export function CardTile({
     if (isInteractiveClickTarget(event.target)) return
 
     if (selectionClickActive) {
-      onToggleSelected?.()
+      onToggleSelected?.(event.shiftKey)
       return
     }
 
     onSelect?.()
   }
 
+  // Shift+mousedown would otherwise extend the page's text selection across
+  // every tile in the range being selected.
+  function handleMouseDown(event: MouseEvent<HTMLDivElement>) {
+    if (event.shiftKey && selectionClickActive) event.preventDefault()
+  }
+
   function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {
     if (event.key !== "Enter" && event.key !== " ") return
     if (isInteractiveClickTarget(event.target)) return
 
     if (selectionClickActive) {
       event.preventDefault()
-      onToggleSelected?.()
+      onToggleSelected?.(event.shiftKey)
       return
     }
 
@@ -243,6 +250,7 @@ export function CardTile({
       onBlur={handleBlur}
       onClick={hasPrimaryAction ? handleClick : undefined}
       onKeyDown={handleKeyDown}
+      onMouseDown={handleMouseDown}
       onPointerCancel={mobileHover.onPointerCancel}
       onPointerDown={mobileHover.onPointerDown}
       onPointerMove={mobileHover.onPointerMove}
@@ -318,10 +326,13 @@ export function CardTile({
           aria-pressed={selected}
           onClick={(event) => {
             event.stopPropagation()
-            onToggleSelected?.()
+            onToggleSelected?.(event.shiftKey)
           }}
           onKeyDown={(event) => event.stopPropagation()}
-          onMouseDown={(event) => event.stopPropagation()}
+          onMouseDown={(event) => {
+            event.stopPropagation()
+            if (event.shiftKey) event.preventDefault()
+          }}
         >
           {selected ? <CheckSquare /> : <Square />}
         </CardTileOverlayButton>

assets/react/src/lib/collection-filters.ts

@@ -16,14 +16,18 @@ export type CollectionFilterState = {
   manaValueOperator: ComparisonOperator
   manaValue: string
   rarities: RarityFilter[]
-  set: string
+  sets: string[]
   collectorOperator: ComparisonOperator
   collectorNumber: string
   language: string
   finish: FinishFilter
   allocation: AllocationFilter
   quantityOperator: ComparisonOperator
   quantity: string
+  purchasePriceMin: string
+  purchasePriceMax: string
+  addedFrom: string
+  addedTo: string
   priceOperator: ComparisonOperator
   priceUsd: string
   dateOperator: ComparisonOperator
@@ -50,14 +54,18 @@ export const EMPTY_COLLECTION_FILTERS: CollectionFilterState = {
   manaValueOperator: "=",
   manaValue: "",
   rarities: [],
-  set: "",
+  sets: [],
   collectorOperator: "=",
   collectorNumber: "",
   language: "",
   finish: "any",
   allocation: "any",
   quantityOperator: ">=",
   quantity: "",
+  purchasePriceMin: "",
+  purchasePriceMax: "",
+  addedFrom: "",
+  addedTo: "",
   priceOperator: ">=",
   priceUsd: "",
   dateOperator: ">=",
@@ -75,12 +83,16 @@ export function buildCollectionFilterQuery(filters: CollectionFilterState) {
     colorPredicate("id", filters.identityOperator, filters.identity),
     comparisonPredicate("mv", filters.manaValueOperator, filters.manaValue),
     rarityPredicate(filters.rarities),
-    textPredicate("set", filters.set),
+    setPredicate(filters.sets),
     comparisonPredicate("number", filters.collectorOperator, filters.collectorNumber),
     textPredicate("lang", filters.language),
     filters.finish === "any" ? "" : `is:${filters.finish}`,
     filters.allocation === "any" ? "" : `is:${filters.allocation}`,
     comparisonPredicate("qty", filters.quantityOperator, filters.quantity),
+    comparisonPredicate("paid", ">=", filters.purchasePriceMin),
+    comparisonPredicate("paid", "<=", filters.purchasePriceMax),
+    comparisonPredicate("added", ">=", filters.addedFrom),
+    comparisonPredicate("added", "<=", filters.addedTo),
     comparisonPredicate("usd", filters.priceOperator, filters.priceUsd),
     comparisonPredicate("date", filters.dateOperator, filters.releasedDate),
     comparisonPredicate("year", filters.yearOperator, filters.releasedYear),
@@ -106,12 +118,14 @@ export function countActiveCollectionFilters(filters: CollectionFilterState) {
     filters.identity.length,
     filters.manaValue.trim(),
     filters.rarities.length,
-    filters.set.trim(),
+    filters.sets.length,
     filters.collectorNumber.trim(),
     filters.language.trim(),
     filters.finish !== "any",
     filters.allocation !== "any",
     filters.quantity.trim(),
+    filters.purchasePriceMin.trim() || filters.purchasePriceMax.trim(),
+    filters.addedFrom.trim() || filters.addedTo.trim(),
     filters.priceUsd.trim(),
     filters.releasedDate.trim(),
     filters.releasedYear.trim(),
@@ -124,6 +138,7 @@ export function cloneCollectionFilters(filters: CollectionFilterState): Collecti
     colors: [...filters.colors],
     identity: [...filters.identity],
     rarities: [...filters.rarities],
+    sets: [...filters.sets],
   }
 }
 
@@ -152,7 +167,7 @@ export function encodeCollectionFilters(filters: CollectionFilterState) {
         ? filters.manaValueOperator
         : undefined,
     rarities: filters.rarities.length ? filters.rarities : undefined,
-    set: trimmedValue(filters.set),
+    sets: filters.sets.length ? filters.sets : undefined,
     collectorNumber: trimmedValue(filters.collectorNumber),
     collectorOperator:
       filters.collectorNumber.trim() &&
@@ -169,6 +184,10 @@ export function encodeCollectionFilters(filters: CollectionFilterState) {
       filters.quantityOperator !== EMPTY_COLLECTION_FILTERS.quantityOperator
         ? filters.quantityOperator
         : undefined,
+    purchasePriceMin: trimmedValue(filters.purchasePriceMin),
+    purchasePriceMax: trimmedValue(filters.purchasePriceMax),
+    addedFrom: trimmedValue(filters.addedFrom),
+    addedTo: trimmedValue(filters.addedTo),
     priceUsd: trimmedValue(filters.priceUsd),
     priceOperator:
       filters.priceUsd.trim() && filters.priceOperator !== EMPTY_COLLECTION_FILTERS.priceOperator
@@ -222,7 +241,10 @@ export function decodeCollectionFilters(value: unknown): CollectionFilterState {
     filters.manaValueOperator,
   )
   filters.rarities = filteredValues(decoded.rarities, RARITY_FILTERS)
-  filters.set = stringValue(decoded.set)
+  // Older saved filters stored a single `set` string.
+  filters.sets = uniqueSetValues(
+    Array.isArray(decoded.sets) ? decoded.sets : [stringValue(decoded.set)],
+  )
   filters.collectorNumber = stringValue(decoded.collectorNumber)
   filters.collectorOperator = operatorValue(
     decoded.collectorOperator,
@@ -238,6 +260,10 @@ export function decodeCollectionFilters(value: unknown): CollectionFilterState {
     COMPARISON_OPERATORS,
     filters.quantityOperator,
   )
+  filters.purchasePriceMin = stringValue(decoded.purchasePriceMin)
+  filters.purchasePriceMax = stringValue(decoded.purchasePriceMax)
+  filters.addedFrom = stringValue(decoded.addedFrom)
+  filters.addedTo = stringValue(decoded.addedTo)
   filters.priceUsd = stringValue(decoded.priceUsd)
   filters.priceOperator = operatorValue(
     decoded.priceOperator,
@@ -304,6 +330,27 @@ function colorPredicate(field: "c" | "id", operator: ColorOperator, colors: Mana
   return `${field}${operator}${colors.join("")}`
 }
 
+/** Trims, drops blanks, and removes case-insensitive duplicates, keeping the first spelling. */
+export function uniqueSetValues(values: readonly unknown[]) {
+  const seen = new Set<string>()
+  const sets: string[] = []
+  for (const value of values) {
+    const set = stringValue(value)
+    const key = set.toLowerCase()
+    if (!set || seen.has(key)) continue
+    seen.add(key)
+    sets.push(set)
+  }
+  return sets
+}
+
+function setPredicate(sets: string[]) {
+  const terms = sets.map((set) => textPredicate("set", set)).filter(Boolean)
+  if (!terms.length) return ""
+
+  return terms.length === 1 ? terms[0] : `(${terms.join(" or ")})`
+}
+
 function rarityPredicate(rarities: RarityFilter[]) {
   if (!rarities.length) return ""
 

assets/react/src/pages/cards/card-catalog-page.tsx

@@ -88,6 +88,7 @@ export function CardCatalogPage({
       )}
 
       <CollectionFilterModal
+        copyFilters={false}
         filters={search.structuredFilters}
         open={search.isFilterModalOpen}
         onApply={search.applyFilters}

assets/react/src/pages/collection/filter-modal.tsx

@@ -42,12 +42,16 @@ import { createEmptyCollectionFilters } from "./storage"
 import { SetCombobox } from "./set-combobox"
 
 export function CollectionFilterModal({
+  copyFilters = true,
   filters,
   onApply,
   onClear,
   onClose,
   open,
 }: {
+  // Purchase price and added date describe owned copies; the card catalog
+  // searches cards, not copies, so it hides them.
+  copyFilters?: boolean
   filters: CollectionFilterState
   onApply: (filters: CollectionFilterState) => void
   onClear: () => void
@@ -131,8 +135,8 @@ export function CollectionFilterModal({
               />
             </FilterSection>
 
-            <FilterSection label="Set" syntax="set:lea">
-              <SetCombobox value={draft.set} onValueChange={(value) => update("set", value)} />
+            <FilterSection label="Sets" syntax="(set:lea or set:leb)">
+              <SetCombobox values={draft.sets} onValuesChange={(sets) => update("sets", sets)} />
             </FilterSection>
 
             <FilterSection label="Finish" syntax="is:foil">
@@ -170,6 +174,62 @@ export function CollectionFilterModal({
               />
             </FilterSection>
 
+            {copyFilters ? (
+              <>
+                <FilterSection label="Purchase price" syntax="paid>=1 paid<=20">
+                  <RangeFilterControl
+                    fromLabel="Minimum paid"
+                    inputMode="decimal"
+                    from={draft.purchasePriceMin}
+                    placeholder={["Min $", "Max $"]}
+                    to={draft.purchasePriceMax}
+                    toLabel="Maximum paid"
+                    onFromChange={(value) => update("purchasePriceMin", value)}
+                    onToChange={(value) => update("purchasePriceMax", value)}
+                  />
+                </FilterSection>
+
+                <FilterSection label="Added" syntax="added>=2026-09-01">
+                  <div className="grid gap-3">
+                    <RangeFilterControl
+                      fromLabel="Added on or after"
+                      from={draft.addedFrom}
+                      to={draft.addedTo}
+                      toLabel="Added on or before"
+                      type="date"
+                      onFromChange={(value) => update("addedFrom", value)}
+                      onToChange={(value) => update("addedTo", value)}
+                    />
+                    <div className="flex flex-wrap gap-2">
+                      {ADDED_DATE_PRESETS.map((preset) => {
+                        const from = preset.from()
+                        const active = draft.addedFrom === from && !draft.addedTo
+
+                        return (
+                          <button
+                            key={preset.label}
+                            type="button"
+                            aria-pressed={active}
+                            className={cn(
+                              "btn btn-outline btn-sm",
+                              active
+                                ? "border-primary bg-primary/15 text-primary"
+                                : "text-base-content/75",
+                            )}
+                            onClick={() =>
+                              setDraft((current) => ({ ...current, addedFrom: from, addedTo: "" }))
+                            }
+                          >
+                            {preset.label}
+                          </button>
+                        )
+                      })}
+                    </div>
+                  </div>
+                </FilterSection>
+              </>
+            ) : null}
+
             <details className="group">
               <summary className="flex cursor-pointer list-none items-center justify-between gap-3 bg-base-200/40 px-5 py-4 marker:hidden">
                 <span>
@@ -439,6 +499,67 @@ function ComparisonFilterControl({
   )
 }
 
+// Presets resolve to a fixed start date when chosen, so saved filters keep
+// meaning the same window rather than silently sliding forward.
+const ADDED_DATE_PRESETS = [
+  { label: "Last 7 days", from: () => localDateDaysAgo(7) },
+  { label: "Last 30 days", from: () => localDateDaysAgo(30) },
+  { label: "Last 90 days", from: () => localDateDaysAgo(90) },
+  { label: "This year", from: () => `${new Date().getFullYear()}-01-01` },
+]
+
+function localDateDaysAgo(days: number) {
+  const date = new Date()
+  date.setDate(date.getDate() - days)
+  const month = String(date.getMonth() + 1).padStart(2, "0")
+  const day = String(date.getDate()).padStart(2, "0")
+  return `${date.getFullYear()}-${month}-${day}`
+}
+
+function RangeFilterControl({
+  from,
+  fromLabel,
+  inputMode,
+  onFromChange,
+  onToChange,
+  placeholder = ["From", "To"],
+  to,
+  toLabel,
+  type = "text",
+}: {
+  from: string
+  fromLabel: string
+  inputMode?: React.HTMLAttributes<HTMLInputElement>["inputMode"]
+  onFromChange: (value: string) => void
+  onToChange: (value: string) => void
+  placeholder?: [string, string]
+  to: string
+  toLabel: string
+  type?: string
+}) {
+  return (
+    <div className="grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-2">
+      <Input
+        aria-label={fromLabel}
+        inputMode={inputMode}
+        type={type}
+        value={from}
+        onChange={(event) => onFromChange(event.target.value)}
+        placeholder={placeholder[0]}
+      />
+      <span className="text-sm text-base-content/50">to</span>
+      <Input
+        aria-label={toLabel}
+        inputMode={inputMode}
+        type={type}
+        value={to}
+        onChange={(event) => onToChange(event.target.value)}
+        placeholder={placeholder[1]}
+      />
+    </div>
+  )
+}
+
 function ColorFilterControl({
   onOperatorChange,
   onSelectedChange,