feat: Devtool for sticky events MSC4354 (#32741)

* feat: Devtool for sticky events MSC4354 * Update devtool snapshot to add sticky state devtool * Update devtool playwright screenshot * review: Use UserFriendlyError instead or Error * review: fix docs * review: remove css in js, remove js hover tracking * review: use keyboard enums * add a check to see if homeserver supports sticky events * fixup: prettier * review: No static inline styles * review: use cpd spacing / border / color values * cleanup keyboard code * Fix unsupported alert look * review: proper useState usage (no | null) * review: useAsyncMemo instead of useEffect * review: use useTypedEventEmitterState * fix: better support for empty string event type * review: remove redundant expired state
2026-03-16 10:54:16 +00:00
parent 3b4027846d
commit 3e88689d69
7 changed files with 410 additions and 0 deletions
@@ -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.remaining_time_column {
+            text-align: right;
+        }
+    }
+}