Refactor package filtering and display components

Replaced inline package filtering and table logic with dedicated reusable components: `PackageFilters` and `PackageTable`. Introduced a composable (`usePackageFilters`) for managing filtering logic and state, and optimized display logic with a new `usePackageDisplay` composable. This improves maintainability, readability, and separation of concerns.

frontend/src/composables/Packages/usePackageDisplay.ts

@@ -0,0 +1,98 @@
+import { type Package } from '@/types/Package'
+
+export function usePackageDisplay() {
+  const repoName = (repo: string) => repo.split('-')[0]
+  const repoVersion = (repo: string) => repo.split('-')[repo.split('-').length - 1]
+
+  const getVersionColor = (version: string) => {
+    switch (version) {
+      case 'v2':
+        return '#3498db'
+      case 'v3':
+        return '#f39c12'
+      case 'v4':
+        return '#2ecc71'
+      default:
+        return 'grey'
+    }
+  }
+
+  const getStatusColor = (status: Package['status']) => {
+    switch (status) {
+      case 'skipped':
+        return '#373737'
+      case 'queued':
+        return '#5d2f03'
+      case 'latest':
+        return ''
+      case 'failed':
+        return '#4f140f'
+      case 'signing':
+        return '#093372'
+      case 'building':
+        return '#084f46'
+      case 'unknown':
+        return '#191919'
+      default:
+        return ''
+    }
+  }
+
+  const getLto = (lto: Package['lto']) => {
+    switch (lto) {
+      case 'enabled':
+        return {
+          title: 'built with LTO',
+          class: 'fa fa-check fa-lg text-success'
+        }
+      case 'unknown':
+        return {
+          title: 'not built with LTO yet',
+          class: 'fa fa-hourglass-o fa-lg text-grey'
+        }
+      case 'disabled':
+        return {
+          title: 'LTO explicitly disabled',
+          class: 'fa fa-times fa-lg text-red'
+        }
+      case 'auto_disabled':
+        return {
+          title: 'LTO automatically disabled',
+          class: 'fa fa-times-circle-o fa-lg text-amber'
+        }
+      default:
+        return { title: '', class: '' }
+    }
+  }
+
+  const getDs = (ds: Package['debug_symbols']) => {
+    switch (ds) {
+      case 'available':
+        return {
+          title: 'Debug symbols available',
+          class: 'fa fa-check fa-lg text-success'
+        }
+      case 'unknown':
+        return {
+          title: 'Not built yet',
+          class: 'fa fa-hourglass-o fa-lg text-grey'
+        }
+      case 'not_available':
+        return {
+          title: 'Not built with debug symbols',
+          class: 'fa fa-times fa-lg text-red'
+        }
+      default:
+        return { title: '', class: '' }
+    }
+  }
+
+  return {
+    repoName,
+    repoVersion,
+    getVersionColor,
+    getStatusColor,
+    getLto,
+    getDs
+  }
+}