Add ESRI sat source + unify Sidebar overlay

src/components/MapBox/MapboxProvider.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import mapboxgl from 'mapbox-gl';
+
 import {
   setBearing,
   setLatLng,
@@ -35,11 +37,14 @@ export const MapboxProvider = ({
       zoom: mapState.zoom,
       bearing: mapState.bearing,
       pitch: mapState.pitch,
-      style: mapState.style.url,
+      style: mapState.style.data,
     },
   });
 
   React.useEffect(() => {
+    map?.on('load', () => {
+      map.addControl(new mapboxgl.ScaleControl());
+    });
     map?.on('styledata', () => {
       if (!map.getSource('mapbox-dem')) {
         map.addSource('mapbox-dem', {
@@ -120,7 +125,7 @@ export const MapboxProvider = ({
    */
   React.useEffect(() => {
     if (map?.loaded()) {
-      map.setStyle(mapState.style.url);
+      map.setStyle(mapState.style.data);
     }
   }, [map, mapState.style]);
 

src/components/layout/Sidebar/Settings/Index.tsx

@@ -18,7 +18,6 @@ import {
 import { CollapsibleSection } from '@app/components/layout/Sidebar/sections/CollapsibleSection';
 import { ExternalSection } from '@app/components/layout/Sidebar/sections/ExternalSection';
 import { SidebarOverlay } from '@app/components/layout/Sidebar/sections/SidebarOverlay';
-import { SidebarPrimary } from '@app/components/layout/Sidebar/sections/SidebarPrimary';
 import { Channels } from '@app/components/layout/Sidebar/Settings/Channels';
 import { ExternalNotificationsSettingsPlanel } from '@app/components/layout/Sidebar/Settings/plugins/panels/ExternalNotifications/SettingsPlanel';
 import { RangeTestSettingsPanel } from '@app/components/layout/Sidebar/Settings/plugins/panels/RangeTest/SettingsPanel';
@@ -48,12 +47,13 @@ export const Settings = ({ open, setOpen }: SettingsProps): JSX.Element => {
 
   return (
     <>
-      <SidebarPrimary
+      <SidebarOverlay
         title="Settings"
         open={open}
         close={(): void => {
           setOpen(false);
         }}
+        direction="y"
       >
         <CollapsibleSection icon={<FiWifi />} title="WiFi & MQTT">
           <WiFi />
@@ -90,7 +90,7 @@ export const Settings = ({ open, setOpen }: SettingsProps): JSX.Element => {
         <CollapsibleSection icon={<FiLayout />} title="Interface">
           <Interface />
         </CollapsibleSection>
-      </SidebarPrimary>
+      </SidebarOverlay>
 
       {/* Plugins */}
       <SidebarOverlay
@@ -99,6 +99,7 @@ export const Settings = ({ open, setOpen }: SettingsProps): JSX.Element => {
         close={(): void => {
           setPluginsOpen(false);
         }}
+        direction="x"
       >
         <CollapsibleSection title="Range Test" icon={<FiRss />}>
           <RangeTestSettingsPanel />
@@ -122,6 +123,7 @@ export const Settings = ({ open, setOpen }: SettingsProps): JSX.Element => {
         close={(): void => {
           setChannelsOpen(false);
         }}
+        direction="x"
       >
         <ChannelsGroup />
       </SidebarOverlay>

src/components/layout/Sidebar/sections/SidebarOverlay.tsx

@@ -9,6 +9,7 @@ export interface SidebarOverlayProps {
   title: string;
   open: boolean;
   close: () => void;
+  direction: 'x' | 'y';
   children: React.ReactNode;
 }
 
@@ -16,20 +17,25 @@ export const SidebarOverlay = ({
   title,
   open,
   close,
+  direction,
   children,
 }: SidebarOverlayProps): JSX.Element => {
   return (
     <AnimatePresence>
       {open && (
         <m.div
-          className="absolute z-20 flex flex-col w-full h-full bg-primaryDark"
+          className="absolute z-10 flex h-full w-full flex-col bg-gray-100 dark:bg-primaryDark"
-          animate={{ translateX: 0 }}
+          animate={direction === 'x' ? { translateX: 0 } : { translateY: 0 }}
-          initial={{ translateX: '-100%' }}
+          initial={
-          exit={{ translateX: '-100%' }}
+            direction === 'x' ? { translateX: '-100%' } : { translateY: '100%' }
+          }
+          exit={
+            direction === 'x' ? { translateX: '-100%' } : { translateY: '100%' }
+          }
           transition={{ type: 'just' }}
         >
           <AnimateSharedLayout>
-            <div className="flex gap-2 p-2 border-b border-gray-300 dark:border-gray-600">
+            <div className="flex gap-2 border-b border-gray-300 p-2 dark:border-gray-600">
               <IconButton
                 onClick={(): void => {
                   close();

src/components/layout/Sidebar/sections/SidebarPrimary.tsx

@@ -1,50 +0,0 @@
-import type React from 'react';
-
-import { AnimatePresence, AnimateSharedLayout, m } from 'framer-motion';
-import { FiArrowDown } from 'react-icons/fi';
-
-import { IconButton } from '@meshtastic/components';
-
-export interface SidebarPrimaryProps {
-  title: string;
-  open: boolean;
-  close: () => void;
-  children: React.ReactNode;
-}
-
-export const SidebarPrimary = ({
-  title,
-  open,
-  close,
-  children,
-}: SidebarPrimaryProps): JSX.Element => {
-  return (
-    <AnimatePresence>
-      {open && (
-        <m.div
-          className="absolute flex h-full w-full flex-col bg-gray-100 dark:bg-primaryDark"
-          animate={{ translateY: 0 }}
-          initial={{ translateY: '100%' }}
-          exit={{ translateY: '100%' }}
-          transition={{ type: 'just' }}
-        >
-          <AnimateSharedLayout>
-            <div className="flex gap-2 p-2">
-              <IconButton
-                onClick={(): void => {
-                  close();
-                }}
-                icon={<FiArrowDown />}
-              />
-              <div className="my-auto text-lg font-medium dark:text-white">
-                {title}
-              </div>
-            </div>
-
-            <div className="flex-grow overflow-y-auto">{children}</div>
-          </AnimateSharedLayout>
-        </m.div>
-      )}
-    </AnimatePresence>
-  );
-};

src/pages/Map/styles.ts

@@ -1,28 +1,48 @@
+import type { Style } from 'mapbox-gl';
+
 export interface MapStyle {
   title: string;
-  url: string;
+  data: Style | string;
 }
 
 export const MapStyles = {
   Streets: {
     title: 'Streets',
-    url: 'mapbox://styles/mapbox/streets-v11?optimize=true',
+    data: 'mapbox://styles/mapbox/streets-v11?optimize=true',
   } as MapStyle,
   Outdoors: {
     title: 'Outdoors',
-    url: 'mapbox://styles/mapbox/outdoors-v11?optimize=true',
+    data: 'mapbox://styles/mapbox/outdoors-v11?optimize=true',
   } as MapStyle,
 
   Light: {
     title: 'Light',
-    url: 'mapbox://styles/mapbox/light-v10?optimize=true',
+    data: 'mapbox://styles/mapbox/light-v10?optimize=true',
   } as MapStyle,
   Dark: {
     title: 'Dark',
-    url: 'mapbox://styles/sachaw/ckwzwm92e1oep14pjunjqlqbo?optimize=true',
+    data: 'mapbox://styles/sachaw/ckwzwm92e1oep14pjunjqlqbo?optimize=true',
   } as MapStyle,
   Satellite: {
     title: 'Satellite',
-    url: 'mapbox://styles/mapbox/satellite-v9?optimize=true',
+
+    data: {
+      version: 8,
+      layers: [
+        {
+          id: 'esri',
+          type: 'raster',
+          source: 'esri',
+        },
+      ],
+      sources: {
+        esri: {
+          type: 'raster',
+          tiles: [
+            'https://clarity.maptiles.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+          ],
+        },
+      },
+    },
   } as MapStyle,
 };

src/pages/Nodes/NodeCard.tsx

@@ -114,6 +114,7 @@ export const NodeCard = ({
         close={(): void => {
           setInfoOpen(false);
         }}
+        direction="x"
       >
         <CollapsibleSection title="User" icon={<FiUser />}>
           <div>Info</div>