feat: Devtool for sticky events MSC4354 by BillCarsonFr · Pull Request #32741 · element-hq/element-web

BillCarsonFr · 2026-03-05T23:08:27Z

Adds a new devtool the explore the current sticky state of a room. A bit similar to the room state explorer.

Checklist

I have read through review guidelines and CONTRIBUTING.md.
Tests written for new code (and old code if feasible).
New or updated public/exported symbols have accurate TSDoc documentation.
Linter and other CI checks pass.
I have licensed the changes to Element by completing the Contributor License Agreement (CLA)

apps/web/src/components/views/dialogs/devtools/StickyEventState.tsx

BillCarsonFr · 2026-03-06T11:00:58Z

@AndrewFerr FYI

If I have some spare time later, I will see how to add a delayed event devtool. Will think about how to mix them for sticky delayed

apps/web/src/components/views/dialogs/devtools/StickyEventState.tsx

t3chguy · 2026-03-06T11:56:21Z

apps/web/src/components/views/dialogs/devtools/StickyEventState.tsx

+
+    const rowStyle: React.CSSProperties = {
+        cursor: "pointer",
+        background: hover ? "rgba(0,0,0,0.03)" : "transparent",


Should be using :hover selector in CSS rather than JS hover tracking. Also probably needs keyboard accessibility styling rather than just mouse pointer hover

Done for hover.
I don't know what is keyboard accessibility styling? maybe it is using :focus css ? can you give me some advice to fix it?

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:focus-visible - :focus also applies to cursor where you already have :hover. So if you click it you leave :focus on it whereas :focus-visible only applies to forms of focus which should display a visible highlight for a11y

I removed most of that code 7f7cd1b
keyboard navigation is still working.
Hope it fixes the problem? I really don't know much about css

apps/web/src/components/views/dialogs/devtools/StickyEventState.tsx

t3chguy · 2026-03-06T11:56:59Z

apps/web/src/components/views/dialogs/devtools/StickyEventState.tsx

+                        <th style={{ textAlign: "left", padding: "8px 12px", width: "35%" }}>{_t("devtools|users")}</th>
+                        <th style={{ textAlign: "left", padding: "8px 12px", width: "50%" }}>
+                            {_t("devtools|sticky_key")}
+                        </th>
+                        <th style={{ textAlign: "right", padding: "8px 12px", width: "15%" }}>
+                            {_t("devtools|expires_in")}
+                        </th>


CSS please.

done here eabe6b2
I kept just the width part that change for each column, I have seen it done in other parts of the code

I kept just the width part that change for each column, I have seen it done in other parts of the code

That doesn't make it right unfortunately, we have a lot of tech debt given the age of the codebase

BillCarsonFr · 2026-03-06T16:46:43Z

Added a quick commit 0d458b7 to display when the homeserver does not support sticky events, as I noticed that matrix.org does not.

t3chguy · 2026-03-10T10:00:22Z

apps/web/src/components/views/dialogs/devtools/StickyEventState.tsx

+    const [eventType, setEventType] = useState<string | null>(null);
+    const [event, setEvent] = useState<MatrixEvent | null>(null);


The preferred way is this

Suggested change

const [eventType, setEventType] = useState<string | null>(null);

const [event, setEvent] = useState<MatrixEvent | null>(null);

const [eventType, setEventType] = useState<string>();

const [event, setEvent] = useState<MatrixEvent>();

and the type will be T | undefined

t3chguy · 2026-03-10T10:00:40Z

apps/web/src/components/views/dialogs/devtools/StickyEventState.tsx

+    const cli = useContext(MatrixClientContext);
+    // Check if the server supports sticky events and show a message if it doesn't.
+    // undefined means we are still checking, true/false means we have the result.
+    const [stickyEventsSupported, setStickyEventsSupported] = useState<boolean | undefined>(undefined);


Suggested change

const [stickyEventsSupported, setStickyEventsSupported] = useState<boolean | undefined>(undefined);

const [stickyEventsSupported, setStickyEventsSupported] = useState<boolean>();

t3chguy · 2026-03-10T10:01:00Z

apps/web/src/components/views/dialogs/devtools/StickyEventState.tsx

+    useEffect(() => {
+        cli.doesServerSupportUnstableFeature("org.matrix.msc4354")
+            .then((result) => {
+                setStickyEventsSupported(result);
+            })
+            .catch((ex) => {
+                logger.warn("Failed to check if sticky events are supported", ex);
+            });
+    }, [cli]);


This could use useAsyncMemo

thx, done 63e49ac

t3chguy · 2026-03-10T10:01:20Z

apps/web/src/components/views/dialogs/devtools/StickyEventState.tsx

+        const refresh = (): void => setEvents([...context.room._unstable_getStickyEvents()]);
+        context.room.on(RoomStickyEventsEvent.Update, refresh);
+
+        return () => {
+            context.room.off(RoomStickyEventsEvent.Update, refresh);
+        };


this should use useTypedEventEmitterState

done here a27cb71

t3chguy

Looks sane otherwise

dbkr

Generally looking good though I think

dbkr · 2026-03-12T17:11:41Z

apps/web/src/components/views/dialogs/devtools/StickyEventState.tsx

+        return <p>{_t("devtools|no_sticky_events")}</p>;
+    }
+
+    const onAction = async (): Promise<void> => {


Why's this async? Also probably ought to be useCallback().

It is because BaseTool IProps expects onAction(this: void): Promise<string | void>

dbkr · 2026-03-12T17:28:05Z

apps/web/src/components/views/dialogs/devtools/StickyEventState.tsx

+ */
+const StickyEventTableLine: React.FC<StateEventButtonProps> = ({ userId, stickyKey, expiresAt, onClick }) => {
+    const [timeRemaining, setTimeRemaining] = useState<string>("");
+    const [isExpired, setIsExpired] = useState<boolean>(false);


This state feels a bit redundant? Isn't it just a function of timeRemaining?

right, done b626701

dbkr · 2026-03-16T09:49:35Z

Thanks!

BillCarsonFr linked an issue Mar 5, 2026 that may be closed by this pull request

Dev Tool for sticky events? #31984

Closed

BillCarsonFr commented Mar 5, 2026

View reviewed changes

apps/web/src/components/views/dialogs/devtools/StickyEventState.tsx Outdated Show resolved Hide resolved

github-code-quality bot found potential problems Mar 5, 2026

View reviewed changes

apps/web/src/components/views/dialogs/devtools/StickyEventState.tsx Fixed Show fixed Hide fixed

github-actions bot deployed to Netlify March 5, 2026 23:15 View deployment

feat: Devtool for sticky events MSC4354

adcba32

BillCarsonFr force-pushed the valere/devtool_sticky_event branch from f955d14 to adcba32 Compare March 6, 2026 08:10

BillCarsonFr added the T-Enhancement label Mar 6, 2026

github-actions bot deployed to Netlify March 6, 2026 08:12 View deployment

Update devtool snapshot to add sticky state devtool

335a5df

github-actions bot deployed to Netlify March 6, 2026 08:58 View deployment

Merge branch 'develop' into valere/devtool_sticky_event

37f768d

github-actions bot deployed to Netlify March 6, 2026 10:11 View deployment

Update devtool playwright screenshot

424129a

github-actions bot deployed to Netlify March 6, 2026 10:45 View deployment

BillCarsonFr marked this pull request as ready for review March 6, 2026 10:59

BillCarsonFr requested a review from a team as a code owner March 6, 2026 10:59

BillCarsonFr requested review from dbkr and t3chguy March 6, 2026 10:59

t3chguy reviewed Mar 6, 2026

View reviewed changes

BillCarsonFr added 4 commits March 6, 2026 14:12

review: Use UserFriendlyError instead or Error

15945ed

review: fix docs

1a09bba

review: remove css in js, remove js hover tracking

eabe6b2

review: use keyboard enums

2249c6a

github-actions bot deployed to Netlify March 6, 2026 16:12 View deployment

github-actions bot deployed to EndToEndTests March 6, 2026 16:23 View deployment

BillCarsonFr added 2 commits March 6, 2026 17:44

add a check to see if homeserver supports sticky events

0d458b7

Merge branch 'develop' into valere/devtool_sticky_event

3eef477

github-actions bot deployed to Netlify March 6, 2026 16:47 View deployment

Merge branch 'develop' into valere/devtool_sticky_event

03638a7

BillCarsonFr requested a review from t3chguy March 10, 2026 09:06

github-actions bot deployed to Netlify March 10, 2026 09:08 View deployment

github-actions bot deployed to EndToEndTests March 10, 2026 09:21 View deployment

t3chguy reviewed Mar 10, 2026

View reviewed changes

BillCarsonFr added 5 commits March 10, 2026 13:54

review: proper useState usage (no | null)

ec460b2

review: useAsyncMemo instead of useEffect

63e49ac

review: use useTypedEventEmitterState

a27cb71

fix: better support for empty string event type

4522f18

Merge branch 'develop' into valere/devtool_sticky_event

fa9039c

github-actions bot deployed to Netlify March 10, 2026 13:25 View deployment

BillCarsonFr requested a review from t3chguy March 10, 2026 13:31

github-actions bot deployed to EndToEndTests March 10, 2026 13:36 View deployment

github-actions bot deployed to EndToEndTests March 10, 2026 14:14 View deployment

dbkr reviewed Mar 12, 2026

View reviewed changes

BillCarsonFr added 2 commits March 13, 2026 09:52

Merge branch 'develop' into valere/devtool_sticky_event

d0d00d4

review: remove redundant expired state

b626701

github-actions bot deployed to Netlify March 13, 2026 09:26 View deployment

github-actions bot deployed to EndToEndTests March 13, 2026 09:37 View deployment

BillCarsonFr requested a review from dbkr March 13, 2026 10:14

dbkr approved these changes Mar 16, 2026

View reviewed changes

BillCarsonFr added this pull request to the merge queue Mar 16, 2026

Merged via the queue into develop with commit 3e88689 Mar 16, 2026
46 checks passed

BillCarsonFr deleted the valere/devtool_sticky_event branch March 16, 2026 11:10

		const [eventType, setEventType] = useState<string \| null>(null);
		const [event, setEvent] = useState<MatrixEvent \| null>(null);

	const [stickyEventsSupported, setStickyEventsSupported] = useState<boolean \| undefined>(undefined);
	const [stickyEventsSupported, setStickyEventsSupported] = useState<boolean>();

Uh oh!

Conversation

BillCarsonFr commented Mar 5, 2026

Checklist

Uh oh!

Uh oh!

Uh oh!

BillCarsonFr commented Mar 6, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

t3chguy Mar 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

BillCarsonFr commented Mar 6, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

t3chguy left a comment

Choose a reason for hiding this comment

Uh oh!

dbkr left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dbkr commented Mar 16, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

t3chguy Mar 9, 2026 •

edited

Loading