feat: add public search controls

Add public category lookup options, allowlisted sort ordering, URL-backed catalog controls, and strict search route validation with regression tests.

apps/web/src/pages/CatalogPage.vue

@@ -1,29 +1,35 @@
 <script setup>
-import { onMounted, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { useCatalogSearch } from '@/composables/useCatalogSearch.js';
+import { listPublicCategories } from '@/services/catalog-service.js';
 import ListingCard from '@/components/molecules/ListingCard.vue';
 
 const route = useRoute();
 const router = useRouter();
-const { query, category, minPriceMinor, maxPriceMinor, page, result, isLoading, error, load, goToPage } = useCatalogSearch({
+const categories = ref([]);
+const { query, category, minPriceMinor, maxPriceMinor, sort, page, result, isLoading, error, load, goToPage } = useCatalogSearch({
   initialQuery: typeof route.query.q === 'string' ? route.query.q : '',
   initialCategory: typeof route.query.category === 'string' ? route.query.category : '',
   initialMinPriceMinor: Number.parseInt(route.query.min, 10) || undefined,
   initialMaxPriceMinor: Number.parseInt(route.query.max, 10) || undefined,
+  initialSort: typeof route.query.sort === 'string' ? route.query.sort : 'recent',
   initialPage: Number.parseInt(route.query.page, 10) || 1,
 });
 
-onMounted(load);
+onMounted(async () => {
+  await Promise.all([load(), listPublicCategories().then((items) => { categories.value = items; }).catch(() => {})]);
+});
 
-watch([query, category, minPriceMinor, maxPriceMinor, page], ([nextQuery, nextCategory, nextMin, nextMax, nextPage]) => {
+watch([query, category, minPriceMinor, maxPriceMinor, sort, page], ([nextQuery, nextCategory, nextMin, nextMax, nextSort, nextPage]) => {
   router.replace({
     query: {
       ...(nextQuery ? { q: nextQuery } : {}),
       ...(nextCategory ? { category: nextCategory } : {}),
       ...(typeof nextMin === 'number' ? { min: String(nextMin) } : {}),
       ...(typeof nextMax === 'number' ? { max: String(nextMax) } : {}),
+      ...(nextSort !== 'recent' ? { sort: nextSort } : {}),
       ...(nextPage > 1 ? { page: String(nextPage) } : {}),
     },
   });
@@ -41,9 +47,10 @@ watch([query, category, minPriceMinor, maxPriceMinor, page], ([nextQuery, nextCa
         <input v-model="query" type="search" placeholder="Try Charizard, 151, plush..." />
       </label>
       <div class="catalog-filters">
-        <label>Category <input v-model="category" type="search" placeholder="Cards or plush" /></label>
+        <label>Category <select v-model="category"><option value="">All categories</option><option v-for="item in categories" :key="item.id" :value="item.id">{{ item.name }}</option></select></label>
         <label>Min price (cents) <input v-model.number="minPriceMinor" type="number" min="0" /></label>
         <label>Max price (cents) <input v-model.number="maxPriceMinor" type="number" min="0" /></label>
+        <label>Sort <select v-model="sort"><option value="recent">Recently added</option><option value="price_low">Price: low to high</option><option value="price_high">Price: high to low</option></select></label>
       </div>
     </header>