feat: filter the storefront by favorited items (#35)

Adds favorites as another dimension of the existing storefront filter rather than a separate view, so it lives in the URL, shows up as a removable chip, and combines with category, tags, and price by AND like everything else. A customer can ask for "my favorites under $500 in Furniture" instead of only "my favorites".

Sold favorites are included. The storefront shows sold items everywhere else, and a favorite that has just sold is often exactly what the customer came back to look at after being emailed about it in #34. Hiding them would make items disappear from a list the customer curated themselves. Anyone wanting only what they can still buy can combine the toggle with the status filter.

Which customer "my favorites" means comes from the session, never from the query string, so a hand-edited URL cannot name someone else's favorites. A signed-out visitor sees the toggle and gets the same inline register/login prompt the heart button and Add to Cart already use; signing in resolves the gate and the filter applies on its own. A bookmarked favorites link whose session has expired says so rather than rendering an empty grid, which would tell the visitor they have no favorites instead of that we do not know who they are. The API answers 401 for the same reason, and the admin inventory refuses the filter outright rather than ignoring it.

The shared SQL builder now requires callers to say whose favorites they mean, even when that is nobody, and throws instead of dropping the clause — a future caller that forgets the guard fails loudly rather than quietly returning the whole catalogue.

Verified with 59 unit tests, 134 backend integration tests, and 70 end-to-end tests, all passing, with type checking clean on both sides.
This commit is contained in:
2026-08-18 15:10:45 -05:00
parent e4b2cc1935
commit d4e2abe743
10 changed files with 451 additions and 15 deletions
@@ -18,6 +18,16 @@ export default function ActiveFilterChips({ options, filters, onChange, onClear
const chips: { key: string; label: string; onRemove: () => void }[] = [];
// Listed first so it matches the drawer's ordering, and because it is the
// chip most worth noticing when a customer wonders why the grid looks short.
if (filters.favoritesOnly) {
chips.push({
key: 'favorites',
label: 'My favorites',
onRemove: () => onChange({ ...filters, favoritesOnly: false })
});
}
if (filters.categoryId !== null) {
const path = categoryPath(categories, filters.categoryId);
// Falls back to the raw id while /api/filters is still loading, so the chip
+23
View File
@@ -5,6 +5,7 @@ import Tag from 'antd/es/tag';
import Slider from 'antd/es/slider';
import InputNumber from 'antd/es/input-number';
import Empty from 'antd/es/empty';
import Switch from 'antd/es/switch';
import Grid from 'antd/es/grid';
import type { DataNode } from 'antd/es/tree';
import type { FilterOptions } from '../api';
@@ -81,6 +82,28 @@ export default function FilterDrawer({
</div>
}
>
{/* First because it is the broadest cut, and because a customer who came
here for their favorites should not have to scroll past the catalogue
controls to find it. Shown to signed-out visitors too: switching it on
prompts them to sign in, which is how they learn favorites exist. */}
<section style={{ marginBottom: 28 }}>
<h4 style={{ margin: '0 0 8px', fontSize: 12, letterSpacing: '.06em', textTransform: 'uppercase', opacity: 0.65 }}>
Favorites
</h4>
{/* Deliberately not wrapped in a <label>: antd renders the switch as a
button, which is labelable, so a wrapping label can forward a click
the switch already handled and toggle it twice. The accessible name
comes from aria-label instead. */}
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
<Switch
checked={filters.favoritesOnly}
onChange={(checked) => onChange({ ...filters, favoritesOnly: checked })}
aria-label="Only my favorites"
/>
<span>Only my favorites</span>
</div>
</section>
<section style={{ marginBottom: 28 }}>
<h4 style={{ margin: '0 0 8px', fontSize: 12, letterSpacing: '.06em', textTransform: 'uppercase', opacity: 0.65 }}>
Category