Extract severity color map into shared module

Severity-to-color mapping was duplicated in SeverityBadge, Tickets,
and MyTickets. Consolidated into lib/severityColors.ts with both
solid-bg (for stripes) and badge-style (for badges) variants.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

client/src/components/SeverityBadge.tsx

@@ -1,13 +1,7 @@
-const config: Record<number, { label: string; className: string }> = {
-  1: { label: 'SEV 1', className: 'bg-red-500/20 text-red-400 border-red-500/30' },
-  2: { label: 'SEV 2', className: 'bg-orange-500/20 text-orange-400 border-orange-500/30' },
-  3: { label: 'SEV 3', className: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30' },
-  4: { label: 'SEV 4', className: 'bg-blue-500/20 text-blue-400 border-blue-500/30' },
-  5: { label: 'SEV 5', className: 'bg-gray-500/20 text-gray-400 border-gray-500/30' },
-};
+import { SEVERITY_BADGE } from '../lib/severityColors';
 
 export default function SeverityBadge({ severity }: { severity: number }) {
-  const { label, className } = config[severity] ?? config[5];
+  const { label, className } = SEVERITY_BADGE[severity] ?? SEVERITY_BADGE[5];
   return (
     <span
       className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold border ${className}`}

client/src/lib/severityColors.ts

@@ -0,0 +1,15 @@
+export const SEVERITY_BG: Record<number, string> = {
+  1: 'bg-red-500',
+  2: 'bg-orange-400',
+  3: 'bg-yellow-400',
+  4: 'bg-blue-400',
+  5: 'bg-gray-600',
+};
+
+export const SEVERITY_BADGE: Record<number, { label: string; className: string }> = {
+  1: { label: 'SEV 1', className: 'bg-red-500/20 text-red-400 border-red-500/30' },
+  2: { label: 'SEV 2', className: 'bg-orange-500/20 text-orange-400 border-orange-500/30' },
+  3: { label: 'SEV 3', className: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30' },
+  4: { label: 'SEV 4', className: 'bg-blue-500/20 text-blue-400 border-blue-500/30' },
+  5: { label: 'SEV 5', className: 'bg-gray-500/20 text-gray-400 border-gray-500/30' },
+};

client/src/pages/MyTickets.tsx

@@ -6,6 +6,7 @@ import SeverityBadge from '../components/SeverityBadge';
 import StatusBadge from '../components/StatusBadge';
 import { useTickets } from '../api/queries';
 import { useAuth } from '../contexts/AuthContext';
+import { SEVERITY_BG } from '../lib/severityColors';
 
 export default function MyTickets() {
   const { user } = useAuth();
@@ -42,17 +43,7 @@ export default function MyTickets() {
               className="flex items-center gap-4 bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 hover:border-indigo-500/50 transition-all group"
             >
               <div
-                className={`w-1 self-stretch rounded-full flex-shrink-0 ${
-                  ticket.severity === 1
-                    ? 'bg-red-500'
-                    : ticket.severity === 2
-                      ? 'bg-orange-400'
-                      : ticket.severity === 3
-                        ? 'bg-yellow-400'
-                        : ticket.severity === 4
-                          ? 'bg-blue-400'
-                          : 'bg-gray-600'
-                }`}
+                className={`w-1 self-stretch rounded-full flex-shrink-0 ${SEVERITY_BG[ticket.severity] ?? 'bg-gray-600'}`}
               />
 
               <div className="flex-1 min-w-0">

client/src/pages/Tickets.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { Link, useNavigate, useSearchParams } from 'react-router-dom';
 import { useShortcut } from '../hooks/useShortcuts';
 import { ChevronLeft, ChevronRight, Trash2, Save } from 'lucide-react';
+import { SEVERITY_BG } from '../lib/severityColors';
 import { formatDistanceToNow } from 'date-fns';
 import { toast } from 'sonner';
 import Layout from '../components/Layout';
@@ -56,18 +57,6 @@ const STATUS_TABS: { value: TicketStatus | ''; label: string }[] = [
 const PAGE_SIZE = 25;
 const BULK_LIMIT = 500;
 
-function sevColor(severity: number) {
-  return severity === 1
-    ? 'bg-red-500'
-    : severity === 2
-      ? 'bg-orange-400'
-      : severity === 3
-        ? 'bg-yellow-400'
-        : severity === 4
-          ? 'bg-blue-400'
-          : 'bg-gray-600';
-}
-
 export default function Tickets() {
   const [params, setParams] = useSearchParams();
   const navigate = useNavigate();
@@ -502,7 +491,7 @@ export default function Tickets() {
                   className="cursor-pointer flex-shrink-0"
                 />
                 <div
-                  className={`w-1 self-stretch rounded-full flex-shrink-0 ${sevColor(ticket.severity)}`}
+                  className={`w-1 self-stretch rounded-full flex-shrink-0 ${SEVERITY_BG[ticket.severity] ?? 'bg-gray-600'}`}
                 />
                 <Link
                   to={`/${ticket.displayId}`}