From 076dae80b72346162f935dd723c90082a6a969ee Mon Sep 17 00:00:00 2001
From: Hunter Thornsberry <hunter@hunterthornsberry.com>
Date: Fri, 23 Aug 2024 18:58:22 -0400
Subject: [PATCH] first working version

---
 src/App.tsx                                   |   6 +-
 .../PageComponents/Messages/ChannelChat.tsx   |   2 +-
 src/components/PageLayout.tsx                 |  64 +++---
 src/components/UI/Footer.tsx                  |  63 +++---
 src/components/UI/Tabs.tsx                    |   2 +-
 src/pages/Dashboard/index.tsx                 | 136 +++++++------
 src/pages/Map.tsx                             | 190 +++++++++---------
 src/pages/Messages.tsx                        | 106 +++++-----
 src/pages/Nodes.tsx                           | 136 +++++++------
 9 files changed, 358 insertions(+), 347 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 8b77213f..782f9e6c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -41,11 +41,13 @@ export const App = (): JSX.Element => {
                     <PageRouter />
                   </div>
                 ) : (
-                  <Dashboard />
+                  <>
+                    <Dashboard />
+                    <Footer />
+                  </>
                 )}
               </div>
             </div>
-            <Footer />
           </div>
         </DeviceWrapper>
       </MapProvider>
diff --git a/src/components/PageComponents/Messages/ChannelChat.tsx b/src/components/PageComponents/Messages/ChannelChat.tsx
index 81ed007f..7507de97 100644
--- a/src/components/PageComponents/Messages/ChannelChat.tsx
+++ b/src/components/PageComponents/Messages/ChannelChat.tsx
@@ -68,7 +68,7 @@ export const ChannelChat = ({
           )}
         </div>
       </div>
-      <div className="p-3">
+      <div className="pl-3 pr-3 pt-3 pb-1">
         <MessageInput to={to} channel={channel} />
       </div>
     </div>
diff --git a/src/components/PageLayout.tsx b/src/components/PageLayout.tsx
index 102a8c87..1a2e4dd7 100644
--- a/src/components/PageLayout.tsx
+++ b/src/components/PageLayout.tsx
@@ -20,42 +20,42 @@ export const PageLayout = ({
 }: PageLayoutProps): JSX.Element => {
   return (
     <>
-    <div className="relative flex h-full w-full flex-col">
-      <div className="flex h-14 shrink-0 border-b-[0.5px] border-slate-300 dark:border-slate-700 md:h-16 md:px-4">
-        <button
-          type="button"
-          className="pl-4 transition-all hover:text-accent md:hidden"
-        >
-          <AlignLeftIcon />
-        </button>
-        <div className="flex flex-1 items-center justify-between px-4 md:px-0">
-          <div className="flex w-full items-center">
-            <span className="w-full text-lg font-medium">{label}</span>
-            <div className="flex justify-end space-x-4">
-              {actions?.map((action, index) => (
-                <button
-                  key={action.icon.name}
-                  type="button"
-                  className="transition-all hover:text-accent"
-                  onClick={action.onClick}
-                >
-                  <action.icon />
-                </button>
-              ))}
+      <div className="relative flex h-full w-full flex-col">
+        <div className="flex h-14 shrink-0 border-b-[0.5px] border-slate-300 dark:border-slate-700 md:h-16 md:px-4">
+          <button
+            type="button"
+            className="pl-4 transition-all hover:text-accent md:hidden"
+          >
+            <AlignLeftIcon />
+          </button>
+          <div className="flex flex-1 items-center justify-between px-4 md:px-0">
+            <div className="flex w-full items-center">
+              <span className="w-full text-lg font-medium">{label}</span>
+              <div className="flex justify-end space-x-4">
+                {actions?.map((action, index) => (
+                  <button
+                    key={action.icon.name}
+                    type="button"
+                    className="transition-all hover:text-accent"
+                    onClick={action.onClick}
+                  >
+                    <action.icon />
+                  </button>
+                ))}
+              </div>
             </div>
           </div>
         </div>
+        <div
+          className={cn(
+            "flex h-full w-full flex-col overflow-y-auto",
+            !noPadding && "pl-3 pr-3 ",
+          )}
+        >
+          {children}
+          <Footer />
+        </div>
       </div>
-      <div
-        className={cn(
-          "flex h-full w-full flex-col overflow-y-auto",
-          !noPadding && "pl-3 pr-3 ",
-        )}
-      >
-        {children}
-        <Footer />
-      </div>
-    </div>
     </>
   );
 };
diff --git a/src/components/UI/Footer.tsx b/src/components/UI/Footer.tsx
index 3c53b896..d0e082e7 100644
--- a/src/components/UI/Footer.tsx
+++ b/src/components/UI/Footer.tsx
@@ -1,38 +1,37 @@
 import React from "react";
 
-export interface FooterProps
-  extends React.HTMLAttributes<HTMLElement> {}
+export interface FooterProps extends React.HTMLAttributes<HTMLElement> {}
 
 const Footer = React.forwardRef<HTMLElement, FooterProps>(
-  ({className, ...props}, ref) => {
-  return (
-    <footer
-      className={`flex flex- justify-center pl-2 pr-2 pb-2 ${className}`}
-      style={{
-        backgroundColor: "var(--backgroundPrimary)",
-        color: "var(--textPrimary)",
-      }}
-    >
-      <p>
-        <a
-          href="https://vercel.com/?utm_source=meshtastic&utm_campaign=oss"
-          className="hover:underline"
-          style={{ color: "var(--link)" }}
-        >
-          Powered by ▲ Vercel
-        </a>{" "}
-        | Meshtastic® is a registered trademark of Meshtastic LLC. |
-        {" "}
-        <a
-          href="https://meshtastic.org/docs/legal"
-          className="hover:underline"
-          style={{ color: "var(--link)" }}
-        >
-          Legal Information
-        </a>
-      </p>
-    </footer>
-  );
-});
+  ({ className, ...props }, ref) => {
+    return (
+      <footer
+        className={`flex flex- justify-center p-2 ${className}`}
+        style={{
+          backgroundColor: "var(--backgroundPrimary)",
+          color: "var(--textPrimary)",
+        }}
+      >
+        <p>
+          <a
+            href="https://vercel.com/?utm_source=meshtastic&utm_campaign=oss"
+            className="hover:underline"
+            style={{ color: "var(--link)" }}
+          >
+            Powered by ▲ Vercel
+          </a>{" "}
+          | Meshtastic® is a registered trademark of Meshtastic LLC. |{" "}
+          <a
+            href="https://meshtastic.org/docs/legal"
+            className="hover:underline"
+            style={{ color: "var(--link)" }}
+          >
+            Legal Information
+          </a>
+        </p>
+      </footer>
+    );
+  },
+);
 
 export default Footer;
diff --git a/src/components/UI/Tabs.tsx b/src/components/UI/Tabs.tsx
index 2d9b3e69..f8c83e6d 100644
--- a/src/components/UI/Tabs.tsx
+++ b/src/components/UI/Tabs.tsx
@@ -12,7 +12,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex flex-wrap items-center rounded-md bg-slate-100 p-1 dark:bg-slate-800",
+      "inline-flex flex-wrap items-center rounded-md bg-slate-100 p-1 mt-2 dark:bg-slate-800",
       className,
     )}
     {...props}
diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
index 5c990e8d..8212fdfd 100644
--- a/src/pages/Dashboard/index.tsx
+++ b/src/pages/Dashboard/index.tsx
@@ -21,79 +21,81 @@ export const Dashboard = () => {
   const devices = useMemo(() => getDevices(), [getDevices]);
 
   return (
-    <div className="flex flex-col gap-3 p-3">
-      <div className="flex items-center justify-between">
-        <div className="space-y-1">
-          <H3>Connected Devices</H3>
-          <Subtle>Manage, connect and disconnect devices</Subtle>
+    <>
+      <div className="flex flex-col gap-3 p-3">
+        <div className="flex items-center justify-between">
+          <div className="space-y-1">
+            <H3>Connected Devices</H3>
+            <Subtle>Manage, connect and disconnect devices</Subtle>
+          </div>
         </div>
-      </div>
 
-      <Separator />
+        <Separator />
 
-      <div className="flex h-[450px] rounded-md border border-dashed border-slate-200 p-3 dark:border-slate-700">
-        {devices.length ? (
-          <ul className="grow divide-y divide-gray-200">
-            {devices.map((device) => {
-              return (
-                <li key={device.id}>
-                  <div className="px-4 py-4 sm:px-6">
-                    <div className="flex items-center justify-between">
-                      <p className="truncate text-sm font-medium text-accent">
-                        {device.nodes.get(device.hardware.myNodeNum)?.user
-                          ?.longName ?? "UNK"}
-                      </p>
-                      <div className="inline-flex w-24 justify-center gap-2 rounded-full bg-slate-100 py-1 text-xs font-semibold text-slate-900 transition-colors hover:bg-slate-700 hover:text-slate-50">
-                        {device.connection?.connType === "ble" && (
-                          <>
-                            <BluetoothIcon size={16} />
-                            BLE
-                          </>
-                        )}
-                        {device.connection?.connType === "serial" && (
-                          <>
-                            <UsbIcon size={16} />
-                            Serial
-                          </>
-                        )}
-                        {device.connection?.connType === "http" && (
-                          <>
-                            <NetworkIcon size={16} />
-                            Network
-                          </>
-                        )}
+        <div className="flex h-[450px] rounded-md border border-dashed border-slate-200 p-3 dark:border-slate-700">
+          {devices.length ? (
+            <ul className="grow divide-y divide-gray-200">
+              {devices.map((device) => {
+                return (
+                  <li key={device.id}>
+                    <div className="px-4 py-4 sm:px-6">
+                      <div className="flex items-center justify-between">
+                        <p className="truncate text-sm font-medium text-accent">
+                          {device.nodes.get(device.hardware.myNodeNum)?.user
+                            ?.longName ?? "UNK"}
+                        </p>
+                        <div className="inline-flex w-24 justify-center gap-2 rounded-full bg-slate-100 py-1 text-xs font-semibold text-slate-900 transition-colors hover:bg-slate-700 hover:text-slate-50">
+                          {device.connection?.connType === "ble" && (
+                            <>
+                              <BluetoothIcon size={16} />
+                              BLE
+                            </>
+                          )}
+                          {device.connection?.connType === "serial" && (
+                            <>
+                              <UsbIcon size={16} />
+                              Serial
+                            </>
+                          )}
+                          {device.connection?.connType === "http" && (
+                            <>
+                              <NetworkIcon size={16} />
+                              Network
+                            </>
+                          )}
+                        </div>
                       </div>
-                    </div>
-                    <div className="mt-2 sm:flex sm:justify-between">
-                      <div className="flex gap-2 text-sm text-gray-500">
-                        <UsersIcon
-                          size={20}
-                          className="text-gray-400"
-                          aria-hidden="true"
-                        />
-                        {device.nodes.size === 0 ? 0 : device.nodes.size - 1}
+                      <div className="mt-2 sm:flex sm:justify-between">
+                        <div className="flex gap-2 text-sm text-gray-500">
+                          <UsersIcon
+                            size={20}
+                            className="text-gray-400"
+                            aria-hidden="true"
+                          />
+                          {device.nodes.size === 0 ? 0 : device.nodes.size - 1}
+                        </div>
                       </div>
                     </div>
-                  </div>
-                </li>
-              );
-            })}
-          </ul>
-        ) : (
-          <div className="m-auto flex flex-col gap-3 text-center">
-            <ListPlusIcon size={48} className="mx-auto text-textSecondary" />
-            <H3>No Devices</H3>
-            <Subtle>Connect atleast one device to get started</Subtle>
-            <Button
-              className="gap-2"
-              onClick={() => setConnectDialogOpen(true)}
-            >
-              <PlusIcon size={16} />
-              New Connection
-            </Button>
-          </div>
-        )}
+                  </li>
+                );
+              })}
+            </ul>
+          ) : (
+            <div className="m-auto flex flex-col gap-3 text-center">
+              <ListPlusIcon size={48} className="mx-auto text-textSecondary" />
+              <H3>No Devices</H3>
+              <Subtle>Connect atleast one device to get started</Subtle>
+              <Button
+                className="gap-2"
+                onClick={() => setConnectDialogOpen(true)}
+              >
+                <PlusIcon size={16} />
+                New Connection
+              </Button>
+            </div>
+          )}
+        </div>
       </div>
-    </div>
+    </>
   );
 };
diff --git a/src/pages/Map.tsx b/src/pages/Map.tsx
index 8c86480e..c0591aa8 100644
--- a/src/pages/Map.tsx
+++ b/src/pages/Map.tsx
@@ -87,108 +87,110 @@ export const MapPage = (): JSX.Element => {
           ))}
         </SidebarSection>
       </Sidebar>
-      <PageLayout
-        label="Map"
-        noPadding={true}
-        actions={[
-          {
-            icon: ZoomInIcon,
-            onClick() {
-              map?.zoomIn();
+      <div className="flex flex-col flex-grow">
+        <PageLayout
+          label="Map"
+          noPadding={true}
+          actions={[
+            {
+              icon: ZoomInIcon,
+              onClick() {
+                map?.zoomIn();
+              },
             },
-          },
-          {
-            icon: ZoomOutIcon,
-            onClick() {
-              map?.zoomOut();
+            {
+              icon: ZoomOutIcon,
+              onClick() {
+                map?.zoomOut();
+              },
             },
-          },
-          {
-            icon: BoxSelectIcon,
-            onClick() {
-              getBBox();
+            {
+              icon: BoxSelectIcon,
+              onClick() {
+                getBBox();
+              },
             },
-          },
-        ]}
-      >
-        <MapGl
-          mapStyle="https://raw.githubusercontent.com/hc-oss/maplibre-gl-styles/master/styles/osm-mapnik/v8/default.json"
-          // onClick={(e) => {
-          //   const waypoint = new Protobuf.Waypoint({
-          //     name: "test",
-          //     description: "test description",
-          //     latitudeI: Math.trunc(e.lngLat.lat * 1e7),
-          //     longitudeI: Math.trunc(e.lngLat.lng * 1e7)
-          //   });
-          //   addWaypoint(waypoint);
-          //   connection?.sendWaypoint(waypoint, "broadcast");
-          // }}
-
-          // @ts-ignore
-          attributionControl={false}
-          renderWorldCopies={false}
-          maxPitch={0}
-          style={{
-            filter: darkMode
-              ? "brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7)"
-              : "",
-          }}
-          dragRotate={false}
-          touchZoomRotate={false}
-          initialViewState={{
-            zoom: 1.6,
-            latitude: 35,
-            longitude: 0,
-          }}
+          ]}
         >
-          {waypoints.map((wp) => (
-            <Marker
-              key={wp.id}
-              longitude={wp.longitudeI / 1e7}
-              latitude={wp.latitudeI / 1e7}
-              anchor="bottom"
-            >
-              <div>
-                <MapPinIcon size={16} />
-              </div>
-            </Marker>
-          ))}
-          {/* {rasterSources.map((source, index) => (
+          <MapGl
+            mapStyle="https://raw.githubusercontent.com/hc-oss/maplibre-gl-styles/master/styles/osm-mapnik/v8/default.json"
+            // onClick={(e) => {
+            //   const waypoint = new Protobuf.Waypoint({
+            //     name: "test",
+            //     description: "test description",
+            //     latitudeI: Math.trunc(e.lngLat.lat * 1e7),
+            //     longitudeI: Math.trunc(e.lngLat.lng * 1e7)
+            //   });
+            //   addWaypoint(waypoint);
+            //   connection?.sendWaypoint(waypoint, "broadcast");
+            // }}
+
+            // @ts-ignore
+            attributionControl={false}
+            renderWorldCopies={false}
+            maxPitch={0}
+            style={{
+              filter: darkMode
+                ? "brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7)"
+                : "",
+            }}
+            dragRotate={false}
+            touchZoomRotate={false}
+            initialViewState={{
+              zoom: 1.6,
+              latitude: 35,
+              longitude: 0,
+            }}
+          >
+            {waypoints.map((wp) => (
+              <Marker
+                key={wp.id}
+                longitude={wp.longitudeI / 1e7}
+                latitude={wp.latitudeI / 1e7}
+                anchor="bottom"
+              >
+                <div>
+                  <MapPinIcon size={16} />
+                </div>
+              </Marker>
+            ))}
+            {/* {rasterSources.map((source, index) => (
             <Source key={index} type="raster" {...source}>
               <Layer type="raster" />
             </Source>
           ))} */}
-          {allNodes.map((node) => {
-            if (node.position?.latitudeI) {
-              return (
-                <Marker
-                  key={node.num}
-                  longitude={node.position.longitudeI / 1e7}
-                  latitude={node.position.latitudeI / 1e7}
-                  style={{ filter: darkMode ? "invert(1)" : "" }}
-                  anchor="bottom"
-                  onClick={() => {
-                    map?.easeTo({
-                      zoom: 12,
-                      center: [
-                        (node.position?.longitudeI ?? 0) / 1e7,
-                        (node.position?.latitudeI ?? 0) / 1e7,
-                      ],
-                    });
-                  }}
-                >
-                  <div className="flex cursor-pointer gap-2 rounded-md border bg-backgroundPrimary p-1.5">
-                    <Hashicon value={node.num.toString()} size={22} />
-                    <Subtle className={cn(zoom < 12 && "hidden")}>
-                      {node.user?.longName}
-                    </Subtle>
-                  </div>
-                </Marker>
-              );
-            }
-          })}
-        </MapGl>
-      </PageLayout>
+            {allNodes.map((node) => {
+              if (node.position?.latitudeI) {
+                return (
+                  <Marker
+                    key={node.num}
+                    longitude={node.position.longitudeI / 1e7}
+                    latitude={node.position.latitudeI / 1e7}
+                    style={{ filter: darkMode ? "invert(1)" : "" }}
+                    anchor="bottom"
+                    onClick={() => {
+                      map?.easeTo({
+                        zoom: 12,
+                        center: [
+                          (node.position?.longitudeI ?? 0) / 1e7,
+                          (node.position?.latitudeI ?? 0) / 1e7,
+                        ],
+                      });
+                    }}
+                  >
+                    <div className="flex cursor-pointer gap-2 rounded-md border bg-backgroundPrimary p-1.5">
+                      <Hashicon value={node.num.toString()} size={22} />
+                      <Subtle className={cn(zoom < 12 && "hidden")}>
+                        {node.user?.longName}
+                      </Subtle>
+                    </div>
+                  </Marker>
+                );
+              }
+            })}
+          </MapGl>
+        </PageLayout>
+      </div>
     </>
   );
 };
diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx
index 4afe1e62..c25f24a7 100644
--- a/src/pages/Messages.tsx
+++ b/src/pages/Messages.tsx
@@ -67,60 +67,62 @@ export const MessagesPage = (): JSX.Element => {
           ))}
         </SidebarSection>
       </Sidebar>
-      <PageLayout
-        label={`Messages: ${
-          chatType === "broadcast" && currentChannel
-            ? getChannelName(currentChannel)
-            : chatType === "direct" && nodes.get(activeChat)
-              ? nodes.get(activeChat)?.user?.longName ?? "Unknown"
-              : "Loading..."
-        }`}
-        actions={
-          chatType === "direct"
-            ? [
-                {
-                  icon: WaypointsIcon,
-                  async onClick() {
-                    const targetNode = nodes.get(activeChat)?.num;
-                    if (targetNode === undefined) return;
-                    toast({
-                      title: "Sending Traceroute, please wait...",
-                    });
-                    await connection?.traceRoute(targetNode).then(() =>
+      <div className="flex flex-col flex-grow">
+        <PageLayout
+          label={`Messages: ${
+            chatType === "broadcast" && currentChannel
+              ? getChannelName(currentChannel)
+              : chatType === "direct" && nodes.get(activeChat)
+                ? nodes.get(activeChat)?.user?.longName ?? "Unknown"
+                : "Loading..."
+          }`}
+          actions={
+            chatType === "direct"
+              ? [
+                  {
+                    icon: WaypointsIcon,
+                    async onClick() {
+                      const targetNode = nodes.get(activeChat)?.num;
+                      if (targetNode === undefined) return;
                       toast({
-                        title: "Traceroute sent.",
-                      }),
-                    );
+                        title: "Sending Traceroute, please wait...",
+                      });
+                      await connection?.traceRoute(targetNode).then(() =>
+                        toast({
+                          title: "Traceroute sent.",
+                        }),
+                      );
+                    },
                   },
-                },
-              ]
-            : []
-        }
-      >
-        {allChannels.map(
-          (channel) =>
-            activeChat === channel.index && (
-              <ChannelChat
-                key={channel.index}
-                to="broadcast"
-                messages={messages.broadcast.get(channel.index)}
-                channel={channel.index}
-              />
-            ),
-        )}
-        {filteredNodes.map(
-          (node) =>
-            activeChat === node.num && (
-              <ChannelChat
-                key={node.num}
-                to={activeChat}
-                messages={messages.direct.get(node.num)}
-                channel={Types.ChannelNumber.Primary}
-                traceroutes={traceroutes.get(node.num)}
-              />
-            ),
-        )}
-      </PageLayout>
+                ]
+              : []
+          }
+        >
+          {allChannels.map(
+            (channel) =>
+              activeChat === channel.index && (
+                <ChannelChat
+                  key={channel.index}
+                  to="broadcast"
+                  messages={messages.broadcast.get(channel.index)}
+                  channel={channel.index}
+                />
+              ),
+          )}
+          {filteredNodes.map(
+            (node) =>
+              activeChat === node.num && (
+                <ChannelChat
+                  key={node.num}
+                  to={activeChat}
+                  messages={messages.direct.get(node.num)}
+                  channel={Types.ChannelNumber.Primary}
+                  traceroutes={traceroutes.get(node.num)}
+                />
+              ),
+          )}
+        </PageLayout>
+      </div>
     </>
   );
 };
diff --git a/src/pages/Nodes.tsx b/src/pages/Nodes.tsx
index 73ba6e46..c7682f59 100644
--- a/src/pages/Nodes.tsx
+++ b/src/pages/Nodes.tsx
@@ -1,3 +1,4 @@
+import Footer from "@app/components/UI/Footer";
 import { useAppStore } from "@app/core/stores/appStore";
 import { Sidebar } from "@components/Sidebar.js";
 import { Button } from "@components/UI/Button.js";
@@ -27,73 +28,76 @@ export const NodesPage = (): JSX.Element => {
   return (
     <>
       <Sidebar />
-      <div className="w-full overflow-y-auto">
-        <Table
-          headings={[
-            { title: "", type: "blank", sortable: false },
-            { title: "Name", type: "normal", sortable: true },
-            { title: "Model", type: "normal", sortable: true },
-            { title: "MAC Address", type: "normal", sortable: true },
-            { title: "Last Heard", type: "normal", sortable: true },
-            { title: "SNR", type: "normal", sortable: true },
-            { title: "Connection", type: "normal", sortable: true },
-            { title: "Remove", type: "normal", sortable: false },
-          ]}
-          rows={filteredNodes.map((node) => [
-            <Hashicon key="icon" size={24} value={node.num.toString()} />,
-            <h1 key="header">
-              {node.user?.longName ??
-                (node.user?.macaddr
-                  ? `Meshtastic ${base16
-                      .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
-                      .toLowerCase()}`
-                  : `UNK: ${node.num}`)}
-            </h1>,
+      <div className="flex flex-col w-full">
+        <div className="overflow-y-auto h-full">
+          <Table
+            headings={[
+              { title: "", type: "blank", sortable: false },
+              { title: "Name", type: "normal", sortable: true },
+              { title: "Model", type: "normal", sortable: true },
+              { title: "MAC Address", type: "normal", sortable: true },
+              { title: "Last Heard", type: "normal", sortable: true },
+              { title: "SNR", type: "normal", sortable: true },
+              { title: "Connection", type: "normal", sortable: true },
+              { title: "Remove", type: "normal", sortable: false },
+            ]}
+            rows={filteredNodes.map((node) => [
+              <Hashicon key="icon" size={24} value={node.num.toString()} />,
+              <h1 key="header">
+                {node.user?.longName ??
+                  (node.user?.macaddr
+                    ? `Meshtastic ${base16
+                        .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
+                        .toLowerCase()}`
+                    : `UNK: ${node.num}`)}
+              </h1>,
 
-            <Mono key="model">
-              {Protobuf.Mesh.HardwareModel[node.user?.hwModel ?? 0]}
-            </Mono>,
-            <Mono key="addr">
-              {base16
-                .stringify(node.user?.macaddr ?? [])
-                .match(/.{1,2}/g)
-                ?.join(":") ?? "UNK"}
-            </Mono>,
-            <Fragment key="lastHeard">
-              {node.lastHeard === 0 ? (
-                <p>Never</p>
-              ) : (
-                <TimeAgo timestamp={node.lastHeard * 1000} />
-              )}
-            </Fragment>,
-            <Mono key="snr">
-              {node.snr}db/
-              {Math.min(Math.max((node.snr + 10) * 5, 0), 100)}%/
-              {(node.snr + 10) * 5}raw
-            </Mono>,
-            <Mono key="hops">
-              {node.lastHeard !== 0
-                ? node.viaMqtt === false && node.hopsAway === 0
-                  ? "Direct"
-                  : `${node.hopsAway.toString()} ${
-                      node.hopsAway > 1 ? "hops" : "hop"
-                    } away`
-                : "-"}
-              {node.viaMqtt === true ? ", via MQTT" : ""}
-            </Mono>,
-            <Button
-              key="remove"
-              variant="destructive"
-              onClick={() => {
-                setNodeNumToBeRemoved(node.num);
-                setDialogOpen("nodeRemoval", true);
-              }}
-            >
-              <TrashIcon />
-              Remove
-            </Button>,
-          ])}
-        />
+              <Mono key="model">
+                {Protobuf.Mesh.HardwareModel[node.user?.hwModel ?? 0]}
+              </Mono>,
+              <Mono key="addr">
+                {base16
+                  .stringify(node.user?.macaddr ?? [])
+                  .match(/.{1,2}/g)
+                  ?.join(":") ?? "UNK"}
+              </Mono>,
+              <Fragment key="lastHeard">
+                {node.lastHeard === 0 ? (
+                  <p>Never</p>
+                ) : (
+                  <TimeAgo timestamp={node.lastHeard * 1000} />
+                )}
+              </Fragment>,
+              <Mono key="snr">
+                {node.snr}db/
+                {Math.min(Math.max((node.snr + 10) * 5, 0), 100)}%/
+                {(node.snr + 10) * 5}raw
+              </Mono>,
+              <Mono key="hops">
+                {node.lastHeard !== 0
+                  ? node.viaMqtt === false && node.hopsAway === 0
+                    ? "Direct"
+                    : `${node.hopsAway.toString()} ${
+                        node.hopsAway > 1 ? "hops" : "hop"
+                      } away`
+                  : "-"}
+                {node.viaMqtt === true ? ", via MQTT" : ""}
+              </Mono>,
+              <Button
+                key="remove"
+                variant="destructive"
+                onClick={() => {
+                  setNodeNumToBeRemoved(node.num);
+                  setDialogOpen("nodeRemoval", true);
+                }}
+              >
+                <TrashIcon />
+                Remove
+              </Button>,
+            ])}
+          />
+        </div>
+        <Footer />
       </div>
     </>
   );