Move components to external library

src/components/Channel.tsx

@@ -7,14 +7,16 @@ import { FiEdit3, FiSave } from 'react-icons/fi';
 import { MdRefresh, MdVisibility, MdVisibilityOff } from 'react-icons/md';
 import QRCode from 'react-qr-code';
 
-import { Card } from '@components/generic/Card';
-import { Checkbox } from '@components/generic/form/Checkbox';
-import { Input } from '@components/generic/form/Input';
-import { Select } from '@components/generic/form/Select';
-import { IconButton } from '@components/generic/IconButton';
 import { Loading } from '@components/generic/Loading';
 import { Modal } from '@components/generic/Modal';
 import { connection } from '@core/connection';
+import {
+  Card,
+  Checkbox,
+  IconButton,
+  Input,
+  Select,
+} from '@meshtastic/components';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 export interface ChannelProps {

src/components/Connection.tsx

@@ -4,9 +4,6 @@ import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
 import { BLE } from '@components/connection/BLE';
 import { HTTP } from '@components/connection/HTTP';
 import { Serial } from '@components/connection/Serial';
-import { Button } from '@components/generic/Button';
-import { Card } from '@components/generic/Card';
-import { Select } from '@components/generic/form/Select';
 import { Modal } from '@components/generic/Modal';
 import { connection, connectionUrl, setConnection } from '@core/connection';
 import {
@@ -15,6 +12,7 @@ import {
   setConnectionParams,
   setConnType,
 } from '@core/slices/appSlice';
+import { Button, Card, Select } from '@meshtastic/components';
 import { Types } from '@meshtastic/meshtasticjs';
 
 export const Connection = (): JSX.Element => {

src/components/ErrorFallback.tsx

@@ -0,0 +1,16 @@
+import type React from 'react';
+
+import type { FallbackProps } from 'react-error-boundary';
+
+export const ErrorFallback = ({
+  error,
+  resetErrorBoundary,
+}: FallbackProps): JSX.Element => {
+  return (
+    <div role="alert">
+      <p>Something went wrong:</p>
+      <pre>{error.message}</pre>
+      <button onClick={resetErrorBoundary}>Try again</button>
+    </div>
+  );
+};

src/components/FormFooter.tsx

@@ -2,7 +2,7 @@ import type React from 'react';
 
 import { FiSave, FiXCircle } from 'react-icons/fi';
 
-import { IconButton } from './generic/IconButton';
+import { IconButton } from '@meshtastic/components';
 
 export interface FormFooterProps {
   dirty?: boolean;

src/components/Map/index.tsx

@@ -8,7 +8,7 @@ import { FaDirections, FaGlobeAfrica, FaMountain } from 'react-icons/fa';
 import { MdFullscreen, MdRadar, MdWbShade } from 'react-icons/md';
 
 import { useAppSelector } from '@app/hooks/redux';
-import { IconButton } from '@components/generic/IconButton';
+import { IconButton } from '@meshtastic/components';
 
 import { MapStyles } from './styles';
 

src/components/chat/MessageBar.tsx

@@ -4,12 +4,9 @@ import { useTranslation } from 'react-i18next';
 import { FiSend } from 'react-icons/fi';
 
 import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
-import { Input } from '@components/generic/form/Input';
 import { connection } from '@core/connection';
 import { ackMessage } from '@core/slices/meshtasticSlice';
-
-import { Select } from '../generic/form/Select';
-import { IconButton } from '../generic/IconButton';
+import { IconButton, Input, Select } from '@meshtastic/components';
 
 export interface MessageBarProps {
   channelIndex: number;

src/components/connection/BLE.tsx

@@ -4,9 +4,8 @@ import { useForm } from 'react-hook-form';
 import { FiCheck } from 'react-icons/fi';
 
 import { connType } from '@app/core/slices/appSlice';
-import { Button } from '@components/generic/Button';
-import { IconButton } from '@components/generic/IconButton';
 import { ble, setConnection } from '@core/connection';
+import { Button, IconButton } from '@meshtastic/components';
 
 export const BLE = (): JSX.Element => {
   const [bleDevices, setBleDevices] = React.useState<BluetoothDevice[]>([]);

src/components/connection/HTTP.tsx

@@ -3,12 +3,9 @@ import type React from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 
 import { useAppDispatch } from '@app/hooks/redux.js';
-import { Button } from '@components/generic/Button';
-import { Checkbox } from '@components/generic/form/Checkbox';
-import { Input } from '@components/generic/form/Input';
-import { Select } from '@components/generic/form/Select';
 import { connectionUrl, setConnection } from '@core/connection';
 import { connType, setConnectionParams } from '@core/slices/appSlice';
+import { Button, Checkbox, Input, Select } from '@meshtastic/components';
 
 export const HTTP = (): JSX.Element => {
   const dispatch = useAppDispatch();

src/components/connection/Serial.tsx

@@ -4,10 +4,9 @@ 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, setConnectionParams } from '@core/slices/appSlice';
+import { Button, IconButton } from '@meshtastic/components';
 
 export const Serial = (): JSX.Element => {
   const [serialDevices, setSerialDevices] = React.useState<SerialPort[]>([]);
@@ -32,35 +31,41 @@ export const Serial = (): JSX.Element => {
 
   return (
     <form onSubmit={onSubmit} className="space-y-2">
-      {serialDevices.map((device, index) => (
-        <div
-          className="flex justify-between p-2 bg-gray-700 rounded-md"
-          key={index}
-        >
-          <div className="flex gap-4 my-auto">
-            <p>
-              Vendor: <small>{device.getInfo().usbVendorId}</small>
-            </p>
-            <p>
-              Device: <small>{device.getInfo().usbProductId}</small>
-            </p>
+      {serialDevices.length > 0 ? (
+        serialDevices.map((device, index) => (
+          <div
+            className="flex justify-between p-2 bg-gray-700 rounded-md"
+            key={index}
+          >
+            <div className="flex gap-4 my-auto">
+              <p>
+                Vendor: <small>{device.getInfo().usbVendorId}</small>
+              </p>
+              <p>
+                Device: <small>{device.getInfo().usbProductId}</small>
+              </p>
+            </div>
+            <IconButton
+              onClick={async (): Promise<void> => {
+                dispatch(
+                  setConnectionParams({
+                    type: connType.SERIAL,
+                    params: {
+                      port: device,
+                    },
+                  }),
+                );
+                await setConnection(connType.SERIAL);
+              }}
+              icon={<FiCheck />}
+            />
           </div>
-          <IconButton
-            onClick={async (): Promise<void> => {
-              dispatch(
-                setConnectionParams({
-                  type: connType.SERIAL,
-                  params: {
-                    port: device,
-                  },
-                }),
-              );
-              await setConnection(connType.SERIAL);
-            }}
-            icon={<FiCheck />}
-          />
+        ))
+      ) : (
+        <div className="h-40 border rounded-md">
+          <p>No previously connected devices found</p>
         </div>
-      ))}
+      )}
       <Button type="submit" className="mt-2 ml-auto" border>
         Connect
       </Button>

src/components/generic/Button.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-
-import { FiCheck } from 'react-icons/fi';
-
-type DefaultButtonProps = JSX.IntrinsicElements['button'];
-
-interface ButtonProps extends DefaultButtonProps {
-  icon?: JSX.Element;
-  active?: boolean;
-  border?: boolean;
-  padding?: string;
-  confirmAction?: () => void;
-}
-
-export const Button = ({
-  icon,
-  className,
-  active,
-  border,
-  confirmAction,
-  disabled,
-  children,
-  padding = '2',
-  ...props
-}: ButtonProps): JSX.Element => {
-  const [hasConfirmed, setHasConfirmed] = React.useState(false);
-
-  const handleConfirm = (): void => {
-    if (typeof confirmAction == 'function') {
-      if (hasConfirmed) {
-        void confirmAction();
-      }
-      setHasConfirmed(true);
-      setTimeout(() => {
-        setHasConfirmed(false);
-      }, 3000);
-    }
-  };
-
-  return (
-    <button
-      onClick={handleConfirm}
-      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' : ''
-      } ${
-        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}`}
-      {...props}
-    >
-      {icon && (
-        <div className="text-gray-500 dark:text-gray-400">
-          {hasConfirmed ? <FiCheck /> : icon}
-        </div>
-      )}
-
-      <span>{children}</span>
-    </button>
-  );
-};

src/components/generic/Card.tsx

@@ -1,57 +0,0 @@
-import type React from 'react';
-
-import { Loading } from '@components/generic/Loading';
-
-type DefaultDivProps = JSX.IntrinsicElements['div'];
-
-interface CardProps extends DefaultDivProps {
-  title?: string;
-  description?: string | JSX.Element;
-  buttons?: JSX.Element;
-  lgPlaceholder?: JSX.Element;
-  loading?: boolean;
-}
-
-export const Card = ({
-  title,
-  description,
-  buttons,
-  children,
-  className,
-  lgPlaceholder,
-  loading,
-  ...props
-}: CardProps): JSX.Element => {
-  return (
-    <div
-      className={`relative flex flex-col flex-auto dark:text-white border-y md:border shadow-md select-none bg-white dark:bg-primaryDark border-gray-300 dark:border-gray-600 md:rounded-md  ${className}`}
-      {...props}
-    >
-      {loading && <Loading />}
-      {(title || description) && (
-        <div className="flex items-center justify-between mx-10 mt-10">
-          <div className="flex flex-col">
-            {title && (
-              <div className="mr-4 text-2xl font-semibold leading-7 tracking-tight text-black md:text-3xl dark:text-white">
-                {title}
-              </div>
-            )}
-
-            {description && (
-              <div className="font-medium text-gray-400">{description}</div>
-            )}
-          </div>
-          {buttons}
-        </div>
-      )}
-      <div className="flex">
-        <div className={`${lgPlaceholder ? 'w-full xl:w-2/3' : 'w-full'}`}>
-          {children}
-        </div>
-        {lgPlaceholder && (
-          <div className="hidden w-1/3 xl:flex">{lgPlaceholder}</div>
-        )}
-      </div>
-    </div>
-  );
-};

src/components/generic/IconButton.tsx

@@ -1,35 +0,0 @@
-import type React from 'react';
-
-type DefaulButtonProps = JSX.IntrinsicElements['button'];
-
-export interface IconButtonProps extends DefaulButtonProps {
-  icon: React.ReactNode;
-  active?: boolean;
-}
-
-export const IconButton = ({
-  icon,
-  active,
-  disabled,
-  ...props
-}: IconButtonProps): JSX.Element => {
-  return (
-    <div className="my-auto text-gray-500 dark:text-gray-400">
-      <button
-        type="button"
-        disabled={disabled}
-        className={`p-2 transition duration-200 ease-in-out rounded-md active:scale-95 ${
-          active
-            ? 'bg-gray-200 dark:bg-gray-600'
-            : 'hover:bg-gray-200 dark:hover:bg-gray-600'
-        } ${
-          disabled ? 'text-gray-400 dark:text-gray-700 cursor-not-allowed' : ''
-        }`}
-        {...props}
-      >
-        {icon}
-        <span className="sr-only">Refresh</span>
-      </button>
-    </div>
-  );
-};

src/components/generic/form/BitwiseSelect.tsx

@@ -0,0 +1,89 @@
+import type React from 'react';
+
+import type { Noop, RefCallBack } from 'react-hook-form';
+import type { Theme } from 'react-select';
+import ReactSelect from 'react-select';
+
+import { bitwiseDecode, bitwiseEncode } from '@app/core/utils/bitwise';
+import { useAppSelector } from '@app/hooks/redux.js';
+
+import { Label } from './Label';
+
+export interface BiwiseSelectProps {
+  label: string;
+  error?: string;
+  value: number;
+  optionsEnum: { [s: string]: string | number };
+  onChange: (...event: unknown[]) => void;
+  onBlur: Noop;
+  name: string;
+  ref: RefCallBack;
+}
+
+export const BitwiseSelect = ({
+  label,
+  error,
+  value,
+  optionsEnum,
+  onChange,
+  ref,
+}: BiwiseSelectProps): JSX.Element => {
+  const darkMode = useAppSelector((state) => state.app.darkMode);
+
+  return (
+    <div className="w-full">
+      {label && <Label label={label} error={error} />}
+      <ReactSelect
+        ref={ref}
+        isMulti
+        // styles={{
+        //   control: (provided, state) => ({
+        //     ...provided,
+        //     // color: state.isFocused ? 'blue' : 'red',
+        //     // borderColor: state.isFocused ? 'blue' : 'red',
+        //   }),
+        // }}
+        theme={(theme): Theme => ({
+          ...theme,
+          borderRadius: 7,
+          colors: {
+            ...theme.colors,
+            primary: '#67ea94', //focus border color
+            // primary75: 'red',
+            // primary50: 'red',
+            // primary25: 'red',
+            // danger: 'red',
+            // dangerLight: 'red',
+            neutral0: darkMode ? 'rgb(30 41 59)' : 'white', //bg color
+            // neutral5: 'red',
+            neutral10: darkMode ? 'rgb(75 85 99)' : 'rgb(229 231 235)', //tag bg color
+            neutral20: darkMode ? 'rgb(229 231 235)' : 'rgb(156 163 175)', //border color
+            neutral30: '#67ea94', //border hover
+            // neutral40: 'red',
+            // neutral50: 'red',
+            // neutral60: 'red',
+            // neutral70: 'red',
+            neutral80: darkMode ? 'white' : 'black', //tag text color
+            // neutral90: 'red',
+          },
+        })}
+        value={bitwiseDecode(value, optionsEnum).map((flag) => {
+          return {
+            value: flag,
+            label: (optionsEnum[flag] as string).replace('POS_', ''),
+          };
+        })}
+        options={Object.entries(optionsEnum)
+          .filter((value) => typeof value[1] !== 'number')
+          .filter((value) => parseInt(value[0]) !== optionsEnum.POS_UNDEFINED)
+          .map((value) => {
+            return {
+              value: parseInt(value[0]),
+              label: value[1].toString().replace('POS_', ''),
+            };
+          })}
+        onChange={(e): void => onChange(bitwiseEncode(e.map((v) => v.value)))}
+      />
+    </div>
+  );
+};

src/components/generic/form/Checkbox.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-
-import { Label } from './Label';
-
-type DefaultInputProps = JSX.IntrinsicElements['input'];
-
-interface CheckboxProps extends DefaultInputProps {
-  action?: (enabled: boolean) => void;
-  label: string;
-  valid?: boolean;
-  validationMessage?: string;
-  error?: boolean;
-}
-
-export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
-  function Input(
-    { label, valid, validationMessage, id, error, ...props }: CheckboxProps,
-    ref,
-  ) {
-    return (
-      <div className="flex flex-col w-full">
-        <Label label={label} />
-        <div className="ml-auto">
-          <input
-            ref={ref}
-            type="checkbox"
-            id={id}
-            className={`appearance-none w-8 h-8 border rounded-md focus:outline-none focus-within:shadow-border checked:bg-primary checked:border-transparent transition duration-200 ease-in-out border-gray-400 dark:border-gray-200 ${
-              props.disabled
-                ? 'bg-gray-200 text-gray-500 dark:bg-gray-800 dark:text-gray-400 border-gray-400 dark:border-gray-700'
-                : ''
-            } ${
-              error
-                ? 'border-red-500'
-                : props.disabled
-                ? 'border-gray-200'
-                : 'focus-within:border-primary dark:focus-within:border-primary hover:border-primary dark:hover:border-primary'
-            }`}
-            {...props}
-          />
-        </div>
-        {!valid && (
-          <div className="text-sm text-gray-600">{validationMessage}</div>
-        )}
-      </div>
-    );
-  },
-);

src/components/generic/form/Input.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-
-import { InputWrapper } from './InputWrapper';
-import { Label } from './Label';
-
-type DefaultInputProps = JSX.IntrinsicElements['input'];
-
-interface InputProps extends DefaultInputProps {
-  label?: string;
-  error?: string;
-  action?: JSX.Element;
-  prefix?: string;
-  suffix?: string;
-}
-
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  function Input({ label, error, action, suffix, ...props }: InputProps, ref) {
-    return (
-      <div className="w-full">
-        {label && <Label label={label} error={error} />}
-        <InputWrapper error={error} disabled={props.disabled}>
-          <input
-            ref={ref}
-            className="w-full h-10 px-3 py-2 bg-transparent focus:outline-none"
-            {...props}
-          />
-          {suffix && (
-            <span className="my-auto mr-3 text-sm font-medium text-gray-500 dark:text-gray-400">
-              {suffix}
-            </span>
-          )}
-          {action && <div className="flex mr-1">{action}</div>}
-        </InputWrapper>
-      </div>
-    );
-  },
-);

src/components/generic/form/InputWrapper.tsx

@@ -1,29 +0,0 @@
-import type React from 'react';
-
-export interface LabelProps {
-  error?: string;
-  disabled?: boolean;
-  children: React.ReactNode;
-}
-
-export const InputWrapper = ({
-  error,
-  disabled,
-  children,
-}: LabelProps): JSX.Element => (
-  <div
-    className={`flex w-full border-gray-400 dark:border-gray-200 border-y border rounded-md transition duration-200 ease-in-out ${
-      disabled
-        ? 'bg-gray-200 text-gray-500 dark:bg-gray-800 dark:text-gray-400 border-gray-400 dark:border-gray-700'
-        : ''
-    } ${
-      error
-        ? 'border-red-500'
-        : disabled
-        ? 'border-gray-200'
-        : ' focus-within:border-primary dark:focus-within:border-primary hover:border-primary dark:hover:border-primary focus-within:shadow-border'
-    }`}
-  >
-    {children}
-  </div>
-);

src/components/generic/form/Select.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-
-import { InputWrapper } from './InputWrapper';
-import { Label } from './Label';
-
-type DefaultSelectProps = JSX.IntrinsicElements['select'];
-
-interface SelectProps extends DefaultSelectProps {
-  options?: {
-    name: string | number;
-    value: string | number;
-  }[];
-  optionsEnum?: { [s: string]: string | number };
-  label?: string;
-  error?: string;
-  small?: boolean;
-}
-
-export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
-  ({ options, optionsEnum, label, error, small, ...props }, ref) => {
-    const optionsEnumValues = optionsEnum
-      ? Object.entries(optionsEnum).filter(
-          (value) => typeof value[1] === 'number',
-        )
-      : [];
-    return (
-      <div>
-        {label && <Label label={label} error={error} />}
-        <InputWrapper>
-          <select
-            ref={ref}
-            className={`w-full rounded-md bg-transparent focus:outline-none focus:border-primary ${
-              small ? 'm-1' : 'h-10 mx-2'
-            }`}
-            disabled={
-              props.disabled
-                ? true
-                : !(optionsEnumValues.length || options?.length)
-            }
-            {...props}
-          >
-            {!(optionsEnumValues.length || options?.length) && (
-              <option className="dark:bg-gray-700">Loading</option>
-            )}
-            {optionsEnumValues.length &&
-              optionsEnumValues.map(([name, value]) => (
-                <option className="dark:bg-gray-700" key={value} value={value}>
-                  {name}
-                </option>
-              ))}
-            {options &&
-              options.map((option) => (
-                <option
-                  className="dark:bg-gray-700"
-                  key={option.value}
-                  value={option.value}
-                >
-                  {option.name}
-                </option>
-              ))}
-          </select>
-        </InputWrapper>
-      </div>
-    );
-  },
-);

src/components/menu/Navigation.tsx

@@ -2,8 +2,8 @@ import type React from 'react';
 
 import { FiGrid, FiMessageSquare, FiPackage, FiSettings } from 'react-icons/fi';
 
-import { Button } from '@components/generic/Button';
 import { routes, useRoute } from '@core/router';
+import { Button } from '@meshtastic/components';
 
 type DefaultDivProps = JSX.IntrinsicElements['div'];
 

src/components/menu/buttons/DeviceStatus.tsx

@@ -3,8 +3,8 @@ import type React from 'react';
 import { FiBluetooth, FiCpu, FiWifi } from 'react-icons/fi';
 
 import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
-import { Button } from '@components/generic/Button';
 import { connType, openConnectionModal } from '@core/slices/appSlice';
+import { Button } from '@meshtastic/components';
 import { Types } from '@meshtastic/meshtasticjs';
 
 export const DeviceStatus = (): JSX.Element => {
@@ -14,7 +14,6 @@ export const DeviceStatus = (): JSX.Element => {
 
   return (
     <Button
-      padding="0"
       active
       onClick={(): void => {
         dispatch(dispatch(openConnectionModal()));
@@ -43,15 +42,13 @@ export const DeviceStatus = (): JSX.Element => {
             (node) => node.number === state.radio.hardware.myNodeNum,
           )?.user?.longName ?? 'Disconnected'}
         </div>
-        <div className="py-2">
-          {appState.connType === connType.BLE ? (
-            <FiBluetooth className="w-5 h-5" />
-          ) : appState.connType === connType.SERIAL ? (
-            <FiCpu className="w-5 h-5" />
-          ) : (
-            <FiWifi className="w-5 h-5" />
-          )}
-        </div>
+        {appState.connType === connType.BLE ? (
+          <FiBluetooth className="w-5 h-5" />
+        ) : appState.connType === connType.SERIAL ? (
+          <FiCpu className="w-5 h-5" />
+        ) : (
+          <FiWifi className="w-5 h-5" />
+        )}
       </div>
     </Button>
   );

src/components/menu/buttons/MobileNavToggle.tsx

@@ -2,8 +2,8 @@ import type React from 'react';
 
 import { FiMenu } from 'react-icons/fi';
 
-import { IconButton } from '@components/generic/IconButton';
 import { openMobileNav } from '@core/slices/appSlice';
+import { IconButton } from '@meshtastic/components';
 
 import { useAppDispatch } from '../../../hooks/redux';
 

src/components/menu/buttons/Notifications.tsx

@@ -3,10 +3,9 @@ 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';
+import { Button, IconButton } from '@meshtastic/components';
 
 export const Notifications = (): JSX.Element => {
   const [unreadCount, setUnreadCount] = React.useState(0);
@@ -62,11 +61,7 @@ export const Notifications = (): JSX.Element => {
               <div className="flex space-x-1">
                 {notification.action ? (
                   <div className="my-auto w-18">
-                    <Button
-                      border
-                      padding="0.5"
-                      onClick={notification.action.action}
-                    >
+                    <Button border onClick={notification.action.action}>
                       {notification.action.message}
                     </Button>
                   </div>

src/components/menu/buttons/ThemeToggle.tsx

@@ -3,8 +3,8 @@ import type React from 'react';
 import { FiMoon, FiSun } from 'react-icons/fi';
 
 import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
-import { IconButton } from '@components/generic/IconButton';
 import { setDarkModeEnabled } from '@core/slices/appSlice';
+import { IconButton } from '@meshtastic/components';
 
 export const ThemeToggle = (): JSX.Element => {
   const dispatch = useAppDispatch();

src/components/templates/PageLayout.tsx

@@ -4,10 +4,10 @@ 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 { Tab } from '@headlessui/react';
+import { IconButton } from '@meshtastic/components';
 
 export interface PageLayoutProps {
   title: string;