Add logging with filters

src/App.tsx

@@ -4,23 +4,31 @@ import TemplatePage from './pages/TemplatePage/Template.tsx'
 import Home from './pages/Home/Home.tsx'
 import Robot from './pages/Robot/Robot.tsx';
 import VisProg from "./pages/VisProgPage/VisProg.tsx";
+import {useState} from "react";
+import Logging from "./components/Logging/Logging.tsx";
 
 function App(){
+  const [showLogs, setShowLogs] = useState(false);
+
   return (
-    <div>
+    <>
       <header>
         <Link to={"/"}>Home</Link>
+        <button onClick={() => setShowLogs(!showLogs)}>Toggle Logging</button>
       </header>
-      <main className={"flex-col align-center"}>
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/template" element={<TemplatePage />} />
-          <Route path="/editor" element={<VisProg />} />
-          <Route path="/robot" element={<Robot />} />
-        </Routes>
-      </main>
-    </div>
-  )
+      <div className={"flex-row justify-center flex-1 min-height-0"}>
+        <main className={"flex-col align-center flex-1 scroll-y"}>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/template" element={<TemplatePage />} />
+            <Route path="/editor" element={<VisProg />} />
+            <Route path="/robot" element={<Robot />} />
+          </Routes>
+        </main>
+        {showLogs && <Logging />}
+      </div>
+    </>
+  );
 }
 
 export default App