WIP

src/pages/About.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 
 import { PrimaryTemplate } from '../components/templates/PrimaryTemplate';
+import { TestForm } from '../components/TestForm';
 
 export const About = (): JSX.Element => {
   return (
     <PrimaryTemplate title="meshtastic-web" tagline="About">
       <p>Content</p>
+      <TestForm />
     </PrimaryTemplate>
   );
 };

src/pages/Messages.tsx

@@ -5,7 +5,7 @@ import { Protobuf } from '@meshtastic/meshtasticjs';
 
 import { Message } from '../components/chat/Message';
 import { MessageBar } from '../components/chat/MessageBar';
-import { Button } from '../components/generic/Button';
+import { IconButton } from '../components/generic/IconButton';
 import { useAppSelector } from '../hooks/redux';
 
 export const Messages = (): JSX.Element => {
@@ -29,12 +29,12 @@ export const Messages = (): JSX.Element => {
           {channelName()}
         </div>
         <div className="flex">
-          <Button>
+          <IconButton>
             <MapIcon className="w-6 h-6" />
-          </Button>
-          <Button>
+          </IconButton>
+          <IconButton>
             <UsersIcon className="w-6 h-6" />
-          </Button>
+          </IconButton>
         </div>
       </div>
       <div className="flex flex-col p-6 sm:py-8 sm:px-10 border-b dark:border-gray-600 bg-white dark:bg-secondaryDark flex-grow overflow-y-auto space-y-2">
@@ -56,6 +56,6 @@ export const Messages = (): JSX.Element => {
     </div>
   );
 };
-<Button>
+<IconButton>
   <UsersIcon className="w-6 h-6" />
-</Button>;
+</IconButton>;

src/pages/Nodes.tsx

@@ -1,17 +1,45 @@
 import React from 'react';
 
+import type { Protobuf } from '@meshtastic/meshtasticjs';
+
 import { Node } from '../components/nodes/Node';
+import { NodeDetails } from '../components/nodes/NodeDetails';
 import { PrimaryTemplate } from '../components/templates/PrimaryTemplate';
 import { useAppSelector } from '../hooks/redux';
 
 export const Nodes = (): JSX.Element => {
   const nodes = useAppSelector((state) => state.meshtastic.nodes);
+  const [currentNode, setCurrentNode] = React.useState<
+    Protobuf.NodeInfo | undefined
+  >();
 
   return (
     <PrimaryTemplate title="Administration" tagline="Node">
-      {nodes.map((node) => (
-        <Node key={node.num} node={node} />
-      ))}
+      <div className="flex w-full space-x-5">
+        <div className="w-1/3">
+          {nodes.map((node) => (
+            <Node
+              key={node.num}
+              node={node}
+              onClick={() => {
+                setCurrentNode(node);
+              }}
+            />
+          ))}
+        </div>
+        <div className="w-2/3">
+          {currentNode ? (
+            <NodeDetails
+              onClose={() => {
+                setCurrentNode(undefined);
+              }}
+              node={currentNode}
+            />
+          ) : (
+            <div>Node not selected</div>
+          )}
+        </div>
+      </div>
     </PrimaryTemplate>
   );
 };

src/pages/Settings.tsx

@@ -7,14 +7,14 @@ import { Protobuf } from '@meshtastic/meshtasticjs';
 
 import { Input } from '../components/form/Input';
 import { Select } from '../components/form/Select';
-import { Toggle } from '../components/form/Toggle';
+import { Switch } from '../components/form/Switch';
 import { PrimaryTemplate } from '../components/templates/PrimaryTemplate';
-import { connection } from '../connection';
-import { useAppDispatch, useAppSelector } from '../hooks/redux';
+import { connection } from '../core/connection';
 import {
   setHostOverride,
   setHostOverrideEnabled,
-} from '../slices/meshtasticSlice';
+} from '../core/slices/meshtasticSlice';
+import { useAppDispatch, useAppSelector } from '../hooks/redux';
 
 export const Settings = (): JSX.Element => {
   const { t } = useTranslation();
@@ -26,7 +26,7 @@ export const Settings = (): JSX.Element => {
     (state) => state.meshtastic.hostOverrideEnabled,
   );
 
-  const { register, handleSubmit } =
+  const { register, handleSubmit, control } =
     useForm<Protobuf.RadioConfig_UserPreferences>({
       defaultValues: radioConfig,
     });
@@ -65,36 +65,46 @@ export const Settings = (): JSX.Element => {
           <div className="flex pb-2 dark:text-white border-b dark:border-gray-600">
             <div className="w-1/3 text-lg">Node</div>
             <div className="space-y-2 w-full max-w-xs">
-              <Toggle label={'Is router node'} {...register('isRouter', {})} />
-              <Toggle
-                label={'Is router node'}
-                {...register('isLowPower', {})}
+              <Switch
+                name={'isRouter'}
+                control={control}
+                label={'Is Router Node?'}
               />
-              <Toggle
-                label={'Is router node'}
-                {...register('fixedPosition', {})}
+
+              <Switch
+                name={'isLowPower'}
+                control={control}
+                label={'Is Low Power?'}
               />
-              <Toggle
-                label={'Is serial disabled'}
-                {...register('serialDisabled', {})}
+
+              <Switch
+                name={'fixedPosition'}
+                control={control}
+                label={'Has Fixed Position?'}
               />
-              <Toggle
-                label={'Is router low power'}
-                {...register('isLowPower', {})}
+
+              <Switch
+                name={'serialDisabled'}
+                control={control}
+                label={'Is Serial Disabled?'}
               />
-              <Toggle
-                label={'Is MQTT disabled'}
-                {...register('mqttDisabled', {})}
+
+              <Switch
+                name={'mqttDisabled'}
+                control={control}
+                label={'Is MQTT Disabled?'}
               />
-              <Toggle
-                label={'Debug log enabled'}
-                {...register('debugLogEnabled', {})}
+
+              <Switch
+                name={'debugLogEnabled'}
+                control={control}
+                label={'Is Debug Log Enabled?'}
               />
+
               <Select
+                name={'region'}
+                control={control}
                 label="Region"
-                {...register('region', {
-                  valueAsNumber: true,
-                })}
                 options={(() => {
                   return Object.keys(Protobuf.RegionCode)
                     .filter((value) => isNaN(Number(value)) === false)
@@ -111,14 +121,14 @@ export const Settings = (): JSX.Element => {
           <div className="flex pb-2 dark:text-white border-b dark:border-gray-600">
             <div className="w-1/3 text-lg">Client</div>
             <div className="space-y-2 w-full max-w-xs">
-              <Toggle
+              {/* <Toggle
                 label={'Enable host override'}
                 checked={localHostOverrideEnabled}
                 onChange={(event) => {
                   console.log(event.target.checked);
                   setLocalHostOverrideEnabled(event.target.checked);
                 }}
-              />
+              /> */}
               <Input
                 label={'Host override'}
                 placeholder={'meshtastic.local'}