feat: allow selecting repo

Author: danielroe

app/app.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import hexRgb from 'hex-rgb'
 
-const { data: clusters, refresh, status } = useFetch('/api/clusters/nuxt/nuxt', {
+import { allowedRepos } from '~~/shared/repos'
+
+const repo = ref('nuxt/nuxt')
+
+const { data: clusters, refresh, status } = useFetch(() => `/api/clusters/${repo.value}`, {
   server: false,
   immediate: import.meta.client && !('startViewTransition' in document),
   default: () => [],
@@ -13,8 +17,8 @@ onMounted(async () => {
     const promise = new Promise<void>((resolve) => {
       finishTransition = resolve
     })
-    watch(clusters, () => document.startViewTransition(() => promise), { flush: 'pre', once: true })
-    watch(clusters, () => nextTick(finishTransition), { flush: 'post', once: true })
+    watch(clusters, () => document.startViewTransition(() => promise), { flush: 'pre' })
+    watch(clusters, () => nextTick(finishTransition), { flush: 'post' })
     refresh()
   }
 })
@@ -32,7 +36,6 @@ function labelColors(color: string) {
 const stateColors: Record<string, string> = {
   open: 'text-green-500',
   closed: 'text-purple-500',
-  merged: 'text-purple-500',
 }
 
 const openState = reactive<Record<string, boolean>>({})
@@ -51,7 +54,7 @@ async function updateSearch() {}
       </p>
     </nav>
     <p class="flex gap-2 items-center">
-      nuxt/nuxt
+      {{ repo }}
       <button
         class="rounded-full w-7 h-7 flex place-items-center border-solid border border-gray-700 bg-transparent color-gray-400 py-2 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
         :class="{ 'animate-spin opacity-50 pointer-events-none': status === 'pending' || status === 'idle' }"
@@ -66,7 +69,6 @@ async function updateSearch() {}
       </button>
     </p>
     <form
-      v-if="false"
       class="border-solid border border-gray-600 rounded-md flex flex-row items-center relative"
       disabled
       @submit.prevent="updateSearch"
@@ -79,18 +81,29 @@ async function updateSearch() {}
         >
         include closed issues
       </label> -->
-      <input
+      <!-- <input
         type="text"
         class="bg-transparent pl-8 pr-2 py-2 color-white border-0 flex-grow"
         placeholder="repository"
+      > -->
+      <select
+        v-model="repo"
+        class="pl-8 bg-transparent pr-2 py-2 color-white border-0 w-full"
       >
+        <option
+          v-for="repo in allowedRepos"
+          :key="repo"
+        >
+          {{ repo }}
+        </option>
+      </select>
       <Icon
         size="large"
         class="absolute ml-2 text-gray-400"
         name="tabler-search"
       />
     </form>
-    <template v-if="status === 'idle'">
+    <template v-if="status === 'idle' || status === 'pending'">
       <section
         v-for="i in 7"
         :key="i"

server/api/clusters/[...repo].ts

@@ -1,14 +1,15 @@
 import { clusterEmbeddings } from '../../utils/cluster'
 import { getEmbeddingsForIssue } from '../../utils/embeddings'
 
-const linkedRepos: Record<string, string[]> = {
+import { isAllowedRepo, type AllowedRepo } from '~~/shared/repos'
+
+const linkedRepos: Record<string, AllowedRepo[]> = {
   'danielroe/beasties': ['GoogleChromeLabs/critters'],
   'nitrojs/nitro': ['unjs/h3', 'unjs/c12', 'unjs/unenv', 'unjs/ofetch'],
-  // 'nuxt/nuxt': ['vuejs/core', 'vitejs/vite', 'nitrojs/nitro'],
+  'vitejs/vite': ['rollup/rollup'],
+  'nuxt/nuxt': ['nitrojs/nitro'],
 }
 
-const allowedRepos = ['nuxt/nuxt', 'vuejs/core', 'vitejs/vite', 'nitrojs/nitro', 'danielroe/beasties', 'unjs/h3', 'unjs/c12', 'unjs/unenv', 'unjs/ofetch']
-
 export default defineCachedEventHandler(async (event) => {
   const [owner, repo] = getRouterParam(event, 'repo')?.split('/') || []
   if (!owner || !repo) {
@@ -20,7 +21,7 @@ export default defineCachedEventHandler(async (event) => {
 
   const source = `${owner}/${repo}`
 
-  if (!allowedRepos.includes(source)) {
+  if (!isAllowedRepo(source)) {
     throw createError({
       status: 400,
       message: 'Repository not allowed',

server/api/issues/[...repo].ts

@@ -1,12 +1,11 @@
 import { Octokit } from '@octokit/rest'
 
 import { getLabels, type Issue } from '../../utils/github'
+import { isAllowedRepo } from '~~/shared/repos'
 
 const labelsToExclude = ['documentation', 'invalid', 'enhancement']
 const knownBots = new Set(['renovate', 'renovate[bot]'])
 
-const allowedRepos = ['nuxt/nuxt', 'vuejs/core', 'vitejs/vite', 'nitrojs/nitro', 'danielroe/beasties', 'unjs/h3', 'unjs/c12', 'unjs/unenv', 'unjs/ofetch']
-
 export default defineCachedEventHandler(async (event) => {
   const [owner, repo] = getRouterParam(event, 'repo')?.split('/') || []
   if (!owner || !repo) {
@@ -16,7 +15,7 @@ export default defineCachedEventHandler(async (event) => {
     })
   }
 
-  if (!allowedRepos.includes(`${owner}/${repo}`)) {
+  if (!isAllowedRepo(`${owner}/${repo}`)) {
     throw createError({
       status: 400,
       message: 'Repository not allowed',

shared/repos.ts

@@ -0,0 +1,7 @@
+export const allowedRepos = ['nuxt/nuxt', 'vuejs/core', 'vitejs/vite', 'nitrojs/nitro', 'danielroe/beasties', 'unjs/h3', 'unjs/c12', 'unjs/unenv', 'unjs/ofetch', 'rollup/rollup', 'GoogleChromeLabs/critters'] as const
+
+export type AllowedRepo = typeof allowedRepos[number]
+
+export function isAllowedRepo(repo: string): repo is AllowedRepo {
+  return allowedRepos.includes(repo as AllowedRepo)
+}