feat: add catalog status filters

apps/web/src/components/atoms/CatalogToggle.scss

@@ -0,0 +1,14 @@
+.catalog-toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: 44px;
+  color: var(--color-text);
+  font-size: var(--text-sm);
+}
+
+.catalog-toggle input {
+  width: 1.1rem;
+  height: 1.1rem;
+  accent-color: var(--color-interactive);
+}

apps/web/src/components/atoms/CatalogToggle.stories.js

@@ -0,0 +1,6 @@
+import CatalogToggle from './CatalogToggle.vue';
+
+export default { title: 'Atoms/CatalogToggle', component: CatalogToggle };
+
+export const NewlyAdded = { args: { label: 'Newly added', modelValue: false } };
+export const IncludeSold = { args: { label: 'Include sold', modelValue: true } };

apps/web/src/components/atoms/CatalogToggle.vue

@@ -0,0 +1,23 @@
+<script setup>
+defineProps({
+  modelValue: { type: Boolean, required: true },
+  label: { type: String, required: true },
+});
+
+defineEmits(['update:modelValue']);
+</script>
+
+<template>
+  <label class="catalog-toggle">
+    <input
+      :checked="modelValue"
+      type="checkbox"
+      @change="$emit('update:modelValue', $event.target.checked)"
+    />
+    <span>{{ label }}</span>
+  </label>
+</template>
+
+<style scoped lang="scss">
+@use './CatalogToggle.scss';
+</style>

apps/web/src/composables/useCatalogSearch.js

@@ -9,6 +9,8 @@ export function useCatalogSearch({
   initialSetName = "",
   initialEventName = "",
   initialTag = "",
+  initialStatus = "",
+  initialNewlyAdded = false,
   initialMinPriceMinor,
   initialMaxPriceMinor,
   initialSort = "recent",
@@ -20,6 +22,8 @@ export function useCatalogSearch({
   const setName = ref(initialSetName);
   const eventName = ref(initialEventName);
   const tag = ref(initialTag);
+  const status = ref(initialStatus);
+  const newlyAdded = ref(initialNewlyAdded);
   const minPriceMinor = ref(initialMinPriceMinor);
   const maxPriceMinor = ref(initialMaxPriceMinor);
   const sort = ref(initialSort);
@@ -45,6 +49,8 @@ export function useCatalogSearch({
         setName: setName.value,
         eventName: eventName.value,
         tag: tag.value,
+        status: status.value,
+        newlyAdded: newlyAdded.value,
         minPriceMinor: minPriceMinor.value,
         maxPriceMinor: maxPriceMinor.value,
         sort: sort.value,
@@ -59,7 +65,7 @@ export function useCatalogSearch({
   }
 
   watch(
-    [query, category, conditionId, setName, eventName, tag, minPriceMinor, maxPriceMinor, sort],
+    [query, category, conditionId, setName, eventName, tag, status, newlyAdded, minPriceMinor, maxPriceMinor, sort],
     () => {
       if (page.value !== 1) page.value = 1;
       else load();
@@ -80,6 +86,8 @@ export function useCatalogSearch({
     setName,
     eventName,
     tag,
+    status,
+    newlyAdded,
     minPriceMinor,
     maxPriceMinor,
     sort,

apps/web/src/pages/CatalogPage.vue

@@ -10,6 +10,7 @@ import {
 import ListingCard from "@/components/molecules/ListingCard.vue";
 import CatalogSortSelect from "@/components/atoms/CatalogSortSelect.vue";
 import CatalogTextFilter from "@/components/atoms/CatalogTextFilter.vue";
+import CatalogToggle from "@/components/atoms/CatalogToggle.vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -22,6 +23,8 @@ const {
   setName,
   eventName,
   tag,
+  status,
+  newlyAdded,
   minPriceMinor,
   maxPriceMinor,
   sort,
@@ -40,6 +43,8 @@ const {
   initialSetName: typeof route.query.setName === "string" ? route.query.setName : "",
   initialEventName: typeof route.query.eventName === "string" ? route.query.eventName : "",
   initialTag: typeof route.query.tag === "string" ? route.query.tag : "",
+  initialStatus: typeof route.query.status === "string" ? route.query.status : "",
+  initialNewlyAdded: route.query.newlyAdded === "true",
   initialMinPriceMinor: Number.parseInt(route.query.min, 10) || undefined,
   initialMaxPriceMinor: Number.parseInt(route.query.max, 10) || undefined,
   initialSort:
@@ -64,7 +69,7 @@ onMounted(async () => {
 });
 
 watch(
-  [query, category, conditionId, setName, eventName, tag, minPriceMinor, maxPriceMinor, sort, page],
+  [query, category, conditionId, setName, eventName, tag, status, newlyAdded, minPriceMinor, maxPriceMinor, sort, page],
   ([
     nextQuery,
     nextCategory,
@@ -72,6 +77,8 @@ watch(
     nextSetName,
     nextEventName,
     nextTag,
+    nextStatus,
+    nextNewlyAdded,
     nextMin,
     nextMax,
     nextSort,
@@ -85,6 +92,8 @@ watch(
         ...(nextSetName ? { setName: nextSetName } : {}),
         ...(nextEventName ? { eventName: nextEventName } : {}),
         ...(nextTag ? { tag: nextTag } : {}),
+        ...(nextStatus ? { status: nextStatus } : {}),
+        ...(nextNewlyAdded ? { newlyAdded: "true" } : {}),
         ...(typeof nextMin === "number" ? { min: String(nextMin) } : {}),
         ...(typeof nextMax === "number" ? { max: String(nextMax) } : {}),
         ...(nextSort !== "recent" ? { sort: nextSort } : {}),
@@ -115,6 +124,17 @@ watch(
         <CatalogTextFilter v-model="setName" label="Set" placeholder="SV151" />
         <CatalogTextFilter v-model="eventName" label="Event" placeholder="Worlds" />
         <CatalogTextFilter v-model="tag" label="Tag" placeholder="binder" />
+        <CatalogToggle v-model="newlyAdded" label="Newly added" />
+        <label>
+          Status
+          <select v-model="status">
+            <option value="">Available and pending</option>
+            <option value="AVAILABLE">Available</option>
+            <option value="PENDING">Pending</option>
+            <option value="SOLD">Sold only</option>
+            <option value="ALL">Include sold</option>
+          </select>
+        </label>
         <label
           >Category
           <select v-model="category">

apps/web/src/services/catalog-service.js

@@ -7,6 +7,8 @@ export async function searchCatalog({
   setName = "",
   eventName = "",
   tag = "",
+  status = "",
+  newlyAdded = false,
   minPriceMinor,
   maxPriceMinor,
   sort = "recent",
@@ -24,6 +26,8 @@ export async function searchCatalog({
   if (setName) params.set("setName", setName);
   if (eventName) params.set("eventName", eventName);
   if (tag) params.set("tag", tag);
+  if (status) params.set("status", status);
+  if (newlyAdded) params.set("newlyAdded", "true");
   if (typeof minPriceMinor === "number")
     params.set("minPriceMinor", String(minPriceMinor));
   if (typeof maxPriceMinor === "number")