Cleanup page template

package.json

@@ -11,12 +11,12 @@
     "lint": "eslint 'src/**/*.{ts,tsx}'"
   },
   "dependencies": {
-    "@headlessui/react": "^1.4.1",
-    "@meshtastic/meshtasticjs": "^0.6.22",
+    "@headlessui/react": "^1.4.2",
+    "@meshtastic/meshtasticjs": "^0.6.24",
     "@reduxjs/toolkit": "^1.6.2",
     "apexcharts": "^3.29.0",
     "boring-avatars": "^1.5.8",
-    "i18next": "^21.3.3",
+    "i18next": "^21.4.1",
     "i18next-browser-languagedetector": "^6.1.2",
     "moment": "^2.29.1",
     "react": "^17.0.2",
@@ -24,7 +24,7 @@
     "react-dom": "^17.0.2",
     "react-file-icon": "^1.1.0",
     "react-flags-select": "^2.1.2",
-    "react-hook-form": "^7.18.0",
+    "react-hook-form": "^7.19.1",
     "react-i18next": "^11.13.0",
     "react-icons": "^4.3.1",
     "react-redux": "^7.2.6",
@@ -37,30 +37,30 @@
     "@snowpack/plugin-postcss": "^1.4.3",
     "@snowpack/plugin-react-refresh": "^2.5.0",
     "@snowpack/plugin-typescript": "^1.2.1",
-    "@types/react": "^17.0.33",
-    "@types/react-dom": "^17.0.10",
+    "@types/react": "^17.0.34",
+    "@types/react-dom": "^17.0.11",
     "@types/react-file-icon": "^1.0.1",
     "@types/react-redux": "^7.1.20",
     "@types/snowpack-env": "^2.3.4",
     "@types/w3c-web-serial": "^1.0.2",
     "@types/web-bluetooth": "^0.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
-    "@typescript-eslint/parser": "^5.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.1",
+    "@typescript-eslint/parser": "^5.3.1",
     "@verypossible/eslint-config": "^1.6.1",
     "autoprefixer": "^10.4.0",
     "babel-plugin-module-resolver": "^4.1.0",
-    "eslint": "8.1.0",
+    "eslint": "8.2.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-babel-module": "^5.3.1",
     "eslint-import-resolver-typescript": "^2.5.0",
     "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-react-hooks": "^4.2.1-alpha-9c8161ba8-20211028",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "gzipper": "^6.0.0",
     "postcss": "^8.3.11",
     "prettier": "^2.4.1",
     "snowpack": "^3.8.8",
-    "tailwindcss": "^3.0.0-alpha.1",
+    "tailwindcss": "^3.0.0-alpha.2",
     "tar": "^6.1.11",
     "typescript": "^4.4.4"
   }

pnpm-lock.yaml

@@ -1,36 +1,36 @@
 lockfileVersion: 5.3
 
 specifiers:
-  '@headlessui/react': ^1.4.1
-  '@meshtastic/meshtasticjs': ^0.6.22
+  '@headlessui/react': ^1.4.2
+  '@meshtastic/meshtasticjs': ^0.6.24
   '@reduxjs/toolkit': ^1.6.2
   '@snowpack/plugin-dotenv': ^2.2.0
   '@snowpack/plugin-postcss': ^1.4.3
   '@snowpack/plugin-react-refresh': ^2.5.0
   '@snowpack/plugin-typescript': ^1.2.1
-  '@types/react': ^17.0.33
-  '@types/react-dom': ^17.0.10
+  '@types/react': ^17.0.34
+  '@types/react-dom': ^17.0.11
   '@types/react-file-icon': ^1.0.1
   '@types/react-redux': ^7.1.20
   '@types/snowpack-env': ^2.3.4
   '@types/w3c-web-serial': ^1.0.2
   '@types/web-bluetooth': ^0.0.11
-  '@typescript-eslint/eslint-plugin': ^5.2.0
-  '@typescript-eslint/parser': ^5.2.0
+  '@typescript-eslint/eslint-plugin': ^5.3.1
+  '@typescript-eslint/parser': ^5.3.1
   '@verypossible/eslint-config': ^1.6.1
   apexcharts: ^3.29.0
   autoprefixer: ^10.4.0
   babel-plugin-module-resolver: ^4.1.0
   boring-avatars: ^1.5.8
-  eslint: 8.1.0
+  eslint: 8.2.0
   eslint-config-prettier: ^8.3.0
   eslint-import-resolver-babel-module: ^5.3.1
   eslint-import-resolver-typescript: ^2.5.0
   eslint-plugin-import: ^2.25.2
   eslint-plugin-react: ^7.26.1
-  eslint-plugin-react-hooks: ^4.2.1-alpha-9c8161ba8-20211028
+  eslint-plugin-react-hooks: ^4.2.0
   gzipper: ^6.0.0
-  i18next: ^21.3.3
+  i18next: ^21.4.1
   i18next-browser-languagedetector: ^6.1.2
   moment: ^2.29.1
   postcss: ^8.3.11
@@ -40,25 +40,25 @@ specifiers:
   react-dom: ^17.0.2
   react-file-icon: ^1.1.0
   react-flags-select: ^2.1.2
-  react-hook-form: ^7.18.0
+  react-hook-form: ^7.19.1
   react-i18next: ^11.13.0
   react-icons: ^4.3.1
   react-redux: ^7.2.6
   snowpack: ^3.8.8
   swr: ^1.0.1
-  tailwindcss: ^3.0.0-alpha.1
+  tailwindcss: ^3.0.0-alpha.2
   tar: ^6.1.11
   type-route: ^0.6.0
   typescript: ^4.4.4
   use-breakpoint: ^2.0.2
 
 dependencies:
-  '@headlessui/react': 1.4.1[email protected][email protected]
-  '@meshtastic/meshtasticjs': 0.6.22
+  '@headlessui/react': 1.4.2[email protected][email protected]
+  '@meshtastic/meshtasticjs': 0.6.24
   '@reduxjs/toolkit': 1.6[email protected][email protected]
   apexcharts: 3.29.0
   boring-avatars: 1.5.8
-  i18next: 21.3.3
+  i18next: 21.4.1
   i18next-browser-languagedetector: 6.1.2
   moment: 2.29.1
   react: 17.0.2
@@ -66,8 +66,8 @@ dependencies:
   react-dom: 17.0[email protected]
   react-file-icon: 1.1[email protected][email protected]
   react-flags-select: 2.1[email protected][email protected]
-  react-hook-form: 7.18.0[email protected]
-  react-i18next: 11.13.0_i18next@21.3.3[email protected]
+  react-hook-form: 7.19.1[email protected]
+  react-i18next: 11.13.0_i18next@21.4.1[email protected]
   react-icons: 4.3[email protected]
   react-redux: 7.2[email protected][email protected]
   swr: 1.0[email protected]
@@ -79,30 +79,30 @@ devDependencies:
   '@snowpack/plugin-postcss': 1.4[email protected]
   '@snowpack/plugin-react-refresh': 2.5[email protected][email protected]
   '@snowpack/plugin-typescript': 1.2[email protected]
-  '@types/react': 17.0.33
-  '@types/react-dom': 17.0.10
+  '@types/react': 17.0.34
+  '@types/react-dom': 17.0.11
   '@types/react-file-icon': 1.0.1
   '@types/react-redux': 7.1.20
   '@types/snowpack-env': 2.3.4
   '@types/w3c-web-serial': 1.0.2
   '@types/web-bluetooth': 0.0.11
-  '@typescript-eslint/eslint-plugin': 5.2.0_9a56ca1c5fc1d82b3da3317a5c6f9ab1
-  '@typescript-eslint/parser': 5.2[email protected][email protected]
+  '@typescript-eslint/eslint-plugin': 5.3.1_4653b7803b7453f5f37717b7e1448517
+  '@typescript-eslint/parser': 5.3[email protected][email protected]
   '@verypossible/eslint-config': 1.6[email protected]
   autoprefixer: 10.4[email protected]
   babel-plugin-module-resolver: 4.1.0
-  eslint: 8.1.0
-  eslint-config-prettier: 8.3.0_eslint@8.1.0
+  eslint: 8.2.0
+  eslint-config-prettier: 8.3.0_eslint@8.2.0
   eslint-import-resolver-babel-module: 5.3.1_e51044130ac762fd207a8cd2109b5344
-  eslint-import-resolver-typescript: 2.5.0_f3fc3a8f1727ab01eb417b5ed5016c22
-  eslint-plugin-import: 2.25.2_eslint@8.1.0
-  eslint-plugin-react: 7.26.1_eslint@8.1.0
-  eslint-plugin-react-hooks: 4.2.1-[email protected].0
+  eslint-import-resolver-typescript: 2.5.0_3f013334cb52440e201498cdb6b29798
+  eslint-plugin-import: 2.25.2_eslint@8.2.0
+  eslint-plugin-react: 7.26.1_eslint@8.2.0
+  eslint-plugin-react-hooks: 4.2[email protected].0
   gzipper: 6.0.0
   postcss: 8.3.11
   prettier: 2.4.1
   snowpack: 3.8.8
-  tailwindcss: 3.0.0-alpha.1_0c54bdadaf9d9c9c6c134cb2c6c061a3
+  tailwindcss: 3.0.0-alpha.2_0c54bdadaf9d9c9c6c134cb2c6c061a3
   tar: 6.1.11
   typescript: 4.4.4
 
@@ -135,7 +135,7 @@ packages:
       '@babel/helper-compilation-targets': 7.16.0_@[email protected]
       '@babel/helper-module-transforms': 7.16.0
       '@babel/helpers': 7.16.0
-      '@babel/parser': 7.16.0
+      '@babel/parser': 7.16.2
       '@babel/template': 7.16.0
       '@babel/traverse': 7.16.0
       '@babel/types': 7.16.0
@@ -167,7 +167,7 @@ packages:
       '@babel/compat-data': 7.16.0
       '@babel/core': 7.16.0
       '@babel/helper-validator-option': 7.14.5
-      browserslist: 4.17.5
+      browserslist: 4.17.6
       semver: 6.3.0
     dev: true
 
@@ -292,8 +292,8 @@ packages:
       js-tokens: 4.0.0
     dev: true
 
-  /@babel/parser/7.16.0:
-    resolution: {integrity: sha512-TEHWXf0xxpi9wKVyBCmRcSSDjbJ/cl6LUdlbYUHEaNQUJGhreJbZrXT6sR4+fZLxVUJqNRB4KyOvjuy/D9009A==}
+  /@babel/parser/7.16.2:
+    resolution: {integrity: sha512-RUVpT0G2h6rOZwqLDTrKk7ksNv7YpAilTnYe1/Q+eDjxEceRMKVWbCsX7t8h6C1qCFi/1Y8WZjcEPBAFG27GPw==}
     engines: {node: '>=6.0.0'}
     hasBin: true
     dev: true
@@ -318,7 +318,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.16.0
-      '@babel/parser': 7.16.0
+      '@babel/parser': 7.16.2
       '@babel/types': 7.16.0
     dev: true
 
@@ -331,7 +331,7 @@ packages:
       '@babel/helper-function-name': 7.16.0
       '@babel/helper-hoist-variables': 7.16.0
       '@babel/helper-split-export-declaration': 7.16.0
-      '@babel/parser': 7.16.0
+      '@babel/parser': 7.16.2
       '@babel/types': 7.16.0
       debug: 4.3.2
       globals: 11.12.0
@@ -364,8 +364,8 @@ packages:
       - supports-color
     dev: true
 
-  /@eslint/eslintrc/1.0.3:
-    resolution: {integrity: sha512-DHI1wDPoKCBPoLZA3qDR91+3te/wDSc1YhKg3jR8NxKKRJq2hwHwcWv31cSwSYvIBrmbENoYMWcenW8uproQqg==}
+  /@eslint/eslintrc/1.0.4:
+    resolution: {integrity: sha512-h8Vx6MdxwWI2WM8/zREHMoqdgLNXEL4QX3MWSVMdyNJGvXVOs+6lp+m2hc3FnuMHDc4poxFNI20vCk0OmI4G0Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
       ajv: 6.12.6
@@ -374,7 +374,7 @@ packages:
       globals: 13.12.0
       ignore: 4.0.6
       import-fresh: 3.3.0
-      js-yaml: 3.14.1
+      js-yaml: 4.1.0
       minimatch: 3.0.4
       strip-json-comments: 3.1.1
     transitivePeerDependencies:
@@ -385,8 +385,8 @@ packages:
     resolution: {integrity: sha512-82cpyJyKRoQoRi+14ibCeGPu0CwypgtBAdBhq1WfvagpCZNKqwXbKwXllYSMG91DhmG4jt9gN8eP6lGOtozuaw==}
     dev: true
 
-  /@headlessui/react/1.4.1[email protected][email protected]:
-    resolution: {integrity: sha512-gL6Ns5xQM57cZBzX6IVv6L7nsam8rDEpRhs5fg28SN64ikfmuuMgunc+Rw5C1cMScnvFM+cz32ueVrlSFEVlSg==}
+  /@headlessui/react/1.4.2[email protected][email protected]:
+    resolution: {integrity: sha512-N8tv7kLhg9qGKBkVdtg572BvKvWhmiudmeEpOCyNwzOsZHCXBtl8AazGikIfUS+vBoub20Fse3BjawXDVPPdug==}
     engines: {node: '>=10'}
     peerDependencies:
       react: ^16 || ^17 || ^18
@@ -400,7 +400,7 @@ packages:
     resolution: {integrity: sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==}
     engines: {node: '>=10.10.0'}
     dependencies:
-      '@humanwhocodes/object-schema': 1.2.0
+      '@humanwhocodes/object-schema': 1.2.1
       debug: 4.3.2
       minimatch: 3.0.4
     transitivePeerDependencies:
@@ -411,26 +411,26 @@ packages:
     resolution: {integrity: sha512-JQlEKbcgEUjBFhLIF4iqM7u/9lwgHRBcpHrmUNCALK0Q3amXN6lxdoXLnF0sm11E9VqTmBALR87IlUg1bZ8A9A==}
     engines: {node: '>=10.10.0'}
     dependencies:
-      '@humanwhocodes/object-schema': 1.2.0
+      '@humanwhocodes/object-schema': 1.2.1
       debug: 4.3.2
       minimatch: 3.0.4
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@humanwhocodes/object-schema/1.2.0:
-    resolution: {integrity: sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==}
+  /@humanwhocodes/object-schema/1.2.1:
+    resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
   /@isaacs/string-locale-compare/1.1.0:
     resolution: {integrity: sha512-SQ7Kzhh9+D+ZW9MA0zkYv3VXhIDNx+LzM6EJ+/65I3QY+enU6Itte7E5XX7EWrqLW2FN4n06GWzBnPoC3th2aQ==}
     dev: true
 
-  /@meshtastic/meshtasticjs/0.6.22:
-    resolution: {integrity: sha512-3G1dwVmwwtrR/TVbCGKcqXDgLDCkUPERiw8P8ZXdYLxYrmlAy2WAZEclzWdQtEmhvBKpXm1+pEBlycN4DXBDXw==}
+  /@meshtastic/meshtasticjs/0.6.24:
+    resolution: {integrity: sha512-zdIxyIL6a+UUgZdZvxeRhK/xVhLYB0ZeB5OuA9peRFVE/ICHmAhkmNb58G1hDr0Lq3mPtmlsnh0DiPkI5O4TnQ==}
     dependencies:
       '@protobuf-ts/runtime': 2.0.7
-      node-fetch: 3.0.0
+      node-fetch: 3.1.0
       sub-events: 1.8.9
     dev: false
 
@@ -602,7 +602,7 @@ packages:
       react-redux: 7.2[email protected][email protected]
       redux: 4.1.2
       redux-thunk: 2.4[email protected]
-      reselect: 4.1.1
+      reselect: 4.1.2
     dev: false
 
   /@rollup/plugin-commonjs/[email protected]:
@@ -746,7 +746,7 @@ packages:
     dependencies:
       '@types/http-cache-semantics': 4.0.1
       '@types/keyv': 3.1.3
-      '@types/node': 16.11.6
+      '@types/node': 16.11.7
       '@types/responselike': 1.0.0
     dev: true
 
@@ -761,7 +761,7 @@ packages:
   /@types/hoist-non-react-statics/3.3.1:
     resolution: {integrity: sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==}
     dependencies:
-      '@types/react': 17.0.33
+      '@types/react': 17.0.34
       hoist-non-react-statics: 3.3.2
 
   /@types/http-cache-semantics/4.0.1:
@@ -779,11 +779,11 @@ packages:
   /@types/keyv/3.1.3:
     resolution: {integrity: sha512-FXCJgyyN3ivVgRoml4h94G/p3kY+u/B86La+QptcqJaWtBWtmc6TtkNfS40n9bIvyLteHh7zXOtgbobORKPbDg==}
     dependencies:
-      '@types/node': 16.11.6
+      '@types/node': 16.11.7
     dev: true
 
-  /@types/node/16.11.6:
-    resolution: {integrity: sha512-ua7PgUoeQFjmWPcoo9khiPum3Pd60k4/2ZGXt18sm2Slk0W0xZTqt5Y0Ny1NyBiN1EVQ/+FaF9NcY4Qe6rwk5w==}
+  /@types/node/16.11.7:
+    resolution: {integrity: sha512-QB5D2sqfSjCmTuWcBWyJ+/44bcjO7VbjSbOE0ucoVbAsSNQc4Lt6QkgkVXkTDwkL4z/beecZNDvVX15D4P8Jbw==}
     dev: true
 
   /@types/parse-json/4.0.0:
@@ -793,28 +793,28 @@ packages:
   /@types/prop-types/15.7.4:
     resolution: {integrity: sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==}
 
-  /@types/react-dom/17.0.10:
-    resolution: {integrity: sha512-8oz3NAUId2z/zQdFI09IMhQPNgIbiP8Lslhv39DIDamr846/0spjZK0vnrMak0iB8EKb9QFTTIdg2Wj2zH5a3g==}
+  /@types/react-dom/17.0.11:
+    resolution: {integrity: sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==}
     dependencies:
-      '@types/react': 17.0.33
+      '@types/react': 17.0.34
     dev: true
 
   /@types/react-file-icon/1.0.1:
     resolution: {integrity: sha512-QTdYCkYXzh/PfKEIwcPxRdaPQkii5R4Ke7fcO+KB++IDPbYAG1jj+ulEcTA7pRf0gZ5jAvjWcTXBJJRtfYHjlw==}
     dependencies:
-      '@types/react': 17.0.33
+      '@types/react': 17.0.34
     dev: true
 
   /@types/react-redux/7.1.20:
     resolution: {integrity: sha512-q42es4c8iIeTgcnB+yJgRTTzftv3eYYvCZOh1Ckn2eX/3o5TdsQYKUWpLoLuGlcY/p+VAhV9IOEZJcWk/vfkXw==}
     dependencies:
       '@types/hoist-non-react-statics': 3.3.1
-      '@types/react': 17.0.33
+      '@types/react': 17.0.34
       hoist-non-react-statics: 3.3.2
       redux: 4.1.2
 
-  /@types/react/17.0.33:
-    resolution: {integrity: sha512-pLWntxXpDPaU+RTAuSGWGSEL2FRTNyRQOjSWDke/rxRg14ncsZvx8AKWMWZqvc1UOaJIAoObdZhAWvRaHFi5rw==}
+  /@types/react/17.0.34:
+    resolution: {integrity: sha512-46FEGrMjc2+8XhHXILr+3+/sTe3OfzSPU9YGKILLrUYbQ1CLQC9Daqo1KzENGXAWwrFwiY0l4ZbF20gRvgpWTg==}
     dependencies:
       '@types/prop-types': 15.7.4
       '@types/scheduler': 0.16.2
@@ -823,13 +823,13 @@ packages:
   /@types/resolve/1.17.1:
     resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
     dependencies:
-      '@types/node': 16.11.6
+      '@types/node': 16.11.7
     dev: true
 
   /@types/responselike/1.0.0:
     resolution: {integrity: sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==}
     dependencies:
-      '@types/node': 16.11.6
+      '@types/node': 16.11.7
     dev: true
 
   /@types/scheduler/0.16.2:
@@ -864,7 +864,7 @@ packages:
       debug: 4.3.2
       eslint: 7.32.0
       functional-red-black-tree: 1.0.1
-      ignore: 5.1.8
+      ignore: 5.1.9
       regexpp: 3.2.0
       semver: 7.3.5
       tsutils: 3.21[email protected]
@@ -873,8 +873,8 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/eslint-plugin/5.2.0_9a56ca1c5fc1d82b3da3317a5c6f9ab1:
-    resolution: {integrity: sha512-qQwg7sqYkBF4CIQSyRQyqsYvP+g/J0To9ZPVNJpfxfekl5RmdvQnFFTVVwpRtaUDFNvjfe/34TgY/dpc3MgNTw==}
+  /@typescript-eslint/eslint-plugin/5.3.1_4653b7803b7453f5f37717b7e1448517:
+    resolution: {integrity: sha512-cFImaoIr5Ojj358xI/SDhjog57OK2NqlpxwdcgyxDA3bJlZcJq5CPzUXtpD7CxI2Hm6ATU7w5fQnnkVnmwpHqw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       '@typescript-eslint/parser': ^5.0.0
@@ -884,13 +884,13 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/experimental-utils': 5.2[email protected][email protected]
-      '@typescript-eslint/parser': 5.2[email protected][email protected]
-      '@typescript-eslint/scope-manager': 5.2.0
+      '@typescript-eslint/experimental-utils': 5.3[email protected][email protected]
+      '@typescript-eslint/parser': 5.3[email protected][email protected]
+      '@typescript-eslint/scope-manager': 5.3.1
       debug: 4.3.2
-      eslint: 8.1.0
+      eslint: 8.2.0
       functional-red-black-tree: 1.0.1
-      ignore: 5.1.8
+      ignore: 5.1.9
       regexpp: 3.2.0
       semver: 7.3.5
       tsutils: 3.21[email protected]
@@ -917,19 +917,19 @@ packages:
       - typescript
     dev: true
 
-  /@typescript-eslint/experimental-utils/5.[email protected][email protected]:
-    resolution: {integrity: sha512-fWyT3Agf7n7HuZZRpvUYdFYbPk3iDCq6fgu3ulia4c7yxmPnwVBovdSOX7RL+k8u6hLbrXcdAehlWUVpGh6IEw==}
+  /@typescript-eslint/experimental-utils/5.[email protected][email protected]:
+    resolution: {integrity: sha512-RgFn5asjZ5daUhbK5Sp0peq0SSMytqcrkNfU4pnDma2D8P3ElZ6JbYjY8IMSFfZAJ0f3x3tnO3vXHweYg0g59w==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '*'
     dependencies:
       '@types/json-schema': 7.0.9
-      '@typescript-eslint/scope-manager': 5.2.0
-      '@typescript-eslint/types': 5.2.0
-      '@typescript-eslint/typescript-estree': 5.2.0[email protected]
-      eslint: 8.1.0
+      '@typescript-eslint/scope-manager': 5.3.1
+      '@typescript-eslint/types': 5.3.1
+      '@typescript-eslint/typescript-estree': 5.3.1[email protected]
+      eslint: 8.2.0
       eslint-scope: 5.1.1
-      eslint-utils: 3.0.0_eslint@8.1.0
+      eslint-utils: 3.0.0_eslint@8.2.0
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -955,8 +955,8 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser/5.[email protected][email protected]:
-    resolution: {integrity: sha512-Uyy4TjJBlh3NuA8/4yIQptyJb95Qz5PX//6p8n7zG0QnN4o3NF9Je3JHbVU7fxf5ncSXTmnvMtd/LDQWDk0YqA==}
+  /@typescript-eslint/parser/5.[email protected][email protected]:
+    resolution: {integrity: sha512-TD+ONlx5c+Qhk21x9gsJAMRohWAUMavSOmJgv3JGy9dgPhuBd5Wok0lmMClZDyJNLLZK1JRKiATzCKZNUmoyfw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -965,11 +965,11 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/scope-manager': 5.2.0
-      '@typescript-eslint/types': 5.2.0
-      '@typescript-eslint/typescript-estree': 5.2.0[email protected]
+      '@typescript-eslint/scope-manager': 5.3.1
+      '@typescript-eslint/types': 5.3.1
+      '@typescript-eslint/typescript-estree': 5.3.1[email protected]
       debug: 4.3.2
-      eslint: 8.1.0
+      eslint: 8.2.0
       typescript: 4.4.4
     transitivePeerDependencies:
       - supports-color
@@ -983,12 +983,12 @@ packages:
       '@typescript-eslint/visitor-keys': 4.33.0
     dev: true
 
-  /@typescript-eslint/scope-manager/5.2.0:
-    resolution: {integrity: sha512-RW+wowZqPzQw8MUFltfKYZfKXqA2qgyi6oi/31J1zfXJRpOn6tCaZtd9b5u9ubnDG2n/EMvQLeZrsLNPpaUiFQ==}
+  /@typescript-eslint/scope-manager/5.3.1:
+    resolution: {integrity: sha512-XksFVBgAq0Y9H40BDbuPOTUIp7dn4u8oOuhcgGq7EoDP50eqcafkMVGrypyVGvDYHzjhdUCUwuwVUK4JhkMAMg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': 5.2.0
-      '@typescript-eslint/visitor-keys': 5.2.0
+      '@typescript-eslint/types': 5.3.1
+      '@typescript-eslint/visitor-keys': 5.3.1
     dev: true
 
   /@typescript-eslint/types/4.33.0:
@@ -996,8 +996,8 @@ packages:
     engines: {node: ^8.10.0 || ^10.13.0 || >=11.10.1}
     dev: true
 
-  /@typescript-eslint/types/5.2.0:
-    resolution: {integrity: sha512-cTk6x08qqosps6sPyP2j7NxyFPlCNsJwSDasqPNjEQ8JMD5xxj2NHxcLin5AJQ8pAVwpQ8BMI3bTxR0zxmK9qQ==}
+  /@typescript-eslint/types/5.3.1:
+    resolution: {integrity: sha512-bG7HeBLolxKHtdHG54Uac750eXuQQPpdJfCYuw4ZI3bZ7+GgKClMWM8jExBtp7NSP4m8PmLRM8+lhzkYnSmSxQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
@@ -1022,8 +1022,8 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/typescript-estree/5.2.0[email protected]:
-    resolution: {integrity: sha512-RsdXq2XmVgKbm9nLsE3mjNUM7BTr/K4DYR9WfFVMUuozHWtH5gMpiNZmtrMG8GR385EOSQ3kC9HiEMJWimxd/g==}
+  /@typescript-eslint/typescript-estree/5.3.1[email protected]:
+    resolution: {integrity: sha512-PwFbh/PKDVo/Wct6N3w+E4rLZxUDgsoII/GrWM2A62ETOzJd4M6s0Mu7w4CWsZraTbaC5UQI+dLeyOIFF1PquQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       typescript: '*'
@@ -1031,8 +1031,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': 5.2.0
-      '@typescript-eslint/visitor-keys': 5.2.0
+      '@typescript-eslint/types': 5.3.1
+      '@typescript-eslint/visitor-keys': 5.3.1
       debug: 4.3.2
       globby: 11.0.4
       is-glob: 4.0.3
@@ -1051,12 +1051,12 @@ packages:
       eslint-visitor-keys: 2.1.0
     dev: true
 
-  /@typescript-eslint/visitor-keys/5.2.0:
-    resolution: {integrity: sha512-Nk7HizaXWWCUBfLA/rPNKMzXzWS8Wg9qHMuGtT+v2/YpPij4nVXrVJc24N/r5WrrmqK31jCrZxeHqIgqRzs0Xg==}
+  /@typescript-eslint/visitor-keys/5.3.1:
+    resolution: {integrity: sha512-3cHUzUuVTuNHx0Gjjt5pEHa87+lzyqOiHXy/Gz+SJOCW1mpw9xQHIIEwnKn+Thph1mgWyZ90nboOcSuZr/jTTQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': 5.2.0
-      eslint-visitor-keys: 3.0.0
+      '@typescript-eslint/types': 5.3.1
+      eslint-visitor-keys: 3.1.0
     dev: true
 
   /@verypossible/eslint-config/[email protected]:
@@ -1166,8 +1166,8 @@ packages:
       uri-js: 4.4.1
     dev: true
 
-  /ajv/8.6.3:
-    resolution: {integrity: sha512-SMJOdDP6LqTkD0Uq8qLi+gMwSt0imXLSV080qFVwJCpH9U6Mb+SUGHAXM0KNbcBPguytWyvFxcHgMLe2D2XSpw==}
+  /ajv/8.7.1:
+    resolution: {integrity: sha512-gPpOObTO1QjbnN1sVMjJcp1TF9nggMfO4MBR5uQl6ZVTOaEPq5i4oq/6R9q2alMMPB3eg53wFv1RuJBLuxf3Hw==}
     dependencies:
       fast-deep-equal: 3.1.3
       json-schema-traverse: 1.0.0
@@ -1286,8 +1286,8 @@ packages:
     resolution: {integrity: sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=}
     dev: true
 
-  /asn1/0.2.4:
-    resolution: {integrity: sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==}
+  /asn1/0.2.6:
+    resolution: {integrity: sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==}
     dependencies:
       safer-buffer: 2.1.2
     dev: true
@@ -1320,8 +1320,8 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      browserslist: 4.17.5
-      caniuse-lite: 1.0.30001272
+      browserslist: 4.17.6
+      caniuse-lite: 1.0.30001278
       fraction.js: 4.1.1
       normalize-range: 0.1.2
       picocolors: 1.0.0
@@ -1349,7 +1349,7 @@ packages:
       find-babel-config: 1.2.0
       glob: 7.2.0
       pkg-up: 3.1.0
-      reselect: 4.1.1
+      reselect: 4.1.2
       resolve: 1.20.0
     dev: true
 
@@ -1417,13 +1417,13 @@ packages:
       fill-range: 7.0.1
     dev: true
 
-  /browserslist/4.17.5:
-    resolution: {integrity: sha512-I3ekeB92mmpctWBoLXe0d5wPS2cBuRvvW0JyyJHMrk9/HmP2ZjrTboNAZ8iuGqaEIlKguljbQY32OkOJIRrgoA==}
+  /browserslist/4.17.6:
+    resolution: {integrity: sha512-uPgz3vyRTlEiCv4ee9KlsKgo2V6qPk7Jsn0KAn2OBqbqKo3iNcPEC1Ti6J4dwnz+aIRfEEEuOzC9IBk8tXUomw==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001272
-      electron-to-chromium: 1.3.885
+      caniuse-lite: 1.0.30001278
+      electron-to-chromium: 1.3.891
       escalade: 3.1.1
       node-releases: 2.0.1
       picocolors: 1.0.0
@@ -1482,7 +1482,7 @@ packages:
       clone-response: 1.0.2
       get-stream: 5.2.0
       http-cache-semantics: 4.1.0
-      keyv: 4.0.3
+      keyv: 4.0.4
       lowercase-keys: 2.0.0
       normalize-url: 6.1.0
       responselike: 2.0.0
@@ -1510,8 +1510,8 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
-  /caniuse-lite/1.0.30001272:
-    resolution: {integrity: sha512-DV1j9Oot5dydyH1v28g25KoVm7l8MTxazwuiH3utWiAS6iL/9Nh//TGwqFEeqqN8nnWYQ8HHhUq+o4QPt9kvYw==}
+  /caniuse-lite/1.0.30001278:
+    resolution: {integrity: sha512-mpF9KeH8u5cMoEmIic/cr7PNS+F5LWBk0t2ekGT60lFf0Wq+n9LspAj0g3P+o7DQhD3sUdlMln4YFAWhFYn9jg==}
     dev: true
 
   /caseless/0.12.0:
@@ -1735,9 +1735,9 @@ packages:
       assert-plus: 1.0.0
     dev: true
 
-  /data-uri-to-buffer/3.0.1:
-    resolution: {integrity: sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og==}
-    engines: {node: '>= 6'}
+  /data-uri-to-buffer/4.0.0:
+    resolution: {integrity: sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==}
+    engines: {node: '>= 12'}
     dev: false
 
   /debug/2.6.9:
@@ -1951,8 +1951,8 @@ packages:
       safer-buffer: 2.1.2
     dev: true
 
-  /electron-to-chromium/1.3.885:
-    resolution: {integrity: sha512-JXKFJcVWrdHa09n4CNZYfYaK6EW5aAew7/wr3L1OnsD1L+JHL+RCtd7QgIsxUbFPeTwPlvnpqNNTOLkoefmtXg==}
+  /electron-to-chromium/1.3.891:
+    resolution: {integrity: sha512-3cpwR82QkIS01CN/dup/4Yr3BiOiRLlZlcAFn/5FbNCunMO9ojqDgEP9JEo1QNLflu3pEnPWve50gHOEKc7r6w==}
     dev: true
 
   /emoji-regex/8.0.0:
@@ -2114,13 +2114,13 @@ packages:
       eslint: 7.32.0
     dev: true
 
-  /eslint-config-prettier/8.3.0_eslint@8.1.0:
+  /eslint-config-prettier/8.3.0_eslint@8.2.0:
     resolution: {integrity: sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==}
     hasBin: true
     peerDependencies:
       eslint: '>=7.0.0'
     dependencies:
-      eslint: 8.1.0
+      eslint: 8.2.0
     dev: true
 
   /eslint-import-resolver-babel-module/5.3.1_e51044130ac762fd207a8cd2109b5344:
@@ -2142,7 +2142,7 @@ packages:
       resolve: 1.20.0
     dev: true
 
-  /eslint-import-resolver-typescript/2.5.0_560ef94424f7023f0ab025f67f79aa67:
+  /eslint-import-resolver-typescript/2.5.0_3f013334cb52440e201498cdb6b29798:
     resolution: {integrity: sha512-qZ6e5CFr+I7K4VVhQu3M/9xGv9/YmwsEXrsm3nimw8vWaVHRDrQRp26BgCypTxBp3vUp4o5aVEJRiy0F2DFddQ==}
     engines: {node: '>=4'}
     peerDependencies:
@@ -2150,8 +2150,8 @@ packages:
       eslint-plugin-import: '*'
     dependencies:
       debug: 4.3.2
-      eslint: 7.32.0
-      eslint-plugin-import: 2.25.2_eslint@7.32.0
+      eslint: 8.2.0
+      eslint-plugin-import: 2.25.2_eslint@8.2.0
       glob: 7.2.0
       is-glob: 4.0.3
       resolve: 1.20.0
@@ -2160,7 +2160,7 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-import-resolver-typescript/2.5.0_f3fc3a8f1727ab01eb417b5ed5016c22:
+  /eslint-import-resolver-typescript/2.5.0_560ef94424f7023f0ab025f67f79aa67:
     resolution: {integrity: sha512-qZ6e5CFr+I7K4VVhQu3M/9xGv9/YmwsEXrsm3nimw8vWaVHRDrQRp26BgCypTxBp3vUp4o5aVEJRiy0F2DFddQ==}
     engines: {node: '>=4'}
     peerDependencies:
@@ -2168,8 +2168,8 @@ packages:
       eslint-plugin-import: '*'
     dependencies:
       debug: 4.3.2
-      eslint: 8.1.0
-      eslint-plugin-import: 2.25.2_eslint@8.1.0
+      eslint: 7.32.0
+      eslint-plugin-import: 2.25.2_eslint@7.32.0
       glob: 7.2.0
       is-glob: 4.0.3
       resolve: 1.20.0
@@ -2209,7 +2209,7 @@ packages:
       tsconfig-paths: 3.11.0
     dev: true
 
-  /eslint-plugin-import/2.25.2_eslint@8.1.0:
+  /eslint-plugin-import/2.25.2_eslint@8.2.0:
     resolution: {integrity: sha512-qCwQr9TYfoBHOFcVGKY9C9unq05uOxxdklmBXLVvcwo68y5Hta6/GzCZEMx2zQiu0woKNEER0LE7ZgaOfBU14g==}
     engines: {node: '>=4'}
     peerDependencies:
@@ -2219,7 +2219,7 @@ packages:
       array.prototype.flat: 1.2.5
       debug: 2.6.9
       doctrine: 2.1.0
-      eslint: 8.1.0
+      eslint: 8.2.0
       eslint-import-resolver-node: 0.3.6
       eslint-module-utils: 2.7.1
       has: 1.0.3
@@ -2240,13 +2240,13 @@ packages:
       eslint: 7.32.0
     dev: true
 
-  /eslint-plugin-react-hooks/4.2.[email protected].0:
-    resolution: {integrity: sha512-wqdj1w8azrZwM5yYh3Pm6y/Cxg6nA+Nb2OqkHZ3Bf+cmnoCs2MSDUal+AnKAZN3kxWjSK4rljuromNaxUejyiA==}
+  /eslint-plugin-react-hooks/4.2.[email protected].0:
+    resolution: {integrity: sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==}
     engines: {node: '>=10'}
     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
     dependencies:
-      eslint: 8.1.0
+      eslint: 8.2.0
     dev: true
 
   /eslint-plugin-react/[email protected]:
@@ -2272,7 +2272,7 @@ packages:
       string.prototype.matchall: 4.0.6
     dev: true
 
-  /eslint-plugin-react/7.26.1_eslint@8.1.0:
+  /eslint-plugin-react/7.26.1_eslint@8.2.0:
     resolution: {integrity: sha512-Lug0+NOFXeOE+ORZ5pbsh6mSKjBKXDXItUD2sQoT+5Yl0eoT82DqnXeTMfUare4QVCn9QwXbfzO/dBLjLXwVjQ==}
     engines: {node: '>=4'}
     peerDependencies:
@@ -2281,7 +2281,7 @@ packages:
       array-includes: 3.1.4
       array.prototype.flatmap: 1.2.5
       doctrine: 2.1.0
-      eslint: 8.1.0
+      eslint: 8.2.0
       estraverse: 5.3.0
       jsx-ast-utils: 3.2.1
       minimatch: 3.0.4
@@ -2328,13 +2328,13 @@ packages:
       eslint-visitor-keys: 2.1.0
     dev: true
 
-  /eslint-utils/3.0.0_eslint@8.1.0:
+  /eslint-utils/3.0.0_eslint@8.2.0:
     resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
     engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
     peerDependencies:
       eslint: '>=5'
     dependencies:
-      eslint: 8.1.0
+      eslint: 8.2.0
       eslint-visitor-keys: 2.1.0
     dev: true
 
@@ -2348,8 +2348,8 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /eslint-visitor-keys/3.0.0:
-    resolution: {integrity: sha512-mJOZa35trBTb3IyRmo8xmKBZlxf+N7OnUl4+ZhJHs/r+0770Wh/LEACE2pqMGMe27G/4y8P2bYGk4J70IC5k1Q==}
+  /eslint-visitor-keys/3.1.0:
+    resolution: {integrity: sha512-yWJFpu4DtjsWKkt5GeNBBuZMlNcYVs6vRCLoCVEJrTjaSB6LC98gFipNK/erM2Heg/E8mIK+hXG/pJMLK+eRZA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
@@ -2395,19 +2395,19 @@ packages:
       semver: 7.3.5
       strip-ansi: 6.0.1
       strip-json-comments: 3.1.1
-      table: 6.7.2
+      table: 6.7.3
       text-table: 0.2.0
       v8-compile-cache: 2.3.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /eslint/8.1.0:
-    resolution: {integrity: sha512-JZvNneArGSUsluHWJ8g8MMs3CfIEzwaLx9KyH4tZ2i+R2/rPWzL8c0zg3rHdwYVpN/1sB9gqnjHwz9HoeJpGHw==}
+  /eslint/8.2.0:
+    resolution: {integrity: sha512-erw7XmM+CLxTOickrimJ1SiF55jiNlVSp2qqm0NuBWPtHYQCegD5ZMaW0c3i5ytPqL+SSLaCxdvQXFPLJn+ABw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     hasBin: true
     dependencies:
-      '@eslint/eslintrc': 1.0.3
+      '@eslint/eslintrc': 1.0.4
       '@humanwhocodes/config-array': 0.6.0
       ajv: 6.12.6
       chalk: 4.1.2
@@ -2417,8 +2417,8 @@ packages:
       enquirer: 2.3.6
       escape-string-regexp: 4.0.0
       eslint-scope: 6.0.0
-      eslint-utils: 3.0.0_eslint@8.1.0
-      eslint-visitor-keys: 3.0.0
+      eslint-utils: 3.0.0_eslint@8.2.0
+      eslint-visitor-keys: 3.1.0
       espree: 9.0.0
       esquery: 1.4.0
       esutils: 2.0.3
@@ -2464,7 +2464,7 @@ packages:
     dependencies:
       acorn: 8.5.0
       acorn-jsx: 5.3[email protected]
-      eslint-visitor-keys: 3.0.0
+      eslint-visitor-keys: 3.1.0
     dev: true
 
   /esprima/4.0.1:
@@ -2580,7 +2580,7 @@ packages:
     resolution: {integrity: sha512-ax1Y5I9w+9+JiM+wdHkhBoxew+zG4AJ2SvAD1v1szpddUIiPERVGBxrMcB2ZqW0Y3PP8bOWYv2zqQq1Jp2kqUQ==}
     engines: {node: ^12.20 || >= 14.13}
     dependencies:
-      web-streams-polyfill: 3.1.1
+      web-streams-polyfill: 3.2.0
     dev: false
 
   /file-entry-cache/6.0.1:
@@ -2673,6 +2673,13 @@ packages:
       mime-types: 2.1.33
     dev: true
 
+  /formdata-polyfill/4.0.10:
+    resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
+    engines: {node: '>=12.20.0'}
+    dependencies:
+      fetch-blob: 3.1.3
+    dev: false
+
   /fraction.js/4.1.1:
     resolution: {integrity: sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==}
     dev: true
@@ -2813,7 +2820,7 @@ packages:
       array-union: 2.1.0
       dir-glob: 3.0.1
       fast-glob: 3.2.7
-      ignore: 5.1.8
+      ignore: 5.1.9
       merge2: 1.4.1
       slash: 3.0.0
     dev: true
@@ -2900,8 +2907,8 @@ packages:
       function-bind: 1.1.1
     dev: true
 
-  /history/5.0.1:
-    resolution: {integrity: sha512-5qC/tFUKfVci5kzgRxZxN5Mf1CV8NmJx9ByaPX0YTLx5Vz3Svh7NYp6eA4CpDq4iA9D0C1t8BNIfvQIrUI3mVw==}
+  /history/5.1.0:
+    resolution: {integrity: sha512-zPuQgPacm2vH2xdORvGGz1wQMuHSIB56yNAy5FnLuwOwgSYyPKptJtcMm6Ev+hRGeS+GzhbmRacHzvlESbFwDg==}
     dependencies:
       '@babel/runtime': 7.16.0
     dev: false
@@ -2997,8 +3004,8 @@ packages:
       '@babel/runtime': 7.16.0
     dev: false
 
-  /i18next/21.3.3:
-    resolution: {integrity: sha512-Wv5arCT9pK35nfhOzTdS64T7JpPcoqnkOEidxc4zF0DZ8KetpvmnkO+uWkXy+DFz6zWzPX7U9bIemwBqpFRprw==}
+  /i18next/21.4.1:
+    resolution: {integrity: sha512-uTCDfoMKTX6b/Amss7w/hQU8NV80ahmoKKNYUg0qbLbtUAMvYIWS2VvCCeNEGQIaEjyC4GV4W+iQbBcv3A/ViA==}
     dependencies:
       '@babel/runtime': 7.16.0
     dev: false
@@ -3035,8 +3042,8 @@ packages:
     engines: {node: '>= 4'}
     dev: true
 
-  /ignore/5.1.8:
-    resolution: {integrity: sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==}
+  /ignore/5.1.9:
+    resolution: {integrity: sha512-2zeMQpbKz5dhZ9IwL0gbxSW5w0NK/MSAMtNuhgIHEPmaU3vPdKPL0UdvUCXs5SS4JAwsBxysK5sFMW8ocFiVjQ==}
     engines: {node: '>= 4'}
     dev: true
 
@@ -3434,16 +3441,16 @@ packages:
       object.assign: 4.1.2
     dev: true
 
-  /just-diff-apply/3.0.0:
-    resolution: {integrity: sha512-K2MLc+ZC2DVxX4V61bIKPeMUUfj1YYZ3h0myhchDXOW1cKoPZMnjIoNCqv9bF2n5Oob1PFxuR2gVJxkxz4e58w==}
+  /just-diff-apply/3.1.2:
+    resolution: {integrity: sha512-TCa7ZdxCeq6q3Rgms2JCRHTCfWAETPZ8SzYUbkYF6KR3I03sN29DaOIC+xyWboIcMvjAsD5iG2u/RWzHD8XpgQ==}
     dev: true
 
   /just-diff/3.1.1:
     resolution: {integrity: sha512-sdMWKjRq8qWZEjDcVA6llnUT8RDEBIfOiGpYFPYa9u+2c39JCsejktSP7mj5eRid5EIvTzIpQ2kDOCw1Nq9BjQ==}
     dev: true
 
-  /keyv/4.0.3:
-    resolution: {integrity: sha512-zdGa2TOpSZPq5mU6iowDARnMBZgtCqJ11dJROFi6tg6kTn4nuUdU09lFyLFSaHrWqpIJ+EBq4E8/Dc0Vx5vLdA==}
+  /keyv/4.0.4:
+    resolution: {integrity: sha512-vqNHbAc8BBsxk+7QBYLW0Y219rWcClspR6WSeoHYKG5mnsSoOH+BL1pWq02DDCVdvvuUny5rkBlzMRzoqc+GIg==}
     dependencies:
       json-buffer: 3.0.1
     dev: true
@@ -3461,8 +3468,8 @@ packages:
       type-check: 0.4.0
     dev: true
 
-  /lilconfig/2.0.3:
-    resolution: {integrity: sha512-EHKqr/+ZvdKCifpNrJCKxBTgk5XupZA3y/aCPY9mxfgBzmgh93Mt/WqjjQ38oMxXuvDokaKiM3lAgvSH2sjtHg==}
+  /lilconfig/2.0.4:
+    resolution: {integrity: sha512-bfTIN7lEsiooCocSISTWXkiWJkRqtL9wYtYy+8EK3Y41qh3mpwPU0ycTOgjdY9ErwXCc8QyrQp82bdL0Xkm9yA==}
     engines: {node: '>=10'}
     dev: true
 
@@ -3513,10 +3520,6 @@ packages:
     resolution: {integrity: sha1-soqmKIorn8ZRA1x3EfZathkDMaY=}
     dev: true
 
-  /lodash.clonedeep/4.5.0:
-    resolution: {integrity: sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=}
-    dev: true
-
   /lodash.merge/4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
     dev: true
@@ -3750,12 +3753,13 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
-  /node-fetch/3.0.0:
-    resolution: {integrity: sha512-bKMI+C7/T/SPU1lKnbQbwxptpCrG9ashG+VkytmXCPZyuM9jB6VU+hY0oi4lC8LxTtAeWdckNCTa3nrGsAdA3Q==}
+  /node-fetch/3.1.0:
+    resolution: {integrity: sha512-QU0WbIfMUjd5+MUzQOYhenAazakV7Irh1SGkWCsRzBwvm4fAhzEUaHMJ6QLP7gWT6WO9/oH2zhKMMGMuIrDyKw==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dependencies:
-      data-uri-to-buffer: 3.0.1
+      data-uri-to-buffer: 4.0.0
       fetch-blob: 3.1.3
+      formdata-polyfill: 4.0.10
     dev: false
 
   /node-gyp-build/4.3.0:
@@ -4138,7 +4142,7 @@ packages:
     dependencies:
       json-parse-even-better-errors: 2.3.1
       just-diff: 3.1.1
-      just-diff-apply: 3.0.0
+      just-diff-apply: 3.1.2
     dev: true
 
   /parse-json/5.2.0:
@@ -4254,7 +4258,7 @@ packages:
         optional: true
     dependencies:
       import-cwd: 3.0.0
-      lilconfig: 2.0.3
+      lilconfig: 2.0.4
       yaml: 1.10.2
     dev: true
 
@@ -4473,15 +4477,15 @@ packages:
       react-dom: 17.0[email protected]
     dev: false
 
-  /react-hook-form/7.18.0[email protected]:
-    resolution: {integrity: sha512-aTFs1jXGvpBBv4vYuhheVd9KbAZw/l3DOZhLIadNDyFddaDQmn+yJa63IZ14GDFz4NFgIi+ROkubfGJG2x6q2Q==}
+  /react-hook-form/7.19.1[email protected]:
+    resolution: {integrity: sha512-e0Oii07qNAa72JeGUT5czVCMwdAFPxmxYvd1Y9oPy2KVD6ZGblN6DG1G7AwL9Bz2lOPFZu15SRNnn0Vpx/eGdg==}
     peerDependencies:
       react: ^16.8.0 || ^17
     dependencies:
       react: 17.0.2
     dev: false
 
-  /react-i18next/11.13.0_i18next@21.3.3[email protected]:
+  /react-i18next/11.13.0_i18next@21.4.1[email protected]:
     resolution: {integrity: sha512-AY8ydSqx8LVm1Tn5yXFA0JwCeSWpcFOSr96HrjUXXVAWWbptamZOY2iMxVaGNlGxSLnRY0U2sdCIPVYHcmhBxQ==}
     peerDependencies:
       i18next: '>= 19.0.0'
@@ -4489,7 +4493,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.16.0
       html-parse-stringify: 3.0.1
-      i18next: 21.3.3
+      i18next: 21.4.1
       react: 17.0.2
     dev: false
 
@@ -4644,8 +4648,8 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /reselect/4.1.1:
-    resolution: {integrity: sha512-Jjt8Us6hAWJpjucyladHvUGR+q1mHHgWtGDXlhvvKyNyIeQ3bjuWLDX0bsTLhbm/gd4iXEACBlODUHBlLWiNnA==}
+  /reselect/4.1.2:
+    resolution: {integrity: sha512-wg60ebcPOtxcptIUfrr7Jt3h4BR86cCW3R7y4qt65lnNb4yz4QgrXcbSioVsIOYguyz42+XTHIyJ5TEruzkFgQ==}
 
   /resolve-alpn/1.2.1:
     resolution: {integrity: sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==}
@@ -4926,7 +4930,7 @@ packages:
     engines: {node: '>=0.10.0'}
     hasBin: true
     dependencies:
-      asn1: 0.2.4
+      asn1: 0.2.6
       assert-plus: 1.0.0
       bcrypt-pbkdf: 1.0.2
       dashdash: 1.14.1
@@ -5115,20 +5119,19 @@ packages:
       react: 17.0.2
     dev: false
 
-  /table/6.7.2:
-    resolution: {integrity: sha512-UFZK67uvyNivLeQbVtkiUs8Uuuxv24aSL4/Vil2PJVtMgU8Lx0CYkP12uCGa3kjyQzOSgV1+z9Wkb82fCGsO0g==}
+  /table/6.7.3:
+    resolution: {integrity: sha512-5DkIxeA7XERBqMwJq0aHZOdMadBx4e6eDoFRuyT5VR82J0Ycg2DwM6GfA/EQAhJ+toRTaS1lIdSQCqgrmhPnlw==}
     engines: {node: '>=10.0.0'}
     dependencies:
-      ajv: 8.6.3
-      lodash.clonedeep: 4.5.0
+      ajv: 8.7.1
       lodash.truncate: 4.4.2
       slice-ansi: 4.0.0
       string-width: 4.2.3
       strip-ansi: 6.0.1
     dev: true
 
-  /tailwindcss/3.0.0-alpha.1_0c54bdadaf9d9c9c6c134cb2c6c061a3:
-    resolution: {integrity: sha512-VweVLyu1tpo/i2MnoyDIunToZHYhHRZLGuKDt9I+nnjFoW07NhDwwHWsUyRHKowP5MZaHduhV+AVlM6Auy7m3A==}
+  /tailwindcss/3.0.0-alpha.2_0c54bdadaf9d9c9c6c134cb2c6c061a3:
+    resolution: {integrity: sha512-DLPLL927a05mhwTAPMPgSk1EFLAsWc0qmZeB1yHDSRAj/Bfn0nvdFTqj2u/8FnM5EiS20nsqCZ/HFfXzzaFOZg==}
     engines: {node: '>=12.13.0'}
     hasBin: true
     peerDependencies:
@@ -5265,7 +5268,7 @@ packages:
   /type-route/0.6.0:
     resolution: {integrity: sha512-uh5bxHxHOKNDNTetGwBgtSP5ba3SUtnKcdj3d5AjbIALVbYBwaix4wwfpyxqrE9ia31LknXUc+359FChcC01jw==}
     dependencies:
-      history: 5.0.1
+      history: 5.1.0
     dev: false
 
   /typedarray-to-buffer/3.1.5:
@@ -5387,8 +5390,8 @@ packages:
     resolution: {integrity: sha512-hwj/qMDUEjCU5h0xr90KGCf0tg0/LgJbmOWgrWKYlcJZM7XvquvUJZ0G/HMGr7F7OQMOUuPHWP9JpriinkAlkg==}
     dev: true
 
-  /web-streams-polyfill/3.1.1:
-    resolution: {integrity: sha512-Czi3fG883e96T4DLEPRvufrF2ydhOOW1+1a6c3gNjH2aIh50DNFBdfwh2AKoOf1rXvpvavAoA11Qdq9+BKjE0Q==}
+  /web-streams-polyfill/3.2.0:
+    resolution: {integrity: sha512-EqPmREeOzttaLRm5HS7io98goBgZ7IVz79aDvqjD0kYXLtFZTc0T/U6wHTPKyIjb+MdN7DFIIX6hgdBEpWmfPA==}
     engines: {node: '>= 8'}
     dev: false
 

src/components/generic/SidebarItem.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 
 type DefaultDivProps = JSX.IntrinsicElements['div'];
 
-interface SidebarItemProps extends DefaultDivProps {
+export interface SidebarItemProps extends DefaultDivProps {
   title: string;
   description: string;
-  selected: boolean;
   icon: JSX.Element;
+  selected?: boolean;
 }
 
 export const SidebarItem = ({

src/components/templates/PageLayout.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+
+import { FiXCircle } from 'react-icons/fi';
+
+import { IconButton } from '@app/components/generic/IconButton.jsx';
+import { useBreakpoint } from '@app/hooks/breakpoint';
+import { Drawer } from '@components/generic/Drawer';
+import { SidebarItem, SidebarItemProps } from '@components/generic/SidebarItem';
+import { Tab } from '@headlessui/react';
+
+export interface PageLayoutProps {
+  title: string;
+  sidebarItems: SidebarItemProps[];
+  panels: JSX.Element[];
+  emptyMessage?: string;
+}
+
+export const PageLayout = ({
+  title,
+  sidebarItems,
+  panels,
+  emptyMessage,
+}: PageLayoutProps): JSX.Element => {
+  const [navOpen, setNavOpen] = React.useState(false);
+
+  const { breakpoint } = useBreakpoint();
+
+  return (
+    <Tab.Group>
+      <div className="relative flex w-full dark:text-white">
+        <Drawer
+          open={breakpoint === 'sm' ? navOpen : true}
+          permenant={breakpoint !== 'sm'}
+          onClose={(): void => {
+            setNavOpen(!navOpen);
+          }}
+        >
+          <Tab.List className="flex flex-col border-b divide-y divide-gray-300 dark:divide-gray-600 dark:border-gray-600">
+            <div className="flex items-center justify-between m-8 mr-6 md:my-10">
+              <div className="text-4xl font-extrabold leading-none tracking-tight">
+                {title}
+              </div>
+              <div className="md:hidden">
+                <IconButton
+                  icon={<FiXCircle className="w-5 h-5" />}
+                  onClick={(): void => {
+                    setNavOpen(false);
+                  }}
+                />
+              </div>
+            </div>
+            {!sidebarItems.length && (
+              <span className="p-4 text-sm text-gray-400 dark:text-gray-600">
+                {emptyMessage}
+              </span>
+            )}
+            {sidebarItems.map((props, index) => (
+              <Tab
+                key={index}
+                onClick={(): void => {
+                  setNavOpen(false);
+                }}
+              >
+                {({ selected }): JSX.Element => (
+                  <SidebarItem {...props} selected={selected} />
+                )}
+              </Tab>
+            ))}
+          </Tab.List>
+        </Drawer>
+        <div className="flex w-full">
+          <Tab.Panels className="flex w-full">
+            {panels.map((Panel, index) => (
+              <Tab.Panel key={index} className="flex w-full">
+                {React.cloneElement(Panel, {
+                  key: index,
+                  navOpen: navOpen,
+                  setNavOpen: setNavOpen,
+                })}
+              </Tab.Panel>
+            ))}
+          </Tab.Panels>
+        </div>
+      </div>
+    </Tab.Group>
+  );
+};

src/pages/Nodes/Index.tsx

@@ -1,102 +1,39 @@
 import React from 'react';
 
 import Avatar from 'boring-avatars';
-import { FiXCircle } from 'react-icons/fi';
 
-import { IconButton } from '@app/components/generic/IconButton.jsx';
-import { useBreakpoint } from '@app/hooks/breakpoint';
+import { PageLayout } from '@app/components/templates/PageLayout.jsx';
 import { useAppSelector } from '@app/hooks/redux';
-import { Drawer } from '@components/generic/Drawer';
-import { SidebarItem } from '@components/generic/SidebarItem';
-import { Tab } from '@headlessui/react';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 import { Node } from './Node';
 
 export const Nodes = (): JSX.Element => {
-  const [navOpen, setNavOpen] = React.useState(false);
-
-  const { breakpoint } = useBreakpoint();
-
   const nodes = useAppSelector((state) => state.meshtastic.nodes);
 
   return (
-    <Tab.Group>
-      <div className="relative flex w-full dark:text-white">
-        <Drawer
-          open={breakpoint === 'sm' ? navOpen : true}
-          permenant={breakpoint !== 'sm'}
-          onClose={(): void => {
-            setNavOpen(!navOpen);
-          }}
-        >
-          <Tab.List className="flex flex-col border-b divide-y divide-gray-300 dark:divide-gray-600 dark:border-gray-600">
-            <div className="flex items-center justify-between m-8 mr-6 md:my-10">
-              <div className="text-4xl font-extrabold leading-none tracking-tight">
-                Nodes
-              </div>
-              <div className="md:hidden">
-                <IconButton
-                  icon={<FiXCircle className="w-5 h-5" />}
-                  onClick={(): void => {
-                    setNavOpen(false);
-                  }}
-                />
-              </div>
-            </div>
-
-            {!nodes.length && (
-              <span className="p-4 text-sm text-gray-400 dark:text-gray-600">
-                No nodes discovered yet...
-              </span>
-            )}
-
-            {nodes.map((node) => (
-              <Tab
-                onClick={(): void => {
-                  setNavOpen(false);
-                }}
-                key={node.num}
-              >
-                {({ selected }): JSX.Element => (
-                  <SidebarItem
-                    title={node.user?.longName ?? node.num.toString()}
-                    description={
-                      node.user?.hwModel
-                        ? Protobuf.HardwareModel[node.user.hwModel]
-                        : 'Unknown Hardware'
-                    }
-                    selected={selected}
-                    icon={
-                      <Avatar
-                        size={30}
-                        name={node.user?.longName ?? node.num.toString()}
-                        variant="beam"
-                        colors={[
-                          '#213435',
-                          '#46685B',
-                          '#648A64',
-                          '#A6B985',
-                          '#E1E3AC',
-                        ]}
-                      />
-                    }
-                  />
-                )}
-              </Tab>
-            ))}
-          </Tab.List>
-        </Drawer>
-        <div className="w-full">
-          <Tab.Panels className="h-full">
-            {nodes.map((node) => (
-              <Tab.Panel className="h-full" key={node.num}>
-                <Node navOpen={navOpen} setNavOpen={setNavOpen} node={node} />
-              </Tab.Panel>
-            ))}
-          </Tab.Panels>
-        </div>
-      </div>
-    </Tab.Group>
+    <PageLayout
+      title="Nodes"
+      emptyMessage="No nodes discovered yet..."
+      sidebarItems={nodes.map((node) => {
+        return {
+          title: node.user?.longName ?? node.num.toString(),
+          description: node.user?.hwModel
+            ? Protobuf.HardwareModel[node.user.hwModel]
+            : 'Unknown Hardware',
+          icon: (
+            <Avatar
+              size={30}
+              name={node.user?.longName ?? node.num.toString()}
+              variant="beam"
+              colors={['#213435', '#46685B', '#648A64', '#A6B985', '#E1E3AC']}
+            />
+          ),
+        };
+      })}
+      panels={nodes.map((node, index) => (
+        <Node key={index} node={node} />
+      ))}
+    />
   );
 };

src/pages/Nodes/Node.tsx

@@ -12,8 +12,8 @@ import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 import type { Protobuf } from '@meshtastic/meshtasticjs';
 
 export interface NodeProps {
-  navOpen: boolean;
-  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  navOpen?: boolean;
+  setNavOpen?: React.Dispatch<React.SetStateAction<boolean>>;
   node: Protobuf.NodeInfo;
 }
 
@@ -26,7 +26,7 @@ export const Node = ({ navOpen, setNavOpen, node }: NodeProps): JSX.Element => {
         <IconButton
           icon={<FiMenu className="w-5 h-5" />}
           onClick={(): void => {
-            setNavOpen(!navOpen);
+            setNavOpen && setNavOpen(!navOpen);
           }}
         />
       }

src/pages/Plugins/Files.tsx

@@ -11,8 +11,8 @@ import { useAppSelector } from '@app/hooks/redux';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 
 export interface RangeTestProps {
-  navOpen: boolean;
-  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  navOpen?: boolean;
+  setNavOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 interface IFile {
   name: string;
@@ -58,7 +58,7 @@ export const Files = ({ navOpen, setNavOpen }: RangeTestProps): JSX.Element => {
         <IconButton
           icon={<FiMenu className="w-5 h-5" />}
           onClick={(): void => {
-            setNavOpen(!navOpen);
+            setNavOpen && setNavOpen(!navOpen);
           }}
         />
       }

src/pages/Plugins/Index.tsx

@@ -1,86 +1,29 @@
 import React from 'react';
 
-import { FiFileText, FiRss, FiXCircle } from 'react-icons/fi';
+import { FiFileText, FiRss } from 'react-icons/fi';
 
-import { IconButton } from '@app/components/generic/IconButton.jsx';
-import { useBreakpoint } from '@app/hooks/breakpoint';
-import { Drawer } from '@components/generic/Drawer';
-import { SidebarItem } from '@components/generic/SidebarItem';
-import { Tab } from '@headlessui/react';
+import { PageLayout } from '@app/components/templates/PageLayout.jsx';
 
 import { Files } from './Files';
 import { RangeTest } from './RangeTest';
 
 export const Plugins = (): JSX.Element => {
-  const [navOpen, setNavOpen] = React.useState(false);
-
-  const { breakpoint } = useBreakpoint();
-
   return (
-    <Tab.Group>
-      <div className="relative flex w-full dark:text-white">
-        <Drawer
-          open={breakpoint === 'sm' ? navOpen : true}
-          permenant={breakpoint !== 'sm'}
-          onClose={(): void => {
-            setNavOpen(!navOpen);
-          }}
-        >
-          <Tab.List className="flex flex-col border-b divide-y divide-gray-300 dark:divide-gray-600 dark:border-gray-600">
-            <div className="flex items-center justify-between m-8 mr-6 md:my-10">
-              <div className="text-4xl font-extrabold leading-none tracking-tight">
-                Plugins
-              </div>
-              <div className="md:hidden">
-                <IconButton
-                  icon={<FiXCircle className="w-5 h-5" />}
-                  onClick={(): void => {
-                    setNavOpen(false);
-                  }}
-                />
-              </div>
-            </div>
-            <Tab
-              onClick={(): void => {
-                setNavOpen(false);
-              }}
-            >
-              {({ selected }): JSX.Element => (
-                <SidebarItem
-                  title="Range Test"
-                  description="Test the range of your Meshtastic node"
-                  selected={selected}
-                  icon={<FiRss className="flex-shrink-0 w-6 h-6" />}
-                />
-              )}
-            </Tab>
-            <Tab
-              onClick={(): void => {
-                setNavOpen(false);
-              }}
-            >
-              {({ selected }): JSX.Element => (
-                <SidebarItem
-                  title="File Browser"
-                  description="HTTP only file browser"
-                  selected={selected}
-                  icon={<FiFileText className="flex-shrink-0 w-6 h-6" />}
-                />
-              )}
-            </Tab>
-          </Tab.List>
-        </Drawer>
-        <div className="flex w-full">
-          <Tab.Panels className="flex w-full">
-            <Tab.Panel className="flex w-full">
-              <RangeTest navOpen={navOpen} setNavOpen={setNavOpen} />
-            </Tab.Panel>
-            <Tab.Panel className="flex w-full">
-              <Files navOpen={navOpen} setNavOpen={setNavOpen} />
-            </Tab.Panel>
-          </Tab.Panels>
-        </div>
-      </div>
-    </Tab.Group>
+    <PageLayout
+      title="Plugins"
+      sidebarItems={[
+        {
+          title: 'Range Test',
+          description: 'Test the range of your Meshtastic node',
+          icon: <FiRss className="flex-shrink-0 w-6 h-6" />,
+        },
+        {
+          title: 'File Browser',
+          description: 'HTTP only file browser',
+          icon: <FiFileText className="flex-shrink-0 w-6 h-6" />,
+        },
+      ]}
+      panels={[<RangeTest key={1} />, <Files key={2} />]}
+    />
   );
 };

src/pages/Plugins/RangeTest.tsx

@@ -15,8 +15,8 @@ import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 import type { RadioConfig_UserPreferences } from '@meshtastic/meshtasticjs/dist/generated';
 
 export interface RangeTestProps {
-  navOpen: boolean;
-  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  navOpen?: boolean;
+  setNavOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export const RangeTest = ({
@@ -49,7 +49,7 @@ export const RangeTest = ({
         <IconButton
           icon={<FiMenu className="w-5 h-5" />}
           onClick={(): void => {
-            setNavOpen(!navOpen);
+            setNavOpen && setNavOpen(!navOpen);
           }}
         />
       }

src/pages/settings/Channels.tsx

@@ -11,8 +11,8 @@ import { Button } from '@components/generic/Button';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 
 export interface ChannelsProps {
-  navOpen: boolean;
-  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  navOpen?: boolean;
+  setNavOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export const Channels = ({
@@ -30,7 +30,7 @@ export const Channels = ({
         <IconButton
           icon={<FiMenu className="w-5 h-5" />}
           onClick={(): void => {
-            setNavOpen(!navOpen);
+            setNavOpen && setNavOpen(!navOpen);
           }}
         />
       }

src/pages/settings/Connection.tsx

@@ -25,8 +25,8 @@ import type {
 } from '@meshtastic/meshtasticjs/dist/types';
 
 export interface ConnectionProps {
-  navOpen: boolean;
-  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  navOpen?: boolean;
+  setNavOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 enum connType {
@@ -125,7 +125,7 @@ export const Connection = ({
         <IconButton
           icon={<FiMenu className="w-5 h-5" />}
           onClick={(): void => {
-            setNavOpen(!navOpen);
+            setNavOpen && setNavOpen(!navOpen);
           }}
         />
       }
@@ -142,8 +142,8 @@ export const Connection = ({
       }
     >
       <Card
-        title="Basic settings"
-        description="Device name and user parameters"
+        title="Connection Settings"
+        description="HTTP, BLE and Serial Options"
       >
         <div className="w-full max-w-3xl p-10 md:max-w-xl">
           <form className="space-y-2" onSubmit={onSubmit}>

src/pages/settings/Device.tsx

@@ -15,8 +15,8 @@ import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 export interface DeviceProps {
-  navOpen: boolean;
-  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  navOpen?: boolean;
+  setNavOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
@@ -46,7 +46,7 @@ export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
         <IconButton
           icon={<FiMenu className="w-5 h-5" />}
           onClick={(): void => {
-            setNavOpen(!navOpen);
+            setNavOpen && setNavOpen(!navOpen);
           }}
         />
       }

src/pages/settings/Index.tsx

@@ -6,14 +6,9 @@ import {
   FiLink2,
   FiRss,
   FiSmartphone,
-  FiXCircle,
 } from 'react-icons/fi';
 
-import { IconButton } from '@app/components/generic/IconButton.jsx';
-import { useBreakpoint } from '@app/hooks/breakpoint';
-import { Drawer } from '@components/generic/Drawer';
-import { SidebarItem } from '@components/generic/SidebarItem';
-import { Tab } from '@headlessui/react';
+import { PageLayout } from '@app/components/templates/PageLayout.jsx';
 
 import { Channels } from './Channels';
 import { Connection } from './Connection';
@@ -22,114 +17,43 @@ import { Interface } from './Interface';
 import { Radio } from './Radio';
 
 export const Settings = (): JSX.Element => {
-  const [navOpen, setNavOpen] = React.useState(false);
-
-  const { breakpoint } = useBreakpoint();
-
   return (
-    <Tab.Group>
-      <div className="relative flex w-full dark:text-white">
-        <Drawer
-          open={breakpoint === 'sm' ? navOpen : true}
-          permenant={breakpoint !== 'sm'}
-          onClose={(): void => {
-            setNavOpen(!navOpen);
-          }}
-        >
-          <Tab.List className="flex flex-col border-b divide-y divide-gray-300 dark:divide-gray-600 dark:border-gray-600">
-            <div className="flex items-center justify-between m-8 mr-6 md:my-10">
-              <div className="text-4xl font-extrabold leading-none tracking-tight">
-                Settings
-              </div>
-              <div className="md:hidden">
-                <IconButton
-                  icon={<FiXCircle className="w-5 h-5" />}
-                  onClick={(): void => {
-                    setNavOpen(false);
-                  }}
-                />
-              </div>
-            </div>
-            <Tab
-              onClick={(): void => {
-                setNavOpen(false);
-              }}
-            >
-              {({ selected }): JSX.Element => (
-                <SidebarItem
-                  title="Connection"
-                  description="Method and peramaters for connecting to the device"
-                  selected={selected}
-                  icon={<FiLink2 className="flex-shrink-0 w-6 h-6" />}
-                />
-              )}
-            </Tab>
-            <Tab
-              onClick={(): void => {
-                setNavOpen(false);
-              }}
-            >
-              {({ selected }): JSX.Element => (
-                <SidebarItem
-                  title="Device"
-                  description="Device settings, such as device name and wifi settings"
-                  selected={selected}
-                  icon={<FiSmartphone className="flex-shrink-0 w-6 h-6" />}
-                />
-              )}
-            </Tab>
-            <Tab>
-              {({ selected }): JSX.Element => (
-                <SidebarItem
-                  title="Radio"
-                  description="Adjust radio power and frequency settings"
-                  selected={selected}
-                  icon={<FiRss className="flex-shrink-0 w-6 h-6" />}
-                />
-              )}
-            </Tab>
-            <Tab>
-              {({ selected }): JSX.Element => (
-                <SidebarItem
-                  title="Interface"
-                  description="Change language and other UI settings"
-                  selected={selected}
-                  icon={<FiLayout className="flex-shrink-0 w-6 h-6" />}
-                />
-              )}
-            </Tab>
-            <Tab>
-              {({ selected }): JSX.Element => (
-                <SidebarItem
-                  title="Channels"
-                  description="Manage channels"
-                  selected={selected}
-                  icon={<FiLayers className="flex-shrink-0 w-6 h-6" />}
-                />
-              )}
-            </Tab>
-          </Tab.List>
-        </Drawer>
-        <div className="flex w-full">
-          <Tab.Panels className="flex w-full">
-            <Tab.Panel className="flex w-full">
-              <Connection navOpen={navOpen} setNavOpen={setNavOpen} />
-            </Tab.Panel>
-            <Tab.Panel className="flex w-full">
-              <Device navOpen={navOpen} setNavOpen={setNavOpen} />
-            </Tab.Panel>
-            <Tab.Panel className="flex w-full">
-              <Radio navOpen={navOpen} setNavOpen={setNavOpen} />
-            </Tab.Panel>
-            <Tab.Panel className="flex w-full">
-              <Interface navOpen={navOpen} setNavOpen={setNavOpen} />
-            </Tab.Panel>
-            <Tab.Panel className="flex w-full">
-              <Channels navOpen={navOpen} setNavOpen={setNavOpen} />
-            </Tab.Panel>
-          </Tab.Panels>
-        </div>
-      </div>
-    </Tab.Group>
+    <PageLayout
+      title="Settings"
+      sidebarItems={[
+        {
+          title: 'Connection',
+          description: 'Method and peramaters for connecting to the device',
+          icon: <FiLink2 className="flex-shrink-0 w-6 h-6" />,
+        },
+        {
+          title: 'Device',
+          description: 'Device settings, such as device name and wifi settings',
+          icon: <FiSmartphone className="flex-shrink-0 w-6 h-6" />,
+        },
+        {
+          title: 'Radio',
+          description: 'Adjust radio power and frequency settings',
+          icon: <FiRss className="flex-shrink-0 w-6 h-6" />,
+        },
+        {
+          title: 'Interface',
+          description: 'Change language and other UI settings',
+          icon: <FiLayout className="flex-shrink-0 w-6 h-6" />,
+        },
+        {
+          title: 'Channels',
+          description: 'Manage channels',
+          icon: <FiLayers className="flex-shrink-0 w-6 h-6" />,
+        },
+      ]}
+      panels={[
+        <Connection key={1} />,
+        <Device key={2} />,
+        <Radio key={3} />,
+        <Interface key={4} />,
+        <Channels key={5} />,
+      ]}
+    />
   );
 };

src/pages/settings/Interface.tsx

@@ -11,8 +11,8 @@ import { Button } from '@components/generic/Button';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 
 export interface InterfaceProps {
-  navOpen: boolean;
-  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  navOpen?: boolean;
+  setNavOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export const Interface = ({
@@ -29,7 +29,7 @@ export const Interface = ({
         <Button
           icon={<FiMenu className="w-5 h-5" />}
           onClick={(): void => {
-            setNavOpen(!navOpen);
+            setNavOpen && setNavOpen(!navOpen);
           }}
           circle
         />

src/pages/settings/Radio.tsx

@@ -16,8 +16,8 @@ import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 export interface RadioProps {
-  navOpen: boolean;
-  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  navOpen?: boolean;
+  setNavOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
@@ -40,7 +40,7 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
         <IconButton
           icon={<FiMenu className="w-5 h-5" />}
           onClick={(): void => {
-            setNavOpen(!navOpen);
+            setNavOpen && setNavOpen(!navOpen);
           }}
         />
       }