Add store and forward settings

src/pages/Plugins/Index.tsx

@@ -1,6 +1,12 @@
 import type React from 'react';
 
-import { FiAlignLeft, FiBell, FiFileText, FiRss } from 'react-icons/fi';
+import {
+  FiAlignLeft,
+  FiBell,
+  FiFastForward,
+  FiFileText,
+  FiRss,
+} from 'react-icons/fi';
 
 import { PageLayout } from '@components/templates/PageLayout';
 
@@ -8,6 +14,7 @@ import { ExternalNotification } from './ExternalNotification';
 import { Files } from './Files';
 import { RangeTest } from './RangeTest';
 import { Serial } from './Serial';
+import { StoreAndForward } from './StoreAndForward';
 
 export const Plugins = (): JSX.Element => {
   return (
@@ -34,12 +41,18 @@ export const Plugins = (): JSX.Element => {
           description: 'Send serial data over the mesh',
           icon: <FiAlignLeft className="flex-shrink-0 w-6 h-6" />,
         },
+        {
+          title: 'Store & Forward',
+          description: 'Retrive message history',
+          icon: <FiFastForward className="flex-shrink-0 w-6 h-6" />,
+        },
       ]}
       panels={[
         <RangeTest key={1} />,
         <Files key={2} />,
         <ExternalNotification key={3} />,
         <Serial key={4} />,
+        <StoreAndForward key={5} />,
       ]}
     />
   );

src/pages/Plugins/StoreAndForward.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+
+import { useForm, useWatch } from 'react-hook-form';
+import { FiMenu } from 'react-icons/fi';
+
+import { useAppSelector } from '@app/hooks/redux';
+import { FormFooter } from '@components/FormFooter';
+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 { connection } from '@core/connection';
+import type { RadioConfig_UserPreferences } from '@meshtastic/meshtasticjs/dist/generated';
+
+export interface StoreAndForwardProps {
+  navOpen?: boolean;
+  setNavOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const StoreAndForward = ({
+  navOpen,
+  setNavOpen,
+}: StoreAndForwardProps): JSX.Element => {
+  const preferences = useAppSelector(
+    (state) => state.meshtastic.radio.preferences,
+  );
+
+  const { register, handleSubmit, formState, reset, control } =
+    useForm<RadioConfig_UserPreferences>({
+      defaultValues: {
+        storeForwardPluginEnabled: preferences.storeForwardPluginEnabled,
+        storeForwardPluginRecords: preferences.storeForwardPluginRecords,
+      },
+    });
+
+  React.useEffect(() => {
+    reset({
+      storeForwardPluginEnabled: preferences.storeForwardPluginEnabled,
+      storeForwardPluginRecords: preferences.storeForwardPluginRecords,
+    });
+  }, [reset, preferences]);
+
+  const onSubmit = handleSubmit((data) => {
+    void connection.setPreferences(data);
+  });
+
+  const watchStoreForwardPluginEnabled = useWatch({
+    control,
+    name: 'storeForwardPluginEnabled',
+    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('storeForwardPluginEnabled')}
+              />
+              <Input
+                type="number"
+                label="Number of records"
+                disabled={!watchStoreForwardPluginEnabled}
+                {...register('storeForwardPluginRecords', {
+                  valueAsNumber: true,
+                })}
+              />
+            </form>
+          </div>
+        </Card>
+      </div>
+    </PrimaryTemplate>
+  );
+};