Tooltips, mqtt status & commit hash

4 years ago · 070fbc664f
6 changed files with 225 additions and 140 deletions
--- a/package.json
+++ b/package.json
@ -17,6 +17,7 @@
    "@meshtastic/components": "^1.0.17",
    "@meshtastic/meshtasticjs": "^0.6.38",
    "@reduxjs/toolkit": "^1.7.1",
+    "@tippyjs/react": "^4.2.6",
    "base64-js": "^1.5.1",
    "boring-avatars": "^1.6.1",
    "i18next": "^21.6.6",
@ -37,8 +38,10 @@
    "rfc4648": "^1.5.1",
    "swr": "^1.1.2",
    "timeago-react": "^3.0.4",
+    "tippy.js": "^6.3.7",
    "type-route": "^0.6.0",
-    "use-breakpoint": "^3.0.1"
+    "use-breakpoint": "^3.0.1",
+    "vite-plugin-environment": "^1.1.0"
  },
  "devDependencies": {
    "@types/mapbox-gl": "^2.6.0",
@ -53,7 +56,7 @@
    "@vitejs/plugin-react": "^1.1.4",
    "autoprefixer": "^10.4.2",
    "babel-plugin-module-resolver": "^4.1.0",
-    "eslint": "8.6.0",
+    "eslint": "8.7.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-import-resolver-babel-module": "^5.3.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -6,6 +6,7 @@ specifiers:
  '@meshtastic/components': ^1.0.17
  '@meshtastic/meshtasticjs': ^0.6.38
  '@reduxjs/toolkit': ^1.7.1
+  '@tippyjs/react': ^4.2.6
  '@types/mapbox-gl': ^2.6.0
  '@types/react': ^17.0.38
  '@types/react-dom': ^17.0.11
@ -20,7 +21,7 @@ specifiers:
  babel-plugin-module-resolver: ^4.1.0
  base64-js: ^1.5.1
  boring-avatars: ^1.6.1
-  eslint: 8.6.0
+  eslint: 8.7.0
  eslint-config-prettier: ^8.3.0
  eslint-import-resolver-alias: ^1.1.2
  eslint-import-resolver-babel-module: ^5.3.1
@ -51,11 +52,13 @@ specifiers:
  tailwindcss: ^3.0.15
  tar: ^6.1.11
  timeago-react: ^3.0.4
+  tippy.js: ^6.3.7
  type-route: ^0.6.0
  typescript: ^4.5.4
  use-breakpoint: ^3.0.1
  vite: ^2.7.12
  vite-plugin-cdn-import: ^0.3.5
+  vite-plugin-environment: ^1.1.0
  vite-plugin-pwa: ^0.11.13
  workbox-window: ^6.4.2

@ -65,6 +68,7 @@ dependencies:
  '@meshtastic/components': 1.0.17_@[email protected]
  '@meshtastic/meshtasticjs': 0.6.38
  '@reduxjs/toolkit': 1.7[email protected][email protected]
+  '@tippyjs/react': 4.2[email protected][email protected]
  base64-js: 1.5.1
  boring-avatars: 1.6.1
  i18next: 21.6.6
@ -85,8 +89,10 @@ dependencies:
  rfc4648: 1.5.1
  swr: 1.1[email protected]
  timeago-react: 3.0[email protected]
+  tippy.js: 6.3.7
  type-route: 0.6.0
  use-breakpoint: 3.0[email protected][email protected]
+  vite-plugin-environment: 1.1[email protected]

 devDependencies:
  '@types/mapbox-gl': 2.6.0
@ -95,20 +101,20 @@ devDependencies:
  '@types/react-file-icon': 1.0.1
  '@types/w3c-web-serial': 1.0.2
  '@types/web-bluetooth': 0.0.12
-  '@typescript-eslint/eslint-plugin': 5.9.1_b7b2e42b32ee097737cd3e626b10847b
-  '@typescript-eslint/parser': 5.9.1_eslint@8.6[email protected]
+  '@typescript-eslint/eslint-plugin': 5.9.1_bbe74534e31a8c21f1b3522447c55341
+  '@typescript-eslint/parser': 5.9.1_eslint@8.7[email protected]
  '@verypossible/eslint-config': 1.6[email protected]
  '@vitejs/plugin-react': 1.1.4
  autoprefixer: 10.4[email protected]
  babel-plugin-module-resolver: 4.1.0
-  eslint: 8.6.0
-  eslint-config-prettier: 8.3.0_eslint@8.6.0
+  eslint: 8.7.0
+  eslint-config-prettier: 8.3.0_eslint@8.7.0
  eslint-import-resolver-alias: 1.1[email protected]
  eslint-import-resolver-babel-module: 5.3.1_e51044130ac762fd207a8cd2109b5344
-  eslint-import-resolver-typescript: 2.5.0_b5a36b8c1535387c8dd00eff7ec6b551
-  eslint-plugin-import: 2.25.4_eslint@8.6.0
-  eslint-plugin-react: 7.28.0_eslint@8.6.0
-  eslint-plugin-react-hooks: 4.3.0_eslint@8.6.0
+  eslint-import-resolver-typescript: 2.5.0_9ff7dbcc486b497d34e34a545c49272a
+  eslint-plugin-import: 2.25.4_eslint@8.7.0
+  eslint-plugin-react: 7.28.0_eslint@8.7.0
+  eslint-plugin-react-hooks: 4.3.0_eslint@8.7.0
  gzipper: 6.2.1
  postcss: 8.4.5
  prettier: 2.5.1
@ -122,13 +128,13 @@ devDependencies:

 packages:

-  /@apideck/better-ajv-errors/0.3.2_ajv@8.8.2:
+  /@apideck/better-ajv-errors/0.3.2_ajv@8.9.0:
    resolution: {integrity: sha512-JdEazx7qiVqTBzzBl5rolRwl5cmhihjfIcpqRzIZjtT6b18liVmDn/VlWpqW4C/qP2hrFFMLRV1wlex8ZVBPTg==}
    engines: {node: '>=10'}
    peerDependencies:
      ajv: '>=8'
    dependencies:
-      ajv: 8.8.2
+      ajv: 8.9.0
      json-schema: 0.4.0
      jsonpointer: 5.0.0
      leven: 3.1.0
@ -241,8 +247,8 @@ packages:
      regexpu-core: 4.8.0
    dev: true

-  /@babel/helper-define-polyfill-provider/0.3.0_@[email protected]:
-    resolution: {integrity: sha512-7hfT8lUljl/tM3h+izTX/pO3W3frz2ok6Pk+gzys8iJqDfZrZy2pXjRTZAvG2YmfHun1X4q8/UZRLatMfqc5Tg==}
+  /@babel/helper-define-polyfill-provider/0.3.1_@[email protected]:
+    resolution: {integrity: sha512-J9hGMpJQmtWmj46B3kBHmL38UhJGhYX7eqkcq+2gsstyYt341HmPeWspihX43yVRA0mS+8GGk2Gckc7bY/HCmA==}
    peerDependencies:
      '@babel/core': ^7.4.0-0
    dependencies:
@ -1255,10 +1261,10 @@ packages:
      '@babel/plugin-transform-unicode-regex': 7.16.7_@[email protected]
      '@babel/preset-modules': 0.1.5_@[email protected]
      '@babel/types': 7.16.8
-      babel-plugin-polyfill-corejs2: 0.3.0_@[email protected]
-      babel-plugin-polyfill-corejs3: 0.5.0_@[email protected]
-      babel-plugin-polyfill-regenerator: 0.3.0_@[email protected]
-      core-js-compat: 3.20.2
+      babel-plugin-polyfill-corejs2: 0.3.1_@[email protected]
+      babel-plugin-polyfill-corejs3: 0.5.1_@[email protected]
+      babel-plugin-polyfill-regenerator: 0.3.1_@[email protected]
+      core-js-compat: 3.20.3
      semver: 6.3.0
    transitivePeerDependencies:
      - supports-color
@ -1565,6 +1571,10 @@ packages:
      fastq: 1.13.0
    dev: true

+  /@popperjs/core/2.11.2:
+    resolution: {integrity: sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==}
+    dev: false
+
  /@protobuf-ts/runtime/2.2.1:
    resolution: {integrity: sha512-iF7VFFz61ep5w/+4Ub+2GaKPF1/s0YWLxjEia2+x2/xUpl4vkI0yWf2RRdh3GHl4f3j1he8M+WNRGh26F+Vupw==}
    dev: false
@ -1659,6 +1669,17 @@ packages:
      string.prototype.matchall: 4.0.6
    dev: true

+  /@tippyjs/react/[email protected][email protected]:
+    resolution: {integrity: sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+    dependencies:
+      react: 17.0.2
+      react-dom: 17.0[email protected]
+      tippy.js: 6.3.7
+    dev: false
+
  /@types/estree/0.0.39:
    resolution: {integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==}
    dev: true
@ -1784,7 +1805,7 @@ packages:
      - supports-color
    dev: true

-  /@typescript-eslint/eslint-plugin/5.9.1_b7b2e42b32ee097737cd3e626b10847b:
+  /@typescript-eslint/eslint-plugin/5.9.1_bbe74534e31a8c21f1b3522447c55341:
    resolution: {integrity: sha512-Xv9tkFlyD4MQGpJgTo6wqDqGvHIRmRgah/2Sjz1PUnJTawjHWIwBivUE9x0QtU2WVii9baYgavo/bHjrZJkqTw==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
@ -1795,12 +1816,12 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/experimental-utils': 5.9.1_eslint@8.6[email protected]
-      '@typescript-eslint/parser': 5.9.1_eslint@8.6[email protected]
+      '@typescript-eslint/experimental-utils': 5.9.1_eslint@8.7[email protected]
+      '@typescript-eslint/parser': 5.9.1_eslint@8.7[email protected]
      '@typescript-eslint/scope-manager': 5.9.1
-      '@typescript-eslint/type-utils': 5.9.1_eslint@8.6[email protected]
+      '@typescript-eslint/type-utils': 5.9.1_eslint@8.7[email protected]
      debug: 4.3.3
-      eslint: 8.6.0
+      eslint: 8.7.0
      functional-red-black-tree: 1.0.1
      ignore: 5.2.0
      regexpp: 3.2.0
@ -1829,7 +1850,7 @@ packages:
      - typescript
    dev: true

-  /@typescript-eslint/experimental-utils/5.9.1_eslint@8.6[email protected]:
+  /@typescript-eslint/experimental-utils/5.9.1_eslint@8.7[email protected]:
    resolution: {integrity: sha512-cb1Njyss0mLL9kLXgS/eEY53SZQ9sT519wpX3i+U457l2UXRDuo87hgKfgRazmu9/tQb0x2sr3Y0yrU+Zz0y+w==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
@ -1839,9 +1860,9 @@ packages:
      '@typescript-eslint/scope-manager': 5.9.1
      '@typescript-eslint/types': 5.9.1
      '@typescript-eslint/typescript-estree': 5.9[email protected]
-      eslint: 8.6.0
+      eslint: 8.7.0
      eslint-scope: 5.1.1
-      eslint-utils: 3.0.0_eslint@8.6.0
+      eslint-utils: 3.0.0_eslint@8.7.0
    transitivePeerDependencies:
      - supports-color
      - typescript
@ -1867,7 +1888,7 @@ packages:
      - supports-color
    dev: true

-  /@typescript-eslint/parser/5.9.1_eslint@8.6[email protected]:
+  /@typescript-eslint/parser/5.9.1_eslint@8.7[email protected]:
    resolution: {integrity: sha512-PLYO0AmwD6s6n0ZQB5kqPgfvh73p0+VqopQQLuNfi7Lm0EpfKyDalchpVwkE+81k5HeiRrTV/9w1aNHzjD7C4g==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
@ -1881,7 +1902,7 @@ packages:
      '@typescript-eslint/types': 5.9.1
      '@typescript-eslint/typescript-estree': 5.9[email protected]
      debug: 4.3.3
-      eslint: 8.6.0
+      eslint: 8.7.0
      typescript: 4.5.4
    transitivePeerDependencies:
      - supports-color
@ -1903,7 +1924,7 @@ packages:
      '@typescript-eslint/visitor-keys': 5.9.1
    dev: true

-  /@typescript-eslint/type-utils/5.9.1_eslint@8.6[email protected]:
+  /@typescript-eslint/type-utils/5.9.1_eslint@8.7[email protected]:
    resolution: {integrity: sha512-tRSpdBnPRssjlUh35rE9ug5HrUvaB9ntREy7gPXXKwmIx61TNN7+l5YKgi1hMKxo5NvqZCfYhA5FvyuJG6X6vg==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
@ -1913,9 +1934,9 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/experimental-utils': 5.9.1_eslint@8.6[email protected]
+      '@typescript-eslint/experimental-utils': 5.9.1_eslint@8.7[email protected]
      debug: 4.3.3
-      eslint: 8.6.0
+      eslint: 8.7.0
      tsutils: 3.21[email protected]
      typescript: 4.5.4
    transitivePeerDependencies:
@ -1987,7 +2008,7 @@ packages:
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dependencies:
      '@typescript-eslint/types': 5.9.1
-      eslint-visitor-keys: 3.1.0
+      eslint-visitor-keys: 3.2.0
    dev: true

  /@verypossible/eslint-config/[email protected]:
@ -2076,8 +2097,8 @@ packages:
      uri-js: 4.4.1
    dev: true

-  /ajv/8.8.2:
-    resolution: {integrity: sha512-x9VuX+R/jcFj1DHo/fCp99esgGDWiHENrKxaCENuCxpoMCmAt/COCGVDwA7kleEpEzJjDnvh3yGoOuLu0Dtllw==}
+  /ajv/8.9.0:
+    resolution: {integrity: sha512-qOKJyNj/h+OWx7s5DePL6Zu1KeM9jPZhwBqs+7DzP6bGOvqzVCSf0xueYmVuaC/oQ/VtS2zLMLHdQFbkka+XDQ==}
    dependencies:
      fast-deep-equal: 3.1.3
      json-schema-traverse: 1.0.0
@ -2233,38 +2254,38 @@ packages:
      resolve: 1.21.0
    dev: true

-  /babel-plugin-polyfill-corejs2/0.3.0_@[email protected]:
-    resolution: {integrity: sha512-wMDoBJ6uG4u4PNFh72Ty6t3EgfA91puCuAwKIazbQlci+ENb/UU9A3xG5lutjUIiXCIn1CY5L15r9LimiJyrSA==}
+  /babel-plugin-polyfill-corejs2/0.3.1_@[email protected]:
+    resolution: {integrity: sha512-v7/T6EQcNfVLfcN2X8Lulb7DjprieyLWJK/zOWH5DUYcAgex9sP3h25Q+DLsX9TloXe3y1O8l2q2Jv9q8UVB9w==}
    peerDependencies:
      '@babel/core': ^7.0.0-0
    dependencies:
      '@babel/compat-data': 7.16.8
      '@babel/core': 7.16.7
-      '@babel/helper-define-polyfill-provider': 0.3.0_@[email protected]
+      '@babel/helper-define-polyfill-provider': 0.3.1_@[email protected]
      semver: 6.3.0
    transitivePeerDependencies:
      - supports-color
    dev: true

-  /babel-plugin-polyfill-corejs3/0.5.0_@[email protected]:
-    resolution: {integrity: sha512-Hcrgnmkf+4JTj73GbK3bBhlVPiLL47owUAnoJIf69Hakl3q+KfodbDXiZWGMM7iqCZTxCG3Z2VRfPNYES4rXqQ==}
+  /babel-plugin-polyfill-corejs3/0.5.1_@[email protected]:
+    resolution: {integrity: sha512-TihqEe4sQcb/QcPJvxe94/9RZuLQuF1+To4WqQcRvc+3J3gLCPIPgDKzGLG6zmQLfH3nn25heRuDNkS2KR4I8A==}
    peerDependencies:
      '@babel/core': ^7.0.0-0
    dependencies:
      '@babel/core': 7.16.7
-      '@babel/helper-define-polyfill-provider': 0.3.0_@[email protected]
-      core-js-compat: 3.20.2
+      '@babel/helper-define-polyfill-provider': 0.3.1_@[email protected]
+      core-js-compat: 3.20.3
    transitivePeerDependencies:
      - supports-color
    dev: true

-  /babel-plugin-polyfill-regenerator/0.3.0_@[email protected]:
-    resolution: {integrity: sha512-dhAPTDLGoMW5/84wkgwiLRwMnio2i1fUe53EuvtKMv0pn2p3S8OCoV1xAzfJPl0KOX7IB89s2ib85vbYiea3jg==}
+  /babel-plugin-polyfill-regenerator/0.3.1_@[email protected]:
+    resolution: {integrity: sha512-Y2B06tvgHYt1x0yz17jGkGeeMr5FeKUu+ASJ+N6nB5lQ8Dapfg42i0OVrf8PNGJ3zKL4A23snMi1IRwrqqND7A==}
    peerDependencies:
      '@babel/core': ^7.0.0-0
    dependencies:
      '@babel/core': 7.16.7
-      '@babel/helper-define-polyfill-provider': 0.3.0_@[email protected]
+      '@babel/helper-define-polyfill-provider': 0.3.1_@[email protected]
    transitivePeerDependencies:
      - supports-color
    dev: true
@ -2466,8 +2487,8 @@ packages:
      toggle-selection: 1.0.6
    dev: false

-  /core-js-compat/3.20.2:
-    resolution: {integrity: sha512-qZEzVQ+5Qh6cROaTPFLNS4lkvQ6mBzE3R6A6EEpssj7Zr2egMHgsy4XapdifqJDGC9CBiNv7s+ejI96rLNQFdg==}
+  /core-js-compat/3.20.3:
+    resolution: {integrity: sha512-c8M5h0IkNZ+I92QhIpuSijOxGAcj3lgpsWdkCqmUTZNwidujF4r3pi6x1DCN+Vcs5qTS2XWWMfWSuCqyupX8gw==}
    dependencies:
      browserslist: 4.19.1
      semver: 7.0.0
@ -2937,13 +2958,13 @@ packages:
      eslint: 7.32.0
    dev: true

-  /eslint-config-prettier/8.3.0_eslint@8.6.0:
+  /eslint-config-prettier/8.3.0_eslint@8.7.0:
    resolution: {integrity: sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==}
    hasBin: true
    peerDependencies:
      eslint: '>=7.0.0'
    dependencies:
-      eslint: 8.6.0
+      eslint: 8.7.0
    dev: true

  /eslint-import-resolver-alias/[email protected]:
@ -2952,7 +2973,7 @@ packages:
    peerDependencies:
      eslint-plugin-import: '>=1.4.0'
    dependencies:
-      eslint-plugin-import: 2.25.4_eslint@8.6.0
+      eslint-plugin-import: 2.25.4_eslint@8.7.0
    dev: true

  /eslint-import-resolver-babel-module/5.3.1_e51044130ac762fd207a8cd2109b5344:
@ -2992,7 +3013,7 @@ packages:
      - supports-color
    dev: true

-  /eslint-import-resolver-typescript/2.5.0_b5a36b8c1535387c8dd00eff7ec6b551:
+  /eslint-import-resolver-typescript/2.5.0_9ff7dbcc486b497d34e34a545c49272a:
    resolution: {integrity: sha512-qZ6e5CFr+I7K4VVhQu3M/9xGv9/YmwsEXrsm3nimw8vWaVHRDrQRp26BgCypTxBp3vUp4o5aVEJRiy0F2DFddQ==}
    engines: {node: '>=4'}
    peerDependencies:
@ -3000,8 +3021,8 @@ packages:
      eslint-plugin-import: '*'
    dependencies:
      debug: 4.3.3
-      eslint: 8.6.0
-      eslint-plugin-import: 2.25.4_eslint@8.6.0
+      eslint: 8.7.0
+      eslint-plugin-import: 2.25.4_eslint@8.7.0
      glob: 7.2.0
      is-glob: 4.0.3
      resolve: 1.21.0
@ -3040,7 +3061,7 @@ packages:
      tsconfig-paths: 3.12.0
    dev: true

-  /eslint-plugin-import/2.25.4_eslint@8.6.0:
+  /eslint-plugin-import/2.25.4_eslint@8.7.0:
    resolution: {integrity: sha512-/KJBASVFxpu0xg1kIBn9AUa8hQVnszpwgE7Ld0lKAlx7Ie87yzEzCgSkekt+le/YVhiaosO4Y14GDAOc41nfxA==}
    engines: {node: '>=4'}
    peerDependencies:
@ -3050,7 +3071,7 @@ packages:
      array.prototype.flat: 1.2.5
      debug: 2.6.9
      doctrine: 2.1.0
-      eslint: 8.6.0
+      eslint: 8.7.0
      eslint-import-resolver-node: 0.3.6
      eslint-module-utils: 2.7.2
      has: 1.0.3
@ -3071,13 +3092,13 @@ packages:
      eslint: 7.32.0
    dev: true

-  /eslint-plugin-react-hooks/4.3.0_eslint@8.6.0:
+  /eslint-plugin-react-hooks/4.3.0_eslint@8.7.0:
    resolution: {integrity: sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==}
    engines: {node: '>=10'}
    peerDependencies:
      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
    dependencies:
-      eslint: 8.6.0
+      eslint: 8.7.0
    dev: true

  /eslint-plugin-react/[email protected]:
@ -3103,7 +3124,7 @@ packages:
      string.prototype.matchall: 4.0.6
    dev: true

-  /eslint-plugin-react/7.28.0_eslint@8.6.0:
+  /eslint-plugin-react/7.28.0_eslint@8.7.0:
    resolution: {integrity: sha512-IOlFIRHzWfEQQKcAD4iyYDndHwTQiCMcJVJjxempf203jnNLUnW34AXLrV33+nEXoifJE2ZEGmcjKPL8957eSw==}
    engines: {node: '>=4'}
    peerDependencies:
@ -3112,7 +3133,7 @@ packages:
      array-includes: 3.1.4
      array.prototype.flatmap: 1.2.5
      doctrine: 2.1.0
-      eslint: 8.6.0
+      eslint: 8.7.0
      estraverse: 5.3.0
      jsx-ast-utils: 3.2.1
      minimatch: 3.0.4
@ -3159,13 +3180,13 @@ packages:
      eslint-visitor-keys: 2.1.0
    dev: true

-  /eslint-utils/3.0.0_eslint@8.6.0:
+  /eslint-utils/3.0.0_eslint@8.7.0:
    resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
    engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
    peerDependencies:
      eslint: '>=5'
    dependencies:
-      eslint: 8.6.0
+      eslint: 8.7.0
      eslint-visitor-keys: 2.1.0
    dev: true

@ -3179,8 +3200,8 @@ packages:
    engines: {node: '>=10'}
    dev: true

-  /eslint-visitor-keys/3.1.0:
-    resolution: {integrity: sha512-yWJFpu4DtjsWKkt5GeNBBuZMlNcYVs6vRCLoCVEJrTjaSB6LC98gFipNK/erM2Heg/E8mIK+hXG/pJMLK+eRZA==}
+  /eslint-visitor-keys/3.2.0:
+    resolution: {integrity: sha512-IOzT0X126zn7ALX0dwFiUQEdsfzrm4+ISsQS8nukaJXwEyYKRSnEIIDULYg1mCtGp7UUXgfGl7BIolXREQK+XQ==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dev: true

@ -3233,8 +3254,8 @@ packages:
      - supports-color
    dev: true

-  /eslint/8.6.0:
-    resolution: {integrity: sha512-UvxdOJ7mXFlw7iuHZA4jmzPaUqIw54mZrv+XPYKNbKdLR0et4rf60lIZUU9kiNtnzzMzGWxMV+tQ7uG7JG8DPw==}
+  /eslint/8.7.0:
+    resolution: {integrity: sha512-ifHYzkBGrzS2iDU7KjhCAVMGCvF6M3Xfs8X8b37cgrUlDt6bWRTpRh6T/gtSXv1HJ/BUGgmjvNvOEGu85Iif7w==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    hasBin: true
    dependencies:
@ -3245,11 +3266,10 @@ packages:
      cross-spawn: 7.0.3
      debug: 4.3.3
      doctrine: 3.0.0
-      enquirer: 2.3.6
      escape-string-regexp: 4.0.0
      eslint-scope: 7.1.0
-      eslint-utils: 3.0.0_eslint@8.6.0
-      eslint-visitor-keys: 3.1.0
+      eslint-utils: 3.0.0_eslint@8.7.0
+      eslint-visitor-keys: 3.2.0
      espree: 9.3.0
      esquery: 1.4.0
      esutils: 2.0.3
@ -3258,7 +3278,7 @@ packages:
      functional-red-black-tree: 1.0.1
      glob-parent: 6.0.2
      globals: 13.12.0
-      ignore: 4.0.6
+      ignore: 5.2.0
      import-fresh: 3.3.0
      imurmurhash: 0.1.4
      is-glob: 4.0.3
@ -3269,9 +3289,7 @@ packages:
      minimatch: 3.0.4
      natural-compare: 1.4.0
      optionator: 0.9.1
-      progress: 2.0.3
      regexpp: 3.2.0
-      semver: 7.3.5
      strip-ansi: 6.0.1
      strip-json-comments: 3.1.1
      text-table: 0.2.0
@ -3295,7 +3313,7 @@ packages:
    dependencies:
      acorn: 8.7.0
      acorn-jsx: 5.3[email protected]
-      eslint-visitor-keys: 3.1.0
+      eslint-visitor-keys: 3.2.0
    dev: true

  /esprima/4.0.1:
@ -5350,7 +5368,7 @@ packages:
    resolution: {integrity: sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA==}
    engines: {node: '>=10.0.0'}
    dependencies:
-      ajv: 8.8.2
+      ajv: 8.9.0
      lodash.truncate: 4.4.2
      slice-ansi: 4.0.0
      string-width: 4.2.3
@ -5499,6 +5517,12 @@ packages:
    resolution: {integrity: sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==}
    dev: false

+  /tippy.js/6.3.7:
+    resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==}
+    dependencies:
+      '@popperjs/core': 2.11.2
+    dev: false
+
  /to-fast-properties/2.0.0:
    resolution: {integrity: sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=}
    engines: {node: '>=4'}
@ -5684,6 +5708,14 @@ packages:
      - rollup
    dev: true

+  /vite-plugin-environment/[email protected]:
+    resolution: {integrity: sha512-ay0vYB8DEB7xB5sqVzOgLyTaGH5jbnvghzoDBmHvMx2Y2k1WUl0QQUuyu7oeiKnmIJDc8ciklhVcGc4lXMKyiA==}
+    peerDependencies:
+      vite: ^2.7
+    dependencies:
+      vite: 2.7.12
+    dev: false
+
  /vite-plugin-pwa/[email protected]:
    resolution: {integrity: sha512-Ssj14m3TRVLfkFEAWSMcFE2d1cSdEZyrVTzfY2lSL+umHYvcIFHVDAY143sygtBCb44OPczsAOmWwBTxwOvh7g==}
    peerDependencies:
@ -5822,7 +5854,7 @@ packages:
    resolution: {integrity: sha512-WMdYLhDIsuzViOTXDH+tJ1GijkFp5khSYolnxR/11zmfhNDtuo7jof72xPGFy+KRpsz6tug39RhivCj77qqO0w==}
    engines: {node: '>=10.0.0'}
    dependencies:
-      '@apideck/better-ajv-errors': 0.3.2_ajv@8.8.2
+      '@apideck/better-ajv-errors': 0.3.2_ajv@8.9.0
      '@babel/core': 7.16.7
      '@babel/preset-env': 7.16.8_@[email protected]
      '@babel/runtime': 7.16.7
@ -5830,7 +5862,7 @@ packages:
      '@rollup/plugin-node-resolve': 11.2[email protected]
      '@rollup/plugin-replace': 2.4[email protected]
      '@surma/rollup-plugin-off-main-thread': 2.2.3
-      ajv: 8.8.2
+      ajv: 8.9.0
      common-tags: 1.8.2
      fast-json-stable-stringify: 2.1.0
      fs-extra: 9.1.0
--- a/src/components/generic/Tooltip.tsx
+++ b/src/components/generic/Tooltip.tsx
@ -0,0 +1,14 @@
+import 'tippy.js/dist/tippy.css';
+
+import type React from 'react';
+
+import Tippy from '@tippyjs/react';
+
+export interface TooltipProps {
+  children: JSX.Element;
+  contents: string;
+}
+
+export const Tooltip = ({ children, contents }: TooltipProps): JSX.Element => {
+  return <Tippy content={contents}>{children}</Tippy>;
+};
--- a/src/components/menu/BottomNav.tsx
+++ b/src/components/menu/BottomNav.tsx
@ -8,7 +8,13 @@ import {
  FiMoon,
  FiSun,
  FiWifi,
+  FiX,
 } from 'react-icons/fi';
+import {
+  RiArrowDownLine,
+  RiArrowUpDownLine,
+  RiArrowUpLine,
+} from 'react-icons/ri';

 import {
  connType,
@ -17,7 +23,9 @@ import {
 } from '@app/core/slices/appSlice';
 import { useAppDispatch } from '@hooks/useAppDispatch';
 import { useAppSelector } from '@hooks/useAppSelector';
-import { Types } from '@meshtastic/meshtasticjs';
+import { Protobuf, Types } from '@meshtastic/meshtasticjs';
+
+import { Tooltip } from '../generic/Tooltip';

 // export interface BottomNavProps {

@ -27,70 +35,97 @@ export const BottomNav = (): JSX.Element => {
  const dispatch = useAppDispatch();
  const meshtasticState = useAppSelector((state) => state.meshtastic);
  const appState = useAppSelector((state) => state.app);
-  // @ts-ignore define version string global
-  const version = window.__COMMIT_HASH__ as string;
+  const primaryChannelSettings = useAppSelector(
+    (state) => state.meshtastic.radio.channels,
+  ).find((channel) => channel.channel.role === Protobuf.Channel_Role.PRIMARY)
+    ?.channel.settings;

  return (
    <div className="flex justify-between bg-white border-t border-gray-300 dark:bg-secondaryDark dark:border-gray-600">
-      <div
-        className={`flex p-1 cursor-pointer group w-min 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,
+      <div className="flex">
+        <Tooltip contents={`Connection Status`}>
+          <div
+            className={`flex p-1 cursor-pointer group w-min hover:bg-opacity-80 ${
+              [
+                Types.DeviceStatusEnum.DEVICE_CONNECTED,
+                Types.DeviceStatusEnum.DEVICE_CONFIGURED,
              ].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="text-xs font-medium truncate group-active:scale-90">
-          {meshtasticState.nodes.find(
-            (node) => node.number === meshtasticState.radio.hardware.myNodeNum,
-          )?.user?.longName ?? 'Disconnected'}
-        </div>
+                ? '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="text-xs font-medium truncate group-active:scale-90">
+              {meshtasticState.nodes.find(
+                (node) =>
+                  node.number === meshtasticState.radio.hardware.myNodeNum,
+              )?.user?.longName ?? 'Disconnected'}
+            </div>
+          </div>
+        </Tooltip>
+        <Tooltip contents={`MQTT Status`}>
+          <div className="flex p-1 border-r border-gray-300 cursor-pointer select-none group dark:border-gray-600 dark:text-white hover:bg-gray-200 dark:hover:bg-primaryDark">
+            {primaryChannelSettings?.uplinkEnabled &&
+            primaryChannelSettings?.downlinkEnabled ? (
+              <RiArrowUpDownLine className="p-0.5 group-active:scale-90" />
+            ) : primaryChannelSettings?.uplinkEnabled ? (
+              <RiArrowUpLine className="p-0.5 group-active:scale-90" />
+            ) : primaryChannelSettings?.downlinkEnabled ? (
+              <RiArrowDownLine className="p-0.5 group-active:scale-90" />
+            ) : (
+              <FiX className="p-0.5" />
+            )}
+          </div>
+        </Tooltip>
      </div>

      <div className="flex">
-        <a
-          href={`https://github.com/meshtastic/meshtastic-web/commit/${version}`}
-          target="_blank"
-          rel="noreferrer"
-          className="flex p-1 border-l border-gray-300 cursor-pointer select-none group dark:border-gray-600 dark:text-white hover:bg-gray-200 dark:hover:bg-primaryDark"
-        >
-          <FiGitBranch className="p-0.5 mr-1 group-active:scale-90" />
-          <p className="text-xs opacity-60">{version}</p>
-        </a>
-        <div className="flex p-1 border-l border-gray-300 cursor-pointer select-none group dark:border-gray-600 dark:text-white hover:bg-gray-200 dark:hover:bg-primaryDark">
-          <FiBell className="p-0.5 mr-1 group-active:scale-90" />
-          <p className="text-xs opacity-60">Example Notification</p>
-        </div>
-        <div
-          className="p-1 border-l border-gray-300 cursor-pointer group dark:border-gray-600 dark:text-white hover:bg-gray-200 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 contents={`Current Commit`}>
+          <a
+            href={`https://github.com/meshtastic/meshtastic-web/commit/${process.env.COMMIT_HASH}`}
+            target="_blank"
+            rel="noreferrer"
+            className="flex p-1 border-l border-gray-300 cursor-pointer select-none group dark:border-gray-600 dark:text-white hover:bg-gray-200 dark:hover:bg-primaryDark"
+          >
+            <FiGitBranch className="p-0.5 mr-1 group-active:scale-90" />
+            <p className="text-xs opacity-60">{process.env.COMMIT_HASH}</p>
+          </a>
+        </Tooltip>
+        <Tooltip contents={`Notifications`}>
+          <div className="flex p-1 border-l border-gray-300 cursor-pointer select-none group dark:border-gray-600 dark:text-white hover:bg-gray-200 dark:hover:bg-primaryDark">
+            <FiBell className="p-0.5 mr-1 group-active:scale-90" />
+            <p className="text-xs opacity-60">Example Notification</p>
+          </div>
+        </Tooltip>
+        <Tooltip contents={`Toggle Theme`}>
+          <div
+            className="p-1 border-l border-gray-300 cursor-pointer group dark:border-gray-600 dark:text-white hover:bg-gray-200 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>
      </div>
    </div>
  );
--- a/src/pages/Nodes/Sidebar.tsx
+++ b/src/pages/Nodes/Sidebar.tsx
@ -110,7 +110,10 @@ export const Sidebar = ({ node, closeSidebar }: SidebarProps): JSX.Element => {
                icon={isCopied ? <FiCheck /> : <FiClipboard />}
              />
            </div>
-            <JSONPretty className="max-w-sm overflow-auto" data={node} />
+            <JSONPretty
+              className="h-screen max-w-sm pb-40 overflow-y-auto"
+              data={node}
+            />
          </Tab.Panel>
        </Tab.Panels>
      </Tab.Group>
--- a/vite.config.ts
+++ b/vite.config.ts
@ -2,19 +2,17 @@ import { execSync } from 'child_process';
 import path from 'path';
 import { defineConfig } from 'vite';
 import importToCDN from 'vite-plugin-cdn-import';
+import EnvironmentPlugin from 'vite-plugin-environment';
 import { VitePWA } from 'vite-plugin-pwa';

 import react from '@vitejs/plugin-react';

-// https://vitejs.dev/config/
 export default defineConfig({
-  define: {
-    __COMMIT_HASH__: JSON.stringify(
-      execSync('git rev-parse --short HEAD').toString().trim(),
-    ),
-  },
  plugins: [
    react(),
+    EnvironmentPlugin({
+      COMMIT_HASH: execSync('git rev-parse --short HEAD').toString().trim(),
+    }),
    importToCDN({
      modules: [
        {