From 2f6c6755b4ef9b580e2b590139c815e05f49d750 Mon Sep 17 00:00:00 2001
From: Chris Savvopoulos <savvopoulos@gmail.com>
Date: Thu, 5 Mar 2026 21:27:38 +0200
Subject: [PATCH 1/3] Add "Load more" pagination to pipeline list

---
 web/src/assets/locales/en.json                 |  1 +
 .../components/repo/pipeline/PipelineList.vue  |  9 +++++++++
 web/src/store/pipelines.ts                     |  7 ++++++-
 web/src/views/repo/RepoPipelines.vue           | 18 ++++++++++++++++--
 4 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/web/src/assets/locales/en.json b/web/src/assets/locales/en.json
index 76d31055a64..2c857d9261d 100644
--- a/web/src/assets/locales/en.json
+++ b/web/src/assets/locales/en.json
@@ -207,6 +207,7 @@
       "config": "Config",
       "files": "Changed files",
       "no_pipelines": "No pipelines have been started yet.",
+      "load_more": "Load more",
       "no_pipeline_steps": "No pipeline steps available!",
       "step_not_started": "This step hasn't started yet.",
       "pipelines_for": "Pipelines for branch \"{branch}\"",
diff --git a/web/src/components/repo/pipeline/PipelineList.vue b/web/src/components/repo/pipeline/PipelineList.vue
index c2985847d7b..5d6377b445c 100644
--- a/web/src/components/repo/pipeline/PipelineList.vue
+++ b/web/src/components/repo/pipeline/PipelineList.vue
@@ -15,10 +15,14 @@
     <Panel v-else-if="pipelines?.length === 0">
       <span class="text-wp-text-100">{{ $t('repo.pipeline.no_pipelines') }}</span>
     </Panel>
+    <div v-if="hasMore && !loading" class="flex justify-center">
+      <Button :text="$t('repo.pipeline.load_more')" @click="$emit('load-more')" />
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import Button from '~/components/atomic/Button.vue';
 import Icon from '~/components/atomic/Icon.vue';
 import Panel from '~/components/layout/Panel.vue';
 import PipelineItem from '~/components/repo/pipeline/PipelineItem.vue';
@@ -27,5 +31,10 @@ import type { Pipeline } from '~/lib/api/types';
 defineProps<{
   pipelines: Pipeline[] | undefined;
   loading?: boolean;
+  hasMore?: boolean;
+}>();
+
+defineEmits<{
+  (event: 'load-more'): void;
 }>();
 </script>
diff --git a/web/src/store/pipelines.ts b/web/src/store/pipelines.ts
index 73735de5765..e42853ee36f 100644
--- a/web/src/store/pipelines.ts
+++ b/web/src/store/pipelines.ts
@@ -82,12 +82,16 @@ export const usePipelineStore = defineStore('pipelines', () => {
     setPipeline(repoId, pipeline);
   }
 
+  const perPage = 50;
+  const hasMore = ref(false);
+
   async function loadRepoPipelines(repoId: number, page?: number) {
     loading.value = true;
-    const _pipelines = await apiClient.getPipelineList(repoId, { page });
+    const _pipelines = await apiClient.getPipelineList(repoId, { page, perPage });
     _pipelines.forEach((pipeline) => {
       setPipeline(repoId, pipeline);
     });
+    hasMore.value = _pipelines.length >= perPage;
     loading.value = false;
   }
 
@@ -139,6 +143,7 @@ export const usePipelineStore = defineStore('pipelines', () => {
     getPipeline,
     loadRepoPipelines,
     loadPipeline,
+    hasMore,
     activePipelines,
     pipelineFeed,
     loadPipelineFeed,
diff --git a/web/src/views/repo/RepoPipelines.vue b/web/src/views/repo/RepoPipelines.vue
index 046c539014f..8368ec71ce7 100644
--- a/web/src/views/repo/RepoPipelines.vue
+++ b/web/src/views/repo/RepoPipelines.vue
@@ -1,17 +1,31 @@
 <template>
-  <PipelineList :pipelines="pipelines" :repo="repo" />
+  <PipelineList
+    :pipelines="pipelines"
+    :loading="pipelineStore.loading"
+    :has-more="pipelineStore.hasMore"
+    @load-more="loadMore"
+  />
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import PipelineList from '~/components/repo/pipeline/PipelineList.vue';
 import { requiredInject } from '~/compositions/useInjectProvide';
 import { useWPTitle } from '~/compositions/useWPTitle';
+import { usePipelineStore } from '~/store/pipelines';
 
 const repo = requiredInject('repo');
 const pipelines = requiredInject('pipelines');
+const pipelineStore = usePipelineStore();
+
+const page = ref(1);
+
+async function loadMore() {
+  page.value += 1;
+  await pipelineStore.loadRepoPipelines(repo.value.id, page.value);
+}
 
 const { t } = useI18n();
 useWPTitle(computed(() => [t('repo.activity'), repo.value.full_name]));

From cf83d65a3391ddcf7b56c52b0bb4c6199f3657a5 Mon Sep 17 00:00:00 2001
From: Chris Savvopoulos <savvopoulos@gmail.com>
Date: Mon, 9 Mar 2026 12:28:33 +0200
Subject: [PATCH 2/3] add todo

---
 web/src/views/repo/RepoPipelines.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web/src/views/repo/RepoPipelines.vue b/web/src/views/repo/RepoPipelines.vue
index 8368ec71ce7..64abf8659fb 100644
--- a/web/src/views/repo/RepoPipelines.vue
+++ b/web/src/views/repo/RepoPipelines.vue
@@ -16,6 +16,8 @@ import { requiredInject } from '~/compositions/useInjectProvide';
 import { useWPTitle } from '~/compositions/useWPTitle';
 import { usePipelineStore } from '~/store/pipelines';
 
+// TODO(4626): Refactor to use usePagination with server-side filtering,
+// so pipeline loading can move from RepoWrapper to individual list views.
 const repo = requiredInject('repo');
 const pipelines = requiredInject('pipelines');
 const pipelineStore = usePipelineStore();

From e4032070afcdc6d9d680b3748291e2d18b2e2c97 Mon Sep 17 00:00:00 2001
From: Chris Savvopoulos <savvopoulos@gmail.com>
Date: Tue, 10 Mar 2026 11:04:07 +0200
Subject: [PATCH 3/3] loadMore

---
 web/src/components/repo/pipeline/PipelineList.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/repo/pipeline/PipelineList.vue b/web/src/components/repo/pipeline/PipelineList.vue
index 5d6377b445c..cd66f15728e 100644
--- a/web/src/components/repo/pipeline/PipelineList.vue
+++ b/web/src/components/repo/pipeline/PipelineList.vue
@@ -16,7 +16,7 @@
       <span class="text-wp-text-100">{{ $t('repo.pipeline.no_pipelines') }}</span>
     </Panel>
     <div v-if="hasMore && !loading" class="flex justify-center">
-      <Button :text="$t('repo.pipeline.load_more')" @click="$emit('load-more')" />
+      <Button :text="$t('repo.pipeline.load_more')" @click="$emit('loadMore')" />
     </div>
   </div>
 </template>
@@ -35,6 +35,6 @@ defineProps<{
 }>();
 
 defineEmits<{
-  (event: 'load-more'): void;
+  (event: 'loadMore'): void;
 }>();
 </script>