feat: updated app to tailwind 4.x

src/core/hooks/useTheme.ts

@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+
+type Theme = "light" | "dark";
+
+export function useTheme() {
+  const [theme, setTheme] = useState<Theme>(() => {
+    if (typeof window === "undefined") return "light";
+    return (
+      (document.documentElement.getAttribute("data-theme") as Theme) || "light"
+    );
+  });
+
+  useEffect(() => {
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (
+          mutation.type === "attributes" &&
+          mutation.attributeName === "data-theme"
+        ) {
+          const newTheme = document.documentElement.getAttribute(
+            "data-theme",
+          ) as Theme;
+          setTheme(newTheme);
+        }
+      }
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  return theme;
+}

src/core/stores/appStore.ts

@@ -9,15 +9,6 @@ export interface RasterSource {
   tileSize: number;
 }
 
-export type AccentColor =
-  | "red"
-  | "orange"
-  | "yellow"
-  | "green"
-  | "blue"
-  | "purple"
-  | "pink";
-
 interface AppState {
   selectedDevice: number;
   devices: {
@@ -26,9 +17,7 @@ interface AppState {
   }[];
   rasterSources: RasterSource[];
   commandPaletteOpen: boolean;
-  darkMode: boolean;
   nodeNumToBeRemoved: number;
-  accent: AccentColor;
   connectDialogOpen: boolean;
   nodeNumDetails: number;
   activeChat: number;
@@ -42,9 +31,7 @@ interface AppState {
   addDevice: (device: { id: number; num: number }) => void;
   removeDevice: (deviceId: number) => void;
   setCommandPaletteOpen: (open: boolean) => void;
-  setDarkMode: (enabled: boolean) => void;
   setNodeNumToBeRemoved: (nodeNum: number) => void;
-  setAccent: (color: AccentColor) => void;
   setConnectDialogOpen: (open: boolean) => void;
   setNodeNumDetails: (nodeNum: number) => void;
   setActiveChat: (chat: number) => void;
@@ -57,11 +44,6 @@ export const useAppStore = create<AppState>()((set) => ({
   currentPage: "messages",
   rasterSources: [],
   commandPaletteOpen: false,
-  darkMode:
-    localStorage.getItem("theme-dark") !== null
-      ? localStorage.getItem("theme-dark") === "true"
-      : window.matchMedia("(prefers-color-scheme: dark)").matches,
-  accent: "orange",
   connectDialogOpen: false,
   nodeNumToBeRemoved: 0,
   nodeNumDetails: 0,
@@ -108,25 +90,10 @@ export const useAppStore = create<AppState>()((set) => ({
       }),
     );
   },
-  setDarkMode: (enabled: boolean) => {
-    localStorage.setItem("theme-dark", enabled.toString());
-    set(
-      produce<AppState>((draft) => {
-        draft.darkMode = enabled;
-      }),
-    );
-  },
   setNodeNumToBeRemoved: (nodeNum) =>
     set((state) => ({
       nodeNumToBeRemoved: nodeNum,
     })),
-  setAccent(color) {
-    set(
-      produce<AppState>((draft) => {
-        draft.accent = color;
-      }),
-    );
-  },
   setConnectDialogOpen: (open: boolean) => {
     set(
       produce<AppState>((draft) => {
@@ -134,6 +101,7 @@ export const useAppStore = create<AppState>()((set) => ({
       }),
     );
   },
+
   setNodeNumDetails: (nodeNum) =>
     set((state) => ({
       nodeNumDetails: nodeNum,