Overhaul (#83)

* WIP Layout Refactor

* New Connection Dialog

* WIP form overhaul

* Fix remaining config pages

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;
+};