fix: make 'show more' button clickable in vulnerability banner (#389)

Author: sacrosanctic

app/components/PackageVulnerabilityTree.vue

@@ -20,6 +20,7 @@ onMounted(() => fetchVulnTree())
 
 const isExpanded = shallowRef(false)
 const showAllPackages = shallowRef(false)
+const showAllVulnerabilities = shallowRef(false)
 
 const hasVulnerabilities = computed(
   () => vulnTree.value && vulnTree.value.vulnerablePackages.length > 0,
@@ -142,7 +143,7 @@ function getDepthStyle(depth: string | undefined) {
             <!-- Show first 2 vulnerabilities -->
             <ul class="space-y-1 list-none m-0 p-0">
               <li
-                v-for="vuln in pkg.vulnerabilities.slice(0, 2)"
+                v-for="vuln in pkg.vulnerabilities.slice(0, showAllVulnerabilities ? undefined : 2)"
                 :key="vuln.id"
                 class="flex items-center gap-2 text-xs text-fg-muted"
               >
@@ -156,8 +157,15 @@ function getDepthStyle(depth: string | undefined) {
                 </a>
                 <span class="truncate w-0 flex-1">{{ vuln.summary }}</span>
               </li>
-              <li v-if="pkg.vulnerabilities.length > 2" class="text-xs text-fg-subtle">
-                {{ $t('package.vulnerabilities.more', { count: pkg.vulnerabilities.length - 2 }) }}
+              <li
+                v-if="pkg.vulnerabilities.length > 2 && !showAllVulnerabilities"
+                class="text-xs text-fg-subtle"
+              >
+                <button type="button" @click="showAllVulnerabilities = true">
+                  {{
+                    $t('package.vulnerabilities.more', { count: pkg.vulnerabilities.length - 2 })
+                  }}
+                </button>
               </li>
             </ul>
           </li>

shared/utils/severity.ts

@@ -1,11 +1,13 @@
+// @unocss-include
+
 import type { OsvSeverityLevel } from '../types'
 import { SEVERITY_LEVELS } from '../types'
 
 /**
  * Color classes for severity levels (banner style)
  */
 export const SEVERITY_COLORS: Record<OsvSeverityLevel, string> = {
-  critical: 'text-red-300 bg-red-500/15 border-red-500/40',
+  critical: 'text-red-500 bg-red-500/10 border-red-500/50',
   high: 'text-red-400 bg-red-500/10 border-red-500/30',
   moderate: 'text-orange-400 bg-orange-500/10 border-orange-500/30',
   low: 'text-yellow-400 bg-yellow-500/10 border-yellow-500/30',