feat: add shareable catalog pagination

apps/web/src/assets/styles/global.scss

@@ -35,6 +35,11 @@ h2 { margin: 0; font-size: 1.8rem; font-weight: 500; }
 .detail-notes { max-width: 520px; color: #61625a; font: 1.1rem/1.5 Arial, sans-serif; }
 .catalog-state { padding: 48px 0; color: #61625a; font: 1rem/1.5 Arial, sans-serif; }
 .catalog-state--error { color: #a3482a; }
+.pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 28px; color: #61625a; font: 0.85rem Arial, sans-serif; }
+.pagination button { border: 1px solid #9ca69b; padding: 10px 14px; background: #fffdf8; color: #386052; cursor: pointer; }
+.pagination button:hover:not(:disabled) { border-color: #386052; }
+.pagination button:focus-visible { outline: 3px solid #a3482a; outline-offset: 3px; }
+.pagination button:disabled { cursor: not-allowed; opacity: 0.45; }
 
 @media (max-width: 720px) {
   .catalog-header { padding-top: 56px; }

apps/web/src/composables/useCatalogSearch.js

@@ -2,8 +2,9 @@ import { ref, watch } from 'vue';
 
 import { searchCatalog } from '@/services/catalog-service.js';
 
-export function useCatalogSearch() {
-  const query = ref('');
+export function useCatalogSearch({ initialQuery = '', initialPage = 1 } = {}) {
+  const query = ref(initialQuery);
+  const page = ref(initialPage);
   const result = ref({ items: [], pagination: { page: 1, limit: 20, total: 0, totalPages: 0 } });
   const isLoading = ref(false);
   const error = ref(null);
@@ -15,7 +16,7 @@ export function useCatalogSearch() {
     error.value = null;
 
     try {
-      const nextResult = await searchCatalog({ query: query.value });
+      const nextResult = await searchCatalog({ query: query.value, page: page.value });
       if (currentRequestId === requestId) result.value = nextResult;
     } catch (requestError) {
       if (currentRequestId === requestId) error.value = requestError;
@@ -25,6 +26,13 @@ export function useCatalogSearch() {
   }
 
   watch(query, load);
+  watch(page, load);
 
-  return { query, result, isLoading, error, load };
+  function goToPage(nextPage) {
+    if (nextPage >= 1 && nextPage <= result.value.pagination.totalPages) {
+      page.value = nextPage;
+    }
+  }
+
+  return { query, page, result, isLoading, error, load, goToPage };
 }

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>