Move to snowpack

2021-04-10 23:41:44 +10:00
parent e16d8b734c
commit 3a1b2e7b34
29 changed files with 9028 additions and 116 deletions
@@ -1,46 +0,0 @@
-.App {
-  text-align: center;
-}
-.App code {
-  background: #FFF3;
-  padding: 4px 8px;
-  border-radius: 4px;
-}
-.App p {
-  margin: 0.4rem;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { expect } from 'chai';
-import App from './App';
-
-describe('<App>', () => {
-  it('renders learn react link', () => {
-    const { getByText } = render(<App />);
-    const linkElement = getByText(/learn react/i);
-    expect(document.body.contains(linkElement));
-  });
-});
@@ -1,41 +1,206 @@
-import React, { useState, useEffect } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { useEffect, useState } from 'react';

-interface AppProps {}
+import {
+  Client,
+  IHTTPConnection,
+  Protobuf,
+  SettingsManager,
+  Types,
+} from '@meshtastic/meshtasticjs';

-function App({}: AppProps) {
-  // Create the count state.
-  const [count, setCount] = useState(0);
-  // Create the counter (+1 every second).
-  useEffect(() => {
-    const timer = setTimeout(() => setCount(count + 1), 1000);
-    return () => clearTimeout(timer);
-  }, [count, setCount]);
-  // Return the App component.
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <p>
-          Page has been open for <code>{count}</code> seconds.
-        </p>
-        <p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </p>
-      </header>
-    </div>
-  );
+import Header from './components/Header';
+import Main from './Main';
+import Translations_English from './translations/en';
+import Translations_Japanese from './translations/jp';
+
+export enum LanguageEnum {
+  ENGLISH,
+  JAPANESE,
 }

+export interface languageTemplate {
+  no_messages_message: string;
+  ui_settings_title: string;
+  nodes_title: string;
+  color_scheme_title: string;
+  language_title: string;
+  device_settings_title: string;
+  device_channels_title: string;
+  device_region_title: string;
+  device_wifi_ssid: string;
+  device_wifi_psk: string;
+  save_changes_button: string;
+  no_nodes_message: string;
+  no_message_placeholder: string;
+}
+
+const App = () => {
+  const [deviceStatus, setDeviceStatus] = useState(
+    {} as Types.DeviceStatusEnum,
+  );
+  const [myNodeInfo, setMyNodeInfo] = useState({} as Protobuf.MyNodeInfo);
+  const [messages, setMessages] = useState(
+    [] as { message: Types.TextPacket; ack: false }[],
+  );
+  const [channels, setChannels] = useState([] as Protobuf.Channel[]);
+  const [nodes, setNodes] = useState([] as Types.NodeInfoPacket[]);
+  const [connection, setConnection] = useState({} as IHTTPConnection);
+  const [isReady, setIsReady] = useState(false);
+  const [lastMeshInterraction, setLastMeshInterraction] = useState(0);
+  const [preferences, setPreferences] = useState(
+    {} as Protobuf.RadioConfig_UserPreferences,
+  );
+  const [language, setLanguage] = useState(LanguageEnum.ENGLISH);
+  const [translations, setTranslations] = useState(Translations_English);
+
+  useEffect(() => {
+    switch (language) {
+      case LanguageEnum.ENGLISH:
+        setTranslations(Translations_English);
+        break;
+      case LanguageEnum.JAPANESE:
+        setTranslations(Translations_Japanese);
+        break;
+
+      default:
+        break;
+    }
+  }, [language]);
+
+  useEffect(() => {
+    const client = new Client();
+    const connection = client.createHTTPConnection();
+    // connection.connect(window.location.hostname, undefined, true);
+    connection.connect({
+      address: '192.168.105.71',
+      receiveBatchRequests: false,
+      tls: false,
+      fetchInterval: 2000,
+    });
+    setConnection(connection);
+    SettingsManager.debugMode = Protobuf.LogRecord_Level.TRACE;
+    connection.onDeviceStatusEvent.subscribe((status) => {
+      setDeviceStatus(status);
+      if (status === Types.DeviceStatusEnum.DEVICE_CONFIGURED) {
+        setIsReady(true);
+      }
+    });
+    connection.onMyNodeInfoEvent.subscribe(setMyNodeInfo);
+    connection.onTextPacketEvent.subscribe((message) => {
+      setMessages((messages) => [
+        ...messages,
+        { message: message, ack: false },
+      ]);
+    });
+    connection.onNodeInfoPacketEvent.subscribe((node) => {
+      if (
+        nodes.findIndex(
+          (currentNode) => currentNode.data.num === node.data.num,
+        ) >= 0
+      ) {
+        setNodes(
+          nodes.map((currentNode) =>
+            currentNode.data.num === node.data.num ? node : currentNode,
+          ),
+        );
+      } else {
+        setNodes((nodes) => [...nodes, node]);
+      }
+    });
+
+    connection.onAdminPacketEvent.subscribe((adminMessage) => {
+      switch (adminMessage.data.variant.oneofKind) {
+        case 'getRadioResponse':
+          if (adminMessage.data.variant.getRadioResponse.preferences) {
+            setPreferences(
+              adminMessage.data.variant.getRadioResponse.preferences,
+            );
+          }
+
+          break;
+        // case 'getChannelResponse':
+        //   if (adminMessage.data.variant.getChannelResponse) {
+        //     setChannels((channels) => [
+        //       ...channels,
+        //       adminMessage.data.variant.getChannelResponse,
+        //     ]);
+        //   }
+
+        default:
+          break;
+      }
+    });
+
+    connection.onMeshHeartbeat.subscribe(setLastMeshInterraction);
+
+    connection.onRoutingPacketEvent.subscribe((routingPacket) => {
+      console.log(routingPacket);
+
+      messages.map((message) => {
+        console.log(
+          `${
+            routingPacket.payloadVariant.oneofKind === 'decoded'
+              ? routingPacket.payloadVariant.decoded.requestId
+              : null
+          } === ${message.message.packet.id}: ${
+            routingPacket.payloadVariant.oneofKind === 'decoded'
+              ? routingPacket.payloadVariant.decoded.requestId
+              : null === message.message.packet.id
+          }`,
+        );
+      });
+      // messages.find((message) => {
+      //   message.message.packet.id === routingPacket.decoded.requestId;
+      // });
+    });
+  }, []);
+  return (
+    <div className="flex flex-col h-screen w-screen">
+      {/* <Head>
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/design/web/apple-touch-icon.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="32x32"
+          href="/design/web/favicon-32x32.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+          href="/design/web/favicon-16x16.png"
+        />
+        <link rel="manifest" href="/design/web/site.webmanifest" />
+        <link
+          rel="mask-icon"
+          href="/design/web/safari-pinned-tab.svg"
+          color="#67ea94"
+        />
+        <meta name="theme-color" content="#67ea94" />
+      </Head> */}
+      <Header
+        status={deviceStatus}
+        IsReady={isReady}
+        LastMeshInterraction={lastMeshInterraction}
+      />
+      <Main
+        IsReady={isReady}
+        Messages={messages}
+        MyNodeInfo={myNodeInfo}
+        Connection={connection}
+        Nodes={nodes}
+        Channels={channels}
+        Preferences={preferences}
+        Language={language}
+        SetLanguage={setLanguage}
+        Translations={translations}
+      />
+    </div>
+  );
+};
+
 export default App;
@@ -0,0 +1,113 @@
+import React, { useState } from 'react';
+
+import { FaBars, FaPaperPlane } from 'react-icons/fa';
+
+import type {
+  IHTTPConnection,
+  Protobuf,
+  Types,
+} from '@meshtastic/meshtasticjs';
+
+import type { LanguageEnum, languageTemplate } from './App';
+import ChatMessage from './components/ChatMessage';
+import Sidebar from './components/Sidebar';
+
+interface MainProps {
+  Messages: { message: Types.TextPacket; ack: boolean }[];
+  Connection: IHTTPConnection;
+  MyNodeInfo: Protobuf.MyNodeInfo;
+  Nodes: Types.NodeInfoPacket[];
+  Channels: Protobuf.Channel[];
+  IsReady: boolean;
+  Preferences: Protobuf.RadioConfig_UserPreferences;
+  Language: LanguageEnum;
+  SetLanguage: Function;
+  Translations: languageTemplate;
+}
+
+const Main = (props: MainProps) => {
+  const [currentMessage, setCurrentMessage] = useState('');
+  const [mobileNavOpen, setMobileNavOpen] = useState(true);
+
+  const sendMessage = () => {
+    if (props.IsReady) {
+      props.Connection.sendText(currentMessage, undefined, true);
+      setCurrentMessage('');
+    }
+  };
+
+  return (
+    <div className="flex flex-col md:flex-row flex-grow space-2">
+      <div className="flex flex-col flex-grow container mx-auto">
+        <div className="flex flex-col flex-grow py-6 px-3 space-y-2">
+          {props.Messages.length ? (
+            props.Messages.map((message, Main) => (
+              <ChatMessage
+                nodes={props.Nodes}
+                key={Main}
+                message={message}
+                myId={props.MyNodeInfo.myNodeNum}
+              />
+            ))
+          ) : (
+            <div className="m-auto text-2xl text-gray-500">
+              {props.Translations.no_messages_message}
+            </div>
+          )}
+        </div>
+        <div className="flex space-x-2 w-full p-3">
+          <form
+            className="flex flex-wrap relative w-full"
+            onSubmit={(e) => {
+              e.preventDefault();
+              sendMessage();
+            }}
+          >
+            {props.IsReady}
+            <input
+              type="text"
+              placeholder={`${props.Translations.no_message_placeholder}...`}
+              disabled={!props.IsReady}
+              value={currentMessage}
+              onChange={(e) => {
+                setCurrentMessage(e.target.value);
+              }}
+              className={`p-3 placeholder-gray-400 text-gray-700 relative rounded-md shadow-md focus:outline-none w-full pr-10 ${
+                props.IsReady ? 'cursor-text' : 'cursor-not-allowed'
+              }`}
+            />
+            <span className="z-10 h-full text-gray-400 absolute w-8 right-0 py-4">
+              <FaPaperPlane
+                onClick={sendMessage}
+                className={`text-xl hover:text-gray-500  ${
+                  props.IsReady ? 'cursor-pointer' : 'cursor-not-allowed'
+                }`}
+              />
+            </span>
+          </form>
+          <div
+            className="flex p-3 text-xl hover:text-gray-500 text-gray-400 rounded-md shadow-md focus:outline-none cursor-pointer md:hidden"
+            onClick={() => {
+              setMobileNavOpen(!mobileNavOpen);
+            }}
+          >
+            <FaBars className="m-auto" />
+          </div>
+        </div>
+      </div>
+      <Sidebar
+        IsReady={props.IsReady}
+        Nodes={props.Nodes}
+        Channels={props.Channels}
+        Preferences={props.Preferences}
+        Connection={props.Connection}
+        MobileNavOpen={mobileNavOpen}
+        Language={props.Language}
+        SetLanguage={props.SetLanguage}
+        Translations={props.Translations}
+      />
+    </div>
+  );
+};
+
+export default Main;
@@ -0,0 +1,64 @@
+import React from 'react';
+
+import { FaCheckCircle, FaCircle, FaUser } from 'react-icons/fa';
+
+import type { Types } from '@meshtastic/meshtasticjs';
+
+interface ChatMessageProps {
+  message: { message: Types.TextPacket; ack: boolean };
+  myId: number;
+  nodes: Types.NodeInfoPacket[];
+}
+
+const ChatMessage = (props: ChatMessageProps) => {
+  return (
+    <div className="flex items-end">
+      <div
+        className={`flex p-3 rounded-full shadow-md ${
+          props.message.message.packet.from !== props.myId
+            ? 'bg-gray-300'
+            : 'bg-green-200'
+        }`}
+      >
+        <FaUser className="m-auto" />
+      </div>
+      <div className="flex flex-col container px-2 items-start">
+        <div
+          className={`px-4 py-2 rounded-md shadow-md ${
+            props.message.message.packet.from !== props.myId
+              ? 'bg-gray-300'
+              : 'bg-green-200'
+          }`}
+        >
+          <div className="flex text-xs text-gray-500 space-x-1">
+            <div className="font-medium">
+              {/* {
+                props.nodes.find(
+                  (node) => node.data.num === props.message.message.packet.from,
+                ).data.user.longName
+              } */}
+            </div>
+            <p>-</p>
+            <div className="underline">
+              {new Date(
+                props.message.message.packet.rxTime > 0
+                  ? props.message.message.packet.rxTime
+                  : Date.now(),
+              ).toLocaleString()}
+            </div>
+          </div>
+          <div className="flex justify-between text-gray-600">
+            <span className="inline-block">{props.message.message.data}</span>
+            {props.message.ack ? (
+              <FaCheckCircle className="my-auto" />
+            ) : (
+              <FaCircle className=" text-lg my-auto animate-pulse" />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChatMessage;
@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { FaBroadcastTower, FaMobileAlt } from 'react-icons/fa';
+
+import { Types } from '@meshtastic/meshtasticjs';
+
+interface HeaderProps {
+  status: Types.DeviceStatusEnum;
+  IsReady: boolean;
+  LastMeshInterraction: number;
+}
+
+const Header = (props: HeaderProps) => {
+  return (
+    <nav className="w-full shadow-md">
+      <div className="flex w-full container mx-auto justify-between px-6 py-4">
+        <img src="/design/typelogo/typelogo.svg" height="30" width="200" />
+
+        <div className="flex items-center">
+          <div className="flex pl-4">
+            <div
+              className={`w-5 h-5 rounded-full ${
+                new Date(props.LastMeshInterraction) <
+                new Date(Date.now() - 40000)
+                  ? 'bg-red-400'
+                  : new Date(props.LastMeshInterraction) <
+                    new Date(Date.now() - 20000)
+                  ? 'bg-yellow-400'
+                  : 'bg-green-400'
+              }`}
+            ></div>
+            <FaBroadcastTower className="m-auto ml-1 text-xl" />
+          </div>
+
+          <div className="flex pl-4">
+            <div
+              className={`w-5 h-5 rounded-full ${
+                props.status <= Types.DeviceStatusEnum.DEVICE_DISCONNECTED
+                  ? 'bg-red-400'
+                  : props.status <= Types.DeviceStatusEnum.DEVICE_CONFIGURING &&
+                    !props.IsReady
+                  ? 'bg-yellow-400'
+                  : props.IsReady
+                  ? 'bg-green-400'
+                  : 'bg-gray-400'
+              }`}
+            ></div>
+            <FaMobileAlt className="m-auto ml-1 text-xl" />
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Header;
@@ -0,0 +1,66 @@
+import React, { ReactNode, useEffect, useState } from 'react';
+
+import { FaCaretDown, FaCaretRight, FaSpinner } from 'react-icons/fa';
+
+interface NavItemProps {
+  isDropdown: boolean;
+  open?: boolean;
+  isNested: boolean;
+  titleContent: ReactNode;
+  dropdownContent?: ReactNode;
+  onClick?: Function;
+  isLoading?: boolean;
+}
+
+const NavItem = (props: NavItemProps) => {
+  useEffect(() => {
+    if (props.open) {
+      setNavItemOpen(props.open);
+    }
+  }, []);
+  const [navItemOpen, setNavItemOpen] = useState(false);
+  return (
+    <>
+      <div
+        className={`flex w-full text-lg font-medium justify-between ${
+          navItemOpen && props.isNested ? 'bg-gray-100' : null
+        } ${props.isNested ? 'border-b px-3 py-1' : 'p-3'} ${
+          props.isDropdown && navItemOpen ? 'shadow-md' : 'border-b'
+        } ${
+          props.isDropdown || props.isNested
+            ? 'hover:bg-gray-200 cursor-pointer'
+            : null
+        }`}
+        onClick={() => {
+          if (props.isDropdown) setNavItemOpen(!navItemOpen);
+          if (props.onClick) {
+            props.onClick();
+          }
+        }}
+      >
+        {props.titleContent}
+        {props.isDropdown && !props.isLoading ? (
+          navItemOpen ? (
+            <FaCaretDown className="my-auto group-hover:text-gray-700" />
+          ) : (
+            <FaCaretRight className="my-auto group-hover:text-gray-700" />
+          )
+        ) : null}
+        {props.isLoading ? (
+          <FaSpinner className="animate-spin my-auto" />
+        ) : null}
+      </div>
+      {props.isDropdown ? (
+        <div
+          className={`duration-200 ease-in-out transition-all overflow-hidden max-h-0 border-l-8 ${
+            props.isNested ? 'border-gray-500' : 'border-gray-300'
+          } ${navItemOpen ? 'max-h-full' : null}`}
+        >
+          {props.dropdownContent}
+        </div>
+      ) : null}
+    </>
+  );
+};
+
+export default NavItem;
@@ -0,0 +1,62 @@
+import React from 'react';
+
+import type {
+  IHTTPConnection,
+  Protobuf,
+  Types,
+} from '@meshtastic/meshtasticjs';
+
+import type { LanguageEnum, languageTemplate } from '../App';
+import SidebarChannels from './Sidebar/SidebarChannels';
+import SidebarDeviceSettings from './Sidebar/SidebarDeviceSettings';
+import SidebarNodes from './Sidebar/SidebarNodes';
+import SidebarUISettings from './Sidebar/SidebarUISettings';
+
+interface SidebarProps {
+  IsReady: boolean;
+  Nodes: Types.NodeInfoPacket[];
+  Channels: Protobuf.Channel[];
+  Preferences: Protobuf.RadioConfig_UserPreferences;
+  Connection: IHTTPConnection;
+  MobileNavOpen: boolean;
+  Language: LanguageEnum;
+  SetLanguage: Function;
+  Translations: languageTemplate;
+}
+
+const Sidebar = (props: SidebarProps) => {
+  const updatePreferences = () => {};
+
+  return (
+    <div
+      className={`flex flex-col rounded-md m-3 md:ml-0 shadow-md w-full max-w-sm ${
+        !props.MobileNavOpen ? 'hidden' : 'visible'
+      }`}
+    >
+      <SidebarNodes
+        IsReady={props.IsReady}
+        Nodes={props.Nodes}
+        Translations={props.Translations}
+      />
+      <SidebarDeviceSettings
+        IsReady={props.IsReady}
+        Preferences={props.Preferences}
+        Connection={props.Connection}
+        Translations={props.Translations}
+      />
+      <SidebarChannels
+        IsReady={props.IsReady}
+        Channels={props.Channels}
+        Translations={props.Translations}
+      />
+      <div className="flex-grow border-b"></div>
+      <SidebarUISettings
+        Language={props.Language}
+        SetLanguage={props.SetLanguage}
+        Translations={props.Translations}
+      />
+    </div>
+  );
+};
+
+export default Sidebar;
@@ -0,0 +1,145 @@
+import React from 'react';
+
+import { FaStream } from 'react-icons/fa';
+
+import { Protobuf } from '@meshtastic/meshtasticjs';
+
+import type { languageTemplate } from '../../App';
+import NavItem from '../NavItem';
+
+interface SidebarChannelsProps {
+  IsReady: boolean;
+  Channels: Protobuf.Channel[];
+  Translations: languageTemplate;
+}
+
+const SidebarChannels = (props: SidebarChannelsProps) => {
+  return (
+    <NavItem
+      isDropdown={true}
+      open={false}
+      isNested={false}
+      titleContent={
+        <div className="flex">
+          <FaStream className="my-auto mr-2" />
+          {props.Translations.device_channels_title}
+        </div>
+      }
+      isLoading={!props.IsReady}
+      dropdownContent={
+        <>
+          {props.Channels.map((channel, index) => {
+            if (channel.role !== Protobuf.Channel_Role.DISABLED)
+              return (
+                <NavItem
+                  key={index}
+                  isDropdown={true}
+                  isNested={true}
+                  titleContent={
+                    <div className="flex">
+                      {channel.index} - {Protobuf.Channel_Role[channel.role]}
+                    </div>
+                  }
+                  dropdownContent={
+                    <NavItem
+                      isDropdown={false}
+                      isNested={false}
+                      titleContent={
+                        <div className="w-full">
+                          <div className="flex justify-between border-b hover:bg-gray-200">
+                            <p>Bandwidth:</p>
+                            <code className="bg-gray-200 rounded-full px-2">
+                              {channel.settings?.bandwidth}
+                            </code>
+                          </div>
+
+                          <div className="flex justify-between border-b hover:bg-gray-200">
+                            <p>Channel Number:</p>
+                            <code className="bg-gray-200 rounded-full px-2">
+                              {channel.settings?.channelNum}
+                            </code>
+                          </div>
+
+                          <div className="flex justify-between border-b hover:bg-gray-200">
+                            <p>Coding Rate:</p>
+                            <code className="bg-gray-200 rounded-full px-2">
+                              {channel.settings?.codingRate}
+                            </code>
+                          </div>
+
+                          <div className="flex justify-between border-b hover:bg-gray-200">
+                            <p>ID:</p>
+                            <code className="bg-gray-200 rounded-full px-2">
+                              {channel.settings?.id}
+                            </code>
+                          </div>
+
+                          <div className="flex justify-between border-b hover:bg-gray-200">
+                            <p>Modem Config:</p>
+                            <code className="bg-gray-200 rounded-full px-2">
+                              {channel.settings?.modemConfig
+                                ? Protobuf.ChannelSettings_ModemConfig[
+                                    channel.settings.modemConfig
+                                  ]
+                                : null}
+                            </code>
+                          </div>
+
+                          <div className="flex justify-between border-b hover:bg-gray-200">
+                            <p>Name:</p>
+                            <code className="bg-gray-200 rounded-full px-2">
+                              {channel.settings?.name}
+                            </code>
+                          </div>
+
+                          <div className="flex justify-between border-b hover:bg-gray-200">
+                            <p>PSK:</p>
+                            <code className="bg-gray-200 rounded-full px-2">
+                              {channel.settings?.psk.toLocaleString()}
+                            </code>
+                          </div>
+
+                          <div className="flex justify-between border-b hover:bg-gray-200">
+                            <p>Spread Factor:</p>
+                            <code className="bg-gray-200 rounded-full px-2">
+                              {channel.settings?.spreadFactor}
+                            </code>
+                          </div>
+
+                          <div className="flex justify-between border-b hover:bg-gray-200">
+                            <p>Tx Power:</p>
+                            <code className="bg-gray-200 rounded-full px-2">
+                              {channel.settings?.txPower}
+                            </code>
+                          </div>
+
+                          <div className="flex justify-between border-b hover:bg-gray-200">
+                            <p>Uplink:</p>
+                            <code className="bg-gray-200 rounded-full px-2">
+                              {channel.settings?.uplinkEnabled
+                                ? 'true'
+                                : 'false'}
+                            </code>
+                          </div>
+                          <div className="flex justify-between border-b hover:bg-gray-200">
+                            <p>Downlink:</p>
+                            <code className="bg-gray-200 rounded-full px-2">
+                              {channel.settings?.downlinkEnabled
+                                ? 'true'
+                                : 'false'}
+                            </code>
+                          </div>
+                        </div>
+                      }
+                    />
+                  }
+                />
+              );
+          })}
+        </>
+      }
+    />
+  );
+};
+
+export default SidebarChannels;
@@ -0,0 +1,106 @@
+import React from 'react';
+
+import { FaSave, FaUserCog } from 'react-icons/fa';
+
+import { IHTTPConnection, Protobuf } from '@meshtastic/meshtasticjs';
+
+import type { languageTemplate } from '../../App';
+import NavItem from '../NavItem';
+
+interface SidebarDeviceSettingsProps {
+  IsReady: boolean;
+  Preferences: Protobuf.RadioConfig_UserPreferences;
+  Connection: IHTTPConnection;
+  Translations: languageTemplate;
+}
+
+const SidebarDeviceSettings = (props: SidebarDeviceSettingsProps) => {
+  return (
+    <NavItem
+      isDropdown={true}
+      open={false}
+      isNested={false}
+      titleContent={
+        <div className="flex">
+          <FaUserCog className="my-auto mr-2" />
+          {props.Translations.device_settings_title}
+        </div>
+      }
+      isLoading={!props.IsReady}
+      dropdownContent={
+        <>
+          <div className="flex whitespace-nowrap p-3 justify-between border-b">
+            <div className="my-auto">
+              {props.Translations.device_region_title}
+            </div>
+            <div className="flex shadow-md rounded-md ml-2">
+              <select
+                value={props.Preferences?.region ?? Protobuf.RegionCode.Unset}
+                onChange={(e) => {
+                  props.Preferences.region = parseInt(e.target.value);
+                }}
+              >
+                <option value={Protobuf.RegionCode.ANZ}>
+                  {Protobuf.RegionCode[Protobuf.RegionCode.ANZ]}
+                </option>
+                <option value={Protobuf.RegionCode.CN}>
+                  {Protobuf.RegionCode[Protobuf.RegionCode.CN]}
+                </option>
+                <option value={Protobuf.RegionCode.EU433}>
+                  {Protobuf.RegionCode[Protobuf.RegionCode.EU433]}
+                </option>
+                <option value={Protobuf.RegionCode.EU865}>
+                  {Protobuf.RegionCode[Protobuf.RegionCode.EU865]}
+                </option>
+                <option value={Protobuf.RegionCode.JP}>
+                  {Protobuf.RegionCode[Protobuf.RegionCode.JP]}
+                </option>
+                <option value={Protobuf.RegionCode.KR}>
+                  {Protobuf.RegionCode[Protobuf.RegionCode.KR]}
+                </option>
+                <option value={Protobuf.RegionCode.TW}>
+                  {Protobuf.RegionCode[Protobuf.RegionCode.TW]}
+                </option>
+                <option value={Protobuf.RegionCode.US}>
+                  {Protobuf.RegionCode[Protobuf.RegionCode.US]}
+                </option>
+                <option value={Protobuf.RegionCode.Unset}>
+                  {Protobuf.RegionCode[Protobuf.RegionCode.Unset]}
+                </option>
+              </select>
+            </div>
+          </div>
+          <div className="flex whitespace-nowrap p-3 justify-between border-b">
+            <div className="my-auto">{props.Translations.device_wifi_ssid}</div>
+            <div className="flex shadow-md rounded-md ml-2">
+              <input
+                onChange={() => {}}
+                type="text"
+                value={props.Preferences.wifiSsid}
+              />
+            </div>
+          </div>
+          <div className="flex whitespace-nowrap p-3 justify-between border-b">
+            <div className="my-auto">{props.Translations.device_wifi_psk}</div>
+            <div className="flex shadow-md rounded-md ml-2">
+              <input type="password" value={props.Preferences.wifiPassword} />
+            </div>
+          </div>
+          <div className="flex group p-1 bg-gray-100 cursor-pointer hover:bg-gray-200 border-b">
+            <div
+              className="flex m-auto font-medium group-hover:text-gray-700"
+              onClick={() => {
+                props.Connection.setPreferences(props.Preferences);
+              }}
+            >
+              <FaSave className="m-auto mr-2 group-hover:text-gray-700" />
+              {props.Translations.save_changes_button}
+            </div>
+          </div>
+        </>
+      }
+    />
+  );
+};
+
+export default SidebarDeviceSettings;
@@ -0,0 +1,88 @@
+import React from 'react';
+
+import { FaDesktop, FaUsers } from 'react-icons/fa';
+
+import type { Types } from '@meshtastic/meshtasticjs';
+
+import type { languageTemplate } from '../../App';
+import NavItem from '../NavItem';
+
+interface sidebarNodesProps {
+  IsReady: boolean;
+  Nodes: Types.NodeInfoPacket[];
+  Translations: languageTemplate;
+}
+
+const SidebarNodes = (props: sidebarNodesProps) => {
+  return (
+    <NavItem
+      isDropdown={true}
+      open={false}
+      isNested={false}
+      titleContent={
+        <div className="flex">
+          <FaUsers className="my-auto mr-2" />
+          {props.Translations.nodes_title}
+          <div className="flex m-auto rounded-full bg-gray-300 w-6 h-6 text-sm ml-2">
+            <div className="m-auto">{props.Nodes.length ?? 0}</div>
+          </div>
+        </div>
+      }
+      isLoading={!props.IsReady}
+      dropdownContent={
+        props.Nodes.length ? (
+          props.Nodes.map((node, index) => (
+            <NavItem
+              key={index}
+              isDropdown={true}
+              isNested={true}
+              open={false}
+              titleContent={
+                <div key={index} className="flex">
+                  <FaDesktop className="my-auto mr-2" />
+                  <div className="m-auto">{node.data.user?.longName}</div>
+                </div>
+              }
+              dropdownContent={
+                <NavItem
+                  isDropdown={false}
+                  isNested={true}
+                  titleContent={
+                    <div>
+                      <p>
+                        SNR:{' '}
+                        {node.packet?.rxSnr ? node.packet.rxSnr : 'Unknown'}
+                      </p>
+                      <p>
+                        RSSI:{' '}
+                        {node.packet?.rxRssi ? node.packet.rxRssi : 'Unknown'}
+                      </p>
+                      <p>
+                        Last heard:{' '}
+                        {node.data?.lastHeard ? node.data.lastHeard : 'Unknown'}
+                      </p>
+                      <p>
+                        Loc:{' '}
+                        {node.data?.position
+                          ? `alt: ${node.data?.position.altitude}, lat: ${node.data?.position.latitudeI}, lng: ${node.data?.position.longitudeI}, time: ${node.data?.position.time}, batt: ${node.data?.position.batteryLevel}`
+                          : 'Unknown'}
+                      </p>
+                    </div>
+                  }
+                />
+              }
+            />
+          ))
+        ) : (
+          <div className="flex border-b border-gray-300">
+            <div className="m-auto p-3 text-gray-500">
+              {props.Translations.no_nodes_message}
+            </div>
+          </div>
+        )
+      }
+    />
+  );
+};
+
+export default SidebarNodes;
@@ -0,0 +1,110 @@
+import React from 'react';
+
+// import Flags from 'country-flag-icons/react/3x2';
+import { FaCog, FaLaptop, FaMoon, FaSun } from 'react-icons/fa';
+
+import type { languageTemplate } from '../../App';
+import { LanguageEnum } from '../../App';
+import ToggleSwitch from '../basic/ToggleSwitch';
+import NavItem from '../NavItem';
+
+interface SidebarUISettingsProps {
+  Language: LanguageEnum;
+  SetLanguage: Function;
+  Translations: languageTemplate;
+}
+
+const SidebarUISettings = (props: SidebarUISettingsProps) => {
+  return (
+    <NavItem
+      isDropdown={true}
+      isNested={false}
+      titleContent={
+        <div className="flex">
+          <FaCog className="my-auto mr-2" />
+          {props.Translations.ui_settings_title}
+        </div>
+      }
+      dropdownContent={
+        <>
+          <NavItem
+            isDropdown={false}
+            isNested={true}
+            titleContent={
+              <>
+                <div className="my-auto">
+                  {props.Translations.color_scheme_title}
+                </div>
+                <div className="flex shadow-md rounded-md ml-2">
+                  <div className="bg-gray-200 flex group p-2 rounded-l-md border border-gray-300 hover:bg-gray-200 cursor-pointer">
+                    <FaSun className="m-auto group-hover:text-gray-700" />
+                  </div>
+                  <div className="flex group p-2 border border-gray-300 hover:bg-gray-200 cursor-pointer">
+                    <FaMoon className="m-auto group-hover:text-gray-700" />
+                  </div>
+                  <div className="flex group p-2 rounded-r-md border border-gray-300 hover:bg-gray-200 cursor-pointer">
+                    <FaLaptop className="m-auto group-hover:text-gray-700" />
+                  </div>
+                </div>
+              </>
+            }
+          />
+          <NavItem
+            isDropdown={true}
+            isNested={true}
+            open={false}
+            titleContent={
+              <div className="flex my-auto">
+                {/* {props.Translations.language_title}
+                {props.Language === LanguageEnum.ENGLISH ? (
+                  <Flags.US className="ml-2 w-8 shadow-md" />
+                ) : props.Language === LanguageEnum.JAPANESE ? (
+                  <Flags.JP className="ml-2 w-8 shadow-md" />
+                ) : (
+                  ''
+                )} */}
+              </div>
+            }
+            dropdownContent={
+              <>
+                <NavItem
+                  onClick={() => {
+                    props.SetLanguage(LanguageEnum.ENGLISH);
+                  }}
+                  isDropdown={false}
+                  isNested={true}
+                  titleContent={
+                    <>{/* English <Flags.US className="w-8 shadow-md" /> */}</>
+                  }
+                />
+                <NavItem
+                  onClick={() => {
+                    props.SetLanguage(LanguageEnum.JAPANESE);
+                  }}
+                  isDropdown={false}
+                  isNested={true}
+                  titleContent={
+                    <>{/* 日本語 <Flags.JP className="w-8 shadow-md" /> */}</>
+                  }
+                />
+              </>
+            }
+          />
+          <NavItem
+            isDropdown={false}
+            isNested={true}
+            open={false}
+            titleContent={
+              <>
+                <div className="">Test</div>
+                <ToggleSwitch active={true} />
+              </>
+            }
+          />
+        </>
+      }
+    />
+  );
+};
+
+export default SidebarUISettings;
@@ -0,0 +1,9 @@
+import React from 'react';
+
+interface TimelineProps {}
+
+const Timeline = (props: TimelineProps) => {
+  return <div></div>;
+};
+
+export default Timeline;
@@ -0,0 +1,12 @@
+import React from 'react';
+
+interface TimelineItemProps {
+  time: number;
+  color: string;
+}
+
+const TimelineItem = (props: TimelineItemProps) => {
+  return <div className={`rounded-full h-6 w-6 bg-${props.color}`}>Test</div>;
+};
+
+export default TimelineItem;
@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from 'react';
+
+interface ToggleSwitchProps {
+  active: boolean;
+  toggle?: Function;
+}
+
+const ToggleSwitch = (props: ToggleSwitchProps) => {
+  const [active, setActive] = useState(false);
+
+  useEffect(() => {
+    setActive(props.active);
+  }, []);
+
+  return (
+    <div
+      onClick={() => {
+        setActive(!active);
+      }}
+      className={`w-12 h-6 flex items-center bg-gray-300 rounded-full p-1 duration-300 ease-in-out my-auto ${
+        active ? 'bg-green-400' : null
+      }`}
+    >
+      <div
+        className={`bg-white w-4 h-4 rounded-full shadow-md transform duration-300 ease-in-out ${
+          active ? 'translate-x-6' : null
+        }`}
+      ></div>
+    </div>
+  );
+};
+
+export default ToggleSwitch;
@@ -1,13 +1,3 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
-  <g fill="#61DAFB">
-    <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4a43.8 43.8 0 00-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9a487.8 487.8 0 00-41.6-50c32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9a467 467 0 00-63.6 11c-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4a44 44 0 0022.5 5.6c27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7a450.4 450.4 0 01-13.5 39.5 473.3 473.3 0 00-27.5-47.4c14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5a532.7 532.7 0 01-24.1 38.2 520.3 520.3 0 01-90.2.1 551.2 551.2 0 01-45-77.8 521.5 521.5 0 0144.8-78.1 520.3 520.3 0 0190.2-.1 551.2 551.2 0 0145 77.8 560 560 0 01-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8a448.8 448.8 0 01-41.2 8 552.4 552.4 0 0027.4-47.8zM421.2 430a412.3 412.3 0 01-27.8-32 619 619 0 0055.3 0c-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9a451.2 451.2 0 01-41-7.9c3.7-12.9 8.3-26.2 13.5-39.5a473.3 473.3 0 0027.5 47.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32a619 619 0 00-55.3 0c9-11.7 18.3-22.4 27.5-32zm-74 58.9a552.4 552.4 0 00-27.4 47.7c-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9a473.5 473.5 0 00-22.2 60.6c-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9a487.8 487.8 0 0041.6 50c-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9a467 467 0 0063.6-11 280 280 0 015.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9a473.5 473.5 0 0022.2-60.6c9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
-    <circle cx="420.9" cy="296.5" r="45.7"/>
-  </g>
-</svg>
@@ -0,0 +1,17 @@
+import type { languageTemplate } from '../App';
+
+export default {
+  no_messages_message: 'No messages yet',
+  ui_settings_title: 'UI Settings',
+  nodes_title: 'Nodes',
+  device_settings_title: 'Device Settings',
+  device_channels_title: 'Channels',
+  color_scheme_title: 'Color scheme',
+  language_title: 'Language',
+  device_region_title: 'Device Region',
+  device_wifi_ssid: 'WiFi SSID',
+  device_wifi_psk: 'WiFi PSK',
+  save_changes_button: 'Save changes',
+  no_nodes_message: 'No nodes found',
+  no_message_placeholder: 'Enter Message',
+} as languageTemplate;
@@ -0,0 +1,16 @@
+import type { languageTemplate } from '../App';
+
+export default {
+  no_messages_message: 'まだメッセージはありません',
+  ui_settings_title: 'UI設定',
+  nodes_title: 'ノード',
+  device_settings_title: 'デバイスの設定',
+  color_scheme_title: 'カラースキーム',
+  language_title: '言語',
+  device_region_title: 'デバイスリージョン',
+  device_wifi_ssid: 'WiFi名',
+  device_wifi_psk: 'WiFiパスワード',
+  save_changes_button: '変更内容を保存',
+  no_nodes_message: 'ノードが見つかりません',
+  no_message_placeholder: 'メッセージを入力してください',
+} as languageTemplate;