WIP

src/pages/settings/Connection.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import { Tabs } from '@app/components/generic/Tabs';
+import { connection } from '@app/core/connection';
+import { useAppSelector } from '@app/hooks/redux';
+import { Button } from '@components/generic/Button';
+import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
+import { MenuIcon, SaveIcon } from '@heroicons/react/outline';
+import type { Protobuf } from '@meshtastic/meshtasticjs';
+
+export interface ConnectionProps {
+  navOpen: boolean;
+  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const Connection = ({
+  navOpen,
+  setNavOpen,
+}: ConnectionProps): JSX.Element => {
+  const { t } = useTranslation();
+  const user = useAppSelector((state) => state.meshtastic.user);
+
+  const { register, handleSubmit, formState } = useForm<Protobuf.User>({
+    defaultValues: user,
+  });
+
+  const onSubmit = handleSubmit((data) => {
+    void connection.setOwner(data);
+  });
+
+  return (
+    <PrimaryTemplate
+      title="Connection"
+      tagline="Settings"
+      button={
+        <Button
+          icon={<MenuIcon className="w-5 h-5" />}
+          onClick={(): void => {
+            setNavOpen(!navOpen);
+          }}
+          circle
+        />
+      }
+      footer={
+        <Button
+          className="px-10 ml-auto"
+          icon={<SaveIcon className="w-5 h-5" />}
+          disabled={!formState.isDirty}
+          active
+          border
+        >
+          {t('strings.save_changes')}
+        </Button>
+      }
+    >
+      <div className="w-full max-w-3xl md:max-w-xl">
+        <form className="space-y-2" onSubmit={onSubmit}>
+          <Tabs
+            tabs={[
+              { name: 'HTTP', body: <div>HTTP</div> },
+              { name: 'Bluetooth', body: <div>BLE</div> },
+              { name: 'Serial', body: <div>SERIAL</div> },
+            ]}
+          />
+        </form>
+      </div>
+    </PrimaryTemplate>
+  );
+};

src/pages/settings/Device.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
+import { Toggle } from '@app/components/generic/Toggle';
 import { connection } from '@app/core/connection';
 import { useAppSelector } from '@app/hooks/redux';
 import { Button } from '@components/generic/Button';
@@ -56,6 +57,12 @@ export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
       <div className="w-full max-w-3xl md:max-w-xl">
         <form className="space-y-2" onSubmit={onSubmit}>
           <Input label={'Device Name'} {...register('longName')} />
+          <Input
+            label={'Short Name'}
+            maxLength={3}
+            {...register('shortName')}
+          />
+          <Toggle label="Licenced Operator?" {...register('isLicensed')} />
         </form>
       </div>
     </PrimaryTemplate>

src/pages/settings/Index.tsx

@@ -8,10 +8,12 @@ import { Tab } from '@headlessui/react';
 import {
   CollectionIcon,
   DeviceMobileIcon,
+  LinkIcon,
   WifiIcon,
   XCircleIcon,
 } from '@heroicons/react/outline';
 
+import { Connection } from './Connection';
 import { Device } from './Device';
 import { Interface } from './Interface';
 import { Radio } from './Radio';
@@ -46,6 +48,20 @@ export const Settings = (): JSX.Element => {
                 />
               </div>
             </div>
+            <Tab
+              onClick={(): void => {
+                setNavOpen(false);
+              }}
+            >
+              {({ selected }): JSX.Element => (
+                <SidebarItem
+                  title="Connection"
+                  description="Method and peramaters for connecting to the device"
+                  selected={selected}
+                  icon={<LinkIcon className="flex-shrink-0 w-6 h-6" />}
+                />
+              )}
+            </Tab>
             <Tab
               onClick={(): void => {
                 setNavOpen(false);
@@ -84,6 +100,9 @@ export const Settings = (): JSX.Element => {
         </Drawer>
         <div className="flex w-full">
           <Tab.Panels className="flex w-full">
+            <Tab.Panel className="flex w-full">
+              <Connection navOpen={navOpen} setNavOpen={setNavOpen} />
+            </Tab.Panel>
             <Tab.Panel className="flex w-full">
               <Device navOpen={navOpen} setNavOpen={setNavOpen} />
             </Tab.Panel>

src/pages/settings/Interface.tsx

@@ -47,7 +47,11 @@ export const Interface = ({
       <div className="w-full max-w-3xl space-y-2 md:max-w-xl">
         <Select
           label="Language"
-          value={i18n.language}
+          active={{
+            name: '',
+            value: '',
+            icon: <Us />,
+          }}
           onChange={(value): void => {
             void i18n.changeLanguage(value);
           }}

src/pages/settings/Radio.tsx

@@ -61,6 +61,16 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
             label={t('strings.wifi_psk')}
             {...register('wifiPassword')}
           />
+          <Input
+            label={'Charge current'}
+            disabled
+            {...register('chargeCurrent')}
+          />
+          <Input
+            label={'Last GPS Attempt'}
+            disabled
+            {...register('gpsAttemptTime')}
+          />
         </form>
       </div>
     </PrimaryTemplate>