Skip to content

Commit d0fe87b

Browse files
Flo0806Flo0806
committed
chore: cleanup styles and types
1 parent 7d32afe commit d0fe87b

5 files changed

Lines changed: 57 additions & 63 deletions

File tree

‎app/components/PackageDependencies.vue‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script setup lang="ts">
22
import { SEVERITY_LEVELS } from '~~/shared/types'
3+
import { SEVERITY_COLORS } from '~~/shared/utils/severity'
34
45
const props = defineProps<{
56
packageName: string
@@ -84,15 +85,7 @@ const vulnBreakdownText = computed(() => {
8485
v-if="vulnerabilitySummary"
8586
role="alert"
8687
class="rounded-lg border px-4 py-3 cursor-help"
87-
:class="{
88-
'border-red-500/30 bg-red-500/10 text-red-400':
89-
vulnerabilitySummary.severity === 'critical',
90-
'border-orange-500/30 bg-orange-500/10 text-orange-400':
91-
vulnerabilitySummary.severity === 'high',
92-
'border-yellow-500/30 bg-yellow-500/10 text-yellow-400':
93-
vulnerabilitySummary.severity === 'moderate',
94-
'border-blue-500/30 bg-blue-500/10 text-blue-400': vulnerabilitySummary.severity === 'low',
95-
}"
88+
:class="SEVERITY_COLORS[vulnerabilitySummary.severity]"
9689
:title="`${vulnerabilitySummary.affectedDeps} ${vulnerabilitySummary.affectedDeps === 1 ? 'dependency' : 'dependencies'} affected`"
9790
>
9891
<div class="flex items-center gap-2">

‎app/components/PackageVulnerabilities.vue‎

Lines changed: 6 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script setup lang="ts">
2-
import type { OsvSeverityLevel, PackageVulnerabilities } from '#shared/types'
2+
import type { PackageVulnerabilities } from '#shared/types'
3+
import { SEVERITY_COLORS, SEVERITY_BADGE_COLORS, getHighestSeverity } from '#shared/utils/severity'
34
45
const props = defineProps<{
56
packageName: string
@@ -38,39 +39,11 @@ const { data: vulnData, status } = useLazyAsyncData(
3839
)
3940
4041
const hasVulnerabilities = computed(() => vulnData.value.counts.total > 0)
41-
42-
// Severity color classes for the banner
43-
const severityColors: Record<OsvSeverityLevel, string> = {
44-
critical: 'text-red-400 bg-red-500/10 border-red-500/30',
45-
high: 'text-orange-400 bg-orange-500/10 border-orange-500/30',
46-
moderate: 'text-yellow-400 bg-yellow-500/10 border-yellow-500/30',
47-
low: 'text-blue-400 bg-blue-500/10 border-blue-500/30',
48-
unknown: 'text-fg-muted bg-bg-subtle border-border',
49-
}
50-
51-
// Severity badge styles - greyscale theme matching the design system
52-
const severityBadgeColors: Record<OsvSeverityLevel, string> = {
53-
critical: 'bg-bg-muted border border-border text-fg',
54-
high: 'bg-bg-muted border border-border text-fg-muted',
55-
moderate: 'bg-bg-muted border border-border text-fg-muted',
56-
low: 'bg-bg-muted border border-border text-fg-subtle',
57-
unknown: 'bg-bg-muted border border-border text-fg-subtle',
58-
}
59-
60-
// Expand/collapse state
6142
const isExpanded = shallowRef(false)
43+
const highestSeverity = computed(() => getHighestSeverity(vulnData.value.counts))
6244
63-
// Get highest severity for banner color
64-
const highestSeverity = computed<OsvSeverityLevel>(() => {
65-
const counts = vulnData.value.counts
66-
if (counts.critical > 0) return 'critical'
67-
if (counts.high > 0) return 'high'
68-
if (counts.moderate > 0) return 'moderate'
69-
if (counts.low > 0) return 'low'
70-
return 'unknown'
71-
})
45+
const { $t } = useNuxtApp()
7246
73-
// Summary text for collapsed view
7447
const summaryText = computed(() => {
7548
const counts = vulnData.value.counts
7649
const parts: string[] = []
@@ -90,7 +63,7 @@ const summaryText = computed(() => {
9063
<div
9164
role="alert"
9265
class="rounded-lg border overflow-hidden"
93-
:class="severityColors[highestSeverity]"
66+
:class="SEVERITY_COLORS[highestSeverity]"
9467
>
9568
<!-- Header (always visible, clickable to expand) -->
9669
<button
@@ -147,7 +120,7 @@ const summaryText = computed(() => {
147120
</a>
148121
<span
149122
class="px-2 py-0.5 text-xs font-mono rounded"
150-
:class="severityBadgeColors[vuln.severity]"
123+
:class="SEVERITY_BADGE_COLORS[vuln.severity]"
151124
>
152125
{{ vuln.severity }}
153126
</span>

‎app/composables/useVulnerableDependencies.ts‎

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import type { PackageVulnerabilities, OsvSeverityLevel } from '#shared/types'
1+
import type { PackageVulnerabilities } from '#shared/types'
22
import { maxSatisfying, prerelease } from 'semver'
33
import {
44
fetchCachedPackument,
55
constraintIncludesPrerelease,
66
isNonSemverConstraint,
77
} from './useNpmRegistry'
8+
import { SEVERITY_TEXT_COLORS, getHighestSeverity } from '#shared/utils/severity'
89

910
interface ResolvedPackage {
1011
name: string
@@ -127,27 +128,9 @@ export function getVulnerabilityTooltip(info: PackageVulnerabilities): string {
127128
return `${info.counts.total} ${plural}${breakdown}${idsSuffix}`
128129
}
129130

130-
/**
131-
* Get highest severity from a PackageVulnerabilities
132-
*/
133-
export function getHighestSeverity(info: PackageVulnerabilities): OsvSeverityLevel {
134-
if (info.counts.critical > 0) return 'critical'
135-
if (info.counts.high > 0) return 'high'
136-
if (info.counts.moderate > 0) return 'moderate'
137-
if (info.counts.low > 0) return 'low'
138-
return 'unknown'
139-
}
140-
141131
/**
142132
* Get CSS class for vulnerability severity
143133
*/
144134
export function getVulnerabilitySeverityClass(info: PackageVulnerabilities): string {
145-
const severityClasses: Record<OsvSeverityLevel, string> = {
146-
critical: 'text-red-500',
147-
high: 'text-orange-500',
148-
moderate: 'text-yellow-500',
149-
low: 'text-blue-500',
150-
unknown: 'text-fg-subtle',
151-
}
152-
return severityClasses[getHighestSeverity(info)]
135+
return SEVERITY_TEXT_COLORS[getHighestSeverity(info.counts)]
153136
}

‎server/api/osv/vulnerabilities.post.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ interface VulnerabilitiesResponse {
2222
* POST /api/osv/vulnerabilities
2323
* Body: { packages: [{ name: "lodash", version: "4.17.21" }, ...] }
2424
*
25-
* @returns { results: { "lodash": { count: 2, severity: "high", ... }, ... } }
25+
* @returns { results: { "lodash": { package, version, vulnerabilities, counts }, ... } }
2626
*/
2727
export default defineCachedEventHandler<Promise<VulnerabilitiesResponse>>(
2828
async event => {

‎shared/utils/severity.ts‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import type { OsvSeverityLevel } from '../types'
2+
import { SEVERITY_LEVELS } from '../types'
3+
4+
/**
5+
* Color classes for severity levels (banner style)
6+
*/
7+
export const SEVERITY_COLORS: Record<OsvSeverityLevel, string> = {
8+
critical: 'text-red-400 bg-red-500/10 border-red-500/30',
9+
high: 'text-orange-400 bg-orange-500/10 border-orange-500/30',
10+
moderate: 'text-yellow-400 bg-yellow-500/10 border-yellow-500/30',
11+
low: 'text-blue-400 bg-blue-500/10 border-blue-500/30',
12+
unknown: 'text-fg-muted bg-bg-subtle border-border',
13+
}
14+
15+
/**
16+
* Color classes for inline severity indicators
17+
*/
18+
export const SEVERITY_TEXT_COLORS: Record<OsvSeverityLevel, string> = {
19+
critical: 'text-red-500',
20+
high: 'text-orange-500',
21+
moderate: 'text-yellow-500',
22+
low: 'text-blue-500',
23+
unknown: 'text-fg-subtle',
24+
}
25+
26+
/**
27+
* Badge color classes for severity levels
28+
*/
29+
export const SEVERITY_BADGE_COLORS: Record<OsvSeverityLevel, string> = {
30+
critical: 'bg-bg-muted border border-border text-fg',
31+
high: 'bg-bg-muted border border-border text-fg-muted',
32+
moderate: 'bg-bg-muted border border-border text-fg-muted',
33+
low: 'bg-bg-muted border border-border text-fg-subtle',
34+
unknown: 'bg-bg-muted border border-border text-fg-subtle',
35+
}
36+
37+
/**
38+
* Get highest severity from counts
39+
*/
40+
export function getHighestSeverity(counts: Record<string, number>): OsvSeverityLevel {
41+
for (const s of SEVERITY_LEVELS) {
42+
if ((counts[s] ?? 0) > 0) return s
43+
}
44+
return 'unknown'
45+
}

0 commit comments

Comments
 (0)