Remove unused code.

src/components/Dialog/HelpDialog.tsx

@@ -1,9 +1,7 @@
-import type React from "react"
+import type React from "react";
 
-import { Pane } from "evergreen-ui"
+import { Pane } from "evergreen-ui";
 
 export const HelpDialog = (): JSX.Element => {
-    return (
-        <Pane></Pane>
-    )
-}
+  return <Pane></Pane>;
+};

src/components/Dialog/QRDialog.tsx

@@ -45,13 +45,13 @@ export const QRDialog = ({
       })
     );
     const base64 = fromByteArray(encoded)
-    .replace(/=/g, "")
-    .replace(/\+/g, "-")
-    .replace(/\//g, "_");
+      .replace(/=/g, "")
+      .replace(/\+/g, "-")
+      .replace(/\//g, "_");
 
     setQRCodeURL(`https://www.meshtastic.org/e/#${base64}`);
   }, [channels, selectedChannels, loraConfig]);
-  
+
   return (
     <Dialog
       isShown={isOpen}

src/core/providers/useCreateMapbox.ts

@@ -1,32 +0,0 @@
-import type React from "react";
-import { useEffect, useState } from "react";
-
-import { Map, MapOptions } from "maplibre-gl";
-
-export interface useMapboxProps {
-  ref: React.RefObject<HTMLDivElement>;
-  style: string;
-  options?: Partial<MapOptions>;
-}
-
-export function useCreateMapbox({
-  ref,
-  style,
-  options,
-}: useMapboxProps): Map | undefined {
-  const [mapInstance, setMapInstance] = useState<Map>();
-  useEffect(() => {
-    const container = ref.current as HTMLDivElement;
-    if (mapInstance || !container) {
-      return;
-    }
-    const map = new Map({
-      container,
-      style,
-      ...options,
-    });
-    setMapInstance(map);
-  }, []);
-
-  return mapInstance;
-}

src/core/providers/useMap.ts

@@ -1,14 +0,0 @@
-import { createContext, useContext } from "react";
-
-import type { Map } from "maplibre-gl";
-
-export interface MapContextValue {
-  ref: React.Ref<HTMLDivElement>;
-  map?: Map;
-}
-
-export const MapContext = createContext<MapContextValue>({} as MapContextValue);
-
-export const useMap = (): MapContextValue => {
-  return useContext(MapContext);
-};

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>
               );
             }