Switch to Vite and prune dependencies

src/components/Channel.tsx

@@ -5,10 +5,10 @@ import { FiEdit3, FiSave } from 'react-icons/fi';
 
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
-import { connection } from '../core/connection.js';
-import { Input } from './generic/form/Input.jsx';
-import { Select } from './generic/form/Select.jsx';
-import { IconButton } from './generic/IconButton.jsx';
+import { connection } from '../core/connection';
+import { Input } from './generic/form/Input';
+import { Select } from './generic/form/Select';
+import { IconButton } from './generic/IconButton';
 
 export interface ChannelProps {
   channel: Protobuf.Channel;
@@ -39,7 +39,6 @@ export const Channel = ({ channel }: ChannelProps): JSX.Element => {
     role: Protobuf.Channel_Role;
     settings: {
       name: string;
-      modemConfig: Protobuf.ChannelSettings_ModemConfig;
       bandwidth?: number;
       codingRate?: number;
       spreadFactor?: number;
@@ -99,19 +98,19 @@ export const Channel = ({ channel }: ChannelProps): JSX.Element => {
               <Input
                 label="Bandwidth"
                 type="number"
-                {...register('settings.bandwidth')}
+                {...register('settings.bandwidth', { valueAsNumber: true })}
               />
               <Input
                 label="Spread Factor"
                 type="number"
                 min={7}
                 max={12}
-                {...register('settings.spreadFactor')}
+                {...register('settings.spreadFactor', { valueAsNumber: true })}
               />
               <Input
                 label="Coding Rate"
                 type="number"
-                {...register('settings.codingRate')}
+                {...register('settings.codingRate', { valueAsNumber: true })}
               />
             </form>
           </div>

src/components/chat/MessageBar.tsx

@@ -3,13 +3,13 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { FiSend } from 'react-icons/fi';
 
-import { ackMessage } from '@app/core/slices/meshtasticSlice.js';
+import { ackMessage } from '@app/core/slices/meshtasticSlice';
 import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
 import { Input } from '@components/generic/form/Input';
 import { connection } from '@core/connection';
 
-import { Select } from '../generic/form/Select.jsx';
-import { IconButton } from '../generic/IconButton.jsx';
+import { Select } from '../generic/form/Select';
+import { IconButton } from '../generic/IconButton';
 
 export const MessageBar = (): JSX.Element => {
   const dispatch = useAppDispatch();

src/components/generic/Chart.tsx

@@ -1,155 +0,0 @@
-import React from 'react';
-
-import ApexChart from 'react-apexcharts';
-
-import { Button } from './Button';
-import { Card } from './Card';
-
-type DefaultDivProps = JSX.IntrinsicElements['div'];
-
-interface ISeries {
-  name: string;
-  data: {
-    x: string | Date;
-    y: number;
-  }[];
-}
-
-interface ChartProps extends DefaultDivProps {
-  title: string;
-  description: string;
-  hasMultipleSeries: boolean;
-  series: ISeries[];
-}
-
-export const Chart = ({
-  title,
-  description,
-  hasMultipleSeries,
-  series,
-  ...props
-}: ChartProps): JSX.Element => {
-  const [activeSeries, setActiveSeries] = React.useState<ISeries>(series[0]);
-  return (
-    <div className="dark" {...props}>
-      <Card
-        title={title}
-        description={description}
-        buttons={
-          hasMultipleSeries ? (
-            <div className="flex space-x-2">
-              {series.map((data, index) => (
-                <Button
-                  active={data.name === activeSeries.name}
-                  key={index}
-                  className="font-medium"
-                  onClick={(): void => {
-                    setActiveSeries(series[index]);
-                  }}
-                >
-                  {data.name}
-                </Button>
-              ))}
-            </div>
-          ) : undefined
-        }
-      >
-        <div className="h-80">
-          <ApexChart
-            height="96%"
-            type="area"
-            options={{
-              chart: {
-                animations: {
-                  speed: 400,
-                  animateGradually: {
-                    enabled: false,
-                  },
-                },
-                toolbar: {
-                  show: false,
-                },
-                zoom: {
-                  enabled: false,
-                },
-              },
-              colors: ['#818CF8'],
-              dataLabels: {
-                enabled: false,
-              },
-              fill: {
-                colors: ['#312E81'],
-              },
-              grid: {
-                padding: {
-                  top: 10,
-                  left: 0,
-                  right: 0,
-                },
-
-                xaxis: {
-                  lines: {
-                    show: false,
-                  },
-                },
-                yaxis: {
-                  lines: {
-                    show: false,
-                  },
-                },
-              },
-
-              stroke: {
-                width: 2,
-              },
-              tooltip: {
-                followCursor: true,
-                theme: 'dark',
-                x: {
-                  format: 'MMM dd, yyyy',
-                },
-                y: {
-                  formatter: (value: number): string => `${value}`,
-                },
-              },
-              xaxis: {
-                axisBorder: {
-                  show: false,
-                },
-                axisTicks: {
-                  show: false,
-                },
-                crosshairs: {
-                  stroke: {
-                    color: '#475569',
-                    dashArray: 0,
-                    width: 2,
-                  },
-                },
-                labels: {
-                  style: {
-                    colors: '#CBD5E1',
-                  },
-                },
-                tooltip: {
-                  enabled: false,
-                },
-                type: 'datetime',
-              },
-              yaxis: {
-                axisTicks: {
-                  show: false,
-                },
-                axisBorder: {
-                  show: false,
-                },
-                show: false,
-              },
-            }}
-            series={[activeSeries]}
-          />
-        </div>
-      </Card>
-    </div>
-  );
-};

src/components/generic/form/Checkbox.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Label } from './Label.jsx';
+import { Label } from './Label';
 
 type DefaultInputProps = JSX.IntrinsicElements['input'];
 

src/components/generic/form/Input.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { InputWrapper } from './InputWrapper.jsx';
-import { Label } from './Label.jsx';
+import { InputWrapper } from './InputWrapper';
+import { Label } from './Label';
 
 type DefaultInputProps = JSX.IntrinsicElements['input'];
 

src/components/generic/form/Select.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { InputWrapper } from './InputWrapper.jsx';
-import { Label } from './Label.jsx';
+import { InputWrapper } from './InputWrapper';
+import { Label } from './Label';
 
 type DefaultSelectProps = JSX.IntrinsicElements['select'];
 

src/components/menu/buttons/DeviceStatusDropdown.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 import { FiWifi, FiWifiOff } from 'react-icons/fi';
 
-import { IconButton } from '@app/components/generic/IconButton.jsx';
 import { useAppSelector } from '@app/hooks/redux';
+import { IconButton } from '@components/generic/IconButton';
 import { Types } from '@meshtastic/meshtasticjs';
 
 export const DeviceStatusDropdown = (): JSX.Element => {

src/components/menu/buttons/MobileNavToggle.tsx

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

src/components/menu/buttons/ThemeToggle.tsx

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

src/components/templates/PageLayout.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 
 import { FiXCircle } from 'react-icons/fi';
 
-import { IconButton } from '@app/components/generic/IconButton.jsx';
 import { useBreakpoint } from '@app/hooks/breakpoint';
 import { Drawer } from '@components/generic/Drawer';
-import { SidebarItem, SidebarItemProps } from '@components/generic/SidebarItem';
+import { IconButton } from '@components/generic/IconButton';
+import type { SidebarItemProps } from '@components/generic/SidebarItem';
+import { SidebarItem } from '@components/generic/SidebarItem';
 import { Tab } from '@headlessui/react';
 
 export interface PageLayoutProps {