initial direct message input styling

src/data/directMessages.ts

@@ -165,6 +165,8 @@ export async function getAllUnread(friends: Friend[], connections: Connection[])
 }
 
 export async function sendDm(fromId: string, fromName: string, con: Connection, message: string) {
+	if(!message) throw new Error('cannot send an empty message')
+
 	const dm: DM = {
 		toId: con.id,
 		fromId,

src/main.css

@@ -200,15 +200,16 @@ body {
 .dm-chat {
 	border-top: 1px solid var(--separator-color);
 	padding: 0.5rem;
+	display: grid;
 
 	.dm-list {
 		display: grid;
-        grid-template-columns: min-content 1fr;
+		grid-template-columns: min-content 1fr;
 
 		.dm {
 			display: grid;
 			column-gap: 1rem;
-			margin-block: 1rem;
+			margin-block-end: 1rem;
 			grid-template-columns: subgrid;
 			grid-column: span 2;
 
@@ -234,13 +235,14 @@ body {
 				flex-wrap: wrap;
 				column-gap: 1rem;
 				align-items: center;
-				white-space: nowrap;
 				max-height: min-content;
 				transition: backdrop-filter 300ms;
-
+				
 				.dm-sender {
 					font-weight: bold;
+					white-space: nowrap;
 				}
+
 				.dm-content {
 					flex-basis: 100%;
 				}
@@ -257,7 +259,8 @@ body {
 				display: grid;
 				grid-template-columns: subgrid;
 				transition: backdrop-filter 300ms;
-
+				margin-block-start: 0.25rem;
+
 				.dm-timestamp {
 					opacity: 0;
 					transition: opacity 200ms;
@@ -274,6 +277,31 @@ body {
 
 		}
 	}
+
+	.dm-send {
+		position: relative;
+		background: transparent;
+		display: flex;
+
+		.dm-send-input {
+			margin: 1rem;
+			padding: 1rem;
+			background: transparent;
+			border: 1px solid #ffffff1c;
+			border-radius: 1rem;
+			flex-grow: 1;
+			padding-inline-end: 2.5rem;
+		}
+
+		.dm-send-button {
+			position: absolute;
+			right: 1rem;
+			margin-block: 1rem;
+			padding: 1rem;
+			border: 0;
+			background: none;
+		}
+	}
 }
 
 .connections {

src/main.tsx

@@ -88,20 +88,32 @@ const App = () => {
 
 	const onMessageKeyDown = async (e: KeyboardEvent, con: Connection) => {
 		const input = e.target as HTMLTextAreaElement
-		if (e.key === 'Enter') {
-			const value = input.value
-			input.value = ''
-
-			try {
-				const self = server.self()
-				await directMessages.sendDm(self.id, self.identity?.name, con, value)
-				updateDmDisplay(con)
-			} catch (err) {
-				setDmError(err.message)
-			}
+		const value = input.value?.trim()
+		if (e.key === 'Enter' && value) {
+			input.value = '';
+			sendDm(con, value);
 		}
 	}
 
+	const onSendButtonClick = async (input: HTMLTextAreaElement, con: Connection) => {
+		const value = input.value?.trim()
+		if (value) {
+			input.value = '';
+			sendDm(con, value);
+		}
+	}
+
+	async function sendDm(con: Connection, value: string) {
+		try {
+			const self = server.self();
+			await directMessages.sendDm(self.id, self.identity?.name, con, value);
+			updateDmDisplay(con);
+		} catch (err) {
+			setDmError(err.message);
+		}
+	}
+
+
 	directMessages.onNewMessage((dm: DM) => {
 		const con = server.connections.find(c => c.id === dm.fromId)
 		updateDmDisplay(con)
@@ -229,7 +241,7 @@ const App = () => {
 			</div>
 			<Show when={selectedDmTarget()}>
 				<div class="dm-chat">
-					<h2>dm with {selectedDmTarget().identity?.name}</h2>
+					<h2>Chat with {selectedDmTarget().identity?.name}</h2>
 					<Show when={dmError()}>ERROR: {dmError()}</Show>
 					<Show when={!dmError()}>
 						<span onclick={() => showDmConversation(null)}>close</span>
@@ -261,7 +273,14 @@ const App = () => {
 								}}
 							</For>
 						</div>
-						<input type="text" onKeyDown={(e) => onMessageKeyDown(e, selectedDmTarget())} />
+						<div class="dm-send">
+							<input
+								class='dm-send-input'
+								type="text"
+								placeholder={`Message ${selectedDmTarget().identity?.name}...`}
+								onKeyDown={(e) => onMessageKeyDown(e, selectedDmTarget())} />
+							<button class='dm-send-button' onclick={(e) => onSendButtonClick(e.target.previousElementSibling as HTMLTextAreaElement, selectedDmTarget())}>⏎</button>
+						</div>
 						<span class='latest-dm' id={`con${selectedDmTarget().id}`}></span>
 					</Show>
 				</div>