Remove unused code.

src/pages/Config/ModuleConfig.tsx

@@ -43,8 +43,6 @@ export const ModuleConfig = (): JSX.Element => {
       label: "Canned Message",
       element: CannedMessage,
     },
-    // Channels
-    // Interface
   ];
 
   return (

src/pages/Map/index.tsx

@@ -1,60 +1,82 @@
 import type React from "react";
-import { useRef } from "react";
 
-import { majorScale, MapMarkerIcon, Pane } from "evergreen-ui";
+import {
+  Heading,
+  IconButton,
+  LocateIcon,
+  majorScale,
+  MapMarkerIcon,
+  Pane,
+  Text,
+} from "evergreen-ui";
 import maplibregl from "maplibre-gl";
-import Map, { Marker } from "react-map-gl";
+import { Map, Marker, useMap } from "react-map-gl";
 
 import { useDevice } from "@core/providers/useDevice.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 
 export const MapPage = (): JSX.Element => {
   const { nodes, waypoints } = useDevice();
-
-  // const nodeMarkers = useMemo(() => new Map<number, Marker>(), []);
-
-  const ref = useRef<HTMLDivElement>(null);
-
-  // useEffect(() => {
-  //   nodes.map((n) => {
-  //     if (n.data.position?.longitudeI && n.data.position?.latitudeI && map) {
-  //       if (nodeMarkers.has(n.data.num)) {
-  //         nodeMarkers
-  //           .get(n.data.num)
-  //           ?.setLngLat([
-  //             n.data.position?.longitudeI / 1e7,
-  //             n.data.position?.latitudeI / 1e7,
-  //           ]);
-  //       } else {
-  //         nodeMarkers.set(
-  //           n.data.num,
-  //           new Marker()
-  //             .setLngLat([
-  //               n.data.position?.longitudeI / 1e7,
-  //               n.data.position?.latitudeI / 1e7,
-  //             ])
-  //             .addTo(map)
-  //         );
-  //       }
-  //     }
-  //   });
-  // }, [map, nodeMarkers, nodes]);
+  const { current: map } = useMap();
 
   return (
     <Pane
       margin={majorScale(3)}
       borderRadius={majorScale(1)}
-      background="white"
       elevation={1}
       display="flex"
       flexGrow={1}
       flexDirection="column"
       gap={majorScale(2)}
       overflow="hidden"
+      position="relative"
     >
+      <Pane
+        position="absolute"
+        zIndex={10}
+        right={0}
+        top={0}
+        borderRadius={majorScale(1)}
+        padding={majorScale(1)}
+        margin={majorScale(1)}
+        background="tint1"
+        width={majorScale(28)}
+        elevation={1}
+        overflow="hidden"
+      >
+        <Pane padding={majorScale(1)} background="tint2">
+          <Heading>Title</Heading>
+        </Pane>
+        <Pane display="flex" flexDirection="column" gap={majorScale(1)}>
+          {nodes.map((n) => (
+            <Pane key={n.data.num} display="flex" gap={majorScale(1)}>
+              <Hashicon value={n.data.num.toString()} size={24} />
+              <Text>{n.data.user?.longName}</Text>
+              <IconButton
+                icon={LocateIcon}
+                marginLeft="auto"
+                size="small"
+                onClick={() => {
+                  console.log("clicked");
+                  console.log(map);
+
+                  map?.flyTo({
+                    center: [
+                      n.data.position?.latitudeI / 1e7,
+                      n.data.position?.longitudeI / 1e7,
+                    ],
+                    zoom: 10,
+                  });
+                }}
+              />
+            </Pane>
+          ))}
+        </Pane>
+      </Pane>
       <Map
         mapStyle="https://raw.githubusercontent.com/hc-oss/maplibre-gl-styles/master/styles/osm-mapnik/v8/default.json"
         mapLib={maplibregl}
+        attributionControl={false}
       >
         {waypoints.map((wp) => (
           <Marker
@@ -79,9 +101,7 @@ export const MapPage = (): JSX.Element => {
                   latitude={n.data.position.latitudeI / 1e7}
                   anchor="bottom"
                 >
-                  <Pane>
-                    <Hashicon value={n.data.num.toString()} size={32} />
-                  </Pane>
+                  <Hashicon value={n.data.num.toString()} size={32} />
                 </Marker>
               );
             }