category filter fix

apps/frontend/src/page/catalog/CatalogIndexPage.vue

@@ -44,7 +44,7 @@
               <div class="flex flex-wrap gap-2 items-center">
                 <a
                   v-if="getLatestStable(releases)?.htmlFolderPath"
-                  :href="getLatestStable(releases).htmlFolderPath"
+                  :href="getLatestStable(releases)?.htmlFolderPath"
                   target="_blank"
                   class="btn-play-sm"
                 >{{ t('catalog.play') }}</a>
@@ -64,7 +64,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, computed, watch, onMounted } from 'vue'
 import { storeToRefs } from 'pinia'
 import { RouterLink } from 'vue-router'
 import { useI18n } from 'vue-i18n'
@@ -74,12 +74,21 @@ import type { SoftwareEntry } from '../../lib/interfaces/software.interface'
 
 const { t } = useI18n()
 
-const filters = ['all', 'released', 'demo', 'development', 'archived']
+const allFilters = ['all', 'released', 'demo', 'development', 'archived']
 const activeFilter = ref('released')
 
 const store = useSoftwareStore()
 const { items: softwares } = storeToRefs(store)
 
+const filters = computed(() => {
+  const present = new Set(softwares.value.map((e: SoftwareEntry) => e.software.status))
+  return allFilters.filter((f) => f === 'all' || present.has(f))
+})
+
+watch(softwares, (items) => {
+  if (items.length && !filters.value.includes(activeFilter.value)) activeFilter.value = 'all'
+})
+
 function getTotalDownloads(name: string): number | null {
   const entry = softwares.value.find((e: SoftwareEntry) => e.software.name === name)
   return entry?.totalDownloads || null