feat: add public listing detail web flow

apps/web/src/pages/CatalogPage.vue

@@ -2,6 +2,7 @@
 import { onMounted } from 'vue';
 
 import { useCatalogSearch } from '@/composables/useCatalogSearch.js';
+import ListingCard from '@/components/molecules/ListingCard.vue';
 
 const { query, result, isLoading, error, load } = useCatalogSearch();
 
@@ -30,14 +31,7 @@ onMounted(load);
       <p v-else-if="error" class="catalog-state catalog-state--error">{{ error.message }}</p>
       <p v-else-if="result.items.length === 0" class="catalog-state">No relevant matches found.</p>
       <div v-else class="listing-grid">
-        <article v-for="item in result.items" :key="item.id" class="listing-card">
-          <div class="listing-card__mark" aria-hidden="true">PK</div>
-          <div>
-            <p class="listing-card__status">{{ item.status }}</p>
-            <h3>{{ item.productName }}</h3>
-            <p class="listing-card__price">${{ (item.askingPriceMinor / 100).toFixed(2) }}</p>
-          </div>
-        </article>
+        <ListingCard v-for="item in result.items" :key="item.id" :listing="item" />
       </div>
     </section>
   </main>