feat: sync Frontend with Backend setup (TM Task 4)

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-slot": "^1.2.3",
     "@tailwindcss/vite": "^4.1.13",
     "class-variance-authority": "^0.7.1",
@@ -18,7 +19,6 @@
     "next-themes": "^0.4.6",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "react-router-dom": "^7.9.3",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.13"

src/App.css

@@ -1,72 +1,6 @@
 #root {
   margin: 0 auto;
   text-align: center;
-}
-
-/* Flash animation with more opaque primary color for better text visibility */
-.flash {
-  animation: flash 1.5s ease-out;
-}
-
-@keyframes flash {
-  0% {
-    background-color: color-mix(in srgb, var(--primary) 30%, transparent 70%);
-    transform: scale(1.02);
-    box-shadow: 0 0 0 0 var(--primary);
-  }
-  50% {
-    background-color: color-mix(in srgb, var(--primary) 50%, transparent 50%);
-    transform: scale(1.01);
-    box-shadow: 0 0 8px var(--primary);
-  }
-  100% {
-    background-color: var(--card);
-    transform: scale(1);
-    box-shadow: 0 0 0 0 transparent;
-  }
-}
-
-/* Value increase animation (green) */
-@keyframes value-increase {
-  0% {
-    color: rgb(34, 197, 94);
-    transform: scale(1.05);
-  }
-  50% {
-    color: rgb(22, 163, 74);
-    transform: scale(1.02);
-  }
-  100% {
-    color: rgb(17, 24, 39);
-    transform: scale(1);
-  }
-}
-
-/* Value decrease animation (red) */
-@keyframes value-decrease {
-  0% {
-    color: rgb(239, 68, 68);
-    transform: scale(1.05);
-  }
-  50% {
-    color: rgb(220, 38, 38);
-    transform: scale(1.02);
-  }
-  100% {
-    color: rgb(17, 24, 39);
-    transform: scale(1);
-  }
-}
-
-/* Apply animations to elements */
-[class*="flash-"] {
-  animation: flash 1.5s ease-out;
-}
-
-.animate-value-increase {
-  animation: value-increase 1.5s ease-out;
-}
-
-.animate-value-decrease {
-  animation: value-decrease 1.5s ease-out;
+  padding: 0;
+  width: 100%;
 }

src/App.tsx

@@ -1,8 +1,9 @@
 import "./App.css";
 import { Toaster } from "./components/ui/sonner";
-import WebhookViewer from "./pages/WebhookViewer";
-import { Link, Route, Routes } from "react-router-dom";
-import WebhookSender from "./pages/WebhookSender";
+import WebhookViewer from "./components/common/WebhookViewer";
+import WebhookSender from "./components/common/WebhookSender";
+import { useWebhookConnection } from "./hooks/useWebSocketConnection";
+import { useEffect, useState } from "react";
 
 const toastConfig = {
   position: "bottom-center" as const,
@@ -12,25 +13,37 @@ const toastConfig = {
 };
 
 function App() {
+  const { connectionStatus, lastMetrics, disconnect, connect, sendCommand } =
+    useWebhookConnection();
+
+  const [currentTime, setCurrentTime] = useState(new Date());
+
+  // Update current time every second for live counter
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentTime(new Date());
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
   return (
     <>
-      <div className="flex flex-col items-center justify-center h-screen w-screen">
-        <header className="flex flex-col items-center absolute top-0 m-2 p-4">
-          <h1 className="text-3xl font-bold text-black my-2">
+      <div className="flex flex-col items-center justify-center min-h-screen">
+        <header className="flex items-center justify-center gap-10 w-full p-5 px-10">
+          <h1 className="text-3xl font-bold text-black my-2 text-center">
             Training Month - Hyperloop H11
           </h1>
-
-          <nav className="flex gap-4">
-            <Link to="/viewer">Webhook Viewer</Link>
-            <Link to="/sender">Webhook Sender</Link>
-          </nav>
         </header>
 
-        <main>
-          <Routes>
-            <Route path="/viewer" element={<WebhookViewer />} />
-            <Route path="/sender" element={<WebhookSender />} />
-          </Routes>
+        <main className="w-full flex justify-center flex-1 items-start">
+          <WebhookViewer lastMetrics={lastMetrics} currentTime={currentTime} />
+          <WebhookSender
+            connectionStatus={connectionStatus}
+            disconnect={disconnect}
+            connect={connect}
+            sendCommand={sendCommand}
+          />
         </main>
       </div>