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>

apps/web/src/pages/ListingDetailPage.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { RouterLink, useRoute } from 'vue-router';
+
+import { getPublicListing } from '@/services/catalog-service.js';
+
+const route = useRoute();
+const listing = ref(null);
+const isLoading = ref(true);
+const error = ref(null);
+
+onMounted(async () => {
+  try {
+    listing.value = await getPublicListing(route.params.id);
+  } catch (requestError) {
+    error.value = requestError;
+  } finally {
+    isLoading.value = false;
+  }
+});
+</script>
+
+<template>
+  <main class="detail-page">
+    <RouterLink class="detail-back" :to="{ name: 'catalog' }">Back to catalog</RouterLink>
+    <p v-if="isLoading" class="catalog-state">Loading listing...</p>
+    <p v-else-if="error" class="catalog-state catalog-state--error">{{ error.message }}</p>
+    <article v-else-if="listing" class="detail-content">
+      <p class="catalog-kicker">{{ listing.status }}</p>
+      <h1>{{ listing.productName }}</h1>
+      <p class="detail-price">${{ (listing.askingPriceMinor / 100).toFixed(2) }}</p>
+      <p v-if="listing.notes" class="detail-notes">{{ listing.notes }}</p>
+    </article>
+  </main>
+</template>