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