diff --git a/package.json b/package.json index 2d9ebe7c..3f28a885 100644 --- 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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 598ae237..742d17cc 100644 --- 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_@types+react@17.0.38 '@meshtastic/meshtasticjs': 0.6.38 '@reduxjs/toolkit': 1.7.1_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 boring-avatars: 1.6.1 i18next: 21.6.6 @@ -85,8 +89,10 @@ dependencies: rfc4648: 1.5.1 swr: 1.1.2_react@17.0.2 timeago-react: 3.0.4_react@17.0.2 + tippy.js: 6.3.7 type-route: 0.6.0 use-breakpoint: 3.0.1_react-dom@17.0.2+react@17.0.2 + vite-plugin-environment: 1.1.0_vite@2.7.12 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.0+typescript@4.5.4 + '@typescript-eslint/eslint-plugin': 5.9.1_bbe74534e31a8c21f1b3522447c55341 + '@typescript-eslint/parser': 5.9.1_eslint@8.7.0+typescript@4.5.4 '@verypossible/eslint-config': 1.6.1_typescript@4.5.4 '@vitejs/plugin-react': 1.1.4 autoprefixer: 10.4.2_postcss@8.4.5 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.2_eslint-plugin-import@2.25.4 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_@babel+core@7.16.7: - resolution: {integrity: sha512-7hfT8lUljl/tM3h+izTX/pO3W3frz2ok6Pk+gzys8iJqDfZrZy2pXjRTZAvG2YmfHun1X4q8/UZRLatMfqc5Tg==} + /@babel/helper-define-polyfill-provider/0.3.1_@babel+core@7.16.7: + 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_@babel+core@7.16.7 '@babel/preset-modules': 0.1.5_@babel+core@7.16.7 '@babel/types': 7.16.8 - babel-plugin-polyfill-corejs2: 0.3.0_@babel+core@7.16.7 - babel-plugin-polyfill-corejs3: 0.5.0_@babel+core@7.16.7 - babel-plugin-polyfill-regenerator: 0.3.0_@babel+core@7.16.7 - core-js-compat: 3.20.2 + babel-plugin-polyfill-corejs2: 0.3.1_@babel+core@7.16.7 + babel-plugin-polyfill-corejs3: 0.5.1_@babel+core@7.16.7 + babel-plugin-polyfill-regenerator: 0.3.1_@babel+core@7.16.7 + 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/4.2.6_react-dom@17.0.2+react@17.0.2: + resolution: {integrity: sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==} + peerDependencies: + react: '>=16.8' + react-dom: '>=16.8' + dependencies: + react: 17.0.2 + react-dom: 17.0.2_react@17.0.2 + 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.0+typescript@4.5.4 - '@typescript-eslint/parser': 5.9.1_eslint@8.6.0+typescript@4.5.4 + '@typescript-eslint/experimental-utils': 5.9.1_eslint@8.7.0+typescript@4.5.4 + '@typescript-eslint/parser': 5.9.1_eslint@8.7.0+typescript@4.5.4 '@typescript-eslint/scope-manager': 5.9.1 - '@typescript-eslint/type-utils': 5.9.1_eslint@8.6.0+typescript@4.5.4 + '@typescript-eslint/type-utils': 5.9.1_eslint@8.7.0+typescript@4.5.4 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.0+typescript@4.5.4: + /@typescript-eslint/experimental-utils/5.9.1_eslint@8.7.0+typescript@4.5.4: 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.1_typescript@4.5.4 - 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.0+typescript@4.5.4: + /@typescript-eslint/parser/5.9.1_eslint@8.7.0+typescript@4.5.4: 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.1_typescript@4.5.4 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.0+typescript@4.5.4: + /@typescript-eslint/type-utils/5.9.1_eslint@8.7.0+typescript@4.5.4: 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.0+typescript@4.5.4 + '@typescript-eslint/experimental-utils': 5.9.1_eslint@8.7.0+typescript@4.5.4 debug: 4.3.3 - eslint: 8.6.0 + eslint: 8.7.0 tsutils: 3.21.0_typescript@4.5.4 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/1.6.1_typescript@4.5.4: @@ -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_@babel+core@7.16.7: - resolution: {integrity: sha512-wMDoBJ6uG4u4PNFh72Ty6t3EgfA91puCuAwKIazbQlci+ENb/UU9A3xG5lutjUIiXCIn1CY5L15r9LimiJyrSA==} + /babel-plugin-polyfill-corejs2/0.3.1_@babel+core@7.16.7: + 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_@babel+core@7.16.7 + '@babel/helper-define-polyfill-provider': 0.3.1_@babel+core@7.16.7 semver: 6.3.0 transitivePeerDependencies: - supports-color dev: true - /babel-plugin-polyfill-corejs3/0.5.0_@babel+core@7.16.7: - resolution: {integrity: sha512-Hcrgnmkf+4JTj73GbK3bBhlVPiLL47owUAnoJIf69Hakl3q+KfodbDXiZWGMM7iqCZTxCG3Z2VRfPNYES4rXqQ==} + /babel-plugin-polyfill-corejs3/0.5.1_@babel+core@7.16.7: + 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_@babel+core@7.16.7 - core-js-compat: 3.20.2 + '@babel/helper-define-polyfill-provider': 0.3.1_@babel+core@7.16.7 + core-js-compat: 3.20.3 transitivePeerDependencies: - supports-color dev: true - /babel-plugin-polyfill-regenerator/0.3.0_@babel+core@7.16.7: - resolution: {integrity: sha512-dhAPTDLGoMW5/84wkgwiLRwMnio2i1fUe53EuvtKMv0pn2p3S8OCoV1xAzfJPl0KOX7IB89s2ib85vbYiea3jg==} + /babel-plugin-polyfill-regenerator/0.3.1_@babel+core@7.16.7: + 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_@babel+core@7.16.7 + '@babel/helper-define-polyfill-provider': 0.3.1_@babel+core@7.16.7 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/1.1.2_eslint-plugin-import@2.25.4: @@ -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/7.28.0_eslint@7.32.0: @@ -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.2_acorn@8.7.0 - 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/1.1.0_vite@2.7.12: + resolution: {integrity: sha512-ay0vYB8DEB7xB5sqVzOgLyTaGH5jbnvghzoDBmHvMx2Y2k1WUl0QQUuyu7oeiKnmIJDc8ciklhVcGc4lXMKyiA==} + peerDependencies: + vite: ^2.7 + dependencies: + vite: 2.7.12 + dev: false + /vite-plugin-pwa/0.11.13_vite@2.7.12: 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_@babel+core@7.16.7 '@babel/runtime': 7.16.7 @@ -5830,7 +5862,7 @@ packages: '@rollup/plugin-node-resolve': 11.2.1_rollup@2.64.0 '@rollup/plugin-replace': 2.4.2_rollup@2.64.0 '@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 diff --git a/src/components/generic/Tooltip.tsx b/src/components/generic/Tooltip.tsx new file mode 100644 index 00000000..6a2bd3ec --- /dev/null +++ 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 {children}; +}; diff --git a/src/components/menu/BottomNav.tsx b/src/components/menu/BottomNav.tsx index 17937631..28af7090 100644 --- 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 (
-
+ +
{ - dispatch(dispatch(openConnectionModal())); - }} - > - {appState.connType === connType.BLE ? ( - - ) : appState.connType === connType.SERIAL ? ( - - ) : ( - - )} -
- {meshtasticState.nodes.find( - (node) => node.number === meshtasticState.radio.hardware.myNodeNum, - )?.user?.longName ?? 'Disconnected'} -
+ ? '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 ? ( + + ) : primaryChannelSettings?.uplinkEnabled ? ( + + ) : primaryChannelSettings?.downlinkEnabled ? ( + + ) : ( + + )} +
+
- - -

{version}

- -
- -

Example Notification

-
-
{ - dispatch(setDarkModeEnabled(!appState.darkMode)); - }} - > - {appState.darkMode ? ( - - ) : ( - - )} -
+ + + +

{process.env.COMMIT_HASH}

+ + + +
+ +

Example Notification

+
+ + +
{ + dispatch(setDarkModeEnabled(!appState.darkMode)); + }} + > + {appState.darkMode ? ( + + ) : ( + + )} +
+
); diff --git a/src/pages/Nodes/Sidebar.tsx b/src/pages/Nodes/Sidebar.tsx index 34e57091..ee5b9f65 100644 --- 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 ? : } /> - + diff --git a/vite.config.ts b/vite.config.ts index afa2fc75..4fcd72a3 100644 --- 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: [ {