Add settings component and extra settings

package.json

@@ -67,4 +67,4 @@
     "eslint-plugin-prettier": "^4.0.0",
     "prettier": "^2.6.2"
   }
-}
+}

src/App.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 
 import "./styles/index.scss";
-import { ConnectionSettings } from "./components/ConnectionSettings";
 import { Prompt } from "./components/Prompt";
 import { Conversation } from "./components/Conversation";
 import { UpdateMessage } from "./components/updateMessage";
 import { NavBar } from "./components/Navbar";
+import { Settings } from "./components/Settings";
 
 function App() {
   return (
     <div className="App">
       <NavBar />
       <UpdateMessage />
-      <ConnectionSettings />
+      <Settings />
       <Conversation />
       <Prompt />
     </div>

src/components/Prompt.tsx

@@ -17,9 +17,10 @@ export const Prompt = (): React.ReactElement => {
       focus();
     };
   }, []);
-  const { connected, showSettings } = UIStore.useState((s) => ({
+  const { connected, showSettings, username } = UIStore.useState((s) => ({
     connected: s.connection.connected,
     showSettings: s.clientSettings.showSettings,
+    username: s.username,
   }));
   const [input, setInput] = useState<inputState>({
     text: "",
@@ -49,7 +50,7 @@ export const Prompt = (): React.ReactElement => {
             UIStore.update((s) => {
               s.conversation.push({
                 text: input.text,
-                user: "user",
+                user: username,
                 timestamp: new Date(),
                 image: imageUrl,
               });
@@ -59,7 +60,7 @@ export const Prompt = (): React.ReactElement => {
           UIStore.update((s) => {
             s.conversation.push({
               text: input.text,
-              user: "user",
+              user: username,
               timestamp: new Date(),
             });
           });
@@ -101,7 +102,7 @@ export const Prompt = (): React.ReactElement => {
   };
 
   return (
-    <div className="prompt">
+    <div className={showSettings ? "prompt inactive" : "prompt active"}>
       <input
         type="text"
         ref={promptRef}
@@ -116,11 +117,11 @@ export const Prompt = (): React.ReactElement => {
       <span
         id="status-indicator"
         onClick={toggleConnectionSettings}
-        className={connected ? "active" : "inactive"}
+        className={connected ? "show" : "hide"}
       >
         <span
           id="status-indicator-tooltip"
-          className={input.showTooltip ? "active" : "inactive"}
+          className={input.showTooltip ? "show" : "inactive"}
         >
           {connected ? "connected" : "disconnected"}
         </span>

src/components/Settings/AppearanceSettings.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { UIStore } from "../../store";
+import PaletteSwatchOutlineIcon from "../../icons/paletteOutlineIcon";
+
+export const AppearanceSettings = (): React.ReactElement => {
+  const { darkTheme } = UIStore.useState((s) => ({
+    darkTheme: s.appearance.darkTheme,
+  }));
+  const toggleDarkTheme = () => {
+    UIStore.update((s) => {
+      s.appearance.darkTheme = !darkTheme;
+    });
+  };
+
+  const updateAccentColor = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
+    const color = e.currentTarget.value;
+    switch (color) {
+      case "green":
+        UIStore.update((s) => {
+          s.appearance.accentColor = "green";
+        });
+        break;
+      case "blue":
+        UIStore.update((s) => {
+          s.appearance.accentColor = "blue";
+        });
+        break;
+    }
+  };
+  return (
+    <div>
+      <h2 className="flex align-items-center">
+        <PaletteSwatchOutlineIcon className="settings-icon" />
+        {" Appearance Settings"}
+      </h2>
+      <div className="flex flex-column padding-left">
+        <div className="flex align-items-center">
+          <p className="padding-right settings-text">Dark Theme</p>
+          <label className="switch">
+            <input
+              type="checkbox"
+              role="triggerDarkTheme"
+              checked={darkTheme}
+              onChange={toggleDarkTheme}
+            />
+            <span className="slider round" />
+          </label>
+        </div>
+        <div className="flex align-items-center">
+          <p className="padding-right settings-text">Accent Color</p>
+          <button
+            onClick={updateAccentColor}
+            value="blue"
+            className="accentButton blue padding-left"
+          />
+          <button
+            onClick={updateAccentColor}
+            value="green"
+            className="accentButton green padding-right"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/Settings/ConnectionSettings.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { UIStore } from "../../store";
+import BxLinkIcon from "../../icons/connectIcon";
+
+export const ConnectionSettings = (): React.ReactElement => {
+  const { host, port, sslEnabled } = UIStore.useState((s) => ({
+    host: s.clientSettings.host,
+    port: s.clientSettings.port,
+    sslEnabled: s.clientSettings.sslEnabled,
+  }));
+
+  const toggleSSL = () => {
+    UIStore.update((s) => {
+      s.clientSettings.sslEnabled = !sslEnabled;
+    });
+  };
+
+  const updatePort = (e: React.FormEvent<HTMLInputElement>) => {
+    UIStore.update((s) => {
+      s.clientSettings.port = e.currentTarget.value;
+    });
+  };
+
+  const updateHost = (e: React.FormEvent<HTMLInputElement>) => {
+    UIStore.update((s) => {
+      s.clientSettings.host = e.currentTarget.value;
+    });
+  };
+
+  return (
+    <div id="connection-settings">
+      <h2 className="flex align-items-center">
+        <BxLinkIcon className="settings-icon" />
+        {" Connection Settings"}
+      </h2>
+      <div className="flex flex-column padding-left">
+        <div className="flex align-items-center">
+          <p className="padding-right settings-text">SSL</p>
+          <label className="switch">
+            <input
+              type="checkbox"
+              role="toggleSSL"
+              checked={sslEnabled}
+              onChange={toggleSSL}
+            />
+            <span className="slider round" />
+          </label>
+        </div>
+        <div className="flex align-items-center">
+          <p className="padding-right settings-text">Host</p>
+          <input
+            type="text"
+            id="host"
+            placeholder={host}
+            defaultValue={host}
+            onChange={updateHost}
+          />
+        </div>
+        <div className="flex align-items-center">
+          <p className="padding-right settings-text">Port</p>
+          <input
+            type="text"
+            id="port"
+            placeholder={port}
+            defaultValue={port}
+            onChange={updatePort}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/Settings/SecuritySettings.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { UIStore } from "../../store";
+import LockIcon from "../../icons/lockOutlineIcon";
+
+export const SecuritySettings = (): React.ReactElement => {
+  const { token } = UIStore.useState((s) => ({
+    token: s.clientSettings.token,
+  }));
+
+  const updateWebsocketToken = (e: React.FormEvent<HTMLInputElement>) => {
+    UIStore.update((s) => {
+      s.clientSettings.token = e.currentTarget.value;
+    });
+  };
+
+  return (
+    <div id="connection-settings">
+      <h2 className="flex align-items-center">
+        <LockIcon className="settings-icon" />
+        {" Security Settings"}
+      </h2>
+      <div className="flex flex-column padding-left">
+        <div className="flex align-items-center">
+          <p className="padding-right settings-text">Token</p>
+          <input
+            type="text"
+            id="token"
+            placeholder="websocket token"
+            defaultValue={token}
+            onChange={updateWebsocketToken}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/Settings/UserSettings.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { UIStore } from "../../store";
+import PersonIcon from "../../icons/personOutlineIcon";
+
+export const UserSettings = (): React.ReactElement => {
+  const { username } = UIStore.useState((s) => ({
+    username: s.username,
+  }));
+
+  const updateUsername = (e: React.FormEvent<HTMLInputElement>) => {
+    UIStore.update((s) => {
+      s.username = e.currentTarget.value;
+    });
+  };
+
+  return (
+    <div>
+      <h2 className="flex align-items-center">
+        <PersonIcon className="settings-icon" />
+        {" User Settings"}
+      </h2>
+      <div className="flex flex-column padding-left">
+        <div className="flex align-items-center">
+          <p className="padding-right settings-text">Username</p>
+          <input
+            type="text"
+            id="username"
+            placeholder={username}
+            defaultValue={username}
+            onChange={updateUsername}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/Settings/index.tsx

@@ -0,0 +1,19 @@
+import { UIStore } from "../../store";
+import { ConnectionSettings } from "./ConnectionSettings";
+import { SecuritySettings } from "./SecuritySettings";
+import { UserSettings } from "./UserSettings";
+import { AppearanceSettings } from "./AppearanceSettings";
+
+export const Settings = (): React.ReactElement => {
+  const { showSettings } = UIStore.useState((s) => ({
+    showSettings: s.clientSettings.showSettings,
+  }));
+  return (
+    <div id="settings" className={showSettings ? "active" : "inactive"}>
+      <UserSettings />
+      <ConnectionSettings />
+      <SecuritySettings />
+      <AppearanceSettings />
+    </div>
+  );
+};