WIP

src/pages/Messages.tsx

@@ -6,6 +6,7 @@ import { useAppSelector } from '../hooks/redux';
 
 export const Messages = (): JSX.Element => {
   const messages = useAppSelector((state) => state.meshtastic.messages);
+  const nodes = useAppSelector((state) => state.meshtastic.nodes);
 
   return (
     <div className="flex flex-col w-full">
@@ -17,6 +18,10 @@ export const Messages = (): JSX.Element => {
             message={message.message.data}
             ack={message.ack}
             rxTime={new Date()}
+            senderName={
+              nodes.find((node) => node.num === message.message.packet.from)
+                ?.user?.longName ?? 'UNK'
+            }
           />
         ))}
       </div>

src/pages/Settings.tsx

@@ -3,18 +3,32 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Input } from '../components/form/Input';
+import { Toggle } from '../components/form/Toggle';
 import { PrimaryTemplate } from '../components/templates/PrimaryTemplate';
-import { useAppSelector } from '../hooks/redux';
+import { useAppDispatch, useAppSelector } from '../hooks/redux';
+import {
+  setHostOverride,
+  setHostOverrideEnabled,
+} from '../slices/meshtasticSlice';
 
 export const Settings = (): JSX.Element => {
   const { t } = useTranslation();
-  const radioConfig = useAppSelector((state) => state.meshtastic.preferences);
+  const dispatch = useAppDispatch();
 
-  console.log(radioConfig);
+  const radioConfig = useAppSelector((state) => state.meshtastic.preferences);
+  const hostOverride = useAppSelector((state) => state.meshtastic.hostOverride);
+  const hostOverrideEnabled = useAppSelector(
+    (state) => state.meshtastic.hostOverrideEnabled,
+  );
+
+  const [localHostOverride, setLocalHostOverride] =
+    React.useState(hostOverride);
+  const [localHostOverrideEnabled, setLocalHostOverrideEnabled] =
+    React.useState(hostOverrideEnabled);
 
   return (
     <PrimaryTemplate title="Settings" tagline="Device">
-      <div className="flex">
+      <div className="flex mb-8 dark:text-white">
         <div className="w-1/3 text-lg">WiFi</div>
         <div className="space-y-2">
           <Input
@@ -31,6 +45,38 @@ export const Settings = (): JSX.Element => {
           />
         </div>
       </div>
+      <div className="flex dark:text-white">
+        <div className="w-1/3 text-lg">Client</div>
+        <div className="space-y-2">
+          <Toggle
+            enabled={localHostOverrideEnabled}
+            setEnabled={(state) => {
+              setLocalHostOverrideEnabled(state);
+            }}
+          />
+          <Input
+            name={'Host override'}
+            placeholder={'meshtastic.local'}
+            value={localHostOverride}
+            onChange={(event) => {
+              setLocalHostOverride(event.target.value);
+            }}
+            type="text"
+            valid={true}
+            disabled={!localHostOverrideEnabled}
+          />
+        </div>
+      </div>
+
+      <button
+        onClick={() => {
+          dispatch(setHostOverride(localHostOverride));
+          dispatch(setHostOverrideEnabled(localHostOverrideEnabled));
+        }}
+        className="w-full rounded-md dark:bg-primaryDark shadow-md border dark:border-gray-600 p-2 mt-6 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-900"
+      >
+        {t('strings.save_changes')}
+      </button>
     </PrimaryTemplate>
   );
 };