Clenup bottom nav, fix tooltip

package.json

@@ -18,7 +18,6 @@
     "@reduxjs/toolkit": "^1.7.2",
     "@tippyjs/react": "^4.2.6",
     "base64-js": "^1.5.1",
-    "cuid": "^2.1.8",
     "framer-motion": "^6.2.6",
     "mapbox-gl": "^2.7.0",
     "react": "^17.0.2",

pnpm-lock.yaml

@@ -18,7 +18,6 @@ specifiers:
   autoprefixer: ^10.4.2
   babel-plugin-module-resolver: ^4.1.0
   base64-js: ^1.5.1
-  cuid: ^2.1.8
   eslint: 8.9.0
   eslint-config-prettier: ^8.3.0
   eslint-import-resolver-alias: ^1.1.2
@@ -65,7 +64,6 @@ dependencies:
   '@reduxjs/toolkit': 1.7.2_react-redux@7.2.6+react@17.0.2
   '@tippyjs/react': 4.2.6_react-dom@17.0.2+react@17.0.2
   base64-js: 1.5.1
-  cuid: 2.1.8
   framer-motion: 6.2.6_react-dom@17.0.2+react@17.0.2
   mapbox-gl: 2.7.0
   react: 17.0.2
@@ -2662,10 +2660,6 @@ packages:
   /csstype/3.0.10:
     resolution: {integrity: sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==}
 
-  /cuid/2.1.8:
-    resolution: {integrity: sha512-xiEMER6E7TlTPnDxrM4eRiC6TRgjNX9xzEZ5U/Se2YJKr7Mq4pJn/2XEHjl3STcSh96GmkHPcBXLES8M29wyyg==}
-    dev: false
-
   /d3-color/3.0.1:
     resolution: {integrity: sha512-6/SlHkDOBLyQSJ1j1Ghs82OIUXpKWlR0hCsw0XrLSQhuUPuCSmLQ1QPH98vpnQxMUQM2/gfAkUEWsupVpd9JGw==}
     engines: {node: '>=12'}

src/components/generic/Tooltip.tsx

@@ -2,8 +2,6 @@ import 'tippy.js/dist/tippy.css';
 
 import type React from 'react';
 
-import cuid from 'cuid';
-
 import Tippy, { TippyProps } from '@tippyjs/react';
 
 export const Tooltip = ({
@@ -13,7 +11,7 @@ export const Tooltip = ({
 }: TippyProps): JSX.Element => {
   return (
     <Tippy content={content} {...props}>
-      <div key={cuid()}>{children}</div>
+      <div>{children}</div>
     </Tippy>
   );
 };

src/components/menu/BottomNav.tsx

@@ -17,7 +17,6 @@ import {
   RiArrowUpLine,
 } from 'react-icons/ri';
 
-import { Tooltip } from '@components/generic/Tooltip';
 import {
   connType,
   openConnectionModal,
@@ -29,6 +28,7 @@ import { useAppSelector } from '@hooks/useAppSelector';
 import { Protobuf, Types } from '@meshtastic/meshtasticjs';
 
 import { VersionInfo } from '../modals/VersionInfo';
+import { BottomNavItem } from './BottomNavItem';
 
 export const BottomNav = (): JSX.Element => {
   const [showVersionInfo, setShowVersionInfo] = React.useState(false);
@@ -40,133 +40,117 @@ export const BottomNav = (): JSX.Element => {
   ).find((channel) => channel.role === Protobuf.Channel_Role.PRIMARY)?.settings;
 
   return (
-    <div className="z-20 flex justify-between border-t border-gray-300 bg-white dark:border-gray-600 dark:bg-secondaryDark">
-      <div className="flex">
-        <Tooltip content="Meshtastic WebUI">
-          <div className="group flex cursor-pointer select-none border-r border-gray-300 p-1 hover:bg-gray-200 dark:border-gray-600 dark:text-white dark:hover:bg-primaryDark">
-            <img
-              title="Logo"
-              className="w-5 dark:hidden"
-              src="/Logo_Black.svg"
-            />
-            <img
-              title="Logo"
-              className="hidden w-5 dark:flex"
-              src="/Logo_White.svg"
-            />
-          </div>
-        </Tooltip>
-
-        <Tooltip content={`Connection Status`}>
-          <div
-            className={`group flex w-min cursor-pointer p-1 hover:bg-opacity-80 ${
-              [
-                Types.DeviceStatusEnum.DEVICE_CONNECTED,
-                Types.DeviceStatusEnum.DEVICE_CONFIGURED,
-              ].includes(meshtasticState.deviceStatus)
-                ? 'bg-primary'
-                : [
-                    Types.DeviceStatusEnum.DEVICE_CONNECTING,
-                    Types.DeviceStatusEnum.DEVICE_RECONNECTING,
-                    Types.DeviceStatusEnum.DEVICE_CONFIGURING,
-                  ].includes(meshtasticState.deviceStatus)
-                ? 'bg-yellow-400'
-                : 'bg-gray-400'
-            }`}
-            onClick={(): void => {
-              dispatch(dispatch(openConnectionModal()));
-            }}
-          >
-            {appState.connType === connType.BLE ? (
-              <FiBluetooth className="mr-1 p-0.5 group-active:scale-90" />
-            ) : appState.connType === connType.SERIAL ? (
-              <FiCpu className="mr-1 p-0.5 group-active:scale-90" />
-            ) : (
-              <FiWifi className="mr-1 p-0.5 group-active:scale-90" />
-            )}
-            <div className="truncate text-xs font-medium group-active:scale-90">
-              {meshtasticState.nodes.find(
-                (node) =>
-                  node.number === meshtasticState.radio.hardware.myNodeNum,
-              )?.user?.longName ?? 'Disconnected'}
-            </div>
-          </div>
-        </Tooltip>
-        <Tooltip content="MQTT Status">
-          <div className="group flex cursor-pointer select-none border-r border-gray-300 p-1 hover:bg-gray-200 dark:border-gray-600 dark:text-white dark:hover:bg-primaryDark">
-            {primaryChannelSettings?.uplinkEnabled &&
-            primaryChannelSettings?.downlinkEnabled &&
-            !meshtasticState.radio.preferences.mqttDisabled ? (
-              <RiArrowUpDownLine className="p-0.5 group-active:scale-90" />
-            ) : primaryChannelSettings?.uplinkEnabled &&
-              !meshtasticState.radio.preferences.mqttDisabled ? (
-              <RiArrowUpLine className="p-0.5 group-active:scale-90" />
-            ) : primaryChannelSettings?.downlinkEnabled &&
-              !meshtasticState.radio.preferences.mqttDisabled ? (
-              <RiArrowDownLine className="p-0.5 group-active:scale-90" />
-            ) : (
-              <FiX className="p-0.5" />
-            )}
-          </div>
-        </Tooltip>
-      </div>
-      <div
-        onClick={(): void => {
-          dispatch(toggleMobileNav());
-        }}
-        className="group flex w-full cursor-pointer select-none border-r border-gray-300 p-1 hover:bg-gray-200 dark:border-gray-600 dark:text-white dark:hover:bg-primaryDark md:hidden"
-      >
-        {appState.mobileNavOpen ? (
-          <FiX className="m-auto p-0.5 group-active:scale-90" />
-        ) : (
-          <FiMenu className="m-auto p-0.5 group-active:scale-90" />
-        )}
-      </div>
-      <div className="flex">
-        <VersionInfo
-          visible={showVersionInfo}
-          onClose={(): void => {
-            setShowVersionInfo(false);
-          }}
+    <div className="z-20 flex justify-between divide-x divide-gray-300 border-t border-gray-300 bg-white dark:divide-gray-600 dark:border-gray-600 dark:bg-secondaryDark">
+      <BottomNavItem tooltip="Meshtastic WebUI">
+        <img
+          title="Logo"
+          className="my-auto w-5"
+          src={appState.darkMode ? '/Logo_White.svg' : '/Logo_Black.svg'}
         />
+      </BottomNavItem>
 
-        <Tooltip
-          content={
-            appState.updateAvaliable ? 'Update Avaliable' : 'Current Commit'
-          }
+      <BottomNavItem
+        tooltip="Connection Status"
+        onClick={(): void => {
+          dispatch(openConnectionModal());
+        }}
+        className={
+          [
+            Types.DeviceStatusEnum.DEVICE_CONNECTED,
+            Types.DeviceStatusEnum.DEVICE_CONFIGURED,
+          ].includes(meshtasticState.deviceStatus)
+            ? 'bg-primary dark:bg-primary'
+            : [
+                Types.DeviceStatusEnum.DEVICE_CONNECTING,
+                Types.DeviceStatusEnum.DEVICE_RECONNECTING,
+                Types.DeviceStatusEnum.DEVICE_CONFIGURING,
+              ].includes(meshtasticState.deviceStatus)
+            ? 'bg-yellow-400 dark:bg-yellow-400'
+            : 'bg-gray-400 dark:bg-secondaryDark dark:text-white'
+        }
+      >
+        {appState.connType === connType.BLE ? (
+          <FiBluetooth className="h-4" />
+        ) : appState.connType === connType.SERIAL ? (
+          <FiCpu className="h-4" />
+        ) : (
+          <FiWifi className="h-4" />
+        )}
+        <div className="truncate text-xs font-medium">
+          {meshtasticState.nodes.find(
+            (node) => node.number === meshtasticState.radio.hardware.myNodeNum,
+          )?.user?.longName ?? 'Disconnected'}
+        </div>
+      </BottomNavItem>
+
+      <BottomNavItem tooltip="MQTT Status">
+        {primaryChannelSettings?.uplinkEnabled &&
+        primaryChannelSettings?.downlinkEnabled &&
+        !meshtasticState.radio.preferences.mqttDisabled ? (
+          <RiArrowUpDownLine className="h-4" />
+        ) : primaryChannelSettings?.uplinkEnabled &&
+          !meshtasticState.radio.preferences.mqttDisabled ? (
+          <RiArrowUpLine className="h-4" />
+        ) : primaryChannelSettings?.downlinkEnabled &&
+          !meshtasticState.radio.preferences.mqttDisabled ? (
+          <RiArrowDownLine className="h-4" />
+        ) : (
+          <FiX className="h-4" />
+        )}
+      </BottomNavItem>
+
+      <div className="flex-grow">
+        <BottomNavItem
+          tooltip="Toggle Navigation"
+          onClick={(): void => {
+            dispatch(toggleMobileNav());
+          }}
+          className="md:hidden"
         >
-          <div
-            onClick={(): void => {
-              setShowVersionInfo(true);
-            }}
-            className={`group flex cursor-pointer select-none border-l border-gray-300 p-1 hover:bg-gray-200 dark:border-gray-600 dark:text-white dark:hover:bg-primaryDark ${
-              appState.updateAvaliable ? 'animate-pulse' : ''
-            }`}
-          >
-            {appState.updateAvaliable ? (
-              <MdUpgrade className="mr-1 p-0.5 group-active:scale-90" />
-            ) : (
-              <FiGitBranch className="mr-1 p-0.5 group-active:scale-90" />
-            )}
-            <p className="text-xs opacity-60">{process.env.COMMIT_HASH}</p>
-          </div>
-        </Tooltip>
-
-        <Tooltip content={`Toggle Theme`}>
-          <div
-            className="group cursor-pointer border-l border-gray-300 p-1 hover:bg-gray-200 dark:border-gray-600 dark:text-white dark:hover:bg-primaryDark"
-            onClick={(): void => {
-              dispatch(setDarkModeEnabled(!appState.darkMode));
-            }}
-          >
-            {appState.darkMode ? (
-              <FiSun className="p-0.5 group-active:scale-90" />
-            ) : (
-              <FiMoon className="p-0.5 group-active:scale-90" />
-            )}
-          </div>
-        </Tooltip>
+          {appState.mobileNavOpen ? (
+            <FiX className="m-auto h-4" />
+          ) : (
+            <FiMenu className="m-auto h-4" />
+          )}
+        </BottomNavItem>
       </div>
+
+      <BottomNavItem
+        tooltip={
+          appState.updateAvaliable ? 'Update Avaliable' : 'Current Commit'
+        }
+        onClick={(): void => {
+          setShowVersionInfo(true);
+        }}
+        className={appState.updateAvaliable ? 'animate-pulse' : ''}
+      >
+        {appState.updateAvaliable ? (
+          <MdUpgrade className="h-4" />
+        ) : (
+          <FiGitBranch className="h-4" />
+        )}
+        <p className="text-xs opacity-60">{process.env.COMMIT_HASH}</p>
+      </BottomNavItem>
+
+      <BottomNavItem
+        tooltip="Toggle Theme"
+        onClick={(): void => {
+          dispatch(setDarkModeEnabled(!appState.darkMode));
+        }}
+      >
+        {appState.darkMode ? (
+          <FiSun className="h-4" />
+        ) : (
+          <FiMoon className="h-4" />
+        )}
+      </BottomNavItem>
+
+      <VersionInfo
+        visible={showVersionInfo}
+        onClose={(): void => {
+          setShowVersionInfo(false);
+        }}
+      />
     </div>
   );
 };

src/components/menu/BottomNavItem.tsx

@@ -0,0 +1,32 @@
+import type React from 'react';
+
+import { m } from 'framer-motion';
+
+import { Tooltip } from '@components/generic/Tooltip';
+
+export interface BottomNavItemProps {
+  tooltip: string;
+  onClick?: () => void;
+  className?: string;
+  children: React.ReactNode;
+}
+
+export const BottomNavItem = ({
+  tooltip,
+  onClick,
+  className,
+  children,
+}: BottomNavItemProps) => {
+  return (
+    <Tooltip content={tooltip}>
+      <div
+        onClick={onClick}
+        className={`group flex h-full cursor-pointer select-none p-1 hover:bg-gray-200 dark:text-white dark:hover:bg-primaryDark ${className}`}
+      >
+        <m.div className="flex w-full gap-1" whileTap={{ scale: 0.99 }}>
+          {children}
+        </m.div>
+      </div>
+    </Tooltip>
+  );
+};

src/components/modals/VersionInfo.tsx

@@ -51,7 +51,6 @@ export const VersionInfo = ({
       const index = data.findIndex(
         (commit) => commit.sha.substring(0, 7) === process.env.COMMIT_HASH,
       );
-      console.log(index);
 
       if (index === -1 || index > 0) {
         dispatch(setUpdateAvaliable(true));