implemented input validation on the sidebar and added styles for disabled state

Author: Shifat7

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>

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 {