feat: add catalog status filters

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">