small-scale Nodes page fixes

src/components/generic/Table/index.tsx

@@ -92,7 +92,7 @@ export const Table = ({ headings, rows }: TableProps) => {
             <th
               key={heading.title}
               scope="col"
-              className={`py-2 pr-3 pl-6 text-left ${
+              className={`py-2 pr-3 text-left ${
                 heading.sortable
                   ? "cursor-pointer hover:brightness-hover active:brightness-press"
                   : ""
@@ -114,8 +114,16 @@ export const Table = ({ headings, rows }: TableProps) => {
       <tbody>
         {sortedRows.map((row, index) => (
           // biome-ignore lint/suspicious/noArrayIndexKey: TODO: Once this table is sortable, this should get fixed.
-          <tr key={index}>
+          <tr key={index} className={`${index % 2 ? 'bg-white' : 'bg-slate-50/50'} border-b-1 border-gray`}>
             {row.map((item, index) => (
+               index === 0 ?
+               <th 
+                 key={item.key ?? index}
+                 className="whitespace-nowrap py-2 text-sm text-text-secondary first:pl-2"
+                 scope="row"
+               >
+                 {item}
+               </th> :
               <td
                 key={item.key ?? index}
                 className="whitespace-nowrap py-2 text-sm text-text-secondary first:pl-2"

src/pages/Nodes.tsx

@@ -19,6 +19,15 @@ export interface DeleteNoteDialogProps {
   onOpenChange: (open: boolean) => void;
 }
 
+function shortNameFromNode(node: ReturnType<useDevice>["nodes"][number]): string {
+  const shortNameOfNode = node.user?.shortName ?? (node.user?.macaddr
+    ? `${base16
+        .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
+        .toLowerCase()}`
+    : `${numberToHexUnpadded(node.num).slice(-4)}`);
+  return String(shortNameOfNode);
+}
+
 const NodesPage = (): JSX.Element => {
   const { nodes, hardware, connection } = useDevice();
   console.log(connection);
@@ -89,7 +98,6 @@ const NodesPage = (): JSX.Element => {
           <Table
             headings={[
               { title: "", type: "blank", sortable: false },
-              { title: "Short Name", type: "normal", sortable: true },
               { title: "Long Name", type: "normal", sortable: true },
               { title: "Model", type: "normal", sortable: true },
               { title: "MAC Address", type: "normal", sortable: true },
@@ -100,26 +108,15 @@ const NodesPage = (): JSX.Element => {
             ]}
             rows={filteredNodes.map((node) => [
               <div key={node.num}>
-                <Avatar text={node.user?.shortName.toString() ?? "UNK"} />
+                <Avatar text={shortNameFromNode(node)} />
               </div>,
-
-              <h1
-                key="shortName"
-                onMouseDown={() => setSelectedNode(node)}
-                className="cursor-pointer"
-              >
-                {node.user?.shortName ??
-                  (node.user?.macaddr
-                    ? `${base16
-                      .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
-                      .toLowerCase()}`
-                    : `${numberToHexUnpadded(node.num).slice(-4)}`)}
-              </h1>,
-
               <h1
                 key="longName"
                 onMouseDown={() => setSelectedNode(node)}
-                className="cursor-pointer"
+                onKeyUp={(evt)=>{ evt.key === "Enter" && setSelectedNode(node) }}
+                className="cursor-pointer underline"
+                tabIndex={0}
+                role="button"
               >
                 {node.user?.longName ??
                   (node.user?.macaddr
@@ -138,9 +135,9 @@ const NodesPage = (): JSX.Element => {
                   .match(/.{1,2}/g)
                   ?.join(":") ?? "UNK"}
               </Mono>,
-              <Mono className="px-4" key="lastHeard">
+              <Mono key="lastHeard">
                 {node.lastHeard === 0 ? (
-                  <p className="px-4">Never</p>
+                  <p>Never</p>
                 ) : (
                   <TimeAgo timestamp={node.lastHeard * 1000} />
                 )}