Move components to external library

src/pages/Messages.tsx

@@ -4,7 +4,7 @@ import { FiHash } from 'react-icons/fi';
 
 import { Message } from '@components/chat/Message';
 import { MessageBar } from '@components/chat/MessageBar';
-import { Select } from '@components/generic/form/Select';
+import { Select } from '@meshtastic/components';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 import { useAppSelector } from '../hooks/redux';

src/pages/Nodes/Index.tsx

@@ -5,8 +5,8 @@ import { FiXCircle } from 'react-icons/fi';
 import { useBreakpoint } from '@app/hooks/breakpoint';
 import { useAppSelector } from '@app/hooks/redux';
 import { Drawer } from '@components/generic/Drawer';
-import { IconButton } from '@components/generic/IconButton';
 import { Map } from '@components/Map';
+import { IconButton } from '@meshtastic/components';
 
 import { NodeCard } from './NodeCard';
 

src/pages/Nodes/NodeCard.tsx

@@ -15,9 +15,9 @@ import {
 } from 'react-icons/md';
 import TimeAgo from 'timeago-react';
 
-import { IconButton } from '@components/generic/IconButton';
 import type { Node } from '@core/slices/meshtasticSlice';
 import { Disclosure } from '@headlessui/react';
+import { IconButton } from '@meshtastic/components';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 export interface NodeCardProps {

src/pages/NotFound.tsx

@@ -1,7 +1,7 @@
 import type React from 'react';
 
-import { Card } from '@components/generic/Card';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
+import { Card } from '@meshtastic/components';
 
 export const NotFound = (): JSX.Element => {
   return (

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,

src/pages/settings/Channels.tsx

@@ -7,15 +7,17 @@ import JSONPretty from 'react-json-pretty';
 import { useAppSelector } from '@app/hooks/redux';
 import { Channel } from '@components/Channel';
 import { FormFooter } from '@components/FormFooter';
-import { Card } from '@components/generic/Card';
 import { Cover } from '@components/generic/Cover';
-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 { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 import { connection } from '@core/connection';
+import {
+  Card,
+  Checkbox,
+  IconButton,
+  Input,
+  Select,
+} from '@meshtastic/components';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 export interface ChannelsProps {
@@ -33,16 +35,9 @@ export const Channels = ({
   const [debug, setDebug] = React.useState(false);
   const [loading, setLoading] = React.useState(false);
 
-  enum PresetName {
-    'Long Slow',
-    'Long Alt',
-    'Medium',
-    'Short Fast',
-  }
-
   const { register, handleSubmit, reset, formState, control } = useForm<{
     simple: boolean;
-    preset?: PresetName;
+    preset?: Protobuf.ChannelSettings_ModemConfig;
     enabled: boolean;
     settings: {
       name: string;
@@ -57,7 +52,6 @@ export const Channels = ({
   }>({
     defaultValues: {
       simple: true,
-      preset: PresetName['Long Slow'],
       enabled:
         channel.role ===
         (Protobuf.Channel_Role.PRIMARY || Protobuf.Channel_Role.SECONDARY)
@@ -76,42 +70,6 @@ export const Channels = ({
     },
   });
 
-  const presets = [
-    {
-      name: PresetName['Long Slow'],
-      config: {
-        bandwidth: 125,
-        codingRate: 8, // 4/8
-
-        spreadFactor: 12, // 4096chips/symbol
-      },
-    },
-    {
-      name: PresetName['Long Alt'],
-      config: {
-        bandwidth: 31.25,
-        codingRate: 8, // 4/8
-        spreadFactor: 9, // 512chips/symbol,
-      },
-    },
-    {
-      name: PresetName['Medium'],
-      config: {
-        bandwidth: 125,
-        codingRate: 5, // 4/5
-        spreadFactor: 7, // 128chips/symbol,
-      },
-    },
-    {
-      name: PresetName['Short Fast'],
-      config: {
-        bandwidth: 500,
-        codingRate: 5, // 4/5
-        spreadFactor: 7, // 128chips/symbol,
-      },
-    },
-  ];
-
   const watchSimple = useWatch({
     control,
     name: 'simple',
@@ -120,10 +78,6 @@ export const Channels = ({
 
   const onSubmit = handleSubmit(async (data) => {
     setLoading(true);
-    console.log(data);
-    const selectedPreset = data.simple
-      ? presets.find((preset) => preset.name === data.preset)?.config
-      : undefined;
 
     const adminChannel = Protobuf.Channel.create({
       role: data.enabled
@@ -132,7 +86,6 @@ export const Channels = ({
       index: channel.index,
       settings: {
         ...data.settings,
-        ...selectedPreset,
         psk: new TextEncoder().encode(data.settings.psk),
       },
     });
@@ -180,17 +133,14 @@ export const Channels = ({
             {loading && <Loading />}
             <div className="w-full max-w-3xl p-10 md:max-w-xl">
               {/* TODO: get gap working */}
-              <Checkbox
-                label="Use Presets"
-                {...register('simple')}
-                // checked={simpleChannelSettings}
-                // onChange={(e): void =>
-                //   setSimpleChannelSettings(e.target.checked)
-                // }
-              />
+              <Checkbox label="Use Presets" {...register('simple')} />
               <form onSubmit={onSubmit}>
                 {watchSimple ? (
-                  <Select label="Preset" optionsEnum={PresetName} />
+                  <Select
+                    label="Preset"
+                    optionsEnum={Protobuf.ChannelSettings_ModemConfig}
+                    {...register('simple')}
+                  />
                 ) : (
                   <>
                     <Input

src/pages/settings/Index.tsx

@@ -1,4 +1,4 @@
-import type React from 'react';
+import React from 'react';
 
 import {
   FiLayers,
@@ -10,6 +10,7 @@ import {
   FiZap,
 } from 'react-icons/fi';
 
+import type { SidebarItemProps } from '@app/components/generic/SidebarItem.js';
 import { PageLayout } from '@components/templates/PageLayout';
 
 import { Channels } from './Channels';
@@ -21,17 +22,20 @@ import { User } from './User';
 import { WiFi } from './WiFi';
 
 export const Settings = (): JSX.Element => {
-  const sidebarItems = [
-    {
-      title: 'WiFi',
-      description: 'WiFi credentials and mode',
-      icon: <FiWifi className="flex-shrink-0 w-6 h-6" />,
-    },
-    {
-      title: 'Position',
-      description: 'Position settings and flags',
-      icon: <FiMapPin className="flex-shrink-0 w-6 h-6" />,
-    },
+  // const { hasGps, hasWifi } = useAppSelector((state) => state.meshtastic.radio.hardware);
+
+  const hasGps = true;
+  const hasWifi = true;
+
+  const panels: JSX.Element[] = [
+    <User key={4} />,
+    <Power key={5} />,
+    <Radio key={6} />,
+    <Channels key={8} />,
+    <Interface key={7} />,
+  ];
+
+  const sidebarItems: SidebarItemProps[] = [
     {
       title: 'User',
       description: 'Device name and details',
@@ -58,19 +62,29 @@ export const Settings = (): JSX.Element => {
       icon: <FiLayout className="flex-shrink-0 w-6 h-6" />,
     },
   ];
+
+  React.useEffect(() => {
+    if (hasGps) {
+      panels.unshift(<Position key={3} />);
+      sidebarItems.unshift({
+        title: 'Position',
+        description: 'Position settings and flags',
+        icon: <FiMapPin className="flex-shrink-0 w-6 h-6" />,
+      });
+    }
+    if (hasWifi) {
+      panels.unshift(<WiFi key={2} />);
+      sidebarItems.unshift({
+        title: 'WiFi',
+        description: 'WiFi credentials and mode',
+        icon: <FiWifi className="flex-shrink-0 w-6 h-6" />,
+      });
+    }
+
+    console.log(panels);
+  }, [hasGps, hasWifi]);
+
   return (
-    <PageLayout
-      title="Settings"
-      sidebarItems={sidebarItems}
-      panels={[
-        <WiFi key={2} />,
-        <Position key={3} />,
-        <User key={4} />,
-        <Power key={5} />,
-        <Radio key={6} />,
-        <Channels key={8} />,
-        <Interface key={7} />,
-      ]}
-    />
+    <PageLayout title="Settings" sidebarItems={sidebarItems} panels={panels} />
   );
 };

src/pages/settings/Interface.tsx

@@ -3,11 +3,9 @@ import type React from 'react';
 import { useTranslation } from 'react-i18next';
 import { FiMenu, FiSave } from 'react-icons/fi';
 
-import { Button } from '@components/generic/Button';
-import { Card } from '@components/generic/Card';
-import { Select } from '@components/generic/form/Select';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 import i18n from '@core/translation';
+import { Button, Card, Select } from '@meshtastic/components';
 
 export interface InterfaceProps {
   navOpen?: boolean;

src/pages/settings/Position.tsx

@@ -1,21 +1,23 @@
 import React from 'react';
 
-import { Controller, useForm, useWatch } from 'react-hook-form';
+import { Controller, useForm } from 'react-hook-form';
 import { FiCode, FiMenu } from 'react-icons/fi';
 import JSONPretty from 'react-json-pretty';
-import ReactSelect from 'react-select';
+import ReactSelect, { Theme } from 'react-select';
 
 import { useAppSelector } from '@app/hooks/redux';
 import { FormFooter } from '@components/FormFooter';
-import { Card } from '@components/generic/Card';
 import { Cover } from '@components/generic/Cover';
-import { Checkbox } from '@components/generic/form/Checkbox';
-import { Input } from '@components/generic/form/Input';
 import { Label } from '@components/generic/form/Label';
-import { Select } from '@components/generic/form/Select';
-import { IconButton } from '@components/generic/IconButton';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 import { connection } from '@core/connection';
+import {
+  Card,
+  Checkbox,
+  IconButton,
+  Input,
+  Select,
+} from '@meshtastic/components';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 export interface PositionProps {
@@ -30,6 +32,7 @@ export const Position = ({
   const preferences = useAppSelector(
     (state) => state.meshtastic.radio.preferences,
   );
+  const darkMode = useAppSelector((state) => state.app.darkMode);
   const [debug, setDebug] = React.useState(false);
   const [loading, setLoading] = React.useState(false);
   const { register, handleSubmit, formState, reset, control } =
@@ -45,11 +48,11 @@ export const Position = ({
       },
     });
 
-  const watchPsk = useWatch({
-    control,
-    name: 'positionFlags',
-    defaultValue: 0,
-  });
+  // const watchPsk = useWatch({
+  //   control,
+  //   name: 'positionFlags',
+  //   defaultValue: 0,
+  // });
 
   React.useEffect(() => {
     reset(preferences);
@@ -128,6 +131,34 @@ export const Position = ({
                     <ReactSelect
                       {...rest}
                       isMulti
+                      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={decode(value).map((flag) => {
                         return {
                           value: flag,

src/pages/settings/Power.tsx

@@ -6,13 +6,10 @@ import JSONPretty from 'react-json-pretty';
 
 import { useAppSelector } from '@app/hooks/redux';
 import { FormFooter } from '@components/FormFooter';
-import { Card } from '@components/generic/Card';
 import { Cover } from '@components/generic/Cover';
-import { Checkbox } from '@components/generic/form/Checkbox';
-import { Select } from '@components/generic/form/Select';
-import { IconButton } from '@components/generic/IconButton';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 import { connection } from '@core/connection';
+import { Card, Checkbox, IconButton, Select } from '@meshtastic/components';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 export interface PowerProps {

src/pages/settings/Radio.tsx

@@ -6,13 +6,10 @@ import JSONPretty from 'react-json-pretty';
 
 import { useAppSelector } from '@app/hooks/redux';
 import { FormFooter } from '@components/FormFooter';
-import { Card } from '@components/generic/Card';
 import { Cover } from '@components/generic/Cover';
-import { Checkbox } from '@components/generic/form/Checkbox';
-import { Select } from '@components/generic/form/Select';
-import { IconButton } from '@components/generic/IconButton';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 import { connection } from '@core/connection';
+import { Card, Checkbox, IconButton, Select } from '@meshtastic/components';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 export interface RadioProps {

src/pages/settings/User.tsx

@@ -7,14 +7,16 @@ import { base16 } from 'rfc4648';
 
 import { useAppSelector } from '@app/hooks/redux';
 import { FormFooter } from '@components/FormFooter';
-import { Card } from '@components/generic/Card';
 import { Cover } from '@components/generic/Cover';
-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 { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 import { connection } from '@core/connection';
+import {
+  Card,
+  Checkbox,
+  IconButton,
+  Input,
+  Select,
+} from '@meshtastic/components';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 export interface UserProps {

src/pages/settings/WiFi.tsx

@@ -7,13 +7,10 @@ import JSONPretty from 'react-json-pretty';
 
 import { useAppSelector } from '@app/hooks/redux';
 import { FormFooter } from '@components/FormFooter';
-import { Card } from '@components/generic/Card';
 import { Cover } from '@components/generic/Cover';
-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 { Protobuf } from '@meshtastic/meshtasticjs';
 
 export interface WiFiProps {