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,31 +20,49 @@ 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">
-        <div className="p-1 text-lg font-medium">Title</div>
+        <Card className="flex-col p-3">
-        <div className="flex flex-col gap-2">
+          <div className="p-1 text-lg font-medium">Title</div>
-          {nodes.map((n) => (
+          <div className="flex flex-col gap-2">
-            <div key={n.data.num} className="flex gap-2">
+            {nodes.map((n) => (
-              <Hashicon value={n.data.num.toString()} size={24} />
+              <div
-              <div>{n.data.user?.longName}</div>
+                className="flex gap-2 rounded-md p-2 hover:bg-slate-100"
-              <IconButton
+                key={n.data.num}
-                icon={<MapPinIcon className="h-4" />}
+              >
-                size="sm"
+                <span className="my-auto shrink-0">
-                onClick={() => {
+                  <Hashicon value={n.data.num.toString()} size={28} />
-                  if (n.data.position?.latitudeI) {
+                </span>
-                    map?.flyTo({
+                <div className="flex flex-col">
-                      center: [
+                  <span className="font-medium">{n.data.user?.longName}</span>
-                        n.data.position.longitudeI / 1e7,
+                  <Mono>
-                        n.data.position.latitudeI / 1e7,
+                    {base16
-                      ],
+                      .stringify(n.data.user?.macaddr ?? [])
-                      zoom: 10,
+                      .match(/.{1,2}/g)
-                    });
+                      ?.join(":") ?? ""}
-                  }
+                  </Mono>
-                }}
+                </div>
-              />
+                <div className="my-auto ml-auto">
-            </div>
+                  <IconButton
-          ))}
+                    variant="secondary"
-        </div>
+                    size="sm"
+                    icon={<EllipsisHorizontalCircleIcon className="h-4" />}
+                    onClick={() => {
+                      if (n.data.position?.latitudeI) {
+                        map?.flyTo({
+                          center: [
+                            n.data.position.longitudeI / 1e7,
+                            n.data.position.latitudeI / 1e7,
+                          ],
+                          zoom: 10,
+                        });
+                      }
+                    }}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </Card>
       </div>
       <Map
         mapStyle="https://raw.githubusercontent.com/hc-oss/maplibre-gl-styles/master/styles/osm-mapnik/v8/default.json"