From 207061e9d82f25953eface40149f3bd3aba360d1 Mon Sep 17 00:00:00 2001
From: bkimmel <brentkimmel@brentkimmel.com>
Date: Sun, 16 Mar 2025 09:41:50 -0400
Subject: [PATCH 1/2] small-scale Nodes page fixes

---
 src/components/generic/Table/index.tsx | 12 +++++++--
 src/pages/Nodes.tsx                    | 35 ++++++++++++--------------
 2 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/src/components/generic/Table/index.tsx b/src/components/generic/Table/index.tsx
index ebd5bae4..2a002305 100755
--- a/src/components/generic/Table/index.tsx
+++ b/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"
diff --git a/src/pages/Nodes.tsx b/src/pages/Nodes.tsx
index 0a786e3d..c0a9e6f5 100644
--- a/src/pages/Nodes.tsx
+++ b/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} />
                 )}

From e4c2952e492153b92c8eb92daf21e2c9e9a73303 Mon Sep 17 00:00:00 2001
From: bkimmel <brentkimmel@brentkimmel.com>
Date: Mon, 17 Mar 2025 18:15:43 -0400
Subject: [PATCH 2/2] dark mode adjustments

---
 src/components/generic/Table/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/generic/Table/index.tsx b/src/components/generic/Table/index.tsx
index 2a002305..1603fd00 100755
--- a/src/components/generic/Table/index.tsx
+++ b/src/components/generic/Table/index.tsx
@@ -114,7 +114,7 @@ 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} className={`${index % 2 ? 'bg-white' : 'bg-slate-50/50'} border-b-1 border-gray`}>
+          <tr key={index} className={`${index % 2 ? 'bg-white dark:bg-white/2' : 'bg-slate-50/50 dark:bg-slate-50/5'} border-b-1 border-slate-200 dark:border-slate-900`}>
             {row.map((item, index) => (
                index === 0 ?
                <th