diff --git a/package.json b/package.json index d96ac224..f022929a 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8febba1b..2c3f7e7e 100644 --- a/pnpm-lock.yaml +++ b/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'} diff --git a/src/components/generic/Tooltip.tsx b/src/components/generic/Tooltip.tsx index 530be2ba..3a657afc 100644 --- a/src/components/generic/Tooltip.tsx +++ b/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 ( -
{children}
+
{children}
 ); }; diff --git a/src/components/menu/BottomNav.tsx b/src/components/menu/BottomNav.tsx index 483b62e7..b87662e1 100644 --- a/src/components/menu/BottomNav.tsx +++ b/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 ( -
-
- -
- - -
- +
+ + + - -
{ + 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-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 ? ( - - ) : appState.connType === connType.SERIAL ? ( - - ) : ( - - )} -
- {meshtasticState.nodes.find( - (node) => - node.number === meshtasticState.radio.hardware.myNodeNum, - )?.user?.longName ?? 'Disconnected'} -
-
- - -
- {primaryChannelSettings?.uplinkEnabled && - primaryChannelSettings?.downlinkEnabled && - !meshtasticState.radio.preferences.mqttDisabled ? ( - - ) : primaryChannelSettings?.uplinkEnabled && - !meshtasticState.radio.preferences.mqttDisabled ? ( - - ) : primaryChannelSettings?.downlinkEnabled && - !meshtasticState.radio.preferences.mqttDisabled ? ( - - ) : ( - - )} -
- + ? 'bg-yellow-400 dark:bg-yellow-400' + : 'bg-gray-400 dark:bg-secondaryDark dark:text-white' + } + > + {appState.connType === connType.BLE ? ( + + ) : appState.connType === connType.SERIAL ? ( + + ) : ( + + )} +
+ {meshtasticState.nodes.find( + (node) => node.number === meshtasticState.radio.hardware.myNodeNum, + )?.user?.longName ?? 'Disconnected'} +
+ + + + {primaryChannelSettings?.uplinkEnabled && + primaryChannelSettings?.downlinkEnabled && + !meshtasticState.radio.preferences.mqttDisabled ? ( + + ) : primaryChannelSettings?.uplinkEnabled && + !meshtasticState.radio.preferences.mqttDisabled ? ( + + ) : primaryChannelSettings?.downlinkEnabled && + !meshtasticState.radio.preferences.mqttDisabled ? ( + + ) : ( + + )} + + +
+ { + dispatch(toggleMobileNav()); + }} + className="md:hidden" + > + {appState.mobileNavOpen ? ( + + ) : ( + + )} +
-
{ - dispatch(toggleMobileNav()); + setShowVersionInfo(true); }} - 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" + className={appState.updateAvaliable ? 'animate-pulse' : ''} > - {appState.mobileNavOpen ? ( - + {appState.updateAvaliable ? ( + ) : ( - + )} -
-
- { - setShowVersionInfo(false); - }} - /> +

{process.env.COMMIT_HASH}

+ - -
{ - 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 ? ( - - ) : ( - - )} -

{process.env.COMMIT_HASH}

-
- + { + dispatch(setDarkModeEnabled(!appState.darkMode)); + }} + > + {appState.darkMode ? ( + + ) : ( + + )} + - -
{ - dispatch(setDarkModeEnabled(!appState.darkMode)); - }} - > - {appState.darkMode ? ( - - ) : ( - - )} -
- -
+ { + setShowVersionInfo(false); + }} + />
); }; diff --git a/src/components/menu/BottomNavItem.tsx b/src/components/menu/BottomNavItem.tsx new file mode 100644 index 00000000..65cb62c2 --- /dev/null +++ b/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 ( + +
+ + {children} + +
+ + ); +}; diff --git a/src/components/modals/VersionInfo.tsx b/src/components/modals/VersionInfo.tsx index 45928505..89535bd0 100644 --- a/src/components/modals/VersionInfo.tsx +++ b/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));