feat(app): switch releases to R2-backed paginated feed

Author: Aslemammad

packages/app/app/app.vue

@@ -11,8 +11,7 @@ useHead({
 
 useSeoMeta({
   title: "pkg.pr.new",
-  description:
-    "Search repositories on GitHub to list their continuous releases.",
+  description: "Search repositories to list their continuous releases.",
 });
 </script>
 

packages/app/app/components/Commits.vue

@@ -113,58 +113,77 @@ onBeforeUnmount(() => {
 
 // Pagination
 const fetching = ref(false);
-const fetchMoreForceDisabled = ref(!commitsWithRelease.value.length);
+const currentPage = ref(branch.target.history.pageInfo.currentPage || 1);
+const totalPages = computed(() => branch.target.history.pageInfo.totalPages || 1);
+const hasNextPage = computed(() => currentPage.value < totalPages.value);
+const hasPrevPage = computed(() => currentPage.value > 1);
 
-async function fetchMore() {
-  if (!branch.target.history.pageInfo.hasNextPage) {
-    return;
+const paginationItems = computed<(number | "...")[]>(() => {
+  const total = totalPages.value;
+  const page = currentPage.value;
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, i) => i + 1);
   }
 
+  const items: (number | "...")[] = [1];
+  const start = Math.max(2, page - 1);
+  const end = Math.min(total - 1, page + 1);
+
+  if (start > 2) {
+    items.push("...");
+  }
+  for (let i = start; i <= end; i++) {
+    items.push(i);
+  }
+  if (end < total - 1) {
+    items.push("...");
+  }
+  items.push(total);
+  return items;
+});
+
+async function fetchPage(page: number) {
   if (fetching.value) {
     return;
   }
 
   try {
     fetching.value = true;
-
-    const cursor = branch.target.history.pageInfo.endCursor;
-
     const result = await $fetch("/api/repo/commits", {
       query: {
         owner: props.owner,
         repo: props.repo,
-        cursor,
+        page: String(page),
       },
     });
 
-    const count = commitsWithRelease.value.length;
-
-    branch.target = {
-      ...branch.target,
-      history: {
-        ...branch.target.history,
-        nodes: [...branch.target.history.nodes, ...result.target.history.nodes],
-        pageInfo: result.target.history.pageInfo,
-      },
-    };
-
-    if (count === commitsWithRelease.value.length) {
-      fetchMoreForceDisabled.value = true;
-    }
+    currentPage.value = result.target.history.pageInfo.currentPage || page;
+    branch.id = result.id;
+    branch.name = result.name;
+    branch.target = result.target;
   } finally {
     fetching.value = false;
   }
 }
+
+async function goNextPage() {
+  if (!hasNextPage.value) {
+    return;
+  }
+  await fetchPage(currentPage.value + 1);
+}
+
+async function goPrevPage() {
+  if (!hasPrevPage.value) {
+    return;
+  }
+  await fetchPage(currentPage.value - 1);
+}
+
 </script>
 
 <template>
   <div class="flex flex-col gap-6">
-    <div class="text-center flex justify-center items-center gap-1 opacity-80">
-      Continuous Releases from
-      <UIcon name="i-ph-git-branch" />
-      {{ branch.name }}
-    </div>
-
     <div class="flex flex-col gap-2">
       <div
         v-for="commit of commitsWithRelease"
@@ -201,19 +220,40 @@ async function fetchMore() {
       </div>
     </div>
 
-    <div
-      v-if="
-        branch.target.history.pageInfo.hasNextPage && !fetchMoreForceDisabled
-      "
-      class="flex justify-center"
-    >
+    <div class="flex justify-center items-center gap-1 flex-wrap">
+      <UButton
+        color="neutral"
+        variant="subtle"
+        icon="i-ph-caret-left"
+        :disabled="!hasPrevPage"
+        :loading="fetching"
+        @click="goPrevPage()"
+      >
+        Prev
+      </UButton>
+
+      <template v-for="(item, index) in paginationItems" :key="`page-${index}`">
+        <span v-if="item === '...'" class="px-2 text-sm opacity-60">…</span>
+        <UButton
+          v-else
+          :color="item === currentPage ? 'primary' : 'neutral'"
+          :variant="item === currentPage ? 'solid' : 'subtle'"
+          :disabled="fetching"
+          @click="fetchPage(item)"
+        >
+          {{ item }}
+        </UButton>
+      </template>
+
       <UButton
         color="neutral"
         variant="subtle"
+        icon="i-ph-caret-right"
+        :disabled="!hasNextPage"
         :loading="fetching"
-        @click="fetchMore()"
+        @click="goNextPage()"
       >
-        Load More
+        Next
       </UButton>
     </div>