Updates to account, ui, etc

ui/src/components/CustomControl.tsx

@@ -0,0 +1,75 @@
+import { ReactNode, useEffect, useRef } from 'react';
+import * as L from 'leaflet';
+import { useMap } from 'react-leaflet';
+import { createRoot, Root } from 'react-dom/client';
+
+interface Props {
+  position?: L.ControlPosition;
+  onClick: () => void;
+  active?: boolean;
+  title?: string;
+  children?: ReactNode;
+}
+
+export function CustomControl({ position = 'bottomright', onClick, active = false, title = '', children }: Props) {
+  const map = useMap();
+
+  // Create references
+  const buttonRef = useRef<HTMLAnchorElement | null>(null);
+  const reactRootRef = useRef<Root | null>(null);
+
+  useEffect(() => {
+    const ctrl = new L.Control({ position });
+
+    ctrl.onAdd = () => {
+      const container = L.DomUtil.create('div', 'leaflet-bar leaflet-control custom-control');
+      const button = L.DomUtil.create('a', '', container) as HTMLAnchorElement;
+      button.href = '#';
+      button.title = title;
+
+      // Prevent clicks/scrolls on the control from hitting the map
+      L.DomEvent.disableClickPropagation(container);
+      L.DomEvent.disableScrollPropagation(container);
+
+      // Wire up the handler
+      L.DomEvent.on(button, 'click', L.DomEvent.stop);
+      L.DomEvent.on(button, 'click', L.DomEvent.preventDefault);
+      L.DomEvent.on(button, 'click', () => onClick());
+
+      buttonRef.current = button;
+
+      // Initial active status
+      if (active) {
+        button.classList.add('active');
+      }
+
+      // Render children
+      if (children) {
+        reactRootRef.current = createRoot(button);
+        reactRootRef.current.render(children);
+      }
+      return container;
+    };
+
+    // Add component to the map
+    ctrl.addTo(map);
+
+    // On unmount, remove component
+    return () => {
+      ctrl.remove();
+      if (reactRootRef.current) {
+        reactRootRef.current.unmount();
+        reactRootRef.current = null;
+      }
+    };
+  }, [map, position, onClick, children, active, title]);
+
+  useEffect(() => {
+    const btn = buttonRef.current;
+    if (!btn) return;
+    if (active) btn.classList.add('active');
+    else btn.classList.remove('active');
+  }, [active]);
+
+  return null;
+}