From b40671649a7dc2140c497bb6e7bb8399b0ce3e77 Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdf@gmail.com>
Date: Fri, 6 Mar 2026 11:25:34 +0800
Subject: [PATCH 1/7] feat: build a common alert component

---
 app/components/Alert.vue | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 app/components/Alert.vue

diff --git a/app/components/Alert.vue b/app/components/Alert.vue
new file mode 100644
index 0000000000..42f78d6d58
--- /dev/null
+++ b/app/components/Alert.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+interface Props {
+  variant: 'warning' | 'error'
+  icon?: string
+  title?: string
+}
+
+defineProps<Props>()
+
+const variantClasses: Record<Props['variant'], string> = {
+  warning: 'border-amber-400/20 bg-amber-500/8',
+  error: 'border-red-400/20 bg-red-500/8',
+}
+
+const iconClasses: Record<Props['variant'], string> = {
+  warning: 'text-amber-400/80',
+  error: 'text-red-400/80',
+}
+</script>
+
+<template>
+  <div role="alert" class="border rounded-md px-3 py-2.5" :class="variantClasses[variant]">
+    <p v-if="icon || title" class="flex items-center gap-1.5 text-sm font-medium text-fg mb-1">
+      <span
+        v-if="icon"
+        :class="[`i-lucide:${icon}`, 'w-3.5 h-3.5 shrink-0', iconClasses[variant]]"
+        aria-hidden="true"
+      />
+      {{ title }}
+    </p>
+    <div class="text-sm text-fg-muted">
+      <slot />
+    </div>
+  </div>
+</template>

From f7ebde3e6dc8e7a82992e382deb56bb1e560c75c Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdf@gmail.com>
Date: Fri, 6 Mar 2026 12:00:36 +0800
Subject: [PATCH 2/7] refactor: use alert component

---
 app/components/Package/ClaimPackageModal.vue | 61 ++++++--------------
 1 file changed, 19 insertions(+), 42 deletions(-)

diff --git a/app/components/Package/ClaimPackageModal.vue b/app/components/Package/ClaimPackageModal.vue
index 7d061331ba..d7d8b4fbed 100644
--- a/app/components/Package/ClaimPackageModal.vue
+++ b/app/components/Package/ClaimPackageModal.vue
@@ -199,28 +199,26 @@ const previewPackageJson = computed(() => {
       </div>
 
       <!-- Validation errors -->
-      <div
+      <Alert
         v-if="checkResult.validationErrors?.length"
-        class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
-        role="alert"
+        variant="error"
+        :title="$t('claim.modal.invalid_name')"
       >
-        <p class="font-medium mb-1">{{ $t('claim.modal.invalid_name') }}</p>
         <ul class="list-disc list-inside space-y-1">
           <li v-for="err in checkResult.validationErrors" :key="err">{{ err }}</li>
         </ul>
-      </div>
+      </Alert>
 
       <!-- Validation warnings -->
-      <div
+      <Alert
         v-if="checkResult.validationWarnings?.length"
-        class="p-3 text-sm text-yellow-400 bg-yellow-500/10 border border-yellow-500/20 rounded-md"
-        role="alert"
+        variant="warning"
+        :title="$t('common.warnings')"
       >
-        <p class="font-medium mb-1">{{ $t('common.warnings') }}</p>
         <ul class="list-disc list-inside space-y-1">
           <li v-for="warn in checkResult.validationWarnings" :key="warn">{{ warn }}</li>
         </ul>
-      </div>
+      </Alert>
 
       <!-- Availability status -->
       <template v-if="checkResult.valid">
@@ -305,39 +303,23 @@ const previewPackageJson = computed(() => {
       </template>
 
       <!-- Error message -->
-      <div
-        v-if="mergedError"
-        role="alert"
-        class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
-      >
-        {{ mergedError }}
-      </div>
+      <Alert v-if="mergedError" variant="error">{{ mergedError }}</Alert>
 
       <!-- Actions -->
       <div v-if="checkResult.available && checkResult.valid" class="space-y-3">
         <!-- Warning for unscoped packages -->
-        <div
-          v-if="!isScoped"
-          class="p-3 text-sm text-yellow-400 bg-yellow-500/10 border border-yellow-500/20 rounded-md"
-        >
-          <p class="font-medium mb-1">{{ $t('claim.modal.scope_warning_title') }}</p>
-          <p class="text-xs text-yellow-400/80">
-            {{
-              $t('claim.modal.scope_warning_text', {
-                username: npmUser || 'username',
-                name: packageName,
-              })
-            }}
-          </p>
-        </div>
+        <Alert v-if="!isScoped" variant="warning" :title="$t('claim.modal.scope_warning_title')">
+          {{
+            $t('claim.modal.scope_warning_text', {
+              username: npmUser || 'username',
+              name: packageName,
+            })
+          }}
+        </Alert>
 
         <!-- Not connected warning -->
         <div v-if="!isConnected" class="space-y-3">
-          <div
-            class="p-3 text-sm text-yellow-400 bg-yellow-500/10 border border-yellow-500/20 rounded-md"
-          >
-            <p>{{ $t('claim.modal.connect_required') }}</p>
-          </div>
+          <Alert variant="warning">{{ $t('claim.modal.connect_required') }}</Alert>
           <button
             type="button"
             class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-accent/70"
@@ -389,12 +371,7 @@ const previewPackageJson = computed(() => {
 
     <!-- Error state -->
     <div v-else-if="mergedError" class="space-y-4">
-      <div
-        role="alert"
-        class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
-      >
-        {{ mergedError }}
-      </div>
+      <Alert variant="error">{{ mergedError }}</Alert>
       <button
         type="button"
         class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"

From 470daae2cdb73b4aa13384cf7e2eafd34a9139f9 Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdf@gmail.com>
Date: Fri, 6 Mar 2026 13:30:59 +0800
Subject: [PATCH 3/7] feat: tweaks the color pattern of alert component

---
 app/components/Alert.vue | 27 ++++++++++++---------------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/app/components/Alert.vue b/app/components/Alert.vue
index 42f78d6d58..d27993d733 100644
--- a/app/components/Alert.vue
+++ b/app/components/Alert.vue
@@ -1,34 +1,31 @@
 <script setup lang="ts">
 interface Props {
   variant: 'warning' | 'error'
-  icon?: string
   title?: string
 }
 
 defineProps<Props>()
 
-const variantClasses: Record<Props['variant'], string> = {
+const wrapperClasses: Record<Props['variant'], string> = {
   warning: 'border-amber-400/20 bg-amber-500/8',
   error: 'border-red-400/20 bg-red-500/8',
 }
 
-const iconClasses: Record<Props['variant'], string> = {
-  warning: 'text-amber-400/80',
-  error: 'text-red-400/80',
+const titleClasses: Record<Props['variant'], string> = {
+  warning: 'text-amber-800 dark:text-amber-300',
+  error: 'text-red-800 dark:text-red-300',
+}
+
+const bodyClasses: Record<Props['variant'], string> = {
+  warning: 'text-amber-700 dark:text-amber-400',
+  error: 'text-red-700 dark:text-red-400',
 }
 </script>
 
 <template>
-  <div role="alert" class="border rounded-md px-3 py-2.5" :class="variantClasses[variant]">
-    <p v-if="icon || title" class="flex items-center gap-1.5 text-sm font-medium text-fg mb-1">
-      <span
-        v-if="icon"
-        :class="[`i-lucide:${icon}`, 'w-3.5 h-3.5 shrink-0', iconClasses[variant]]"
-        aria-hidden="true"
-      />
-      {{ title }}
-    </p>
-    <div class="text-sm text-fg-muted">
+  <div role="alert" class="border rounded-md px-3 py-2.5" :class="wrapperClasses[variant]">
+    <p v-if="title" class="font-semibold mb-1" :class="titleClasses[variant]">{{ title }}</p>
+    <div class="text-xs" :class="bodyClasses[variant]">
       <slot />
     </div>
   </div>

From cad166f898d8348798361e1a36dc59aec0ac7eb8 Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdf@gmail.com>
Date: Fri, 6 Mar 2026 13:45:53 +0800
Subject: [PATCH 4/7] test: add a11y test for alert component

---
 test/nuxt/a11y.spec.ts | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 2a5c18c742..e4fbf51fd1 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -116,6 +116,7 @@ vi.mock('vue-data-ui/vue-ui-xy', () => {
 // Import components from #components where possible
 // For server/client variants, we need to import directly to test the specific variant
 import {
+  Alert,
   AppFooter,
   AppHeader,
   AppLogo,
@@ -3510,6 +3511,35 @@ describe('component accessibility audits', () => {
       expect(results.violations).toEqual([])
     })
   })
+
+  describe('Alert', () => {
+    it('should have no accessibility violations for warning variant', async () => {
+      const component = await mountSuspended(Alert, {
+        props: { variant: 'warning', title: 'Warning title' },
+        slots: { default: 'This is a warning message.' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations for error variant', async () => {
+      const component = await mountSuspended(Alert, {
+        props: { variant: 'error', title: 'Error title' },
+        slots: { default: 'This is an error message.' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations without title', async () => {
+      const component = await mountSuspended(Alert, {
+        props: { variant: 'warning' },
+        slots: { default: 'This is a warning message.' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 })
 
 function applyTheme(colorMode: string, bgTheme: string | null) {

From 06db88f0a93c272560cc4aebd924443371a33fe1 Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdf@gmail.com>
Date: Fri, 6 Mar 2026 16:46:43 +0800
Subject: [PATCH 5/7] fix: adjust role in Alert component

---
 app/components/Alert.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/components/Alert.vue b/app/components/Alert.vue
index d27993d733..d184cd1615 100644
--- a/app/components/Alert.vue
+++ b/app/components/Alert.vue
@@ -20,10 +20,15 @@ const bodyClasses: Record<Props['variant'], string> = {
   warning: 'text-amber-700 dark:text-amber-400',
   error: 'text-red-700 dark:text-red-400',
 }
+
+const role: Record<Props['variant'], 'status' | 'alert'> = {
+  warning: 'status',
+  error: 'alert',
+}
 </script>
 
 <template>
-  <div role="alert" class="border rounded-md px-3 py-2.5" :class="wrapperClasses[variant]">
+  <div :role="role[variant]" class="border rounded-md px-3 py-2.5" :class="wrapperClasses[variant]">
     <p v-if="title" class="font-semibold mb-1" :class="titleClasses[variant]">{{ title }}</p>
     <div class="text-xs" :class="bodyClasses[variant]">
       <slot />

From d89b38b7426cdce11391e9623dc80386a37e9d00 Mon Sep 17 00:00:00 2001
From: ShroXd <ShroXdf@gmail.com>
Date: Fri, 6 Mar 2026 16:54:04 +0800
Subject: [PATCH 6/7] test: cover theme-specific contrast in a11y test

---
 test/nuxt/a11y.spec.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index e4fbf51fd1..e6f33134df 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -3586,6 +3586,22 @@ describe('background theme accessibility', () => {
   }
 
   const components = [
+    {
+      name: 'AlertWarning',
+      mount: () =>
+        mountSuspended(Alert, {
+          props: { variant: 'warning', title: 'Warning title' },
+          slots: { default: '<p>Warning body</p>' },
+        }),
+    },
+    {
+      name: 'AlertError',
+      mount: () =>
+        mountSuspended(Alert, {
+          props: { variant: 'error', title: 'Error title' },
+          slots: { default: '<p>Error body</p>' },
+        }),
+    },
     { name: 'AppHeader', mount: () => mountSuspended(AppHeader) },
     { name: 'AppFooter', mount: () => mountSuspended(AppFooter) },
     { name: 'HeaderSearchBox', mount: () => mountSuspended(HeaderSearchBox) },

From 23b187b2d1f5fbaa5dd31a949a5d523dc8eab42d Mon Sep 17 00:00:00 2001
From: "Willow (GHOST)" <git@willow.sh>
Date: Tue, 10 Mar 2026 06:24:10 +0000
Subject: [PATCH 7/7] refactor: use screaming snake case for constants

---
 app/components/Alert.vue | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/app/components/Alert.vue b/app/components/Alert.vue
index d184cd1615..19467a3727 100644
--- a/app/components/Alert.vue
+++ b/app/components/Alert.vue
@@ -6,31 +6,35 @@ interface Props {
 
 defineProps<Props>()
 
-const wrapperClasses: Record<Props['variant'], string> = {
+const WRAPPER_CLASSES: Record<Props['variant'], string> = {
   warning: 'border-amber-400/20 bg-amber-500/8',
   error: 'border-red-400/20 bg-red-500/8',
 }
 
-const titleClasses: Record<Props['variant'], string> = {
+const TITLE_CLASSES: Record<Props['variant'], string> = {
   warning: 'text-amber-800 dark:text-amber-300',
   error: 'text-red-800 dark:text-red-300',
 }
 
-const bodyClasses: Record<Props['variant'], string> = {
+const BODY_CLASSES: Record<Props['variant'], string> = {
   warning: 'text-amber-700 dark:text-amber-400',
   error: 'text-red-700 dark:text-red-400',
 }
 
-const role: Record<Props['variant'], 'status' | 'alert'> = {
+const ROLES: Record<Props['variant'], 'status' | 'alert'> = {
   warning: 'status',
   error: 'alert',
 }
 </script>
 
 <template>
-  <div :role="role[variant]" class="border rounded-md px-3 py-2.5" :class="wrapperClasses[variant]">
-    <p v-if="title" class="font-semibold mb-1" :class="titleClasses[variant]">{{ title }}</p>
-    <div class="text-xs" :class="bodyClasses[variant]">
+  <div
+    :role="ROLES[variant]"
+    class="border rounded-md px-3 py-2.5"
+    :class="WRAPPER_CLASSES[variant]"
+  >
+    <p v-if="title" class="font-semibold mb-1" :class="TITLE_CLASSES[variant]">{{ title }}</p>
+    <div class="text-xs" :class="BODY_CLASSES[variant]">
       <slot />
     </div>
   </div>