Updated channel editor + fixes

src/pages/Plugins/ExternalNotification.tsx

@@ -0,0 +1,117 @@
+import type React from 'react';
+
+import { useForm, useWatch } from 'react-hook-form';
+import { FiMenu } from 'react-icons/fi';
+
+import { FormFooter } from '@app/components/FormFooter';
+import { connection } from '@app/core/connection';
+import { useAppSelector } from '@app/hooks/redux';
+import { Card } from '@components/generic/Card';
+import { Checkbox } from '@components/generic/form/Checkbox';
+import { Input } from '@components/generic/form/Input';
+import { IconButton } from '@components/generic/IconButton';
+import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
+import type { RadioConfig_UserPreferences } from '@meshtastic/meshtasticjs/dist/generated';
+
+export interface ExternalNotificationProps {
+  navOpen?: boolean;
+  setNavOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const ExternalNotification = ({
+  navOpen,
+  setNavOpen,
+}: ExternalNotificationProps): JSX.Element => {
+  const preferences = useAppSelector((state) => state.meshtastic.preferences);
+
+  const { register, handleSubmit, formState, reset, control } =
+    useForm<RadioConfig_UserPreferences>({
+      defaultValues: {
+        extNotificationPluginActive: preferences.extNotificationPluginActive,
+        extNotificationPluginAlertBell:
+          preferences.extNotificationPluginAlertBell,
+        extNotificationPluginAlertMessage:
+          preferences.extNotificationPluginAlertMessage,
+        extNotificationPluginEnabled: preferences.extNotificationPluginEnabled,
+        extNotificationPluginOutput: preferences.extNotificationPluginOutput,
+        extNotificationPluginOutputMs:
+          preferences.extNotificationPluginOutputMs,
+      },
+    });
+
+  const onSubmit = handleSubmit((data) => {
+    void connection.setPreferences(data);
+  });
+
+  const watchExternalNotificationPluginEnabled = useWatch({
+    control,
+    name: 'extNotificationPluginEnabled',
+    defaultValue: false,
+  });
+
+  return (
+    <PrimaryTemplate
+      title="External Notification"
+      tagline="Plugin"
+      leftButton={
+        <IconButton
+          icon={<FiMenu className="w-5 h-5" />}
+          onClick={(): void => {
+            setNavOpen && setNavOpen(!navOpen);
+          }}
+        />
+      }
+      footer={
+        <FormFooter
+          dirty={formState.isDirty}
+          saveAction={onSubmit}
+          clearAction={reset}
+        />
+      }
+    >
+      <div className="w-full space-y-4">
+        <Card>
+          <div className="w-full max-w-3xl p-10 md:max-w-xl">
+            <form onSubmit={onSubmit}>
+              <Checkbox
+                label="Plugin Enabled"
+                {...register('extNotificationPluginEnabled')}
+              />
+              <Checkbox
+                label="Active"
+                disabled={!watchExternalNotificationPluginEnabled}
+                {...register('extNotificationPluginActive')}
+              />
+              <Checkbox
+                label="Bell"
+                disabled={!watchExternalNotificationPluginEnabled}
+                {...register('extNotificationPluginAlertBell')}
+              />
+              <Checkbox
+                label="Message"
+                disabled={!watchExternalNotificationPluginEnabled}
+                {...register('extNotificationPluginAlertMessage')}
+              />
+              <Input
+                type="number"
+                label="Output"
+                disabled={!watchExternalNotificationPluginEnabled}
+                {...register('extNotificationPluginOutput', {
+                  valueAsNumber: true,
+                })}
+              />
+              <Input
+                type="number"
+                label="Output MS"
+                disabled={!watchExternalNotificationPluginEnabled}
+                {...register('extNotificationPluginOutputMs', {
+                  valueAsNumber: true,
+                })}
+              />
+            </form>
+          </div>
+        </Card>
+      </div>
+    </PrimaryTemplate>
+  );
+};

src/pages/Plugins/Index.tsx

@@ -1,11 +1,13 @@
 import type React from 'react';
 
-import { FiFileText, FiRss } from 'react-icons/fi';
+import { FiAlignLeft, FiBell, FiFileText, FiRss } from 'react-icons/fi';
 
 import { PageLayout } from '@components/templates/PageLayout';
 
+import { ExternalNotification } from './ExternalNotification';
 import { Files } from './Files';
 import { RangeTest } from './RangeTest';
+import { Serial } from './Serial';
 
 export const Plugins = (): JSX.Element => {
   return (
@@ -22,8 +24,23 @@ export const Plugins = (): JSX.Element => {
           description: 'HTTP only file browser',
           icon: <FiFileText className="flex-shrink-0 w-6 h-6" />,
         },
+        {
+          title: 'External Notification',
+          description: 'External hardware alerts',
+          icon: <FiBell className="flex-shrink-0 w-6 h-6" />,
+        },
+        {
+          title: 'Serial',
+          description: 'Send serial data over the mesh',
+          icon: <FiAlignLeft className="flex-shrink-0 w-6 h-6" />,
+        },
+      ]}
+      panels={[
+        <RangeTest key={1} />,
+        <Files key={2} />,
+        <ExternalNotification key={3} />,
+        <Serial key={4} />,
       ]}
-      panels={[<RangeTest key={1} />, <Files key={2} />]}
     />
   );
 };

src/pages/Plugins/RangeTest.tsx

@@ -1,7 +1,6 @@
 import type React from 'react';
 
 import { useForm, useWatch } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
 import { FiMenu } from 'react-icons/fi';
 
 import { FormFooter } from '@app/components/FormFooter';
@@ -23,7 +22,6 @@ export const RangeTest = ({
   navOpen,
   setNavOpen,
 }: RangeTestProps): JSX.Element => {
-  const { t } = useTranslation();
   const preferences = useAppSelector((state) => state.meshtastic.preferences);
 
   const { register, handleSubmit, formState, reset, control } =
@@ -66,7 +64,7 @@ export const RangeTest = ({
       }
     >
       <div className="w-full space-y-4">
-        <Card title="Range Test" description="Settings">
+        <Card>
           <div className="w-full max-w-3xl p-10 md:max-w-xl">
             <form onSubmit={onSubmit}>
               <Checkbox

src/pages/Plugins/Serial.tsx

@@ -0,0 +1,118 @@
+import type React from 'react';
+
+import { useForm, useWatch } from 'react-hook-form';
+import { FiMenu } from 'react-icons/fi';
+
+import { FormFooter } from '@app/components/FormFooter';
+import { connection } from '@app/core/connection';
+import { useAppSelector } from '@app/hooks/redux';
+import { Card } from '@components/generic/Card';
+import { Checkbox } from '@components/generic/form/Checkbox';
+import { Input } from '@components/generic/form/Input';
+import { IconButton } from '@components/generic/IconButton';
+import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
+import type { RadioConfig_UserPreferences } from '@meshtastic/meshtasticjs/dist/generated';
+
+export interface SerialProps {
+  navOpen?: boolean;
+  setNavOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const Serial = ({ navOpen, setNavOpen }: SerialProps): JSX.Element => {
+  const preferences = useAppSelector((state) => state.meshtastic.preferences);
+
+  const { register, handleSubmit, formState, reset, control } =
+    useForm<RadioConfig_UserPreferences>({
+      defaultValues: {
+        serialpluginEnabled: preferences.serialpluginEnabled,
+        serialpluginEcho: preferences.serialpluginEcho,
+        serialpluginMode: preferences.serialpluginMode,
+        serialpluginRxd: preferences.serialpluginRxd,
+        serialpluginTimeout: preferences.serialpluginTimeout,
+        serialpluginTxd: preferences.serialpluginTxd,
+      },
+    });
+
+  const onSubmit = handleSubmit((data) => {
+    void connection.setPreferences(data);
+  });
+
+  const watchSerialPluginEnabled = useWatch({
+    control,
+    name: 'serialpluginEnabled',
+    defaultValue: false,
+  });
+
+  return (
+    <PrimaryTemplate
+      title="Serial"
+      tagline="Plugin"
+      leftButton={
+        <IconButton
+          icon={<FiMenu className="w-5 h-5" />}
+          onClick={(): void => {
+            setNavOpen && setNavOpen(!navOpen);
+          }}
+        />
+      }
+      footer={
+        <FormFooter
+          dirty={formState.isDirty}
+          saveAction={onSubmit}
+          clearAction={reset}
+        />
+      }
+    >
+      <div className="w-full space-y-4">
+        <Card>
+          <div className="w-full max-w-3xl p-10 md:max-w-xl">
+            <form onSubmit={onSubmit}>
+              <Checkbox
+                label="Plugin Enabled"
+                {...register('serialpluginEnabled')}
+              />
+              <Checkbox
+                label="Echo"
+                disabled={!watchSerialPluginEnabled}
+                {...register('serialpluginEcho')}
+              />
+
+              <Input
+                type="number"
+                label="RX"
+                disabled={!watchSerialPluginEnabled}
+                {...register('serialpluginRxd', {
+                  valueAsNumber: true,
+                })}
+              />
+              <Input
+                type="number"
+                label="TX"
+                disabled={!watchSerialPluginEnabled}
+                {...register('serialpluginTxd', {
+                  valueAsNumber: true,
+                })}
+              />
+              <Input
+                type="number"
+                label="Mode"
+                disabled={!watchSerialPluginEnabled}
+                {...register('serialpluginMode', {
+                  valueAsNumber: true,
+                })}
+              />
+              <Input
+                type="number"
+                label="Timeout"
+                disabled={!watchSerialPluginEnabled}
+                {...register('serialpluginTimeout', {
+                  valueAsNumber: true,
+                })}
+              />
+            </form>
+          </div>
+        </Card>
+      </div>
+    </PrimaryTemplate>
+  );
+};