Cleanups in the web UI & licensure fixes

Properly scrolls on input, nicer font and spacing

.licensure.yml

@@ -31,6 +31,24 @@ comments:
       type: line
       comment_char: "//"
       trailing_lines: 1
+  - columns: 80
+    extension: ts
+    commenter:
+      type: line
+      comment_char: "//"
+      trailing_lines: 1
+  - columns: 80
+    extension: tsx
+    commenter:
+      type: line
+      comment_char: "//"
+      trailing_lines: 1
+  - columns: 80
+    extension: jsx
+    commenter:
+      type: line
+      comment_char: "//"
+      trailing_lines: 1
   - columns: 80
     extension: fbs
     commenter:
@@ -53,4 +71,5 @@ excludes:
   - LICENSE.*
   - Dockerfile
   - core
-  - .*\.(md|rst|txt|yml|png|jpg|gif|db|pem|lock|json|toml|in|out|html|moot|edn|node)
+  - node_modules
+  - .*\.(md|rst|txt|yml|png|jpg|gif|db|pem|lock|json|toml|in|out|html|moot|edn|node|css)

frontend/cypress.config.ts

@@ -1,3 +1,16 @@
+// Copyright (C) 2025 Ryan Daum <[email protected]> This program is free
+// software: you can redistribute it and/or modify it under the terms of the GNU
+// General Public License as published by the Free Software Foundation, version
+// 3.
+//
+// This program is distributed in the hope that it will be useful, but WITHOUT
+// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+// FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License along with
+// this program. If not, see <https://www.gnu.org/licenses/>.
+//
+
 import { defineConfig } from 'cypress';
 
 export default defineConfig({

frontend/cypress/support/commands.ts

@@ -1,3 +1,16 @@
+// Copyright (C) 2025 Ryan Daum <[email protected]> This program is free
+// software: you can redistribute it and/or modify it under the terms of the GNU
+// General Public License as published by the Free Software Foundation, version
+// 3.
+//
+// This program is distributed in the hope that it will be useful, but WITHOUT
+// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+// FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License along with
+// this program. If not, see <https://www.gnu.org/licenses/>.
+//
+
 /// <reference types="cypress" />
 // ***********************************************
 // This example commands.ts shows you how to

frontend/cypress/support/e2e.ts

@@ -1,3 +1,16 @@
+// Copyright (C) 2025 Ryan Daum <[email protected]> This program is free
+// software: you can redistribute it and/or modify it under the terms of the GNU
+// General Public License as published by the Free Software Foundation, version
+// 3.
+//
+// This program is distributed in the hope that it will be useful, but WITHOUT
+// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+// FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License along with
+// this program. If not, see <https://www.gnu.org/licenses/>.
+//
+
 // ***********************************************************
 // This example support/e2e.ts is processed and
 // loaded automatically before your test files.

frontend/src/App.css

@@ -0,0 +1,21 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap');
+
+/*"messages" class name should use a mono font, take up the full width of the screen, and have a height of 50vh.*/
+.messages {
+    font-family: 'Roboto Mono', monospace;
+  width: 100%;
+}
+
+.inputArea {
+    width: 100%;
+}
+
+.inputField {
+    font-family: 'Roboto Mono', monospace;
+    /* stretch to fill the width of the div, except for the submit button beside us */
+    width: calc(100% - 100px);
+}
+.inputSubmitButton {
+    font-family: 'Roboto Mono', monospace;
+    width: 80px;
+}

frontend/src/App.tsx

@@ -1,11 +1,66 @@
-import { useEffect, useState } from "react";
+// Copyright (C) 2025 Ryan Daum <[email protected]> This program is free
+// software: you can redistribute it and/or modify it under the terms of the GNU
+// General Public License as published by the Free Software Foundation, version
+// 3.
+//
+// This program is distributed in the hope that it will be useful, but WITHOUT
+// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+// FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License along with
+// this program. If not, see <https://www.gnu.org/licenses/>.
+//
+
+import { useEffect, useState, useRef } from "react";
 import "./App.css";
 
+const Messages = ({ messages }) => {
+	const messagesEndRef = useRef(null);
+	const scrollToBottom = () => {
+		messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+	};
+	useEffect(scrollToBottom, [messages]);
+
+	return (
+		<div className="messages">
+			{messages.map(message => (
+				<div key={message}>{message}</div>
+			))}
+			<div ref={messagesEndRef} />
+		</div>
+	);
+};
+
+const InputField = ({ setMessage, sendMessage }) => {
+	const inputRef = useRef(null);
+	const onEntry = () => {
+		inputRef.current.focus();
+		sendMessage();
+		inputRef.current.value = "";
+	};
+	return (
+		<div className="inputArea">
+			<input
+				onChange={(e) => setMessage(e.target.value)}
+				type="text"
+				ref={inputRef}
+				placeholder="message"
+				className="inputField"
+				onKeyDown={(e) => e.key === "Enter" && onEntry()}
+			/>
+			<button onClick={onEntry} className="inputSubmitButton" type="button">
+				Send
+			</button>
+		</div>
+	);
+}
 function App() {
 	const [messages, setMessages] = useState([]);
 	const [socket, setSocket] = useState(null);
 	const [message, setMessage] = useState("");
 
+
+
 	function sendMessage() {
 		socket.send(
 			JSON.stringify({
@@ -33,26 +88,11 @@ function App() {
 
 	return (
 		<div>
-			<div>
-				{messages.map((m, index) => (
-					<div key={index}>
-						{m}
-					</div>
-				))}
-			</div>
-			<div>
-				<input
-					onChange={(e) => setMessage(e.target.value)}
-					type="text"
-					placeholder="message"
-					onKeyDown={(e) => e.key === "Enter" && sendMessage()}
-				/>
-				<button onClick={sendMessage}>
-					Send
-				</button>
-			</div>
+			<Messages messages={messages} />
+			<InputField setMessage={setMessage} sendMessage={sendMessage} />
 		</div>
 	);
 }
 
+
 export default App;

frontend/src/host.ts

@@ -1,3 +1,15 @@
+// Copyright (C) 2025 Ryan Daum <[email protected]> This program is free
+// software: you can redistribute it and/or modify it under the terms of the GNU
+// General Public License as published by the Free Software Foundation, version
+// 3.
+//
+// This program is distributed in the hope that it will be useful, but WITHOUT
+// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+// FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License along with
+// this program. If not, see <https://www.gnu.org/licenses/>.
+//
 
 import {Host, Connection} from 'moor-node-host';
 import {readFileSync, writeFileSync} from 'node:fs';

frontend/src/main.tsx

@@ -1,3 +1,16 @@
+// Copyright (C) 2025 Ryan Daum <[email protected]> This program is free
+// software: you can redistribute it and/or modify it under the terms of the GNU
+// General Public License as published by the Free Software Foundation, version
+// 3.
+//
+// This program is distributed in the hope that it will be useful, but WITHOUT
+// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+// FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License along with
+// this program. If not, see <https://www.gnu.org/licenses/>.
+//
+
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.tsx';

frontend/src/vite-env.d.ts

@@ -1 +1,14 @@
+// Copyright (C) 2025 Ryan Daum <[email protected]> This program is free
+// software: you can redistribute it and/or modify it under the terms of the GNU
+// General Public License as published by the Free Software Foundation, version
+// 3.
+//
+// This program is distributed in the hope that it will be useful, but WITHOUT
+// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+// FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License along with
+// this program. If not, see <https://www.gnu.org/licenses/>.
+//
+
 /// <reference types="vite/client" />

frontend/vite.config.ts

@@ -1,3 +1,16 @@
+// Copyright (C) 2025 Ryan Daum <[email protected]> This program is free
+// software: you can redistribute it and/or modify it under the terms of the GNU
+// General Public License as published by the Free Software Foundation, version
+// 3.
+//
+// This program is distributed in the hope that it will be useful, but WITHOUT
+// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+// FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License along with
+// this program. If not, see <https://www.gnu.org/licenses/>.
+//
+
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react-swc';
 import { startupHost, startWebSocketServer } from './src/host';