mirror
/
meshastic.web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Tooltips, mqtt status & commit hash

pull/21/head
Sacha Weatherstone 4 years ago
parent
5f2503976d
commit
070fbc664f
6 changed files with 225 additions and 140 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      package.json
  2. 178
      pnpm-lock.yaml
  3. 14
      src/components/generic/Tooltip.tsx
  4. 151
      src/components/menu/BottomNav.tsx
  5. 5
      src/pages/Nodes/Sidebar.tsx
  6. 10
      vite.config.ts

7
package.json
View File

@ -17,6 +17,7 @@
"@meshtastic/components": "^1.0.17", "@meshtastic/components": "^1.0.17",
"@meshtastic/meshtasticjs": "^0.6.38", "@meshtastic/meshtasticjs": "^0.6.38",
"@reduxjs/toolkit": "^1.7.1", "@reduxjs/toolkit": "^1.7.1",
"@tippyjs/react": "^4.2.6",
"base64-js": "^1.5.1", "base64-js": "^1.5.1",
"boring-avatars": "^1.6.1", "boring-avatars": "^1.6.1",
"i18next": "^21.6.6", "i18next": "^21.6.6",
@ -37,8 +38,10 @@
"rfc4648": "^1.5.1", "rfc4648": "^1.5.1",
"swr": "^1.1.2", "swr": "^1.1.2",
"timeago-react": "^3.0.4", "timeago-react": "^3.0.4",
"tippy.js": "^6.3.7",
"type-route": "^0.6.0", "type-route": "^0.6.0",
"use-breakpoint": "^3.0.1" "use-breakpoint": "^3.0.1",
"vite-plugin-environment": "^1.1.0"
}, },
"devDependencies": { "devDependencies": {
"@types/mapbox-gl": "^2.6.0", "@types/mapbox-gl": "^2.6.0",
@ -53,7 +56,7 @@
"@vitejs/plugin-react": "^1.1.4", "@vitejs/plugin-react": "^1.1.4",
"autoprefixer": "^10.4.2", "autoprefixer": "^10.4.2",
"babel-plugin-module-resolver": "^4.1.0", "babel-plugin-module-resolver": "^4.1.0",
"eslint": "8.6.0", "eslint": "8.7.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-import-resolver-alias": "^1.1.2", "eslint-import-resolver-alias": "^1.1.2",
"eslint-import-resolver-babel-module": "^5.3.1", "eslint-import-resolver-babel-module": "^5.3.1",

178
pnpm-lock.yaml
View File

@ -6,6 +6,7 @@ specifiers:
'@meshtastic/components': ^1.0.17 '@meshtastic/components': ^1.0.17
'@meshtastic/meshtasticjs': ^0.6.38 '@meshtastic/meshtasticjs': ^0.6.38
'@reduxjs/toolkit': ^1.7.1 '@reduxjs/toolkit': ^1.7.1
'@tippyjs/react': ^4.2.6
'@types/mapbox-gl': ^2.6.0 '@types/mapbox-gl': ^2.6.0
'@types/react': ^17.0.38 '@types/react': ^17.0.38
'@types/react-dom': ^17.0.11 '@types/react-dom': ^17.0.11
@ -20,7 +21,7 @@ specifiers:
babel-plugin-module-resolver: ^4.1.0 babel-plugin-module-resolver: ^4.1.0
base64-js: ^1.5.1 base64-js: ^1.5.1
boring-avatars: ^1.6.1 boring-avatars: ^1.6.1
eslint: 8.6.0 eslint: 8.7.0
eslint-config-prettier: ^8.3.0 eslint-config-prettier: ^8.3.0
eslint-import-resolver-alias: ^1.1.2 eslint-import-resolver-alias: ^1.1.2
eslint-import-resolver-babel-module: ^5.3.1 eslint-import-resolver-babel-module: ^5.3.1
@ -51,11 +52,13 @@ specifiers:
tailwindcss: ^3.0.15 tailwindcss: ^3.0.15
tar: ^6.1.11 tar: ^6.1.11
timeago-react: ^3.0.4 timeago-react: ^3.0.4
tippy.js: ^6.3.7
type-route: ^0.6.0 type-route: ^0.6.0
typescript: ^4.5.4 typescript: ^4.5.4
use-breakpoint: ^3.0.1 use-breakpoint: ^3.0.1
vite: ^2.7.12 vite: ^2.7.12
vite-plugin-cdn-import: ^0.3.5 vite-plugin-cdn-import: ^0.3.5
vite-plugin-environment: ^1.1.0
vite-plugin-pwa: ^0.11.13 vite-plugin-pwa: ^0.11.13
workbox-window: ^6.4.2 workbox-window: ^6.4.2
@ -65,6 +68,7 @@ dependencies:
'@meshtastic/components': 1.0.17_@[email protected] '@meshtastic/components': 1.0.17_@[email protected]
'@meshtastic/meshtasticjs': 0.6.38 '@meshtastic/meshtasticjs': 0.6.38
'@reduxjs/toolkit': 1.7[email protected][email protected] '@reduxjs/toolkit': 1.7[email protected][email protected]
'@tippyjs/react': 4.2[email protected][email protected]
base64-js: 1.5.1 base64-js: 1.5.1
boring-avatars: 1.6.1 boring-avatars: 1.6.1
i18next: 21.6.6 i18next: 21.6.6
@ -85,8 +89,10 @@ dependencies:
rfc4648: 1.5.1 rfc4648: 1.5.1
swr: 1.1[email protected] swr: 1.1[email protected]
timeago-react: 3.0[email protected] timeago-react: 3.0[email protected]
tippy.js: 6.3.7
type-route: 0.6.0 type-route: 0.6.0
use-breakpoint: 3.0[email protected][email protected] use-breakpoint: 3.0[email protected][email protected]
vite-plugin-environment: 1.1[email protected]
devDependencies: devDependencies:
'@types/mapbox-gl': 2.6.0 '@types/mapbox-gl': 2.6.0
@ -95,20 +101,20 @@ devDependencies:
'@types/react-file-icon': 1.0.1 '@types/react-file-icon': 1.0.1
'@types/w3c-web-serial': 1.0.2 '@types/w3c-web-serial': 1.0.2
'@types/web-bluetooth': 0.0.12 '@types/web-bluetooth': 0.0.12
'@typescript-eslint/eslint-plugin': 5.9.1_b7b2e42b32ee097737cd3e626b10847b '@typescript-eslint/eslint-plugin': 5.9.1_bbe74534e31a8c21f1b3522447c55341
'@typescript-eslint/parser': 5.9.1_eslint@8.6[email protected] '@typescript-eslint/parser': 5.9.1_eslint@8.7[email protected]
'@verypossible/eslint-config': 1.6[email protected] '@verypossible/eslint-config': 1.6[email protected]
'@vitejs/plugin-react': 1.1.4 '@vitejs/plugin-react': 1.1.4
autoprefixer: 10.4[email protected] autoprefixer: 10.4[email protected]
babel-plugin-module-resolver: 4.1.0 babel-plugin-module-resolver: 4.1.0
eslint: 8.6.0 eslint: 8.7.0
eslint-config-prettier: 8.3.0_eslint@8.6.0 eslint-config-prettier: 8.3.0_eslint@8.7.0
eslint-import-resolver-alias: 1.1[email protected] eslint-import-resolver-alias: 1.1[email protected]
eslint-import-resolver-babel-module: 5.3.1_e51044130ac762fd207a8cd2109b5344 eslint-import-resolver-babel-module: 5.3.1_e51044130ac762fd207a8cd2109b5344
eslint-import-resolver-typescript: 2.5.0_b5a36b8c1535387c8dd00eff7ec6b551 eslint-import-resolver-typescript: 2.5.0_9ff7dbcc486b497d34e34a545c49272a
eslint-plugin-import: 2.25.4_eslint@8.6.0 eslint-plugin-import: 2.25.4_eslint@8.7.0
eslint-plugin-react: 7.28.0_eslint@8.6.0 eslint-plugin-react: 7.28.0_eslint@8.7.0
eslint-plugin-react-hooks: 4.3.0_eslint@8.6.0 eslint-plugin-react-hooks: 4.3.0_eslint@8.7.0
gzipper: 6.2.1 gzipper: 6.2.1
postcss: 8.4.5 postcss: 8.4.5
prettier: 2.5.1 prettier: 2.5.1
@ -122,13 +128,13 @@ devDependencies:
packages: 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==} resolution: {integrity: sha512-JdEazx7qiVqTBzzBl5rolRwl5cmhihjfIcpqRzIZjtT6b18liVmDn/VlWpqW4C/qP2hrFFMLRV1wlex8ZVBPTg==}
engines: {node: '>=10'} engines: {node: '>=10'}
peerDependencies: peerDependencies:
ajv: '>=8' ajv: '>=8'
dependencies: dependencies:
ajv: 8.8.2 ajv: 8.9.0
json-schema: 0.4.0 json-schema: 0.4.0
jsonpointer: 5.0.0 jsonpointer: 5.0.0
leven: 3.1.0 leven: 3.1.0
@ -241,8 +247,8 @@ packages:
regexpu-core: 4.8.0 regexpu-core: 4.8.0
dev: true dev: true
/@babel/helper-define-polyfill-provider/0.3.0_@[email protected]: /@babel/helper-define-polyfill-provider/0.3.1_@[email protected]:
resolution: {integrity: sha512-7hfT8lUljl/tM3h+izTX/pO3W3frz2ok6Pk+gzys8iJqDfZrZy2pXjRTZAvG2YmfHun1X4q8/UZRLatMfqc5Tg==} resolution: {integrity: sha512-J9hGMpJQmtWmj46B3kBHmL38UhJGhYX7eqkcq+2gsstyYt341HmPeWspihX43yVRA0mS+8GGk2Gckc7bY/HCmA==}
peerDependencies: peerDependencies:
'@babel/core': ^7.4.0-0 '@babel/core': ^7.4.0-0
dependencies: dependencies:
@ -1255,10 +1261,10 @@ packages:
'@babel/plugin-transform-unicode-regex': 7.16.7_@[email protected] '@babel/plugin-transform-unicode-regex': 7.16.7_@[email protected]
'@babel/preset-modules': 0.1.5_@[email protected] '@babel/preset-modules': 0.1.5_@[email protected]
'@babel/types': 7.16.8 '@babel/types': 7.16.8
babel-plugin-polyfill-corejs2: 0.3.0_@[email protected] babel-plugin-polyfill-corejs2: 0.3.1_@[email protected]
babel-plugin-polyfill-corejs3: 0.5.0_@[email protected] babel-plugin-polyfill-corejs3: 0.5.1_@[email protected]
babel-plugin-polyfill-regenerator: 0.3.0_@[email protected] babel-plugin-polyfill-regenerator: 0.3.1_@[email protected]
core-js-compat: 3.20.2 core-js-compat: 3.20.3
semver: 6.3.0 semver: 6.3.0
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
@ -1565,6 +1571,10 @@ packages:
fastq: 1.13.0 fastq: 1.13.0
dev: true dev: true
/@popperjs/core/2.11.2:
resolution: {integrity: sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==}
dev: false
/@protobuf-ts/runtime/2.2.1: /@protobuf-ts/runtime/2.2.1:
resolution: {integrity: sha512-iF7VFFz61ep5w/+4Ub+2GaKPF1/s0YWLxjEia2+x2/xUpl4vkI0yWf2RRdh3GHl4f3j1he8M+WNRGh26F+Vupw==} resolution: {integrity: sha512-iF7VFFz61ep5w/+4Ub+2GaKPF1/s0YWLxjEia2+x2/xUpl4vkI0yWf2RRdh3GHl4f3j1he8M+WNRGh26F+Vupw==}
dev: false dev: false
@ -1659,6 +1669,17 @@ packages:
string.prototype.matchall: 4.0.6 string.prototype.matchall: 4.0.6
dev: true 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: /@types/estree/0.0.39:
resolution: {integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==} resolution: {integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==}
dev: true dev: true
@ -1784,7 +1805,7 @@ packages:
- supports-color - supports-color
dev: true dev: true
/@typescript-eslint/eslint-plugin/5.9.1_b7b2e42b32ee097737cd3e626b10847b: /@typescript-eslint/eslint-plugin/5.9.1_bbe74534e31a8c21f1b3522447c55341:
resolution: {integrity: sha512-Xv9tkFlyD4MQGpJgTo6wqDqGvHIRmRgah/2Sjz1PUnJTawjHWIwBivUE9x0QtU2WVii9baYgavo/bHjrZJkqTw==} resolution: {integrity: sha512-Xv9tkFlyD4MQGpJgTo6wqDqGvHIRmRgah/2Sjz1PUnJTawjHWIwBivUE9x0QtU2WVii9baYgavo/bHjrZJkqTw==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies: peerDependencies:
@ -1795,12 +1816,12 @@ packages:
typescript: typescript:
optional: true optional: true
dependencies: 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]
'@typescript-eslint/parser': 5.9.1_eslint@8.6[email protected] '@typescript-eslint/parser': 5.9.1_eslint@8.7[email protected]
'@typescript-eslint/scope-manager': 5.9.1 '@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 debug: 4.3.3
eslint: 8.6.0 eslint: 8.7.0
functional-red-black-tree: 1.0.1 functional-red-black-tree: 1.0.1
ignore: 5.2.0 ignore: 5.2.0
regexpp: 3.2.0 regexpp: 3.2.0
@ -1829,7 +1850,7 @@ packages:
- typescript - typescript
dev: true 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==} resolution: {integrity: sha512-cb1Njyss0mLL9kLXgS/eEY53SZQ9sT519wpX3i+U457l2UXRDuo87hgKfgRazmu9/tQb0x2sr3Y0yrU+Zz0y+w==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies: peerDependencies:
@ -1839,9 +1860,9 @@ packages:
'@typescript-eslint/scope-manager': 5.9.1 '@typescript-eslint/scope-manager': 5.9.1
'@typescript-eslint/types': 5.9.1 '@typescript-eslint/types': 5.9.1
'@typescript-eslint/typescript-estree': 5.9[email protected] '@typescript-eslint/typescript-estree': 5.9[email protected]
eslint: 8.6.0 eslint: 8.7.0
eslint-scope: 5.1.1 eslint-scope: 5.1.1
eslint-utils: 3.0.0_eslint@8.6.0 eslint-utils: 3.0.0_eslint@8.7.0
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
- typescript - typescript
@ -1867,7 +1888,7 @@ packages:
- supports-color - supports-color
dev: true 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==} resolution: {integrity: sha512-PLYO0AmwD6s6n0ZQB5kqPgfvh73p0+VqopQQLuNfi7Lm0EpfKyDalchpVwkE+81k5HeiRrTV/9w1aNHzjD7C4g==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies: peerDependencies:
@ -1881,7 +1902,7 @@ packages:
'@typescript-eslint/types': 5.9.1 '@typescript-eslint/types': 5.9.1
'@typescript-eslint/typescript-estree': 5.9[email protected] '@typescript-eslint/typescript-estree': 5.9[email protected]
debug: 4.3.3 debug: 4.3.3
eslint: 8.6.0 eslint: 8.7.0
typescript: 4.5.4 typescript: 4.5.4
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
@ -1903,7 +1924,7 @@ packages:
'@typescript-eslint/visitor-keys': 5.9.1 '@typescript-eslint/visitor-keys': 5.9.1
dev: true 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==} resolution: {integrity: sha512-tRSpdBnPRssjlUh35rE9ug5HrUvaB9ntREy7gPXXKwmIx61TNN7+l5YKgi1hMKxo5NvqZCfYhA5FvyuJG6X6vg==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies: peerDependencies:
@ -1913,9 +1934,9 @@ packages:
typescript: typescript:
optional: true optional: true
dependencies: 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 debug: 4.3.3
eslint: 8.6.0 eslint: 8.7.0
tsutils: 3.21[email protected] tsutils: 3.21[email protected]
typescript: 4.5.4 typescript: 4.5.4
transitivePeerDependencies: transitivePeerDependencies:
@ -1987,7 +2008,7 @@ packages:
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dependencies: dependencies:
'@typescript-eslint/types': 5.9.1 '@typescript-eslint/types': 5.9.1
eslint-visitor-keys: 3.1.0 eslint-visitor-keys: 3.2.0
dev: true dev: true
/@verypossible/eslint-config/[email protected]: /@verypossible/eslint-config/[email protected]:
@ -2076,8 +2097,8 @@ packages:
uri-js: 4.4.1 uri-js: 4.4.1
dev: true dev: true
/ajv/8.8.2: /ajv/8.9.0:
resolution: {integrity: sha512-x9VuX+R/jcFj1DHo/fCp99esgGDWiHENrKxaCENuCxpoMCmAt/COCGVDwA7kleEpEzJjDnvh3yGoOuLu0Dtllw==} resolution: {integrity: sha512-qOKJyNj/h+OWx7s5DePL6Zu1KeM9jPZhwBqs+7DzP6bGOvqzVCSf0xueYmVuaC/oQ/VtS2zLMLHdQFbkka+XDQ==}
dependencies: dependencies:
fast-deep-equal: 3.1.3 fast-deep-equal: 3.1.3
json-schema-traverse: 1.0.0 json-schema-traverse: 1.0.0
@ -2233,38 +2254,38 @@ packages:
resolve: 1.21.0 resolve: 1.21.0
dev: true dev: true
/babel-plugin-polyfill-corejs2/0.3.0_@[email protected]: /babel-plugin-polyfill-corejs2/0.3.1_@[email protected]:
resolution: {integrity: sha512-wMDoBJ6uG4u4PNFh72Ty6t3EgfA91puCuAwKIazbQlci+ENb/UU9A3xG5lutjUIiXCIn1CY5L15r9LimiJyrSA==} resolution: {integrity: sha512-v7/T6EQcNfVLfcN2X8Lulb7DjprieyLWJK/zOWH5DUYcAgex9sP3h25Q+DLsX9TloXe3y1O8l2q2Jv9q8UVB9w==}
peerDependencies: peerDependencies:
'@babel/core': ^7.0.0-0 '@babel/core': ^7.0.0-0
dependencies: dependencies:
'@babel/compat-data': 7.16.8 '@babel/compat-data': 7.16.8
'@babel/core': 7.16.7 '@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 semver: 6.3.0
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
dev: true dev: true
/babel-plugin-polyfill-corejs3/0.5.0_@[email protected]: /babel-plugin-polyfill-corejs3/0.5.1_@[email protected]:
resolution: {integrity: sha512-Hcrgnmkf+4JTj73GbK3bBhlVPiLL47owUAnoJIf69Hakl3q+KfodbDXiZWGMM7iqCZTxCG3Z2VRfPNYES4rXqQ==} resolution: {integrity: sha512-TihqEe4sQcb/QcPJvxe94/9RZuLQuF1+To4WqQcRvc+3J3gLCPIPgDKzGLG6zmQLfH3nn25heRuDNkS2KR4I8A==}
peerDependencies: peerDependencies:
'@babel/core': ^7.0.0-0 '@babel/core': ^7.0.0-0
dependencies: dependencies:
'@babel/core': 7.16.7 '@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]
core-js-compat: 3.20.2 core-js-compat: 3.20.3
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
dev: true dev: true
/babel-plugin-polyfill-regenerator/0.3.0_@[email protected]: /babel-plugin-polyfill-regenerator/0.3.1_@[email protected]:
resolution: {integrity: sha512-dhAPTDLGoMW5/84wkgwiLRwMnio2i1fUe53EuvtKMv0pn2p3S8OCoV1xAzfJPl0KOX7IB89s2ib85vbYiea3jg==} resolution: {integrity: sha512-Y2B06tvgHYt1x0yz17jGkGeeMr5FeKUu+ASJ+N6nB5lQ8Dapfg42i0OVrf8PNGJ3zKL4A23snMi1IRwrqqND7A==}
peerDependencies: peerDependencies:
'@babel/core': ^7.0.0-0 '@babel/core': ^7.0.0-0
dependencies: dependencies:
'@babel/core': 7.16.7 '@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: transitivePeerDependencies:
- supports-color - supports-color
dev: true dev: true
@ -2466,8 +2487,8 @@ packages:
toggle-selection: 1.0.6 toggle-selection: 1.0.6
dev: false dev: false
/core-js-compat/3.20.2: /core-js-compat/3.20.3:
resolution: {integrity: sha512-qZEzVQ+5Qh6cROaTPFLNS4lkvQ6mBzE3R6A6EEpssj7Zr2egMHgsy4XapdifqJDGC9CBiNv7s+ejI96rLNQFdg==} resolution: {integrity: sha512-c8M5h0IkNZ+I92QhIpuSijOxGAcj3lgpsWdkCqmUTZNwidujF4r3pi6x1DCN+Vcs5qTS2XWWMfWSuCqyupX8gw==}
dependencies: dependencies:
browserslist: 4.19.1 browserslist: 4.19.1
semver: 7.0.0 semver: 7.0.0
@ -2937,13 +2958,13 @@ packages:
eslint: 7.32.0 eslint: 7.32.0
dev: true 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==} resolution: {integrity: sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==}
hasBin: true hasBin: true
peerDependencies: peerDependencies:
eslint: '>=7.0.0' eslint: '>=7.0.0'
dependencies: dependencies:
eslint: 8.6.0 eslint: 8.7.0
dev: true dev: true
/eslint-import-resolver-alias/[email protected]: /eslint-import-resolver-alias/[email protected]:
@ -2952,7 +2973,7 @@ packages:
peerDependencies: peerDependencies:
eslint-plugin-import: '>=1.4.0' eslint-plugin-import: '>=1.4.0'
dependencies: dependencies:
eslint-plugin-import: 2.25.4_eslint@8.6.0 eslint-plugin-import: 2.25.4_eslint@8.7.0
dev: true dev: true
/eslint-import-resolver-babel-module/5.3.1_e51044130ac762fd207a8cd2109b5344: /eslint-import-resolver-babel-module/5.3.1_e51044130ac762fd207a8cd2109b5344:
@ -2992,7 +3013,7 @@ packages:
- supports-color - supports-color
dev: true 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==} resolution: {integrity: sha512-qZ6e5CFr+I7K4VVhQu3M/9xGv9/YmwsEXrsm3nimw8vWaVHRDrQRp26BgCypTxBp3vUp4o5aVEJRiy0F2DFddQ==}
engines: {node: '>=4'} engines: {node: '>=4'}
peerDependencies: peerDependencies:
@ -3000,8 +3021,8 @@ packages:
eslint-plugin-import: '*' eslint-plugin-import: '*'
dependencies: dependencies:
debug: 4.3.3 debug: 4.3.3
eslint: 8.6.0 eslint: 8.7.0
eslint-plugin-import: 2.25.4_eslint@8.6.0 eslint-plugin-import: 2.25.4_eslint@8.7.0
glob: 7.2.0 glob: 7.2.0
is-glob: 4.0.3 is-glob: 4.0.3
resolve: 1.21.0 resolve: 1.21.0
@ -3040,7 +3061,7 @@ packages:
tsconfig-paths: 3.12.0 tsconfig-paths: 3.12.0
dev: true 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==} resolution: {integrity: sha512-/KJBASVFxpu0xg1kIBn9AUa8hQVnszpwgE7Ld0lKAlx7Ie87yzEzCgSkekt+le/YVhiaosO4Y14GDAOc41nfxA==}
engines: {node: '>=4'} engines: {node: '>=4'}
peerDependencies: peerDependencies:
@ -3050,7 +3071,7 @@ packages:
array.prototype.flat: 1.2.5 array.prototype.flat: 1.2.5
debug: 2.6.9 debug: 2.6.9
doctrine: 2.1.0 doctrine: 2.1.0
eslint: 8.6.0 eslint: 8.7.0
eslint-import-resolver-node: 0.3.6 eslint-import-resolver-node: 0.3.6
eslint-module-utils: 2.7.2 eslint-module-utils: 2.7.2
has: 1.0.3 has: 1.0.3
@ -3071,13 +3092,13 @@ packages:
eslint: 7.32.0 eslint: 7.32.0
dev: true 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==} resolution: {integrity: sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==}
engines: {node: '>=10'} engines: {node: '>=10'}
peerDependencies: peerDependencies:
eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
dependencies: dependencies:
eslint: 8.6.0 eslint: 8.7.0
dev: true dev: true
/eslint-plugin-react/[email protected]: /eslint-plugin-react/[email protected]:
@ -3103,7 +3124,7 @@ packages:
string.prototype.matchall: 4.0.6 string.prototype.matchall: 4.0.6
dev: true 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==} resolution: {integrity: sha512-IOlFIRHzWfEQQKcAD4iyYDndHwTQiCMcJVJjxempf203jnNLUnW34AXLrV33+nEXoifJE2ZEGmcjKPL8957eSw==}
engines: {node: '>=4'} engines: {node: '>=4'}
peerDependencies: peerDependencies:
@ -3112,7 +3133,7 @@ packages:
array-includes: 3.1.4 array-includes: 3.1.4
array.prototype.flatmap: 1.2.5 array.prototype.flatmap: 1.2.5
doctrine: 2.1.0 doctrine: 2.1.0
eslint: 8.6.0 eslint: 8.7.0
estraverse: 5.3.0 estraverse: 5.3.0
jsx-ast-utils: 3.2.1 jsx-ast-utils: 3.2.1
minimatch: 3.0.4 minimatch: 3.0.4
@ -3159,13 +3180,13 @@ packages:
eslint-visitor-keys: 2.1.0 eslint-visitor-keys: 2.1.0
dev: true 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==} resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0} engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
peerDependencies: peerDependencies:
eslint: '>=5' eslint: '>=5'
dependencies: dependencies:
eslint: 8.6.0 eslint: 8.7.0
eslint-visitor-keys: 2.1.0 eslint-visitor-keys: 2.1.0
dev: true dev: true
@ -3179,8 +3200,8 @@ packages:
engines: {node: '>=10'} engines: {node: '>=10'}
dev: true dev: true
/eslint-visitor-keys/3.1.0: /eslint-visitor-keys/3.2.0:
resolution: {integrity: sha512-yWJFpu4DtjsWKkt5GeNBBuZMlNcYVs6vRCLoCVEJrTjaSB6LC98gFipNK/erM2Heg/E8mIK+hXG/pJMLK+eRZA==} resolution: {integrity: sha512-IOzT0X126zn7ALX0dwFiUQEdsfzrm4+ISsQS8nukaJXwEyYKRSnEIIDULYg1mCtGp7UUXgfGl7BIolXREQK+XQ==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dev: true dev: true
@ -3233,8 +3254,8 @@ packages:
- supports-color - supports-color
dev: true dev: true
/eslint/8.6.0: /eslint/8.7.0:
resolution: {integrity: sha512-UvxdOJ7mXFlw7iuHZA4jmzPaUqIw54mZrv+XPYKNbKdLR0et4rf60lIZUU9kiNtnzzMzGWxMV+tQ7uG7JG8DPw==} resolution: {integrity: sha512-ifHYzkBGrzS2iDU7KjhCAVMGCvF6M3Xfs8X8b37cgrUlDt6bWRTpRh6T/gtSXv1HJ/BUGgmjvNvOEGu85Iif7w==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
hasBin: true hasBin: true
dependencies: dependencies:
@ -3245,11 +3266,10 @@ packages:
cross-spawn: 7.0.3 cross-spawn: 7.0.3
debug: 4.3.3 debug: 4.3.3
doctrine: 3.0.0 doctrine: 3.0.0
enquirer: 2.3.6
escape-string-regexp: 4.0.0 escape-string-regexp: 4.0.0
eslint-scope: 7.1.0 eslint-scope: 7.1.0
eslint-utils: 3.0.0_eslint@8.6.0 eslint-utils: 3.0.0_eslint@8.7.0
eslint-visitor-keys: 3.1.0 eslint-visitor-keys: 3.2.0
espree: 9.3.0 espree: 9.3.0
esquery: 1.4.0 esquery: 1.4.0
esutils: 2.0.3 esutils: 2.0.3
@ -3258,7 +3278,7 @@ packages:
functional-red-black-tree: 1.0.1 functional-red-black-tree: 1.0.1
glob-parent: 6.0.2 glob-parent: 6.0.2
globals: 13.12.0 globals: 13.12.0
ignore: 4.0.6 ignore: 5.2.0
import-fresh: 3.3.0 import-fresh: 3.3.0
imurmurhash: 0.1.4 imurmurhash: 0.1.4
is-glob: 4.0.3 is-glob: 4.0.3
@ -3269,9 +3289,7 @@ packages:
minimatch: 3.0.4 minimatch: 3.0.4
natural-compare: 1.4.0 natural-compare: 1.4.0
optionator: 0.9.1 optionator: 0.9.1
progress: 2.0.3
regexpp: 3.2.0 regexpp: 3.2.0
semver: 7.3.5
strip-ansi: 6.0.1 strip-ansi: 6.0.1
strip-json-comments: 3.1.1 strip-json-comments: 3.1.1
text-table: 0.2.0 text-table: 0.2.0
@ -3295,7 +3313,7 @@ packages:
dependencies: dependencies:
acorn: 8.7.0 acorn: 8.7.0
acorn-jsx: 5.3[email protected] acorn-jsx: 5.3[email protected]
eslint-visitor-keys: 3.1.0 eslint-visitor-keys: 3.2.0
dev: true dev: true
/esprima/4.0.1: /esprima/4.0.1:
@ -5350,7 +5368,7 @@ packages:
resolution: {integrity: sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA==} resolution: {integrity: sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA==}
engines: {node: '>=10.0.0'} engines: {node: '>=10.0.0'}
dependencies: dependencies:
ajv: 8.8.2 ajv: 8.9.0
lodash.truncate: 4.4.2 lodash.truncate: 4.4.2
slice-ansi: 4.0.0 slice-ansi: 4.0.0
string-width: 4.2.3 string-width: 4.2.3
@ -5499,6 +5517,12 @@ packages:
resolution: {integrity: sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==} resolution: {integrity: sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==}
dev: false 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: /to-fast-properties/2.0.0:
resolution: {integrity: sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=} resolution: {integrity: sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=}
engines: {node: '>=4'} engines: {node: '>=4'}
@ -5684,6 +5708,14 @@ packages:
- rollup - rollup
dev: true 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]: /vite-plugin-pwa/[email protected]:
resolution: {integrity: sha512-Ssj14m3TRVLfkFEAWSMcFE2d1cSdEZyrVTzfY2lSL+umHYvcIFHVDAY143sygtBCb44OPczsAOmWwBTxwOvh7g==} resolution: {integrity: sha512-Ssj14m3TRVLfkFEAWSMcFE2d1cSdEZyrVTzfY2lSL+umHYvcIFHVDAY143sygtBCb44OPczsAOmWwBTxwOvh7g==}
peerDependencies: peerDependencies:
@ -5822,7 +5854,7 @@ packages:
resolution: {integrity: sha512-WMdYLhDIsuzViOTXDH+tJ1GijkFp5khSYolnxR/11zmfhNDtuo7jof72xPGFy+KRpsz6tug39RhivCj77qqO0w==} resolution: {integrity: sha512-WMdYLhDIsuzViOTXDH+tJ1GijkFp5khSYolnxR/11zmfhNDtuo7jof72xPGFy+KRpsz6tug39RhivCj77qqO0w==}
engines: {node: '>=10.0.0'} engines: {node: '>=10.0.0'}
dependencies: 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/core': 7.16.7
'@babel/preset-env': 7.16.8_@[email protected] '@babel/preset-env': 7.16.8_@[email protected]
'@babel/runtime': 7.16.7 '@babel/runtime': 7.16.7
@ -5830,7 +5862,7 @@ packages:
'@rollup/plugin-node-resolve': 11.2[email protected] '@rollup/plugin-node-resolve': 11.2[email protected]
'@rollup/plugin-replace': 2.4[email protected] '@rollup/plugin-replace': 2.4[email protected]
'@surma/rollup-plugin-off-main-thread': 2.2.3 '@surma/rollup-plugin-off-main-thread': 2.2.3
ajv: 8.8.2 ajv: 8.9.0
common-tags: 1.8.2 common-tags: 1.8.2
fast-json-stable-stringify: 2.1.0 fast-json-stable-stringify: 2.1.0
fs-extra: 9.1.0 fs-extra: 9.1.0

14
src/components/generic/Tooltip.tsx
View File

@ -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>;
};

151
src/components/menu/BottomNav.tsx
View File

@ -8,7 +8,13 @@ import {
FiMoon, FiMoon,
FiSun, FiSun,
FiWifi, FiWifi,
FiX,
} from 'react-icons/fi'; } from 'react-icons/fi';
import {
RiArrowDownLine,
RiArrowUpDownLine,
RiArrowUpLine,
} from 'react-icons/ri';
import { import {
connType, connType,
@ -17,7 +23,9 @@ import {
} from '@app/core/slices/appSlice'; } from '@app/core/slices/appSlice';
import { useAppDispatch } from '@hooks/useAppDispatch'; import { useAppDispatch } from '@hooks/useAppDispatch';
import { useAppSelector } from '@hooks/useAppSelector'; import { useAppSelector } from '@hooks/useAppSelector';
import { Types } from '@meshtastic/meshtasticjs'; import { Protobuf, Types } from '@meshtastic/meshtasticjs';
import { Tooltip } from '../generic/Tooltip';
// export interface BottomNavProps { // export interface BottomNavProps {
@ -27,70 +35,97 @@ export const BottomNav = (): JSX.Element => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const meshtasticState = useAppSelector((state) => state.meshtastic); const meshtasticState = useAppSelector((state) => state.meshtastic);
const appState = useAppSelector((state) => state.app); const appState = useAppSelector((state) => state.app);
// @ts-ignore define version string global const primaryChannelSettings = useAppSelector(
const version = window.__COMMIT_HASH__ as string; (state) => state.meshtastic.radio.channels,
).find((channel) => channel.channel.role === Protobuf.Channel_Role.PRIMARY)
?.channel.settings;
return ( return (
<div className="flex justify-between bg-white border-t border-gray-300 dark:bg-secondaryDark dark:border-gray-600"> <div className="flex justify-between bg-white border-t border-gray-300 dark:bg-secondaryDark dark:border-gray-600">
<div <div className="flex">
className={`flex p-1 cursor-pointer group w-min hover:bg-opacity-80 ${ <Tooltip contents={`Connection Status`}>
[ <div
Types.DeviceStatusEnum.DEVICE_CONNECTED, className={`flex p-1 cursor-pointer group w-min hover:bg-opacity-80 ${
Types.DeviceStatusEnum.DEVICE_CONFIGURED, [
].includes(meshtasticState.deviceStatus) Types.DeviceStatusEnum.DEVICE_CONNECTED,
? 'bg-primary' Types.DeviceStatusEnum.DEVICE_CONFIGURED,
: [
Types.DeviceStatusEnum.DEVICE_CONNECTING,
Types.DeviceStatusEnum.DEVICE_RECONNECTING,
Types.DeviceStatusEnum.DEVICE_CONFIGURING,
].includes(meshtasticState.deviceStatus) ].includes(meshtasticState.deviceStatus)
? 'bg-yellow-400' ? 'bg-primary'
: 'bg-gray-400' : [
}`} Types.DeviceStatusEnum.DEVICE_CONNECTING,
onClick={(): void => { Types.DeviceStatusEnum.DEVICE_RECONNECTING,
dispatch(dispatch(openConnectionModal())); Types.DeviceStatusEnum.DEVICE_CONFIGURING,
}} ].includes(meshtasticState.deviceStatus)
> ? 'bg-yellow-400'
{appState.connType === connType.BLE ? ( : 'bg-gray-400'
<FiBluetooth className="mr-1 p-0.5 group-active:scale-90" /> }`}
) : appState.connType === connType.SERIAL ? ( onClick={(): void => {
<FiCpu className="mr-1 p-0.5 group-active:scale-90" /> dispatch(dispatch(openConnectionModal()));
) : ( }}
<FiWifi className="mr-1 p-0.5 group-active:scale-90" /> >
)} {appState.connType === connType.BLE ? (
<div className="text-xs font-medium truncate group-active:scale-90"> <FiBluetooth className="mr-1 p-0.5 group-active:scale-90" />
{meshtasticState.nodes.find( ) : appState.connType === connType.SERIAL ? (
(node) => node.number === meshtasticState.radio.hardware.myNodeNum, <FiCpu className="mr-1 p-0.5 group-active:scale-90" />
)?.user?.longName ?? 'Disconnected'} ) : (
</div> <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>
<div className="flex"> <div className="flex">
<a <Tooltip contents={`Current Commit`}>
href={`https://github.com/meshtastic/meshtastic-web/commit/${version}`} <a
target="_blank" href={`https://github.com/meshtastic/meshtastic-web/commit/${process.env.COMMIT_HASH}`}
rel="noreferrer" target="_blank"
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" 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> <FiGitBranch className="p-0.5 mr-1 group-active:scale-90" />
</a> <p className="text-xs opacity-60">{process.env.COMMIT_HASH}</p>
<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"> </a>
<FiBell className="p-0.5 mr-1 group-active:scale-90" /> </Tooltip>
<p className="text-xs opacity-60">Example Notification</p> <Tooltip contents={`Notifications`}>
</div> <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">
<div <FiBell className="p-0.5 mr-1 group-active:scale-90" />
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" <p className="text-xs opacity-60">Example Notification</p>
onClick={(): void => { </div>
dispatch(setDarkModeEnabled(!appState.darkMode)); </Tooltip>
}} <Tooltip contents={`Toggle Theme`}>
> <div
{appState.darkMode ? ( 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"
<FiSun className="p-0.5 group-active:scale-90" /> onClick={(): void => {
) : ( dispatch(setDarkModeEnabled(!appState.darkMode));
<FiMoon className="p-0.5 group-active:scale-90" /> }}
)} >
</div> {appState.darkMode ? (
<FiSun className="p-0.5 group-active:scale-90" />
) : (
<FiMoon className="p-0.5 group-active:scale-90" />
)}
</div>
</Tooltip>
</div> </div>
</div> </div>
); );

5
src/pages/Nodes/Sidebar.tsx
View File

@ -110,7 +110,10 @@ export const Sidebar = ({ node, closeSidebar }: SidebarProps): JSX.Element => {
icon={isCopied ? <FiCheck /> : <FiClipboard />} icon={isCopied ? <FiCheck /> : <FiClipboard />}
/> />
</div> </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.Panel>
</Tab.Panels> </Tab.Panels>
</Tab.Group> </Tab.Group>

10
vite.config.ts
View File

@ -2,19 +2,17 @@ import { execSync } from 'child_process';
import path from 'path'; import path from 'path';
import { defineConfig } from 'vite'; import { defineConfig } from 'vite';
import importToCDN from 'vite-plugin-cdn-import'; import importToCDN from 'vite-plugin-cdn-import';
import EnvironmentPlugin from 'vite-plugin-environment';
import { VitePWA } from 'vite-plugin-pwa'; import { VitePWA } from 'vite-plugin-pwa';
import react from '@vitejs/plugin-react'; import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
define: {
__COMMIT_HASH__: JSON.stringify(
execSync('git rev-parse --short HEAD').toString().trim(),
),
},
plugins: [ plugins: [
react(), react(),
EnvironmentPlugin({
COMMIT_HASH: execSync('git rev-parse --short HEAD').toString().trim(),
}),
importToCDN({ importToCDN({
modules: [ modules: [
{ {

Write Preview
Loading…
Cancel
Save