web/roomcreate: add alias field and fix fonts

web/src/index.css

@@ -195,6 +195,7 @@ input, textarea {
 	color: inherit;
 	background-color: inherit;
 	font-size: 1em;
+	font-family: var(--font-stack);
 }
 
 button, a.button, span.button {

web/src/ui/roomview/CreateRoomView.css

@@ -5,13 +5,12 @@ form.create-room-view {
 
 	width: 100%;
 
-	input, select, textarea {
+	input, select, textarea, .room-alias-container {
 		box-sizing: border-box;
 		width: 100%;
 		padding: .5rem;
 		border: 1px solid var(--border-color);
 		border-radius: .25rem;
-		font-family: var(--monospace-font-stack);
 		font-size: 1em;
 		background-color: var(--background-color);
 
@@ -29,6 +28,16 @@ form.create-room-view {
 		resize: vertical;
 	}
 
+	.room-alias-container {
+		display: flex;
+
+		> input {
+			padding: 0;
+			border: none;
+			border-radius: 0;
+		}
+	}
+
 	div.form-fields {
 		display: grid;
 		grid-template-columns: auto 1fr;
@@ -39,7 +48,7 @@ form.create-room-view {
 			grid-column: 1;
 		}
 
-		> input, > select, > textarea {
+		> input, > select, > textarea, > .room-alias-container {
 			grid-column: 2;
 
 			&#room-create-id {
@@ -89,6 +98,10 @@ form.create-room-view {
 			"content content" 1fr;
 		margin-bottom: .5rem;
 
+		> input {
+			font-family: var(--monospace-font-stack);
+		}
+
 		> input.state-event-type {
 			grid-area: type;
 		}

web/src/ui/roomview/CreateRoomView.tsx

@@ -39,6 +39,7 @@ const CreateRoomView = () => {
 	const [preset, setPreset] = useState<RoomPreset>("private_chat")
 	const [name, setName] = useState("")
 	const [topic, setTopic] = useState("")
+	const [aliasLocalpart, setAliasLocalpart] = useState("")
 	const [invite, setInvite] = useState<UserID[]>([])
 	const [isDirect, setIsDirect] = useState(false)
 	const [isEncrypted, setIsEncrypted] = useState(true)
@@ -91,6 +92,7 @@ const CreateRoomView = () => {
 		client.rpc.createRoom({
 			name: name || undefined,
 			topic: topic || undefined,
+			room_alias_name: aliasLocalpart || undefined,
 			preset,
 			is_direct: isDirect,
 			invite: invite.filter(id => !!id),
@@ -135,6 +137,18 @@ const CreateRoomView = () => {
 				value={topic}
 				onChange={e => setTopic(e.target.value)}
 			/>
+			<label htmlFor="room-create-alias" title="The alias for the room">Alias</label>
+			<label className="room-alias-container">
+				#
+				<input
+					id="room-create-alias"
+					type="text"
+					placeholder="meow"
+					value={aliasLocalpart}
+					onChange={e => setAliasLocalpart(e.target.value)}
+				/>
+				:{serverName}
+			</label>
 			<label htmlFor="room-create-encrypted" title="Whether the room is encrypted">
 				Encrypted
 			</label>