Merge branch 'main' into feat/org-search-url-operators

Author: Moshyfawn

CONTRIBUTING.md

@@ -14,6 +14,43 @@ We want to create 'a fast, modern browser for the npm registry.' This means, amo
 - Layout shift, flakiness, slowness is The Worst. We need to continually iterate to create the most performant, best DX possible.
 - We want to provide information in the best way. We don't want noise, cluttered display, or confusing UI. If in doubt: choose simplicity.
 
+## Table of Contents
+
+- [Getting started](#getting-started)
+  - [Prerequisites](#prerequisites)
+  - [Setup](#setup)
+- [Development workflow](#development-workflow)
+  - [Available commands](#available-commands)
+  - [Project structure](#project-structure)
+  - [Local connector CLI](#local-connector-cli)
+- [Code style](#code-style)
+  - [TypeScript](#typescript)
+  - [Server API patterns](#server-api-patterns)
+  - [Import order](#import-order)
+  - [Naming conventions](#naming-conventions)
+  - [Vue components](#vue-components)
+- [RTL Support](#rtl-support)
+- [Localization (i18n)](#localization-i18n)
+  - [Approach](#approach)
+  - [Adding a new locale](#adding-a-new-locale)
+  - [Update translation](#update-translation)
+  - [Adding translations](#adding-translations)
+  - [Translation key conventions](#translation-key-conventions)
+  - [Using i18n-ally (recommended)](#using-i18n-ally-recommended)
+  - [Formatting numbers and dates](#formatting-numbers-and-dates)
+- [Testing](#testing)
+  - [Unit tests](#unit-tests)
+  - [Component accessibility tests](#component-accessibility-tests)
+  - [End to end tests](#end-to-end-tests)
+- [Submitting changes](#submitting-changes)
+  - [Before submitting](#before-submitting)
+  - [Pull request process](#pull-request-process)
+  - [Commit messages and PR titles](#commit-messages-and-pr-titles)
+- [Pre-commit hooks](#pre-commit-hooks)
+- [Using AI](#using-ai)
+- [Questions](#questions)
+- [License](#license)
+
 ## Getting started
 
 ### Prerequisites
@@ -111,7 +148,7 @@ To help with this, the project uses `oxfmt` to handle formatting via a pre-commi
 
 If you want to get ahead of any formatting issues, you can also run `pnpm lint:fix` before committing to fix formatting across the whole project.
 
-### Typescript
+### TypeScript
 
 - We care about good types – never cast things to `any` 💪
 - Validate rather than just assert

app/components/BaseCard.vue

@@ -15,7 +15,7 @@ defineProps<{
     <!-- Glow effect for exact matches -->
     <div
       v-if="isExactMatch"
-      class="absolute -inset-px rounded-lg bg-gradient-to-r from-accent/0 via-accent/20 to-accent/0 opacity-100 blur-sm -z-1 pointer-events-none motion-reduce:opacity-50"
+      class="absolute -inset-px rounded-lg bg-gradient-to-r from-accent/0 via-accent/0 to-accent/10 opacity-100 blur-sm -z-1 pointer-events-none motion-reduce:opacity-50"
       aria-hidden="true"
     />
     <slot />

app/composables/usePackageComparison.ts

@@ -1,4 +1,10 @@
-import type { FacetValue, ComparisonFacet, ComparisonPackage, Packument } from '#shared/types'
+import type {
+  FacetValue,
+  ComparisonFacet,
+  ComparisonPackage,
+  Packument,
+  VulnerabilityTreeResult,
+} from '#shared/types'
 import { encodePackageName } from '#shared/utils/npm'
 import type { PackageAnalysisResponse } from './usePackageAnalysis'
 import { isBinaryOnlyPackage } from '#shared/utils/binary-detection'
@@ -17,7 +23,7 @@ export interface PackageComparisonData {
   analysis?: PackageAnalysisResponse
   vulnerabilities?: {
     count: number
-    severity: { critical: number; high: number; medium: number; low: number }
+    severity: { critical: number; high: number; moderate: number; low: number }
   }
   metadata?: {
     license?: string
@@ -98,9 +104,9 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
                 `https://api.npmjs.org/downloads/point/last-week/${encodePackageName(name)}`,
               ).catch(() => null),
               $fetch<PackageAnalysisResponse>(`/api/registry/analysis/${name}`).catch(() => null),
-              $fetch<{
-                vulnerabilities: Array<{ severity: string }>
-              }>(`/api/registry/vulnerabilities/${name}`).catch(() => null),
+              $fetch<VulnerabilityTreeResult>(`/api/registry/vulnerabilities/${name}`).catch(
+                () => null,
+              ),
             ])
 
             const versionData = pkgData.versions[latestVersion]
@@ -115,12 +121,14 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
               exports: versionData?.exports,
             })
 
-            // Count vulnerabilities by severity
-            const vulnCounts = { critical: 0, high: 0, medium: 0, low: 0 }
-            const vulnList = vulns?.vulnerabilities ?? []
-            for (const v of vulnList) {
-              const sev = v.severity.toLowerCase() as keyof typeof vulnCounts
-              if (sev in vulnCounts) vulnCounts[sev]++
+            // Vulnerabilities
+            let vulnsTotal: number = 0
+            let vulnsSeverity = { critical: 0, high: 0, moderate: 0, low: 0 }
+
+            if (vulns) {
+              const { total, ...severity } = vulns.totalCounts
+              vulnsTotal = total
+              vulnsSeverity = severity
             }
 
             return {
@@ -134,8 +142,8 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
               installSize: undefined, // Will be filled in second pass
               analysis: analysis ?? undefined,
               vulnerabilities: {
-                count: vulnList.length,
-                severity: vulnCounts,
+                count: vulnsTotal,
+                severity: vulnsSeverity,
               },
               metadata: {
                 license: pkgData.license,