Overhaul (#83)

* WIP Layout Refactor

* New Connection Dialog

* WIP form overhaul

* Fix remaining config pages

src/core/providers/useDevice.ts

@@ -1,13 +0,0 @@
-import { createContext, useContext } from "react";
-
-import type { Device } from "@core/stores/deviceStore.js";
-
-export const DeviceContext = createContext<Device | undefined>(undefined);
-
-export const useDevice = (): Device => {
-  const context = useContext(DeviceContext);
-  if (context === undefined) {
-    throw new Error("useDevice must be used within a DeviceProvider");
-  }
-  return context;
-};

src/core/stores/appStore.ts

@@ -4,7 +4,7 @@ import { create } from "zustand";
 export interface RasterSource {
   enabled: boolean;
   title: string;
-  tiles: string[];
+  tiles: string;
   tileSize: number;
 }
 
@@ -27,6 +27,7 @@ interface AppState {
   commandPaletteOpen: boolean;
   darkMode: boolean;
   accent: accentColor;
+  connectDialogOpen: boolean;
 
   setRasterSources: (sources: RasterSource[]) => void;
   addRasterSource: (source: RasterSource) => void;
@@ -38,6 +39,7 @@ interface AppState {
   setCommandPaletteOpen: (open: boolean) => void;
   setDarkMode: (enabled: boolean) => void;
   setAccent: (color: accentColor) => void;
+  setConnectDialogOpen: (open: boolean) => void;
 }
 
 export const useAppStore = create<AppState>()((set) => ({
@@ -46,8 +48,9 @@ export const useAppStore = create<AppState>()((set) => ({
   currentPage: "messages",
   rasterSources: [],
   commandPaletteOpen: false,
-  darkMode: true,
+  darkMode: false,
   accent: "orange",
+  connectDialogOpen: false,
 
   setRasterSources: (sources: RasterSource[]) => {
     set(
@@ -102,5 +105,12 @@ export const useAppStore = create<AppState>()((set) => ({
         draft.accent = color;
       })
     );
+  },
+  setConnectDialogOpen: (open: boolean) => {
+    set(
+      produce<AppState>((draft) => {
+        draft.connectDialogOpen = open;
+      })
+    );
   }
 }));

src/core/stores/deviceStore.ts

@@ -1,16 +1,11 @@
-import { createContext } from "react";
+import { createContext, useContext } from "react";
 
 import { produce } from "immer";
 import { create } from "zustand";
 
 import { Protobuf, Types } from "@meshtastic/meshtasticjs";
 
-export type Page =
-  | "messages"
-  | "map"
-  | "config"
-  | "channels"
-  | "peers";
+export type Page = "messages" | "map" | "config" | "channels" | "peers";
 
 export interface MessageWithState extends Types.PacketMetadata<string> {
   state: MessageState;
@@ -51,7 +46,12 @@ export interface processPacketParams {
   time: number;
 }
 
-export type DialogVariant = "import" | "QR" | "shutdown" | "reboot";
+export type DialogVariant =
+  | "import"
+  | "QR"
+  | "shutdown"
+  | "reboot"
+  | "deviceName";
 
 export interface Device {
   id: number;
@@ -78,6 +78,7 @@ export interface Device {
     QR: boolean;
     shutdown: boolean;
     reboot: boolean;
+    deviceName: boolean;
   };
 
   setReady(ready: boolean): void;
@@ -152,7 +153,8 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
             import: false,
             QR: false,
             shutdown: false,
-            reboot: false
+            reboot: false,
+            deviceName: false
           },
           pendingSettingsChanges: false,
           messageDraft: "",
@@ -610,3 +612,11 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
 }));
 
 export const DeviceContext = createContext<Device | undefined>(undefined);
+
+export const useDevice = (): Device => {
+  const context = useContext(DeviceContext);
+  if (context === undefined) {
+    throw new Error("useDevice must be used within a DeviceProvider");
+  }
+  return context;
+};

src/core/subscriptions.ts

@@ -1,5 +1,3 @@
-import { toast } from "react-hot-toast";
-
 import type { Device } from "@core/stores/deviceStore.js";
 import { Protobuf, Types } from "@meshtastic/meshtasticjs";
 
@@ -22,24 +20,15 @@ export const subscribeAll = (
         if (routingPacket.data.variant.value === Protobuf.Routing_Error.NONE) {
           return;
         }
-        toast.error(
-          `Routing error: ${
-            Protobuf.Routing_Error[routingPacket.data.variant.value]
-          }`,
-          {
-            icon: "❌"
-          }
-        );
+        console.log(`Routing Error: ${routingPacket.data.variant.value}`);
         break;
       case "routeReply":
-        toast(`Route Reply: ${routingPacket.data.variant.value}`, {
-          icon: "✅"
-        });
+        console.log(`Route Reply: ${routingPacket.data.variant.value}`);
+
         break;
       case "routeRequest":
-        toast(`Route Request: ${routingPacket.data.variant.value}`, {
-          icon: "✅"
-        });
+        console.log(`Route Request: ${routingPacket.data.variant.value}`);
+
         break;
     }
   });
@@ -82,9 +71,9 @@ export const subscribeAll = (
   });
 
   connection.events.onNodeInfoPacket.subscribe((nodeInfo) => {
-    toast(`New Node Discovered: ${nodeInfo.user?.shortName ?? "UNK"}`, {
-      icon: "🔎"
-    });
+    // toast(`New Node Discovered: ${nodeInfo.user?.shortName ?? "UNK"}`, {
+    //   icon: "🔎"
+    // });
     device.addNodeInfo(nodeInfo);
   });
 

src/core/utils/cn.ts

@@ -0,0 +1,6 @@
+import { ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

src/core/utils/selectEnumOptions.tsx

@@ -1,13 +0,0 @@
-export const renderOptions = (enumValue: {
-  [s: string]: string | number;
-}): JSX.Element[] => {
-  const optionsEnumValues = enumValue
-    ? Object.entries(enumValue).filter((value) => typeof value[1] === "number")
-    : [];
-
-  return optionsEnumValues.map(([name, value], index) => (
-    <option key={index} value={value}>
-      {name}
-    </option>
-  ));
-};