feat(polls): implement MSC3381 polls with creator dialog and timeline renderer

Author: Just-Insane

.changeset/feat-polls.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Add MSC3381 polls: create, vote on, and end polls directly in rooms (opt-in via `features.polls` in config.json).

config.json

@@ -1,22 +1,24 @@
 {
   "defaultHomeserver": 0,
-  "homeserverList": ["matrix.org", "mozilla.org", "unredacted.org", "sable.moe", "kendama.moe"],
+  "homeserverList": [
+    "matrix.org",
+    "mozilla.org",
+    "unredacted.org",
+    "sable.moe",
+    "kendama.moe"
+  ],
   "allowCustomHomeservers": true,
   "elementCallUrl": null,
-
   "disableAccountSwitcher": false,
   "hideUsernamePasswordFields": false,
-
   "pushNotificationDetails": {
     "pushNotifyUrl": "https://sygnal.sable.moe/_matrix/push/v1/notify",
     "vapidPublicKey": "BCnS4SbHjeOaqVFW4wjt5xDt_pYIL62qMzKePfYF9fl9PQU14RieIaObh7nLR_9dQf4sykZa-CTrcjkgMIE1mcg",
     "webPushAppID": "moe.sable.app.sygnal"
   },
-
   "slidingSync": {
     "enabled": true
   },
-
   "featuredCommunities": {
     "openAsDefault": false,
     "spaces": [
@@ -35,11 +37,17 @@
       "#PrivSec.dev:arcticfoxes.net",
       "#disroot:aria-net.org"
     ],
-    "servers": ["matrixrooms.info", "mozilla.org", "unredacted.org"]
+    "servers": [
+      "matrixrooms.info",
+      "mozilla.org",
+      "unredacted.org"
+    ]
   },
-
   "hashRouter": {
     "enabled": false,
     "basename": "/"
+  },
+  "features": {
+    "polls": false
   }
-}
+}

src/app/features/room/RoomInput.tsx

@@ -137,18 +137,21 @@ import { MessageEvent } from '$types/matrix/room';
 import { usePowerLevelsContext } from '$hooks/usePowerLevels';
 import { useRoomCreators } from '$hooks/useRoomCreators';
 import { useRoomPermissions } from '$hooks/useRoomPermissions';
+import { useClientConfig } from '$hooks/useClientConfig';
 import { AutocompleteNotice } from '$components/editor/autocomplete/AutocompleteNotice';
 import {
   convertPerMessageProfileToBeeperFormat,
   getCurrentlyUsedPerMessageProfileForRoom,
 } from '$hooks/usePerMessageProfile';
-import { Microphone, Stop } from '@phosphor-icons/react';
+import { Microphone, Stop, ChartBarHorizontal } from '@phosphor-icons/react';
 import { getSupportedAudioExtension } from '$plugins/voice-recorder-kit/supportedCodec';
 import { sanitizeCustomHtml } from '$utils/sanitize';
 import { PKitCommandMessageHandler } from '$plugins/pluralkit-handler/PKitCommandMessageHandler';
 import { PKitProxyMessageHandler } from '$plugins/pluralkit-handler/PKitProxyMessageHandler';
 import { SchedulePickerDialog } from './schedule-send';
 import * as css from './schedule-send/SchedulePickerDialog.css';
+import { PollCreatorDialog } from './poll';
+import type { PollCreatorContent } from './poll';
 import {
   getAudioMsgContent,
   getFileMsgContent,
@@ -364,6 +367,9 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     );
     const [scheduleMenuAnchor, setScheduleMenuAnchor] = useState<RectCords>();
     const [showSchedulePicker, setShowSchedulePicker] = useState(false);
+    const [showPollCreator, setShowPollCreator] = useState(false);
+    const clientConfig = useClientConfig();
+    const pollsEnabled = clientConfig.features?.polls ?? false;
     const [silentReply, setSilentReply] = useState(!mentionInReplies);
     const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
     const isEncrypted = room.hasEncryptionStateEvent();
@@ -1348,16 +1354,30 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
             </>
           }
           before={
-            <IconButton
-              onClick={() => pickFile('*')}
-              variant="SurfaceVariant"
-              size="300"
-              radii="300"
-              title="Upload File"
-              aria-label="Upload and attach a File"
-            >
-              <Icon src={Icons.PlusCircle} />
-            </IconButton>
+            <Box alignItems="Center" gap="100">
+              <IconButton
+                onClick={() => pickFile('*')}
+                variant="SurfaceVariant"
+                size="300"
+                radii="300"
+                title="Upload File"
+                aria-label="Upload and attach a File"
+              >
+                <Icon src={Icons.PlusCircle} />
+              </IconButton>
+              {pollsEnabled && (
+                <IconButton
+                  onClick={() => setShowPollCreator(true)}
+                  variant="SurfaceVariant"
+                  size="300"
+                  radii="300"
+                  title="Create Poll"
+                  aria-label="Create a poll"
+                >
+                  <ChartBarHorizontal size={20} />
+                </IconButton>
+              )}
+            </Box>
           }
           after={
             <>
@@ -1616,6 +1636,37 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
             }}
           />
         )}
+        {showPollCreator && (
+          <PollCreatorDialog
+            onCancel={() => setShowPollCreator(false)}
+            onSubmit={(content: PollCreatorContent) => {
+              setShowPollCreator(false);
+              const pollKindKey = content.kind;
+              const eventContent: Record<string, unknown> = {
+                'org.matrix.msc1767.text': content.question,
+                'org.matrix.msc3381.poll.start': {
+                  question: {
+                    'org.matrix.msc1767.text': content.question,
+                  },
+                  kind: pollKindKey,
+                  max_selections: content.maxSelections,
+                  answers: content.answers.map((a) => ({
+                    id: a.id,
+                    'org.matrix.msc1767.text': a.text,
+                  })),
+                  show_voter_names: content.showVoterNames,
+                  ...(content.closesAt !== undefined ? { closes_at: content.closesAt } : {}),
+                },
+              };
+              (mx as any).sendEvent(roomId, 'org.matrix.msc3381.poll.start', eventContent).catch(
+                // unstable MSC3381 type
+                (err: unknown) => {
+                  console.error('Failed to send poll:', err);
+                }
+              );
+            }}
+          />
+        )}
       </div>
     );
   }

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

@@ -0,0 +1,49 @@
+import { style } from '@vanilla-extract/css';
+import { color, config, toRem } from 'folds';
+
+export const DialogContent = style({
+  padding: config.space.S400,
+  minWidth: toRem(340),
+  maxWidth: toRem(500),
+  display: 'flex',
+  flexDirection: 'column',
+  gap: config.space.S300,
+  maxHeight: `min(80vh, ${toRem(600)})`,
+  overflowY: 'auto',
+});
+
+export const AnswerRow = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: config.space.S200,
+});
+
+export const AnswerInput = style({
+  flex: 1,
+});
+
+export const KindSelector = style({
+  display: 'flex',
+  gap: config.space.S200,
+});
+
+export const ExpirySelector = style({
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: config.space.S100,
+});
+
+export const DatetimeInput = style({
+  padding: `${config.space.S100} ${config.space.S200}`,
+  borderRadius: config.radii.R300,
+  border: `1px solid ${color.SurfaceVariant.ContainerLine}`,
+  background: color.SurfaceVariant.Container,
+  color: 'inherit',
+  fontSize: config.fontSize.T300,
+  outline: 'none',
+  selectors: {
+    '&:focus': {
+      borderColor: color.Primary.Main,
+    },
+  },
+});