WIP

.github/workflows/main.yml

@@ -4,9 +4,9 @@ name: meshtastic-web build
 on:
   # Triggers the workflow on push or pull request events but only for the master branch
   push:
-    branches: [ master ]
+    branches: [master]
   pull_request:
-    branches: [ master ]
+    branches: [master]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -19,31 +19,31 @@ jobs:
       # Checks-out repository
       - name: Checkout
         uses: actions/checkout@v2
-
+      - uses: pnpm/[email protected]
-      # Build project
+        with:
+          version: 6.14.3
       - uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: '16'
-          cache: 'yarn'
+          cache: 'pnpm'
-      - run: yarn install --ignore-optional
+      - run: pnpm lint
-      - run: yarn lint
+      - run: pnpm build
-      - run: yarn build
+      - run: pnpm package
-      - run: yarn package
       - run: tree build/output
-      
+
       # Create a zip file from the output folder
       - name: Create output zip file
         uses: papeloto/action-zip@v1
         with:
           files: build/output/
           dest: output.zip
-    
+
       # Upload Artifact
       - name: Upload a Build Artifact
-        uses: "marvinpinto/action-automatic-releases@latest"
+        uses: 'marvinpinto/action-automatic-releases@latest'
         with:
-          repo_token: "${{ secrets.GITHUB_TOKEN }}"
+          repo_token: '${{ secrets.GITHUB_TOKEN }}'
-          automatic_release_tag: "latest"
+          automatic_release_tag: 'latest'
           prerelease: false
           files: |
             output.zip

src/App.tsx

@@ -137,20 +137,18 @@ const App = (): JSX.Element => {
     >
       <div className="flex flex-col h-full bg-gray-200 dark:bg-primaryDark">
         <div className="flex flex-shrink-0 overflow-hidden bg-primary dark:bg-primary">
-          <div className="w-full overflow-hidden bg-white border-b md:mt-12 md:mx-8 md:pt-4 md:pb-3 md:rounded-t-3xl dark:border-gray-600 md:shadow-md dark:bg-primaryDark">
+          <div className="w-full overflow-hidden bg-white border-b md:mt-8 md:mx-8 md:pt-4 md:pb-3 md:rounded-t-3xl dark:border-gray-600 md:shadow-md dark:bg-primaryDark">
             <div className="flex items-center justify-between h-16 px-4 md:px-6">
               <div className="hidden md:flex">
                 <Logo />
               </div>
-
+              <Navigation className="hidden md:flex" />
               <MobileNavToggle />
               <div className="flex items-center space-x-2">
                 <DeviceStatusDropdown />
-                {/* <LanguageDropdown /> */}
                 <ThemeToggle />
               </div>
             </div>
-            <Navigation className="hidden md:flex" />
           </div>
         </div>
         <MobileNav />

src/components/generic/Tabs.tsx

@@ -11,76 +11,31 @@ interface TabProps extends DefaultDivProps {
   }[];
 }
 
-export const Tabs = ({ tabs }: TabProps) => {
+export const Tabs = ({ tabs, className, ...props }: TabProps): JSX.Element => {
-  //   let [categories] = useState({
-  //     Recent: [
-  //       {
-  //         id: 1,
-  //         title: 'Does drinking coffee make you smarter?',
-  //         date: '5h ago',
-  //         commentCount: 5,
-  //         shareCount: 2,
-  //       },
-  //       {
-  //         id: 2,
-  //         title: "So you've bought coffee... now what?",
-  //         date: '2h ago',
-  //         commentCount: 3,
-  //         shareCount: 2,
-  //       },
-  //     ],
-  //     Popular: [
-  //       {
-  //         id: 1,
-  //         title: 'Is tech making coffee better or worse?',
-  //         date: 'Jan 7',
-  //         commentCount: 29,
-  //         shareCount: 16,
-  //       },
-  //       {
-  //         id: 2,
-  //         title: 'The most innovative things happening in coffee',
-  //         date: 'Mar 19',
-  //         commentCount: 24,
-  //         shareCount: 12,
-  //       },
-  //     ],
-  //     Trending: [
-  //       {
-  //         id: 1,
-  //         title: 'Ask Me Anything: 10 answers to your questions about coffee',
-  //         date: '2d ago',
-  //         commentCount: 9,
-  //         shareCount: 5,
-  //       },
-  //       {
-  //         id: 2,
-  //         title: "The worst advice we've ever heard about coffee",
-  //         date: '4d ago',
-  //         commentCount: 1,
-  //         shareCount: 2,
-  //       },
-  //     ],
-  //   })
-
   return (
-    <Tab.Group as="div">
+    <Tab.Group as="div" className={className}>
-      <Tab.List className="flex p-2 space-x-2 border shadow-md rounded-t-3xl dark:border-gray-600">
+      <Tab.List className="flex border-l border-r border-t shadow-md rounded-t-3xl dark:border-gray-600">
         {tabs.map((tab) => (
           <Tab
             key={tab.name}
-            className={({ selected }) => `w-full text-lg font-medium`}
+            className={({ selected }): string =>
+              `w-full text-lg font-medium p-2 border-b-2 ${
+                selected
+                  ? 'dark:border-gray-200 border-gray-600'
+                  : 'border-transparent dark:border-transparent'
+              }`
+            }
           >
             {tab.name}
           </Tab>
         ))}
       </Tab.List>
-      <Tab.Panels>
+      <Tab.Panels className="h-full">
         {tabs.map((tab, index) => (
           <Tab.Panel
             key={index}
             className={
-              'border dark:border-gray-600 rounded-b-3xl p-2 h-80 shadow-md'
+              'border dark:border-gray-600 rounded-b-3xl p-4 h-full shadow-md'
             }
           >
             {tab.body}

src/components/menu/MobileNav.tsx

@@ -19,7 +19,7 @@ export const MobileNav = (): JSX.Element => {
         dispatch(closeMobileNav());
       }}
     >
-      <div className="flex flex-col w-64">
+      <div className="flex flex-col">
         <div className="m-auto my-6">
           <Logo />
         </div>

src/components/menu/Navigation.tsx

@@ -21,7 +21,7 @@ export const Navigation = ({
   const route = useRoute();
   return (
     <div
-      className={`h-16 px-4 md:space-x-2 space-y-2 md:space-y-0 ${className}`}
+      className={`px-4 md:space-x-2 space-y-2 md:space-y-0 ${className}`}
       {...props}
     >
       <div onClick={onClick}>

src/components/nodes/Node.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-
-import Avatar from 'boring-avatars';
-
-import type { Protobuf } from '@meshtastic/meshtasticjs';
-
-type DefaultDivProps = JSX.IntrinsicElements['div'];
-
-export interface NodeProps extends DefaultDivProps {
-  node: Protobuf.NodeInfo;
-}
-
-export const Node = ({ node, ...props }: NodeProps): JSX.Element => {
-  return (
-    <div
-      {...props}
-      className="flex items-center w-full p-2 mt-6 space-x-4 border rounded-md shadow-md dark:bg-primaryDark dark:border-gray-600 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-900"
-    >
-      <Avatar
-        size={30}
-        name={node.user?.longName ?? 'UNK'}
-        variant="beam"
-        colors={['#213435', '#46685B', '#648A64', '#A6B985', '#E1E3AC']}
-      />
-      <div>{node.user?.longName}</div>
-    </div>
-  );
-};

src/components/templates/PrimaryTemplate.tsx

@@ -17,7 +17,7 @@ export const PrimaryTemplate = ({
 }: PrimaryTemplateProps): JSX.Element => {
   return (
     <div className="flex flex-col flex-auto min-w-0">
-      <div className="flex px-6 py-2 bg-white border-b md:p-6 md:flex-row flex-0 md:items-center md:justify-between md:py-8 md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
+      <div className="flex p-4 bg-white border-b md:flex-row flex-0 md:items-center md:justify-between md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
         {button && <div className="pr-2 m-auto md:hidden">{button}</div>}
         <div className="flex-1 min-w-0">
           <div className="flex flex-wrap items-center font-medium">
@@ -32,11 +32,11 @@ export const PrimaryTemplate = ({
           </div>
         </div>
       </div>
-      <div className="flex-auto flex-grow p-6 bg-white md:p-10 dark:bg-secondaryDark">
+      <div className="flex-auto flex-grow p-6 bg-white md:p-10 dark:bg-secondaryDark overflow-y-auto">
         {children}
       </div>
       {footer && (
-        <div className="flex p-6 bg-white border-t md:flex-row flex-0 md:items-center md:justify-between md:py-8 md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
+        <div className="flex p-4 bg-white border-t md:flex-row flex-0 md:items-center md:justify-between md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
           {button && <div className="pr-2 m-auto md:hidden">{button}</div>}
           <div className="flex-1 min-w-0">{footer}</div>
         </div>

src/core/connection.ts

@@ -1,3 +1,9 @@
-import { IHTTPConnection } from '@meshtastic/meshtasticjs';
+import {
+  IBLEConnection,
+  IHTTPConnection,
+  ISerialConnection,
+} from '@meshtastic/meshtasticjs';
 
 export const connection = new IHTTPConnection();
+export const bleConnection = new IBLEConnection();
+export const serialConnection = new ISerialConnection();

src/pages/Nodes/Index.tsx

@@ -46,6 +46,12 @@ export const Nodes = (): JSX.Element => {
               </div>
             </div>
 
+            {!nodes.length && (
+              <span className="p-4 text-sm text-gray-400 dark:text-gray-600">
+                No nodes discovered yet...
+              </span>
+            )}
+
             {nodes.map((node) => (
               <Tab
                 onClick={(): void => {

src/pages/settings/Connection.tsx

@@ -3,12 +3,18 @@ import React from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
+import { Input } from '@app/components/generic/Input';
 import { Tabs } from '@app/components/generic/Tabs';
-import { connection } from '@app/core/connection';
+import { Toggle } from '@app/components/generic/Toggle';
+import {
+  bleConnection,
+  connection,
+  serialConnection,
+} 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 { LinkIcon, MenuIcon, SaveIcon } from '@heroicons/react/outline';
 import type { Protobuf } from '@meshtastic/meshtasticjs';
 
 export interface ConnectionProps {
@@ -57,12 +63,71 @@ export const Connection = ({
       }
     >
       <div className="w-full max-w-3xl md:max-w-xl">
+        <div className="mb-2 flex w-full border dark:border-gray-600 rounded-3xl p-2">
+          Current connection method:
+          <div className="ml-2 rounded-full bg-gray-400 dark:bg-primaryDark text-sm px-1 my-auto">
+            BLE
+          </div>
+        </div>
         <form className="space-y-2" onSubmit={onSubmit}>
           <Tabs
+            className="h-60"
             tabs={[
-              { name: 'HTTP', body: <div>HTTP</div> },
+              {
-              { name: 'Bluetooth', body: <div>BLE</div> },
+                name: 'HTTP',
-              { name: 'Serial', body: <div>SERIAL</div> },
+                body: (
+                  <div className="space-y-2">
+                    <Input label={'Device URL'} />
+                    <Toggle label="Use TLS?" />
+                  </div>
+                ),
+              },
+              {
+                name: 'Bluetooth',
+                body: (
+                  <div className="space-y-2">
+                    Devices:
+                    <Button
+                      onClick={async (): Promise<void> => {
+                        console.log(await bleConnection.getDevices());
+                      }}
+                    >
+                      Get Devices
+                    </Button>
+                    <div className="flex justify-between rounded-3xl border dark:border-600 p-2">
+                      Device Name
+                      <LinkIcon className="my-auto mr-2 w-5 h-5 text-gray-300" />
+                    </div>
+                    <div className="flex justify-between rounded-3xl border dark:border-600 p-2">
+                      Device Name
+                      <LinkIcon className="my-auto mr-2 w-5 h-5 text-gray-600" />
+                    </div>
+                  </div>
+                ),
+              },
+              {
+                name: 'Serial',
+                body: (
+                  <div className="space-y-2">
+                    Devices:
+                    <Button
+                      onClick={async (): Promise<void> => {
+                        console.log(await serialConnection.getPorts());
+                      }}
+                    >
+                      Get Devices
+                    </Button>
+                    <div className="flex justify-between rounded-3xl border dark:border-600 p-2">
+                      Device Name
+                      <LinkIcon className="my-auto mr-2 w-5 h-5 text-gray-300" />
+                    </div>
+                    <div className="flex justify-between rounded-3xl border dark:border-600 p-2">
+                      Device Name
+                      <LinkIcon className="my-auto mr-2 w-5 h-5 text-gray-600" />
+                    </div>
+                  </div>
+                ),
+              },
             ]}
           />
         </form>

src/pages/settings/Device.tsx

@@ -10,7 +10,7 @@ import { Button } from '@components/generic/Button';
 import { Input } from '@components/generic/Input';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 import { MenuIcon, SaveIcon } from '@heroicons/react/outline';
-import type { Protobuf } from '@meshtastic/meshtasticjs';
+import { Protobuf } from '@meshtastic/meshtasticjs';
 
 export interface DeviceProps {
   navOpen: boolean;
@@ -20,13 +20,21 @@ export interface DeviceProps {
 export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
   const { t } = useTranslation();
   const user = useAppSelector((state) => state.meshtastic.user);
-
+  const { register, handleSubmit, formState } = useForm<{
-  const { register, handleSubmit, formState } = useForm<Protobuf.User>({
+    isLicensed: boolean;
-    defaultValues: user,
+    shortName: string;
+    longName: string;
+  }>({
+    defaultValues: {
+      isLicensed: user.isLicensed,
+      shortName: user.shortName,
+      longName: user.longName,
+    },
   });
 
   const onSubmit = handleSubmit((data) => {
-    void connection.setOwner(data);
+    Protobuf.User.mergePartial(user, data);
+    void connection.setOwner(user);
   });
 
   return (