From 08830331d7c4f5b0b46238b8fb77d1a05135811b Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Fri, 20 Dec 2024 23:52:25 +0200 Subject: [PATCH] web/roomview: add invite metadata section Closes #559 --- web/src/api/statestore/invitedroom.ts | 17 ++++++++---- web/src/ui/roomview/RoomPreview.css | 9 ++++++ web/src/ui/roomview/RoomPreview.tsx | 40 +++++++++++++++++++++++++-- 3 files changed, 58 insertions(+), 8 deletions(-) diff --git a/web/src/api/statestore/invitedroom.ts b/web/src/api/statestore/invitedroom.ts index 334944a..a4b2a87 100644 --- a/web/src/api/statestore/invitedroom.ts +++ b/web/src/api/statestore/invitedroom.ts @@ -32,6 +32,7 @@ import type { RoomListEntry, StateStore } from "./main.ts" export class InvitedRoomStore implements RoomListEntry, RoomSummary { readonly room_id: RoomID readonly sorting_timestamp: number + readonly date: string readonly name: string = "" readonly search_name: string readonly dm_user_id?: UserID @@ -40,13 +41,16 @@ export class InvitedRoomStore implements RoomListEntry, RoomSummary { readonly avatar?: ContentURI readonly encryption?: "m.megolm.v1.aes-sha2" readonly room_version?: RoomVersion - readonly join_rules?: JoinRule + readonly join_rule?: JoinRule readonly invited_by?: UserID readonly inviter_profile?: MemberEventContent + readonly is_direct: boolean constructor(public readonly meta: DBInvitedRoom, parent: StateStore) { this.room_id = meta.room_id this.sorting_timestamp = 1000000000000000 + meta.created_at + this.date = new Date(meta.created_at - new Date().getTimezoneOffset() * 60000) + .toISOString().replace("T", " ").replace("Z", "") const members = new Map() for (const state of this.meta.invite_state) { if (state.type === "m.room.name") { @@ -57,14 +61,14 @@ export class InvitedRoomStore implements RoomListEntry, RoomSummary { this.topic = ensureString(state.content.topic) } else if (state.type === "m.room.avatar") { this.avatar = ensureString(state.content.url) - } else if (state.type === "m.room.encryption" && state.content.algorithm === "m.megolm.v1.aes-sha2") { - this.encryption = state.content.algorithm + } else if (state.type === "m.room.encryption") { + this.encryption = state.content.algorithm as "m.megolm.v1.aes-sha2" } else if (state.type === "m.room.create") { this.room_version = ensureString(state.content.version) as RoomVersion } else if (state.type === "m.room.member") { members.set(state.state_key, state) } else if (state.type === "m.room.join_rules") { - this.join_rules = ensureString(state.content.join_rule) as JoinRule + this.join_rule = ensureString(state.content.join_rule) as JoinRule } } this.search_name = toSearchableString(this.name ?? "") @@ -73,14 +77,15 @@ export class InvitedRoomStore implements RoomListEntry, RoomSummary { this.invited_by = ownMemberEvt.sender this.inviter_profile = members.get(ownMemberEvt.sender)?.content as MemberEventContent } + this.is_direct = Boolean(ownMemberEvt?.content.is_direct) if ( !this.name && !this.avatar && !this.topic && !this.canonical_alias - && this.join_rules === "invite" + && this.join_rule === "invite" && this.invited_by - && ownMemberEvt?.content.is_direct + && this.is_direct ) { this.dm_user_id = this.invited_by this.name = getDisplayname(this.invited_by, this.inviter_profile) diff --git a/web/src/ui/roomview/RoomPreview.css b/web/src/ui/roomview/RoomPreview.css index 38cb5b7..33b8b3b 100644 --- a/web/src/ui/roomview/RoomPreview.css +++ b/web/src/ui/roomview/RoomPreview.css @@ -36,6 +36,14 @@ div.room-view.preview > div.preview-inner { gap: .25rem; } + > details.room-invite-meta { + width: 100%; + + > table > tr > td:nth-of-type(2) { + font-family: var(--monospace-font-stack); + } + } + > div.room-topic { white-space: pre-wrap; max-height: 15rem; @@ -56,6 +64,7 @@ div.room-view.preview > div.preview-inner { width: 100%; display: flex; gap: .25rem; + margin-top: 1rem; > button { padding: .5rem; diff --git a/web/src/ui/roomview/RoomPreview.tsx b/web/src/ui/roomview/RoomPreview.tsx index 9b81ba0..5eb9489 100644 --- a/web/src/ui/roomview/RoomPreview.tsx +++ b/web/src/ui/roomview/RoomPreview.tsx @@ -93,7 +93,10 @@ const RoomPreview = ({ roomID, via, alias, invite }: RoomPreviewProps) => { src={getAvatarURL(invite.invited_by, invite.inviter_profile)} alt="" /> - {getDisplayname(invite.invited_by, invite.inviter_profile)} invited you to + + {getDisplayname(invite.invited_by, invite.inviter_profile)} + + invited you to : null}

{name}

{ {loading && } {memberCount &&
{memberCount} members
}
{topic}
- {invite?.invited_by && } + {invite &&
+ Invite metadata + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Invited by{invite.invited_by}
Room ID{roomID}
Room alias{invite.canonical_alias ?? summary?.canonical_alias}
Is direct{invite.is_direct.toString()}
Encryption{invite.encryption ?? summary?.encryption ?? summary?.["im.nheko.summary.encryption"]}
Join rule{invite.join_rule ?? summary?.join_rule}
Timestamp{invite.date}
+
} + {invite?.invited_by && }
{invite &&