layout cleanup wip

src/App.tsx

@@ -1,6 +1,5 @@
 import type React from "react";
 
-import { Toaster } from "react-hot-toast";
 import { MapProvider } from "react-map-gl";
 
 import { useAppStore } from "@app/core/stores/appStore.js";
@@ -9,12 +8,13 @@ import { PageRouter } from "@app/PageRouter.js";
 import { CommandPalette } from "@components/CommandPalette/Index.js";
 import { DeviceSelector } from "@components/DeviceSelector.js";
 import { DialogManager } from "@components/Dialog/DialogManager.js";
-import { Drawer } from "@components/Drawer/index.js";
 import { NewDevice } from "@components/NewDevice.js";
-import { PageNav } from "@components/PageNav.js";
 import { Sidebar } from "@components/Sidebar.js";
 import { useDeviceStore } from "@core/stores/deviceStore.js";
+
+import { Drawer } from "./components/Drawer/index.js";
 import { ThemeController } from "./components/generic/ThemeController.js";
+import { BottomNav } from "./Nav/BottomNav.js";
 
 export const App = (): JSX.Element => {
   const { getDevice } = useDeviceStore();
@@ -24,30 +24,26 @@ export const App = (): JSX.Element => {
 
   return (
     <ThemeController>
-      <div className="flex h-screen w-full bg-backgroundSecondary">
-        <DeviceSelector />
-
-        {device && (
-          <DeviceWrapper device={device}>
-            <CommandPalette />
-            <Toaster
-              toastOptions={{
-                duration: 4000
-              }}
-            />
-            <DialogManager />
-            <Sidebar />
-            <PageNav />
-            <MapProvider>
-              <div className="flex h-full w-full flex-col overflow-y-auto">
-                <PageRouter />
-                <Drawer />
-              </div>
-            </MapProvider>
-          </DeviceWrapper>
-        )}
-        {selectedDevice === 0 && <NewDevice />}
-      </div>
+      <MapProvider>
+        <DeviceWrapper device={device}>
+          <div className="flex bg-backgroundSecondary">
+            <DeviceSelector />
+            <div className="flex flex-grow flex-col">
+              {device ? (
+                <div className="flex flex-grow">
+                  <DialogManager />
+                  <CommandPalette />
+                  <Sidebar />
+                  <PageRouter />
+                </div>
+              ) : (
+                <NewDevice />
+              )}
+              <BottomNav>{device && <Drawer />}</BottomNav>
+            </div>
+          </div>
+        </DeviceWrapper>
+      </MapProvider>
     </ThemeController>
   );
 };

src/DeviceWrapper.tsx

@@ -5,7 +5,7 @@ import type { Device } from "@core/stores/deviceStore.js";
 
 export interface DeviceWrapperProps {
   children: React.ReactNode;
-  device: Device;
+  device?: Device;
 }
 
 export const DeviceWrapper = ({

src/Nav/BottomNav.tsx

@@ -0,0 +1,21 @@
+import type React from "react";
+
+import { GitBranchIcon } from "@primer/octicons-react";
+
+export interface BottomNavProps {
+  children: React.ReactNode;
+}
+
+export const BottomNav = ({ children }: BottomNavProps): JSX.Element => {
+  return (
+    <div className="flex bg-backgroundPrimary">
+      <div className="flex h-8 cursor-pointer select-none gap-1 bg-accent px-1 text-textPrimary hover:brightness-hover active:brightness-press">
+        <GitBranchIcon className="my-auto w-4" />
+        <span className="my-auto font-mono text-sm">
+          {process.env.COMMIT_HASH}
+        </span>
+      </div>
+      {children}
+    </div>
+  );
+};

src/Nav/NavSpacer.tsx

@@ -0,0 +1,5 @@
+import type React from "react";
+
+export const NavSpacer = (): JSX.Element => {
+  return <div className="h-1 w-10 rounded-full bg-accentMuted" />;
+};

src/Nav/PageNav.tsx

@@ -0,0 +1,76 @@
+import type React from "react";
+import type { SVGProps } from "react";
+
+import { useDevice } from "@app/core/providers/useDevice.js";
+import type { Page } from "@app/core/stores/deviceStore.js";
+import {
+  BeakerIcon,
+  ChatBubbleBottomCenterTextIcon,
+  Cog8ToothIcon,
+  MapIcon,
+  Square3Stack3DIcon,
+  UsersIcon
+} from "@heroicons/react/24/outline";
+
+export const PageNav = (): JSX.Element => {
+  const { activePage, setActivePage } = useDevice();
+
+  interface NavLink {
+    name: string;
+    icon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+    page: Page;
+  }
+
+  const pages: NavLink[] = [
+    {
+      name: "Messages",
+      icon: ChatBubbleBottomCenterTextIcon,
+      page: "messages"
+    },
+    {
+      name: "Map",
+      icon: MapIcon,
+      page: "map"
+    },
+    {
+      name: "Extensions",
+      icon: BeakerIcon,
+      page: "extensions"
+    },
+    {
+      name: "Config",
+      icon: Cog8ToothIcon,
+      page: "config"
+    },
+    {
+      name: "Channels",
+      icon: Square3Stack3DIcon,
+      page: "channels"
+    },
+    {
+      name: "Peers",
+      icon: UsersIcon,
+      page: "peers"
+    }
+  ];
+
+  return (
+    <div className="flex text-textPrimary">
+      {pages.map((Link) => (
+        <div
+          key={Link.name}
+          onClick={() => {
+            setActivePage(Link.page);
+          }}
+          className={`border-x-4 border-backgroundPrimary bg-backgroundPrimary py-5 px-4 hover:brightness-hover active:brightness-press ${
+            Link.page === activePage
+              ? "border-l-accent text-textPrimary"
+              : "text-textSecondary hover:text-textPrimary"
+          }`}
+        >
+          <Link.icon className="w-4" />
+        </div>
+      ))}
+    </div>
+  );
+};

src/PageRouter.tsx

@@ -4,8 +4,6 @@ import { useDevice } from "@core/providers/useDevice.js";
 import { ChannelsPage } from "@pages/Channels.js";
 import { ConfigPage } from "@pages/Config/index.js";
 import { ExtensionsPage } from "@pages/Extensions/Index.js";
-import { InfoPage } from "@pages/Info.js";
-import { LogsPage } from "@pages/Logs.js";
 import { MapPage } from "@pages/Map.js";
 import { MessagesPage } from "@pages/Messages.js";
 import { PeersPage } from "@pages/Peers.js";
@@ -13,15 +11,13 @@ import { PeersPage } from "@pages/Peers.js";
 export const PageRouter = (): JSX.Element => {
   const { activePage } = useDevice();
   return (
-    <div className="flex-grow overflow-y-auto">
+    <div className="flex-grow overflow-y-auto border-l-2 border-backgroundPrimary">
       {activePage === "messages" && <MessagesPage />}
       {activePage === "map" && <MapPage />}
       {activePage === "extensions" && <ExtensionsPage />}
       {activePage === "config" && <ConfigPage />}
       {activePage === "channels" && <ChannelsPage />}
       {activePage === "peers" && <PeersPage />}
-      {activePage === "info" && <InfoPage />}
-      {activePage === "logs" && <LogsPage />}
     </div>
   );
 };

src/components/CommandPalette/Index.tsx

@@ -24,8 +24,6 @@ import {
   Cog8ToothIcon,
   CubeTransparentIcon,
   DevicePhoneMobileIcon,
-  DocumentTextIcon,
-  IdentificationIcon,
   InboxIcon,
   LinkIcon,
   MapIcon,
@@ -135,20 +133,6 @@ export const CommandPalette = (): JSX.Element => {
           action() {
             setActivePage("peers");
           }
-        },
-        {
-          name: "Info",
-          icon: IdentificationIcon,
-          action() {
-            setActivePage("info");
-          }
-        },
-        {
-          name: "Logs",
-          icon: DocumentTextIcon,
-          action() {
-            setActivePage("logs");
-          }
         }
       ]
     },

src/components/DeviceSelector.tsx

@@ -2,52 +2,64 @@ import type React from "react";
 
 import { useAppStore } from "@app/core/stores/appStore.js";
 import { useDeviceStore } from "@app/core/stores/deviceStore.js";
+import { NavSpacer } from "@app/Nav/NavSpacer.js";
+import { PageNav } from "@app/Nav/PageNav.js";
 import { Mono } from "@components/generic/Mono.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
-import { MoonIcon, PlusIcon } from "@heroicons/react/24/outline";
-import { IconButton } from "./form/IconButton.js";
+import { PlusIcon } from "@heroicons/react/24/outline";
 
 export const DeviceSelector = (): JSX.Element => {
   const { getDevices } = useDeviceStore();
   const { selectedDevice, setSelectedDevice, darkMode } = useAppStore();
 
   return (
-    <div className="flex h-full w-16 items-center whitespace-nowrap bg-backgroundPrimary pt-12 [writing-mode:vertical-rl]">
-      <Mono>Connected Devices</Mono>
-      <span className="mt-6 flex gap-4 font-bold text-textPrimary">
-        {getDevices().map((device) => (
-          <div
-            key={device.id}
-            onClick={() => {
-              setSelectedDevice(device.id);
-            }}
-            className="group flex h-8 w-8 cursor-pointer bg-backgroundPrimary p-0.5 drop-shadow-md hover:brightness-hover"
-          >
-            <Hashicon size={32} value={device.hardware.myNodeNum.toString()} />
+    <div className="flex h-full w-14 items-center gap-3 bg-backgroundPrimary pt-3 [writing-mode:vertical-rl]">
+      <div className="flex items-center gap-3">
+        <Mono className="select-none">Connected Devices</Mono>
+        <span className="flex font-bold text-textPrimary">
+          {getDevices().map((device) => (
             <div
-              className={`absolute -left-1.5 h-7 w-0.5 rounded-full group-hover:bg-accent ${
-                device.id === selectedDevice ? "bg-accent" : "bg-transparent"
+              key={device.id}
+              onClick={() => {
+                setSelectedDevice(device.id);
+              }}
+              className={`cursor-pointer border-x-4 border-backgroundPrimary bg-backgroundPrimary py-3 px-2 hover:brightness-hover active:brightness-press ${
+                selectedDevice === device.id ? "border-l-accent" : ""
               }`}
-            />
-          </div>
-        ))}
-        <div
-          onClick={() => {
-            setSelectedDevice(0);
-          }}
-          className="group flex h-8 w-8 cursor-pointer p-0.5 drop-shadow-md"
-        >
-          <PlusIcon />
+            >
+              <Hashicon
+                size={32}
+                value={device.hardware.myNodeNum.toString()}
+              />
+            </div>
+          ))}
           <div
-            className={`absolute -left-1.5 h-7 w-0.5 rounded-full group-hover:bg-accent ${
-              selectedDevice === 0 ? "bg-accent" : "bg-transparent"
+            onClick={() => {
+              setSelectedDevice(0);
+            }}
+            className={`cursor-pointer border-x-4 border-backgroundPrimary bg-backgroundPrimary py-4 px-3 hover:brightness-hover active:brightness-press ${
+              selectedDevice === 0 ? "border-l-accent" : ""
             }`}
-          />
-        </div>
-      </span>
+          >
+            <PlusIcon className="w-6" />
+          </div>
+        </span>
+      </div>
+
+      {selectedDevice !== 0 && (
+        <>
+          <NavSpacer />
+          <PageNav />
+        </>
+      )}
+
+      <NavSpacer />
+
+      <div>//actions</div>
+
       <img
         src={darkMode ? "Logo_White.svg" : "Logo_Black.svg"}
-        className="mt-auto px-3 py-4"
+        className="mt-auto px-2 py-3"
       />
     </div>
   );

src/components/Drawer/index.tsx

@@ -17,8 +17,8 @@ export const Drawer = (): JSX.Element => {
     { name: "Sensor", element: Sensor }
   ];
   return (
-    <Tab.Group>
-      <Tab.List className="flex bg-backgroundPrimary">
+    <Tab.Group as="div">
+      <Tab.List className="flex w-full">
         {tabs.map((tab, index) => (
           <Tab key={index}>
             {({ selected }) => (
@@ -26,7 +26,7 @@ export const Drawer = (): JSX.Element => {
                 onClick={() => {
                   setDrawerOpen(true);
                 }}
-                className={`flex h-full cursor-pointer border-b-2 px-1 first:pl-2 last:pr-2 hover:text-textPrimary ${
+                className={`flex h-full cursor-pointer border-b-4 px-1 first:pl-2 last:pr-2 hover:text-textPrimary ${
                   selected
                     ? "border-accent text-textPrimary"
                     : "border-backgroundPrimary text-textSecondary"

src/components/PageNav.tsx

@@ -1,89 +0,0 @@
-import type React from "react";
-
-import { useDevice } from "@app/core/providers/useDevice.js";
-import type { Page } from "@app/core/stores/deviceStore.js";
-import {
-  BeakerIcon,
-  Cog8ToothIcon,
-  DocumentTextIcon,
-  IdentificationIcon,
-  InboxIcon,
-  MapIcon,
-  Square3Stack3DIcon,
-  UsersIcon
-} from "@heroicons/react/24/outline";
-
-export const PageNav = (): JSX.Element => {
-  const { activePage, setActivePage } = useDevice();
-
-  interface NavLink {
-    name: string;
-    icon: JSX.Element;
-    page: Page;
-  }
-
-  const pages: NavLink[] = [
-    {
-      name: "Messages",
-      icon: <InboxIcon />,
-      page: "messages"
-    },
-    {
-      name: "Map",
-      icon: <MapIcon />,
-      page: "map"
-    },
-    {
-      name: "Extensions",
-      icon: <BeakerIcon />,
-      page: "extensions"
-    },
-    {
-      name: "Config",
-      icon: <Cog8ToothIcon />,
-      page: "config"
-    },
-    {
-      name: "Channels",
-      icon: <Square3Stack3DIcon />,
-      page: "channels"
-    },
-    {
-      name: "Peers",
-      icon: <UsersIcon />,
-      page: "peers"
-    },
-    {
-      name: "Info",
-      icon: <IdentificationIcon />,
-      page: "info"
-    },
-    {
-      name: "Logs",
-      icon: <DocumentTextIcon />,
-      page: "logs"
-    }
-  ];
-
-  return (
-    <div className="flex h-full flex-shrink-0 whitespace-nowrap bg-backgroundPrimary text-sm [writing-mode:vertical-rl]">
-      <span className="mt-2 flex gap-2 font-bold">
-        {pages.map((Link) => (
-          <div
-            key={Link.name}
-            onClick={() => {
-              setActivePage(Link.page);
-            }}
-            className={`hover:border-orange-300 h-9 w-9 cursor-pointer border-l-2 p-1.5 ${
-              Link.page === activePage
-                ? "border-accent text-textPrimary"
-                : "border-backgroundPrimary text-textSecondary hover:text-textPrimary"
-            }`}
-          >
-            {Link.icon}
-          </div>
-        ))}
-      </span>
-    </div>
-  );
-};

src/components/form/IconButton.tsx

@@ -16,7 +16,7 @@ export const IconButton = ({
 }: IconButtonProps): JSX.Element => {
   return (
     <button
-      className={`flex rounded-md bg-accentMuted text-textPrimary hover:text-accent hover:brightness-hover focus:outline-none active:brightness-press ${
+      className={`flex rounded-md bg-accentMuted text-textPrimary hover:brightness-hover focus:outline-none active:brightness-press ${
         size === "sm" ? "h-8 w-8" : size === "md" ? "h-10 w-10" : "h-12 w-12"
       } ${
         disabled

src/components/generic/TabbedContent.tsx

@@ -34,7 +34,7 @@ export const TabbedContent = ({
           <Tab key={index} disabled={entry.disabled}>
             {({ selected }) => (
               <div
-                className={`flex h-10 gap-3 truncate border-b-2 px-3 text-sm font-medium ${
+                className={`flex h-10 gap-3 truncate border-b-4 px-3 text-sm font-medium ${
                   selected
                     ? "border-accent text-textPrimary"
                     : "border-backgroundPrimary text-textSecondary hover:text-textPrimary"

src/core/stores/deviceStore.ts

@@ -11,9 +11,7 @@ export type Page =
   | "extensions"
   | "config"
   | "channels"
-  | "peers"
-  | "info"
-  | "logs";
+  | "peers";
 
 export interface MessageWithState extends Types.PacketMetadata<string> {
   state: MessageState;

src/index.css

@@ -95,3 +95,8 @@
   --accent: #e454c4;
   --accentMuted: #a84892;
 }
+
+img {
+  -drag: none;
+  -webkit-user-drag: none;
+}

src/pages/Info.tsx

@@ -1,71 +0,0 @@
-import type React from "react";
-import { useState } from "react";
-
-import { JSONTree } from "react-json-tree";
-
-import {
-  TabbedContent,
-  TabType
-} from "@app/components/generic/TabbedContent.js";
-import { useDevice } from "@core/providers/useDevice.js";
-import { EyeIcon } from "@heroicons/react/24/outline";
-
-export const InfoPage = (): JSX.Element => {
-  const { config, moduleConfig, hardware, nodes, waypoints, connection } =
-    useDevice();
-
-  const [serialLogs, setSerialLogs] = useState<string>("");
-
-  connection?.events.onDeviceDebugLog.subscribe((packet) => {
-    setSerialLogs(serialLogs + new TextDecoder().decode(packet));
-  });
-
-  const tabs: TabType[] = [
-    {
-      name: "Hardware",
-      icon: <EyeIcon className="h-4" />,
-      element: () => <JSONTree theme="monokai" data={hardware} />
-    },
-    {
-      name: "Config",
-      icon: <EyeIcon className="h-4" />,
-      element: () => <JSONTree theme="monokai" data={config} />
-    },
-    {
-      name: "Module Config",
-      icon: <EyeIcon className="h-4" />,
-      element: () => <JSONTree theme="monokai" data={moduleConfig} />
-    },
-
-    {
-      name: "Nodes",
-      icon: <EyeIcon className="h-4" />,
-      element: () => <JSONTree theme="monokai" data={nodes} />
-    },
-    {
-      name: "Waypoints",
-      icon: <EyeIcon className="h-4" />,
-      element: () => <JSONTree theme="monokai" data={waypoints} />
-    },
-    {
-      name: "Connection",
-      icon: <EyeIcon className="h-4" />,
-      element: () => <JSONTree theme="monokai" data={connection} />
-    },
-    {
-      name: "Serial Logs",
-      icon: <EyeIcon className="h-4" />,
-      element: () => (
-        <div>
-          {serialLogs.split("\n").map((line, index) => (
-            <div key={index} className="text-sm">
-              {line}
-            </div>
-          ))}
-        </div>
-      )
-    }
-  ];
-
-  return <TabbedContent tabs={tabs} />;
-};

src/pages/Logs.tsx

@@ -1,77 +0,0 @@
-import type React from "react";
-import { useEffect, useState } from "react";
-
-import { Mono } from "@app/components/generic/Mono.js";
-import { useDevice } from "@core/providers/useDevice.js";
-import { Protobuf, Types } from "@meshtastic/meshtasticjs";
-
-export const LogsPage = (): JSX.Element => {
-  const { connection } = useDevice();
-  const [logs, setLogs] = useState<Types.LogEvent[]>([]);
-
-  useEffect(() => {
-    connection?.events.onLogEvent.subscribe((log) => {
-      setLogs([...logs, log]);
-    });
-  }, [connection, setLogs, logs]);
-
-  return (
-    <div className="w-full overflow-y-auto">
-      <div className="ring-black overflow-hidden ring-1 ring-opacity-5">
-        <table className="divide-gray-300 min-w-full divide-y">
-          <thead className="bg-gray-50">
-            <tr>
-              <th
-                scope="col"
-                className="text-gray-900 py-3.5 pr-3 pl-6 text-left text-sm font-semibold"
-              >
-                Emitter
-              </th>
-              <th
-                scope="col"
-                className="text-gray-900 py-3.5 text-left text-sm font-semibold"
-              >
-                Level
-              </th>
-              <th
-                scope="col"
-                className="text-gray-900 py-3.5 text-left text-sm font-semibold"
-              >
-                Message
-              </th>
-              <th
-                scope="col"
-                className="text-gray-900 py-3.5 text-left text-sm font-semibold"
-              >
-                Scope
-              </th>
-            </tr>
-          </thead>
-          <tbody className="bg-white">
-            {logs.map((log, index) => (
-              <tr
-                key={index}
-                className={index % 2 === 0 ? undefined : "bg-gray-50"}
-              >
-                <td className="text-gray-500 whitespace-nowrap py-2 pl-6 text-sm">
-                  <span className="my-auto">{Types.Emitter[log.emitter]}</span>
-                </td>
-                <td className="text-gray-500 whitespace-nowrap py-2 text-sm">
-                  <span className="bg-slate-200 rounded-md p-1">
-                    <Mono>{[Protobuf.LogRecord_Level[log.level]]}</Mono>
-                  </span>
-                </td>
-                <td className="text-gray-500 whitespace-nowrap py-2 text-sm">
-                  <Mono>{log.message}</Mono>
-                </td>
-                <td className="text-gray-500 whitespace-nowrap py-2 text-sm">
-                  {Types.EmitterScope[log.scope]}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-};

src/validation/config/user.ts

@@ -3,7 +3,7 @@ import { IsBoolean, IsOptional, IsString, Length } from "class-validator";
 import type { Protobuf } from "@meshtastic/meshtasticjs";
 
 export class UserValidation
-  implements Omit<Protobuf.User, "macaddr" | "hwModel">
+  implements Omit<Protobuf.User, "ID" | "macaddr" | "hwModel">
 {
   @IsString()
   @IsOptional()