From c04143d59de1bb6ae4730ac2e0cf1463c6033e4d Mon Sep 17 00:00:00 2001 From: Shea Duma Date: Mon, 23 Mar 2026 06:53:53 +0200 Subject: [PATCH 1/4] maxHeight to prevent visual overwhelming --- src/app/hooks/timeline/TimelineEventRenderer.css.ts | 7 +++++++ src/app/hooks/timeline/useTimelineEventRenderer.tsx | 11 ++++++----- 2 files changed, 13 insertions(+), 5 deletions(-) create mode 100644 src/app/hooks/timeline/TimelineEventRenderer.css.ts diff --git a/src/app/hooks/timeline/TimelineEventRenderer.css.ts b/src/app/hooks/timeline/TimelineEventRenderer.css.ts new file mode 100644 index 000000000..9d0cb7151 --- /dev/null +++ b/src/app/hooks/timeline/TimelineEventRenderer.css.ts @@ -0,0 +1,7 @@ +import { style } from '@vanilla-extract/css'; +import { toRem } from 'folds'; + +export const StateEvent = style({ + overflowY: 'scroll', + maxHeight: toRem(96), +}); diff --git a/src/app/hooks/timeline/useTimelineEventRenderer.tsx b/src/app/hooks/timeline/useTimelineEventRenderer.tsx index eb525e818..33f176ec0 100644 --- a/src/app/hooks/timeline/useTimelineEventRenderer.tsx +++ b/src/app/hooks/timeline/useTimelineEventRenderer.tsx @@ -52,6 +52,7 @@ import { Message, Reactions, } from '$features/room/message'; +import * as css from './TimelineEventRenderer.css'; type ThreadReplyChipProps = { room: Room; @@ -748,7 +749,7 @@ export function useTimelineEventRenderer({ iconSrc={parsed.icon} content={ - + {parsed.body} @@ -794,7 +795,7 @@ export function useTimelineEventRenderer({ iconSrc={Icons.Hash} content={ - + {senderName} {t('Organisms.RoomCommon.changed_room_name')} @@ -841,7 +842,7 @@ export function useTimelineEventRenderer({ iconSrc={Icons.Hash} content={ - + {senderName} {' changed room topic'} @@ -888,7 +889,7 @@ export function useTimelineEventRenderer({ iconSrc={Icons.Hash} content={ - + {senderName} {' changed room avatar'} @@ -942,7 +943,7 @@ export function useTimelineEventRenderer({ iconSrc={callJoined ? Icons.Phone : Icons.PhoneDown} content={ - + {senderName} {callJoined ? ' joined the call' : ' ended the call'} From 57cbc5d4995f6426c3fe06c988025dfde980f6c0 Mon Sep 17 00:00:00 2001 From: Shea Duma Date: Mon, 23 Mar 2026 07:00:31 +0200 Subject: [PATCH 2/4] added md --- .changeset/maxHeight-stateEvent-fix.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/maxHeight-stateEvent-fix.md diff --git a/.changeset/maxHeight-stateEvent-fix.md b/.changeset/maxHeight-stateEvent-fix.md new file mode 100644 index 000000000..f237fd647 --- /dev/null +++ b/.changeset/maxHeight-stateEvent-fix.md @@ -0,0 +1,5 @@ +--- +default: patch +--- + +Added maximum height to state events From e2959e663a159346837e46997023de8567adfc64 Mon Sep 17 00:00:00 2001 From: Shea Duma Date: Tue, 24 Mar 2026 07:12:30 +0200 Subject: [PATCH 3/4] redone the formatting to focus it as a short variant while maximizing information provided --- src/app/components/message/Reply.tsx | 7 +- .../timeline/TimelineEventRenderer.css.ts | 7 -- .../timeline/useTimelineEventRenderer.tsx | 26 +++--- src/app/hooks/useMemberEventParser.tsx | 80 ++++++++++++------- 4 files changed, 70 insertions(+), 50 deletions(-) delete mode 100644 src/app/hooks/timeline/TimelineEventRenderer.css.ts diff --git a/src/app/components/message/Reply.tsx b/src/app/components/message/Reply.tsx index 03ff33cc2..3342b0d52 100644 --- a/src/app/components/message/Reply.tsx +++ b/src/app/components/message/Reply.tsx @@ -179,7 +179,12 @@ export const Reply = as<'div', ReplyProps>( const parsedMemberEvent = parseMemberEvent(replyEvent); image = parsedMemberEvent.icon; mentioned = false; - bodyJSX = parsedMemberEvent.body; + bodyJSX = ( + + {' '} + {parsedMemberEvent.body}{' '} + + ); } else if (eventType === StateEvent.RoomName) { image = Icons.Hash; bodyJSX = t('Organisms.RoomCommon.changed_room_name'); diff --git a/src/app/hooks/timeline/TimelineEventRenderer.css.ts b/src/app/hooks/timeline/TimelineEventRenderer.css.ts deleted file mode 100644 index 9d0cb7151..000000000 --- a/src/app/hooks/timeline/TimelineEventRenderer.css.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { style } from '@vanilla-extract/css'; -import { toRem } from 'folds'; - -export const StateEvent = style({ - overflowY: 'scroll', - maxHeight: toRem(96), -}); diff --git a/src/app/hooks/timeline/useTimelineEventRenderer.tsx b/src/app/hooks/timeline/useTimelineEventRenderer.tsx index 8965a228d..c716ce758 100644 --- a/src/app/hooks/timeline/useTimelineEventRenderer.tsx +++ b/src/app/hooks/timeline/useTimelineEventRenderer.tsx @@ -59,7 +59,11 @@ import * as css from './TimelineEventRenderer.css'; function DecoratedUser({ room, userId, userName }: DecoratedUserProps) { const { color, font } = useSableCosmetics(userId, room ?? ({} as Room)); - return {userName ?? userId} ; + return ( + + {userName ?? userId} + + ); } type DecoratedUserProps = { @@ -765,11 +769,11 @@ export function useTimelineEventRenderer({ time={timeJSX} iconSrc={parsed.icon} content={ - - + + {parsed.body} - - + + } /> @@ -811,7 +815,7 @@ export function useTimelineEventRenderer({ iconSrc={Icons.Hash} content={ - + {t('Organisms.RoomCommon.changed_room_name')} @@ -858,7 +862,7 @@ export function useTimelineEventRenderer({ iconSrc={Icons.Hash} content={ - + {' changed room topic'} @@ -905,7 +909,7 @@ export function useTimelineEventRenderer({ iconSrc={Icons.Hash} content={ - + {' changed room avatar'} @@ -959,7 +963,7 @@ export function useTimelineEventRenderer({ iconSrc={callJoined ? Icons.Phone : Icons.PhoneDown} content={ - + {callJoined ? ' joined the call' : ' ended the call'} @@ -1094,7 +1098,7 @@ export function useTimelineEventRenderer({ iconSrc={Icons.Code} content={ - + {' sent '} {getType.call(mEvent)} @@ -1155,7 +1159,7 @@ export function useTimelineEventRenderer({ iconSrc={Icons.Code} content={ - + {senderName} {' sent '} {getType.call(mEvent)} diff --git a/src/app/hooks/useMemberEventParser.tsx b/src/app/hooks/useMemberEventParser.tsx index bb788a812..88265ad0d 100644 --- a/src/app/hooks/useMemberEventParser.tsx +++ b/src/app/hooks/useMemberEventParser.tsx @@ -1,5 +1,5 @@ import { ReactNode } from 'react'; -import { IconSrc, Icons } from 'folds'; +import { IconSrc, Icons, Text } from 'folds'; import { MatrixEvent, Room } from '$types/matrix-sdk'; import { IMemberContent, Membership } from '$types/matrix/room'; import { getMxIdLocalPart } from '$utils/matrix'; @@ -17,7 +17,11 @@ function DecoratedUser({ roomId, userId, userName }: DecoratedUserProps) { const mx = useMatrixClient(); const room = mx.getRoom(roomId); const { color, font } = useSableCosmetics(userId, room ?? ({} as Room)); - return {userName ?? userId} ; + return ( + + {userName ?? userId} + + ); } export type ParsedResult = { @@ -56,10 +60,12 @@ export const useMemberEventParser = (): MemberEventParser => { body: ( <> - {' accepted '} + {' accepted '} - {`'s join request `} - {reason} + + {`'s join request `} + {reason} + ), }; @@ -70,9 +76,9 @@ export const useMemberEventParser = (): MemberEventParser => { body: ( <> - {' invited '} + {' invited '} - {reason} + {reason} ), }; @@ -84,8 +90,10 @@ export const useMemberEventParser = (): MemberEventParser => { body: ( <> - {' requested to join room: '} - {reason} + + {' requested to join room: '} + {reason} + ), }; @@ -97,7 +105,7 @@ export const useMemberEventParser = (): MemberEventParser => { body: ( <> - {' joined the room'} + {' joined the room'} ), }; @@ -111,16 +119,20 @@ export const useMemberEventParser = (): MemberEventParser => { senderId === userId ? ( <> - {' rejected the invitation '} - {reason} + + {' rejected the invitation '} + {reason} + ) : ( <> - {' rejected '} + {' rejected '} - {`'s join request `} - {reason} + + {`'s join request `} + {reason} + ), }; @@ -133,16 +145,20 @@ export const useMemberEventParser = (): MemberEventParser => { senderId === userId ? ( <> - {' revoked joined request '} - {reason} + + {' revoked joined request '} + {reason} + ) : ( <> {' revoked '} - {`'s invite `} - {reason} + + {`'s invite `} + {reason} + ), }; @@ -154,9 +170,9 @@ export const useMemberEventParser = (): MemberEventParser => { body: ( <> - {' unbanned '} + {' unbanned '} - {reason} + {reason} ), }; @@ -168,15 +184,17 @@ export const useMemberEventParser = (): MemberEventParser => { senderId === userId ? ( <> - {' left the room '} - {reason} + + {' left the room '} + {reason} + ) : ( <> - {' kicked '} + {' kicked '} - {reason} + {reason} ), }; @@ -188,9 +206,9 @@ export const useMemberEventParser = (): MemberEventParser => { body: ( <> - {' banned '} + {' banned '} - {reason} + {reason} ), }; @@ -209,13 +227,13 @@ export const useMemberEventParser = (): MemberEventParser => { typeof content.displayname === 'string' ? ( <> - {' changed display name to '} + {' changed display name to '} ) : ( <> - {' removed their display name '} + {' removed their display name '} ), }; @@ -227,12 +245,12 @@ export const useMemberEventParser = (): MemberEventParser => { content.avatar_url && typeof content.avatar_url === 'string' ? ( <> - {' changed their avatar'} + {' changed their avatar'} ) : ( <> - {' removed their avatar '} + {' removed their avatar '} ), }; From 21a9bcdae6cc91e10afbe97ff10003a12f4aef27 Mon Sep 17 00:00:00 2001 From: Shea Duma Date: Tue, 24 Mar 2026 07:15:08 +0200 Subject: [PATCH 4/4] removed hanging include --- src/app/hooks/timeline/useTimelineEventRenderer.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/hooks/timeline/useTimelineEventRenderer.tsx b/src/app/hooks/timeline/useTimelineEventRenderer.tsx index c716ce758..b7d2bff7d 100644 --- a/src/app/hooks/timeline/useTimelineEventRenderer.tsx +++ b/src/app/hooks/timeline/useTimelineEventRenderer.tsx @@ -55,7 +55,6 @@ import { } from '$features/room/message'; import { useSableCosmetics } from '$hooks/useSableCosmetics'; -import * as css from './TimelineEventRenderer.css'; function DecoratedUser({ room, userId, userName }: DecoratedUserProps) { const { color, font } = useSableCosmetics(userId, room ?? ({} as Room));