frontend: add repos store and ReposPage

frontend/src/pages/ReposPage.vue

@@ -0,0 +1,68 @@
+<template>
+  <q-page padding>
+    <q-input
+      v-model="store.search"
+      placeholder="Filter repositories…"
+      outlined
+      dense
+      clearable
+      class="q-mb-md"
+    >
+      <template #prepend><q-icon name="search" /></template>
+    </q-input>
+
+    <q-infinite-scroll @load="onLoad" :offset="200">
+      <div class="row q-gutter-md">
+        <q-card
+          v-for="repo in store.filtered"
+          :key="repo.id"
+          class="col-12 col-sm-5 col-md-3 cursor-pointer"
+          @click="selectRepo(repo)"
+        >
+          <q-card-section>
+            <div class="row items-center q-gutter-sm">
+              <q-icon
+                :name="repo.provider === 'github' ? 'fab fa-github' : 'fab fa-gitlab'"
+                size="sm"
+              />
+              <div class="text-subtitle1 text-weight-medium">{{ repo.name }}</div>
+            </div>
+            <div class="text-caption text-grey">{{ repo.fullName }}</div>
+            <div class="text-caption text-grey">Updated {{ formatDate(repo.updatedAt) }}</div>
+          </q-card-section>
+        </q-card>
+      </div>
+
+      <template #loading>
+        <div class="row justify-center q-my-md">
+          <q-spinner-dots size="40px" />
+        </div>
+      </template>
+    </q-infinite-scroll>
+  </q-page>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useReposStore } from '../stores/repos.js'
+
+const store = useReposStore()
+const router = useRouter()
+
+onMounted(() => store.loadRepos())
+
+async function onLoad(index, done) {
+  await store.loadMore()
+  done(!store.hasMore)
+}
+
+function selectRepo(repo) {
+  store.selectSource(repo)
+  router.push('/extract')
+}
+
+function formatDate(iso) {
+  return new Date(iso).toLocaleDateString()
+}
+</script>

frontend/src/router/routes.js

@@ -7,6 +7,7 @@ const routes = [
       { path: '/login', component: () => import('pages/LoginPage.vue') },
       { path: '/auth/github', component: () => import('pages/AuthCallback.vue') },
       { path: '/auth/gitlab', component: () => import('pages/AuthCallback.vue') },
+      { path: '/repos', component: () => import('pages/ReposPage.vue') },
     ],
   },
   {

frontend/src/stores/repos.js

@@ -0,0 +1,101 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import { useAuthStore } from './auth.js'
+import { listRepos } from '../services/github.js'
+import { listProjects } from '../services/gitlab.js'
+
+export const useReposStore = defineStore('repos', () => {
+  const list = ref([])
+  const page = ref(1)
+  const hasMore = ref(true)
+  const loading = ref(false)
+  const search = ref('')
+  const selectedSource = ref(null)
+  const selectedTarget = ref(null)
+  const sourceTree = ref([])
+  const sourcePath = ref('')
+  const targetPath = ref('src')
+
+  const filtered = computed(() =>
+    search.value
+      ? list.value.filter((r) => r.name.toLowerCase().includes(search.value.toLowerCase()))
+      : list.value,
+  )
+
+  async function loadRepos() {
+    const auth = useAuthStore()
+    loading.value = true
+    page.value = 1
+    list.value = []
+    hasMore.value = true
+    const items = await fetchPage(auth, 1)
+    list.value = items
+    hasMore.value = items.length === 50
+    loading.value = false
+  }
+
+  async function loadMore() {
+    if (!hasMore.value || loading.value) return
+    const auth = useAuthStore()
+    loading.value = true
+    page.value++
+    const items = await fetchPage(auth, page.value)
+    list.value.push(...items)
+    hasMore.value = items.length === 50
+    loading.value = false
+  }
+
+  async function fetchPage(auth, p) {
+    if (auth.provider === 'github') {
+      const data = await listRepos(auth.token, p)
+      if (data.error) return []
+      return data.map((r) => ({
+        id: r.id,
+        name: r.name,
+        fullName: r.full_name,
+        owner: r.owner.login,
+        defaultBranch: r.default_branch,
+        updatedAt: r.updated_at,
+        provider: 'github',
+      }))
+    } else {
+      const data = await listProjects(auth.token, auth.gitlabHost, p)
+      if (data.error) return []
+      return data.map((p) => ({
+        id: p.id,
+        name: p.name,
+        fullName: p.path_with_namespace,
+        owner: p.namespace.path,
+        defaultBranch: p.default_branch,
+        updatedAt: p.last_activity_at,
+        provider: 'gitlab',
+      }))
+    }
+  }
+
+  function selectSource(repo) {
+    selectedSource.value = repo
+  }
+
+  function selectTarget(repo) {
+    selectedTarget.value = repo
+  }
+
+  return {
+    list,
+    page,
+    hasMore,
+    loading,
+    search,
+    selectedSource,
+    selectedTarget,
+    sourceTree,
+    sourcePath,
+    targetPath,
+    filtered,
+    loadRepos,
+    loadMore,
+    selectSource,
+    selectTarget,
+  }
+})