n/nyxmuks
1
0
Fork 0
forked from Mirrors/gomuks
Code Pull requests Activity

web/keybindings: apply alt+up/down to filtered list instead of full

Browse source
This commit is contained in:
Tulir Asokan 2024-11-01 01:34:03 +02:00
parent 245d81b9ce
commit 92319a06e2
3 changed files with 21 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
web/src/api/statestore/main.ts
View file

@ -54,6 +54,7 @@ export interface RoomListEntry {
export class StateStore { export class StateStore {
readonly rooms: Map<RoomID, RoomStateStore> = new Map() readonly rooms: Map<RoomID, RoomStateStore> = new Map()
readonly roomList = new NonNullCachedEventDispatcher<RoomListEntry[]>([]) readonly roomList = new NonNullCachedEventDispatcher<RoomListEntry[]>([])
currentRoomListFilter: string = ""
readonly accountData: Map<string, UnknownEventContent> = new Map() readonly accountData: Map<string, UnknownEventContent> = new Map()
readonly accountDataSubs = new MultiSubscribable() readonly accountDataSubs = new MultiSubscribable()
readonly emojiRoomsSub = new Subscribable() readonly emojiRoomsSub = new Subscribable()
@ -65,6 +66,13 @@ export class StateStore {
activeRoomID?: RoomID activeRoomID?: RoomID
imageAuthToken?: string 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 { #shouldHideRoom(entry: SyncRoom): boolean {
const cc = entry.meta.creation_content const cc = entry.meta.creation_content
if ((cc?.type ?? "") !== "") { if ((cc?.type ?? "") !== "") {

14
web/src/ui/keybindings.ts
View file

@ -47,21 +47,23 @@ export default class Keybindings {
return return
} }
const activeRoomID = this.activeRoom.roomID const activeRoomID = this.activeRoom.roomID
const selectedIdx = this.store.roomList.current.findLastIndex(room => room.room_id === activeRoomID) const filteredRoomList = this.store.getFilteredRoomList()
if (selectedIdx < this.store.roomList.current.length - 1) { const selectedIdx = filteredRoomList.findLastIndex(room => room.room_id === activeRoomID)
this.context.setActiveRoom(this.store.roomList.current[selectedIdx + 1].room_id) if (selectedIdx < filteredRoomList.length - 1) {
this.context.setActiveRoom(filteredRoomList[selectedIdx + 1].room_id)
} else { } else {
this.context.setActiveRoom(null) this.context.setActiveRoom(null)
} }
}, },
"Alt+ArrowDown": () => { "Alt+ArrowDown": () => {
const filteredRoomList = this.store.getFilteredRoomList()
const selectedIdx = this.activeRoom 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 : -1
if (selectedIdx === -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) { } else if (selectedIdx > 0) {
this.context.setActiveRoom(this.store.roomList.current[selectedIdx - 1].room_id) this.context.setActiveRoom(filteredRoomList[selectedIdx - 1].room_id)
} }
}, },
} }

8
web/src/ui/roomlist/RoomList.tsx
View file

@ -27,15 +27,17 @@ interface RoomListProps {
} }
const RoomList = ({ activeRoomID }: 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<HTMLInputElement>(null) const roomFilterRef = useRef<HTMLInputElement>(null)
const [roomFilter, setRoomFilter] = useState("") const [roomFilter, setRoomFilter] = useState("")
const [realRoomFilter, setRealRoomFilter] = useState("") const [realRoomFilter, setRealRoomFilter] = useState("")
const updateRoomFilter = useCallback((evt: React.ChangeEvent<HTMLInputElement>) => { const updateRoomFilter = useCallback((evt: React.ChangeEvent<HTMLInputElement>) => {
setRoomFilter(evt.target.value) setRoomFilter(evt.target.value)
setRealRoomFilter(toSearchableString(evt.target.value)) client.store.currentRoomListFilter = toSearchableString(evt.target.value)
}, []) setRealRoomFilter(client.store.currentRoomListFilter)
}, [client])
return <div className="room-list-wrapper"> return <div className="room-list-wrapper">
<input <input