Overhaul (#83)

* WIP Layout Refactor

* New Connection Dialog

* WIP form overhaul

* Fix remaining config pages

src/pages/Channels.tsx

@@ -1,39 +1,82 @@
-import { TabbedContent, TabType } from "@components/generic/TabbedContent";
+import { Sidebar } from "@app/components/Sidebar.js";
+import { PageLayout } from "@app/components/Topbar.js";
+import { cn } from "@app/core/utils/cn.js";
 import { Channel } from "@components/PageComponents/Channel.js";
-import { useDevice } from "@core/providers/useDevice.js";
-import {
-  ArrowDownOnSquareStackIcon,
-  QrCodeIcon
-} from "@heroicons/react/24/outline";
-import { Protobuf } from "@meshtastic/meshtasticjs";
+import { useDevice } from "@core/stores/deviceStore.js";
+import { QrCodeIcon, ImportIcon } from "lucide-react";
+import { Protobuf, Types } from "@meshtastic/meshtasticjs";
+import { SidebarSection } from "@app/components/UI/Sidebar/SidebarSection.js";
+import { useState } from "react";
+import { Button } from "@app/components/UI/Button.js";
+import { SidebarButton } from "@app/components/UI/Sidebar/sidebarButton.js";
+
+export const getChannelName = (channel: Protobuf.Channel) =>
+  channel.settings?.name.length
+    ? channel.settings?.name
+    : channel.index === 0
+    ? "Primary"
+    : `Ch ${channel.index}`;
 
 export const ChannelsPage = (): JSX.Element => {
   const { channels, setDialogOpen } = useDevice();
-
-  const tabs: TabType[] = channels.map((channel) => {
-    return {
-      label: channel.config.settings?.name.length
-        ? channel.config.settings.name
-        : channel.config.role === Protobuf.Channel_Role.PRIMARY
-        ? "Primary"
-        : `Channel: ${channel.config.index}`,
-      element: () => <Channel channel={channel.config} />
-    };
-  });
+  const [activeChannel, setActiveChannel] = useState<Types.ChannelNumber>(
+    Types.ChannelNumber.PRIMARY
+  );
 
   return (
-    <TabbedContent
-      tabs={tabs}
-      actions={[
-        {
-          icon: <ArrowDownOnSquareStackIcon className="w-4" />,
-          action: () => setDialogOpen("import", true)
-        },
-        {
-          icon: <QrCodeIcon className="w-4" />,
-          action: () => setDialogOpen("QR", true)
-        }
-      ]}
-    />
+    <>
+      <Sidebar>
+        <SidebarSection label="Channels">
+          {channels.map((channel) => (
+            <SidebarButton
+              label={getChannelName(channel.config)}
+              key={channel.config.index}
+              active={channel.config.index === activeChannel}
+              element={
+                <span
+                  className={cn(
+                    "h-3 w-3 rounded-full",
+                    channel.config.role === Protobuf.Channel_Role.DISABLED
+                      ? "bg-gray-500"
+                      : "bg-green-500"
+                  )}
+                />
+              }
+              onClick={() => setActiveChannel(channel.config.index)}
+            />
+          ))}
+        </SidebarSection>
+      </Sidebar>
+      <PageLayout
+        label={`Channel: ${
+          channels[activeChannel]
+            ? getChannelName(channels[activeChannel].config)
+            : "Loading..."
+        }`}
+        actions={[
+          {
+            icon: ImportIcon,
+            onClick() {
+              console.log("fired");
+
+              setDialogOpen("import", true);
+            }
+          },
+          {
+            icon: QrCodeIcon,
+            onClick() {
+              setDialogOpen("QR", true);
+            }
+          }
+        ]}
+      >
+        {channels.map(
+          (channel) =>
+            channel.config.index === activeChannel && (
+              <Channel key={channel.config.index} channel={channel.config} />
+            )
+        )}
+      </PageLayout>
+    </>
   );
 };

src/pages/Config/AppConfig.tsx

@@ -1,41 +0,0 @@
-import { Fragment } from "react";
-import { Map } from "@components/PageComponents/AppConfig/Map.js";
-import { Tab } from "@headlessui/react";
-
-export const AppConfig = (): JSX.Element => {
-  const configSections = [
-    {
-      label: "Map",
-      element: Map
-    }
-  ];
-
-  return (
-    <Tab.Group as="div" className="flex w-full gap-3">
-      <Tab.List className="flex w-44 flex-col gap-1">
-        {configSections.map((Config, index) => (
-          <Tab key={index} as={Fragment}>
-            {({ selected }) => (
-              <div
-                className={`flex cursor-pointer items-center rounded-md px-3 py-2 text-sm font-medium ${
-                  selected
-                    ? "bg-gray-100 text-gray-900"
-                    : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
-                }`}
-              >
-                {Config.label}
-              </div>
-            )}
-          </Tab>
-        ))}
-      </Tab.List>
-      <Tab.Panels as={Fragment}>
-        {configSections.map((Config, index) => (
-          <Tab.Panel key={index} as={Fragment}>
-            <Config.element />
-          </Tab.Panel>
-        ))}
-      </Tab.Panels>
-    </Tab.Group>
-  );
-};

src/pages/Config/DeviceConfig.tsx

@@ -6,26 +6,22 @@ import { Display } from "@components/PageComponents/Config/Display.js";
 import { LoRa } from "@components/PageComponents/Config/LoRa.js";
 import { Position } from "@components/PageComponents/Config/Position.js";
 import { Power } from "@components/PageComponents/Config/Power.js";
-import { User } from "@components/PageComponents/Config/User.js";
-import { useDevice } from "@core/providers/useDevice.js";
-import { Tab } from "@headlessui/react";
-import { ChevronRightIcon, HomeIcon } from "@heroicons/react/24/outline";
-import { Button } from "@components/form/Button.js";
-import { CheckIcon } from "@primer/octicons-react";
-import { NavBar } from "@app/Nav/NavBar.js";
-import { VerticalTabbedContent } from "@app/components/generic/VerticalTabbedContent.js";
+import { useDevice } from "@core/stores/deviceStore.js";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+} from "@components/UI/Tabs.js";
 
 export const DeviceConfig = (): JSX.Element => {
-  const { hardware, workingConfig, connection } = useDevice();
+  const { hardware } = useDevice();
 
   const tabs = [
-    {
-      label: "User",
-      element: User
-    },
     {
       label: "Device",
-      element: Device
+      element: Device,
+      count: 0
     },
     {
       label: "Position",
@@ -55,23 +51,23 @@ export const DeviceConfig = (): JSX.Element => {
   ];
 
   return (
-    <div className="flex flex-grow flex-col gap-2">
-      <NavBar
-        breadcrumb={["Config"]}
-        actions={[
-          {
-            label: "Apply & Reboot",
-            async onClick() {
-              workingConfig.map(async (config) => {
-                await connection?.setConfig(config);
-              });
-              await connection?.commitEditSettings();
-            }
-          }
-        ]}
-      />
-
-      <VerticalTabbedContent tabs={tabs} />
-    </div>
+    <Tabs defaultValue="Device">
+      <TabsList>
+        {tabs.map((tab) => (
+          <TabsTrigger
+            key={tab.label}
+            value={tab.label}
+            disabled={tab.disabled}
+          >
+            {tab.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      {tabs.map((tab) => (
+        <TabsContent key={tab.label} value={tab.label}>
+          <tab.element />
+        </TabsContent>
+      ))}
+    </Tabs>
   );
 };

src/pages/Config/ModuleConfig.tsx

@@ -7,9 +7,13 @@ import { RangeTest } from "@components/PageComponents/ModuleConfig/RangeTest.js"
 import { Serial } from "@components/PageComponents/ModuleConfig/Serial.js";
 import { StoreForward } from "@components/PageComponents/ModuleConfig/StoreForward.js";
 import { Telemetry } from "@components/PageComponents/ModuleConfig/Telemetry.js";
-import { useDevice } from "@app/core/providers/useDevice.js";
-import { NavBar } from "@app/Nav/NavBar.js";
-import { VerticalTabbedContent } from "@app/components/generic/VerticalTabbedContent.js";
+import { useDevice } from "@app/core/stores/deviceStore.js";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+} from "@components/UI/Tabs.js";
 
 export const ModuleConfig = (): JSX.Element => {
   const { workingModuleConfig, connection } = useDevice();
@@ -24,11 +28,11 @@ export const ModuleConfig = (): JSX.Element => {
       element: Serial
     },
     {
-      label: "External Notification",
+      label: "Ext Notif",
       element: ExternalNotification
     },
     {
-      label: "Store & Forward",
+      label: "S&F",
       element: StoreForward
     },
     {
@@ -40,33 +44,29 @@ export const ModuleConfig = (): JSX.Element => {
       element: Telemetry
     },
     {
-      label: "Canned Message",
+      label: "Canned",
       element: CannedMessage
     },
     {
-      label: "Audio Config",
+      label: "Audio",
       element: Audio
     }
   ];
 
   return (
-    <div className="flex flex-grow flex-col gap-2">
-      <NavBar
-        breadcrumb={["Module Config"]}
-        actions={[
-          {
-            label: "Apply & Reboot",
-            async onClick() {
-              workingModuleConfig.map(async (moduleConfig) => {
-                await connection?.setModuleConfig(moduleConfig);
-              });
-              await connection?.commitEditSettings();
-            }
-          }
-        ]}
-      />
-
-      <VerticalTabbedContent tabs={tabs} />
-    </div>
+    <Tabs defaultValue="MQTT">
+      <TabsList>
+        {tabs.map((tab) => (
+          <TabsTrigger key={tab.label} value={tab.label}>
+            {tab.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      {tabs.map((tab) => (
+        <TabsContent key={tab.label} value={tab.label}>
+          <tab.element />
+        </TabsContent>
+      ))}
+    </Tabs>
   );
 };

src/pages/Config/index.tsx

@@ -1,34 +1,69 @@
-import { TabbedContent, TabType } from "@components/generic/TabbedContent";
-import { useDevice } from "@core/providers/useDevice.js";
-import {
-  Cog8ToothIcon,
-  CubeTransparentIcon,
-  WindowIcon
-} from "@heroicons/react/24/outline";
-import { AppConfig } from "@pages/Config/AppConfig.js";
+import { Sidebar } from "@app/components/Sidebar.js";
+import { SettingsIcon, BoxesIcon, SaveIcon } from "lucide-react";
 import { DeviceConfig } from "@pages/Config/DeviceConfig.js";
 import { ModuleConfig } from "@pages/Config/ModuleConfig.js";
+import { PageLayout } from "@app/components/Topbar.js";
+import { SidebarSection } from "@app/components/UI/Sidebar/SidebarSection.js";
+import { useState } from "react";
+import { useDevice } from "@app/core/stores/deviceStore.js";
+import { Button } from "@app/components/UI/Button.js";
+import { SidebarButton } from "@app/components/UI/Sidebar/sidebarButton.js";
 
 export const ConfigPage = (): JSX.Element => {
-  const { connection, pendingSettingsChanges } = useDevice();
+  const { workingConfig, workingModuleConfig, connection } = useDevice();
+  const [activeConfigSection, setActiveConfigSection] = useState<
+    "device" | "module"
+  >("device");
 
-  const tabs: TabType[] = [
-    {
-      label: "Device Config",
-      icon: <Cog8ToothIcon className="h-4" />,
-      element: DeviceConfig
-    },
-    {
-      label: "Module Config",
-      icon: <CubeTransparentIcon className="h-4" />,
-      element: ModuleConfig
-    },
-    {
-      label: "App Config",
-      icon: <WindowIcon className="h-4" />,
-      element: AppConfig
-    }
-  ];
+  return (
+    <>
+      <Sidebar>
+        <SidebarSection label="Config Sections">
+          <SidebarButton
+            label="Device Config"
+            active={activeConfigSection === "device"}
+            onClick={() => setActiveConfigSection("device")}
+            icon={SettingsIcon}
+          />
+          <SidebarButton
+            label="Module Config"
+            active={activeConfigSection === "module"}
+            onClick={() => setActiveConfigSection("module")}
+            icon={BoxesIcon}
+          />
+        </SidebarSection>
+      </Sidebar>
+      <PageLayout
+        label={
+          activeConfigSection === "device" ? "Device Config" : "Module Config"
+        }
+        actions={[
+          {
+            icon: SaveIcon,
+            async onClick() {
+              if (activeConfigSection === "device") {
+                workingConfig.map(
+                  async (config) => await connection?.setConfig(config)
+                );
+              } else {
+                workingModuleConfig.map(
+                  async (config) => await connection?.setModuleConfig(config)
+                );
+              }
 
-  return <TabbedContent tabs={tabs} />;
+              await connection?.commitEditSettings();
+            }
+          }
+        ]}
+      >
+        <div className="p-3">
+          {activeConfigSection === "device" ? (
+            <DeviceConfig />
+          ) : (
+            <ModuleConfig />
+          )}
+        </div>
+      </PageLayout>
+    </>
+  );
 };

src/pages/Map.tsx

@@ -1,64 +1,135 @@
 import maplibregl from "maplibre-gl";
-import { Layer, Map, Marker, Source } from "react-map-gl";
-import { MapControlls } from "@components/PageComponents/Map/MapControlls.js";
+import { Layer, Map, Marker, Source, useMap } from "react-map-gl";
 import { useAppStore } from "@core/stores/appStore.js";
-import { useDevice } from "@core/providers/useDevice.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
-import { MapPinIcon } from "@heroicons/react/24/outline";
+import { Sidebar } from "@app/components/Sidebar.js";
+import { PageLayout } from "@app/components/Topbar.js";
+import {
+  ZoomInIcon,
+  ZoomOutIcon,
+  BoxSelectIcon,
+  MapPinIcon,
+  EditIcon,
+  PlusIcon
+} from "lucide-react";
+import { bbox, lineString } from "@turf/turf";
+import { SidebarSection } from "@app/components/UI/Sidebar/SidebarSection.js";
+import { Button } from "@app/components/UI/Button.js";
+import { SidebarButton } from "@app/components/UI/Sidebar/sidebarButton.js";
 
 export const MapPage = (): JSX.Element => {
   const { nodes, waypoints } = useDevice();
   const { rasterSources } = useAppStore();
+  const { default: map } = useMap();
+
+  const getBBox = () => {
+    const nodesWithPosition = nodes.filter((n) => n.data.position?.latitudeI);
+    if (!nodesWithPosition.length) return;
+    const line = lineString(
+      nodesWithPosition.map((n) => [
+        (n.data.position?.latitudeI ?? 0) / 1e7,
+        (n.data.position?.longitudeI ?? 0) / 1e7
+      ])
+    );
+    const bounds = bbox(line);
+    const center = map?.cameraForBounds(
+      [
+        [bounds[1], bounds[0]],
+        [bounds[3], bounds[2]]
+      ],
+      { padding: { top: 10, bottom: 10, left: 10, right: 10 } }
+    );
+    if (center) map?.easeTo(center);
+    else if (nodesWithPosition.length === 1)
+      map?.easeTo({
+        zoom: 12,
+        center: [
+          (nodesWithPosition[0].data.position?.longitudeI ?? 0) / 1e7,
+          (nodesWithPosition[0].data.position?.latitudeI ?? 0) / 1e7
+        ]
+      });
+  };
 
   return (
-    <div className="h-full flex-grow">
-      <Map
-        mapStyle="https://raw.githubusercontent.com/hc-oss/maplibre-gl-styles/master/styles/osm-mapnik/v8/default.json"
-        mapLib={maplibregl}
-        attributionControl={false}
-        renderWorldCopies={false}
-        maxPitch={0}
-        dragRotate={false}
-        touchZoomRotate={false}
-        initialViewState={{
-          zoom: 10,
-          latitude: -38,
-          longitude: 145
-        }}
-      >
-        <MapControlls />
-        {waypoints.map((wp) => (
-          <Marker
-            key={wp.id}
-            longitude={wp.longitudeI / 1e7}
-            latitude={wp.latitudeI / 1e7}
-            anchor="bottom"
-          >
-            <div>
-              <MapPinIcon className="h-4" />
-            </div>
-          </Marker>
-        ))}
-        {rasterSources.map((source, index) => (
-          <Source key={index} type="raster" {...source}>
-            <Layer type="raster" />
-          </Source>
-        ))}
-        {nodes.map((n) => {
-          if (n.data.position?.latitudeI) {
-            return (
-              <Marker
-                key={n.data.num}
-                longitude={n.data.position.longitudeI / 1e7}
-                latitude={n.data.position.latitudeI / 1e7}
-                anchor="bottom"
-              >
-                <Hashicon value={n.data.num.toString()} size={32} />
-              </Marker>
-            );
+    <>
+      <Sidebar>
+        <SidebarSection label="Sources">
+          {rasterSources.map((source, index) => (
+            <SidebarButton key={index} label={source.title} />
+          ))}
+        </SidebarSection>
+      </Sidebar>
+      <PageLayout
+        label="Map"
+        actions={[
+          {
+            icon: ZoomInIcon,
+            onClick() {
+              map?.zoomIn();
+            }
+          },
+          {
+            icon: ZoomOutIcon,
+            onClick() {
+              map?.zoomOut();
+            }
+          },
+          {
+            icon: BoxSelectIcon,
+            onClick() {
+              getBBox();
+            }
           }
-        })}
-      </Map>
-    </div>
+        ]}
+      >
+        <Map
+          mapStyle="https://raw.githubusercontent.com/hc-oss/maplibre-gl-styles/master/styles/osm-mapnik/v8/default.json"
+          mapLib={maplibregl}
+          attributionControl={false}
+          renderWorldCopies={false}
+          maxPitch={0}
+          dragRotate={false}
+          touchZoomRotate={false}
+          initialViewState={{
+            zoom: 10,
+            latitude: -38,
+            longitude: 145
+          }}
+        >
+          {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>
+          ))} */}
+          {nodes.map((n) => {
+            if (n.data.position?.latitudeI) {
+              return (
+                <Marker
+                  key={n.data.num}
+                  longitude={n.data.position.longitudeI / 1e7}
+                  latitude={n.data.position.latitudeI / 1e7}
+                  anchor="bottom"
+                >
+                  <Hashicon value={n.data.num.toString()} size={32} />
+                </Marker>
+              );
+            }
+          })}
+        </Map>
+      </PageLayout>
+    </>
   );
 };

src/pages/Messages.tsx

@@ -1,35 +1,71 @@
-import { TabbedContent, TabType } from "@components/generic/TabbedContent.js";
+import { Sidebar } from "@app/components/Sidebar.js";
+import { PageLayout } from "@app/components/Topbar.js";
 import { ChannelChat } from "@components/PageComponents/Messages/ChannelChat.js";
-import { useDevice } from "@core/providers/useDevice.js";
-import { PencilIcon } from "@heroicons/react/24/outline";
-import { Protobuf } from "@meshtastic/meshtasticjs";
+import { useDevice } from "@core/stores/deviceStore.js";
+import { Hashicon } from "@emeraldpay/hashicon-react";
+import { HashIcon } from "lucide-react";
+import { Protobuf, Types } from "@meshtastic/meshtasticjs";
+import { SidebarSection } from "@app/components/UI/Sidebar/SidebarSection.js";
+import { useState } from "react";
+import { getChannelName } from "./Channels.js";
+import { SidebarButton } from "@app/components/UI/Sidebar/sidebarButton.js";
 
 export const MessagesPage = (): JSX.Element => {
-  const { channels, setActivePage } = useDevice();
-
-  const tabs: TabType[] = channels.map((channel) => {
-    return {
-      label: channel.config.settings?.name.length
-        ? channel.config.settings?.name
-        : channel.config.index === 0
-        ? "Primary"
-        : `Ch ${channel.config.index}`,
-      element: () => <ChannelChat channel={channel} />,
-      disabled: channel.config.role === Protobuf.Channel_Role.DISABLED
-    };
-  });
+  const { channels, nodes, hardware } = useDevice();
+  const [activeChannel, setActiveChannel] = useState<Types.ChannelNumber>(
+    Types.ChannelNumber.PRIMARY
+  );
 
   return (
-    <div className="flex h-full w-full flex-col">
-      <TabbedContent
-        tabs={tabs}
-        actions={[
-          {
-            icon: <PencilIcon className="h-4" />,
-            action: () => setActivePage("channels")
-          }
-        ]}
-      />
-    </div>
+    <>
+      <Sidebar>
+        <SidebarSection label="Channels">
+          {channels
+            .filter((ch) => ch.config.role !== Protobuf.Channel_Role.DISABLED)
+            .map((channel) => (
+              <SidebarButton
+                key={channel.config.index}
+                label={
+                  channel.config.settings?.name.length
+                    ? channel.config.settings?.name
+                    : channel.config.index === 0
+                    ? "Primary"
+                    : `Ch ${channel.config.index}`
+                }
+                active={channel.config.index === activeChannel}
+                onClick={() => setActiveChannel(channel.config.index)}
+                element={<HashIcon size={16} className="mr-2" />}
+              />
+            ))}
+        </SidebarSection>
+        <SidebarSection label="Peers">
+          {nodes
+            .filter((n) => n.data.num !== hardware.myNodeNum)
+            .map((node) => (
+              <SidebarButton
+                key={node.data.num}
+                label={node.data.user?.longName ?? "Unknown"}
+                element={
+                  <Hashicon size={20} value={node.data.num.toString()} />
+                }
+              />
+            ))}
+        </SidebarSection>
+      </Sidebar>
+      <PageLayout
+        label={`Messages: ${
+          channels[activeChannel]
+            ? getChannelName(channels[activeChannel].config)
+            : "Loading..."
+        }`}
+      >
+        {channels.map(
+          (channel) =>
+            channel.config.index === activeChannel && (
+              <ChannelChat key={channel.config.index} channel={channel} />
+            )
+        )}
+      </PageLayout>
+    </>
   );
 };

src/pages/Peers.tsx

@@ -2,49 +2,57 @@ import { base16 } from "rfc4648";
 import { Mono } from "@components/generic/Mono.js";
 import { Table } from "@components/generic/Table";
 import { TimeAgo } from "@components/generic/Table/tmp/TimeAgo.js";
-import { useDevice } from "@core/providers/useDevice.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Protobuf } from "@meshtastic/meshtasticjs";
+import { Sidebar } from "@app/components/Sidebar.js";
 
 export const PeersPage = (): JSX.Element => {
   const { connection, nodes } = useDevice();
 
   return (
-    <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 }
-        ]}
-        rows={nodes.map((node) => [
-          <Hashicon size={24} value={node.data.num.toString()} />,
-          <h1>
-            {node.data.user?.longName ?? node.data.user?.macaddr
-              ? `Meshtastic_${base16
-                  .stringify(node.data.user?.macaddr.subarray(4, 6) ?? [])
-                  .toLowerCase()}`
-              : `UNK: ${node.data.num}`}
-          </h1>,
+    <>
+      <Sidebar></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 }
+          ]}
+          rows={nodes.map((node) => [
+            <Hashicon size={24} value={node.data.num.toString()} />,
+            <h1>
+              {node.data.user?.longName ?? node.data.user?.macaddr
+                ? `Meshtastic_${base16
+                    .stringify(node.data.user?.macaddr.subarray(4, 6) ?? [])
+                    .toLowerCase()}`
+                : `UNK: ${node.data.num}`}
+            </h1>,
 
-          <Mono>{Protobuf.HardwareModel[node.data.user?.hwModel ?? 0]}</Mono>,
-          <Mono>
-            {base16
-              .stringify(node.data.user?.macaddr ?? [])
-              .match(/.{1,2}/g)
-              ?.join(":") ?? "UNK"}
-          </Mono>,
-          <TimeAgo timestamp={node.data.lastHeard * 1000} />,
-          <Mono>
-            {node.data.snr}db/
-            {Math.min(Math.max((node.data.snr + 10) * 5, 0), 100)}%/
-            {(node.data.snr + 10) * 5}raw
-          </Mono>
-        ])}
-      />
-    </div>
+            <Mono>{Protobuf.HardwareModel[node.data.user?.hwModel ?? 0]}</Mono>,
+            <Mono>
+              {base16
+                .stringify(node.data.user?.macaddr ?? [])
+                .match(/.{1,2}/g)
+                ?.join(":") ?? "UNK"}
+            </Mono>,
+            node.data.lastHeard === 0 ? (
+              <p>Never</p>
+            ) : (
+              <TimeAgo timestamp={node.data.lastHeard * 1000} />
+            ),
+            <Mono>
+              {node.data.snr}db/
+              {Math.min(Math.max((node.data.snr + 10) * 5, 0), 100)}%/
+              {(node.data.snr + 10) * 5}raw
+            </Mono>
+          ])}
+        />
+      </div>
+    </>
   );
 };