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/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}`}