Remove duplicate node logic, UI Update, flatten build output (#586)

* refactor nodes to getNodes fn. ui updates

* fixed several styling issues

* fix: message specific styling/overflow

* added footer, fixed tests. styling

* fix: added theme support back to app component

* fix: hide emojis/reactions

* fix: added more padding to content element

* fix: fixed padding in content element

* updated color scheme

* fix: more dark mode styling improvements

* fix: padding and alignment fixes

* fix: prevent left sidebar collapse, added battery component

* fix: change scrollbars to "tiny" style, improved message scrolling, fixed bug with message input

* message store fixes, ui fixes

* fix: disabled message persistance until after release

src/components/PageComponents/Map/NodeDetail.tsx

@@ -7,12 +7,7 @@ import { Mono } from "@components/generic/Mono.tsx";
 import { TimeAgo } from "@components/generic/TimeAgo.tsx";
 import { Protobuf } from "@meshtastic/core";
 import type { Protobuf as ProtobufType } from "@meshtastic/core";
-import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 import {
-  BatteryChargingIcon,
-  BatteryFullIcon,
-  BatteryLowIcon,
-  BatteryMediumIcon,
   Dot,
   LockIcon,
   LockOpenIcon,
@@ -28,7 +23,8 @@ import {
   TooltipTrigger,
 } from "@radix-ui/react-tooltip";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { MessageType, useMessageStore } from "@core/stores/messageStore.ts";
+import { MessageType, useMessageStore } from "../../../core/stores/messageStore/index.ts";
+import BatteryStatus from "@components/BatteryStatus.tsx";
 
 export interface NodeDetailProps {
   node: ProtobufType.Mesh.NodeInfo;
@@ -37,7 +33,7 @@ export interface NodeDetailProps {
 export const NodeDetail = ({ node }: NodeDetailProps) => {
   const { setChatType, setActiveChat } = useMessageStore();
   const { setActivePage } = useDevice();
-  const name = node.user?.longName || `!${numberToHexUnpadded(node.num)}`;
+  const name = node.user?.longName ?? `UNK`;
   const shortName = node.user?.shortName ?? "UNK";
   const hwModel = node.user?.hwModel ?? 0;
   const hardwareType =
@@ -50,10 +46,10 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
   }
 
   return (
-    <div className="dark:text-slate-900 p-1">
+    <div className="p-1 text-slate-900">
       <div className="flex gap-2">
         <div className="flex flex-col items-center gap-2 min-w-6 pt-1">
-          <Avatar text={shortName} />
+          <Avatar text={shortName} size="sm" />
 
           <div onFocusCapture={(e) => {
             // Required to prevent DM tooltip auto-appearing on creation
@@ -113,24 +109,7 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
           {hardwareType !== "UNSET" && <Subtle>{hardwareType}</Subtle>}
 
           {!!node.deviceMetrics?.batteryLevel && (
-            <div
-              className="flex items-center gap-1 mt-0.5"
-              title={`${node.deviceMetrics?.voltage?.toPrecision(3) ?? "Unknown"
-                } volts`}
-            >
-              {node.deviceMetrics?.batteryLevel > 100
-                ? <BatteryChargingIcon size={22} />
-                : node.deviceMetrics?.batteryLevel > 80
-                  ? <BatteryFullIcon size={22} />
-                  : node.deviceMetrics?.batteryLevel > 20
-                    ? <BatteryMediumIcon size={22} />
-                    : <BatteryLowIcon size={22} />}
-              <Subtle aria-label="Battery">
-                {node.deviceMetrics?.batteryLevel > 100
-                  ? "Charging"
-                  : `${node.deviceMetrics?.batteryLevel}%`}
-              </Subtle>
-            </div>
+            <BatteryStatus deviceMetrics={node.deviceMetrics} />
           )}
 
           <div className="flex gap-2 items-center">
@@ -198,7 +177,7 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
         {!!node.deviceMetrics?.airUtilTx && (
           <div className="grow">
             <div>Airtime Util</div>
-            <Mono>{node.deviceMetrics?.airUtilTx.toPrecision(3)}%</Mono>
+            <Mono className="text-gray-500">{node.deviceMetrics?.airUtilTx.toPrecision(3)}%</Mono>
           </div>
         )}
       </div>
@@ -206,7 +185,7 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
       {node.snr !== 0 && (
         <div className="mt-2">
           <div>SNR</div>
-          <Mono className="flex items-center text-xs">
+          <Mono className="flex items-center text-xs text-gray-500">
             {node.snr}db
             <Dot />
             {Math.min(Math.max((node.snr + 10) * 5, 0), 100)}%