Merge remote-tracking branch 'meshtastic/master' into traceroute

src/core/hooks/useToast.ts

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useState } from "react";
+import { type ReactNode, useSyncExternalStore } from "react";
 
 import type { ToastActionElement, ToastProps } from "@components/UI/Toast.js";
 
@@ -92,9 +92,9 @@ export const reducer = (state: State, action: Action): State => {
       if (toastId) {
         addToRemoveQueue(toastId);
       } else {
-        state.toasts.forEach((toast) => {
+        for (const toast of state.toasts) {
           addToRemoveQueue(toast.id);
-        });
+        }
       }
 
       return {
@@ -130,9 +130,9 @@ let memoryState: State = { toasts: [] };
 
 function dispatch(action: Action) {
   memoryState = reducer(memoryState, action);
-  listeners.forEach((listener) => {
+  for (const listener of listeners) {
     listener(memoryState);
-  });
+  }
 }
 
 type Toast = Omit<ToasterToast, "id">;
@@ -166,18 +166,22 @@ function toast({ ...props }: Toast) {
   };
 }
 
-function useToast() {
-  const [state, setState] = useState<State>(memoryState);
+const subscribe = (listener: () => void) => {
+  listeners.push(listener);
+  return function unsubscribe() {
+    const index = listeners.indexOf(listener);
+    if (index > -1) {
+      listeners.splice(index, 1);
+    }
+  };
+};
 
-  useEffect(() => {
-    listeners.push(setState);
-    return () => {
-      const index = listeners.indexOf(setState);
-      if (index > -1) {
-        listeners.splice(index, 1);
-      }
-    };
-  }, [state]);
+const getState = () => {
+  return memoryState;
+};
+
+function useToast() {
+  const state = useSyncExternalStore(subscribe, getState);
 
   return {
     ...state,

src/core/stores/appStore.ts

@@ -50,7 +50,10 @@ export const useAppStore = create<AppState>()((set) => ({
   currentPage: "messages",
   rasterSources: [],
   commandPaletteOpen: false,
-  darkMode: window.matchMedia("(prefers-color-scheme: dark)").matches,
+  darkMode:
+    localStorage.getItem("theme-dark") !== null
+      ? localStorage.getItem("theme-dark") === "true"
+      : window.matchMedia("(prefers-color-scheme: dark)").matches,
   accent: "orange",
   connectDialogOpen: false,
   nodeNumToBeRemoved: 0,
@@ -96,6 +99,7 @@ export const useAppStore = create<AppState>()((set) => ({
     );
   },
   setDarkMode: (enabled: boolean) => {
+    localStorage.setItem("theme-dark", enabled.toString());
     set(
       produce<AppState>((draft) => {
         draft.darkMode = enabled;
@@ -104,7 +108,7 @@ export const useAppStore = create<AppState>()((set) => ({
   },
   setNodeNumToBeRemoved: (nodeNum) =>
     set((state) => ({
-      nodeNumToBeRemoved: nodeNum
+      nodeNumToBeRemoved: nodeNum,
     })),
   setAccent(color) {
     set(

src/core/stores/deviceStore.ts

@@ -527,8 +527,8 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
               produce<DeviceState>((draft) => {
 
                 device.nodes.delete(nodeNum);
-              })
-            )
+              }),
+            );
           },
           setMessageState: (
             type: "direct" | "broadcast",

src/core/subscriptions.ts

@@ -1,5 +1,5 @@
 import type { Device } from "@core/stores/deviceStore.js";
-import { Protobuf, Types } from "@meshtastic/js";
+import { Protobuf, type Types } from "@meshtastic/js";
 
 export const subscribeAll = (
   device: Device,

src/core/utils/cn.ts

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