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]) }, [client])
return <main className="matrix-main"> return <main className="matrix-main">
<RoomList setActiveRoom={setActiveRoom} /> <RoomList setActiveRoom={setActiveRoom} activeRoomID={activeRoomID} />
{activeRoom && <RoomView key={activeRoomID} room={activeRoom} />} {activeRoom && <RoomView key={activeRoomID} room={activeRoom} />}
</main> </main>
} }

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

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

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

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

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

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