Switch to Vite + improvements

src/components/chat/Message.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 import Avatar from 'boring-avatars';
 

src/components/chat/MessageBar.tsx

@@ -15,6 +15,7 @@ export const MessageBar = (): JSX.Element => {
   const dispatch = useAppDispatch();
   const ready = useAppSelector((state) => state.meshtastic.ready);
   const nodes = useAppSelector((state) => state.meshtastic.nodes);
+  const users = useAppSelector((state) => state.meshtastic.users);
   const myNodeInfo = useAppSelector((state) => state.meshtastic.myNodeInfo);
   const [currentMessage, setCurrentMessage] = React.useState('');
   const [destinationNode, setDestinationNode] =
@@ -52,8 +53,11 @@ export const MessageBar = (): JSX.Element => {
               ...nodes
                 .filter((node) => node.num !== myNodeInfo.myNodeNum)
                 .map((node) => {
+                  const user = users.filter(
+                    (user) => user.packet.from === node.num,
+                  )[0]?.data;
                   return {
-                    name: node.user?.shortName ?? node.num,
+                    name: user ? user.shortName : node.num,
                     value: node.num,
                   };
                 }),

src/components/generic/Blur.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 type DefaultDivProps = JSX.IntrinsicElements['div'];
 

src/components/generic/Button.tsx

@@ -67,49 +67,3 @@ export const Button = ({
     </button>
   );
 };
-
-// import React from 'react';
-
-// type DefaultButtonProps = JSX.IntrinsicElements['button'];
-
-// export interface ButtonProps extends DefaultButtonProps {
-//   icon?: JSX.Element;
-//   circle?: boolean;
-//   active?: boolean;
-//   border?: boolean;
-//   confirmAction?: () => void;
-//   rightIcon?: React.ReactNode;
-//   leftIcon?: React.ReactNode;
-//   nested?: boolean;
-// }
-
-// export const Button = ({
-//   rightIcon,
-//   leftIcon,
-//   children,
-//   nested,
-//   ...props
-// }: ButtonProps): JSX.Element => {
-//   return (
-//     <button
-//       className={`select-none flex hover:bg-gray-300 dark:hover:bg-gray-500 rounded-md cursor-pointer active:scale-95 dark:text-white ${
-//         nested
-//           ? 'hover:bg-gray-300 dark:hover:bg-gray-500 dark:bg-gray-600 bg-gray-200'
-//           : 'dark:bg-gray-700 bg-gray-200'
-//       }`}
-//       {...props}
-//     >
-//       {leftIcon && (
-//         <div className="flex py-1 bg-gray-00 rounded-l-md">
-//           <div className="mx-2 my-auto">{leftIcon}</div>
-//         </div>
-//       )}
-//       <div className="flex px-4 py-2 space-x-2 leading-4">{children}</div>
-//       {rightIcon && (
-//         <div className="flex py-2 bg-gray-200 rounded-r-md">
-//           <div className="mx-2 my-auto">{rightIcon}</div>
-//         </div>
-//       )}
-//     </button>
-//   );
-// };

src/components/generic/Card.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 type DefaultDivProps = JSX.IntrinsicElements['div'];
 

src/components/generic/Cover.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 export interface CoverProps {
   content: JSX.Element;

src/components/generic/Drawer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 import { Blur } from '@components/generic/Blur';
 

src/components/generic/IconButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 type DefaulButtonProps = JSX.IntrinsicElements['button'];
 

src/components/generic/SidebarItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 type DefaultDivProps = JSX.IntrinsicElements['div'];
 

src/components/generic/StatCard.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 export interface StatCardProps {
   title: string;

src/components/generic/form/Checkbox.tsx

@@ -34,7 +34,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
                 ? 'border-red-500'
                 : props.disabled
                 ? 'border-gray-200'
-                : ' focus-within:border-primary hover:border-primary'
+                : 'focus-within:border-primary dark:focus-within:border-primary hover:border-primary dark:hover:border-primary'
             }`}
             {...props}
           />

src/components/generic/form/InputWrapper.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 export interface LabelProps {
   error?: string;
@@ -21,7 +21,7 @@ export const InputWrapper = ({
         ? 'border-red-500'
         : disabled
         ? 'border-gray-200'
-        : ' focus-within:border-primary hover:border-primary'
+        : ' focus-within:border-primary dark:focus-within:border-primary hover:border-primary dark:hover:border-primary'
     }`}
   >
     {children}

src/components/generic/form/Label.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 export interface LabelProps {
   label: string;

src/components/generic/form/Select.tsx

@@ -29,8 +29,8 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
         <InputWrapper>
           <select
             ref={ref}
-            className={`w-full bg-white dark:bg-transparent focus:outline-none focus:border-primary ${
-              small ? 'py-1 mx-1' : 'h-10 mx-2'
+            className={`w-full rounded-md bg-white dark:bg-transparent focus:outline-none focus:border-primary ${
+              small ? 'p-1' : 'h-10 px-2'
             }`}
             disabled={
               props.disabled

src/components/menu/Logo.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 export const Logo = (): JSX.Element => {
   return (

src/components/menu/MobileNav.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
 import { Drawer } from '@components/generic/Drawer';

src/components/menu/Navigation.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 import {
   FiGrid,

src/components/menu/buttons/DeviceStatusDropdown.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 import { FiWifi, FiWifiOff } from 'react-icons/fi';
 

src/components/menu/buttons/MobileNavToggle.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 import { FiMenu } from 'react-icons/fi';
 

src/components/menu/buttons/ThemeToggle.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 import { FiMoon, FiSun } from 'react-icons/fi';
 

src/components/pwa/ReloadPrompt.css

@@ -0,0 +1,29 @@
+.ReloadPrompt-container {
+  padding: 0;
+  margin: 0;
+  width: 0;
+  height: 0;
+}
+.ReloadPrompt-toast {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  margin: 16px;
+  padding: 12px;
+  border: 1px solid #8885;
+  border-radius: 4px;
+  z-index: 1;
+  text-align: left;
+  box-shadow: 3px 4px 5px 0 #8885;
+  background-color: white;
+}
+.ReloadPrompt-toast-message {
+  margin-bottom: 8px;
+}
+.ReloadPrompt-toast-button {
+  border: 1px solid #8885;
+  outline: none;
+  margin-right: 5px;
+  border-radius: 2px;
+  padding: 3px 10px;
+}

src/components/pwa/ReloadPrompt.tsx

@@ -0,0 +1,61 @@
+import './ReloadPrompt.css';
+
+// eslint-disable-next-line no-use-before-define
+import type React from 'react';
+
+import { useRegisterSW } from 'virtual:pwa-register/react';
+
+const ReloadPrompt = (): JSX.Element => {
+  const {
+    offlineReady: [offlineReady, setOfflineReady],
+    needRefresh: [needRefresh, setNeedRefresh],
+    updateServiceWorker,
+  } = useRegisterSW({
+    onRegistered(r) {
+      // eslint-disable-next-line prefer-template
+      console.log(`SW Registered:`, r);
+    },
+    onRegisterError(error) {
+      console.log('SW registration error', error);
+    },
+  });
+
+  const close = (): void => {
+    setOfflineReady(false);
+    setNeedRefresh(false);
+  };
+
+  return (
+    <div className="ReloadPrompt-container">
+      {(offlineReady || needRefresh) && (
+        <div className="ReloadPrompt-toast">
+          <div className="ReloadPrompt-message">
+            {offlineReady ? (
+              <span>App ready to work offline</span>
+            ) : (
+              <span>
+                New content available, click on reload button to update.
+              </span>
+            )}
+          </div>
+          {needRefresh && (
+            <button
+              className="ReloadPrompt-toast-button"
+              onClick={(): Promise<void> => updateServiceWorker(true)}
+            >
+              Reload
+            </button>
+          )}
+          <button
+            className="ReloadPrompt-toast-button"
+            onClick={(): void => close()}
+          >
+            Close
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ReloadPrompt;

src/components/templates/PageLayout.tsx

@@ -5,8 +5,7 @@ import { FiXCircle } from 'react-icons/fi';
 import { useBreakpoint } from '@app/hooks/breakpoint';
 import { Drawer } from '@components/generic/Drawer';
 import { IconButton } from '@components/generic/IconButton';
-import type { SidebarItemProps } from '@components/generic/SidebarItem';
-import { SidebarItem } from '@components/generic/SidebarItem';
+import { SidebarItem, SidebarItemProps } from '@components/generic/SidebarItem';
 import { Tab } from '@headlessui/react';
 
 export interface PageLayoutProps {

src/components/templates/PrimaryTemplate.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 export interface PrimaryTemplateProps {
   children: React.ReactNode;