From d6320061c20a093448a2acd7bcc6bed029c69a3c Mon Sep 17 00:00:00 2001
From: imxyy_soope_ <imxyy1soope1@gmail.com>
Date: Sun, 14 Dec 2025 12:16:05 +0800
Subject: [PATCH] feat(frontend): unify action badge

---
 frontend/src/components/ActionBadge.tsx    | 15 +++++++++++++++
 frontend/src/components/RequestDetails.tsx | 19 ++++++++-----------
 frontend/src/components/RulesList.tsx      | 13 ++-----------
 3 files changed, 25 insertions(+), 22 deletions(-)
 create mode 100644 frontend/src/components/ActionBadge.tsx

diff --git a/frontend/src/components/ActionBadge.tsx b/frontend/src/components/ActionBadge.tsx
new file mode 100644
index 0000000..4326b61
--- /dev/null
+++ b/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>
+}
diff --git a/frontend/src/components/RequestDetails.tsx b/frontend/src/components/RequestDetails.tsx
index d106554..f317cce 100644
--- a/frontend/src/components/RequestDetails.tsx
+++ b/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">
-              {props.badge}
-            </span>
+            <ActionBadge class="ml-2" action={props.badge!} />
           </Show>
         </h4>
 
@@ -78,22 +77,20 @@ 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 ${
-              viewMode() === "tree"
+            class={`px-2 py-1 ${viewMode() === "tree"
                 ? "bg-gray-200 text-gray-900 font-medium"
                 : "bg-white text-gray-600 hover:bg-gray-50"
-            }`}
+              }`}
             onClick={() => setViewMode("tree")}
           >
             Tree
           </button>
           <button
             type="button"
-            class={`px-2 py-1 border-l border-gray-300 ${
-              viewMode() === "raw"
+            class={`px-2 py-1 border-l border-gray-300 ${viewMode() === "raw"
                 ? "bg-gray-200 text-gray-900 font-medium"
                 : "bg-white text-gray-600 hover:bg-gray-50"
-            }`}
+              }`}
             onClick={() => setViewMode("raw")}
           >
             Raw
diff --git a/frontend/src/components/RulesList.tsx b/frontend/src/components/RulesList.tsx
index 44bed18..da8d8eb 100644
--- a/frontend/src/components/RulesList.tsx
+++ b/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
-                          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>
+                        <ActionBadge action={rule.action} />
                       </td>
                       <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                         <button