Show Node Info in more compressed form

web/src/components/packets/NodeInfoPacket.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { Packet } from "../../lib/types";
 import { User } from "lucide-react";
 import { PacketCard } from "./PacketCard";
-import { KeyValueGrid, KeyValuePair } from "./KeyValuePair";
 
 interface NodeInfoPacketProps {
   packet: Packet;
@@ -24,47 +23,67 @@ export const NodeInfoPacket: React.FC<NodeInfoPacketProps> = ({ packet }) => {
       label="Node Info"
       backgroundColor="bg-purple-950/5"
     >
-      <div className="space-y-4 max-w-md">
-        <KeyValuePair
-          label="Long Name"
-          value={nodeInfo.longName}
-          large={true}
-        />
+      <div className="flex flex-col gap-1.5">
+        {/* First row: Long name and short name */}
+        <div className="flex flex-wrap items-center gap-2">
+          {nodeInfo.longName && (
+            <div className="text-base font-medium tracking-normal text-purple-200">
+              {nodeInfo.longName}
+            </div>
+          )}
+          
+          {nodeInfo.shortName && (
+            <div className="bg-purple-950/40 px-2 py-0.5 rounded text-purple-300 tracking-wider">
+              {nodeInfo.shortName}
+            </div>
+          )}
+        </div>
         
-        <KeyValueGrid>
-          <KeyValuePair
-            label="Short Name"
-            value={nodeInfo.shortName}
-          />
-          <KeyValuePair
-            label="ID"
-            value={<span className="font-mono">{nodeInfo.id || "—"}</span>}
-          />
+        {/* Second row: All technical details */}
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-neutral-400">
           {nodeInfo.hwModel && (
-            <KeyValuePair
-              label="Hardware"
-              value={nodeInfo.hwModel}
-            />
+            <div>
+              <span className="text-neutral-500 mr-1">HW:</span>
+              <span>{nodeInfo.hwModel}</span>
+            </div>
           )}
           {nodeInfo.role && (
-            <KeyValuePair
-              label="Role"
-              value={nodeInfo.role}
-            />
-          )}
-          {nodeInfo.batteryLevel !== undefined && (
-            <KeyValuePair
-              label="Battery"
-              value={`${nodeInfo.batteryLevel}%`}
-            />
+            <div>
+              <span className="text-neutral-500 mr-1">ROLE:</span>
+              <span>{nodeInfo.role}</span>
+            </div>
           )}
           {nodeInfo.lastHeard && (
-            <KeyValuePair
-              label="Last Heard"
-              value={new Date(nodeInfo.lastHeard * 1000).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
-            />
+            <div>
+              <span className="text-neutral-500 mr-1">LAST:</span>
+              <span>{new Date(nodeInfo.lastHeard * 1000).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</span>
+            </div>
           )}
-        </KeyValueGrid>
+          {nodeInfo.batteryLevel !== undefined && (
+            <div>
+              <span className="text-neutral-500 mr-1">BAT:</span>
+              <span>{nodeInfo.batteryLevel}%</span>
+            </div>
+          )}
+          {nodeInfo.voltage !== undefined && (
+            <div>
+              <span className="text-neutral-500 mr-1">V:</span>
+              <span>{nodeInfo.voltage.toFixed(1)}V</span>
+            </div>
+          )}
+          {nodeInfo.snr !== undefined && (
+            <div>
+              <span className="text-neutral-500 mr-1">SNR:</span>
+              <span>{nodeInfo.snr.toFixed(1)}dB</span>
+            </div>
+          )}
+          {nodeInfo.channelUtilization !== undefined && (
+            <div>
+              <span className="text-neutral-500 mr-1">CH:</span>
+              <span>{nodeInfo.channelUtilization.toFixed(1)}%</span>
+            </div>
+          )}
+        </div>
       </div>
     </PacketCard>
   );

web/src/components/packets/PacketCard.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode } from "react";
 import { Packet } from "../../lib/types";
+import { cn } from "@/lib/cn";
 
 interface PacketCardProps {
   packet: Packet;
@@ -21,30 +22,33 @@ export const PacketCard: React.FC<PacketCardProps> = ({
   const { data } = packet;
 
   return (
-    <div className={`max-w-4xl effect-inset ${backgroundColor} rounded-lg border border-neutral-950/60 hover:shadow-md transition-shadow duration-200 overflow-hidden`}>
+    <div className="max-w-4xl effect-inset rounded-lg border border-neutral-950/60 hover:bg-neutral-800 transition-shadow duration-200 overflow-hidden">
       {/* Card Header with all metadata */}
-      <div className="px-5 py-3 border-b border-neutral-800/50">
+      <div className="p-4 border-b border-neutral-700/50 shadow-inner">
         <div className="flex flex-wrap justify-between items-center gap-2">
           {/* Left side: Icon, From, Channel */}
           <div className="flex items-center text-xs">
-            <div className={`${iconBgColor} p-1.5 rounded-full mr-3 shadow-sm flex-shrink-0`}>
-              {React.cloneElement(icon as React.ReactElement, { 
-                className: "h-3.5 w-3.5 text-white" 
+            <div
+              className={cn(
+                iconBgColor,
+                "p-1.5 rounded-full mr-3 shadow-sm flex-shrink-0"
+              )}
+            >
+              {React.cloneElement(icon as React.ReactElement, {
+                className: "h-3.5 w-3.5 text-white",
               })}
             </div>
             <span className="font-semibold text-neutral-200 tracking-wide mr-3">
-              {data.from ? `!${data.from.toString(16).toLowerCase()}` : "Unknown"}
-            </span>
-            <span className="text-neutral-400">
-              Channel: {packet.info.channel}
+              {data.from
+                ? `!${data.from.toString(16).toLowerCase()}`
+                : "Unknown"}
             </span>
+            <span className="text-neutral-400">{packet.info.channel}</span>
           </div>
-          
+
           {/* Right side: ID and Type */}
           <div className="flex items-center gap-3 text-xs">
-            <span className="text-neutral-400">
-              ID: {data.id || "None"}
-            </span>
+            <span className="text-neutral-400">{data.id || "None"}</span>
             <span className="px-2 py-0.5 bg-neutral-700/50 text-neutral-300 rounded-full text-xs">
               {label}
             </span>
@@ -53,9 +57,7 @@ export const PacketCard: React.FC<PacketCardProps> = ({
       </div>
 
       {/* Card Content */}
-      <div className="p-6 font-mono text-sm">
-        {children}
-      </div>
+      <div className="p-6 font-mono text-sm">{children}</div>
     </div>
   );
-};
+};