From 4faa6491c21c858af9e034536db6ec29894c03ce Mon Sep 17 00:00:00 2001
From: ajvpot <553597+ajvpot@users.noreply.github.com>
Date: Thu, 18 Sep 2025 01:53:15 +0200
Subject: [PATCH] ui rearranging

---
 src/components/ConfigContext.tsx    | 16 +++++------
 src/components/MapLayerSettings.tsx | 41 ++++++++++++++---------------
 src/components/MapView.tsx          |  4 +--
 3 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/src/components/ConfigContext.tsx b/src/components/ConfigContext.tsx
index 4ea8852..f7a846e 100644
--- a/src/components/ConfigContext.tsx
+++ b/src/components/ConfigContext.tsx
@@ -128,14 +128,6 @@ function ConfigPopover({ config, setConfig, onClose, anchorRef, onOpenKeyModal }
           ))}
         </select>
       </div>
-      <div className="mb-2">
-        <button
-          className="px-3 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 w-full"
-          onClick={onOpenKeyModal}
-        >
-          Manage Channel Keys
-        </button>
-      </div>
       <div className="mb-2">
         <div className="font-medium mb-2">Region</div>
         <select
@@ -152,6 +144,14 @@ function ConfigPopover({ config, setConfig, onClose, anchorRef, onOpenKeyModal }
           Select a region to filter chat messages and stats
         </p>
       </div>
+      <div className="mb-2">
+        <button
+          className="px-3 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 w-full"
+          onClick={onOpenKeyModal}
+        >
+          Manage Channel Keys
+        </button>
+      </div>
     </div>
   );
 }
diff --git a/src/components/MapLayerSettings.tsx b/src/components/MapLayerSettings.tsx
index 7f8b5fb..fb43cb1 100644
--- a/src/components/MapLayerSettings.tsx
+++ b/src/components/MapLayerSettings.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useState, useRef, useEffect } from 'react';
 import { useMapLayerSettings, TILE_LAYERS, NODE_TYPE_OPTIONS, type MapLayerSettings } from '@/hooks/useMapLayerSettings';
+import { Square3Stack3DIcon } from '@heroicons/react/24/outline';
 
 interface MapLayerSettingsProps {
   onSettingsChange?: (settings: MapLayerSettings) => void;
@@ -50,9 +51,7 @@ export default function MapLayerSettingsComponent({ onSettingsChange }: MapLayer
         aria-label="Map layer settings"
       >
         {/* Layers icon */}
-        <svg width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
-        </svg>
+        <Square3Stack3DIcon className="w-5 h-5" />
       </button>
 
       {isOpen && (
@@ -137,24 +136,6 @@ export default function MapLayerSettingsComponent({ onSettingsChange }: MapLayer
             </span>
           </label>
 
-          {/* Tile layer */}
-          <div className="mb-3">
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-              Tile layer
-            </label>
-            <select
-              value={settings.tileLayer}
-              onChange={(e) => updateSetting('tileLayer', e.target.value)}
-              className="w-full p-2 border border-gray-300 dark:border-neutral-600 rounded text-sm bg-white dark:bg-neutral-800 text-gray-700 dark:text-gray-300"
-            >
-              {TILE_LAYERS.map(layer => (
-                <option key={layer.key} value={layer.key}>
-                  {layer.label}
-                </option>
-              ))}
-            </select>
-          </div>
-
           {/* Show all neighbors */}
           <label className="flex items-center gap-2 mb-2 cursor-pointer">
             <input
@@ -184,6 +165,24 @@ export default function MapLayerSettingsComponent({ onSettingsChange }: MapLayer
             </span>
           </label>
 
+          {/* Tile layer */}
+          <div className="mb-3">
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Tile layer
+            </label>
+            <select
+              value={settings.tileLayer}
+              onChange={(e) => updateSetting('tileLayer', e.target.value)}
+              className="w-full p-2 border border-gray-300 dark:border-neutral-600 rounded text-sm bg-white dark:bg-neutral-800 text-gray-700 dark:text-gray-300"
+            >
+              {TILE_LAYERS.map(layer => (
+                <option key={layer.key} value={layer.key}>
+                  {layer.label}
+                </option>
+              ))}
+            </select>
+          </div>
+
           {/* Show meshcore coverage overlay 
           <label className="flex items-center gap-2 mb-3 cursor-pointer">
             <input
diff --git a/src/components/MapView.tsx b/src/components/MapView.tsx
index f929cf6..700e9c5 100644
--- a/src/components/MapView.tsx
+++ b/src/components/MapView.tsx
@@ -856,7 +856,7 @@ export default function MapView({ target = '_self' }: MapViewProps = {}) {
             fontFamily: 'monospace'
           }}>
             <div style={{ fontWeight: 'bold', marginBottom: '8px' }}>
-              Path Traffic - Log Scale ({pathConnections.length} connections)
+              Path Traffic
             </div>
             <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
               <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
@@ -885,7 +885,7 @@ export default function MapView({ target = '_self' }: MapViewProps = {}) {
               </div>
               <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginTop: '4px', paddingTop: '4px', borderTop: '1px solid #e5e7eb' }}>
                 <div style={{ width: '20px', height: '2px', backgroundColor: '#8b5cf6' }}></div>
-                <span>Direct connections</span>
+                <span>MQTT connections</span>
               </div>
             </div>
           </div>