From a31c68fc5d55322f8e5c36e7fd71a8fc86d22de2 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Sat, 2 Nov 2024 19:50:54 +0200
Subject: [PATCH] web/roomlist: add button and keyboard shortcut to clear
 search filter

---
 web/src/ui/roomlist/RoomList.css | 25 ++++++++++++++++-----
 web/src/ui/roomlist/RoomList.tsx | 38 ++++++++++++++++++++++++--------
 2 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/web/src/ui/roomlist/RoomList.css b/web/src/ui/roomlist/RoomList.css
index 408a18b..9cdc6ff 100644
--- a/web/src/ui/roomlist/RoomList.css
+++ b/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;
-	box-sizing: border-box;
-	border: none;
+	display: flex;
+	align-items: center;
+	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 {
diff --git a/web/src/ui/roomlist/RoomList.tsx b/web/src/ui/roomlist/RoomList.tsx
index c4ad5a0..61bf75e 100644
--- a/web/src/ui/roomlist/RoomList.tsx
+++ b/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
-			value={roomFilter}
-			onChange={updateRoomFilter}
-			className="room-search"
-			type="text"
-			placeholder="Search rooms"
-			ref={roomFilterRef}
-			id="room-search"
-		/>
+		<div className="room-search-wrapper">
+			<input
+				value={roomFilter}
+				onChange={updateRoomFilter}
+				onKeyDown={onKeyDown}
+				className="room-search"
+				type="text"
+				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