feat: add public condition search filters

Add public condition lookup options, condition filtering, and stable price/recent sorting with URL-backed catalog controls.

apps/web/src/composables/useCatalogSearch.js

@@ -2,9 +2,10 @@ import { ref, watch } from 'vue';
 
 import { searchCatalog } from '@/services/catalog-service.js';
 
-export function useCatalogSearch({ initialQuery = '', initialCategory = '', initialMinPriceMinor, initialMaxPriceMinor, initialSort = 'recent', initialPage = 1 } = {}) {
+export function useCatalogSearch({ initialQuery = '', initialCategory = '', initialConditionId = '', initialMinPriceMinor, initialMaxPriceMinor, initialSort = 'recent', initialPage = 1 } = {}) {
   const query = ref(initialQuery);
   const category = ref(initialCategory);
+  const conditionId = ref(initialConditionId);
   const minPriceMinor = ref(initialMinPriceMinor);
   const maxPriceMinor = ref(initialMaxPriceMinor);
   const sort = ref(initialSort);
@@ -20,7 +21,7 @@ export function useCatalogSearch({ initialQuery = '', initialCategory = '', init
     error.value = null;
 
     try {
-      const nextResult = await searchCatalog({ query: query.value, category: category.value, minPriceMinor: minPriceMinor.value, maxPriceMinor: maxPriceMinor.value, sort: sort.value, page: page.value });
+      const nextResult = await searchCatalog({ query: query.value, category: category.value, conditionId: conditionId.value, minPriceMinor: minPriceMinor.value, maxPriceMinor: maxPriceMinor.value, sort: sort.value, page: page.value });
       if (currentRequestId === requestId) result.value = nextResult;
     } catch (requestError) {
       if (currentRequestId === requestId) error.value = requestError;
@@ -29,7 +30,7 @@ export function useCatalogSearch({ initialQuery = '', initialCategory = '', init
     }
   }
 
-  watch([query, category, minPriceMinor, maxPriceMinor, sort], () => {
+  watch([query, category, conditionId, minPriceMinor, maxPriceMinor, sort], () => {
     if (page.value !== 1) page.value = 1;
     else load();
   });
@@ -41,5 +42,5 @@ export function useCatalogSearch({ initialQuery = '', initialCategory = '', init
     }
   }
 
-  return { query, category, minPriceMinor, maxPriceMinor, sort, page, result, isLoading, error, load, goToPage };
+  return { query, category, conditionId, minPriceMinor, maxPriceMinor, sort, page, result, isLoading, error, load, goToPage };
 }

apps/web/src/pages/CatalogPage.vue

@@ -3,15 +3,17 @@ 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 { listPublicCategories, listPublicConditions } from '@/services/catalog-service.js';
 import ListingCard from '@/components/molecules/ListingCard.vue';
 
 const route = useRoute();
 const router = useRouter();
 const categories = ref([]);
-const { query, category, minPriceMinor, maxPriceMinor, sort, page, result, isLoading, error, load, goToPage } = useCatalogSearch({
+const conditions = ref([]);
+const { query, category, conditionId, 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 : '',
+  initialConditionId: typeof route.query.conditionId === 'string' ? route.query.conditionId : '',
   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',
@@ -19,14 +21,19 @@ const { query, category, minPriceMinor, maxPriceMinor, sort, page, result, isLoa
 });
 
 onMounted(async () => {
-  await Promise.all([load(), listPublicCategories().then((items) => { categories.value = items; }).catch(() => {})]);
+  await Promise.all([
+    load(),
+    listPublicCategories().then((items) => { categories.value = items; }).catch(() => {}),
+    listPublicConditions().then((items) => { conditions.value = items; }).catch(() => {}),
+  ]);
 });
 
-watch([query, category, minPriceMinor, maxPriceMinor, sort, page], ([nextQuery, nextCategory, nextMin, nextMax, nextSort, nextPage]) => {
+watch([query, category, conditionId, minPriceMinor, maxPriceMinor, sort, page], ([nextQuery, nextCategory, nextCondition, nextMin, nextMax, nextSort, nextPage]) => {
   router.replace({
     query: {
       ...(nextQuery ? { q: nextQuery } : {}),
       ...(nextCategory ? { category: nextCategory } : {}),
+      ...(nextCondition ? { conditionId: nextCondition } : {}),
       ...(typeof nextMin === 'number' ? { min: String(nextMin) } : {}),
       ...(typeof nextMax === 'number' ? { max: String(nextMax) } : {}),
       ...(nextSort !== 'recent' ? { sort: nextSort } : {}),
@@ -48,6 +55,7 @@ watch([query, category, minPriceMinor, maxPriceMinor, sort, page], ([nextQuery,
       </label>
       <div class="catalog-filters">
         <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>Condition <select v-model="conditionId"><option value="">All conditions</option><option v-for="item in conditions" :key="item.id" :value="item.id">{{ item.name }} ({{ item.code }})</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>

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

@@ -1,9 +1,10 @@
 const apiBaseUrl = import.meta.env?.VITE_API_BASE_URL ?? '/api/v1';
 
-export async function searchCatalog({ query = '', category = '', minPriceMinor, maxPriceMinor, sort = 'recent', page = 1, limit = 20 } = {}) {
+export async function searchCatalog({ query = '', category = '', conditionId = '', minPriceMinor, maxPriceMinor, sort = 'recent', page = 1, limit = 20 } = {}) {
   const params = new URLSearchParams({ query, page: String(page), limit: String(limit) });
   if (sort !== 'recent') params.set('sort', sort);
   if (category) params.set('category', category);
+  if (conditionId) params.set('conditionId', conditionId);
   if (typeof minPriceMinor === 'number') params.set('minPriceMinor', String(minPriceMinor));
   if (typeof maxPriceMinor === 'number') params.set('maxPriceMinor', String(maxPriceMinor));
   const response = await fetch(`${apiBaseUrl}/public/search?${params}`);
@@ -22,6 +23,12 @@ export async function listPublicCategories() {
   return (await response.json()).data;
 }
 
+export async function listPublicConditions() {
+  const response = await fetch(`${apiBaseUrl}/public/lookups/conditions`);
+  if (!response.ok) throw new Error('Conditions are unavailable.');
+  return (await response.json()).data;
+}
+
 export async function getPublicListing(id) {
   const response = await fetch(`${apiBaseUrl}/public/listings/${encodeURIComponent(id)}`);