feat(frontend): unify action badge

frontend/src/components/ActionBadge.tsx

@@ -0,0 +1,15 @@
+import { InterceptionAction } from "../types"
+
+export const ActionBadge = (props: { action: InterceptionAction, class?: string }) => {
+  return <span
+    class={`px-2 py-1 rounded-full text-xs ${
+      props.action === "replace"
+        ? "bg-purple-100 text-purple-800"
+        : props.action === "modify"
+          ? "bg-blue-100 text-blue-800"
+          : "bg-gray-100 text-gray-800"
+    } ${props.class ?? ""}`}
+  >
+    {props.action}
+  </span>
+}

frontend/src/components/RequestDetails.tsx

@@ -1,8 +1,9 @@
 import { type Component, createSignal, For, Show } from "solid-js";
-import type { RequestLog } from "../types";
+import type { InterceptionAction, RequestLog } from "../types";
 import { Button } from "./ui/Button";
 import { CardContent, CardFooter, CardHeader } from "./ui/Card";
 import { Modal, ModalContent } from "./ui/Modal";
+import { ActionBadge } from "./ActionBadge";
 
 interface TreeViewProps {
   data: any;
@@ -56,7 +57,7 @@ const TreeView: Component<TreeViewProps> = (props) => {
 interface DataSectionProps {
   title: string;
   data: any;
-  badge?: string;
+  badge?: InterceptionAction;
 }
 
 const DataSection: Component<DataSectionProps> = (props) => {
@@ -68,9 +69,7 @@ const DataSection: Component<DataSectionProps> = (props) => {
         <h4 class="font-semibold flex items-center">
           {props.title}
           <Show when={props.badge}>
-            <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+            <ActionBadge class="ml-2" action={props.badge!} />
-              {props.badge}
-            </span>
           </Show>
         </h4>
 
@@ -78,8 +77,7 @@ const DataSection: Component<DataSectionProps> = (props) => {
         <div class="flex text-xs rounded-md border border-gray-300 overflow-hidden">
           <button
             type="button"
-            class={`px-2 py-1 ${
+            class={`px-2 py-1 ${viewMode() === "tree"
-              viewMode() === "tree"
                 ? "bg-gray-200 text-gray-900 font-medium"
                 : "bg-white text-gray-600 hover:bg-gray-50"
               }`}
@@ -89,8 +87,7 @@ const DataSection: Component<DataSectionProps> = (props) => {
           </button>
           <button
             type="button"
-            class={`px-2 py-1 border-l border-gray-300 ${
+            class={`px-2 py-1 border-l border-gray-300 ${viewMode() === "raw"
-              viewMode() === "raw"
                 ? "bg-gray-200 text-gray-900 font-medium"
                 : "bg-white text-gray-600 hover:bg-gray-50"
               }`}

frontend/src/components/RulesList.tsx

@@ -6,6 +6,7 @@ import { Card } from "./ui/Card";
 import { Input } from "./ui/Input";
 import { Select } from "./ui/Select";
 import { Textarea } from "./ui/Textarea";
+import { ActionBadge } from "./ActionBadge";
 
 const RulesList: Component = () => {
   const [rules, { refetch }] = createResource(rulesApi.list);
@@ -201,17 +202,7 @@ const RulesList: Component = () => {
                     <tr>
                       <td class="px-6 py-4 text-sm font-medium text-gray-900">{rule.method_name}</td>
                       <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                        <span
+                        <ActionBadge action={rule.action} />
-                          class={`px-2 py-1 rounded-full text-xs ${
-                            rule.action === "replace"
-                              ? "bg-purple-100 text-purple-800"
-                              : rule.action === "modify"
-                                ? "bg-blue-100 text-blue-800"
-                                : "bg-gray-100 text-gray-800"
-                          }`}
-                        >
-                          {rule.action}
-                        </span>
                       </td>
                       <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                         <button