web/composer: add support for multiline input

web/src/ui/MessageComposer.css

@@ -0,0 +1,18 @@
+div.message-composer {
+	display: flex;
+	border-top: 1px solid #ccc;
+	> textarea {
+		flex: 1;
+		resize: none;
+		font-family: sans-serif;
+		height: auto;
+		padding: .5rem;
+		border: none;
+		outline: none;
+	}
+	> button {
+		padding: .5rem;
+		border: none;
+		background: none;
+	}
+}

web/src/ui/MessageComposer.tsx

@@ -16,6 +16,7 @@
 import React, { use, useCallback, useState } from "react"
 import { RoomStateStore } from "../api/statestore.ts"
 import { ClientContext } from "./ClientContext.ts"
+import "./MessageComposer.css"
 
 interface MessageComposerProps {
 	room: RoomStateStore
@@ -30,16 +31,21 @@ const MessageComposer = ({ room }: MessageComposerProps) => {
 		client.rpc.sendMessage(room.roomID, text)
 			.catch(err => window.alert("Failed to send message: " + err))
 	}, [text, room, client])
-	return <form className="message-composer" onSubmit={sendMessage}>
-		<input
+	return <div className="message-composer" onSubmit={sendMessage}>
+		<textarea
 			autoFocus
-			type="text"
+			rows={text.split("\n").length}
 			value={text}
+			onKeyDown={evt => {
+				if (evt.key === "Enter" && !evt.shiftKey) {
+					sendMessage(evt)
+				}
+			}}
 			onChange={evt => setText(evt.target.value)}
 			placeholder="Send a message"
 		/>
 		<button type="submit">Send</button>
-	</form>
+	</div>
 }
 
 export default MessageComposer

web/src/ui/RoomView.css

@@ -2,10 +2,11 @@ div.room-view {
 	overflow: hidden;
 	height: 100%;
 	display: grid;
+	border-left: 2px solid #ccc;
 	grid-template:
 		"header" 3rem
 		"messageview" 1fr
-		"input" 2rem
+		"input" auto
 		/ 1fr;
 
 	> div.room-header {
@@ -20,10 +21,3 @@ div.room-view {
 		}
 	}
 }
-
-form.message-composer {
-	display: flex;
-	> input {
-		flex: 1;
-	}
-}