move input and info inside chat component

app.js

@@ -8,9 +8,7 @@ const sdk = require('matrix-js-sdk')
 
 const Sidebar = require('./components/sidebar.js')
 const Login = require('./components/Login.js')
-const Info = require('./components/info.js')
 const Chat = require('./components/chat.js')
-const Input = require('./components/input.js')
 
 // Things that will get settings:
 // colorscheme
@@ -88,10 +86,7 @@ let App = create({
       <>
         <Sidebar client={this.state.client} rooms={this.state.rooms} selectRoom={(roomId) => {this.setState({roomId: roomId})}}/>
         <div className="main">
-          <Info room={this.state.rooms[this.state.roomId]} />
           <Chat client={this.state.client} roomId={this.state.roomId}/>
-          {this.state.roomId !== undefined
-            && <Input client={this.state.client} roomId={this.state.roomId}/>}
         </div>
       </>
     )

components/chat.js

@@ -8,6 +8,8 @@ const jdenticon = require('jdenticon')
 const defaultValue = require('default-value')
 
 const Event = require('./events/Event.js')
+const Info = require('./info.js')
+const Input = require('./input.js')
 
 jdenticon.config = {
     lightness: {
@@ -103,11 +105,17 @@ let chat = create({
       })
     }
     //TODO: replace with something that only renders events in view
-    return <div className="chat" ref={this.setRef}>
-      <div className="events">
-        {events}
-      </div>
-    </div>
+    return (
+      <>
+        <Info room={room} />
+        <div className="chat" ref={this.setRef}>
+          <div className="events">
+            {events}
+          </div>
+        </div>
+        <Input client={this.state.client} roomId={this.state.roomId}/>
+      </>
+    )
   }
 })
 

components/input.js

@@ -11,14 +11,37 @@ let input = create({
     if (ref !=null) {
       ref.addEventListener("keydown", (e) => {
         // only send on plain 'enter'
-        if (e.key == "Enter" && !e.shiftKey && !e.altKey && !e.ctrlKey) {
-          this.send(e)
+        if (e.key == "Enter") {
+          if (!e.shiftKey && !e.altKey && !e.ctrlKey) {
+            this.send(e)
+            return
+          }
         }
       })
+      ref.addEventListener('change',  this.resize_textarea)
+      ref.addEventListener('cut',     this.resize_textarea_delayed)
+      ref.addEventListener('paste',   this.resize_textarea_delayed)
+      ref.addEventListener('drop',    this.resize_textarea_delayed)
+      ref.addEventListener('keydown', this.resize_textarea_delayed)
       this.setState({ref: ref})
     }
   },
 
+  resize_textarea: function(element) {
+    if (element == undefined) {
+      return;
+    }
+    let ref = element.target;
+    if (ref != undefined) {
+      ref.style.height = 'auto';
+      ref.style.height = ref.scrollHeight+'px';
+    }
+  },
+
+  resize_textarea_delayed: function(e) {
+    setTimeout(() => this.resize_textarea(e), 5);
+  },
+
   send: function(e) {
     let content = {
       "body": e.target.value,
@@ -32,7 +55,7 @@ let input = create({
 
   render: function() {
     return <div className="input">
-      <input ref={this.setRef} placeholder="unencrypted message"></input>
+      <textarea ref={this.setRef} rows="1" spellCheck="false" placeholder="unencrypted message"></textarea>
     </div>
   }
 })

public/scss/style.scss

@@ -18,6 +18,7 @@ $brown: #A3685A;
 $accent: $blue;
 
 $spacing: 0.7rem;
+$borderwidth: 0.2rem;
 
 @font-face {
   font-family: "Open Sans";
@@ -60,7 +61,7 @@ html, body {
   background: $bg1;
 }
 
-.input {
+.input, .info {
   background: $bg2;
 }
 
@@ -182,7 +183,7 @@ body {
   max-width: 15vw;
 
   .filter {
-    margin-bottom: $spacing;
+    border-bottom: $borderwidth solid $bg;
 
     input {
       width: 100%;
@@ -191,6 +192,8 @@ body {
       border: none;
       color: white;
       font-size: 1rem;
+      margin: 0;
+      font-weight: bold;
     }
   }
 }
@@ -251,6 +254,8 @@ body {
   padding: $spacing;
   color: $accent;
   font-weight: bold;
+  border-bottom: $borderwidth solid $bg;
+  box-sizing: border-box;
 }
 
 .chat {
@@ -324,14 +329,21 @@ body {
 
 .input {
   display: flex;
+  border-top: $borderwidth solid $bg;
 
-  input {
+  textarea {
     background: transparent;
     box-sizing: border-box;
     flex: 1 1 auto;
     padding: $spacing;
     font-size: 1.2rem;
     border: none;
+
+    resize: none;
+    overflow: hidden;
+    overflow-y: auto;
+    outline: none;
+    max-height: 150px;
   }
 }