@cat-factory/app 0.47.10 → 0.47.11

package/app/components/github/AddServiceFromRepoModal.vue

@@ -10,6 +10,7 @@
 // pinned to a subdirectory. When the selected repo is a monorepo, the user
 // browses its tree and picks the service's directory before adding (and may add
 // more than one, a subset of the repo's services).
+import { refDebounced } from '@vueuse/core'
 import GitHubConnect from '~/components/github/GitHubConnect.vue'
 import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
 import ServiceTestConfig from '~/components/panels/inspector/ServiceTestConfig.vue'
@@ -76,16 +77,53 @@ const repoItems = computed(() =>
   }),
 )
 
-// The PAT (or a wide App install) can expose hundreds of repos, too many for a plain
-// dropdown — filter by owner/name. The currently selected repo is always kept in the
-// list so a selection doesn't vanish when the query no longer matches it.
+// The PAT (or a wide App install) can expose hundreds of repos, far too many for a plain
+// dropdown — so the picker is a typeahead combobox. The user types and matching repos
+// surface: matching is a debounced, case-insensitive substring over `owner/name` (so any
+// part of either matches). For a LARGE list the search only kicks in once at least
+// MIN_SEARCH_LEN characters are typed, to keep early keystrokes from listing hundreds of
+// rows; but when the whole list is small enough to browse (<= BROWSE_ALL_MAX) the gate is
+// dropped and every repo is offered up-front (typing then narrows), so a handful of repos
+// stays pickable without having to type — matching the old always-open dropdown.
+const MIN_SEARCH_LEN = 3
+const BROWSE_ALL_MAX = 25
 const repoSearch = ref('')
-const filteredRepoItems = computed(() => {
-  const q = repoSearch.value.trim().toLowerCase()
-  if (!q) return repoItems.value
-  return repoItems.value.filter((r) => r.search.includes(q) || r.value === selectedRepoId.value)
+const repoSearchDebounced = refDebounced(repoSearch, 250)
+// Trimmed (original case) for display; lowercased for matching.
+const repoQueryRaw = computed(() => repoSearchDebounced.value.trim())
+const repoQuery = computed(() => repoQueryRaw.value.toLowerCase())
+
+// Small lists are browseable without typing; large lists require the min-length gate.
+const browseAll = computed(() => repoItems.value.length <= BROWSE_ALL_MAX)
+// True only on a large list whose query is still too short to search.
+const belowMinChars = computed(() => !browseAll.value && repoQuery.value.length < MIN_SEARCH_LEN)
+
+// Matches for the current query. On a small list an empty query lists everything; on a
+// large list nothing surfaces until the query passes the min length.
+const queryMatches = computed(() => {
+  if (belowMinChars.value) return []
+  if (!repoQuery.value) return repoItems.value
+  return repoItems.value.filter((r) => r.search.includes(repoQuery.value))
+})
+
+// Items fed to the combobox: the query matches plus the current selection kept present,
+// so the menu can still render the selected repo's label once the (reset) search term no
+// longer matches it.
+const repoMenuItems = computed(() => {
+  const matches = queryMatches.value
+  if (selectedRepoId.value === undefined) return matches
+  if (matches.some((r) => r.value === selectedRepoId.value)) return matches
+  const selected = repoItems.value.find((r) => r.value === selectedRepoId.value)
+  return selected ? [selected, ...matches] : matches
 })
 
+// The count summary under the field is shown only when it's meaningful: there are matches
+// to count AND the user is actually searching (or browsing a small list). After a
+// selection resets the search term this is false, so the field doesn't claim "Showing 0"
+// or nag "type 3 characters" right under the repo the user just picked. The zero-match and
+// min-length messages are owned by the combobox's own empty state instead.
+const showResultCount = computed(() => !belowMinChars.value && queryMatches.value.length > 0)
+
 const hasRepos = computed(() => github.availableRepos.length > 0)
 const selectedRepo = computed(() =>
   github.availableRepos.find((r) => r.githubId === selectedRepoId.value),
@@ -121,6 +159,13 @@ function resetSelection() {
   repoSearch.value = ''
 }
 
+// Clear the current repo selection (the combobox's trailing ✕) so the user can pick a
+// different one — drops the selection-dependent state and resets the search term. The
+// combobox has no built-in deselect, so the field would otherwise stay pinned to a repo.
+function clearSelection() {
+  resetSelection()
+}
+
 // The App's installation settings page — where the user grants it access to a
 // repo it can't see yet (mirrors the bootstrap modal's "grant access" link).
 const manageInstallUrl = computed(() => {
@@ -236,34 +281,42 @@ function done() {
               {{ t('github.addService.noReposAvailable') }}
             </div>
             <div v-else class="space-y-1.5">
-              <UInput
-                v-model="repoSearch"
+              <UInputMenu
+                v-model="selectedRepoId"
+                v-model:search-term="repoSearch"
+                :items="repoMenuItems"
+                :ignore-filter="true"
+                value-key="value"
+                :loading="github.loadingAvailable"
                 icon="i-lucide-search"
-                :placeholder="t('github.addService.filterPlaceholder')"
+                :placeholder="t('github.addService.searchPlaceholder')"
                 class="w-full"
-                :ui="{ trailing: 'pe-1' }"
               >
-                <template v-if="repoSearch" #trailing>
+                <template v-if="selectedRepoId !== undefined" #trailing>
                   <UButton
                     color="neutral"
                     variant="link"
                     size="sm"
                     icon="i-lucide-x"
-                    :aria-label="t('github.addService.clearFilter')"
-                    @click="repoSearch = ''"
+                    :aria-label="t('github.addService.clearSelection')"
+                    @click.stop="clearSelection"
                   />
                 </template>
-              </UInput>
-              <USelect
-                v-model="selectedRepoId"
-                :items="filteredRepoItems"
-                :placeholder="t('github.addService.chooseRepository')"
-                class="w-full"
-              />
-              <p class="text-xs text-slate-500">
+                <template #empty>
+                  <span v-if="belowMinChars">
+                    {{
+                      t('github.addService.searchMinChars', { min: MIN_SEARCH_LEN }, MIN_SEARCH_LEN)
+                    }}
+                  </span>
+                  <span v-else>{{
+                    t('github.addService.noMatches', { query: repoQueryRaw })
+                  }}</span>
+                </template>
+              </UInputMenu>
+              <p v-if="showResultCount" class="text-xs text-slate-500">
                 {{
                   t('github.addService.showingCount', {
-                    shown: filteredRepoItems.length,
+                    shown: queryMatches.length,
                     total: repoItems.length,
                   })
                 }}

package/i18n/locales/en.json

@@ -1936,9 +1936,13 @@
       "repository": "Repository",
       "repositoryHint": "Repositories the GitHub App can access. Don't see yours? Grant the App access below, then refresh.",
       "noReposAvailable": "No repositories available yet. Grant the App access to one below, then refresh.",
-      "filterPlaceholder": "Filter by owner/name…",
-      "clearFilter": "Clear filter",
-      "chooseRepository": "Choose a repository",
+      "searchPlaceholder": "Search repositories by owner or name…",
+      "searchMinChars": "Type at least {min} character to search. | Type at least {min} characters to search.",
+      "@searchMinChars": {
+        "description": "Shown when a large repo list needs a typed query before searching. Resolved via t(key, { min }, min) so {min} also drives the plural choice; min is always 2 or more. Provide ALL plural forms your language needs (English has 2; Polish/Ukrainian need 3 - one/few/many - and rely on the custom pluralRules wired in i18n.config.ts)."
+      },
+      "noMatches": "No repositories found for {query}.",
+      "clearSelection": "Clear selection",
       "showingCount": "Showing {shown} of {total} repositories.",
       "repoLabel": {
         "private": " (private)",

package/i18n/locales/es.json

@@ -1885,9 +1885,10 @@
       "repository": "Repositorio",
       "repositoryHint": "Repositorios a los que la GitHub App puede acceder. ¿No ves el tuyo? Concede acceso a la App abajo y luego actualiza.",
       "noReposAvailable": "Aún no hay repositorios disponibles. Concede acceso a la App a uno abajo y luego actualiza.",
-      "filterPlaceholder": "Filtrar por propietario/nombre…",
-      "clearFilter": "Borrar filtro",
-      "chooseRepository": "Elige un repositorio",
+      "searchPlaceholder": "Busca repositorios por propietario o nombre…",
+      "searchMinChars": "Escribe al menos {min} carácter para buscar. | Escribe al menos {min} caracteres para buscar.",
+      "noMatches": "No se encontraron repositorios para {query}.",
+      "clearSelection": "Borrar selección",
       "showingCount": "Mostrando {shown} de {total} repositorios.",
       "repoLabel": {
         "private": " (privado)",

package/i18n/locales/fr.json

@@ -1885,9 +1885,10 @@
       "repository": "Dépôt",
       "repositoryHint": "Dépôts auxquels la GitHub App peut accéder. Vous ne voyez pas le vôtre ? Accordez l'accès à l'App ci-dessous, puis actualisez.",
       "noReposAvailable": "Aucun dépôt disponible pour le moment. Accordez l'accès de l'App à l'un d'eux ci-dessous, puis actualisez.",
-      "filterPlaceholder": "Filtrer par propriétaire/nom…",
-      "clearFilter": "Effacer le filtre",
-      "chooseRepository": "Choisir un dépôt",
+      "searchPlaceholder": "Rechercher des dépôts par propriétaire ou nom…",
+      "searchMinChars": "Saisissez au moins {min} caractère pour rechercher. | Saisissez au moins {min} caractères pour rechercher.",
+      "noMatches": "Aucun dépôt trouvé pour {query}.",
+      "clearSelection": "Effacer la sélection",
       "showingCount": "Affichage de {shown} dépôts sur {total}.",
       "repoLabel": {
         "private": " (privé)",

package/i18n/locales/pl.json

@@ -1885,9 +1885,10 @@
       "repository": "Repozytorium",
       "repositoryHint": "Repozytoria, do których aplikacja GitHub ma dostęp. Nie widzisz swojego? Przyznaj aplikacji dostęp poniżej, a następnie odśwież.",
       "noReposAvailable": "Brak dostępnych repozytoriów. Przyznaj aplikacji dostęp do jednego poniżej, a następnie odśwież.",
-      "filterPlaceholder": "Filtruj według właściciela/nazwy…",
-      "clearFilter": "Wyczyść filtr",
-      "chooseRepository": "Wybierz repozytorium",
+      "searchPlaceholder": "Szukaj repozytoriów według właściciela lub nazwy…",
+      "searchMinChars": "Wpisz co najmniej {min} znak, aby wyszukać. | Wpisz co najmniej {min} znaki, aby wyszukać. | Wpisz co najmniej {min} znaków, aby wyszukać.",
+      "noMatches": "Nie znaleziono repozytoriów dla {query}.",
+      "clearSelection": "Wyczyść wybór",
       "showingCount": "Wyświetlanie {shown} z {total} repozytoriów.",
       "repoLabel": {
         "private": " (prywatne)",

package/i18n/locales/uk.json

@@ -1885,9 +1885,10 @@
       "repository": "Репозиторій",
       "repositoryHint": "Репозиторії, до яких застосунок GitHub має доступ. Не бачите свого? Надайте застосунку доступ нижче, а потім оновіть.",
       "noReposAvailable": "Поки що немає доступних репозиторіїв. Надайте застосунку доступ до одного нижче, а потім оновіть.",
-      "filterPlaceholder": "Фільтрувати за власником/назвою…",
-      "clearFilter": "Очистити фільтр",
-      "chooseRepository": "Виберіть репозиторій",
+      "searchPlaceholder": "Шукайте репозиторії за власником або назвою…",
+      "searchMinChars": "Введіть щонайменше {min} символ для пошуку. | Введіть щонайменше {min} символи для пошуку. | Введіть щонайменше {min} символів для пошуку.",
+      "noMatches": "Не знайдено репозиторіїв для {query}.",
+      "clearSelection": "Очистити вибір",
       "showingCount": "Показано {shown} із {total} репозиторіїв.",
       "repoLabel": {
         "private": " (приватний)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.47.10",
+  "version": "0.47.11",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",