feat: Implement change case status controls

frontend/src/components/badges.tsx

@@ -9,24 +9,29 @@ interface StatusBadgeProps
 }
 
 const statusColors = {
-  low: "bg-cyan-100 border-cyan-600 text-cyan-700",
-  medium: "bg-yellow-100 border-yellow-600 text-yellow-700",
-  high: "bg-orange-100 border-orange-600 text-orange-700",
-  critical: "bg-red-100 border-red-400 text-red-700",
+  normal: "bg-blue-100/70 border-blue-600/70 text-blue-700/80",
+  low: "bg-yellow-100/80 border-yellow-600/70 text-yellow-700/80",
+  medium: "bg-orange-100 border-orange-600 text-orange-700",
+  high: "bg-red-100 border-red-400 text-red-700",
+  critical: "bg-fuchsia-100 border-fuchsia-400 text-fuchsia-700",
   malicious: "bg-red-100 border-red-400 text-red-700",
   success: "bg-green-100 border-green-600 text-green-700",
   benign: "bg-green-100 border-green-600 text-green-700",
 }
 
-export function StatusBadge({ status, children }: StatusBadgeProps) {
+const defaultStatusColor = "border-slate-400/70 bg-slate-50 text-slate-600/80"
+
+export function StatusBadge({ status, children, className }: StatusBadgeProps) {
   return (
     <Badge
       variant="outline"
       className={cn(
-        "border-slate-400 bg-slate-50 text-slate-600",
+        defaultStatusColor,
+        "items-center gap-1",
         status &&
           status in statusColors &&
-          statusColors[status as keyof typeof statusColors]
+          statusColors[status as keyof typeof statusColors],
+        className
       )}
     >
       {children}

frontend/src/components/cases/columns.tsx

@@ -82,22 +82,16 @@ export const columns: ColumnDef<Case>[] = [
       <DataTableColumnHeader column={column} title="Priority" />
     ),
     cell: ({ row }) => {
-      const priority = priorities.find(
-        (priority) =>
-          priority.value === row.getValue<Case["priority"]>("priority")
-      )
-
-      if (!priority) {
-        return null
-      }
+      const priority = row.getValue<Case["priority"]>("priority")
+      const { label, icon: Icon } = priorities.find(
+        (p) => p.value === priority
+      )!
 
       return (
-        <div className="flex items-center space-x-2">
-          {priority.icon && (
-            <priority.icon className="h-3 w-3 text-muted-foreground" />
-          )}
-          <span className="text-xs">{priority.label}</span>
-        </div>
+        <StatusBadge status={priority}>
+          <Icon className="stroke-inherit/5 size-3" strokeWidth={3} />
+          <span className="text-xs">{label}</span>
+        </StatusBadge>
       )
     },
     filterFn: (row, id, value) => {
@@ -237,7 +231,7 @@ export const columns: ColumnDef<Case>[] = [
       }
       return (
         <div className="flex space-x-2">
-          <span className="flex max-w-[300px] flex-col space-y-1 text-xs text-muted-foreground">
+          <span className="max-w-[300px] flex-col space-y-1 text-xs text-muted-foreground">
             {tags.length > 0
               ? tags.map(({ tag, value, is_ai_generated }, idx) => (
                   <StatusBadge key={idx}>

frontend/src/components/cases/data/categories.tsx

@@ -1,17 +1,20 @@
 import {
   AlertTriangleIcon,
-  ArrowDownIcon,
-  ArrowRightIcon,
-  ArrowUpIcon,
   CheckCircleIcon,
   CircleIcon,
   FlagTriangleRightIcon,
   InfoIcon,
+  LucideIcon,
   ShieldAlertIcon,
   ShieldOffIcon,
+  SignalHighIcon,
+  SignalIcon,
+  SignalMediumIcon,
   TrafficConeIcon,
 } from "lucide-react"
 
+import { CasePriorityType } from "@/types/schemas"
+
 export const statuses = [
   {
     value: "open",
@@ -41,21 +44,25 @@ export const statuses = [
 ]
 export type Status = (typeof statuses)[number]["value"]
 
-export const priorities = [
+export const priorities: {
+  label: string
+  value: CasePriorityType
+  icon: LucideIcon
+}[] = [
   {
     label: "Low",
     value: "low",
-    icon: ArrowDownIcon,
+    icon: SignalMediumIcon,
   },
   {
     label: "Medium",
     value: "medium",
-    icon: ArrowRightIcon,
+    icon: SignalHighIcon,
   },
   {
     label: "High",
     value: "high",
-    icon: ArrowUpIcon,
+    icon: SignalIcon,
   },
   {
     label: "Critical",