feat: expand catalog filters

apps/web/src/pages/CatalogPage.vue

@@ -9,6 +9,7 @@ import {
 } from "@/services/catalog-service.js";
 import ListingCard from "@/components/molecules/ListingCard.vue";
 import CatalogSortSelect from "@/components/atoms/CatalogSortSelect.vue";
+import CatalogTextFilter from "@/components/atoms/CatalogTextFilter.vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -18,6 +19,9 @@ const {
   query,
   category,
   conditionId,
+  setName,
+  eventName,
+  tag,
   minPriceMinor,
   maxPriceMinor,
   sort,
@@ -33,6 +37,9 @@ const {
     typeof route.query.category === "string" ? route.query.category : "",
   initialConditionId:
     typeof route.query.conditionId === "string" ? route.query.conditionId : "",
+  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 : "",
   initialMinPriceMinor: Number.parseInt(route.query.min, 10) || undefined,
   initialMaxPriceMinor: Number.parseInt(route.query.max, 10) || undefined,
   initialSort:
@@ -57,11 +64,14 @@ onMounted(async () => {
 });
 
 watch(
-  [query, category, conditionId, minPriceMinor, maxPriceMinor, sort, page],
+  [query, category, conditionId, setName, eventName, tag, minPriceMinor, maxPriceMinor, sort, page],
   ([
     nextQuery,
     nextCategory,
     nextCondition,
+    nextSetName,
+    nextEventName,
+    nextTag,
     nextMin,
     nextMax,
     nextSort,
@@ -72,6 +82,9 @@ watch(
         ...(nextQuery ? { q: nextQuery } : {}),
         ...(nextCategory ? { category: nextCategory } : {}),
         ...(nextCondition ? { conditionId: nextCondition } : {}),
+        ...(nextSetName ? { setName: nextSetName } : {}),
+        ...(nextEventName ? { eventName: nextEventName } : {}),
+        ...(nextTag ? { tag: nextTag } : {}),
         ...(typeof nextMin === "number" ? { min: String(nextMin) } : {}),
         ...(typeof nextMax === "number" ? { max: String(nextMax) } : {}),
         ...(nextSort !== "recent" ? { sort: nextSort } : {}),
@@ -99,6 +112,9 @@ watch(
         />
       </label>
       <div class="catalog-filters">
+        <CatalogTextFilter v-model="setName" label="Set" placeholder="SV151" />
+        <CatalogTextFilter v-model="eventName" label="Event" placeholder="Worlds" />
+        <CatalogTextFilter v-model="tag" label="Tag" placeholder="binder" />
         <label
           >Category
           <select v-model="category">