{
diff --git a/src/components/menu/Navigation.tsx b/src/components/menu/Navigation.tsx
index c014b15c..00ef2258 100644
--- a/src/components/menu/Navigation.tsx
+++ b/src/components/menu/Navigation.tsx
@@ -1,19 +1,11 @@
import type React from 'react';
-import { FiGrid, FiMessageSquare, FiPackage, FiSettings } from 'react-icons/fi';
+import { FiGrid, FiMessageSquare, FiSettings } from 'react-icons/fi';
import type { Link } from 'type-route';
import { routes, useRoute } from '@core/router';
-type DefaultDivProps = JSX.IntrinsicElements['div'];
-
-export type NavigationProps = DefaultDivProps;
-
-export const Navigation = ({
- onClick,
- className,
- ...props
-}: NavigationProps): JSX.Element => {
+export const Navigation = (): JSX.Element => {
const route = useRoute();
return (
@@ -34,13 +26,6 @@ export const Navigation = ({
link={routes.nodes().link}
/>
-
}
- active={route.name === 'plugins'}
- link={routes.plugins().link}
- />
-
}
diff --git a/src/components/modals/VersionInfo.tsx b/src/components/modals/VersionInfo.tsx
new file mode 100644
index 00000000..c1615877
--- /dev/null
+++ b/src/components/modals/VersionInfo.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { Modal } from '@components/generic/Modal';
+import { Card } from '@meshtastic/components';
+
+export interface VersionInfoProps {
+ visible: boolean;
+ onclose: () => void;
+}
+
+export const VersionInfo = ({
+ visible,
+ onclose,
+}: VersionInfoProps): JSX.Element => {
+ // const { data } = useSWR
(
+ // `query {
+ // repository(owner: "meshtastic", name: "meshtastic-web") {
+ // ref(qualifiedName: "master") {
+ // name
+ // target {
+ // ... on Commit {
+ // history(first: 4) {
+ // edges {
+ // node {
+ // abbreviatedOid
+ // message
+ // author {
+ // avatarUrl
+ // name
+ // }
+ // }
+ // }
+ // }
+ // }
+ // }
+ // }
+ // }
+ // }`,
+ // fetcher,
+ // );
+ // console.log(data);
+
+ return (
+ {
+ onclose();
+ }}
+ >
+
+ Version Info
+ {/* {data?.sha} */}
+
+
+ );
+};
diff --git a/src/components/pages/settings/plugins/PluginsSidebar.tsx b/src/components/pages/settings/plugins/PluginsSidebar.tsx
new file mode 100644
index 00000000..73ea39c7
--- /dev/null
+++ b/src/components/pages/settings/plugins/PluginsSidebar.tsx
@@ -0,0 +1,76 @@
+import type React from 'react';
+
+import { FiCode, FiSliders } from 'react-icons/fi';
+
+import { TabButton } from '@app/components/TabButton';
+import type { Plugin } from '@app/pages/settings/Plugins';
+import { Sidebar } from '@components/generic/Sidebar';
+import { Tab } from '@headlessui/react';
+
+import { ExternalNotificationsDebugPanel } from './panels/ExternalNotifications/DebugPanel';
+import { ExternalNotificationsSettingsPlanel } from './panels/ExternalNotifications/SettingsPlanel';
+import { RangeTestDebugPanel } from './panels/RangeTest/DebugPanel';
+import { RangeTestSettingsPanel } from './panels/RangeTest/SettingsPanel';
+import { SerialDebugPanel } from './panels/Serial/DebugPanel';
+import { SerialSettingsPanel } from './panels/Serial/SettingsPanel';
+import { StoreForwardDebugPanel } from './panels/StoreForward/DebugPanel';
+import { StoreForwardSettingsPanel } from './panels/StoreForward/SettingsPanel';
+
+export interface PluginsSidebarProps {
+ plugin?: Plugin;
+ closeSidebar: () => void;
+}
+
+export const PluginsSidebar = ({
+ plugin,
+ closeSidebar,
+}: PluginsSidebarProps): JSX.Element => {
+ return (
+
+ {plugin && (
+
+
+
+
+
+
+
+
+
+
+
+
+ {plugin === 'Range Test' && (
+ <>
+
+
+
+ )}
+ {plugin === 'External Notifications' && (
+ <>
+
+
+
+ )}
+ {plugin === 'Serial' && (
+ <>
+
+
+
+ )}
+ {plugin === 'Store & Forward' && (
+ <>
+
+
+
+ )}
+
+
+ )}
+
+ );
+};
diff --git a/src/components/pages/settings/plugins/panels/ExternalNotifications/DebugPanel.tsx b/src/components/pages/settings/plugins/panels/ExternalNotifications/DebugPanel.tsx
new file mode 100644
index 00000000..95dba259
--- /dev/null
+++ b/src/components/pages/settings/plugins/panels/ExternalNotifications/DebugPanel.tsx
@@ -0,0 +1,32 @@
+import type React from 'react';
+
+import JSONPretty from 'react-json-pretty';
+
+import { useAppSelector } from '@app/hooks/useAppSelector';
+import { CopyButton } from '@components/menu/buttons/CopyButton';
+import { Tab } from '@headlessui/react';
+
+export const ExternalNotificationsDebugPanel = (): JSX.Element => {
+ const preferences = useAppSelector(
+ (state) => state.meshtastic.radio.preferences,
+ );
+
+ const debugData = {
+ extNotificationPluginActive: preferences.extNotificationPluginActive,
+ extNotificationPluginAlertBell: preferences.extNotificationPluginAlertBell,
+ extNotificationPluginAlertMessage:
+ preferences.extNotificationPluginAlertMessage,
+ extNotificationPluginEnabled: preferences.extNotificationPluginEnabled,
+ extNotificationPluginOutput: preferences.extNotificationPluginOutput,
+ extNotificationPluginOutputMs: preferences.extNotificationPluginOutputMs,
+ };
+
+ return (
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/pages/settings/plugins/panels/ExternalNotifications/SettingsPlanel.tsx b/src/components/pages/settings/plugins/panels/ExternalNotifications/SettingsPlanel.tsx
new file mode 100644
index 00000000..781bab8e
--- /dev/null
+++ b/src/components/pages/settings/plugins/panels/ExternalNotifications/SettingsPlanel.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+
+import { useForm, useWatch } from 'react-hook-form';
+import { FiSave } from 'react-icons/fi';
+
+import { Form } from '@app/components/generic/form/Form';
+import { connection } from '@app/core/connection';
+import { useAppSelector } from '@app/hooks/useAppSelector';
+import { Tab } from '@headlessui/react';
+import { Checkbox, IconButton, Input } from '@meshtastic/components';
+import type { Protobuf } from '@meshtastic/meshtasticjs';
+
+export const ExternalNotificationsSettingsPlanel = (): JSX.Element => {
+ const [loading, setLoading] = React.useState(false);
+
+ const preferences = useAppSelector(
+ (state) => state.meshtastic.radio.preferences,
+ );
+
+ const { register, handleSubmit, formState, reset, control } =
+ useForm({
+ defaultValues: preferences,
+ });
+
+ React.useEffect(() => {
+ reset(preferences);
+ }, [reset, preferences]);
+
+ const onSubmit = handleSubmit(async (data) => {
+ setLoading(true);
+ await connection.setPreferences(data, async (): Promise => {
+ reset({ ...data });
+ setLoading(false);
+ await Promise.resolve();
+ });
+ });
+
+ const pluginEnabled = useWatch({
+ control,
+ name: 'extNotificationPluginEnabled',
+ defaultValue: false,
+ });
+
+ return (
+
+
+
+
+ => {
+ await onSubmit();
+ }}
+ icon={}
+ />
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/pages/settings/plugins/panels/RangeTest/SettingsPanel.tsx b/src/components/pages/settings/plugins/panels/RangeTest/SettingsPanel.tsx
new file mode 100644
index 00000000..ec5c4c2a
--- /dev/null
+++ b/src/components/pages/settings/plugins/panels/RangeTest/SettingsPanel.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+
+import { useForm, useWatch } from 'react-hook-form';
+import { FiSave } from 'react-icons/fi';
+
+import { Form } from '@app/components/generic/form/Form';
+import { connection } from '@app/core/connection';
+import { useAppSelector } from '@app/hooks/useAppSelector';
+import { Tab } from '@headlessui/react';
+import { Checkbox, IconButton, Input } from '@meshtastic/components';
+import type { Protobuf } from '@meshtastic/meshtasticjs';
+
+export const RangeTestSettingsPanel = (): JSX.Element => {
+ const [loading, setLoading] = React.useState(false);
+
+ const preferences = useAppSelector(
+ (state) => state.meshtastic.radio.preferences,
+ );
+
+ const { register, handleSubmit, formState, reset, control } =
+ useForm({
+ defaultValues: preferences,
+ });
+
+ React.useEffect(() => {
+ reset(preferences);
+ }, [reset, preferences]);
+
+ const onSubmit = handleSubmit(async (data) => {
+ setLoading(true);
+ await connection.setPreferences(data, async (): Promise => {
+ reset({ ...data });
+ setLoading(false);
+ await Promise.resolve();
+ });
+ });
+
+ const pluginEnabled = useWatch({
+ control,
+ name: 'rangeTestPluginEnabled',
+ defaultValue: false,
+ });
+
+ return (
+
+
+
+
+ => {
+ await onSubmit();
+ }}
+ icon={}
+ />
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/pages/settings/plugins/panels/Serial/SettingsPanel.tsx b/src/components/pages/settings/plugins/panels/Serial/SettingsPanel.tsx
new file mode 100644
index 00000000..e5afb96b
--- /dev/null
+++ b/src/components/pages/settings/plugins/panels/Serial/SettingsPanel.tsx
@@ -0,0 +1,100 @@
+import React from 'react';
+
+import { useForm, useWatch } from 'react-hook-form';
+import { FiSave } from 'react-icons/fi';
+
+import { Form } from '@app/components/generic/form/Form';
+import { connection } from '@app/core/connection';
+import { useAppSelector } from '@app/hooks/useAppSelector';
+import { Tab } from '@headlessui/react';
+import { Checkbox, IconButton, Input } from '@meshtastic/components';
+import type { Protobuf } from '@meshtastic/meshtasticjs';
+
+export const SerialSettingsPanel = (): JSX.Element => {
+ const [loading, setLoading] = React.useState(false);
+
+ const preferences = useAppSelector(
+ (state) => state.meshtastic.radio.preferences,
+ );
+
+ const { register, handleSubmit, formState, reset, control } =
+ useForm({
+ defaultValues: preferences,
+ });
+
+ React.useEffect(() => {
+ reset(preferences);
+ }, [reset, preferences]);
+
+ const onSubmit = handleSubmit(async (data) => {
+ setLoading(true);
+ await connection.setPreferences(data, async (): Promise => {
+ reset({ ...data });
+ setLoading(false);
+ await Promise.resolve();
+ });
+ });
+
+ const pluginEnabled = useWatch({
+ control,
+ name: 'serialpluginEnabled',
+ defaultValue: false,
+ });
+
+ return (
+
+
+
+
+ => {
+ await onSubmit();
+ }}
+ icon={}
+ />
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/pages/settings/plugins/panels/StoreForward/SettingsPanel.tsx b/src/components/pages/settings/plugins/panels/StoreForward/SettingsPanel.tsx
new file mode 100644
index 00000000..b5150693
--- /dev/null
+++ b/src/components/pages/settings/plugins/panels/StoreForward/SettingsPanel.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+
+import { useForm, useWatch } from 'react-hook-form';
+import { FiSave } from 'react-icons/fi';
+
+import { Form } from '@app/components/generic/form/Form';
+import { connection } from '@app/core/connection';
+import { useAppSelector } from '@app/hooks/useAppSelector';
+import { Tab } from '@headlessui/react';
+import { Checkbox, IconButton, Input } from '@meshtastic/components';
+import type { Protobuf } from '@meshtastic/meshtasticjs';
+
+export const StoreForwardSettingsPanel = (): JSX.Element => {
+ const [loading, setLoading] = React.useState(false);
+
+ const preferences = useAppSelector(
+ (state) => state.meshtastic.radio.preferences,
+ );
+
+ const { register, handleSubmit, formState, reset, control } =
+ useForm({
+ defaultValues: preferences,
+ });
+
+ React.useEffect(() => {
+ reset(preferences);
+ }, [reset, preferences]);
+
+ const onSubmit = handleSubmit(async (data) => {
+ setLoading(true);
+ await connection.setPreferences(data, async (): Promise => {
+ reset({ ...data });
+ setLoading(false);
+ await Promise.resolve();
+ });
+ });
+
+ const pluginEnabled = useWatch({
+ control,
+ name: 'storeForwardPluginEnabled',
+ defaultValue: false,
+ });
+
+ return (
+
+
+
+
+ => {
+ await onSubmit();
+ }}
+ icon={}
+ />
+
+
>;
-}
-
-export const ExternalNotification = ({
- navOpen,
- setNavOpen,
-}: ExternalNotificationProps): JSX.Element => {
- const preferences = useAppSelector(
- (state) => state.meshtastic.radio.preferences,
- );
-
- const { register, handleSubmit, formState, reset, control } =
- useForm({
- defaultValues: {
- extNotificationPluginActive: preferences.extNotificationPluginActive,
- extNotificationPluginAlertBell:
- preferences.extNotificationPluginAlertBell,
- extNotificationPluginAlertMessage:
- preferences.extNotificationPluginAlertMessage,
- extNotificationPluginEnabled: preferences.extNotificationPluginEnabled,
- extNotificationPluginOutput: preferences.extNotificationPluginOutput,
- extNotificationPluginOutputMs:
- preferences.extNotificationPluginOutputMs,
- },
- });
-
- React.useEffect(() => {
- reset({
- extNotificationPluginActive: preferences.extNotificationPluginActive,
- extNotificationPluginAlertBell:
- preferences.extNotificationPluginAlertBell,
- extNotificationPluginAlertMessage:
- preferences.extNotificationPluginAlertMessage,
- extNotificationPluginEnabled: preferences.extNotificationPluginEnabled,
- extNotificationPluginOutput: preferences.extNotificationPluginOutput,
- extNotificationPluginOutputMs: preferences.extNotificationPluginOutputMs,
- });
- }, [reset, preferences]);
-
- const onSubmit = handleSubmit((data) => {
- void connection.setPreferences(data, async (): Promise => {
- //add loading indicator
- reset({ ...data });
- await Promise.resolve();
- });
- });
-
- //todo, add loading indicator
-
- const watchExternalNotificationPluginEnabled = useWatch({
- control,
- name: 'extNotificationPluginEnabled',
- defaultValue: false,
- });
-
- return (
- }
- onClick={(): void => {
- setNavOpen && setNavOpen(!navOpen);
- }}
- />
- }
- footer={
-
- }
- >
-
-
- );
-};
diff --git a/src/pages/Plugins/Files.tsx b/src/pages/Plugins/Files.tsx
deleted file mode 100644
index ccf0b5c4..00000000
--- a/src/pages/Plugins/Files.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import type React from 'react';
-
-// import { DefaultExtensionType, defaultStyles, FileIcon } from 'react-file-icon';
-import { FiMenu, FiTrash, FiUploadCloud } from 'react-icons/fi';
-import useSWR from 'swr';
-
-import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
-import { connectionUrl } from '@core/connection';
-import fetcher from '@core/utils/fetcher';
-import { Card, IconButton } from '@meshtastic/components';
-
-export interface RangeTestProps {
- navOpen?: boolean;
- setNavOpen?: React.Dispatch>;
-}
-interface IFile {
- name: string;
- nameModified: string;
- size: number;
-}
-interface IFiles {
- data: {
- files: IFile[];
- filesystem: {
- free: number;
- total: number;
- used: number;
- };
- };
-
- status: boolean;
-}
-
-export const Files = ({ navOpen, setNavOpen }: RangeTestProps): JSX.Element => {
- const { data } = useSWR(
- `http://${connectionUrl}/json/spiffs/browse/static`,
- fetcher,
- );
-
- return (
- }
- onClick={(): void => {
- setNavOpen && setNavOpen(!navOpen);
- }}
- />
- }
- >
-
-
- {data ? (
-
-
-
- {JSON.stringify(data.data.filesystem.used)} bytes total
-
-
Loading...
- )}
-
-
} />}
- className="md:w-1/3"
- >
- {data ? (
-
- {data.data.files.map((file: IFile) => (
-
-
-
=> {
- // await fetch(
- // `http://${connectionUrl}/json/spiffs/delete/static?remove=${file.name}`,
- // {
- // method: 'DELETE',
- // },
- // );
- // }}
- icon={}
- />
-
- ))}
-
- ) : (
-
Loading...
- )}
-
-
+ {plugins.map((plugin, index) => (
+
{
+ setSelectedPlugin(plugin.name);
+ setSidebarOpen(true);
+ }}
+ className={`flex justify-between p-2 border border-gray-300 dark:border-gray-600 bg-gray-100 rounded-md dark:bg-secondaryDark shadow-md ${
+ selectedPlugin === plugin.name
+ ? 'border-primary dark:border-primary'
+ : ''
+ }`}
+ >
+
+
+
+
{plugin.icon}
+ {plugin.name}
+
+
+
+ } />
+
+
+ ))}
+