web/roomlist: add button and keyboard shortcut to clear search filter

web/src/ui/roomlist/RoomList.css

@@ -15,13 +15,28 @@ div.room-list {
 	flex: 1;
 }
 
-input.room-search {
+div.room-search-wrapper {
 	width: 100%;
-	padding: 1rem;
+	display: flex;
-	box-sizing: border-box;
+	align-items: center;
-	border: none;
+	height: 3rem;
 	background-color: var(--room-list-search-background-overlay);
-	outline: none;
+
+	> input {
+		padding: 0 0 0 1rem;
+		height: 3rem;
+		box-sizing: border-box;
+		border: none;
+		outline: none;
+		background-color: transparent;
+		flex: 1;
+	}
+
+	> button {
+		height: 3rem;
+		width: 3rem;
+		border-radius: 0;
+	}
 }
 
 div.room-entry {

web/src/ui/roomlist/RoomList.tsx

@@ -19,7 +19,10 @@ import { useEventAsState } from "@/util/eventdispatcher.ts"
 import reverseMap from "@/util/reversemap.ts"
 import toSearchableString from "@/util/searchablestring.ts"
 import ClientContext from "../ClientContext.ts"
+import { keyToString } from "../keybindings.ts"
 import Entry from "./Entry.tsx"
+import CloseIcon from "@/icons/close.svg?react"
+import SearchIcon from "@/icons/search.svg?react"
 import "./RoomList.css"
 
 interface RoomListProps {
@@ -38,17 +41,34 @@ const RoomList = ({ activeRoomID }: RoomListProps) => {
 		client.store.currentRoomListFilter = toSearchableString(evt.target.value)
 		setRealRoomFilter(client.store.currentRoomListFilter)
 	}, [client])
+	const clearQuery = useCallback(() => {
+		setRoomFilter("")
+		client.store.currentRoomListFilter = ""
+		setRealRoomFilter("")
+		roomFilterRef.current?.focus()
+	}, [client])
+	const onKeyDown = useCallback((evt: React.KeyboardEvent<HTMLInputElement>) => {
+		if (keyToString(evt) === "Escape") {
+			clearQuery()
+		}
+	}, [clearQuery])
 
 	return <div className="room-list-wrapper">
-		<input
+		<div className="room-search-wrapper">
-			value={roomFilter}
+			<input
-			onChange={updateRoomFilter}
+				value={roomFilter}
-			className="room-search"
+				onChange={updateRoomFilter}
-			type="text"
+				onKeyDown={onKeyDown}
-			placeholder="Search rooms"
+				className="room-search"
-			ref={roomFilterRef}
+				type="text"
-			id="room-search"
+				placeholder="Search rooms"
-		/>
+				ref={roomFilterRef}
+				id="room-search"
+			/>
+			<button onClick={clearQuery} disabled={roomFilter === ""}>
+				{roomFilter !== "" ? <CloseIcon/> : <SearchIcon/>}
+			</button>
+		</div>
 		<div className="room-list">
 			{reverseMap(roomList, room =>
 				<Entry