fmt: frontend & flake.nix

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>
+  );
+};

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

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>