Add colors to method badges, add delete functionality

app/globals.css

@@ -37,7 +37,7 @@ body {
     --sidebar-foreground: 240 5.3% 26.1%;
     --sidebar-primary: 240 5.9% 10%;
     --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent: 240 4.8% 88.9%;
     --sidebar-accent-foreground: 240 5.9% 10%;
     --sidebar-border: 220 13% 91%;
     --sidebar-ring: 217.2 91.2% 59.8%;

app/hook/[id]/page.tsx

@@ -2,6 +2,7 @@
 
 import { AppSidebar } from "@/components/app-sidebar";
 import CopyButton from "@/components/copy-button";
+import RequestMethodBadge from "@/components/request-method-badge";
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
 import {
   Table,
@@ -74,9 +75,7 @@ export default function Page({ params }: { params: Promise<{ id: string }> }) {
                       <TableBody>
                         <TableRow>
                           <TableCell className="w-1/3">
-                            <span className="bg-primary text-primary-foreground p-1 rounded-md text-xs">
-                              {selected.method}
-                            </span>
+                            <RequestMethodBadge method={selected.method} />
                           </TableCell>
                           <TableCell>{selected.path}</TableCell>
                         </TableRow>

components/app-sidebar.tsx

@@ -11,8 +11,9 @@ import {
 } from "@/components/ui/sidebar";
 import { formatTimestamp } from "@/lib/datetime";
 import { LoaderCircle } from "lucide-react";
-import { FaGithub } from "react-icons/fa";
+import { FaGithub, FaTrash } from "react-icons/fa";
 import Link from "next/link";
+import RequestMethodBadge from "./request-method-badge";
 
 export function AppSidebar({
   hookId,
@@ -43,7 +44,9 @@ export function AppSidebar({
         const lines = text.split("\n").filter((line) => line.trim());
         lines.forEach((line) => {
           const req: WebRequest = JSON.parse(line);
-          setTotalRequests(req.serial);
+          setTotalRequests((prev) => {
+            return prev + 1;
+          });
           setRequests((prev) => {
             const newRequests = [req, ...prev];
             return newRequests.slice(0, 100);
@@ -99,24 +102,38 @@ export function AppSidebar({
                 <div
                   key={req.id}
                   onClick={() => onSelected(req)}
-                  className={`flex hover:cursor-pointer flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground ${
+                  className={`group/request flex hover:cursor-pointer flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground ${
                     selected?.id === req.id
                       ? "bg-sidebar-accent text-sidebar-accent-foreground"
                       : ""
                   }`}
                 >
                   <div className="flex w-full items-center gap-2">
-                    <span className="bg-primary text-primary-foreground p-1 rounded-md text-xs">
-                      {req.method}
-                    </span>
+                    <RequestMethodBadge method={req.method} />
                     <span className="border-b p-1 text-sm">
                       {req.path.substring(0, 30)}
                       {req.path.length > 30 ? "..." : ""}
                     </span>
                   </div>
-                  <span className="text-xs">
-                    {formatTimestamp(req.timestamp)}
-                  </span>
+                  <div className="flex justify-between w-full items-center">
+                    <span className="text-xs align-right">
+                      {formatTimestamp(req.timestamp)}
+                    </span>
+                    <span>
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setRequests((prev) =>
+                            prev.filter((r) => r.id !== req.id)
+                          );
+                          setTotalRequests((prev) => prev - 1);
+                        }}
+                        className="text-xs opacity-0 group-hover/request:opacity-100 hover:text-red-500 transition-opacity"
+                      >
+                        <FaTrash className="w-3 h-3" />
+                      </button>
+                    </span>
+                  </div>
                 </div>
               ))}
             </SidebarGroupContent>

components/request-method-badge.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+export default function RequestMethodBadge({ method }: { method: string }) {
+	return (
+		<span
+			className={`inline-flex p-1 rounded-md text-xs ${
+				method === "GET"
+					? "bg-green-500 text-white"
+					: method === "POST"
+					? "bg-yellow-500 text-white"
+					: method === "PUT"
+					? "bg-blue-500 text-white"
+					: method === "DELETE"
+					? "bg-red-600 text-white"
+					: method === "PATCH"
+					? "bg-purple-500 text-white"
+					: method === "HEAD"
+					? "bg-green-700 text-white"
+					: method === "OPTIONS"
+					? "bg-pink-500 text-white"
+					: method === "CONNECT"
+					? "bg-orange-500 text-white"
+					: method === "TRACE"
+					? "bg-indigo-600 text-white"
+					: "bg-gray-500 text-white"
+			}`}
+		>
+			<span>{method}</span>
+		</span>
+	);
+}

package.json

@@ -38,7 +38,7 @@
     "eslint": "^9",
     "eslint-config-next": "15.1.2",
     "postcss": "^8",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^3.4.17",
     "typescript": "^5"
   }
 }