diff --git a/web/src/ui/roomlist/RoomList.css b/web/src/ui/roomlist/RoomList.css
index 8cb768c..c908f85 100644
--- a/web/src/ui/roomlist/RoomList.css
+++ b/web/src/ui/roomlist/RoomList.css
@@ -2,12 +2,25 @@ div.room-list-wrapper {
grid-area: roomlist;
background: linear-gradient(in hsl longer hue, red 0 0, magenta);
box-sizing: border-box;
- overflow-y: auto;
+ overflow: hidden;
+ scrollbar-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.1);
+ display: flex;
+ flex-direction: column;
}
div.room-list {
background-color: hsla(0, 0%, 96%, .9);
- min-height: 100vh;
+ overflow-y: auto;
+ flex: 1;
+}
+
+input.room-search {
+ width: 100%;
+ padding: 1rem;
+ box-sizing: border-box;
+ border: none;
+ background-color: hsla(0, 0%, 96%, .9);
+ outline: none;
}
div.room-entry {
@@ -19,11 +32,11 @@ div.room-entry {
cursor: pointer;
&:hover {
- background-color: rgba(5, 38, 87, 0.1);
+ background-color: rgba(0, 0, 0, 0.075);
}
&.active {
- background-color: rgba(5, 38, 87, 0.15);
+ background-color: rgba(0, 0, 0, 0.125);
}
> div.room-entry-left {
diff --git a/web/src/ui/roomlist/RoomList.tsx b/web/src/ui/roomlist/RoomList.tsx
index fa03624..041632e 100644
--- a/web/src/ui/roomlist/RoomList.tsx
+++ b/web/src/ui/roomlist/RoomList.tsx
@@ -13,7 +13,8 @@
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see
.
-import React, { use, useCallback } from "react"
+import React, { use, useCallback, useState } from "react"
+import { toSearchableString } from "@/api/statestore.ts"
import type { RoomID } from "@/api/types"
import { useNonNullEventAsState } from "@/util/eventdispatcher.ts"
import { ClientContext } from "../ClientContext.ts"
@@ -27,6 +28,8 @@ interface RoomListProps {
const RoomList = ({ setActiveRoom, activeRoomID }: RoomListProps) => {
const roomList = useNonNullEventAsState(use(ClientContext)!.store.roomList)
+ const [roomFilter, setRoomFilter] = useState("")
+ const [realRoomFilter, setRealRoomFilter] = useState("")
const clickRoom = useCallback((evt: React.MouseEvent) => {
const roomID = evt.currentTarget.getAttribute("data-room-id")
if (roomID) {
@@ -36,12 +39,25 @@ const RoomList = ({ setActiveRoom, activeRoomID }: RoomListProps) => {
}
}, [setActiveRoom])
+ const updateRoomFilter = useCallback((evt: React.ChangeEvent
) => {
+ setRoomFilter(evt.target.value)
+ setRealRoomFilter(toSearchableString(evt.target.value))
+ }, [])
+
return