Fixes

src/App.tsx

@@ -135,20 +135,21 @@ const App = () => {
 
     connection.onRoutingPacketEvent.subscribe((routingPacket) => {
       console.log(routingPacket);
+      // console.log(messages);
 
-      messages.map((message) => {
-        console.log(
-          `${
-            routingPacket.payloadVariant.oneofKind === 'decoded'
-              ? routingPacket.payloadVariant.decoded.requestId
-              : null
-          } === ${message.message.packet.id}: ${
-            routingPacket.payloadVariant.oneofKind === 'decoded'
-              ? routingPacket.payloadVariant.decoded.requestId
-              : null === message.message.packet.id
-          }`,
-        );
-      });
+      // messages.map((message) => {
+      //   console.log(
+      //     `${
+      //       routingPacket.payloadVariant.oneofKind === 'decoded'
+      //         ? routingPacket.payloadVariant.decoded.requestId
+      //         : null
+      //     } === ${message.message.packet.id}: ${
+      //       routingPacket.payloadVariant.oneofKind === 'decoded'
+      //         ? routingPacket.payloadVariant.decoded.requestId
+      //         : null === message.message.packet.id
+      //     }`,
+      //   );
+      // });
       // messages.find((message) => {
       //   message.message.packet.id === routingPacket.decoded.requestId;
       // });
@@ -156,32 +157,6 @@ const App = () => {
   }, []);
   return (
     <div className="flex flex-col h-screen w-screen">
-      {/* <Head>
-        <link
-          rel="apple-touch-icon"
-          sizes="180x180"
-          href="/design/web/apple-touch-icon.png"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="32x32"
-          href="/design/web/favicon-32x32.png"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="16x16"
-          href="/design/web/favicon-16x16.png"
-        />
-        <link rel="manifest" href="/design/web/site.webmanifest" />
-        <link
-          rel="mask-icon"
-          href="/design/web/safari-pinned-tab.svg"
-          color="#67ea94"
-        />
-        <meta name="theme-color" content="#67ea94" />
-      </Head> */}
       <Header
         status={deviceStatus}
         IsReady={isReady}

src/Main.tsx

@@ -105,6 +105,7 @@ const Main = (props: MainProps) => {
         Language={props.Language}
         SetLanguage={props.SetLanguage}
         Translations={props.Translations}
+        myId={props.MyNodeInfo.myNodeNum}
       />
     </div>
   );

src/components/Header.tsx

@@ -14,7 +14,7 @@ const Header = (props: HeaderProps) => {
   return (
     <nav className="w-full shadow-md">
       <div className="flex w-full container mx-auto justify-between px-6 py-4">
-        <img src="/design/typelogo/typelogo.svg" height="30" width="200" />
+        <img src="/typelogo.svg" height="30" width="200" />
 
         <div className="flex items-center">
           <div className="flex pl-4">

src/components/NavItem.tsx

@@ -4,7 +4,7 @@ import { FaCaretDown, FaCaretRight, FaSpinner } from 'react-icons/fa';
 
 interface NavItemProps {
   isDropdown: boolean;
-  open?: boolean;
+  open: boolean;
   isNested: boolean;
   titleContent: ReactNode;
   dropdownContent?: ReactNode;

src/components/Sidebar.tsx

@@ -22,6 +22,7 @@ interface SidebarProps {
   Language: LanguageEnum;
   SetLanguage: Function;
   Translations: languageTemplate;
+  myId: number;
 }
 
 const Sidebar = (props: SidebarProps) => {
@@ -37,6 +38,7 @@ const Sidebar = (props: SidebarProps) => {
         IsReady={props.IsReady}
         Nodes={props.Nodes}
         Translations={props.Translations}
+        myId={props.myId}
       />
       <SidebarDeviceSettings
         IsReady={props.IsReady}

src/components/Sidebar/SidebarChannels.tsx

@@ -35,6 +35,7 @@ const SidebarChannels = (props: SidebarChannelsProps) => {
                   key={index}
                   isDropdown={true}
                   isNested={true}
+                  open={false}
                   titleContent={
                     <div className="flex">
                       {channel.index} - {Protobuf.Channel_Role[channel.role]}
@@ -44,6 +45,7 @@ const SidebarChannels = (props: SidebarChannelsProps) => {
                     <NavItem
                       isDropdown={false}
                       isNested={false}
+                      open={false}
                       titleContent={
                         <div className="w-full">
                           <div className="flex justify-between border-b hover:bg-gray-200">

src/components/Sidebar/SidebarNodes.tsx

@@ -1,6 +1,14 @@
 import React from 'react';
 
-import { FaDesktop, FaUsers } from 'react-icons/fa';
+import {
+  FaBatteryHalf,
+  FaClock,
+  FaCrown,
+  FaDesktop,
+  FaMapMarkerAlt,
+  FaMountain,
+  FaUsers,
+} from 'react-icons/fa';
 
 import type { Types } from '@meshtastic/meshtasticjs';
 
@@ -11,6 +19,7 @@ interface sidebarNodesProps {
   IsReady: boolean;
   Nodes: Types.NodeInfoPacket[];
   Translations: languageTemplate;
+  myId: number;
 }
 
 const SidebarNodes = (props: sidebarNodesProps) => {
@@ -39,7 +48,11 @@ const SidebarNodes = (props: sidebarNodesProps) => {
               open={false}
               titleContent={
                 <div key={index} className="flex">
-                  <FaDesktop className="my-auto mr-2" />
+                  {node.data.num === props.myId ? (
+                    <FaCrown className="text-yellow-500 my-auto mr-2" />
+                  ) : (
+                    <FaDesktop className="my-auto mr-2" />
+                  )}
                   <div className="m-auto">{node.data.user?.longName}</div>
                 </div>
               }
@@ -47,6 +60,7 @@ const SidebarNodes = (props: sidebarNodesProps) => {
                 <NavItem
                   isDropdown={false}
                   isNested={true}
+                  open={false}
                   titleContent={
                     <div>
                       <p>
@@ -58,15 +72,34 @@ const SidebarNodes = (props: sidebarNodesProps) => {
                         {node.packet?.rxRssi ? node.packet.rxRssi : 'Unknown'}
                       </p>
                       <p>
-                        Last heard:{' '}
-                        {node.data?.lastHeard ? node.data.lastHeard : 'Unknown'}
-                      </p>
-                      <p>
-                        Loc:{' '}
-                        {node.data?.position
-                          ? `alt: ${node.data?.position.altitude}, lat: ${node.data?.position.latitudeI}, lng: ${node.data?.position.longitudeI}, time: ${node.data?.position.time}, batt: ${node.data?.position.batteryLevel}`
-                          : 'Unknown'}
+                        {`Last heard: ${
+                          node.data?.lastHeard
+                            ? new Date(node.data.lastHeard).toLocaleString()
+                            : 'Unknown'
+                        }`}{' '}
+                        {}
                       </p>
+                      <div className="flex">
+                        <FaMapMarkerAlt className="my-auto mr-2" />
+                        <p>
+                          {node.data.position?.latitudeI},
+                          {node.data.position?.longitudeI}
+                        </p>
+                      </div>
+
+                      <div className="flex">
+                        <FaMountain className="my-auto mr-2" />
+                        <p>{node.data.position?.altitude}</p>
+                      </div>
+
+                      <div className="flex">
+                        <FaClock className="my-auto mr-2" />
+                        <p>{node.data.position?.time}</p>
+                      </div>
+                      <div className="flex">
+                        <FaBatteryHalf className="my-auto mr-2" />
+                        <p>{node.data.position?.batteryLevel}</p>
+                      </div>
                     </div>
                   }
                 />

src/components/Sidebar/SidebarUISettings.tsx

@@ -19,6 +19,7 @@ const SidebarUISettings = (props: SidebarUISettingsProps) => {
     <NavItem
       isDropdown={true}
       isNested={false}
+      open={false}
       titleContent={
         <div className="flex">
           <FaCog className="my-auto mr-2" />
@@ -30,6 +31,7 @@ const SidebarUISettings = (props: SidebarUISettingsProps) => {
           <NavItem
             isDropdown={false}
             isNested={true}
+            open={false}
             titleContent={
               <>
                 <div className="my-auto">
@@ -71,6 +73,7 @@ const SidebarUISettings = (props: SidebarUISettingsProps) => {
                   onClick={() => {
                     props.SetLanguage(LanguageEnum.ENGLISH);
                   }}
+                  open={false}
                   isDropdown={false}
                   isNested={true}
                   titleContent={
@@ -81,6 +84,7 @@ const SidebarUISettings = (props: SidebarUISettingsProps) => {
                   onClick={() => {
                     props.SetLanguage(LanguageEnum.JAPANESE);
                   }}
+                  open={false}
                   isDropdown={false}
                   isNested={true}
                   titleContent={