Poll create modal

Author: yash-signal

_locales/en/messages.json

@@ -1498,6 +1498,42 @@
     "messageformat": "No votes",
     "description": "Message shown when poll has no votes"
   },
+  "icu:PollCreateModal__title": {
+    "messageformat": "New poll",
+    "description": "Title for the modal to create a new poll"
+  },
+  "icu:PollCreateModal__questionLabel": {
+    "messageformat": "Question",
+    "description": "Label for the poll question input field"
+  },
+  "icu:PollCreateModal__questionPlaceholder": {
+    "messageformat": "What should we order for lunch?",
+    "description": "Placeholder text for the poll question input field"
+  },
+  "icu:PollCreateModal__optionsLabel": {
+    "messageformat": "Options",
+    "description": "Label for the poll options section"
+  },
+  "icu:PollCreateModal__optionPlaceholder": {
+    "messageformat": "Option {number}",
+    "description": "Placeholder text for poll option input field"
+  },
+  "icu:PollCreateModal__allowMultipleVotes": {
+    "messageformat": "Allow multiple votes",
+    "description": "Label for the toggle to allow multiple votes in a poll"
+  },
+  "icu:PollCreateModal__sendButton": {
+    "messageformat": "Send",
+    "description": "Send button text in poll creation modal"
+  },
+  "icu:PollCreateModal__Error--RequiresQuestion": {
+    "messageformat": "Poll question is required",
+    "description": "Error message shown when poll question is empty"
+  },
+  "icu:PollCreateModal__Error--RequiresTwoOptions": {
+    "messageformat": "Poll requires at least 2 options",
+    "description": "Error message shown when poll has fewer than 2 non-empty options"
+  },
   "icu:deleteConversation": {
     "messageformat": "Delete",
     "description": "Menu item for deleting a conversation (including messages), title case."
@@ -5828,6 +5864,22 @@
     "messageformat": "Attach file",
     "description": "Aria label for file attachment button in composition area"
   },
+  "icu:CompositionArea__AttachMenu__PhotosAndVideos": {
+    "messageformat": "Photos & videos",
+    "description": "Menu item to attach photos and videos"
+  },
+  "icu:CompositionArea__AttachMenu__File": {
+    "messageformat": "File",
+    "description": "Menu item to attach a file"
+  },
+  "icu:CompositionArea__AttachMenu__Poll": {
+    "messageformat": "Poll",
+    "description": "Menu item to create a poll"
+  },
+  "icu:CompositionArea--attach-plus": {
+    "messageformat": "Add attachment or poll",
+    "description": "Aria label for plus button that opens attachment menu"
+  },
   "icu:CompositionArea--sms-only__title": {
     "messageformat": "This person isn’t using Signal",
     "description": "Title for the composition area for the SMS-only contact"

stylesheets/components/PollCreateModal.scss

@@ -0,0 +1,8 @@
+// Copyright 2025 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+.PollCreateModalInput {
+  &__container {
+    margin-block: 0;
+  }
+}

stylesheets/manifest.scss

@@ -150,6 +150,7 @@
 @use 'components/PermissionsPopup.scss';
 @use 'components/PlaybackButton.scss';
 @use 'components/PlaybackRateButton.scss';
+@use 'components/PollCreateModal.scss';
 @use 'components/Preferences.scss';
 @use 'components/PreferencesDonations.scss';
 @use 'components/ProfileEditor.scss';

ts/components/CompositionArea.dom.tsx

@@ -76,6 +76,12 @@ import { strictAssert } from '../util/assert.std.js';
 import { ConfirmationDialog } from './ConfirmationDialog.dom.js';
 import type { EmojiSkinTone } from './fun/data/emojis.std.js';
 import { FunPickerButton } from './fun/FunButton.dom.js';
+import { AxoDropdownMenu } from '../axo/AxoDropdownMenu.dom.js';
+import { AxoSymbol } from '../axo/AxoSymbol.dom.js';
+import { AxoButton } from '../axo/AxoButton.dom.js';
+import { tw } from '../axo/tw.dom.js';
+import { isPollSendEnabled, type PollCreateType } from '../types/Polls.dom.js';
+import { PollCreateModal } from './PollCreateModal.dom.js';
 
 export type OwnProps = Readonly<{
   acceptedMessageRequest: boolean | null;
@@ -160,6 +166,7 @@ export type OwnProps = Readonly<{
       voiceNoteAttachment?: InMemoryAttachmentDraftType;
     }
   ): unknown;
+  sendPoll(conversationId: string, poll: PollCreateType): unknown;
   quotedMessageId: string | null;
   quotedMessageProps: null | ReadonlyDeep<
     Omit<
@@ -244,6 +251,7 @@ export const CompositionArea = memo(function CompositionArea({
   removeAttachment,
   sendEditedMessage,
   sendMultiMediaMessage,
+  sendPoll,
   setComposerFocus,
   setMessageToEdit,
   setQuoteByMessageId,
@@ -332,8 +340,10 @@ export const CompositionArea = memo(function CompositionArea({
   const [attachmentToEdit, setAttachmentToEdit] = useState<
     AttachmentDraftType | undefined
   >();
+  const [isPollModalOpen, setIsPollModalOpen] = useState(false);
   const inputApiRef = useRef<InputApi | undefined>();
   const fileInputRef = useRef<null | HTMLInputElement>(null);
+  const photoVideoInputRef = useRef<null | HTMLInputElement>(null);
 
   const handleForceSend = useCallback(() => {
     setLarge(false);
@@ -407,8 +417,9 @@ export const CompositionArea = memo(function CompositionArea({
     ]
   );
 
-  const launchAttachmentPicker = useCallback(() => {
-    const fileInput = fileInputRef.current;
+  const launchAttachmentPicker = useCallback((type?: 'media' | 'file') => {
+    const inputRef = type === 'media' ? photoVideoInputRef : fileInputRef;
+    const fileInput = inputRef.current;
     if (fileInput) {
       // Setting the value to empty so that onChange always fires in case
       // you add multiple photos.
@@ -417,6 +428,32 @@ export const CompositionArea = memo(function CompositionArea({
     }
   }, []);
 
+  const launchMediaPicker = useCallback(
+    () => launchAttachmentPicker('media'),
+    [launchAttachmentPicker]
+  );
+
+  const launchFilePicker = useCallback(
+    () => launchAttachmentPicker('file'),
+    [launchAttachmentPicker]
+  );
+
+  const handleOpenPollModal = useCallback(() => {
+    setIsPollModalOpen(true);
+  }, []);
+
+  const handleClosePollModal = useCallback(() => {
+    setIsPollModalOpen(false);
+  }, []);
+
+  const handleSendPoll = useCallback(
+    (poll: PollCreateType) => {
+      sendPoll(conversationId, poll);
+      handleClosePollModal();
+    },
+    [conversationId, sendPoll, handleClosePollModal]
+  );
+
   function maybeEditAttachment(attachment: AttachmentDraftType) {
     if (!isImageTypeSupported(attachment.contentType)) {
       return;
@@ -444,7 +481,7 @@ export const CompositionArea = memo(function CompositionArea({
 
   const [hasFocus, setHasFocus] = useState(false);
 
-  const attachFileShortcut = useAttachFileShortcut(launchAttachmentPicker);
+  const attachFileShortcut = useAttachFileShortcut(launchFilePicker);
   const editLastMessageSent = useEditLastMessageSent(maybeEditMessage);
   useKeyboardShortcutsConditionally(
     hasFocus,
@@ -708,17 +745,56 @@ export const CompositionArea = memo(function CompositionArea({
   ) : null;
 
   const isRecording = recordingState === RecordingState.Recording;
-  const attButton =
-    draftEditMessage || linkPreviewResult || isRecording ? undefined : (
+
+  let attButton;
+  if (draftEditMessage || linkPreviewResult || isRecording) {
+    attButton = undefined;
+  } else if (isPollSendEnabled()) {
+    attButton = (
+      <div className="CompositionArea__button-cell">
+        <AxoDropdownMenu.Root>
+          <AxoDropdownMenu.Trigger>
+            <div className={tw('flex h-8 items-center')}>
+              <AxoButton.Root
+                variant="borderless-secondary"
+                size="small"
+                aria-label={i18n('icu:CompositionArea--attach-plus')}
+              >
+                <AxoSymbol.Icon label={null} symbol="plus" size={20} />
+              </AxoButton.Root>
+            </div>
+          </AxoDropdownMenu.Trigger>
+          <AxoDropdownMenu.Content>
+            <AxoDropdownMenu.Item symbol="photo" onSelect={launchMediaPicker}>
+              {i18n('icu:CompositionArea__AttachMenu__PhotosAndVideos')}
+            </AxoDropdownMenu.Item>
+            <AxoDropdownMenu.Item symbol="file" onSelect={launchFilePicker}>
+              {i18n('icu:CompositionArea__AttachMenu__File')}
+            </AxoDropdownMenu.Item>
+            {conversationType === 'group' && (
+              <AxoDropdownMenu.Item
+                symbol="poll"
+                onSelect={handleOpenPollModal}
+              >
+                {i18n('icu:CompositionArea__AttachMenu__Poll')}
+              </AxoDropdownMenu.Item>
+            )}
+          </AxoDropdownMenu.Content>
+        </AxoDropdownMenu.Root>
+      </div>
+    );
+  } else {
+    attButton = (
       <div className="CompositionArea__button-cell">
         <button
           type="button"
           className="CompositionArea__attach-file"
-          onClick={launchAttachmentPicker}
+          onClick={launchFilePicker}
           aria-label={i18n('icu:CompositionArea--attach-file')}
         />
       </div>
     );
+  }
 
   const sendButtonFragment = !draftEditMessage ? (
     <>
@@ -1049,7 +1125,7 @@ export const CompositionArea = memo(function CompositionArea({
               attachments={draftAttachments}
               canEditImages
               i18n={i18n}
-              onAddAttachment={launchAttachmentPicker}
+              onAddAttachment={launchFilePicker}
               onClickAttachment={maybeEditAttachment}
               onClose={() => onClearAttachments(conversationId)}
               onCloseAttachment={attachment => {
@@ -1133,6 +1209,22 @@ export const CompositionArea = memo(function CompositionArea({
         processAttachments={processAttachments}
         ref={fileInputRef}
       />
+      <CompositionUpload
+        conversationId={conversationId}
+        draftAttachments={draftAttachments}
+        i18n={i18n}
+        processAttachments={processAttachments}
+        ref={photoVideoInputRef}
+        acceptMediaOnly
+        testId="attachfile-input-media"
+      />
+      {isPollModalOpen && (
+        <PollCreateModal
+          i18n={i18n}
+          onClose={handleClosePollModal}
+          onSendPoll={handleSendPoll}
+        />
+      )}
     </div>
   );
 });

ts/components/CompositionUpload.dom.tsx

@@ -25,11 +25,19 @@ export type PropsType = {
     files: ReadonlyArray<File>;
     flags: number | null;
   }) => unknown;
+  acceptMediaOnly?: boolean;
+  testId?: string;
 };
 
 export const CompositionUpload = forwardRef<HTMLInputElement, PropsType>(
   function CompositionUploadInner(
-    { conversationId, draftAttachments, processAttachments },
+    {
+      conversationId,
+      draftAttachments,
+      processAttachments,
+      acceptMediaOnly,
+      testId,
+    },
     ref
   ) {
     const onFileInputChange: ChangeEventHandler<
@@ -48,13 +56,14 @@ export const CompositionUpload = forwardRef<HTMLInputElement, PropsType>(
       return isImageAttachment(attachment) || isVideoAttachment(attachment);
     });
 
-    const acceptContentTypes = anyVideoOrImageAttachments
-      ? [...getSupportedImageTypes(), ...getSupportedVideoTypes()]
-      : null;
+    const acceptContentTypes =
+      acceptMediaOnly || anyVideoOrImageAttachments
+        ? [...getSupportedImageTypes(), ...getSupportedVideoTypes()]
+        : null;
 
     return (
       <input
-        data-testid="attachfile-input"
+        data-testid={testId ?? 'attachfile-input'}
         hidden
         multiple
         onChange={onFileInputChange}

ts/components/Input.dom.tsx

@@ -35,13 +35,15 @@ export type PropsType = {
   onChange: (value: string) => unknown;
   onBlur?: () => unknown;
   onFocus?: () => unknown;
-  onEnter?: () => unknown;
+  onEnter?: (event: KeyboardEvent) => unknown;
   placeholder: string;
   readOnly?: boolean;
   value?: string;
   whenToShowRemainingCount?: number;
   whenToWarnRemainingCount?: number;
   children?: ReactNode;
+  'aria-invalid'?: boolean | 'true' | 'false';
+  'aria-errormessage'?: string;
 };
 
 /**
@@ -90,6 +92,8 @@ export const Input = forwardRef<
     whenToShowRemainingCount = Infinity,
     whenToWarnRemainingCount = Infinity,
     children,
+    'aria-invalid': ariaInvalid,
+    'aria-errormessage': ariaErrorMessage,
   },
   ref
 ) {
@@ -120,7 +124,7 @@ export const Input = forwardRef<
   const handleKeyDown = useCallback(
     (event: KeyboardEvent) => {
       if (onEnter && event.key === 'Enter') {
-        onEnter();
+        onEnter(event);
       }
 
       const inputEl = innerRef.current;
@@ -235,6 +239,8 @@ export const Input = forwardRef<
     ),
     type: 'text',
     value,
+    'aria-invalid': ariaInvalid,
+    'aria-errormessage': ariaErrorMessage,
   };
 
   const clearButtonElement =

ts/components/PollCreateModal.dom.stories.tsx

@@ -0,0 +1,23 @@
+// Copyright 2025 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import type { Meta } from '@storybook/react';
+import type { PollCreateModalProps } from './PollCreateModal.dom.js';
+import { PollCreateModal } from './PollCreateModal.dom.js';
+
+const { i18n } = window.SignalContext;
+
+export default {
+  title: 'Components/PollCreateModal',
+} satisfies Meta<PollCreateModalProps>;
+
+const onClose = action('onClose');
+const onSendPoll = action('onSendPoll');
+
+export function Default(): JSX.Element {
+  return (
+    <PollCreateModal i18n={i18n} onClose={onClose} onSendPoll={onSendPoll} />
+  );
+}