Update node list styling on map page

src/pages/Map.tsx

@@ -2,11 +2,17 @@ import type React from "react";
 
 import maplibregl from "maplibre-gl";
 import { Map, Marker, useMap } from "react-map-gl";
+import { base16 } from "rfc4648";
 
+import { Card } from "@app/components/Card.js";
 import { IconButton } from "@app/components/IconButton.js";
+import { Mono } from "@app/components/Mono.js";
 import { useDevice } from "@core/providers/useDevice.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
-import { MapPinIcon } from "@heroicons/react/24/outline";
+import {
+  EllipsisHorizontalCircleIcon,
+  MapPinIcon,
+} from "@heroicons/react/24/outline";
 
 export const MapPage = (): JSX.Element => {
   const { nodes, waypoints } = useDevice();
@@ -14,16 +20,32 @@ export const MapPage = (): JSX.Element => {
 
   return (
     <div className="flex-grow">
-      <div className="absolute right-0 top-0 z-10 m-2 rounded-md bg-white p-2 shadow-md">
+      <div className="absolute right-0 top-0 z-10 m-2">
+        <Card className="flex-col p-3">
           <div className="p-1 text-lg font-medium">Title</div>
           <div className="flex flex-col gap-2">
             {nodes.map((n) => (
-            <div key={n.data.num} className="flex gap-2">
+              <div
-              <Hashicon value={n.data.num.toString()} size={24} />
+                className="flex gap-2 rounded-md p-2 hover:bg-slate-100"
-              <div>{n.data.user?.longName}</div>
+                key={n.data.num}
+              >
+                <span className="my-auto shrink-0">
+                  <Hashicon value={n.data.num.toString()} size={28} />
+                </span>
+                <div className="flex flex-col">
+                  <span className="font-medium">{n.data.user?.longName}</span>
+                  <Mono>
+                    {base16
+                      .stringify(n.data.user?.macaddr ?? [])
+                      .match(/.{1,2}/g)
+                      ?.join(":") ?? ""}
+                  </Mono>
+                </div>
+                <div className="my-auto ml-auto">
                   <IconButton
-                icon={<MapPinIcon className="h-4" />}
+                    variant="secondary"
                     size="sm"
+                    icon={<EllipsisHorizontalCircleIcon className="h-4" />}
                     onClick={() => {
                       if (n.data.position?.latitudeI) {
                         map?.flyTo({
@@ -37,8 +59,10 @@ export const MapPage = (): JSX.Element => {
                     }}
                   />
                 </div>
+              </div>
             ))}
           </div>
+        </Card>
       </div>
       <Map
         mapStyle="https://raw.githubusercontent.com/hc-oss/maplibre-gl-styles/master/styles/osm-mapnik/v8/default.json"