Multiple theme support & fixes

src/core/stores/appStore.ts

@@ -8,6 +8,15 @@ export interface RasterSource {
   tileSize: number;
 }
 
+export type accentColor =
+  | "red"
+  | "orange"
+  | "yellow"
+  | "green"
+  | "blue"
+  | "purple"
+  | "pink";
+
 interface AppState {
   selectedDevice: number;
   devices: {
@@ -16,6 +25,8 @@ interface AppState {
   }[];
   rasterSources: RasterSource[];
   commandPaletteOpen: boolean;
+  darkMode: boolean;
+  accent: accentColor;
 
   setRasterSources: (sources: RasterSource[]) => void;
   addRasterSource: (source: RasterSource) => void;
@@ -25,6 +36,8 @@ interface AppState {
   addDevice: (device: { id: number; num: number }) => void;
   removeDevice: (deviceId: number) => void;
   setCommandPaletteOpen: (open: boolean) => void;
+  setDarkMode: (enabled: boolean) => void;
+  setAccent: (color: accentColor) => void;
 }
 
 export const useAppStore = create<AppState>()((set) => ({
@@ -33,6 +46,8 @@ export const useAppStore = create<AppState>()((set) => ({
   currentPage: "messages",
   rasterSources: [],
   commandPaletteOpen: false,
+  darkMode: true,
+  accent: "orange",
 
   setRasterSources: (sources: RasterSource[]) => {
     set(
@@ -73,5 +88,19 @@ export const useAppStore = create<AppState>()((set) => ({
         draft.commandPaletteOpen = open;
       })
     );
+  },
+  setDarkMode: (enabled: boolean) => {
+    set(
+      produce<AppState>((draft) => {
+        draft.darkMode = enabled;
+      })
+    );
+  },
+  setAccent(color) {
+    set(
+      produce<AppState>((draft) => {
+        draft.accent = color;
+      })
+    );
   }
 }));

src/core/stores/deviceStore.ts

@@ -518,23 +518,18 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
             );
           },
           ackMessage: (channelIndex: number, messageId: number) => {
-            console.log("ack called");
-
             set(
               produce<DeviceState>((draft) => {
                 const device = draft.devices.get(id);
-                if (device) {
-                  const channel = device.channels.find(
-                    (ch) => ch.config.index === channelIndex
-                  );
-                  if (channel) {
-                    const message = channel.messages.find(
-                      (msg) => msg.packet.id === messageId
-                    );
-                    if (message) {
-                      message.ack = true;
-                    }
-                  }
+
+                const channel = device?.channels.find(
+                  (ch) => ch.config.index === channelIndex
+                );
+                const message = channel?.messages.find(
+                  (msg) => msg.packet.id === messageId
+                );
+                if (message) {
+                  message.ack = true;
                 }
               })
             );