diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b135bbad..c7353e1a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -115,7 +115,7 @@ importers:
version: 1.5.4
vite-plugin-node-polyfills:
specifier: ^0.23.0
- version: 0.23.0(rollup@4.34.6)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.4.5))
+ version: 0.23.0(rollup@4.34.6)(vite@6.1.1(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.4.5))
zustand:
specifier: 5.0.3
version: 5.0.3(@types/react@19.0.10)(immer@10.1.1)(react@19.0.0)(use-sync-external-store@1.4.0(react@19.0.0))
@@ -149,7 +149,7 @@ importers:
version: 0.0.20
'@vitejs/plugin-react':
specifier: ^4.3.4
- version: 4.3.4(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.4.5))
+ version: 4.3.4(vite@6.1.1(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.4.5))
autoprefixer:
specifier: ^10.4.20
version: 10.4.20(postcss@8.5.1)
@@ -178,8 +178,8 @@ importers:
specifier: ^5.7.3
version: 5.7.3
vite:
- specifier: ^6.1.0
- version: 6.1.0(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.4.5)
+ specifier: ^6.1.1
+ version: 6.1.1(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.4.5)
packages:
@@ -2503,6 +2503,10 @@ packages:
resolution: {integrity: sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==}
engines: {node: ^10 || ^12 || >=14}
+ postcss@8.5.3:
+ resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
+ engines: {node: ^10 || ^12 || >=14}
+
potpack@2.0.0:
resolution: {integrity: sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw==}
@@ -2929,8 +2933,8 @@ packages:
peerDependencies:
vite: ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0
- vite@6.1.0:
- resolution: {integrity: sha512-RjjMipCKVoR4hVfPY6GQTgveinjNuyLw+qruksLDvA5ktI1150VmcMBKmQaEWJhg/j6Uaf6dNCNA0AfdzUb/hQ==}
+ vite@6.1.1:
+ resolution: {integrity: sha512-4GgM54XrwRfrOp297aIYspIti66k56v16ZnqHvrIM7mG+HjDlAwS7p+Srr7J6fGvEdOJ5JcQ/D9T7HhtdXDTzA==}
engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
hasBin: true
peerDependencies:
@@ -5226,14 +5230,14 @@ snapshots:
'@types/web-bluetooth@0.0.20': {}
- '@vitejs/plugin-react@4.3.4(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.4.5))':
+ '@vitejs/plugin-react@4.3.4(vite@6.1.1(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.4.5))':
dependencies:
'@babel/core': 7.26.8
'@babel/plugin-transform-react-jsx-self': 7.25.9(@babel/core@7.26.8)
'@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.26.8)
'@types/babel__core': 7.20.5
react-refresh: 0.14.2
- vite: 6.1.0(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.4.5)
+ vite: 6.1.1(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.4.5)
transitivePeerDependencies:
- supports-color
@@ -6140,6 +6144,12 @@ snapshots:
picocolors: 1.1.1
source-map-js: 1.2.1
+ postcss@8.5.3:
+ dependencies:
+ nanoid: 3.3.8
+ picocolors: 1.1.1
+ source-map-js: 1.2.1
+
potpack@2.0.0: {}
process-nextick-args@2.0.1: {}
@@ -6579,18 +6589,18 @@ snapshots:
validator@13.12.0: {}
- vite-plugin-node-polyfills@0.23.0(rollup@4.34.6)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.4.5)):
+ vite-plugin-node-polyfills@0.23.0(rollup@4.34.6)(vite@6.1.1(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.4.5)):
dependencies:
'@rollup/plugin-inject': 5.0.5(rollup@4.34.6)
node-stdlib-browser: 1.2.0
- vite: 6.1.0(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.4.5)
+ vite: 6.1.1(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.4.5)
transitivePeerDependencies:
- rollup
- vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.4.5):
+ vite@6.1.1(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.4.5):
dependencies:
esbuild: 0.24.2
- postcss: 8.5.1
+ postcss: 8.5.3
rollup: 4.34.6
optionalDependencies:
'@types/node': 22.13.4
diff --git a/src/components/DeviceSelector.tsx b/src/components/DeviceSelector.tsx
index 3b6d5835..5c24c9c3 100644
--- a/src/components/DeviceSelector.tsx
+++ b/src/components/DeviceSelector.tsx
@@ -1,5 +1,5 @@
import { DeviceSelectorButton } from "@components/DeviceSelectorButton.tsx";
-import ThemeSwitcher from "@components/ThemeSwitcher";
+import { ThemeSwitcher } from "@components/ThemeSwitcher.tsx";
import { Separator } from "@components/UI/Seperator.tsx";
import { Code } from "@components/UI/Typography/Code.tsx";
import { useAppStore } from "@core/stores/appStore.ts";
diff --git a/src/components/PageComponents/Connect/HTTP.tsx b/src/components/PageComponents/Connect/HTTP.tsx
index d0f01def..50da2e06 100644
--- a/src/components/PageComponents/Connect/HTTP.tsx
+++ b/src/components/PageComponents/Connect/HTTP.tsx
@@ -12,6 +12,7 @@ import { useState } from "react";
import { Controller, useForm } from "react-hook-form";
export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
+ const [https, setHTTPs] = useState();
const { addDevice } = useDeviceStore();
const { setSelectedDevice } = useAppStore();
const { register, handleSubmit, control, watch } = useForm<{
@@ -29,7 +30,6 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
});
const [connectionInProgress, setConnectionInProgress] = useState(false);
- const https = watch("tls");
const onSubmit = handleSubmit(async (data) => {
setConnectionInProgress(true);
@@ -65,13 +65,11 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
name="tls"
control={control}
render={({ field: { value, onChange, ...rest } }) => {
- console.log(value);
-
return (
<>
{}}
disabled={
location.protocol === "https:" || connectionInProgress
}
diff --git a/src/components/generic/ThemeProvider.tsx b/src/components/generic/ThemeProvider.tsx
new file mode 100644
index 00000000..f9ab1c6c
--- /dev/null
+++ b/src/components/generic/ThemeProvider.tsx
@@ -0,0 +1,67 @@
+import type React from "react";
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "light" | "dark" | "system";
+
+interface ThemeContextType {
+ theme: Theme;
+ setTheme: (theme: Theme) => void;
+}
+
+const ThemeContext = createContext(undefined);
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+ const [theme, setTheme] = useState(() => {
+ if (typeof window !== "undefined") {
+ const savedTheme = localStorage.getItem("theme") as Theme;
+ return savedTheme || "system";
+ }
+ return "system";
+ });
+
+ useEffect(() => {
+ const root = window.document.documentElement;
+ root.classList.remove("light", "dark");
+
+ if (theme === "system") {
+ const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+ .matches
+ ? "dark"
+ : "light";
+ root.classList.add(systemTheme);
+ } else {
+ root.classList.add(theme);
+ }
+
+ localStorage.setItem("theme", theme);
+ }, [theme]);
+
+ useEffect(() => {
+ const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+ const handleChange = () => {
+ if (theme === "system") {
+ const root = window.document.documentElement;
+ root.classList.remove("light", "dark");
+ root.classList.add(mediaQuery.matches ? "dark" : "light");
+ }
+ };
+
+ mediaQuery.addEventListener("change", handleChange);
+ return () => mediaQuery.removeEventListener("change", handleChange);
+ }, [theme]);
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function useTheme() {
+ const context = useContext(ThemeContext);
+ if (context === undefined) {
+ throw new Error("useTheme must be used within a ThemeProvider");
+ }
+ return context;
+}
diff --git a/src/core/stores/appStore.ts b/src/core/stores/appStore.ts
index cc6dcc5a..39e3f42d 100644
--- a/src/core/stores/appStore.ts
+++ b/src/core/stores/appStore.ts
@@ -20,6 +20,7 @@ interface AppState {
id: number;
num: number;
}[];
+
rasterSources: RasterSource[];
commandPaletteOpen: boolean;
nodeNumToBeRemoved: number;