feat: Devtool for sticky events MSC4354

apps/web/res/css/views/dialogs/_DevtoolsDialog.pcss

@@ -187,3 +187,53 @@ Please see LICENSE files in the repository root for full details.
     /* used on focus */
     color: $links !important;
 }
+
+.mx_DevTools_sticky_explorer {
+    table {
+        width: 100%;
+        border-collapse: collapse;
+        table-layout: fixed;
+        margin-top: var(--cpd-space-3x);
+
+        th {
+            text-align: left;
+            padding: var(--cpd-space-2x) var(--cpd-space-3x);
+        }
+
+        th#user_header {
+            width: 35%;
+        }
+        th#sticky_key_header {
+            width: 50%;
+        }
+        th#expires_in_header {
+            width: 15%;
+        }
+
+        tr {
+            cursor: pointer;
+            border-bottom: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-primary);
+            background: transparent;
+        }
+
+        tr:hover {
+            color: var(--cpd-color-text-secondary);
+            background: var(--cpd-color-bg-action-secondary-hovered);
+        }
+
+        tr:focus-visible {
+            outline: var(--cpd-border-width-2) solid var(--cpd-color-border-focused);
+        }
+
+        td {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            padding: var(--cpd-space-2x) var(--cpd-space-3x);
+        }
+
+        td.expired_column {
+            text-align: right;
+        }
+    }
+}

apps/web/src/components/views/dialogs/DevtoolsDialog.tsx

@@ -28,6 +28,7 @@ import CopyableText from "../elements/CopyableText";
 import RoomNotifications from "./devtools/RoomNotifications";
 import { Crypto } from "./devtools/Crypto";
 import SettingsField from "../elements/SettingsField.tsx";
+import { StickyStateExplorer } from "./devtools/StickyEventState.tsx";
 
 enum Category {
     Room,
@@ -49,6 +50,7 @@ const Tools: Record<Category, [label: TranslationKey, tool: Tool][]> = {
         [_td("devtools|notifications_debug"), RoomNotifications],
         [_td("devtools|active_widgets"), WidgetExplorer],
         [_td("devtools|users"), UserList],
+        [_td("devtools|explore_sticky_state"), StickyStateExplorer],
     ],
     [Category.Other]: [
         [_td("devtools|explore_account_data"), AccountDataExplorer],

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

@@ -45,6 +45,12 @@ export const stateKeyField = (defaultValue?: string): IFieldDef => ({
     default: defaultValue,
 });
 
+export const stickyDurationField = (defaultValue?: number): IFieldDef => ({
+    id: "sticky_duration",
+    label: _td("devtools|sticky_duration"),
+    default: `${defaultValue ?? 360000}`,
+});
+
 const validateEventContent = withValidation<any, Error | undefined>({
     async deriveData({ value }) {
         try {