*/}
-
-
-
- {
- close();
- }}
- icon={}
- />
-
-
- {title}
-
-
-
-
{children}
-
-
- )}
-
- );
-};
diff --git a/src/components/generic/Tooltip.tsx b/src/components/generic/Tooltip.tsx
deleted file mode 100644
index 3a657afc..00000000
--- a/src/components/generic/Tooltip.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import 'tippy.js/dist/tippy.css';
-
-import type React from 'react';
-
-import Tippy, { TippyProps } from '@tippyjs/react';
-
-export const Tooltip = ({
- children,
- content,
- ...props
-}: TippyProps): JSX.Element => {
- return (
-
- {children}
-
- );
-};
diff --git a/src/components/generic/button/Button.tsx b/src/components/generic/button/Button.tsx
deleted file mode 100644
index 9286ee7b..00000000
--- a/src/components/generic/button/Button.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import type React from 'react';
-import { useState } from 'react';
-
-import { m } from 'framer-motion';
-import { FiCheck } from 'react-icons/fi';
-
-export enum ButtonSize {
- Small = 'small',
- Medium = 'medium',
- Large = 'large',
-}
-
-export interface ButtonProps {
- icon?: JSX.Element;
- border?: boolean;
- className?: string;
- disabled?: boolean;
- children?: React.ReactNode;
- size?: ButtonSize;
- onClick?: () => void;
- confirmAction?: () => void;
-}
-
-export const Button = ({
- icon,
- className,
- border,
- size = ButtonSize.Medium,
- confirmAction,
- onClick,
- disabled,
- children,
-}: ButtonProps): JSX.Element => {
- const [hasConfirmed, setHasConfirmed] = useState(false);
-
- const handleConfirm = (): void => {
- if (typeof confirmAction == 'function') {
- if (hasConfirmed) {
- void confirmAction();
- }
- setHasConfirmed(true);
- setTimeout(() => {
- setHasConfirmed(false);
- }, 3000);
- }
- };
-
- return (
-
- {icon && (
-
- {hasConfirmed ? : icon}
-
- )}
-
- {children}
-
- );
-};
diff --git a/src/components/generic/button/IconButton.tsx b/src/components/generic/button/IconButton.tsx
deleted file mode 100644
index cdcea998..00000000
--- a/src/components/generic/button/IconButton.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import type React from 'react';
-
-import { m } from 'framer-motion';
-
-import { Tooltip } from '@components/generic/Tooltip';
-
-type DefaulButtonProps = JSX.IntrinsicElements['button'];
-
-export interface IconButtonProps extends DefaulButtonProps {
- icon: React.ReactNode;
- tooltip?: string;
- nested?: boolean;
- active?: boolean;
-}
-
-export const IconButton = ({
- icon,
- tooltip,
- nested,
- active,
- disabled,
- className,
- ...props
-}: IconButtonProps): JSX.Element => {
- return (
-
-
-
- );
-};
diff --git a/src/components/generic/form/Checkbox.tsx b/src/components/generic/form/Checkbox.tsx
deleted file mode 100644
index 4f531b73..00000000
--- a/src/components/generic/form/Checkbox.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import type React from 'react';
-import { forwardRef } from 'react';
-
-import { Label } from '@components/generic/form/Label';
-
-type DefaultInputProps = JSX.IntrinsicElements['input'];
-
-export interface CheckboxProps extends DefaultInputProps {
- action?: (enabled: boolean) => void;
- label: string;
- valid?: boolean;
- validationMessage?: string;
- error?: boolean;
-}
-
-export const Checkbox = forwardRef
(
- function Input(
- { label, valid, validationMessage, id, error, ...props }: CheckboxProps,
- ref,
- ) {
- return (
-
-
-
-
-
- {!valid && (
-
{validationMessage}
- )}
-
- {label &&
}
-
-
- {suffix && (
-
- {suffix}
-
- )}
- {action && {action}
}
-
-
- {children}
-
-);
diff --git a/src/components/generic/form/Label.tsx b/src/components/generic/form/Label.tsx
deleted file mode 100644
index 9a0f0d63..00000000
--- a/src/components/generic/form/Label.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import type React from 'react';
-
-export interface LabelProps {
- label: string;
- error?: string;
-}
-
-export const Label = ({ label, error }: LabelProps): JSX.Element => (
-
-);
diff --git a/src/components/generic/form/Select.tsx b/src/components/generic/form/Select.tsx
deleted file mode 100644
index 8aa64084..00000000
--- a/src/components/generic/form/Select.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import type React from 'react';
-import { forwardRef } from 'react';
-
-import { InputWrapper } from '@components/generic/form/InputWrapper';
-import { Label } from '@components/generic/form/Label';
-
-type DefaultSelectProps = JSX.IntrinsicElements['select'];
-
-export interface SelectProps extends DefaultSelectProps {
- options?: {
- name: string | number;
- value: string | number;
- }[];
- optionsEnum?: { [s: string]: string | number };
- label?: string;
- error?: string;
- small?: boolean;
-}
-
-export const Select = forwardRef(
- ({ options, optionsEnum, label, error, small, ...props }, ref) => {
- const optionsEnumValues = optionsEnum
- ? Object.entries(optionsEnum).filter(
- (value) => typeof value[1] === 'number',
- )
- : [];
- return (
-
- {label && }
-
-
-
-
- );
- },
-);
diff --git a/src/components/layout/AppLayout.tsx b/src/components/layout/AppLayout.tsx
new file mode 100644
index 00000000..5f93647a
--- /dev/null
+++ b/src/components/layout/AppLayout.tsx
@@ -0,0 +1,74 @@
+import type React from "react";
+
+import { majorScale, Pane } from "evergreen-ui";
+
+import { useAppStore } from "@app/core/stores/appStore.js";
+import { DeviceWrapper } from "@app/DeviceWrapper.js";
+import { useDeviceStore } from "@core/stores/deviceStore.js";
+
+import { NoDevice } from "../misc/NoDevice.js";
+import { Progress } from "../Progress.js";
+import { Header } from "./Header.js";
+import { Sidebar } from "./Sidebar/index.js";
+
+export interface AppLayoutProps {
+ children: React.ReactNode;
+}
+
+export const AppLayout = ({ children }: AppLayoutProps): JSX.Element => {
+ const { getDevices } = useDeviceStore();
+ const { selectedDevice } = useAppStore();
+
+ const devices = getDevices();
+
+ return (
+
+
+
+ {devices.length ? (
+ devices.map((device, index) => (
+
+
+ {device && device.ready ? (
+ <>
+
+
+ {children}
+
+
+ ) : (
+ <>
+
+
+
+ )}
+
+
+ ))
+ ) : (
+
+ )}
+
+
+ );
+};
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
new file mode 100644
index 00000000..2167781b
--- /dev/null
+++ b/src/components/layout/Header.tsx
@@ -0,0 +1,147 @@
+import type React from "react";
+import { useState } from "react";
+
+import {
+ Button,
+ CrossIcon,
+ GlobeIcon,
+ IconButton,
+ Link,
+ majorScale,
+ Pane,
+ PlusIcon,
+ StatusIndicator,
+ Tab,
+ Tablist,
+ Tooltip,
+} from "evergreen-ui";
+import { FiGithub } from "react-icons/fi";
+
+import { useAppStore } from "@app/core/stores/appStore.js";
+import { NewDevice } from "@components/SlideSheets/NewDevice.js";
+import { useDeviceStore } from "@core/stores/deviceStore.js";
+import { Hashicon } from "@emeraldpay/hashicon-react";
+import { Types } from "@meshtastic/meshtasticjs";
+
+export const Header = (): JSX.Element => {
+ const { getDevices, removeDevice } = useDeviceStore();
+ const [newConnectionOpen, setNewConnectionOpen] = useState(false);
+ const { selectedDevice, setSelectedDevice } = useAppStore();
+
+ return (
+
+ {
+ setNewConnectionOpen(false);
+ }}
+ />
+
+
+
+
+
+
+ {getDevices().map((device, index) => (
+ {
+ setSelectedDevice(index);
+ }}
+ >
+
+ {device.nodes.find((n) => n.data.num === device.hardware.myNodeNum)
+ ?.data.user?.shortName ?? "UNK"}
+
+
+ ))}
+
+
+
+ }
+ onClick={() => {
+ setNewConnectionOpen(true);
+ }}
+ >
+ New
+
+
+ {getDevices().length !== 0 && (
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/layout/Sidebar/DeviceCard.tsx b/src/components/layout/Sidebar/DeviceCard.tsx
new file mode 100644
index 00000000..debde3e9
--- /dev/null
+++ b/src/components/layout/Sidebar/DeviceCard.tsx
@@ -0,0 +1,103 @@
+import type React from "react";
+
+import {
+ Badge,
+ Heading,
+ Link,
+ majorScale,
+ MapMarkerIcon,
+ Pane,
+} from "evergreen-ui";
+import { FiBluetooth, FiTerminal, FiWifi } from "react-icons/fi";
+
+import { toMGRS } from "@app/core/utils/toMGRS.js";
+import { useDevice } from "@core/stores/deviceStore.js";
+import { Hashicon } from "@emeraldpay/hashicon-react";
+import { Types } from "@meshtastic/meshtasticjs";
+
+export const DeviceCard = (): JSX.Element => {
+ const { hardware, nodes, status, connection } = useDevice();
+ const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum);
+
+ return (
+
+
+
+
+ {myNode?.data.user?.longName}
+
+
+ {hardware.firmwareVersion}
+
+
+
+
+
+
+
+ {toMGRS(
+ myNode?.data.position?.latitudeI,
+ myNode?.data.position?.longitudeI
+ )}
+
+
+
+ {connection?.connType === "ble" && }
+ {connection?.connType === "http" && }
+ {connection?.connType === "serial" && }
+
+ {[
+ Types.DeviceStatusEnum.DEVICE_CONNECTED,
+ Types.DeviceStatusEnum.DEVICE_CONFIGURED,
+ Types.DeviceStatusEnum.DEVICE_CONFIGURING,
+ ].includes(status)
+ ? "Connected"
+ : [
+ Types.DeviceStatusEnum.DEVICE_CONNECTING,
+ Types.DeviceStatusEnum.DEVICE_RECONNECTING,
+ Types.DeviceStatusEnum.DEVICE_CONNECTED,
+ ].includes(status)
+ ? "Connecting"
+ : "Disconnected"}
+
+
+
+ );
+};
diff --git a/src/components/layout/Sidebar/Settings/Device.tsx b/src/components/layout/Sidebar/Settings/Device.tsx
deleted file mode 100644
index dff42f9b..00000000
--- a/src/components/layout/Sidebar/Settings/Device.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import type React from 'react';
-import { useEffect, useState } from 'react';
-
-import { useForm } from 'react-hook-form';
-
-import { Checkbox } from '@components/generic/form/Checkbox';
-import { Form } from '@components/generic/form/Form';
-import { Select } from '@components/generic/form/Select';
-import { connection } from '@core/connection';
-import { useAppSelector } from '@hooks/useAppSelector';
-import { Protobuf } from '@meshtastic/meshtasticjs';
-
-export const Device = (): JSX.Element => {
- const deviceConfig = useAppSelector(
- (state) => state.meshtastic.radio.config.device,
- );
- const [loading, setLoading] = useState(false);
- const { register, handleSubmit, formState, reset } =
- useForm({
- defaultValues: deviceConfig,
- });
-
- useEffect(() => {
- reset(deviceConfig);
- }, [reset, deviceConfig]);
-
- const onSubmit = handleSubmit((data) => {
- setLoading(true);
- void connection.setConfig(
- {
- payloadVariant: {
- oneofKind: 'device',
- device: data,
- },
- },
- async () => {
- reset({ ...data });
- setLoading(false);
- await Promise.resolve();
- },
- );
- });
- return (
-
- );
-};
diff --git a/src/components/layout/Sidebar/Settings/Display.tsx b/src/components/layout/Sidebar/Settings/Display.tsx
deleted file mode 100644
index 4b055e36..00000000
--- a/src/components/layout/Sidebar/Settings/Display.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import type React from 'react';
-import { useEffect, useState } from 'react';
-
-import { useForm } from 'react-hook-form';
-
-import { Form } from '@components/generic/form/Form';
-import { Input } from '@components/generic/form/Input';
-import { Select } from '@components/generic/form/Select';
-import { connection } from '@core/connection';
-import { useAppSelector } from '@hooks/useAppSelector';
-import { Protobuf } from '@meshtastic/meshtasticjs';
-
-export const Display = (): JSX.Element => {
- const displayConfig = useAppSelector(
- (state) => state.meshtastic.radio.config.display,
- );
- const [loading, setLoading] = useState(false);
- const { register, handleSubmit, formState, reset } =
- useForm({
- defaultValues: displayConfig,
- });
-
- useEffect(() => {
- reset(displayConfig);
- }, [reset, displayConfig]);
-
- const onSubmit = handleSubmit((data) => {
- setLoading(true);
- void connection.setConfig(
- {
- payloadVariant: {
- oneofKind: 'display',
- display: data,
- },
- },
- async () => {
- reset({ ...data });
- setLoading(false);
- await Promise.resolve();
- },
- );
- });
- return (
-
- );
-};
diff --git a/src/components/layout/Sidebar/Settings/Index.tsx b/src/components/layout/Sidebar/Settings/Index.tsx
deleted file mode 100644
index 2c8bf31f..00000000
--- a/src/components/layout/Sidebar/Settings/Index.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-import type React from 'react';
-import { useState } from 'react';
-
-import {
- FiActivity,
- FiAlignLeft,
- FiBell,
- FiFastForward,
- FiLayers,
- FiLayout,
- FiMapPin,
- FiMessageSquare,
- FiPackage,
- FiPower,
- FiRss,
- FiSmartphone,
- FiTv,
- FiUser,
- FiWifi,
-} from 'react-icons/fi';
-
-import { CollapsibleSection } from '@components/generic/Sidebar/CollapsibleSection';
-import { ExternalSection } from '@components/generic/Sidebar/ExternalSection';
-import { SidebarOverlay } from '@components/generic/Sidebar/SidebarOverlay';
-import { ChannelsGroup } from '@components/layout/Sidebar/Settings/channels/ChannelsGroup';
-import { Display } from '@components/layout/Sidebar/Settings/Display';
-import { Position } from '@app/components/layout/Sidebar/Settings/Position';
-import { Interface } from '@components/layout/Sidebar/Settings/Interface';
-import { LoRa } from '@components/layout/Sidebar/Settings/LoRa';
-import { CannedMessage } from '@components/layout/Sidebar/Settings/modules/CannedMessage';
-import { ExternalNotificationsSettingsPlanel } from '@components/layout/Sidebar/Settings/modules/ExternalNotifications';
-import { MQTT } from '@components/layout/Sidebar/Settings/modules/MQTT';
-import { RangeTestSettingsPanel } from '@components/layout/Sidebar/Settings/modules/RangeTest';
-import { SerialSettingsPanel } from '@components/layout/Sidebar/Settings/modules/Serial';
-import { StoreForwardSettingsPanel } from '@components/layout/Sidebar/Settings/modules/StoreForward';
-import { Telemetry } from '@components/layout/Sidebar/Settings/modules/Telemetry';
-import { Power } from '@components/layout/Sidebar/Settings/Power';
-import { User } from '@components/layout/Sidebar/Settings/User';
-import { WiFi } from '@components/layout/Sidebar/Settings/WiFi';
-import { useAppSelector } from '@hooks/useAppSelector';
-
-export interface SettingsProps {
- open: boolean;
- setOpen: (open: boolean) => void;
-}
-
-export const Settings = ({ open, setOpen }: SettingsProps): JSX.Element => {
- const [modulesOpen, setModulesOpen] = useState(false);
- const [channelsOpen, setChannelsOpen] = useState(false);
- const moduleConfig = useAppSelector(
- (state) => state.meshtastic.radio.moduleConfig,
- );
-
- const hasGps = true;
- const hasWifi = true;
-
- return (
- <>
- {
- setOpen(false);
- }}
- direction="y"
- >
- } title="User">
-
-
- } title="Device">
-
-
- } title="Position">
-
-
- } title="Power">
-
-
- } title="WiFi">
-
-
- } title="Display">
-
-
- } title="LoRa">
-
-
- {
- setChannelsOpen(true);
- }}
- icon={}
- title="Channels"
- />
- {
- setModulesOpen(true);
- }}
- icon={}
- title="Modules"
- />
- } title="Interface">
-
-
-
-
- {/* Modules */}
- {
- setModulesOpen(false);
- }}
- direction="x"
- >
- }
- title="MQTT"
- status={!moduleConfig.mqtt.disabled}
- >
-
-
- }
- title="Serial"
- status={moduleConfig.serial.enabled}
- >
-
-
- }
- title="External Notifications"
- status={moduleConfig.extNotification.enabled}
- >
-
-
- }
- title="Store & Forward"
- status={moduleConfig.storeForward.enabled}
- >
-
-
- }
- title="Range Test"
- status={moduleConfig.rangeTest.enabled}
- >
-
-
- }
- title="Telemetry"
- status={true}
- >
-
-
- }
- title="Canned Message"
- status={moduleConfig.cannedMessage.enabled}
- >
-
-
-
- {/* End Modules */}
-
- {/* Channels */}
- {
- setChannelsOpen(false);
- }}
- direction="x"
- >
-
-
- {/* End Channels */}
-
- );
-};
diff --git a/src/components/layout/Sidebar/Settings/Interface.tsx b/src/components/layout/Sidebar/Settings/Interface.tsx
deleted file mode 100644
index b1284ab0..00000000
--- a/src/components/layout/Sidebar/Settings/Interface.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import type React from 'react';
-
-import { Select } from '@components/generic/form/Select';
-
-export const Interface = (): JSX.Element => {
- return (
-