Misc fixes

package.json

@@ -12,12 +12,13 @@
     "lint": "eslint 'src/**/*.{ts,tsx}'"
   },
   "dependencies": {
+    "@floating-ui/react-dom": "^0.3.3",
     "@headlessui/react": "^1.4.2",
     "@meshtastic/meshtasticjs": "^0.6.35",
     "@reduxjs/toolkit": "^1.7.1",
     "base64-js": "^1.5.1",
     "boring-avatars": "^1.5.8",
-    "i18next": "^21.6.0",
+    "i18next": "^21.6.2",
     "i18next-browser-languagedetector": "^6.1.2",
     "mapbox-gl": "^2.6.1",
     "react": "^17.0.2",
@@ -42,7 +43,7 @@
     "@types/react-dom": "^17.0.11",
     "@types/react-file-icon": "^1.0.1",
     "@types/w3c-web-serial": "^1.0.2",
-    "@types/web-bluetooth": "^0.0.11",
+    "@types/web-bluetooth": "^0.0.12",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
     "@typescript-eslint/parser": "^5.7.0",
     "@verypossible/eslint-config": "^1.6.1",
@@ -60,10 +61,10 @@
     "gzipper": "^6.0.0",
     "postcss": "^8.4.5",
     "prettier": "^2.5.1",
-    "tailwindcss": "^3.0.5",
+    "tailwindcss": "^3.0.6",
     "tar": "^6.1.11",
     "typescript": "^4.5.4",
-    "vite": "^2.7.2",
+    "vite": "^2.7.3",
     "vite-plugin-cdn-import": "^0.3.5",
     "vite-plugin-pwa": "^0.11.12",
     "workbox-window": "^6.4.2"

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 lockfileVersion: 5.3
 
 specifiers:
+  '@floating-ui/react-dom': ^0.3.3
   '@headlessui/react': ^1.4.2
   '@meshtastic/meshtasticjs': ^0.6.35
   '@reduxjs/toolkit': ^1.7.1
@@ -9,7 +10,7 @@ specifiers:
   '@types/react-dom': ^17.0.11
   '@types/react-file-icon': ^1.0.1
   '@types/w3c-web-serial': ^1.0.2
-  '@types/web-bluetooth': ^0.0.11
+  '@types/web-bluetooth': ^0.0.12
   '@typescript-eslint/eslint-plugin': ^5.7.0
   '@typescript-eslint/parser': ^5.7.0
   '@verypossible/eslint-config': ^1.6.1
@@ -27,7 +28,7 @@ specifiers:
   eslint-plugin-react: ^7.27.1
   eslint-plugin-react-hooks: ^4.3.0
   gzipper: ^6.0.0
-  i18next: ^21.6.0
+  i18next: ^21.6.2
   i18next-browser-languagedetector: ^6.1.2
   mapbox-gl: ^2.6.1
   postcss: ^8.4.5
@@ -44,31 +45,32 @@ specifiers:
   react-select: ^5.2.1
   rfc4648: ^1.5.0
   swr: ^1.1.2-beta.0
-  tailwindcss: ^3.0.5
+  tailwindcss: ^3.0.6
   tar: ^6.1.11
   timeago-react: ^3.0.4
   type-route: ^0.6.0
   typescript: ^4.5.4
   use-breakpoint: ^3.0.0
-  vite: ^2.7.2
+  vite: ^2.7.3
   vite-plugin-cdn-import: ^0.3.5
   vite-plugin-pwa: ^0.11.12
   workbox-window: ^6.4.2
 
 dependencies:
+  '@floating-ui/react-dom': 0.3.3_5539cae010396b202b015f3568914e95
   '@headlessui/react': 1.4.2_react-dom@17.0.2+react@17.0.2
-  '@meshtastic/meshtasticjs': 0.6.35
+  '@meshtastic/meshtasticjs': link:../meshtastic.js
   '@reduxjs/toolkit': 1.7.1_react-redux@7.2.6+react@17.0.2
   base64-js: 1.5.1
   boring-avatars: 1.5.8
-  i18next: 21.6.0
+  i18next: 21.6.2
   i18next-browser-languagedetector: 6.1.2
   mapbox-gl: 2.6.1
   react: 17.0.2
   react-dom: 17.0.2_react@17.0.2
   react-file-icon: 1.1.0_react-dom@17.0.2+react@17.0.2
   react-hook-form: 7.22.1_react@17.0.2
-  react-i18next: 11.15.1_i18next@21.6.0+react@17.0.2
+  react-i18next: 11.15.1_i18next@21.6.2+react@17.0.2
   react-icons: 4.3.1_react@17.0.2
   react-json-pretty: 2.2.0_react-dom@17.0.2+react@17.0.2
   react-qr-code: 2.0.3_react@17.0.2
@@ -86,7 +88,7 @@ devDependencies:
   '@types/react-dom': 17.0.11
   '@types/react-file-icon': 1.0.1
   '@types/w3c-web-serial': 1.0.2
-  '@types/web-bluetooth': 0.0.11
+  '@types/web-bluetooth': 0.0.12
   '@typescript-eslint/eslint-plugin': 5.7.0_915acdfead96f701b1277a1a723fc8d4
   '@typescript-eslint/parser': 5.7.0_eslint@8.4.1+typescript@4.5.4
   '@verypossible/eslint-config': 1.6.1_typescript@4.5.4
@@ -104,12 +106,12 @@ devDependencies:
   gzipper: 6.0.0
   postcss: 8.4.5
   prettier: 2.5.1
-  tailwindcss: 3.0.5_16a290f6d0e3717bf6d2667234aebd30
+  tailwindcss: 3.0.6_16a290f6d0e3717bf6d2667234aebd30
   tar: 6.1.11
   typescript: 4.5.4
-  vite: 2.7.2
+  vite: 2.7.3
   vite-plugin-cdn-import: 0.3.5
-  vite-plugin-pwa: 0.11.12_vite@2.7.2
+  vite-plugin-pwa: 0.11.12_vite@2.7.3
   workbox-window: 6.4.2
 
 packages:
@@ -1410,6 +1412,30 @@ packages:
       - supports-color
     dev: true
 
+  /@floating-ui/core/0.2.1:
+    resolution: {integrity: sha512-fhFNlxBdiA8RVdVcZUllwvIgwvj3QL1o5MxthjgPmkc6nizu1/qwTVMhpr9QRdkF6DwNQnu0rvgb0r7Ml3i4mw==}
+    dev: false
+
+  /@floating-ui/dom/0.1.7:
+    resolution: {integrity: sha512-aA0i/ov24v+f6YCobJecoDBcOikn1W7+q9txSXQmezfPEJ6P9QFRrFvuYGaO0EevgexmJ3PlrfSR4dKhNHRP0Q==}
+    dependencies:
+      '@floating-ui/core': 0.2.1
+    dev: false
+
+  /@floating-ui/react-dom/0.3.3_5539cae010396b202b015f3568914e95:
+    resolution: {integrity: sha512-ALPyo9zJkRKsUFHNXtvBVB1B5zOhDfLtq4eJHYMt6DHt4wPiHgCoM8XtMiFz5s5P3cbznkNa6cUUIRn9j2F5/A==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+    dependencies:
+      '@floating-ui/dom': 0.1.7
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+      use-isomorphic-layout-effect: 1.1.1_cfedea9b3ed0faf0dded75c187406c5e
+    transitivePeerDependencies:
+      - '@types/react'
+    dev: false
+
   /@headlessui/react/1.4.2_react-dom@17.0.2+react@17.0.2:
     resolution: {integrity: sha512-N8tv7kLhg9qGKBkVdtg572BvKvWhmiudmeEpOCyNwzOsZHCXBtl8AazGikIfUS+vBoub20Fse3BjawXDVPPdug==}
     engines: {node: '>=10'}
@@ -1491,13 +1517,6 @@ packages:
     engines: {node: '>=6.0.0'}
     dev: false
 
-  /@meshtastic/meshtasticjs/0.6.35:
-    resolution: {integrity: sha512-vr6t3/VvgVynmVevZnRsJc+G/TvmP5eTeIZHOrC1N+SX0r/CIs4IbZFTqp5frvwJYqyyBXSxixm5JN5+byFS9A==}
-    dependencies:
-      '@protobuf-ts/runtime': 2.1.0
-      sub-events: 1.8.9
-    dev: false
-
   /@nodelib/fs.scandir/2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -1519,10 +1538,6 @@ packages:
       fastq: 1.13.0
     dev: true
 
-  /@protobuf-ts/runtime/2.1.0:
-    resolution: {integrity: sha512-HZwkgJW9SGiE9+0lWKr1X997tmG01/40j+hr9yBVk+hTQcm7Hsf77XhMNtsDjWUOcspG6GBXu8o3g4i3kD5/zQ==}
-    dev: false
-
   /@reduxjs/toolkit/1.7.1_react-redux@7.2.6+react@17.0.2:
     resolution: {integrity: sha512-wXwXYjBVz/ItxB7SMzEAMmEE/FBiY1ze18N+VVVX7NtVbRUrdOGKhpQMHivIJfkbJvSdLUU923a/yAagJQzY0Q==}
     peerDependencies:
@@ -1708,8 +1723,8 @@ packages:
     resolution: {integrity: sha512-Ftx4BtLxgAnel7V7GbHylCYjSq827A+jeEE3SnTS7huCGUN0pSwUn+CchTCT9TkZj9w+NVMUq4Bk2R0GvUNmAQ==}
     dev: true
 
-  /@types/web-bluetooth/0.0.11:
+  /@types/web-bluetooth/0.0.12:
-    resolution: {integrity: sha512-2CF3Kk2Rcvg/c2QzO7mXUhY7eL9CC3aKzrF+dNWNmp7Q8bmlvjmUM1nFPMSngawdJ+CcIdu8eJlQRytBgAZR9w==}
+    resolution: {integrity: sha512-Q4sUrowpylCOWjUWFtNwkNBHQUnCL8y44Iq2ZLtVMAuAGIwPSXa3kqIvu2LwXoc2d1jyaaw4Bg354degHrsADw==}
     dev: true
 
   /@typescript-eslint/eslint-plugin/4.33.0_3289a875d95a672b97ebf589745c66ef:
@@ -2224,7 +2239,7 @@ packages:
     hasBin: true
     dependencies:
       caniuse-lite: 1.0.30001287
-      electron-to-chromium: 1.4.20
+      electron-to-chromium: 1.4.22
       escalade: 3.1.1
       node-releases: 2.0.1
       picocolors: 1.0.0
@@ -2509,8 +2524,8 @@ packages:
       jake: 10.8.2
     dev: true
 
-  /electron-to-chromium/1.4.20:
+  /electron-to-chromium/1.4.22:
-    resolution: {integrity: sha512-N7ZVNrdzX8NE90OXEFBMsBf3fp8P/vVDUER3WCUZjzC7OkNTXHVoF6W9qVhq8+dA8tGnbDajzUpj2ISNVVyj+Q==}
+    resolution: {integrity: sha512-IiW8cV8eyjMhuWqk9wwHRPOVN+5Fa7NHOTjogrwg2H9TNiLVA8ywjOJnVKoywaqUHryDUOpK7Mg6P1FETisi0g==}
     dev: true
 
   /emoji-regex/8.0.0:
@@ -3461,8 +3476,8 @@ packages:
       '@babel/runtime': 7.16.5
     dev: false
 
-  /i18next/21.6.0:
+  /i18next/21.6.2:
-    resolution: {integrity: sha512-RjNuACL35wWZgtkyMcjcCmK7R72u3P6jTNbGKzrvHGI9M0iK5Vn1DsBIwOByppaXLIbe0viJ79Nz2h8w1UwPoQ==}
+    resolution: {integrity: sha512-S1zSTrs2lgPH8iG68pMWh3P7OzQMcs3+Qr5F39JTyGbe/xl5cW4cF8MTPKSy6F25tFTcKBq915IoEZUWewkldg==}
     dependencies:
       '@babel/runtime': 7.16.5
     dev: false
@@ -4377,7 +4392,7 @@ packages:
       react: 17.0.2
     dev: false
 
-  /react-i18next/11.15.1_i18next@21.6.0+react@17.0.2:
+  /react-i18next/11.15.1_i18next@21.6.2+react@17.0.2:
     resolution: {integrity: sha512-lnje1uKu5XeM5MLvfbt1oygF+nEIZnpOM4Iu8bkx5ECD4XRYgi3SJDmolrp0EDxDHeK2GgFb+vEEK0hsZ9sjeA==}
     peerDependencies:
       i18next: '>= 19.0.0'
@@ -4386,7 +4401,7 @@ packages:
       '@babel/runtime': 7.16.5
       html-escaper: 2.0.2
       html-parse-stringify: 3.0.1
-      i18next: 21.6.0
+      i18next: 21.6.2
       react: 17.0.2
     dev: false
 
@@ -4860,11 +4875,6 @@ packages:
     resolution: {integrity: sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==}
     dev: false
 
-  /sub-events/1.8.9:
-    resolution: {integrity: sha512-RhhA2amqVzL6nO+aiZOqxBCgcA3ZLfp4W9iHFUELwq8132TS7pUReJV+bcRjtNKdqm/Ep1sD/h01eAcTBtgrBQ==}
-    engines: {node: '>=10.0.0'}
-    dev: false
-
   /supercluster/7.1.4:
     resolution: {integrity: sha512-GhKkRM1jMR6WUwGPw05fs66pOFWhf59lXq+Q3J3SxPvhNcmgOtLRV6aVQPMRsmXdpaeFJGivt+t7QXUPL3ff4g==}
     dependencies:
@@ -4904,8 +4914,8 @@ packages:
       strip-ansi: 6.0.1
     dev: true
 
-  /tailwindcss/3.0.5_16a290f6d0e3717bf6d2667234aebd30:
+  /tailwindcss/3.0.6_16a290f6d0e3717bf6d2667234aebd30:
-    resolution: {integrity: sha512-59pNgzx2o+wkAk7IZGIH7H9eNS53gzZGrO3+NPyOEWHDbquHgiLL/c993T5t1vPSAeBxox4X5OgZwNuRvXVf+g==}
+    resolution: {integrity: sha512-+CA2f09rbHFDsdQ1iDvsOGbF1tZFmyPoRhUeaF9/5FRT5GYObtp+UjTSCdmeDcu6T90bx4WAaOkddYFPBkjbAA==}
     engines: {node: '>=12.13.0'}
     hasBin: true
     peerDependencies:
@@ -5149,6 +5159,19 @@ packages:
       react-dom: 17.0.2_react@17.0.2
     dev: false
 
+  /use-isomorphic-layout-effect/1.1.1_cfedea9b3ed0faf0dded75c187406c5e:
+    resolution: {integrity: sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 17.0.37
+      react: 17.0.2
+    dev: false
+
   /util-deprecate/1.0.2:
     resolution: {integrity: sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=}
     dev: true
@@ -5170,7 +5193,7 @@ packages:
       - rollup
     dev: true
 
-  /vite-plugin-pwa/0.11.12_vite@2.7.2:
+  /vite-plugin-pwa/0.11.12_vite@2.7.3:
     resolution: {integrity: sha512-XqFmA4y9C4RBb5osSsa26GVwOSwbzf2GNVcT5+06KYYdguqLpuI9FW7iV/akZqg0OUNUpH4tHfme8SnHA4PIXA==}
     peerDependencies:
       vite: ^2.0.0
@@ -5179,7 +5202,7 @@ packages:
       fast-glob: 3.2.7
       pretty-bytes: 5.6.0
       rollup: 2.61.1
-      vite: 2.7.2
+      vite: 2.7.3
       workbox-build: 6.4.2
       workbox-window: 6.4.2
     transitivePeerDependencies:
@@ -5188,8 +5211,8 @@ packages:
       - supports-color
     dev: true
 
-  /vite/2.7.2:
+  /vite/2.7.3:
-    resolution: {integrity: sha512-wMffVVdKZRZP/HwW3yttKL8X+IJePz7bUcnGm0vqljffpVwHpjWC3duZtJQHAGvy+wrTjmwU7vkULpZ1dVXY6w==}
+    resolution: {integrity: sha512-GAY1P+9fLJOju1SRm8+hykVnEXog+E+KXuqqyMBQDriKCUIKzWnPn142yNNhSdf/ixYGYdUa5ce3A8WaEajzGw==}
     engines: {node: '>=12.2.0'}
     hasBin: true
     peerDependencies:

src/App.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
 
+import { FiBell } from 'react-icons/fi';
+
 import { DeviceStatus } from '@app/components/menu/buttons/DeviceStatus';
-import { useAppSelector } from '@app/hooks/redux';
+import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
 import { Connection } from '@components/Connection';
 import { MobileNavToggle } from '@components/menu/buttons/MobileNavToggle';
+import { Notifications } from '@components/menu/buttons/Notifications';
 import { ThemeToggle } from '@components/menu/buttons/ThemeToggle';
 import { Logo } from '@components/menu/Logo';
 import { MobileNav } from '@components/menu/MobileNav';
@@ -16,22 +19,51 @@ import { NotFound } from '@pages/NotFound';
 import { Plugins } from '@pages/Plugins/Index';
 import { Settings } from '@pages/settings/Index';
 
+import { addNotification, removeNotification } from './core/slices/appSlice.js';
+
 export const App = (): JSX.Element => {
   const route = useRoute();
+  const dispatch = useAppDispatch();
+  const notifications = useAppSelector((state) => state.app.notifications);
   const darkMode = useAppSelector((state) => state.app.darkMode);
 
   React.useEffect(() => {
+    if (
+      Notification.permission !== 'granted' &&
+      notifications.findIndex((n) => n.id === 'notification-permission') === -1
+    ) {
+      dispatch(
+        addNotification({
+          id: 'notification-permission',
+          icon: <FiBell className="w-4 h-4" />,
+          read: Notification.permission === 'denied',
+          title: 'Enable Push Notifications',
+          action: {
+            message: 'Enable',
+            action: async () => await requestNotificationPermission(),
+          },
+        }),
+      );
+    }
+
+    // Notification.permission === ''
     requestNotificationPermission().catch((e) => {
       console.log(e);
     });
-  }, []);
+  }, [dispatch, notifications]);
+
+  React.useEffect(() => {
+    if (Notification.permission === 'granted') {
+      dispatch(removeNotification('notification-permission'));
+    }
+  }, [dispatch]);
 
   return (
     <div className={`h-screen w-screen ${darkMode ? 'dark' : ''}`}>
       <Connection />
       <div className="flex flex-col h-full bg-gray-200 dark:bg-primaryDark">
         <div className="flex flex-shrink-0 overflow-hidden bg-primary dark:bg-primary">
-          <div className="w-full overflow-hidden bg-white border-b border-gray-300 md:mt-6 md:mx-6 md:pt-4 md:pb-3 md:rounded-t-3xl dark:border-gray-600 md:shadow-md dark:bg-primaryDark">
+          <div className="w-full overflow-hidden bg-white border-b border-gray-300 md:mt-6 md:mx-6 md:py-2 md:rounded-t-3xl dark:border-gray-600 md:shadow-md dark:bg-primaryDark">
             <div className="flex items-center justify-between h-12 px-4 md:px-6">
               <div className="hidden md:flex">
                 <Logo />
@@ -40,6 +72,7 @@ export const App = (): JSX.Element => {
               <MobileNavToggle />
               <div className="flex items-center space-x-2">
                 <DeviceStatus />
+                <Notifications />
                 <ThemeToggle />
               </div>
             </div>

src/components/Connection.tsx

@@ -76,7 +76,6 @@ export const Connection = (): JSX.Element => {
               {state.deviceStatus ===
                 Types.DeviceStatusEnum.DEVICE_CONNECTED && (
                 <Button
-                  padding={2}
                   border
                   onClick={async (): Promise<void> => {
                     await connection.disconnect();

src/components/connection/Serial.tsx

@@ -3,13 +3,15 @@ import React from 'react';
 import { useForm } from 'react-hook-form';
 import { FiCheck } from 'react-icons/fi';
 
+import { useAppDispatch } from '@app/hooks/redux';
 import { Button } from '@components/generic/Button';
 import { IconButton } from '@components/generic/IconButton';
 import { serial, setConnection } from '@core/connection';
-import { connType } from '@core/slices/appSlice';
+import { connType, setConnectionParams } from '@core/slices/appSlice';
 
 export const Serial = (): JSX.Element => {
   const [serialDevices, setSerialDevices] = React.useState<SerialPort[]>([]);
+  const dispatch = useAppDispatch();
 
   const { register, handleSubmit, control } = useForm<{
     device?: SerialPort;
@@ -45,6 +47,14 @@ export const Serial = (): JSX.Element => {
           </div>
           <IconButton
             onClick={async (): Promise<void> => {
+              dispatch(
+                setConnectionParams({
+                  type: connType.SERIAL,
+                  params: {
+                    port: device,
+                  },
+                }),
+              );
               await setConnection(connType.SERIAL);
             }}
             icon={<FiCheck />}

src/components/generic/Button.tsx

@@ -6,23 +6,21 @@ type DefaultButtonProps = JSX.IntrinsicElements['button'];
 
 interface ButtonProps extends DefaultButtonProps {
   icon?: JSX.Element;
-  circle?: boolean;
   active?: boolean;
   border?: boolean;
-  padding?: number;
+  padding?: string;
   confirmAction?: () => void;
 }
 
 export const Button = ({
   icon,
-  circle,
   className,
   active,
   border,
   confirmAction,
   disabled,
   children,
-  padding = 3,
+  padding = '2',
   ...props
 }: ButtonProps): JSX.Element => {
   const [hasConfirmed, setHasConfirmed] = React.useState(false);
@@ -42,27 +40,17 @@ export const Button = ({
   return (
     <button
       onClick={handleConfirm}
-      className={`items-center select-none flex dark:text-white active:scale-95 transition duration-200 ease-in-out ${
+      className={`items-center select-none flex border border-transparent dark:text-white active:scale-95 transition duration-200 ease-in-out focus-within:border-primary dark:focus-within:border-primary focus-within:shadow-border rounded-md p-${padding} space-x-3 text-sm ${
         active && !disabled ? 'bg-gray-100 dark:bg-gray-700' : ''
-      } ${
-        circle
-          ? 'rounded-full h-10 w-10'
-          : `rounded-md p-${padding} space-x-3 text-sm`
       } ${
         disabled
           ? 'cursor-not-allowed dark:bg-primaryDark bg-white'
           : 'cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 hover:shadow-md'
-      } ${
+      } ${border ? 'border-gray-400 dark:border-gray-200' : ''} ${className}`}
-        border ? 'border border-gray-400 dark:border-gray-200' : ''
-      } ${className}`}
       {...props}
     >
       {icon && (
-        <div
+        <div className="text-gray-500 dark:text-gray-400">
-          className={`text-gray-500 dark:text-gray-400 ${
-            circle ? 'mx-auto' : ''
-          }`}
-        >
           {hasConfirmed ? <FiCheck /> : icon}
         </div>
       )}

src/components/menu/Navigation.tsx

@@ -22,7 +22,7 @@ export const Navigation = ({
     >
       <div onClick={onClick}>
         <Button
-          icon={<FiMessageSquare className="w-6 h-6" />}
+          icon={<FiMessageSquare className="w-5 h-5" />}
           active={route.name === 'messages'}
           className="w-full md:w-auto"
           {...routes.messages().link}
@@ -32,7 +32,7 @@ export const Navigation = ({
       </div>
       <div onClick={onClick}>
         <Button
-          icon={<FiGrid className="w-6 h-6" />}
+          icon={<FiGrid className="w-5 h-5" />}
           className="w-full md:w-auto"
           active={route.name === 'nodes'}
           {...routes.nodes().link}
@@ -42,7 +42,7 @@ export const Navigation = ({
       </div>
       <div onClick={onClick}>
         <Button
-          icon={<FiPackage className="w-6 h-6" />}
+          icon={<FiPackage className="w-5 h-5" />}
           className="w-full md:w-auto"
           active={route.name === 'plugins'}
           {...routes.plugins().link}
@@ -52,7 +52,7 @@ export const Navigation = ({
       </div>
       <div onClick={onClick}>
         <Button
-          icon={<FiSettings className="w-6 h-6" />}
+          icon={<FiSettings className="w-5 h-5" />}
           className="w-full md:w-auto"
           active={route.name === 'settings'}
           {...routes.settings().link}

src/components/menu/buttons/DeviceStatus.tsx

@@ -14,7 +14,7 @@ export const DeviceStatus = (): JSX.Element => {
 
   return (
     <Button
-      padding={0}
+      padding="0"
       active
       onClick={(): void => {
         dispatch(dispatch(openConnectionModal()));

src/components/menu/buttons/Notifications.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+
+import { FiBell, FiX } from 'react-icons/fi';
+
+import { useAppSelector } from '@app/hooks/redux';
+import { Button } from '@components/generic/Button';
+import { IconButton } from '@components/generic/IconButton';
+import { shift, useFloating } from '@floating-ui/react-dom';
+import { Popover } from '@headlessui/react';
+
+export const Notifications = (): JSX.Element => {
+  const [unreadCount, setUnreadCount] = React.useState(0);
+  const notifications = useAppSelector((state) => state.app.notifications);
+
+  const { x, y, reference, floating, strategy } = useFloating({
+    placement: 'bottom',
+    middleware: [shift()],
+  });
+
+  React.useEffect(() => {
+    setUnreadCount(
+      notifications.filter((notification) => !notification.read).length,
+    );
+  }, [notifications]);
+
+  return (
+    <Popover>
+      <Popover.Button as="div" className="relative" ref={reference}>
+        <IconButton icon={<FiBell className="w-5 h-5" />} />
+        {unreadCount > 0 && (
+          <div className="absolute pointer-events-none top-1 right-1">
+            <div className="w-3 h-3 text-xs font-semibold leading-3 text-center text-white bg-orange-500 rounded-full">
+              {unreadCount}
+            </div>
+          </div>
+        )}
+      </Popover.Button>
+
+      <Popover.Panel
+        ref={floating}
+        style={{
+          position: strategy,
+          top: y ?? '',
+          left: x ?? '',
+        }}
+        className="fixed z-50 border border-gray-300 rounded-md shadow-md w-72 bg-primaryDark dark:border-gray-600"
+      >
+        <div className="divide-y divide-gray-600">
+          {notifications.map((notification, index) => (
+            <div
+              key={index}
+              className={`p-1 flex text-sm justify-between ${
+                notification.read
+                  ? 'text-gray-600 dark:text-gray-300'
+                  : 'text-gray-900 dark:text-white'
+              }`}
+            >
+              <div className="my-auto">{notification.icon}</div>
+
+              <div className="my-auto font-light">{notification.title}</div>
+
+              <div className="flex space-x-1">
+                {notification.action ? (
+                  <div className="my-auto w-18">
+                    <Button
+                      border
+                      padding="0.5"
+                      onClick={notification.action.action}
+                    >
+                      {notification.action.message}
+                    </Button>
+                  </div>
+                ) : (
+                  <div className="w-16" />
+                )}
+                <IconButton icon={<FiX />} />
+              </div>
+            </div>
+          ))}
+        </div>
+      </Popover.Panel>
+    </Popover>
+  );
+};

src/core/connection.ts

@@ -34,8 +34,7 @@ export const connectionUrl = state.hostOverrideEnabled
   ? state.hostOverride
   : import.meta.env.PROD
   ? window.location.hostname
-  : (import.meta.env.VITE_PUBLIC_DEVICE_IP as string) ??
+  : (import.meta.env.VITE_PUBLIC_DEVICE_IP as string) ?? 'meshtastic.local';
-    'http://meshtastic.local';
 
 export const ble = new IBLEConnection();
 export const serial = new ISerialConnection();

src/core/slices/appSlice.ts

@@ -10,6 +10,17 @@ export enum connType {
   SERIAL,
 }
 
+interface Notification {
+  id: string;
+  icon: React.ReactNode;
+  title: string;
+  action?: {
+    message: string;
+    action: () => void;
+  };
+  read: boolean;
+}
+
 interface AppState {
   mobileNavOpen: boolean;
   connectionModalOpen: boolean;
@@ -21,6 +32,7 @@ interface AppState {
     HTTP: Types.HTTPConnectionParameters;
     SERIAL: Types.SerialConnectionParameters;
   };
+  notifications: Notification[];
 }
 
 const initialState: AppState = {
@@ -39,6 +51,7 @@ const initialState: AppState = {
     },
     SERIAL: {},
   },
+  notifications: [],
 };
 
 export const appSlice = createSlice({
@@ -78,6 +91,17 @@ export const appSlice = createSlice({
       state.connectionParams[connType[action.payload.type]] =
         action.payload.params;
     },
+    addNotification(state, action: PayloadAction<Notification>) {
+      state.notifications.push(action.payload);
+    },
+    removeNotification(state, action: PayloadAction<string>) {
+      state.notifications.splice(
+        state.notifications.findIndex(
+          (notification) => notification.id === action.payload,
+        ),
+        1,
+      );
+    },
   },
 });
 
@@ -90,6 +114,8 @@ export const {
   setCurrentPage,
   setConnType,
   setConnectionParams,
+  addNotification,
+  removeNotification,
 } = appSlice.actions;
 
 export default appSlice.reducer;

src/pages/settings/Channels.tsx

@@ -7,7 +7,6 @@ import JSONPretty from 'react-json-pretty';
 import { useAppSelector } from '@app/hooks/redux';
 import { Channel } from '@components/Channel';
 import { FormFooter } from '@components/FormFooter';
-import { Button } from '@components/generic/Button';
 import { Card } from '@components/generic/Card';
 import { Cover } from '@components/generic/Cover';
 import { Checkbox } from '@components/generic/form/Checkbox';
@@ -249,18 +248,6 @@ export const Channels = ({
                 isPrimary={channel.channel.index === 0}
               />
             ))}
-
-            <div className="flex justify-between">
-              <div
-                onClick={(): Promise<void> => {
-                  return connection.confirmSetChannel();
-                }}
-                className="text-sm font-thin text-gray-400 dark:text-gray-300"
-              >
-                Please ensure any changes are working before confirming
-              </div>
-              <Button active>Confirm</Button>
-            </div>
           </div>
         </Card>
       </div>

src/pages/settings/Interface.tsx

@@ -30,7 +30,6 @@ export const Interface = ({
           onClick={(): void => {
             setNavOpen && setNavOpen(!navOpen);
           }}
-          circle
         />
       }
       footer={

src/pages/settings/WiFi.tsx

@@ -91,6 +91,7 @@ export const WiFi = ({ navOpen, setNavOpen }: WiFiProps): JSX.Element => {
             />
             <Input
               type="password"
+              autoComplete="off"
               label={t('strings.wifi_psk')}
               disabled={watchWifiApMode}
               {...register('wifiPassword')}