reformat of code

frontend/components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     BuildServerStats: typeof import('./src/components/BuildServerStats.vue')['default']
+    FooterContent: typeof import('./src/components/FooterContent.vue')['default']
     MainNav: typeof import('./src/components/MainNav.vue')['default']
     Packages: typeof import('./src/components/Packages.vue')['default']
   }

frontend/src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <v-app>
-    <v-sheet color="transparent" :style="`width: ${contentWidth}px; margin-left: ${offsetLeft}px;`">
+    <v-sheet :style="`width: ${contentWidth}px; margin-left: ${offsetLeft}px;`" color="transparent">
       <main-nav :style="`padding-left: ${offsetLeft}px;`" />
 
       <v-main>
@@ -10,18 +10,18 @@
       </v-main>
     </v-sheet>
 
-    <v-footer color="black" :style="`padding-left: ${offsetLeft}px;`" app>
-      <footer-content/>
+    <v-footer :style="`padding-left: ${offsetLeft}px;`" app color="black">
+      <footer-content />
     </v-footer>
   </v-app>
 </template>
 
-<script setup lang="ts">
-import MainNav from "@/components/MainNav.vue";
-import BuildServerStats from "@/components/BuildServerStats.vue";
-import Packages from "@/components/Packages.vue";
-import {onMounted, ref} from "vue";
-import FooterContent from "@/FooterContent.vue";
+<script lang="ts" setup>
+import MainNav from '@/components/MainNav.vue'
+import BuildServerStats from '@/components/BuildServerStats.vue'
+import Packages from '@/components/Packages.vue'
+import { onMounted, ref } from 'vue'
+import FooterContent from '@/components/FooterContent.vue'
 
 const contentWidth = ref(1440)
 const offsetLeft = ref(0)

frontend/src/FooterContent.vue

@@ -1,49 +0,0 @@
-<template>
-  <v-sheet class="d-flex justify-center" color="transparent" width="100%" style="gap: 50px">
-    <v-list class="d-flex" style="border-radius: 5px" bg-color="black">
-      <v-list-subheader>Stats:</v-list-subheader>
-      <v-list-item title="latest" style="color: #084f46">{{ stats.latest }}</v-list-item>
-      <v-list-item title="queued" style="color: #824204">{{ stats.queued }}</v-list-item>
-      <v-list-item title="skipped" style="color: #4c4c4c">{{ stats.skipped }}</v-list-item>
-      <v-list-item title="failed" style="color: #711712">{{ stats.failed }}</v-list-item>
-    </v-list>
-    <v-list class="d-flex" style="border-radius: 5px" bg-color="black">
-      <v-list-subheader>LTO:</v-list-subheader>
-      <v-list-item title="enabled" style="color: #084f46">{{ stats.lto.enabled }}</v-list-item>
-      <v-list-item title="disabled" style="color: #711712">{{ stats.lto.disabled }}</v-list-item>
-      <v-list-item title="unknown" style="color: #4c4c4c">{{ stats.lto.unknown }}</v-list-item>
-    </v-list>
-  </v-sheet>
-</template>
-
-<script setup lang="ts">
-import {onMounted, ref} from "vue";
-
-const stats = ref({
-  latest: 0,
-  queued: 0,
-  skipped: 0,
-  failed: 0,
-  lto: {
-    enabled: 0,
-    disabled: 0,
-    unknown: 0
-  }
-})
-
-const getStats = () => {
-  fetch('https://api.alhp.dev/stats')
-    .then(response => {
-      if (!response.ok) throw new Error(response.statusText)
-      return response.json()
-    }).then(statistics => {
-      stats.value = statistics
-  }).catch(error => {
-    console.error(error)
-  }).finally(() => {})
-}
-
-onMounted(() => {
-  getStats()
-})
-</script>

frontend/src/components/BuildServerStats.vue

@@ -1,6 +1,10 @@
 <template>
-  <v-sheet color="transparent" class="mt-6">
+  <v-sheet class="mt-6" color="transparent">
     <h5 class="text-h5">Buildserver Stats</h5>
-    <iframe allowtransparency="true" class="w-100 border-0" height="420px" src="https://stats.itsh.dev/public-dashboards/0fb04abb0c5e4b7390cf26a98e6dead1"></iframe>
+    <iframe
+      allowtransparency="true"
+      class="w-100 border-0"
+      height="420px"
+      src="https://stats.itsh.dev/public-dashboards/0fb04abb0c5e4b7390cf26a98e6dead1"></iframe>
   </v-sheet>
 </template>

frontend/src/components/FooterContent.vue

@@ -0,0 +1,52 @@
+<template>
+  <v-sheet class="d-flex justify-center" color="transparent" style="gap: 50px" width="100%">
+    <v-list bg-color="black" class="d-flex" style="border-radius: 5px">
+      <v-list-subheader>Stats:</v-list-subheader>
+      <v-list-item style="color: #084f46" title="latest">{{ stats.latest }}</v-list-item>
+      <v-list-item style="color: #824204" title="queued">{{ stats.queued }}</v-list-item>
+      <v-list-item style="color: #4c4c4c" title="skipped">{{ stats.skipped }}</v-list-item>
+      <v-list-item style="color: #711712" title="failed">{{ stats.failed }}</v-list-item>
+    </v-list>
+    <v-list bg-color="black" class="d-flex" style="border-radius: 5px">
+      <v-list-subheader>LTO:</v-list-subheader>
+      <v-list-item style="color: #084f46" title="enabled">{{ stats.lto.enabled }}</v-list-item>
+      <v-list-item style="color: #711712" title="disabled">{{ stats.lto.disabled }}</v-list-item>
+      <v-list-item style="color: #4c4c4c" title="unknown">{{ stats.lto.unknown }}</v-list-item>
+    </v-list>
+  </v-sheet>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+
+const stats = ref({
+  latest: 0,
+  queued: 0,
+  skipped: 0,
+  failed: 0,
+  lto: {
+    enabled: 0,
+    disabled: 0,
+    unknown: 0
+  }
+})
+
+const getStats = () => {
+  fetch('https://api.alhp.dev/stats')
+    .then((response) => {
+      if (!response.ok) throw new Error(response.statusText)
+      return response.json()
+    })
+    .then((statistics) => {
+      stats.value = statistics
+    })
+    .catch((error) => {
+      console.error(error)
+    })
+    .finally(() => {})
+}
+
+onMounted(() => {
+  getStats()
+})
+</script>

frontend/src/components/MainNav.vue

@@ -1,20 +1,20 @@
-<script setup lang="ts">
-
-</script>
+<script lang="ts" setup></script>
 
 <template>
-<v-app-bar color="primary" flat>
-  <v-app-bar-title style="margin-left: 0 !important">
-    <span style="font-size: 20px">
-      ALHP Status
-      <a class="ms-2" style="color: white; font-size: 25px" href="https://somegit.dev/ALHP/ALHP.GO" target="_blank">
-        <i class="fa fa-gitea" ></i>
-      </a>
-    </span>
-  </v-app-bar-title>
-</v-app-bar>
+  <v-app-bar color="primary" flat>
+    <v-app-bar-title style="margin-left: 0 !important">
+      <span style="font-size: 20px">
+        ALHP Status
+        <a
+          class="ms-2"
+          href="https://somegit.dev/ALHP/ALHP.GO"
+          style="color: white; font-size: 25px"
+          target="_blank">
+          <i class="fa fa-gitea"></i>
+        </a>
+      </span>
+    </v-app-bar-title>
+  </v-app-bar>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

frontend/src/components/Packages.vue

@@ -1,135 +1,169 @@
 <template>
-  <v-sheet color="transparent" class="mt-6" width="100%">
+  <v-sheet class="mt-6" color="transparent" width="100%">
     <h5 class="text-h5 mb-4">Packages</h5>
 
     <v-sheet class="d-flex justify-space-between" color="transparent" width="100%">
-      <v-sheet class="d-flex align-center w-50" style="gap: 15px" color="transparent">
-        <v-text-field color="primary" style="width: 30%; height: 60px" variant="outlined" placeholder="Search Pkgbase" clearable v-model="inputPkgBase"></v-text-field>
+      <v-sheet class="d-flex align-center w-50" color="transparent" style="gap: 15px">
+        <v-text-field
+          v-model="inputPkgBase"
+          clearable
+          color="primary"
+          placeholder="Search Pkgbase"
+          style="width: 30%; height: 60px"
+          variant="outlined"></v-text-field>
 
         <v-select
-          color="primary"
-          style="width: 30%; height: 60px"
-          variant="outlined"
           v-model="selectRepo"
           :items="selectRepoItems"
+          color="primary"
           item-title="title"
           item-value="value"
           return-object
           single-line
-        ></v-select>
+          style="width: 30%; height: 60px"
+          variant="outlined"></v-select>
 
         <v-select
-          color="primary"
-          style="width: 30%; height: 60px"
-          variant="outlined"
           v-model="selectStatus"
           :items="selectStatusItems"
+          color="primary"
           item-title="title"
           item-value="value"
           return-object
           single-line
-        ></v-select>
+          style="width: 30%; height: 60px"
+          variant="outlined"></v-select>
       </v-sheet>
 
-      <v-sheet style="height: 60px; transform: translateX(30px)" class="d-flex align-center w-50 justify-end" color="transparent">
-        <v-pagination style="width: 75%"
+      <v-sheet
+        class="d-flex align-center w-50 justify-end"
+        color="transparent"
+        style="height: 60px; transform: translateX(30px)">
+        <v-pagination
           v-model="page"
-          active-color="primary"
-          variant="text"
-          density="comfortable"
           :length="pagesMax"
-        ></v-pagination>
+          active-color="primary"
+          density="comfortable"
+          style="width: 75%"
+          variant="text"></v-pagination>
       </v-sheet>
     </v-sheet>
 
-    <v-table style="width: 100%; background: transparent" class="mt-6">
+    <v-table class="mt-6" style="width: 100%; background: transparent">
       <thead>
-      <tr>
-        <th scope="col">Repository</th>
-        <th scope="col">Pkgbase</th>
-        <th scope="col">Status</th>
-        <th scope="col">Reason</th>
-        <th scope="col" title="link time optimization&#10;does not guarantee that package is actually built with LTO">
-          LTO
-        </th>
-        <th scope="col" title="Debug-symbols available via debuginfod">DS
-        </th>
-        <th scope="col">Archlinux Version</th>
-        <th scope="col">ALHP Version</th>
-        <th class="text-end" scope="col" style="width: 30px">Info</th>
-      </tr>
+        <tr>
+          <th scope="col">Repository</th>
+          <th scope="col">Pkgbase</th>
+          <th scope="col">Status</th>
+          <th scope="col">Reason</th>
+          <th
+            scope="col"
+            title="link time optimization&#10;does not guarantee that package is actually built with LTO">
+            LTO
+          </th>
+          <th scope="col" title="Debug-symbols available via debuginfod">DS</th>
+          <th scope="col">Archlinux Version</th>
+          <th scope="col">ALHP Version</th>
+          <th class="text-end" scope="col" style="width: 30px">Info</th>
+        </tr>
       </thead>
 
       <tbody id="main-tbody">
-      <tr v-if="noPackagesFound">
-        No Packages found
-      </tr>
-      <template v-else>
-        <tr v-for="(pkg, index) in packages" :key="index" :style="`background-color: ${getStatus(pkg.status)};`">
-          <td class="font-weight-bold">
-            {{ pkg.repo.split('-')[0] }}
-            <v-chip
-              class="ms-2"
-              variant="flat"
-              label
-              density="comfortable"
-              :color="getVersionColor(pkg.repo.split('-')[pkg.repo.split('-').length - 1])">
-              {{ pkg.repo.split('-')[pkg.repo.split('-').length - 1] }}
-            </v-chip>
-          </td>
-          <td>{{ pkg.pkgbase }}</td>
-          <td>{{ pkg.status.toLocaleUpperCase() }}</td>
-          <td>{{ pkg.skip_reason || '' }}</td>
-          <td><i :class="getLto(pkg.lto).class" :title="getLto(pkg.lto).title"></i></td>
-          <td><i :class="getDs(pkg.debug_symbols).class" :title="getDs(pkg.debug_symbols).title"></i></td>
-          <td>{{ pkg.arch_version }}</td>
-          <td>{{ pkg.repo_version }}</td>
-          <td class="d-flex align-center" style="gap: 3px; width: 60px">
-            <a
-              v-if="pkg.status === 'failed'"
-              :href="`https://alhp.dev/logs/${pkg.repo.slice(pkg.repo.indexOf('-') + 1)}/${pkg.pkgbase}.log`"
-              class="text-decoration-none"
-              style="color: darkgrey; transform: translateY(-3px) translateX(-15px); max-width: 15px"
-              target="_blank">
-              <i class="fa fa-file-text fa-lg"></i>
-            </a>
-            <span v-else style="max-width: 15px"></span>
-            <a
-              :href="`https://archlinux.org/packages/?q=${pkg.pkgbase}`"
-              target="_blank"
-              title="ArchWeb"
-              style="color: darkgrey; font-size: 18px; padding: 0; margin: 0; width: 15px; transform: translateX(-15px);"
-              class="text-decoration-none font-weight-bold">
-              AW
-            </a>
-            <span
-              v-if="pkg.build_date && pkg.peak_mem"
-              class="fa fa-info-circle fa-lg"
-              style="color: darkgrey; transform: translateY(-1px); max-width: 15px !important"
-            >
-              <v-tooltip activator="parent" location="start">
-               {{ `Built on ${pkg.build_date}` }}
-               <br>
-               {{ `Peak-Memory: ${pkg.peak_mem}` }}
-              </v-tooltip>
-            </span>
-            <span v-else style="max-width: 15px !important"></span>
-          </td>
+        <tr v-if="noPackagesFound">
+          No Packages found
         </tr>
-      </template>
+        <template v-else>
+          <tr
+            v-for="(pkg, index) in packages"
+            :key="index"
+            :style="`background-color: ${getStatus(pkg.status)};`">
+            <td class="font-weight-bold">
+              {{ pkg.repo.split('-')[0] }}
+              <v-chip
+                :color="getVersionColor(pkg.repo.split('-')[pkg.repo.split('-').length - 1])"
+                class="ms-2"
+                density="comfortable"
+                label
+                variant="flat">
+                {{ pkg.repo.split('-')[pkg.repo.split('-').length - 1] }}
+              </v-chip>
+            </td>
+            <td>{{ pkg.pkgbase }}</td>
+            <td>{{ pkg.status.toLocaleUpperCase() }}</td>
+            <td>{{ pkg.skip_reason || '' }}</td>
+            <td><i :class="getLto(pkg.lto).class" :title="getLto(pkg.lto).title"></i></td>
+            <td>
+              <i
+                :class="getDs(pkg.debug_symbols).class"
+                :title="getDs(pkg.debug_symbols).title"></i>
+            </td>
+            <td>{{ pkg.arch_version }}</td>
+            <td>{{ pkg.repo_version }}</td>
+            <td class="d-flex align-center" style="gap: 3px; width: 60px">
+              <a
+                v-if="pkg.status === 'failed'"
+                :href="`https://alhp.dev/logs/${pkg.repo.slice(pkg.repo.indexOf('-') + 1)}/${pkg.pkgbase}.log`"
+                class="text-decoration-none"
+                style="
+                  color: darkgrey;
+                  transform: translateY(-3px) translateX(-15px);
+                  max-width: 15px;
+                "
+                target="_blank">
+                <i class="fa fa-file-text fa-lg"></i>
+              </a>
+              <span v-else style="max-width: 15px"></span>
+              <a
+                :href="`https://archlinux.org/packages/?q=${pkg.pkgbase}`"
+                class="text-decoration-none font-weight-bold"
+                style="
+                  color: darkgrey;
+                  font-size: 18px;
+                  padding: 0;
+                  margin: 0;
+                  width: 15px;
+                  transform: translateX(-15px);
+                "
+                target="_blank"
+                title="ArchWeb">
+                AW
+              </a>
+              <span
+                v-if="pkg.build_date && pkg.peak_mem"
+                class="fa fa-info-circle fa-lg"
+                style="color: darkgrey; transform: translateY(-1px); max-width: 15px !important">
+                <v-tooltip activator="parent" location="start">
+                  {{ `Built on ${pkg.build_date}` }}
+                  <br />
+                  {{ `Peak-Memory: ${pkg.peak_mem}` }}
+                </v-tooltip>
+              </span>
+              <span v-else style="max-width: 15px !important"></span>
+            </td>
+          </tr>
+        </template>
       </tbody>
     </v-table>
   </v-sheet>
 </template>
 
-<script setup lang="ts">
-import {onMounted, ref, UnwrapRef, watch} from "vue";
+<script lang="ts" setup>
+import { onMounted, ref, UnwrapRef, watch } from 'vue'
 
 interface Package {
   pkgbase: string
   repo: string
   split_packages: Array<string>
-  status: 'latest' | 'failed' | 'build' | 'skipped' | 'delayed' | 'building' | 'signing' | 'unknown' | 'queued'
+  status:
+    | 'latest'
+    | 'failed'
+    | 'build'
+    | 'skipped'
+    | 'delayed'
+    | 'building'
+    | 'signing'
+    | 'unknown'
+    | 'queued'
   skip_reason: string
   lto: 'enabled' | 'unknown' | 'disabled' | 'auto_disabled'
   debug_symbols: 'available' | 'unknown' | 'not_available'
@@ -138,6 +172,7 @@ interface Package {
   build_date: string
   peak_mem: any
 }
+
 interface Packages {
   packages: Array<Package>
   total: number
@@ -145,7 +180,7 @@ interface Packages {
   limit: number
 }
 
-const inputPkgBase = ref("")
+const inputPkgBase = ref('')
 const selectRepo = ref({ title: 'Repository (any)', value: 'any' })
 const selectRepoItems = [
   { title: 'Repository (any)', value: 'any' },
@@ -157,7 +192,7 @@ const selectRepoItems = [
   { title: 'multilib-x86-64-v3', value: 'multilib-x86-64-v3' },
   { title: 'core-x86-64-v4', value: 'core-x86-64-v4' },
   { title: 'extra-x86-64-v4', value: 'extra-x86-64-v4' },
-  { title: 'multilib-x86-64-v4', value: 'multilib-x86-64-v4' },
+  { title: 'multilib-x86-64-v4', value: 'multilib-x86-64-v4' }
 ]
 const selectStatus = ref({ title: 'Status (any)', value: 'any' })
 const selectStatusItems = [
@@ -170,7 +205,7 @@ const selectStatusItems = [
   { title: 'Queued', value: 'queued' },
   { title: 'Building', value: 'building' },
   { title: 'Signing', value: 'signing' },
-  { title: 'Unknown', value: 'unknown' },
+  { title: 'Unknown', value: 'unknown' }
 ]
 
 const page = ref(1)
@@ -180,7 +215,7 @@ const noPackagesFound = ref(false)
 
 const searchPackages = (offset: number) => {
   const params = new URLSearchParams({
-    limit: "50",
+    limit: '50',
     offset: offset.toString()
   })
 
@@ -189,26 +224,29 @@ const searchPackages = (offset: number) => {
   if (selectStatus.value.value !== 'any') params.append('status', selectStatus.value.value)
 
   fetch('https://api.alhp.dev/packages?' + params, {
-    method: 'GET',
-  }).then(response => {
-    if (response.ok) return response.json()
-    if (response.status === 404) {
-      noPackagesFound.value = true
-      pagesMax.value = 1
-    } else {
-      throw new Error(response.statusText)
-    }
-  }).then(json => {
-    if (!json) return
-
-    if (pagesMax.value !== json.total) {
-      pagesMax.value = json.total / 50 + 1
-    }
-
-    packages.value = json.packages
-  }).catch(error => {
-    console.error(error)
+    method: 'GET'
   })
+    .then((response) => {
+      if (response.ok) return response.json()
+      if (response.status === 404) {
+        noPackagesFound.value = true
+        pagesMax.value = 1
+      } else {
+        throw new Error(response.statusText)
+      }
+    })
+    .then((json) => {
+      if (!json) return
+
+      if (pagesMax.value !== json.total) {
+        pagesMax.value = json.total / 50 + 1
+      }
+
+      packages.value = json.packages
+    })
+    .catch((error) => {
+      console.error(error)
+    })
 }
 
 const getVersionColor = (version: string) => {
@@ -227,7 +265,7 @@ const getVersionColor = (version: string) => {
   return color
 }
 
-const getStatus = (status: UnwrapRef<Package["status"]>) => {
+const getStatus = (status: UnwrapRef<Package['status']>) => {
   let color = ''
   switch (status) {
     case 'skipped':
@@ -246,16 +284,16 @@ const getStatus = (status: UnwrapRef<Package["status"]>) => {
       color = '#093372'
       break
     case 'building':
-      color ='#084f46'
+      color = '#084f46'
       break
     case 'unknown':
-      color ='#191919'
+      color = '#191919'
       break
   }
   return color
 }
 
-const getLto = (lto: UnwrapRef<Package["lto"]>) => {
+const getLto = (lto: UnwrapRef<Package['lto']>) => {
   let icon = {
     title: '',
     class: ''
@@ -289,7 +327,7 @@ const getLto = (lto: UnwrapRef<Package["lto"]>) => {
   return icon
 }
 
-const getDs = (ds: UnwrapRef<Package["debug_symbols"]>) => {
+const getDs = (ds: UnwrapRef<Package['debug_symbols']>) => {
   let icon = {
     title: '',
     class: ''
@@ -320,62 +358,87 @@ const getDs = (ds: UnwrapRef<Package["debug_symbols"]>) => {
 const url = new URL(window.location.href)
 
 window.addEventListener('load', () => {
-  inputPkgBase.value = url.searchParams.has('pkgbase') ? (url.searchParams.get('pkgbase') || '').toLowerCase() : ''
+  inputPkgBase.value = url.searchParams.has('pkgbase')
+    ? (url.searchParams.get('pkgbase') || '').toLowerCase()
+    : ''
   selectRepo.value = {
-    value: url.searchParams.has('repo') ? (url.searchParams.get('repo') || '').toLowerCase() : 'any',
-    title: url.searchParams.has('repo') ? (url.searchParams.get('repo') || '').toLowerCase() : 'Repository (any)'
+    value: url.searchParams.has('repo')
+      ? (url.searchParams.get('repo') || '').toLowerCase()
+      : 'any',
+    title: url.searchParams.has('repo')
+      ? (url.searchParams.get('repo') || '').toLowerCase()
+      : 'Repository (any)'
   }
   selectStatus.value = {
-    value: url.searchParams.has('status') ? (url.searchParams.get('status') || '').toLowerCase() : 'any',
-    title: url.searchParams.has('status') ? (url.searchParams.get('status') || '').substring(0, 1).toLocaleUpperCase() + (url.searchParams.get('status') || '').substring(1, url.searchParams.get('status')!!.length - 1).toLocaleUpperCase() : 'Status (any)',
+    value: url.searchParams.has('status')
+      ? (url.searchParams.get('status') || '').toLowerCase()
+      : 'any',
+    title: url.searchParams.has('status')
+      ? (url.searchParams.get('status') || '').substring(0, 1).toLocaleUpperCase() +
+        (url.searchParams.get('status') || '')
+          .substring(1, url.searchParams.get('status')!!.length - 1)
+          .toLocaleUpperCase()
+      : 'Status (any)'
   }
 
   searchPackages(0)
 })
 
-watch(() => page.value, () => {
-  searchPackages(page.value)
-})
+watch(
+  () => page.value,
+  () => {
+    searchPackages(page.value)
+  }
+)
 
 // @ts-ignore
 let delayTimer = null
-watch(() => inputPkgBase.value, () => {
-  // @ts-ignore
-  if (delayTimer) clearTimeout(delayTimer);
-  delayTimer = setTimeout(function() {
-    if (inputPkgBase.value) {
-      url.searchParams.set('pkgbase', inputPkgBase.value.toLowerCase())
-    } else {
-      url.searchParams.delete('pkgbase')
+watch(
+  () => inputPkgBase.value,
+  () => {
+    // @ts-ignore
+    if (delayTimer) clearTimeout(delayTimer)
+    delayTimer = setTimeout(function () {
+      if (inputPkgBase.value) {
+        url.searchParams.set('pkgbase', inputPkgBase.value.toLowerCase())
+      } else {
+        url.searchParams.delete('pkgbase')
+      }
+      window.history.pushState(null, '', url.toString())
+      searchPackages(0)
+    }, 250)
+  }
+)
+
+watch(
+  () => selectRepo.value,
+  () => {
+    if (selectRepo.value) {
+      if (selectRepo.value.value === 'any') {
+        url.searchParams.delete('repo')
+      } else {
+        url.searchParams.set('repo', selectRepo.value.value)
+      }
+      window.history.pushState(null, '', url.toString())
     }
-    window.history.pushState(null, '', url.toString())
     searchPackages(0)
-  }, 250);
-})
-
-watch(() => selectRepo.value, () => {
-  if (selectRepo.value) {
-    if (selectRepo.value.value === 'any') {
-      url.searchParams.delete('repo')
-    } else {
-      url.searchParams.set('repo', selectRepo.value.value)
-    }
-    window.history.pushState(null, '', url.toString())
   }
-  searchPackages(0)
-})
+)
 
-watch(() => selectStatus.value, () => {
-  if (selectStatus.value) {
-    if (selectStatus.value.value === 'any') {
-      url.searchParams.delete('status')
-    } else {
-      url.searchParams.set('status', selectStatus.value.value)
+watch(
+  () => selectStatus.value,
+  () => {
+    if (selectStatus.value) {
+      if (selectStatus.value.value === 'any') {
+        url.searchParams.delete('status')
+      } else {
+        url.searchParams.set('status', selectStatus.value.value)
+      }
+      window.history.pushState(null, '', url.toString())
     }
-    window.history.pushState(null, '', url.toString())
+    searchPackages(0)
   }
-  searchPackages(0)
-})
+)
 
 onMounted(() => {
   searchPackages(0)