fix: address PR SableClient#589 review comments

- Add stable m.poll.* type aliases alongside unstable MSC3381 types
- Register stable poll types in useTimelineEventRenderer
- Fix datetime-local timezone bug in PollCreatorDialog (UTC→local)
- Add FocusOutline from folds for keyboard a11y on poll options
- Add MatrixEventEvent.Decrypted listener for encrypted poll responses
- Support multi-select polls with Checkbox component

Author: Just-Insane

src/app/features/room/poll/PollCreatorDialog.tsx

@@ -69,11 +69,13 @@ export function PollCreatorDialog({ onCancel, onSubmit }: PollCreatorDialogProps
   const [error, setError] = useState<string>();
   const lastInputRef = useRef<HTMLInputElement>(null);
 
-  const minDatetime = useMemo(
-    () => new Date(Date.now() + 60_000).toISOString().slice(0, 16),
+  const minDatetime = useMemo(() => {
+    const d = new Date(Date.now() + 60_000);
+    // datetime-local expects local time, not UTC — build YYYY-MM-DDTHH:MM manually
+    const pad = (n: number) => String(n).padStart(2, '0');
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [expiryPreset]
-  );
+  }, [expiryPreset]);
 
   const computeClosesAt = (): number | undefined => {
     const now = Date.now();

src/app/features/room/poll/PollEvent.css.ts

@@ -1,33 +1,41 @@
 import { style } from '@vanilla-extract/css';
-import { config } from 'folds';
+import { config, FocusOutline } from 'folds';
 
 // Vote button wrapping just the radio circle - minimal touch target
-export const RadioZone = style({
-  all: 'unset',
-  cursor: 'pointer',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexShrink: 0,
-  padding: `${config.space.S100} 0`,
-  selectors: {
-    '&:disabled': {
-      cursor: 'default',
+export const RadioZone = style([
+  FocusOutline,
+  {
+    all: 'unset',
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    padding: `${config.space.S100} 0`,
+    borderRadius: config.radii.R300,
+    selectors: {
+      '&:disabled': {
+        cursor: 'default',
+      },
     },
   },
-});
+]);
 
 // Text + percent area - clickable to reveal voters
-export const AnswerTextButton = style({
-  all: 'unset',
-  cursor: 'pointer',
-  display: 'flex',
-  flex: 1,
-  alignItems: 'center',
-  gap: config.space.S200,
-  minWidth: 0,
-  padding: `${config.space.S100} 0`,
-});
+export const AnswerTextButton = style([
+  FocusOutline,
+  {
+    all: 'unset',
+    cursor: 'pointer',
+    display: 'flex',
+    flex: 1,
+    alignItems: 'center',
+    gap: config.space.S200,
+    minWidth: 0,
+    padding: `${config.space.S100} 0`,
+    borderRadius: config.radii.R300,
+  },
+]);
 
 // Non-interactive version of the text area
 export const AnswerTextRow = style({

src/app/features/room/poll/PollEvent.tsx

@@ -3,6 +3,7 @@ import FocusTrap from 'focus-trap-react';
 import {
   Box,
   Button,
+  Checkbox,
   config,
   Icon,
   Icons,
@@ -21,6 +22,7 @@ import {
   M_POLL_RESPONSE,
   M_POLL_START,
   MatrixEvent,
+  MatrixEventEvent,
   Room,
   RoomEvent,
 } from '$types/matrix-sdk';
@@ -200,6 +202,20 @@ export function PollEvent({ room, mEvent, canEnd, outlined }: PollEventProps) {
     };
   }, [room, pollEventId]);
 
+  // Also re-compute when an encrypted poll response/end is decrypted
+  useEffect(() => {
+    const onDecrypted = (event: MatrixEvent) => {
+      if (M_POLL_RESPONSE.matches(event.getType()) || M_POLL_END.matches(event.getType())) {
+        const relTo = event.getContent()?.['m.relates_to']?.event_id;
+        if (relTo === pollEventId) incrementTick();
+      }
+    };
+    mx.on(MatrixEventEvent.Decrypted, onDecrypted);
+    return () => {
+      mx.off(MatrixEventEvent.Decrypted, onDecrypted);
+    };
+  }, [mx, pollEventId]);
+
   // Re-render when the expiry countdown reaches zero
   useEffect(() => {
     if (!pollData?.closesAt) return undefined;
@@ -276,7 +292,8 @@ export function PollEvent({ room, mEvent, canEnd, outlined }: PollEventProps) {
 
   if (!pollData) return null;
 
-  const { question, answers, isDisclosed, closesAt } = pollData;
+  const { question, answers, isDisclosed, closesAt, maxSelections } = pollData;
+  const isMultiSelect = maxSelections > 1;
   const voterLabel = `${totalVoters} ${totalVoters === 1 ? 'voter' : 'voters'}`;
 
   let statusText: string;
@@ -383,7 +400,11 @@ export function PollEvent({ room, mEvent, canEnd, outlined }: PollEventProps) {
                         aria-pressed={isSelected}
                         aria-label={`Vote for ${answer.text}`}
                       >
-                        <RadioButton size="50" checked={isSelected} readOnly tabIndex={-1} />
+                        {isMultiSelect ? (
+                          <Checkbox size="50" checked={isSelected} readOnly tabIndex={-1} />
+                        ) : (
+                          <RadioButton size="50" checked={isSelected} readOnly tabIndex={-1} />
+                        )}
                       </button>
                       {textZone}
                     </Box>

src/app/hooks/timeline/useTimelineEventRenderer.tsx

@@ -354,6 +354,85 @@ export function useTimelineEventRenderer({
 }: TimelineEventRendererOptions) {
   const { t } = useTranslation();
 
+  // Shared poll start renderer — used for both unstable and stable event types
+  const renderPollStart = (
+    mEventId: string,
+    mEvent: MatrixEvent,
+    item: number,
+    timelineSet: EventTimelineSet,
+    collapse: boolean
+  ) => {
+    const { getSender, getAssociatedStatus, isRedacted, getUnsigned } = mEvent;
+    const reactionRelations = getEventReactions(timelineSet, mEventId);
+    const reactions = reactionRelations?.getSortedAnnotationsByKey();
+    const hasReactions = reactions && reactions.length > 0;
+    const highlighted = focusItem?.index === item && focusItem.highlight;
+    const senderId = getSender.call(mEvent) ?? '';
+    const senderDisplayName =
+      getMemberDisplayName(room, senderId, nicknames) ?? getMxIdLocalPart(senderId) ?? senderId;
+    const myUserId = mx.getUserId() ?? '';
+    const canEnd = myUserId === senderId || canRedact;
+
+    return (
+      <Message
+        key={mEventId}
+        data-message-item={item}
+        data-message-id={mEventId}
+        room={room}
+        mEvent={mEvent}
+        messageSpacing={messageSpacing}
+        messageLayout={messageLayout}
+        highlight={highlighted}
+        canDelete={canRedact || (canDeleteOwn && senderId === myUserId)}
+        canSendReaction={canSendReaction}
+        canPinEvent={canPinEvent}
+        imagePackRooms={imagePackRooms}
+        relations={hasReactions ? reactionRelations : undefined}
+        onUserClick={onUserClick}
+        onUsernameClick={onUsernameClick}
+        onReplyClick={onReplyClick}
+        onReactionToggle={onReactionToggle}
+        onEditId={onEditId}
+        senderId={senderId}
+        activeReplyId={activeReplyId}
+        senderDisplayName={senderDisplayName}
+        sendStatus={getAssociatedStatus.call(mEvent)}
+        onResend={onResend}
+        onDeleteFailedSend={onDeleteFailedSend}
+        collapse={collapse}
+        reactions={
+          reactionRelations ? (
+            <Reactions
+              style={{ marginTop: config.space.S200 }}
+              room={room}
+              relations={reactionRelations}
+              mEventId={mEventId}
+              canSendReaction={canSendReaction}
+              canDeleteOwn={canDeleteOwn}
+              onReactionToggle={onReactionToggle}
+            />
+          ) : undefined
+        }
+        hideReadReceipts={hideReads}
+        showDeveloperTools={showDeveloperTools}
+        memberPowerTag={getMemberPowerTag(senderId)}
+        hour24Clock={hour24Clock}
+        dateFormatString={dateFormatString}
+      >
+        {isRedacted.call(mEvent) ? (
+          <RedactedContent reason={getUnsigned.call(mEvent).redacted_because?.content.reason} />
+        ) : (
+          <PollEvent
+            room={room}
+            mEvent={mEvent}
+            canEnd={canEnd}
+            outlined={messageLayout === MessageLayout.Bubble}
+          />
+        )}
+      </Message>
+    );
+  };
+
   return useMatrixEventRenderer<[string, MatrixEvent, number, EventTimelineSet, boolean]>(
     {
       [EventType.RoomMessage]: (mEventId, mEvent, item, timelineSet, collapse) => {
@@ -1133,81 +1212,15 @@ export function useTimelineEventRenderer({
           </Event>
         );
       },
-      [MessageEvent.PollStart]: (mEventId, mEvent, item, timelineSet, collapse) => {
-        const { getSender, getAssociatedStatus, isRedacted, getUnsigned } = mEvent;
-        const reactionRelations = getEventReactions(timelineSet, mEventId);
-        const reactions = reactionRelations?.getSortedAnnotationsByKey();
-        const hasReactions = reactions && reactions.length > 0;
-        const highlighted = focusItem?.index === item && focusItem.highlight;
-        const senderId = getSender.call(mEvent) ?? '';
-        const senderDisplayName =
-          getMemberDisplayName(room, senderId, nicknames) ?? getMxIdLocalPart(senderId) ?? senderId;
-        const myUserId = mx.getUserId() ?? '';
-        const canEnd = myUserId === senderId || canRedact;
-
-        return (
-          <Message
-            key={mEventId}
-            data-message-item={item}
-            data-message-id={mEventId}
-            room={room}
-            mEvent={mEvent}
-            messageSpacing={messageSpacing}
-            messageLayout={messageLayout}
-            highlight={highlighted}
-            canDelete={canRedact || (canDeleteOwn && senderId === myUserId)}
-            canSendReaction={canSendReaction}
-            canPinEvent={canPinEvent}
-            imagePackRooms={imagePackRooms}
-            relations={hasReactions ? reactionRelations : undefined}
-            onUserClick={onUserClick}
-            onUsernameClick={onUsernameClick}
-            onReplyClick={onReplyClick}
-            onReactionToggle={onReactionToggle}
-            onEditId={onEditId}
-            senderId={senderId}
-            activeReplyId={activeReplyId}
-            senderDisplayName={senderDisplayName}
-            sendStatus={getAssociatedStatus.call(mEvent)}
-            onResend={onResend}
-            onDeleteFailedSend={onDeleteFailedSend}
-            collapse={collapse}
-            reactions={
-              reactionRelations ? (
-                <Reactions
-                  style={{ marginTop: config.space.S200 }}
-                  room={room}
-                  relations={reactionRelations}
-                  mEventId={mEventId}
-                  canSendReaction={canSendReaction}
-                  canDeleteOwn={canDeleteOwn}
-                  onReactionToggle={onReactionToggle}
-                />
-              ) : undefined
-            }
-            hideReadReceipts={hideReads}
-            showDeveloperTools={showDeveloperTools}
-            memberPowerTag={getMemberPowerTag(senderId)}
-            hour24Clock={hour24Clock}
-            dateFormatString={dateFormatString}
-          >
-            {isRedacted.call(mEvent) ? (
-              <RedactedContent reason={getUnsigned.call(mEvent).redacted_because?.content.reason} />
-            ) : (
-              <PollEvent
-                room={room}
-                mEvent={mEvent}
-                canEnd={canEnd}
-                outlined={messageLayout === MessageLayout.Bubble}
-              />
-            )}
-          </Message>
-        );
-      },
+      [MessageEvent.PollStart]: renderPollStart,
+      [MessageEvent.StablePollStart]: renderPollStart,
       // Poll response and end events are not rendered individually —
       // they update the poll via RoomEvent.Timeline listeners in PollEvent.
       [MessageEvent.PollResponse]: () => null,
       [MessageEvent.PollEnd]: () => null,
+      // Stable poll type aliases (m.poll.*)
+      [MessageEvent.StablePollResponse]: () => null,
+      [MessageEvent.StablePollEnd]: () => null,
     },
     (mEventId, mEvent, item, timelineSet, collapse) => {
       if (!showHiddenEvents) return null;

src/types/matrix/room.ts

@@ -61,18 +61,14 @@ export enum MessageEvent {
   Sticker = 'm.sticker',
   RoomRedaction = 'm.room.redaction',
   Reaction = 'm.reaction',
-}
-
-export enum MessageEvent {
-  RoomMessage = 'm.room.message',
-  RoomMessageEncrypted = 'm.room.encrypted',
-  Sticker = 'm.sticker',
-  RoomRedaction = 'm.room.redaction',
-  Reaction = 'm.reaction',
-  // MSC3381 Polls — unstable prefix (stable types not yet in a shipped room version)
+  // MSC3381 Polls — unstable prefix (still the most common in the wild)
   PollStart = 'org.matrix.msc3381.poll.start',
   PollResponse = 'org.matrix.msc3381.poll.response',
   PollEnd = 'org.matrix.msc3381.poll.end',
+  // MSC3381 Polls — stable types (used by newer servers)
+  StablePollStart = 'm.poll.start',
+  StablePollResponse = 'm.poll.response',
+  StablePollEnd = 'm.poll.end',
 }
 
 export enum RoomType {