feat: implement command context and provider for command handling; add search button component; enhance network chart with packet loss calculation and display; update translations for new features

src/main.tsx

@@ -7,6 +7,7 @@ import App from "./App"
 import { ThemeColorManager } from "./components/ThemeColorManager"
 import { ThemeProvider } from "./components/ThemeProvider"
 import { MotionProvider } from "./components/motion/motion-provider"
+import { CommandProvider } from "./context/command-provider"
 import { SortProvider } from "./context/sort-provider"
 import { StatusProvider } from "./context/status-provider"
 import { TooltipProvider } from "./context/tooltip-provider"
@@ -22,24 +23,26 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
       <ThemeColorManager />
       <QueryClientProvider client={queryClient}>
         <WebSocketProvider url="/api/v1/ws/server">
-          <StatusProvider>
-            <SortProvider>
-              <TooltipProvider>
-                <App />
-                <Toaster
-                  duration={1000}
-                  toastOptions={{
-                    classNames: {
-                      default: "w-fit rounded-full px-2.5 py-1.5 bg-neutral-100 border border-neutral-200 backdrop-blur-xl shadow-none",
-                    },
-                  }}
-                  position="top-center"
-                  className={"flex items-center justify-center"}
-                />
-                <ReactQueryDevtools />
-              </TooltipProvider>
-            </SortProvider>
-          </StatusProvider>
+          <CommandProvider>
+            <StatusProvider>
+              <SortProvider>
+                <TooltipProvider>
+                  <App />
+                  <Toaster
+                    duration={1000}
+                    toastOptions={{
+                      classNames: {
+                        default: "w-fit rounded-full px-2.5 py-1.5 bg-neutral-100 border border-neutral-200 backdrop-blur-xl shadow-none",
+                      },
+                    }}
+                    position="top-center"
+                    className={"flex items-center justify-center"}
+                  />
+                  <ReactQueryDevtools />
+                </TooltipProvider>
+              </SortProvider>
+            </StatusProvider>
+          </CommandProvider>
         </WebSocketProvider>
       </QueryClientProvider>
     </ThemeProvider>