feat: expand catalog filters

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

@@ -0,0 +1,18 @@
+.catalog-text-filter {
+  display: grid;
+  gap: var(--space-1);
+}
+
+.catalog-text-filter span {
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+}
+
+.catalog-text-filter input {
+  min-height: 44px;
+  border: var(--border-thin) solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-2) var(--space-3);
+  background: var(--color-surface);
+  color: var(--color-text);
+}

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

@@ -0,0 +1,6 @@
+import CatalogTextFilter from './CatalogTextFilter.vue';
+
+export default { title: 'Atoms/CatalogTextFilter', component: CatalogTextFilter };
+
+export const Set = { args: { label: 'Set', modelValue: '', placeholder: 'SV151' } };
+export const Tag = { args: { label: 'Tag', modelValue: 'binder' } };

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

@@ -0,0 +1,25 @@
+<script setup>
+defineProps({
+  label: { type: String, required: true },
+  modelValue: { type: String, required: true },
+  placeholder: { type: String, default: '' },
+});
+
+defineEmits(['update:modelValue']);
+</script>
+
+<template>
+  <label class="catalog-text-filter">
+    <span>{{ label }}</span>
+    <input
+      :value="modelValue"
+      type="search"
+      :placeholder="placeholder"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+  </label>
+</template>
+
+<style scoped lang="scss">
+@use './CatalogTextFilter.scss';
+</style>

apps/web/src/composables/useCatalogSearch.js

@@ -6,6 +6,9 @@ export function useCatalogSearch({
   initialQuery = "",
   initialCategory = "",
   initialConditionId = "",
+  initialSetName = "",
+  initialEventName = "",
+  initialTag = "",
   initialMinPriceMinor,
   initialMaxPriceMinor,
   initialSort = "recent",
@@ -14,6 +17,9 @@ export function useCatalogSearch({
   const query = ref(initialQuery);
   const category = ref(initialCategory);
   const conditionId = ref(initialConditionId);
+  const setName = ref(initialSetName);
+  const eventName = ref(initialEventName);
+  const tag = ref(initialTag);
   const minPriceMinor = ref(initialMinPriceMinor);
   const maxPriceMinor = ref(initialMaxPriceMinor);
   const sort = ref(initialSort);
@@ -36,6 +42,9 @@ export function useCatalogSearch({
         query: query.value,
         category: category.value,
         conditionId: conditionId.value,
+        setName: setName.value,
+        eventName: eventName.value,
+        tag: tag.value,
         minPriceMinor: minPriceMinor.value,
         maxPriceMinor: maxPriceMinor.value,
         sort: sort.value,
@@ -50,7 +59,7 @@ export function useCatalogSearch({
   }
 
   watch(
-    [query, category, conditionId, minPriceMinor, maxPriceMinor, sort],
+    [query, category, conditionId, setName, eventName, tag, minPriceMinor, maxPriceMinor, sort],
     () => {
       if (page.value !== 1) page.value = 1;
       else load();
@@ -68,6 +77,9 @@ export function useCatalogSearch({
     query,
     category,
     conditionId,
+    setName,
+    eventName,
+    tag,
     minPriceMinor,
     maxPriceMinor,
     sort,

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

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

@@ -4,6 +4,9 @@ export async function searchCatalog({
   query = "",
   category = "",
   conditionId = "",
+  setName = "",
+  eventName = "",
+  tag = "",
   minPriceMinor,
   maxPriceMinor,
   sort = "recent",
@@ -18,6 +21,9 @@ export async function searchCatalog({
   if (sort !== "recent") params.set("sort", sort);
   if (category) params.set("category", category);
   if (conditionId) params.set("conditionId", conditionId);
+  if (setName) params.set("setName", setName);
+  if (eventName) params.set("eventName", eventName);
+  if (tag) params.set("tag", tag);
   if (typeof minPriceMinor === "number")
     params.set("minPriceMinor", String(minPriceMinor));
   if (typeof maxPriceMinor === "number")