Switch to Vite + improvements

src/pages/About.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 import { Card } from '@components/generic/Card';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';

src/pages/Messages.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 import { FiHash } from 'react-icons/fi';
 
@@ -12,6 +12,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);
+  const users = useAppSelector((state) => state.meshtastic.users);
   const channels = useAppSelector((state) => state.meshtastic.channels);
 
   return (
@@ -49,8 +50,9 @@ export const Messages = (): JSX.Element => {
             ack={message.ack}
             rxTime={new Date()}
             senderName={
-              nodes.find((node) => node.num === message.message.packet.from)
-                ?.user?.longName ?? 'UNK'
+              users.find(
+                (user) => user.packet.from === message.message.packet.from,
+              )?.data.longName ?? 'UNK'
             }
           />
         ))}

src/pages/Nodes/Index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 import Avatar from 'boring-avatars';
 
@@ -10,21 +10,22 @@ import { Node } from './Node';
 
 export const Nodes = (): JSX.Element => {
   const nodes = useAppSelector((state) => state.meshtastic.nodes);
-
+  const users = useAppSelector((state) => state.meshtastic.users);
   return (
     <PageLayout
       title="Nodes"
       emptyMessage="No nodes discovered yet..."
       sidebarItems={nodes.map((node) => {
+        const user = users.find((user) => user.packet.from === node.num)?.data;
         return {
-          title: node.user?.longName ?? node.num.toString(),
-          description: node.user?.hwModel
-            ? Protobuf.HardwareModel[node.user.hwModel]
+          title: user ? user.longName : node.num.toString(),
+          description: user
+            ? Protobuf.HardwareModel[user.hwModel]
             : 'Unknown Hardware',
           icon: (
             <Avatar
               size={30}
-              name={node.user?.longName ?? node.num.toString()}
+              name={user ? user.longName : node.num.toString()}
               variant="beam"
               colors={['#213435', '#46685B', '#648A64', '#A6B985', '#E1E3AC']}
             />

src/pages/Nodes/Node.tsx

@@ -1,11 +1,12 @@
 import 'react-json-pretty/themes/acai.css';
 
-import React from 'react';
+import type React from 'react';
 
 import { FiMenu, FiTerminal } from 'react-icons/fi';
 import JSONPretty from 'react-json-pretty';
 import TimeAgo from 'react-timeago';
 
+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';
@@ -21,9 +22,15 @@ export interface NodeProps {
 }
 
 export const Node = ({ navOpen, setNavOpen, node }: NodeProps): JSX.Element => {
+  const user = useAppSelector((state) => state.meshtastic.users).find(
+    (user) => user.packet.from === node.num,
+  )?.data;
+  const position = useAppSelector(
+    (state) => state.meshtastic.positionPackets,
+  ).find((position) => position.packet.from === node.num)?.data;
   return (
     <PrimaryTemplate
-      title={node.user?.longName ?? node.num.toString()}
+      title={user ? user.longName : node.num.toString()}
       tagline="Node"
       button={
         <IconButton
@@ -47,7 +54,7 @@ export const Node = ({ navOpen, setNavOpen, node }: NodeProps): JSX.Element => {
           description={new Date(node.lastHeard * 1000).toLocaleString()}
         >
           <div className="p-10">
-            <JSONPretty data={node.position} />
+            <JSONPretty data={position} />
           </div>
         </Card>
         <Card

src/pages/NotFound.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 import { Card } from '@components/generic/Card';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';

src/pages/Plugins/Files.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 // import { DefaultExtensionType, defaultStyles, FileIcon } from 'react-file-icon';
 import { FiMenu, FiTrash, FiUploadCloud } from 'react-icons/fi';

src/pages/Plugins/Index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 import { FiFileText, FiRss } from 'react-icons/fi';
 

src/pages/Plugins/RangeTest.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';

src/pages/settings/Device.tsx

@@ -27,7 +27,10 @@ export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
   const { t } = useTranslation();
   const [debug, setDebug] = React.useState(false);
   const dispatch = useAppDispatch();
-  const user = useAppSelector((state) => state.meshtastic.myUser);
+  const myNodeInfo = useAppSelector((state) => state.meshtastic.myNodeInfo);
+  const user = useAppSelector((state) => state.meshtastic.users).find(
+    (user) => user.packet.from === myNodeInfo.myNodeNum,
+  );
   const { register, handleSubmit, formState } = useForm<{
     longName: string;
     shortName: string;
@@ -35,17 +38,19 @@ export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
     team: Protobuf.Team;
   }>({
     defaultValues: {
-      longName: user.longName,
-      shortName: user.shortName,
-      isLicensed: user.isLicensed,
-      team: user.team,
+      longName: user?.data.longName,
+      shortName: user?.data.shortName,
+      isLicensed: user?.data.isLicensed,
+      team: user?.data.team,
     },
   });
 
   const onSubmit = handleSubmit((data) => {
-    void connection.setOwner({ ...user, ...data });
     // TODO: can be remove once getUser is implemented
-    dispatch(addUser({ ...user, ...data }));
+    if (user) {
+      void connection.setOwner({ ...user.data, ...data });
+      dispatch(addUser({ ...user, ...{ data: { ...user.data, ...data } } }));
+    }
   });
 
   return (
@@ -92,10 +97,14 @@ export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
         <Cover enabled={debug} content={<JSONPretty data={user} />} />
         <div className="w-full max-w-3xl p-10 md:max-w-xl">
           <form className="space-y-2" onSubmit={onSubmit}>
-            <Input label={'Device ID'} value={user.id} disabled />
+            <Input label={'Device ID'} value={user?.data.id} disabled />
             <Input
               label={'Hardware'}
-              value={Protobuf.HardwareModel[user.hwModel]}
+              value={
+                Protobuf.HardwareModel[
+                  user?.data.hwModel ?? Protobuf.HardwareModel.UNSET
+                ]
+              }
               disabled
             />
             <Input label={'Device Name'} {...register('longName')} />

src/pages/settings/Index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 import {
   FiLayers,

src/pages/settings/Interface.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 import { useTranslation } from 'react-i18next';
 import { FiMenu, FiSave } from 'react-icons/fi';