From c462a0f7b9455a1f2ddde721b406c4d279bf1f7a Mon Sep 17 00:00:00 2001
From: Shifat Rahman <shifatrahman@gmail.com>
Date: Sat, 26 Apr 2025 11:55:02 +1000
Subject: [PATCH 1/2] implemented input validation on the sidebar and added
 styles for disabled state

---
 src/components/side-panel/SidePanel.tsx   | 22 +++++++++++++++++-----
 src/components/side-panel/side-panel.scss |  6 ++++++
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/side-panel/SidePanel.tsx b/src/components/side-panel/SidePanel.tsx
index 26aef5943..2a53a776c 100644
--- a/src/components/side-panel/SidePanel.tsx
+++ b/src/components/side-panel/SidePanel.tsx
@@ -64,12 +64,20 @@ export default function SidePanel() {
     };
   }, [client, log]);
 
+  // Helper function to check if input is valid (not empty and not just whitespace)
+  const isValidInput = (input: string): boolean => {
+    return input.trim().length > 0;
+  };
+
   const handleSubmit = () => {
-    client.send([{ text: textInput }]);
+    // Only send if the input is valid
+    if (isValidInput(textInput)) {
+      client.send([{ text: textInput }]);
 
-    setTextInput("");
-    if (inputRef.current) {
-      inputRef.current.innerText = "";
+      setTextInput("");
+      if (inputRef.current) {
+        inputRef.current.innerText = "";
+      }
     }
   };
 
@@ -135,7 +143,10 @@ export default function SidePanel() {
               if (e.key === "Enter" && !e.shiftKey) {
                 e.preventDefault();
                 e.stopPropagation();
-                handleSubmit();
+                // Only submit if input is valid
+                if (isValidInput(textInput)) {
+                  handleSubmit();
+                }
               }
             }}
             onChange={(e) => setTextInput(e.target.value)}
@@ -152,6 +163,7 @@ export default function SidePanel() {
           <button
             className="send-button material-symbols-outlined filled"
             onClick={handleSubmit}
+            disabled={!isValidInput(textInput) || !connected}
           >
             send
           </button>
diff --git a/src/components/side-panel/side-panel.scss b/src/components/side-panel/side-panel.scss
index 97d34cf3d..7c9f8bc8c 100644
--- a/src/components/side-panel/side-panel.scss
+++ b/src/components/side-panel/side-panel.scss
@@ -166,6 +166,12 @@
         &:hover {
           color: var(--Neutral-60);
         }
+        
+        &:disabled {
+          color: var(--Neutral-15);
+          cursor: not-allowed;
+          opacity: 0.6;
+        }
       }
 
       .input-area {

From 61655b623a7338deaf92d58dd9713c2ef04b96ed Mon Sep 17 00:00:00 2001
From: Shifat Rahman <shifatrahman@gmail.com>
Date: Sat, 26 Apr 2025 11:57:44 +1000
Subject: [PATCH 2/2] cleanup

---
 src/components/side-panel/SidePanel.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/side-panel/SidePanel.tsx b/src/components/side-panel/SidePanel.tsx
index 2a53a776c..682b57a33 100644
--- a/src/components/side-panel/SidePanel.tsx
+++ b/src/components/side-panel/SidePanel.tsx
@@ -64,13 +64,11 @@ export default function SidePanel() {
     };
   }, [client, log]);
 
-  // Helper function to check if input is valid (not empty and not just whitespace)
   const isValidInput = (input: string): boolean => {
     return input.trim().length > 0;
   };
 
   const handleSubmit = () => {
-    // Only send if the input is valid
     if (isValidInput(textInput)) {
       client.send([{ text: textInput }]);
 
@@ -143,7 +141,6 @@ export default function SidePanel() {
               if (e.key === "Enter" && !e.shiftKey) {
                 e.preventDefault();
                 e.stopPropagation();
-                // Only submit if input is valid
                 if (isValidInput(textInput)) {
                   handleSubmit();
                 }