From 92319a06e2a8b08de467f2bfbd6313ca5a9a6e64 Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Fri, 1 Nov 2024 01:34:03 +0200 Subject: [PATCH] web/keybindings: apply alt+up/down to filtered list instead of full --- web/src/api/statestore/main.ts | 8 ++++++++ web/src/ui/keybindings.ts | 14 ++++++++------ web/src/ui/roomlist/RoomList.tsx | 8 +++++--- 3 files changed, 21 insertions(+), 9 deletions(-) diff --git a/web/src/api/statestore/main.ts b/web/src/api/statestore/main.ts index d7c1256..a79d5ba 100644 --- a/web/src/api/statestore/main.ts +++ b/web/src/api/statestore/main.ts @@ -54,6 +54,7 @@ export interface RoomListEntry { export class StateStore { readonly rooms: Map = new Map() readonly roomList = new NonNullCachedEventDispatcher([]) + currentRoomListFilter: string = "" readonly accountData: Map = new Map() readonly accountDataSubs = new MultiSubscribable() readonly emojiRoomsSub = new Subscribable() @@ -65,6 +66,13 @@ export class StateStore { activeRoomID?: RoomID imageAuthToken?: string + getFilteredRoomList(): RoomListEntry[] { + if (!this.currentRoomListFilter) { + return this.roomList.current + } + return this.roomList.current.filter(entry => entry.search_name.includes(this.currentRoomListFilter)) + } + #shouldHideRoom(entry: SyncRoom): boolean { const cc = entry.meta.creation_content if ((cc?.type ?? "") !== "") { diff --git a/web/src/ui/keybindings.ts b/web/src/ui/keybindings.ts index bcdf33d..f599c8e 100644 --- a/web/src/ui/keybindings.ts +++ b/web/src/ui/keybindings.ts @@ -47,21 +47,23 @@ export default class Keybindings { return } const activeRoomID = this.activeRoom.roomID - const selectedIdx = this.store.roomList.current.findLastIndex(room => room.room_id === activeRoomID) - if (selectedIdx < this.store.roomList.current.length - 1) { - this.context.setActiveRoom(this.store.roomList.current[selectedIdx + 1].room_id) + const filteredRoomList = this.store.getFilteredRoomList() + const selectedIdx = filteredRoomList.findLastIndex(room => room.room_id === activeRoomID) + if (selectedIdx < filteredRoomList.length - 1) { + this.context.setActiveRoom(filteredRoomList[selectedIdx + 1].room_id) } else { this.context.setActiveRoom(null) } }, "Alt+ArrowDown": () => { + const filteredRoomList = this.store.getFilteredRoomList() const selectedIdx = this.activeRoom - ? this.store.roomList.current.findLastIndex(room => room.room_id === this.activeRoom?.roomID) + ? filteredRoomList.findLastIndex(room => room.room_id === this.activeRoom?.roomID) : -1 if (selectedIdx === -1) { - this.context.setActiveRoom(this.store.roomList.current[this.store.roomList.current.length - 1].room_id) + this.context.setActiveRoom(filteredRoomList[filteredRoomList.length - 1].room_id) } else if (selectedIdx > 0) { - this.context.setActiveRoom(this.store.roomList.current[selectedIdx - 1].room_id) + this.context.setActiveRoom(filteredRoomList[selectedIdx - 1].room_id) } }, } diff --git a/web/src/ui/roomlist/RoomList.tsx b/web/src/ui/roomlist/RoomList.tsx index 11ecf68..c4ad5a0 100644 --- a/web/src/ui/roomlist/RoomList.tsx +++ b/web/src/ui/roomlist/RoomList.tsx @@ -27,15 +27,17 @@ interface RoomListProps { } const RoomList = ({ activeRoomID }: RoomListProps) => { - const roomList = useEventAsState(use(ClientContext)!.store.roomList) + const client = use(ClientContext)! + const roomList = useEventAsState(client.store.roomList) const roomFilterRef = useRef(null) const [roomFilter, setRoomFilter] = useState("") const [realRoomFilter, setRealRoomFilter] = useState("") const updateRoomFilter = useCallback((evt: React.ChangeEvent) => { setRoomFilter(evt.target.value) - setRealRoomFilter(toSearchableString(evt.target.value)) - }, []) + client.store.currentRoomListFilter = toSearchableString(evt.target.value) + setRealRoomFilter(client.store.currentRoomListFilter) + }, [client]) return