diff --git a/index.html b/index.html index d5323e2c..c790c20e 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + diff --git a/package.json b/package.json index a1441b0d..cae01180 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,10 @@ "pre-commit": "npm run check:fix && npm run format" }, "lint-staged": { - "*.{ts,tsx}": ["npm run check:fix", "npm run format"] + "*.{ts,tsx}": [ + "npm run check:fix", + "npm run format" + ] }, "repository": { "type": "git", @@ -33,20 +36,20 @@ "@bufbuild/protobuf": "^1.10.0", "@meshtastic/js": "2.3.7-5", "@noble/curves": "^1.8.1", - "@radix-ui/react-accordion": "^1.2.2", - "@radix-ui/react-checkbox": "^1.1.3", - "@radix-ui/react-dialog": "^1.1.5", - "@radix-ui/react-dropdown-menu": "^2.1.5", - "@radix-ui/react-label": "^2.1.1", - "@radix-ui/react-menubar": "^1.1.5", - "@radix-ui/react-popover": "^1.1.5", - "@radix-ui/react-scroll-area": "^1.2.2", - "@radix-ui/react-select": "^2.1.5", - "@radix-ui/react-separator": "^1.1.1", - "@radix-ui/react-switch": "^1.1.2", - "@radix-ui/react-tabs": "^1.1.2", - "@radix-ui/react-toast": "^1.2.5", - "@radix-ui/react-tooltip": "^1.1.7", + "@radix-ui/react-accordion": "^1.2.3", + "@radix-ui/react-checkbox": "^1.1.4", + "@radix-ui/react-dialog": "^1.1.6", + "@radix-ui/react-dropdown-menu": "^2.1.6", + "@radix-ui/react-label": "^2.1.2", + "@radix-ui/react-menubar": "^1.1.6", + "@radix-ui/react-popover": "^1.1.6", + "@radix-ui/react-scroll-area": "^1.2.3", + "@radix-ui/react-select": "^2.1.6", + "@radix-ui/react-separator": "^1.1.2", + "@radix-ui/react-switch": "^1.1.3", + "@radix-ui/react-tabs": "^1.1.3", + "@radix-ui/react-toast": "^1.2.6", + "@radix-ui/react-tooltip": "^1.1.8", "@turf/turf": "^7.2.0", "base64-js": "^1.5.1", "class-validator": "^0.14.1", @@ -56,7 +59,7 @@ "crypto-random-string": "^5.0.0", "immer": "^10.1.1", "js-cookie": "^3.0.5", - "lucide-react": "^0.474.0", + "lucide-react": "^0.475.0", "mapbox-gl": "^3.9.4", "maplibre-gl": "4.1.2", "react": "^19.0.0", @@ -70,21 +73,21 @@ }, "devDependencies": { "@biomejs/biome": "^1.9.4", - "@rsbuild/core": "^1.2.3", + "@rsbuild/core": "^1.2.8", "@rsbuild/plugin-react": "^1.1.0", - "@types/chrome": "^0.0.299", + "@tailwindcss/postcss": "^4.0.7", + "@types/chrome": "^0.0.304", "@types/js-cookie": "^3.0.6", - "@types/node": "^22.12.0", - "@types/react": "^19.0.8", - "@types/react-dom": "^19.0.3", + "@types/node": "^22.13.4", + "@types/react": "^19.0.10", + "@types/react-dom": "^19.0.4", "@types/w3c-web-serial": "^1.0.7", "@types/web-bluetooth": "^0.0.20", - "autoprefixer": "^10.4.20", "gzipper": "^8.2.0", "postcss": "^8.5.1", "simple-git-hooks": "^2.11.1", - "tailwind-merge": "^2.6.0", - "tailwindcss": "^3.4.17", + "tailwind-merge": "^3.0.1", + "tailwindcss": "^4.0.7", "tailwindcss-animate": "^1.0.7", "tar": "^7.4.3", "typescript": "^5.7.3" diff --git a/postcss.config.cjs b/postcss.config.cjs index 12a703d9..e5640725 100644 --- a/postcss.config.cjs +++ b/postcss.config.cjs @@ -1,6 +1,5 @@ module.exports = { plugins: { - tailwindcss: {}, - autoprefixer: {}, + '@tailwindcss/postcss': {}, }, }; diff --git a/src/App.tsx b/src/App.tsx index b512b628..eb5bb1bd 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,6 @@ import { DeviceWrapper } from "@app/DeviceWrapper.tsx"; import { PageRouter } from "@app/PageRouter.tsx"; +import { ThemeProvider } from "@app/components/generic/ThemeProvider"; import { CommandPalette } from "@components/CommandPalette.tsx"; import { DeviceSelector } from "@components/DeviceSelector.tsx"; import { DialogManager } from "@components/Dialog/DialogManager"; @@ -7,10 +8,10 @@ import { NewDeviceDialog } from "@components/Dialog/NewDeviceDialog.tsx"; import { KeyBackupReminder } from "@components/KeyBackupReminder"; import { Toaster } from "@components/Toaster.tsx"; import Footer from "@components/UI/Footer.tsx"; -import { ThemeController } from "@components/generic/ThemeController.tsx"; import { useAppStore } from "@core/stores/appStore.ts"; import { useDeviceStore } from "@core/stores/deviceStore.ts"; import { Dashboard } from "@pages/Dashboard/index.tsx"; +import type { JSX } from "react"; import { MapProvider } from "react-map-gl"; export const App = (): JSX.Element => { @@ -21,7 +22,7 @@ export const App = (): JSX.Element => { const device = getDevice(selectedDevice); return ( - + <> { @@ -31,10 +32,10 @@ export const App = (): JSX.Element => { -
-
+
+
-
+
{device ? (
@@ -45,7 +46,6 @@ export const App = (): JSX.Element => { ) : ( <> -
)} @@ -54,6 +54,6 @@ export const App = (): JSX.Element => {
- + ); }; diff --git a/src/PageRouter.tsx b/src/PageRouter.tsx index 025ee623..e0e33084 100644 --- a/src/PageRouter.tsx +++ b/src/PageRouter.tsx @@ -1,7 +1,7 @@ +import MapPage from "@app/pages/Map/index.tsx"; import { useDevice } from "@core/stores/deviceStore.ts"; import ChannelsPage from "@pages/Channels.tsx"; import ConfigPage from "@pages/Config/index.tsx"; -import MapPage from "@pages/Map.tsx"; import MessagesPage from "@pages/Messages.tsx"; import NodesPage from "@pages/Nodes.tsx"; diff --git a/src/components/CommandPalette.tsx b/src/components/CommandPalette.tsx index 56baddf4..c0f0a94d 100644 --- a/src/components/CommandPalette.tsx +++ b/src/components/CommandPalette.tsx @@ -17,13 +17,10 @@ import { EraserIcon, FactoryIcon, LayersIcon, - LayoutIcon, LinkIcon, type LucideIcon, MapIcon, MessageSquareIcon, - MoonIcon, - PaletteIcon, PlusIcon, PowerIcon, QrCodeIcon, @@ -62,9 +59,6 @@ export const CommandPalette = () => { setSelectedDevice, removeDevice, selectedDevice, - darkMode, - setDarkMode, - setAccent, } = useAppStore(); const { getDevices } = useDeviceStore(); const { setDialogOpen, setActivePage, connection } = useDevice(); @@ -237,116 +231,6 @@ export const CommandPalette = () => { }, ], }, - { - label: "Application", - icon: LayoutIcon, - commands: [ - { - label: "Toggle Dark Mode", - icon: MoonIcon, - action() { - setDarkMode(!darkMode); - }, - }, - { - label: "Accent Color", - icon: PaletteIcon, - subItems: [ - { - label: "Red", - icon: ( - - ), - action() { - setAccent("red"); - }, - }, - { - label: "Orange", - icon: ( - - ), - action() { - setAccent("orange"); - }, - }, - { - label: "Yellow", - icon: ( - - ), - action() { - setAccent("yellow"); - }, - }, - { - label: "Green", - icon: ( - - ), - action() { - setAccent("green"); - }, - }, - { - label: "Blue", - icon: ( - - ), - action() { - setAccent("blue"); - }, - }, - { - label: "Purple", - icon: ( - - ), - action() { - setAccent("purple"); - }, - }, - { - label: "Pink", - icon: ( - - ), - action() { - setAccent("pink"); - }, - }, - ], - }, - ], - }, ]; useEffect(() => { diff --git a/src/components/DeviceSelector.tsx b/src/components/DeviceSelector.tsx index 9816f194..90d0d8a6 100644 --- a/src/components/DeviceSelector.tsx +++ b/src/components/DeviceSelector.tsx @@ -3,15 +3,9 @@ import { Separator } from "@components/UI/Seperator.tsx"; import { Code } from "@components/UI/Typography/Code.tsx"; import { useAppStore } from "@core/stores/appStore.ts"; import { useDeviceStore } from "@core/stores/deviceStore.ts"; -import { - HomeIcon, - LanguagesIcon, - MoonIcon, - PlusIcon, - SearchIcon, - SunIcon, -} from "lucide-react"; +import { HomeIcon, PlusIcon, SearchIcon } from "lucide-react"; import type { JSX } from "react"; +import ThemeSwitcher from "./ThemeSwitcher"; import { Avatar } from "./UI/Avatar"; export const DeviceSelector = (): JSX.Element => { @@ -19,14 +13,12 @@ export const DeviceSelector = (): JSX.Element => { const { selectedDevice, setSelectedDevice, - darkMode, - setDarkMode, setCommandPaletteOpen, setConnectDialogOpen, } = useAppStore(); return ( -