WIP

src/App.tsx

@@ -19,6 +19,7 @@ import {
   setMyNodeInfo,
   setPreferences,
   setReady,
+  setUser,
 } from '@core/slices/meshtasticSlice';
 import { Protobuf, SettingsManager, Types } from '@meshtastic/meshtasticjs';
 import { About } from '@pages/About';
@@ -70,6 +71,10 @@ const App = (): JSX.Element => {
       dispatch(setMyNodeInfo(nodeInfo));
     });
 
+    connection.onUserDataPacket.subscribe((user) => {
+      dispatch(setUser(user));
+    });
+
     connection.onNodeInfoPacket.subscribe((nodeInfoPacket) =>
       dispatch(addNode(nodeInfoPacket.data)),
     );
@@ -117,6 +122,7 @@ const App = (): JSX.Element => {
     return (): void => {
       connection.onDeviceStatus.cancelAll();
       connection.onMyNodeInfo.cancelAll();
+      connection.onUserDataPacket.cancelAll();
       connection.onNodeInfoPacket.cancelAll();
       connection.onAdminPacket.cancelAll();
       connection.onMeshHeartbeat.cancelAll();

src/components/nodes/Node.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-
-import Avatar from 'boring-avatars';
-
-import type { Protobuf } from '@meshtastic/meshtasticjs';
-
-type DefaultDivProps = JSX.IntrinsicElements['div'];
-
-export interface NodeProps {
-  node: Protobuf.NodeInfo;
-}
-
-export const Node = ({
-  node,
-  ...props
-}: NodeProps & DefaultDivProps): JSX.Element => {
-  return (
-    <div
-      {...props}
-      className="flex space-x-4 items-center 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"
-    >
-      <Avatar
-        size={30}
-        name={node.user?.longName ?? 'UNK'}
-        variant="beam"
-        colors={['#213435', '#46685B', '#648A64', '#A6B985', '#E1E3AC']}
-      />
-      <div>{node.user?.longName}</div>
-    </div>
-  );
-};

src/components/templates/PrimaryTemplate.tsx

@@ -32,7 +32,9 @@ export const PrimaryTemplate = ({
           </div>
         </div>
       </div>
-      <div className="flex-auto flex-grow p-6 md:p-10">{children}</div>
+      <div className="flex-auto flex-grow p-6 bg-white md:p-10 dark:bg-secondaryDark">
+        {children}
+      </div>
 
       {footer && (
         <div className="flex p-6 bg-white border-t md:flex-row flex-0 md:items-center md:justify-between md:py-8 md:px-10 dark:border-gray-600 dark:bg-secondaryDark">

src/core/slices/meshtasticSlice.ts

@@ -16,6 +16,7 @@ interface AppState {
   lastMeshInterraction: number;
   ready: boolean;
   myNodeInfo: Protobuf.MyNodeInfo;
+  user: Protobuf.User;
   positionPackets: Types.PositionPacket[];
   nodes: Protobuf.NodeInfo[];
   channels: Protobuf.Channel[];
@@ -30,6 +31,7 @@ const initialState: AppState = {
   lastMeshInterraction: 0,
   ready: false,
   myNodeInfo: Protobuf.MyNodeInfo.create(),
+  user: Protobuf.User.create(),
   positionPackets: [],
   nodes: [],
   channels: [],
@@ -56,6 +58,9 @@ export const meshtasticSlice = createSlice({
     setMyNodeInfo: (state, action: PayloadAction<Protobuf.MyNodeInfo>) => {
       state.myNodeInfo = action.payload;
     },
+    setUser: (state, action: PayloadAction<Protobuf.User>) => {
+      state.user = action.payload;
+    },
     addPositionPacket: (state, action: PayloadAction<Types.PositionPacket>) => {
       state.positionPackets.push(action.payload);
     },
@@ -124,6 +129,7 @@ export const {
   setLastMeshInterraction,
   setReady,
   setMyNodeInfo,
+  setUser,
   addPositionPacket,
   addNode,
   addChannel,

src/pages/Nodes/Index.tsx

@@ -9,6 +9,7 @@ import { Drawer } from '@components/generic/Drawer';
 import { SidebarItem } from '@components/generic/SidebarItem';
 import { Tab } from '@headlessui/react';
 import { XCircleIcon } from '@heroicons/react/outline';
+import { Protobuf } from '@meshtastic/meshtasticjs';
 
 import { Node } from './Node';
 
@@ -55,7 +56,11 @@ export const Nodes = (): JSX.Element => {
                 {({ selected }): JSX.Element => (
                   <SidebarItem
                     title={node.user?.longName ?? node.num.toString()}
-                    description="Node info"
+                    description={
+                      node.user?.hwModel
+                        ? Protobuf.HardwareModel[node.user.hwModel]
+                        : 'Unknown Hardware'
+                    }
                     selected={selected}
                     icon={
                       <Avatar

src/pages/settings/Device.tsx

@@ -18,15 +18,14 @@ export interface DeviceProps {
 
 export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
   const { t } = useTranslation();
-  const radioConfig = useAppSelector((state) => state.meshtastic.preferences);
+  const user = useAppSelector((state) => state.meshtastic.user);
 
-  const { register, handleSubmit, formState } =
-    useForm<Protobuf.RadioConfig_UserPreferences>({
-      defaultValues: radioConfig,
-    });
+  const { register, handleSubmit, formState } = useForm<Protobuf.User>({
+    defaultValues: user,
+  });
 
   const onSubmit = handleSubmit((data) => {
-    void connection.setPreferences(data);
+    void connection.setOwner(data);
   });
 
   return (
@@ -54,14 +53,9 @@ export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
         </Button>
       }
     >
-      <div className="w-full max-w-3xl space-y-2 md:max-w-xl">
-        <form onSubmit={onSubmit}>
-          <Input label={t('strings.wifi_ssid')} {...register('wifiSsid')} />
-          <Input
-            type="password"
-            label={t('strings.wifi_psk')}
-            {...register('wifiPassword')}
-          />
+      <div className="w-full max-w-3xl md:max-w-xl">
+        <form className="space-y-2" onSubmit={onSubmit}>
+          <Input label={'Device Name'} {...register('longName')} />
         </form>
       </div>
     </PrimaryTemplate>

src/pages/settings/Radio.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 
+import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
+import { connection } from '@app/core/connection';
+import { useAppSelector } from '@app/hooks/redux';
 import { Button } from '@components/generic/Button';
 import { Input } from '@components/generic/Input';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 import { MenuIcon, SaveIcon } from '@heroicons/react/outline';
+import type { Protobuf } from '@meshtastic/meshtasticjs';
 
 export interface RadioProps {
   navOpen: boolean;
@@ -14,6 +18,16 @@ export interface RadioProps {
 
 export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
   const { t } = useTranslation();
+  const radioConfig = useAppSelector((state) => state.meshtastic.preferences);
+
+  const { register, handleSubmit, formState } =
+    useForm<Protobuf.RadioConfig_UserPreferences>({
+      defaultValues: radioConfig,
+    });
+
+  const onSubmit = handleSubmit((data) => {
+    void connection.setPreferences(data);
+  });
 
   return (
     <PrimaryTemplate
@@ -32,6 +46,7 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
         <Button
           className="px-10 ml-auto"
           icon={<SaveIcon className="w-5 h-5" />}
+          disabled={!formState.isDirty}
           active
           border
         >
@@ -39,8 +54,15 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
         </Button>
       }
     >
-      <div className="w-full max-w-3xl space-y-2 md:max-w-xl">
-        <Input label="test" />
+      <div className="w-full max-w-3xl md:max-w-xl">
+        <form className="space-y-2" onSubmit={onSubmit}>
+          <Input label={t('strings.wifi_ssid')} {...register('wifiSsid')} />
+          <Input
+            type="password"
+            label={t('strings.wifi_psk')}
+            {...register('wifiPassword')}
+          />
+        </form>
       </div>
     </PrimaryTemplate>
   );