refactor: simplify API routes and add sniffer status functionality

- Updated API routes to remove redundant prefixes.
- Introduced sniffer status fetching in the backend API.
- Added Sniffing page and integrated it into the routing.
- Created a new hook for backend API interactions.
- Implemented sniffer status type definitions.

frontend/src/api/apiClient.ts

@@ -1,13 +1,14 @@
 // src/apiClient.ts
 import axios from "axios";
 import {
-    BridgeCreateRequest,
-    BridgeInfo,
-    BridgeRemoveRequest,
-    FullState,
-    InterfaceInfo,
-    RouteInfo,
+  BridgeCreateRequest,
+  BridgeInfo,
+  BridgeRemoveRequest,
+  FullState,
+  InterfaceInfo,
+  RouteInfo,
 } from "../types/network";
+import { SnifferStatusResponse } from "../types/sniffer";
 
 const BASE = "http://mitm.lan/api";
 
@@ -17,7 +18,7 @@ export const api = axios.create({
   timeout: 10000,
 });
 
-// 🔹 Normalize FastAPI errors here
+// Normalize FastAPI errors here
 api.interceptors.response.use(
   (response) => response,
   (error) => {
@@ -59,6 +60,12 @@ export const fetchFullState = async (): Promise<FullState> => {
   return res.data;
 };
 
+export const fetchSnifferStatus = async (): Promise<SnifferStatusResponse> => {
+  const res = await api.get<SnifferStatusResponse>("/sniffer/status");
+  return res.data;
+};
+
+
 // Mutations
 export const createBridge = async (req: BridgeCreateRequest) => {
   const res = await api.post("network/bridge/create", req);