Mirrors/gomuks
1
0
Fork 1
mirror of https://github.com/tulir/gomuks.git synced 2025-04-20 18:43:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

web/roomlist: highlight active room

Browse source
This commit is contained in:
Tulir Asokan 2024-10-12 13:20:35 +03:00
parent dcb2b61435
commit 5e0b8fc089
4 changed files with 16 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/src/ui/MainScreen.tsx
View file

@ -32,7 +32,7 @@ const MainScreen = () => {
}
}, [client])
return <main className="matrix-main">
<RoomList setActiveRoom={setActiveRoom} />
<RoomList setActiveRoom={setActiveRoom} activeRoomID={activeRoomID} />
{activeRoom && <RoomView key={activeRoomID} room={activeRoom} />}
</main>
}

9
web/src/ui/roomlist/Entry.tsx
View file

@ -20,6 +20,7 @@ import type { MemDBEvent } from "../../api/types"
export interface RoomListEntryProps {
room: RoomListEntry
setActiveRoom: (evt: React.MouseEvent) => void
isActive: boolean
}
function makePreviewText(evt?: MemDBEvent): string {
@ -32,9 +33,13 @@ function makePreviewText(evt?: MemDBEvent): string {
return ""
}
const Entry = ({ room, setActiveRoom }: RoomListEntryProps) => {
const Entry = ({ room, setActiveRoom, isActive }: RoomListEntryProps) => {
const previewText = makePreviewText(room.preview_event)
return <div className="room-entry" onClick={setActiveRoom} data-room-id={room.room_id}>
return <div
className={`room-entry ${isActive ? "active" : ""}`}
onClick={setActiveRoom}
data-room-id={room.room_id}
>
<div className="room-entry-left">
<img loading="lazy" className="avatar room-avatar" src={getMediaURL(room.avatar)} alt=""/>
</div>

6
web/src/ui/roomlist/RoomList.css
View file

@ -6,7 +6,7 @@ div.room-list {
width: 100%;
display: flex;
gap: 4px;
border-radius: 4px;
/*border-radius: 4px;*/
user-select: none;
cursor: pointer;
@ -14,6 +14,10 @@ div.room-list {
background-color: #EEE;
}
&.active {
background-color: #DDD;
}
> div.room-entry-left {
height: 3rem;
width: 3rem;

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

@ -22,9 +22,10 @@ import "./RoomList.css"
interface RoomListProps {
setActiveRoom: (room_id: RoomID) => void
activeRoomID: RoomID
}
const RoomList = ({ setActiveRoom }: RoomListProps) => {
const RoomList = ({ setActiveRoom, activeRoomID }: RoomListProps) => {
const roomList = useNonNullEventAsState(use(ClientContext)!.store.roomList)
const clickRoom = useCallback((evt: React.MouseEvent) => {
const roomID = evt.currentTarget.getAttribute("data-room-id")
@ -37,7 +38,7 @@ const RoomList = ({ setActiveRoom }: RoomListProps) => {
return <div className="room-list">
{reverseMap(roomList, room =>
<Entry key={room.room_id} room={room} setActiveRoom={clickRoom}/>,
<Entry key={room.room_id} isActive={room.room_id === activeRoomID} room={room} setActiveRoom={clickRoom}/>,
)}
</div>
}