WIP

src/pages/About.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
 
-import { PrimaryTemplate } from '../components/templates/PrimaryTemplate';
-import { TestForm } from '../components/TestForm';
+import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 
 export const About = (): JSX.Element => {
   return (
     <PrimaryTemplate title="meshtastic-web" tagline="About">
       <p>Content</p>
-      <TestForm />
     </PrimaryTemplate>
   );
 };

src/pages/Messages.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
+import { Message } from '@components/chat/Message';
+import { MessageBar } from '@components/chat/MessageBar';
+import { Button } from '@components/generic/Button';
 import { HashtagIcon, MapIcon, UsersIcon } from '@heroicons/react/outline';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
-import { Message } from '../components/chat/Message';
-import { MessageBar } from '../components/chat/MessageBar';
-import { IconButton } from '../components/generic/IconButton';
 import { useAppSelector } from '../hooks/redux';
 
 export const Messages = (): JSX.Element => {
@@ -13,7 +13,7 @@ export const Messages = (): JSX.Element => {
   const nodes = useAppSelector((state) => state.meshtastic.nodes);
   const channels = useAppSelector((state) => state.meshtastic.channels);
 
-  const channelName = () => {
+  const channelName = (): string => {
     const name =
       channels.find((channel) => channel.role === Protobuf.Channel_Role.PRIMARY)
         ?.settings?.name ?? 'Unknown';
@@ -23,21 +23,18 @@ export const Messages = (): JSX.Element => {
 
   return (
     <div className="flex flex-col w-full">
-      <div className="flex justify-between w-full border-b dark:border-gray-600 dark:text-gray-300 px-2">
+      <div className="flex justify-between w-full px-2 border-b dark:border-gray-600 dark:text-gray-300">
         <div className="flex my-auto text-sm">
-          <HashtagIcon className="h-4 w-4 my-auto" />
+          <HashtagIcon className="w-4 h-4 my-auto" />
           {channelName()}
         </div>
         <div className="flex">
-          <IconButton>
-            <MapIcon className="w-6 h-6" />
-          </IconButton>
-          <IconButton>
-            <UsersIcon className="w-6 h-6" />
-          </IconButton>
+          <Button icon={<MapIcon className="w-5 h-5" />} circle />
+
+          <Button icon={<UsersIcon className="w-5 h-5" />} circle />
         </div>
       </div>
-      <div className="flex flex-col p-6 sm:py-8 sm:px-10 border-b dark:border-gray-600 bg-white dark:bg-secondaryDark flex-grow overflow-y-auto space-y-2">
+      <div className="flex flex-col flex-grow p-6 space-y-2 overflow-y-auto bg-white border-b md:py-8 md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
         {messages.map((message, index) => (
           <Message
             key={index}
@@ -56,6 +53,3 @@ export const Messages = (): JSX.Element => {
     </div>
   );
 };
-<IconButton>
-  <UsersIcon className="w-6 h-6" />
-</IconButton>;

src/pages/Nodes.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-
-import type { Protobuf } from '@meshtastic/meshtasticjs';
-
-import { Node } from '../components/nodes/Node';
-import { NodeDetails } from '../components/nodes/NodeDetails';
-import { PrimaryTemplate } from '../components/templates/PrimaryTemplate';
-import { useAppSelector } from '../hooks/redux';
-
-export const Nodes = (): JSX.Element => {
-  const nodes = useAppSelector((state) => state.meshtastic.nodes);
-  const [currentNode, setCurrentNode] = React.useState<
-    Protobuf.NodeInfo | undefined
-  >();
-
-  return (
-    <PrimaryTemplate title="Administration" tagline="Node">
-      <div className="flex w-full space-x-5">
-        <div className="w-1/3">
-          {nodes.map((node) => (
-            <Node
-              key={node.num}
-              node={node}
-              onClick={() => {
-                setCurrentNode(node);
-              }}
-            />
-          ))}
-        </div>
-        <div className="w-2/3">
-          {currentNode ? (
-            <NodeDetails
-              onClose={() => {
-                setCurrentNode(undefined);
-              }}
-              node={currentNode}
-            />
-          ) : (
-            <div>Node not selected</div>
-          )}
-        </div>
-      </div>
-    </PrimaryTemplate>
-  );
-};

src/pages/Nodes/Index.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+
+import Avatar from 'boring-avatars';
+
+import { useBreakpoint } from '@app/hooks/breakpoint';
+import { useAppSelector } from '@app/hooks/redux';
+import { Button } from '@components/generic/Button';
+import { Drawer } from '@components/generic/Drawer';
+import { SidebarItem } from '@components/generic/SidebarItem';
+import { Tab } from '@headlessui/react';
+import { XCircleIcon } from '@heroicons/react/outline';
+
+import { Node } from './Node';
+
+export const Nodes = (): JSX.Element => {
+  const [navOpen, setNavOpen] = React.useState(false);
+
+  const { breakpoint } = useBreakpoint();
+
+  const nodes = useAppSelector((state) => state.meshtastic.nodes);
+
+  return (
+    <Tab.Group>
+      <div className="relative flex w-full dark:text-white">
+        <Drawer
+          open={breakpoint === 'sm' ? navOpen : true}
+          permenant={breakpoint !== 'sm'}
+          onClose={(): void => {
+            setNavOpen(!navOpen);
+          }}
+        >
+          <Tab.List className="flex flex-col border-b divide-y divide-gray-300 dark:divide-gray-600 dark:border-gray-600">
+            <div className="flex items-center justify-between m-8 mr-6 md:my-10">
+              <div className="text-4xl font-extrabold leading-none tracking-tight">
+                Nodes
+              </div>
+              <div className="md:hidden">
+                <Button
+                  icon={<XCircleIcon className="w-5 h-5" />}
+                  circle
+                  onClick={(): void => {
+                    setNavOpen(false);
+                  }}
+                />
+              </div>
+            </div>
+
+            {nodes.map((node) => (
+              <Tab
+                onClick={(): void => {
+                  setNavOpen(false);
+                }}
+                key={node.num}
+              >
+                {({ selected }): JSX.Element => (
+                  <SidebarItem
+                    title={node.user?.longName ?? node.num.toString()}
+                    description="Node info"
+                    selected={selected}
+                    icon={
+                      <Avatar
+                        size={30}
+                        name={node.user?.longName ?? node.num.toString()}
+                        variant="beam"
+                        colors={[
+                          '#213435',
+                          '#46685B',
+                          '#648A64',
+                          '#A6B985',
+                          '#E1E3AC',
+                        ]}
+                      />
+                    }
+                  />
+                )}
+              </Tab>
+            ))}
+          </Tab.List>
+        </Drawer>
+        <div className="w-full">
+          <Tab.Panels>
+            {nodes.map((node) => (
+              <Tab.Panel key={node.num}>
+                <Node navOpen={navOpen} setNavOpen={setNavOpen} node={node} />
+              </Tab.Panel>
+            ))}
+          </Tab.Panels>
+        </div>
+      </div>
+    </Tab.Group>
+  );
+};

src/pages/Nodes/Node.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { Button } from '@components/generic/Button';
+import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
+import { MenuIcon } from '@heroicons/react/outline';
+import type { Protobuf } from '@meshtastic/meshtasticjs';
+
+export interface NodeProps {
+  navOpen: boolean;
+  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  node: Protobuf.NodeInfo;
+}
+
+export const Node = ({ navOpen, setNavOpen, node }: NodeProps): JSX.Element => {
+  return (
+    <PrimaryTemplate
+      title={node.user?.longName ?? node.num.toString()}
+      tagline="Node"
+      button={
+        <Button
+          icon={<MenuIcon className="w-5 h-5" />}
+          onClick={(): void => {
+            setNavOpen(!navOpen);
+          }}
+          circle
+        />
+      }
+    >
+      <div className="w-full max-w-3xl space-y-2 md:max-w-xl">Content</div>
+    </PrimaryTemplate>
+  );
+};

src/pages/Settings.tsx

@@ -1,160 +0,0 @@
-import React from 'react';
-
-import { useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-
-import { Protobuf } from '@meshtastic/meshtasticjs';
-
-import { Input } from '../components/form/Input';
-import { Select } from '../components/form/Select';
-import { Switch } from '../components/form/Switch';
-import { PrimaryTemplate } from '../components/templates/PrimaryTemplate';
-import { connection } from '../core/connection';
-import {
-  setHostOverride,
-  setHostOverrideEnabled,
-} from '../core/slices/meshtasticSlice';
-import { useAppDispatch, useAppSelector } from '../hooks/redux';
-
-export const Settings = (): JSX.Element => {
-  const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-
-  const radioConfig = useAppSelector((state) => state.meshtastic.preferences);
-  const hostOverride = useAppSelector((state) => state.meshtastic.hostOverride);
-  const hostOverrideEnabled = useAppSelector(
-    (state) => state.meshtastic.hostOverrideEnabled,
-  );
-
-  const { register, handleSubmit, control } =
-    useForm<Protobuf.RadioConfig_UserPreferences>({
-      defaultValues: radioConfig,
-    });
-
-  const onSubmit = handleSubmit((data) => {
-    console.log(data);
-    connection.setPreferences(data);
-  });
-
-  const [localHostOverride, setLocalHostOverride] =
-    React.useState(hostOverride);
-  const [localHostOverrideEnabled, setLocalHostOverrideEnabled] =
-    React.useState(hostOverrideEnabled);
-
-  return (
-    <PrimaryTemplate title="Settings" tagline="Device">
-      <form onSubmit={onSubmit}>
-        <div className="space-y-4">
-          <div className="flex pb-2 dark:text-white border-b dark:border-gray-600">
-            <div className="w-1/3 text-lg">WiFi</div>
-            <div className="space-y-2 w-full max-w-xs">
-              <Input
-                label={t('strings.wifi_ssid')}
-                {...register('wifiSsid', {})}
-                type="text"
-                valid={true}
-              />
-              <Input
-                label={t('strings.wifi_psk')}
-                {...register('wifiPassword', {})}
-                type="password"
-                valid={true}
-              />
-            </div>
-          </div>
-          <div className="flex pb-2 dark:text-white border-b dark:border-gray-600">
-            <div className="w-1/3 text-lg">Node</div>
-            <div className="space-y-2 w-full max-w-xs">
-              <Switch
-                name={'isRouter'}
-                control={control}
-                label={'Is Router Node?'}
-              />
-
-              <Switch
-                name={'isLowPower'}
-                control={control}
-                label={'Is Low Power?'}
-              />
-
-              <Switch
-                name={'fixedPosition'}
-                control={control}
-                label={'Has Fixed Position?'}
-              />
-
-              <Switch
-                name={'serialDisabled'}
-                control={control}
-                label={'Is Serial Disabled?'}
-              />
-
-              <Switch
-                name={'mqttDisabled'}
-                control={control}
-                label={'Is MQTT Disabled?'}
-              />
-
-              <Switch
-                name={'debugLogEnabled'}
-                control={control}
-                label={'Is Debug Log Enabled?'}
-              />
-
-              <Select
-                name={'region'}
-                control={control}
-                label="Region"
-                options={(() => {
-                  return Object.keys(Protobuf.RegionCode)
-                    .filter((value) => isNaN(Number(value)) === false)
-                    .map((key) => {
-                      return {
-                        value: key,
-                        label: Protobuf.RegionCode[parseInt(key)],
-                      };
-                    });
-                })()}
-              />
-            </div>
-          </div>
-          <div className="flex pb-2 dark:text-white border-b dark:border-gray-600">
-            <div className="w-1/3 text-lg">Client</div>
-            <div className="space-y-2 w-full max-w-xs">
-              {/* <Toggle
-                label={'Enable host override'}
-                checked={localHostOverrideEnabled}
-                onChange={(event) => {
-                  console.log(event.target.checked);
-                  setLocalHostOverrideEnabled(event.target.checked);
-                }}
-              /> */}
-              <Input
-                label={'Host override'}
-                placeholder={'meshtastic.local'}
-                value={localHostOverride}
-                onChange={(event) => {
-                  setLocalHostOverride(event.target.value);
-                }}
-                type="text"
-                valid={true}
-                disabled={!localHostOverrideEnabled}
-              />
-            </div>
-          </div>
-        </div>
-
-        <button
-          type="submit"
-          onClick={() => {
-            dispatch(setHostOverride(localHostOverride));
-            dispatch(setHostOverrideEnabled(localHostOverrideEnabled));
-          }}
-          className="w-full rounded-md dark:bg-primaryDark shadow-md border dark:border-gray-600 p-2 mt-6 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-900"
-        >
-          {t('strings.save_changes')}
-        </button>
-      </form>
-    </PrimaryTemplate>
-  );
-};

src/pages/settings/Device.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import { connection } from '@app/core/connection';
+import { useAppSelector } from '@app/hooks/redux';
+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';
+
+export interface DeviceProps {
+  navOpen: boolean;
+  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
+  const { t } = useTranslation();
+  const radioConfig = useAppSelector((state) => state.meshtastic.preferences);
+
+  const { register, handleSubmit, formState } =
+    useForm<Protobuf.RadioConfig_UserPreferences>({
+      defaultValues: radioConfig,
+    });
+
+  const onSubmit = handleSubmit((data) => {
+    void connection.setPreferences(data);
+  });
+
+  return (
+    <PrimaryTemplate
+      title="Device"
+      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 space-y-2 md:max-w-xl">
+        <form onSubmit={onSubmit}>
+          <Input label={t('strings.wifi_ssid')} {...register('wifiSsid')} />
+          <Input
+            type="password"
+            label={t('strings.wifi_psk')}
+            {...register('wifiPassword')}
+          />
+        </form>
+      </div>
+    </PrimaryTemplate>
+  );
+};

src/pages/settings/Index.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+
+import { useBreakpoint } from '@app/hooks/breakpoint';
+import { Button } from '@components/generic/Button';
+import { Drawer } from '@components/generic/Drawer';
+import { SidebarItem } from '@components/generic/SidebarItem';
+import { Tab } from '@headlessui/react';
+import {
+  CollectionIcon,
+  DeviceMobileIcon,
+  WifiIcon,
+  XCircleIcon,
+} from '@heroicons/react/outline';
+
+import { Device } from './Device';
+import { Interface } from './Interface';
+import { Radio } from './Radio';
+
+export const Settings = (): JSX.Element => {
+  const [navOpen, setNavOpen] = React.useState(false);
+
+  const { breakpoint } = useBreakpoint();
+
+  return (
+    <Tab.Group>
+      <div className="relative flex w-full dark:text-white">
+        <Drawer
+          open={breakpoint === 'sm' ? navOpen : true}
+          permenant={breakpoint !== 'sm'}
+          onClose={(): void => {
+            setNavOpen(!navOpen);
+          }}
+        >
+          <Tab.List className="flex flex-col border-b divide-y divide-gray-300 dark:divide-gray-600 dark:border-gray-600">
+            <div className="flex items-center justify-between m-8 mr-6 md:my-10">
+              <div className="text-4xl font-extrabold leading-none tracking-tight">
+                Settings
+              </div>
+              <div className="md:hidden">
+                <Button
+                  icon={<XCircleIcon className="w-5 h-5" />}
+                  circle
+                  onClick={(): void => {
+                    setNavOpen(false);
+                  }}
+                />
+              </div>
+            </div>
+            <Tab
+              onClick={(): void => {
+                setNavOpen(false);
+              }}
+            >
+              {({ selected }): JSX.Element => (
+                <SidebarItem
+                  title="Device"
+                  description="Device settings, such as device name and wifi settings"
+                  selected={selected}
+                  icon={<DeviceMobileIcon className="flex-shrink-0 w-6 h-6" />}
+                />
+              )}
+            </Tab>
+            <Tab>
+              {({ selected }): JSX.Element => (
+                <SidebarItem
+                  title="Radio"
+                  description="Adjust radio power and frequency settings"
+                  selected={selected}
+                  icon={<WifiIcon className="flex-shrink-0 w-6 h-6" />}
+                />
+              )}
+            </Tab>
+            <Tab>
+              {({ selected }): JSX.Element => (
+                <SidebarItem
+                  title="Interface"
+                  description="Change language and other UI settings"
+                  selected={selected}
+                  icon={<CollectionIcon className="flex-shrink-0 w-6 h-6" />}
+                />
+              )}
+            </Tab>
+          </Tab.List>
+        </Drawer>
+        <div className="flex w-full">
+          <Tab.Panels className="flex w-full">
+            <Tab.Panel className="flex w-full">
+              <Device navOpen={navOpen} setNavOpen={setNavOpen} />
+            </Tab.Panel>
+            <Tab.Panel className="flex w-full">
+              <Radio navOpen={navOpen} setNavOpen={setNavOpen} />
+            </Tab.Panel>
+            <Tab.Panel className="flex w-full">
+              <Interface navOpen={navOpen} setNavOpen={setNavOpen} />
+            </Tab.Panel>
+          </Tab.Panels>
+        </div>
+      </div>
+    </Tab.Group>
+  );
+};

src/pages/settings/Interface.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+
+import { Jp, Pt, Us } from 'react-flags-select';
+import { useTranslation } from 'react-i18next';
+
+import { Select } from '@app/components/generic/Select';
+import i18n from '@app/core/translation';
+import { Button } from '@components/generic/Button';
+import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
+import { MenuIcon, SaveIcon } from '@heroicons/react/outline';
+
+export interface InterfaceProps {
+  navOpen: boolean;
+  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const Interface = ({
+  navOpen,
+  setNavOpen,
+}: InterfaceProps): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <PrimaryTemplate
+      title="Interface"
+      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" />}
+          active
+          border
+        >
+          {t('strings.save_changes')}
+        </Button>
+      }
+    >
+      <div className="w-full max-w-3xl space-y-2 md:max-w-xl">
+        <Select
+          label="Language"
+          value={i18n.language}
+          onChange={(value): void => {
+            void i18n.changeLanguage(value);
+          }}
+          id="aaa"
+          options={[
+            {
+              name: 'English',
+              value: 'en',
+              icon: <Us className="w-6" />,
+            },
+            {
+              name: 'Português',
+              value: 'pt',
+              icon: <Pt className="w-6" />,
+            },
+            {
+              name: 'Japanese',
+              value: 'jp',
+              icon: <Jp className="w-6" />,
+            },
+          ]}
+        />
+      </div>
+    </PrimaryTemplate>
+  );
+};

src/pages/settings/Radio.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+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';
+
+export interface RadioProps {
+  navOpen: boolean;
+  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <PrimaryTemplate
+      title="Radio"
+      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" />}
+          active
+          border
+        >
+          {t('strings.save_changes')}
+        </Button>
+      }
+    >
+      <div className="w-full max-w-3xl space-y-2 md:max-w-xl">
+        <Input label="test" />
+      </div>
+    </PrimaryTemplate>
+  );
+};