Move components to external library

src/pages/Plugins/ExternalNotification.tsx

@@ -5,12 +5,9 @@ import { FiMenu } from 'react-icons/fi';
 
 import { FormFooter } from '@app/components/FormFooter';
 import { useAppSelector } from '@app/hooks/redux';
-import { Card } from '@components/generic/Card';
-import { Checkbox } from '@components/generic/form/Checkbox';
-import { Input } from '@components/generic/form/Input';
-import { IconButton } from '@components/generic/IconButton';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 import { connection } from '@core/connection';
+import { Card, Checkbox, IconButton, Input } from '@meshtastic/components';
 import type { RadioConfig_UserPreferences } from '@meshtastic/meshtasticjs/dist/generated';
 
 export interface ExternalNotificationProps {
@@ -58,6 +55,8 @@ export const ExternalNotification = ({
     void connection.setPreferences(data);
   });
 
+  //todo, add loading indicator
+
   const watchExternalNotificationPluginEnabled = useWatch({
     control,
     name: 'extNotificationPluginEnabled',

src/pages/Plugins/Files.tsx

@@ -4,11 +4,10 @@ import type React from 'react';
 import { FiMenu, FiTrash, FiUploadCloud } from 'react-icons/fi';
 import useSWR from 'swr';
 
-import { Card } from '@components/generic/Card';
-import { IconButton } from '@components/generic/IconButton';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 import { connectionUrl } from '@core/connection';
 import fetcher from '@core/utils/fetcher';
+import { Card, IconButton } from '@meshtastic/components';
 
 export interface RangeTestProps {
   navOpen?: boolean;

src/pages/Plugins/RangeTest.tsx

@@ -5,12 +5,9 @@ import { FiMenu } from 'react-icons/fi';
 
 import { useAppSelector } from '@app/hooks/redux';
 import { FormFooter } from '@components/FormFooter';
-import { Card } from '@components/generic/Card';
-import { Checkbox } from '@components/generic/form/Checkbox';
-import { Input } from '@components/generic/form/Input';
-import { IconButton } from '@components/generic/IconButton';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 import { connection } from '@core/connection';
+import { Card, Checkbox, IconButton, Input } from '@meshtastic/components';
 import type { RadioConfig_UserPreferences } from '@meshtastic/meshtasticjs/dist/generated';
 
 export interface RangeTestProps {
@@ -47,6 +44,8 @@ export const RangeTest = ({
     void connection.setPreferences(data);
   });
 
+  //todo, add loading indicator
+
   const watchRangeTestPluginEnabled = useWatch({
     control,
     name: 'rangeTestPluginEnabled',

src/pages/Plugins/Serial.tsx

@@ -5,12 +5,9 @@ import { FiMenu } from 'react-icons/fi';
 
 import { useAppSelector } from '@app/hooks/redux';
 import { FormFooter } from '@components/FormFooter';
-import { Card } from '@components/generic/Card';
-import { Checkbox } from '@components/generic/form/Checkbox';
-import { Input } from '@components/generic/form/Input';
-import { IconButton } from '@components/generic/IconButton';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 import { connection } from '@core/connection';
+import { Card, Checkbox, IconButton, Input } from '@meshtastic/components';
 import type { RadioConfig_UserPreferences } from '@meshtastic/meshtasticjs/dist/generated';
 
 export interface SerialProps {
@@ -49,6 +46,7 @@ export const Serial = ({ navOpen, setNavOpen }: SerialProps): JSX.Element => {
   const onSubmit = handleSubmit((data) => {
     void connection.setPreferences(data);
   });
+  //todo, add loading indicator
 
   const watchSerialPluginEnabled = useWatch({
     control,

src/pages/Plugins/StoreAndForward.tsx

@@ -5,12 +5,9 @@ import { FiMenu } from 'react-icons/fi';
 
 import { useAppSelector } from '@app/hooks/redux';
 import { FormFooter } from '@components/FormFooter';
-import { Card } from '@components/generic/Card';
-import { Checkbox } from '@components/generic/form/Checkbox';
-import { Input } from '@components/generic/form/Input';
-import { IconButton } from '@components/generic/IconButton';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 import { connection } from '@core/connection';
+import { Card, Checkbox, IconButton, Input } from '@meshtastic/components';
 import type { RadioConfig_UserPreferences } from '@meshtastic/meshtasticjs/dist/generated';
 
 export interface StoreAndForwardProps {
@@ -44,6 +41,7 @@ export const StoreAndForward = ({
   const onSubmit = handleSubmit((data) => {
     void connection.setPreferences(data);
   });
+  //todo, add loading indicator
 
   const watchStoreForwardPluginEnabled = useWatch({
     control,