From ec3323077a42c84ece2ee7c6dd0be57a99cf1476 Mon Sep 17 00:00:00 2001
From: Sacha Weatherstone <sachaw100@hotmail.com>
Date: Sat, 19 Feb 2022 23:57:34 +1100
Subject: [PATCH] More tooltips & Plugin enabled status indicators

---
 .../layout/Sidebar/Settings/Index.tsx         | 64 +++++++++++++++++--
 src/pages/Nodes/NodeCard.tsx                  |  2 +
 2 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/src/components/layout/Sidebar/Settings/Index.tsx b/src/components/layout/Sidebar/Settings/Index.tsx
index d327cbe5..ecd84afc 100644
--- a/src/components/layout/Sidebar/Settings/Index.tsx
+++ b/src/components/layout/Sidebar/Settings/Index.tsx
@@ -15,6 +15,7 @@ import {
   FiZap,
 } from 'react-icons/fi';
 
+import { useAppSelector } from '@app/hooks/useAppSelector.js';
 import { CollapsibleSection } from '@components/generic/Sidebar/CollapsibleSection';
 import { ExternalSection } from '@components/generic/Sidebar/ExternalSection';
 import { SidebarOverlay } from '@components/generic/Sidebar/SidebarOverlay';
@@ -39,7 +40,12 @@ export interface SettingsProps {
 export const Settings = ({ open, setOpen }: SettingsProps): JSX.Element => {
   const [pluginsOpen, setPluginsOpen] = React.useState(false);
   const [channelsOpen, setChannelsOpen] = React.useState(false);
-  // const { hasGps, hasWifi } = useAppSelector((state) => state.meshtastic.radio.hardware);
+  const {
+    rangeTestPluginEnabled,
+    extNotificationPluginEnabled,
+    serialpluginEnabled,
+    storeForwardPluginEnabled,
+  } = useAppSelector((state) => state.meshtastic.radio.preferences);
 
   const hasGps = true;
   const hasWifi = true;
@@ -100,16 +106,64 @@ export const Settings = ({ open, setOpen }: SettingsProps): JSX.Element => {
         }}
         direction="x"
       >
-        <CollapsibleSection title="Range Test" icon={<FiRss />}>
+        <CollapsibleSection
+          title="Range Test"
+          icon={
+            <div className="flex gap-2">
+              <FiRss />
+              <div
+                className={`h-3 w-3 rounded-full ${
+                  rangeTestPluginEnabled ? 'bg-green-500' : 'bg-red-500'
+                }`}
+              />
+            </div>
+          }
+        >
           <RangeTestSettingsPanel />
         </CollapsibleSection>
-        <CollapsibleSection title="External Notifications" icon={<FiBell />}>
+        <CollapsibleSection
+          title="External Notifications"
+          icon={
+            <div className="flex gap-2">
+              <FiBell />
+              <div
+                className={`h-3 w-3 rounded-full ${
+                  extNotificationPluginEnabled ? 'bg-green-500' : 'bg-red-500'
+                }`}
+              />
+            </div>
+          }
+        >
           <ExternalNotificationsSettingsPlanel />
         </CollapsibleSection>
-        <CollapsibleSection title="Serial" icon={<FiAlignLeft />}>
+        <CollapsibleSection
+          title="Serial"
+          icon={
+            <div className="flex gap-2">
+              <FiAlignLeft />
+              <div
+                className={`h-3 w-3 rounded-full ${
+                  serialpluginEnabled ? 'bg-green-500' : 'bg-red-500'
+                }`}
+              />
+            </div>
+          }
+        >
           <SerialSettingsPanel />
         </CollapsibleSection>
-        <CollapsibleSection title="Store & Forward" icon={<FiFastForward />}>
+        <CollapsibleSection
+          title="Store & Forward"
+          icon={
+            <div className="flex gap-2">
+              <FiFastForward />
+              <div
+                className={`h-3 w-3 rounded-full ${
+                  storeForwardPluginEnabled ? 'bg-green-500' : 'bg-red-500'
+                }`}
+              />
+            </div>
+          }
+        >
           <StoreForwardSettingsPanel />
         </CollapsibleSection>
       </SidebarOverlay>
diff --git a/src/pages/Nodes/NodeCard.tsx b/src/pages/Nodes/NodeCard.tsx
index 4ac150b7..668b2432 100644
--- a/src/pages/Nodes/NodeCard.tsx
+++ b/src/pages/Nodes/NodeCard.tsx
@@ -59,6 +59,7 @@ export const NodeCard = ({
         actions={
           <>
             <IconButton
+              tooltip={PositionConfidence !== 'none' ? 'Fly to Node' : ''}
               disabled={PositionConfidence === 'none'}
               onClick={(e): void => {
                 e.stopPropagation();
@@ -84,6 +85,7 @@ export const NodeCard = ({
               }
             />
             <IconButton
+              tooltip="Show Node Info"
               onClick={(e): void => {
                 e.stopPropagation();
                 setInfoOpen(true);