feat: add shareable catalog pagination

apps/web/src/pages/CatalogPage.vue

@@ -1,12 +1,27 @@
 <script setup>
-import { onMounted } from 'vue';
+import { onMounted, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 
 import { useCatalogSearch } from '@/composables/useCatalogSearch.js';
 import ListingCard from '@/components/molecules/ListingCard.vue';
 
-const { query, result, isLoading, error, load } = useCatalogSearch();
+const route = useRoute();
+const router = useRouter();
+const { query, page, result, isLoading, error, load, goToPage } = useCatalogSearch({
+  initialQuery: typeof route.query.q === 'string' ? route.query.q : '',
+  initialPage: Number.parseInt(route.query.page, 10) || 1,
+});
 
 onMounted(load);
+
+watch([query, page], ([nextQuery, nextPage]) => {
+  router.replace({
+    query: {
+      ...(nextQuery ? { q: nextQuery } : {}),
+      ...(nextPage > 1 ? { page: String(nextPage) } : {}),
+    },
+  });
+});
 </script>
 
 <template>
@@ -33,6 +48,24 @@ onMounted(load);
       <div v-else class="listing-grid">
         <ListingCard v-for="item in result.items" :key="item.id" :listing="item" />
       </div>
+
+      <nav v-if="result.pagination.totalPages > 1" class="pagination" aria-label="Catalog pages">
+        <button
+          type="button"
+          :disabled="page <= 1 || isLoading"
+          @click="goToPage(page - 1)"
+        >
+          Previous
+        </button>
+        <span aria-live="polite">Page {{ page }} of {{ result.pagination.totalPages }}</span>
+        <button
+          type="button"
+          :disabled="page >= result.pagination.totalPages || isLoading"
+          @click="goToPage(page + 1)"
+        >
+          Next
+        </button>
+      </nav>
     </section>
   </main>
 </template>