From cae7e87e065af1b54043d34dc7a0f84aaa5b900b Mon Sep 17 00:00:00 2001
From: imxyy_soope_ <imxyy1soope1@gmail.com>
Date: Thu, 18 Dec 2025 17:30:10 +0800
Subject: [PATCH] fmt: frontend & flake.nix

---
 flake.nix                                  | 15 +++++++----
 frontend/src/components/ActionBadge.tsx    | 30 ++++++++++++----------
 frontend/src/components/RequestDetails.tsx | 10 +++++---
 frontend/src/components/RequestLogs.tsx    |  4 +--
 4 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/flake.nix b/flake.nix
index ee7749e..e3b8326 100644
--- a/flake.nix
+++ b/flake.nix
@@ -21,8 +21,6 @@
         {
           default = pkgs.mkShell rec {
             nativeBuildInputs = with pkgs; [
-              gcc
-              nodejs
               (fenix.packages.${system}.complete.withComponents [
                 "cargo"
                 "clippy"
@@ -31,15 +29,22 @@
                 "rustfmt"
                 "rust-analyzer"
               ])
+              gcc
               openssl
               pkg-config
+
+              nodejs
+              biome
+
               sqlite
+              sqlx-cli
+              lazysql
+
               gemini-cli
               claude-code
-              biome
-              sqlx-cli
+
               typos
-              lazysql
+              tokei
             ];
             buildInputs = [ ];
             LD_LIBRARY_PATH = pkgs.lib.makeLibraryPath (nativeBuildInputs ++ buildInputs);
diff --git a/frontend/src/components/ActionBadge.tsx b/frontend/src/components/ActionBadge.tsx
index 4326b61..824c199 100644
--- a/frontend/src/components/ActionBadge.tsx
+++ b/frontend/src/components/ActionBadge.tsx
@@ -1,15 +1,17 @@
-import { InterceptionAction } from "../types"
+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>
-}
+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 f317cce..bc65cad 100644
--- a/frontend/src/components/RequestDetails.tsx
+++ b/frontend/src/components/RequestDetails.tsx
@@ -77,20 +77,22 @@ 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/RequestLogs.tsx b/frontend/src/components/RequestLogs.tsx
index 2f0a66e..4520a45 100644
--- a/frontend/src/components/RequestLogs.tsx
+++ b/frontend/src/components/RequestLogs.tsx
@@ -80,8 +80,8 @@ const RequestLogs: Component = () => {
             Request Logs
             <Show when={!logsData.loading}>
               <span class="text-gray-500 text-base ml-2">
-                (Showing {(page() - 1) * PAGE_SIZE + 1}-{Math.min(page() * PAGE_SIZE, totalLogs())} of{" "}
-                {totalLogs()})
+                (Showing {totalLogs() === 0 ? 0 : (page() - 1) * PAGE_SIZE + 1}-
+                {Math.min(page() * PAGE_SIZE, totalLogs())} of {totalLogs()})
               </span>
             </Show>
           </h2>