WIP updates

src/components/Drawer.tsx

@@ -0,0 +1,50 @@
+import type React from "react";
+import { useState } from "react";
+
+import { useDevice } from "@app/core/providers/useDevice.js";
+import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
+
+export const Drawer = (): JSX.Element => {
+  const [drawerOpen, setDrawerOpen] = useState(false);
+
+  const tabs = [{ title: "Notifications" }, { title: "Debug" }];
+
+  const { config, moduleConfig, hardware, nodes, waypoints, connection } =
+    useDevice();
+
+  const [serialLogs, setSerialLogs] = useState<string>("");
+
+  connection?.onDeviceDebugLog.subscribe((packet) => {
+    setSerialLogs(serialLogs + new TextDecoder().decode(packet));
+  });
+
+  return (
+    <div className={`shadow-md ${drawerOpen ? "h-40" : "h-8"}`}>
+      <div className="flex h-8 bg-slate-50">
+        <div
+          onClick={() => {
+            setDrawerOpen(!drawerOpen);
+          }}
+          className="ml-auto flex px-2 hover:cursor-pointer hover:bg-slate-100"
+        >
+          <div className="m-auto">
+            {drawerOpen ? (
+              <ChevronDownIcon className="h-4 text-gray-700" />
+            ) : (
+              <ChevronUpIcon className="h-4 text-gray-700" />
+            )}
+          </div>
+        </div>
+      </div>
+      <div className={`${drawerOpen ? "flex" : "hidden"}`}>
+        <div>
+          {serialLogs.split("\n").map((line, index) => (
+            <div key={index} className="text-sm">
+              {line}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};