Merge pull request #939 from ThibG/glitch-soc/merge-upstream

Merge upstream changes

Gemfile

@@ -120,7 +120,7 @@ group :test do
 end
 
 group :development do
-  gem 'active_record_query_trace', '~> 1.5'
+  gem 'active_record_query_trace', '~> 1.6'
   gem 'annotate', '~> 2.7'
   gem 'better_errors', '~> 2.5'
   gem 'binding_of_caller', '~> 0.7'

Gemfile.lock

@@ -43,7 +43,7 @@ GEM
       activemodel (>= 4.1, < 6)
       case_transform (>= 0.2)
       jsonapi-renderer (>= 0.1.1.beta1, < 0.3)
-    active_record_query_trace (1.5.4)
+    active_record_query_trace (1.6)
     activejob (5.2.2)
       activesupport (= 5.2.2)
       globalid (>= 0.3.6)
@@ -658,7 +658,7 @@ PLATFORMS
 
 DEPENDENCIES
   active_model_serializers (~> 0.10)
-  active_record_query_trace (~> 1.5)
+  active_record_query_trace (~> 1.6)
   addressable (~> 2.6)
   annotate (~> 2.7)
   aws-sdk-s3 (~> 1.30)

app/javascript/flavours/glitch/actions/importer/index.js

@@ -1,4 +1,4 @@
-import { normalizeAccount, normalizeStatus } from './normalizer';
+import { normalizeAccount, normalizeStatus, normalizePoll } from './normalizer';
 
 export const ACCOUNT_IMPORT  = 'ACCOUNT_IMPORT';
 export const ACCOUNTS_IMPORT = 'ACCOUNTS_IMPORT';
@@ -71,7 +71,7 @@ export function importFetchedStatuses(statuses) {
       }
 
       if (status.poll && status.poll.id) {
-        pushUnique(polls, status.poll);
+        pushUnique(polls, normalizePoll(status.poll));
       }
     }
 
@@ -82,3 +82,9 @@ export function importFetchedStatuses(statuses) {
     dispatch(importStatuses(normalStatuses));
   };
 }
+
+export function importFetchedPoll(poll) {
+  return dispatch => {
+    dispatch(importPolls([normalizePoll(poll)]));
+  };
+}

app/javascript/flavours/glitch/actions/importer/normalizer.js

@@ -65,3 +65,14 @@ export function normalizeStatus(status, normalOldStatus) {
 
   return normalStatus;
 }
+
+export function normalizePoll(poll) {
+  const normalPoll = { ...poll };
+
+  normalPoll.options = poll.options.map(option => ({
+    ...option,
+    title_emojified: emojify(escapeTextContentForBrowser(option.title)),
+  }));
+
+  return normalPoll;
+}

app/javascript/flavours/glitch/actions/polls.js

@@ -1,4 +1,5 @@
 import api from '../api';
+import { importFetchedPoll } from './importer';
 
 export const POLL_VOTE_REQUEST = 'POLL_VOTE_REQUEST';
 export const POLL_VOTE_SUCCESS = 'POLL_VOTE_SUCCESS';
@@ -12,7 +13,10 @@ export const vote = (pollId, choices) => (dispatch, getState) => {
   dispatch(voteRequest());
 
   api(getState).post(`/api/v1/polls/${pollId}/votes`, { choices })
-    .then(({ data }) => dispatch(voteSuccess(data)))
+    .then(({ data }) => {
+      dispatch(importFetchedPoll(data));
+      dispatch(voteSuccess(data));
+    })
     .catch(err => dispatch(voteFail(err)));
 };
 
@@ -20,7 +24,10 @@ export const fetchPoll = pollId => (dispatch, getState) => {
   dispatch(fetchPollRequest());
 
   api(getState).get(`/api/v1/polls/${pollId}`)
-    .then(({ data }) => dispatch(fetchPollSuccess(data)))
+    .then(({ data }) => {
+      dispatch(importFetchedPoll(data));
+      dispatch(fetchPollSuccess(data));
+    })
     .catch(err => dispatch(fetchPollFail(err)));
 };
 

app/javascript/flavours/glitch/components/poll.js

@@ -7,6 +7,8 @@ import classNames from 'classnames';
 import { vote, fetchPoll } from 'mastodon/actions/polls';
 import Motion from 'mastodon/features/ui/util/optional_motion';
 import spring from 'react-motion/lib/spring';
+import escapeTextContentForBrowser from 'escape-html';
+import emojify from 'mastodon/features/emoji/emoji';
 
 const messages = defineMessages({
   moments: { id: 'time_remaining.moments', defaultMessage: 'Moments remaining' },
@@ -120,7 +122,7 @@ class Poll extends ImmutablePureComponent {
           {!showResults && <span className={classNames('poll__input', { checkbox: poll.get('multiple'), active })} />}
           {showResults && <span className='poll__number'>{Math.round(percent)}%</span>}
 
-          {option.get('title')}
+          <span dangerouslySetInnerHTML={{ __html: option.get('title_emojified', emojify(escapeTextContentForBrowser(option.get('title')))) }} />
         </label>
       </li>
     );

app/javascript/flavours/glitch/reducers/polls.js

@@ -1,4 +1,3 @@
-import { POLL_VOTE_SUCCESS, POLL_FETCH_SUCCESS } from 'mastodon/actions/polls';
 import { POLLS_IMPORT } from 'mastodon/actions/importer';
 import { Map as ImmutableMap, fromJS } from 'immutable';
 
@@ -10,9 +9,6 @@ export default function polls(state = initialState, action) {
   switch(action.type) {
   case POLLS_IMPORT:
     return importPolls(state, action.polls);
-  case POLL_VOTE_SUCCESS:
-  case POLL_FETCH_SUCCESS:
-    return importPolls(state, [action.poll]);
   default:
     return state;
   }

app/javascript/flavours/glitch/styles/polls.scss

@@ -5,6 +5,7 @@
   li {
     margin-bottom: 10px;
     position: relative;
+    height: 18px + 12px;
   }
 
   &__chart {
@@ -27,6 +28,9 @@
     padding: 6px 0;
     line-height: 18px;
     cursor: default;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
     input[type=radio],
     input[type=checkbox] {

app/javascript/mastodon/actions/compose.js

@@ -51,6 +51,13 @@ export const COMPOSE_UPLOAD_CHANGE_REQUEST     = 'COMPOSE_UPLOAD_UPDATE_REQUEST'
 export const COMPOSE_UPLOAD_CHANGE_SUCCESS     = 'COMPOSE_UPLOAD_UPDATE_SUCCESS';
 export const COMPOSE_UPLOAD_CHANGE_FAIL        = 'COMPOSE_UPLOAD_UPDATE_FAIL';
 
+export const COMPOSE_POLL_ADD             = 'COMPOSE_POLL_ADD';
+export const COMPOSE_POLL_REMOVE          = 'COMPOSE_POLL_REMOVE';
+export const COMPOSE_POLL_OPTION_ADD      = 'COMPOSE_POLL_OPTION_ADD';
+export const COMPOSE_POLL_OPTION_CHANGE   = 'COMPOSE_POLL_OPTION_CHANGE';
+export const COMPOSE_POLL_OPTION_REMOVE   = 'COMPOSE_POLL_OPTION_REMOVE';
+export const COMPOSE_POLL_SETTINGS_CHANGE = 'COMPOSE_POLL_SETTINGS_CHANGE';
+
 const messages = defineMessages({
   uploadErrorLimit: { id: 'upload_error.limit', defaultMessage: 'File upload limit exceeded.' },
 });
@@ -131,6 +138,7 @@ export function submitCompose(routerHistory) {
       sensitive: getState().getIn(['compose', 'sensitive']),
       spoiler_text: getState().getIn(['compose', 'spoiler_text'], ''),
       visibility: getState().getIn(['compose', 'privacy']),
+      poll: getState().getIn(['compose', 'poll'], null),
     }, {
       headers: {
         'Idempotency-Key': getState().getIn(['compose', 'idempotencyKey']),
@@ -484,4 +492,46 @@ export function changeComposing(value) {
     type: COMPOSE_COMPOSING_CHANGE,
     value,
   };
-}
+};
+
+export function addPoll() {
+  return {
+    type: COMPOSE_POLL_ADD,
+  };
+};
+
+export function removePoll() {
+  return {
+    type: COMPOSE_POLL_REMOVE,
+  };
+};
+
+export function addPollOption(title) {
+  return {
+    type: COMPOSE_POLL_OPTION_ADD,
+    title,
+  };
+};
+
+export function changePollOption(index, title) {
+  return {
+    type: COMPOSE_POLL_OPTION_CHANGE,
+    index,
+    title,
+  };
+};
+
+export function removePollOption(index) {
+  return {
+    type: COMPOSE_POLL_OPTION_REMOVE,
+    index,
+  };
+};
+
+export function changePollSettings(expiresIn, isMultiple) {
+  return {
+    type: COMPOSE_POLL_SETTINGS_CHANGE,
+    expiresIn,
+    isMultiple,
+  };
+};

app/javascript/mastodon/actions/importer/index.js

@@ -1,4 +1,4 @@
-import { normalizeAccount, normalizeStatus } from './normalizer';
+import { normalizeAccount, normalizeStatus, normalizePoll } from './normalizer';
 
 export const ACCOUNT_IMPORT  = 'ACCOUNT_IMPORT';
 export const ACCOUNTS_IMPORT = 'ACCOUNTS_IMPORT';
@@ -71,7 +71,7 @@ export function importFetchedStatuses(statuses) {
       }
 
       if (status.poll && status.poll.id) {
-        pushUnique(polls, status.poll);
+        pushUnique(polls, normalizePoll(status.poll));
       }
     }
 
@@ -82,3 +82,9 @@ export function importFetchedStatuses(statuses) {
     dispatch(importStatuses(normalStatuses));
   };
 }
+
+export function importFetchedPoll(poll) {
+  return dispatch => {
+    dispatch(importPolls([normalizePoll(poll)]));
+  };
+}

app/javascript/mastodon/actions/importer/normalizer.js

@@ -67,3 +67,14 @@ export function normalizeStatus(status, normalOldStatus) {
 
   return normalStatus;
 }
+
+export function normalizePoll(poll) {
+  const normalPoll = { ...poll };
+
+  normalPoll.options = poll.options.map(option => ({
+    ...option,
+    title_emojified: emojify(escapeTextContentForBrowser(option.title)),
+  }));
+
+  return normalPoll;
+}

app/javascript/mastodon/actions/polls.js

@@ -1,4 +1,5 @@
 import api from '../api';
+import { importFetchedPoll } from './importer';
 
 export const POLL_VOTE_REQUEST = 'POLL_VOTE_REQUEST';
 export const POLL_VOTE_SUCCESS = 'POLL_VOTE_SUCCESS';
@@ -12,7 +13,10 @@ export const vote = (pollId, choices) => (dispatch, getState) => {
   dispatch(voteRequest());
 
   api(getState).post(`/api/v1/polls/${pollId}/votes`, { choices })
-    .then(({ data }) => dispatch(voteSuccess(data)))
+    .then(({ data }) => {
+      dispatch(importFetchedPoll(data));
+      dispatch(voteSuccess(data));
+    })
     .catch(err => dispatch(voteFail(err)));
 };
 
@@ -20,7 +24,10 @@ export const fetchPoll = pollId => (dispatch, getState) => {
   dispatch(fetchPollRequest());
 
   api(getState).get(`/api/v1/polls/${pollId}`)
-    .then(({ data }) => dispatch(fetchPollSuccess(data)))
+    .then(({ data }) => {
+      dispatch(importFetchedPoll(data));
+      dispatch(fetchPollSuccess(data));
+    })
     .catch(err => dispatch(fetchPollFail(err)));
 };
 

app/javascript/mastodon/actions/statuses.js

@@ -140,7 +140,11 @@ export function redraft(status) {
 
 export function deleteStatus(id, router, withRedraft = false) {
   return (dispatch, getState) => {
-    const status = getState().getIn(['statuses', id]);
+    let status = getState().getIn(['statuses', id]);
+
+    if (status.get('poll')) {
+      status = status.set('poll', getState().getIn(['polls', status.get('poll')]));
+    }
 
     dispatch(deleteStatusRequest(id));
 

app/javascript/mastodon/components/poll.js

@@ -7,6 +7,8 @@ import classNames from 'classnames';
 import { vote, fetchPoll } from 'mastodon/actions/polls';
 import Motion from 'mastodon/features/ui/util/optional_motion';
 import spring from 'react-motion/lib/spring';
+import escapeTextContentForBrowser from 'escape-html';
+import emojify from 'mastodon/features/emoji/emoji';
 
 const messages = defineMessages({
   moments: { id: 'time_remaining.moments', defaultMessage: 'Moments remaining' },
@@ -120,7 +122,7 @@ class Poll extends ImmutablePureComponent {
           {!showResults && <span className={classNames('poll__input', { checkbox: poll.get('multiple'), active })} />}
           {showResults && <span className='poll__number'>{Math.round(percent)}%</span>}
 
-          {option.get('title')}
+          <span dangerouslySetInnerHTML={{ __html: option.get('title_emojified', emojify(escapeTextContentForBrowser(option.get('title')))) }} />
         </label>
       </li>
     );

app/javascript/mastodon/features/compose/components/compose_form.js

@@ -5,12 +5,14 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import ReplyIndicatorContainer from '../containers/reply_indicator_container';
 import AutosuggestTextarea from '../../../components/autosuggest_textarea';
+import PollButtonContainer from '../containers/poll_button_container';
 import UploadButtonContainer from '../containers/upload_button_container';
 import { defineMessages, injectIntl } from 'react-intl';
 import SpoilerButtonContainer from '../containers/spoiler_button_container';
 import PrivacyDropdownContainer from '../containers/privacy_dropdown_container';
 import SensitiveButtonContainer from '../containers/sensitive_button_container';
 import EmojiPickerDropdown from '../containers/emoji_picker_dropdown_container';
+import PollFormContainer from '../containers/poll_form_container';
 import UploadFormContainer from '../containers/upload_form_container';
 import WarningContainer from '../containers/warning_container';
 import { isMobile } from '../../../is_mobile';
@@ -206,11 +208,13 @@ class ComposeForm extends ImmutablePureComponent {
 
         <div className='compose-form__modifiers'>
           <UploadFormContainer />
+          <PollFormContainer />
         </div>
 
         <div className='compose-form__buttons-wrapper'>
           <div className='compose-form__buttons'>
             <UploadButtonContainer />
+            <PollButtonContainer />
             <PrivacyDropdownContainer />
             <SensitiveButtonContainer />
             <SpoilerButtonContainer />

app/javascript/mastodon/features/compose/components/poll_button.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import IconButton from '../../../components/icon_button';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+  add_poll: { id: 'poll_button.add_poll', defaultMessage: 'Add a poll' },
+  remove_poll: { id: 'poll_button.remove_poll', defaultMessage: 'Remove poll' },
+});
+
+const iconStyle = {
+  height: null,
+  lineHeight: '27px',
+};
+
+export default
+@injectIntl
+class PollButton extends React.PureComponent {
+
+  static propTypes = {
+    disabled: PropTypes.bool,
+    unavailable: PropTypes.bool,
+    active: PropTypes.bool,
+    onClick: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
+  handleClick = () => {
+    this.props.onClick();
+  }
+
+  render () {
+    const { intl, active, unavailable, disabled } = this.props;
+
+    if (unavailable) {
+      return null;
+    }
+
+    return (
+      <div className='compose-form__poll-button'>
+        <IconButton
+          icon='tasks'
+          title={intl.formatMessage(active ? messages.remove_poll : messages.add_poll)}
+          disabled={disabled}
+          onClick={this.handleClick}
+          className={`compose-form__poll-button-icon ${active ? 'active' : ''}`}
+          size={18}
+          inverted
+          style={iconStyle}
+        />
+      </div>
+    );
+  }
+
+}

app/javascript/mastodon/features/compose/components/poll_form.js

@@ -0,0 +1,121 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import IconButton from 'mastodon/components/icon_button';
+import Icon from 'mastodon/components/icon';
+import classNames from 'classnames';
+
+const messages = defineMessages({
+  option_placeholder: { id: 'compose_form.poll.option_placeholder', defaultMessage: 'Choice {number}' },
+  add_option: { id: 'compose_form.poll.add_option', defaultMessage: 'Add a choice' },
+  remove_option: { id: 'compose_form.poll.remove_option', defaultMessage: 'Remove this choice' },
+  poll_duration: { id: 'compose_form.poll.duration', defaultMessage: 'Poll duration' },
+  minutes: { id: 'intervals.full.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}}' },
+  hours: { id: 'intervals.full.hours', defaultMessage: '{number, plural, one {# hour} other {# hours}}' },
+  days: { id: 'intervals.full.days', defaultMessage: '{number, plural, one {# day} other {# days}}' },
+});
+
+@injectIntl
+class Option extends React.PureComponent {
+
+  static propTypes = {
+    title: PropTypes.string.isRequired,
+    index: PropTypes.number.isRequired,
+    isPollMultiple: PropTypes.bool,
+    onChange: PropTypes.func.isRequired,
+    onRemove: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
+  handleOptionTitleChange = e => {
+    this.props.onChange(this.props.index, e.target.value);
+  };
+
+  handleOptionRemove = () => {
+    this.props.onRemove(this.props.index);
+  };
+
+  render () {
+    const { isPollMultiple, title, index, intl } = this.props;
+
+    return (
+      <li>
+        <label className='poll__text editable'>
+          <span className={classNames('poll__input', { checkbox: isPollMultiple })} />
+
+          <input
+            type='text'
+            placeholder={intl.formatMessage(messages.option_placeholder, { number: index + 1 })}
+            maxlength={25}
+            value={title}
+            onChange={this.handleOptionTitleChange}
+          />
+        </label>
+
+        <div className='poll__cancel'>
+          <IconButton disabled={index <= 1} title={intl.formatMessage(messages.remove_option)} icon='times' onClick={this.handleOptionRemove} />
+        </div>
+      </li>
+    );
+  }
+
+}
+
+export default
+@injectIntl
+class PollForm extends ImmutablePureComponent {
+
+  static propTypes = {
+    options: ImmutablePropTypes.list,
+    expiresIn: PropTypes.number,
+    isMultiple: PropTypes.bool,
+    onChangeOption: PropTypes.func.isRequired,
+    onAddOption: PropTypes.func.isRequired,
+    onRemoveOption: PropTypes.func.isRequired,
+    onChangeSettings: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
+  handleAddOption = () => {
+    this.props.onAddOption('');
+  };
+
+  handleSelectDuration = e => {
+    this.props.onChangeSettings(e.target.value, this.props.isMultiple);
+  };
+
+  render () {
+    const { options, expiresIn, isMultiple, onChangeOption, onRemoveOption, intl } = this.props;
+
+    if (!options) {
+      return null;
+    }
+
+    return (
+      <div className='compose-form__poll-wrapper'>
+        <ul>
+          {options.map((title, i) => <Option title={title} key={i} index={i} onChange={onChangeOption} onRemove={onRemoveOption} isPollMultiple={isMultiple} />)}
+        </ul>
+
+        <div className='poll__footer'>
+          {options.size < 4 && (
+            <button className='button button-secondary' onClick={this.handleAddOption}><Icon id='plus' /> <FormattedMessage {...messages.add_option} /></button>
+          )}
+
+          <select value={expiresIn} onChange={this.handleSelectDuration}>
+            <option value={300}>{intl.formatMessage(messages.minutes, { number: 5 })}</option>
+            <option value={1800}>{intl.formatMessage(messages.minutes, { number: 30 })}</option>
+            <option value={3600}>{intl.formatMessage(messages.hours, { number: 1 })}</option>
+            <option value={21600}>{intl.formatMessage(messages.hours, { number: 6 })}</option>
+            <option value={86400}>{intl.formatMessage(messages.days, { number: 1 })}</option>
+            <option value={259200}>{intl.formatMessage(messages.days, { number: 3 })}</option>
+            <option value={604800}>{intl.formatMessage(messages.days, { number: 7 })}</option>
+          </select>
+        </div>
+      </div>
+    );
+  }
+
+}

app/javascript/mastodon/features/compose/components/upload_button.js

@@ -29,6 +29,7 @@ class UploadButton extends ImmutablePureComponent {
 
   static propTypes = {
     disabled: PropTypes.bool,
+    unavailable: PropTypes.bool,
     onSelectFile: PropTypes.func.isRequired,
     style: PropTypes.object,
     resetFileKey: PropTypes.number,
@@ -51,8 +52,11 @@ class UploadButton extends ImmutablePureComponent {
   }
 
   render () {
+    const { intl, resetFileKey, unavailable, disabled, acceptContentTypes } = this.props;
 
-    const { intl, resetFileKey, disabled, acceptContentTypes } = this.props;
+    if (unavailable) {
+      return null;
+    }
 
     return (
       <div className='compose-form__upload-button'>

app/javascript/mastodon/features/compose/containers/poll_button_container.js

@@ -0,0 +1,24 @@
+import { connect } from 'react-redux';
+import PollButton from '../components/poll_button';
+import { addPoll, removePoll } from '../../../actions/compose';
+
+const mapStateToProps = state => ({
+  unavailable: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 0),
+  active: state.getIn(['compose', 'poll']) !== null,
+});
+
+const mapDispatchToProps = dispatch => ({
+
+  onClick () {
+    dispatch((_, getState) => {
+      if (getState().getIn(['compose', 'poll'])) {
+        dispatch(removePoll());
+      } else {
+        dispatch(addPoll());
+      }
+    });
+  },
+
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(PollButton);

app/javascript/mastodon/features/compose/containers/poll_form_container.js

@@ -0,0 +1,29 @@
+import { connect } from 'react-redux';
+import PollForm from '../components/poll_form';
+import { addPollOption, removePollOption, changePollOption, changePollSettings } from '../../../actions/compose';
+
+const mapStateToProps = state => ({
+  options: state.getIn(['compose', 'poll', 'options']),
+  expiresIn: state.getIn(['compose', 'poll', 'expires_in']),
+  isMultiple: state.getIn(['compose', 'poll', 'multiple']),
+});
+
+const mapDispatchToProps = dispatch => ({
+  onAddOption(title) {
+    dispatch(addPollOption(title));
+  },
+
+  onRemoveOption(index) {
+    dispatch(removePollOption(index));
+  },
+
+  onChangeOption(index, title) {
+    dispatch(changePollOption(index, title));
+  },
+
+  onChangeSettings(expiresIn, isMultiple) {
+    dispatch(changePollSettings(expiresIn, isMultiple));
+  },
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(PollForm);

app/javascript/mastodon/features/compose/containers/upload_button_container.js

@@ -4,6 +4,7 @@ import { uploadCompose } from '../../../actions/compose';
 
 const mapStateToProps = state => ({
   disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 3 || state.getIn(['compose', 'media_attachments']).some(m => m.get('type') === 'video')),
+  unavailable: state.getIn(['compose', 'poll']) !== null,
   resetFileKey: state.getIn(['compose', 'resetFileKey']),
 });
 

app/javascript/mastodon/reducers/compose.js

@@ -29,6 +29,12 @@ import {
   COMPOSE_UPLOAD_CHANGE_SUCCESS,
   COMPOSE_UPLOAD_CHANGE_FAIL,
   COMPOSE_RESET,
+  COMPOSE_POLL_ADD,
+  COMPOSE_POLL_REMOVE,
+  COMPOSE_POLL_OPTION_ADD,
+  COMPOSE_POLL_OPTION_CHANGE,
+  COMPOSE_POLL_OPTION_REMOVE,
+  COMPOSE_POLL_SETTINGS_CHANGE,
 } from '../actions/compose';
 import { TIMELINE_DELETE } from '../actions/timelines';
 import { STORE_HYDRATE } from '../actions/store';
@@ -55,6 +61,7 @@ const initialState = ImmutableMap({
   is_uploading: false,
   progress: 0,
   media_attachments: ImmutableList(),
+  poll: null,
   suggestion_token: null,
   suggestions: ImmutableList(),
   default_privacy: 'public',
@@ -64,6 +71,12 @@ const initialState = ImmutableMap({
   tagHistory: ImmutableList(),
 });
 
+const initialPoll = ImmutableMap({
+  options: ImmutableList(['', '']),
+  expires_in: 24 * 3600,
+  multiple: false,
+});
+
 function statusToTextMentions(state, status) {
   let set = ImmutableOrderedSet([]);
 
@@ -85,6 +98,7 @@ function clearAll(state) {
     map.set('privacy', state.get('default_privacy'));
     map.set('sensitive', false);
     map.update('media_attachments', list => list.clear());
+    map.set('poll', null);
     map.set('idempotencyKey', uuid());
   });
 };
@@ -247,6 +261,7 @@ export default function compose(state = initialState, action) {
       map.set('spoiler', false);
       map.set('spoiler_text', '');
       map.set('privacy', state.get('default_privacy'));
+      map.set('poll', null);
       map.set('idempotencyKey', uuid());
     });
   case COMPOSE_SUBMIT_REQUEST:
@@ -329,7 +344,27 @@ export default function compose(state = initialState, action) {
         map.set('spoiler', false);
         map.set('spoiler_text', '');
       }
+
+      if (action.status.get('poll')) {
+        map.set('poll', ImmutableMap({
+          options: action.status.getIn(['poll', 'options']).map(x => x.get('title')),
+          multiple: action.status.getIn(['poll', 'multiple']),
+          expires_in: 24 * 3600,
+        }));
+      }
     });
+  case COMPOSE_POLL_ADD:
+    return state.set('poll', initialPoll);
+  case COMPOSE_POLL_REMOVE:
+    return state.set('poll', null);
+  case COMPOSE_POLL_OPTION_ADD:
+    return state.updateIn(['poll', 'options'], options => options.push(action.title));
+  case COMPOSE_POLL_OPTION_CHANGE:
+    return state.setIn(['poll', 'options', action.index], action.title);
+  case COMPOSE_POLL_OPTION_REMOVE:
+    return state.updateIn(['poll', 'options'], options => options.delete(action.index));
+  case COMPOSE_POLL_SETTINGS_CHANGE:
+    return state.update('poll', poll => poll.set('expires_in', action.expiresIn).set('multiple', action.isMultiple));
   default:
     return state;
   }

app/javascript/mastodon/reducers/polls.js

@@ -1,4 +1,3 @@
-import { POLL_VOTE_SUCCESS, POLL_FETCH_SUCCESS } from 'mastodon/actions/polls';
 import { POLLS_IMPORT } from 'mastodon/actions/importer';
 import { Map as ImmutableMap, fromJS } from 'immutable';
 
@@ -10,9 +9,6 @@ export default function polls(state = initialState, action) {
   switch(action.type) {
   case POLLS_IMPORT:
     return importPolls(state, action.polls);
-  case POLL_VOTE_SUCCESS:
-  case POLL_FETCH_SUCCESS:
-    return importPolls(state, [action.poll]);
   default:
     return state;
   }

app/javascript/styles/mastodon/polls.scss

@@ -5,6 +5,7 @@
   li {
     margin-bottom: 10px;
     position: relative;
+    height: 18px + 12px;
   }
 
   &__chart {
@@ -27,15 +28,43 @@
     padding: 6px 0;
     line-height: 18px;
     cursor: default;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
     input[type=radio],
     input[type=checkbox] {
       display: none;
     }
 
+    input[type=text] {
+      display: block;
+      box-sizing: border-box;
+      flex: 1 1 auto;
+      width: 20px;
+      font-size: 14px;
+      color: $inverted-text-color;
+      display: block;
+      outline: 0;
+      font-family: inherit;
+      background: $simple-background-color;
+      border: 1px solid darken($simple-background-color, 14%);
+      border-radius: 4px;
+      padding: 6px 10px;
+
+      &:focus {
+        border-color: $highlight-text-color;
+      }
+    }
+
     &.selectable {
       cursor: pointer;
     }
+
+    &.editable {
+      display: flex;
+      align-items: center;
+    }
   }
 
   &__input {
@@ -45,6 +74,7 @@
     box-sizing: border-box;
     width: 18px;
     height: 18px;
+    flex: 0 0 auto;
     margin-right: 10px;
     top: -1px;
     border-radius: 50%;
@@ -98,3 +128,65 @@
     font-size: 14px;
   }
 }
+
+.compose-form__poll-wrapper {
+  border-top: 1px solid darken($simple-background-color, 8%);
+
+  ul {
+    padding: 10px;
+  }
+
+  .poll__footer {
+    border-top: 1px solid darken($simple-background-color, 8%);
+    padding: 10px;
+    display: flex;
+    align-items: center;
+
+    button,
+    select {
+      flex: 1 1 50%;
+    }
+  }
+
+  .button.button-secondary {
+    font-size: 14px;
+    font-weight: 400;
+    padding: 6px 10px;
+    height: auto;
+    line-height: inherit;
+    color: $action-button-color;
+    border-color: $action-button-color;
+    margin-right: 5px;
+  }
+
+  li {
+    display: flex;
+    align-items: center;
+
+    .poll__text {
+      flex: 0 0 auto;
+      width: calc(100% - (23px + 6px));
+      margin-right: 6px;
+    }
+  }
+
+  select {
+    appearance: none;
+    box-sizing: border-box;
+    font-size: 14px;
+    color: $inverted-text-color;
+    display: inline-block;
+    width: auto;
+    outline: 0;
+    font-family: inherit;
+    background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>") no-repeat right 8px center / auto 16px;
+    border: 1px solid darken($simple-background-color, 14%);
+    border-radius: 4px;
+    padding: 6px 10px;
+    padding-right: 30px;
+  }
+
+  .icon-button.disabled {
+    color: darken($simple-background-color, 14%);
+  }
+}

app/validators/poll_validator.rb

@@ -13,7 +13,7 @@ class PollValidator < ActiveModel::Validator
     poll.errors.add(:options, I18n.t('polls.errors.too_many_options', max: MAX_OPTIONS)) if poll.options.size > MAX_OPTIONS
     poll.errors.add(:options, I18n.t('polls.errors.over_character_limit', max: MAX_OPTION_CHARS)) if poll.options.any? { |option| option.mb_chars.grapheme_length > MAX_OPTION_CHARS }
     poll.errors.add(:options, I18n.t('polls.errors.duplicate_options')) unless poll.options.uniq.size == poll.options.size
-    poll.errors.add(:expires_at, I18n.t('polls.errors.duration_too_long')) if poll.expires_at.nil? || poll.expires_at - current_time >= MAX_EXPIRATION
-    poll.errors.add(:expires_at, I18n.t('polls.errors.duration_too_short')) if poll.expires_at.present? && poll.expires_at - current_time <= MIN_EXPIRATION
+    poll.errors.add(:expires_at, I18n.t('polls.errors.duration_too_long')) if poll.expires_at.nil? || poll.expires_at - current_time > MAX_EXPIRATION
+    poll.errors.add(:expires_at, I18n.t('polls.errors.duration_too_short')) if poll.expires_at.present? && poll.expires_at - current_time < MIN_EXPIRATION
   end
 end

config/locales/co.yml

@@ -741,9 +741,9 @@ co:
       duration_too_long: hè troppu luntanu indè u futuru
       duration_too_short: hè troppu prossimu
       expired: U scandagliu hè digià finitu
-      over_character_limit: ùn ponu micca esse più longhi chè %{MAX} caratteri
+      over_character_limit: ùn ponu micca esse più longhi chè %{max} caratteri
       too_few_options: deve avè più d'un'uzzione
-      too_many_options: ùn pò micca avè più di %{MAX} uzzione
+      too_many_options: ùn pò micca avè più di %{max} uzzione
   preferences:
     languages: Lingue
     other: Altre

config/locales/cs.yml

@@ -752,9 +752,9 @@ cs:
       duration_too_long: je příliš daleko v budoucnosti
       duration_too_short: je příliš brzy
       expired: Anketa již skončila
-      over_character_limit: nesmí být každá delší než %{MAX} znaků
+      over_character_limit: nesmí být každá delší než %{max} znaků
       too_few_options: musí mít více než jednu položku
-      too_many_options: nesmí obsahovat více než %{MAX} položky
+      too_many_options: nesmí obsahovat více než %{max} položky
   preferences:
     languages: Jazyky
     other: Ostatní

config/locales/el.yml

@@ -740,9 +740,9 @@ el:
       duration_too_long: είναι πολύ μακριά στο μέλλον
       duration_too_short: είναι πολύ σύντομα
       expired: Η ψηφοφορία έχει ήδη λήξει
-      over_character_limit: δε μπορεί να υπερβαίνει τους %{MAX} χαρακτήρες έκαστη
+      over_character_limit: δε μπορεί να υπερβαίνει τους %{max} χαρακτήρες έκαστη
       too_few_options: πρέπει να έχει περισσότερες από μια επιλογές
-      too_many_options: δεν μπορεί να έχει περισσότερες από %{MAX} επιλογές
+      too_many_options: δεν μπορεί να έχει περισσότερες από %{max} επιλογές
   preferences:
     languages: Γλώσσες
     other: Άλλο

config/locales/en.yml

@@ -745,9 +745,9 @@ en:
       duration_too_long: is too far into the future
       duration_too_short: is too soon
       expired: The poll has already ended
-      over_character_limit: cannot be longer than %{MAX} characters each
+      over_character_limit: cannot be longer than %{max} characters each
       too_few_options: must have more than one item
-      too_many_options: can't contain more than %{MAX} items
+      too_many_options: can't contain more than %{max} items
   preferences:
     languages: Languages
     other: Other

config/locales/fa.yml

@@ -741,9 +741,9 @@ fa:
       duration_too_long: در آیندهٔ خیلی دور است
       duration_too_short: در آیندهٔ خیلی نزدیک است
       expired: این نظرسنجی به پایان رسیده است
-      over_character_limit: هر کدام نمی‌تواند از %{MAX} نویسه طولانی‌تر باشد
+      over_character_limit: هر کدام نمی‌تواند از %{max} نویسه طولانی‌تر باشد
       too_few_options: حتماً باید بیش از یک گزینه داشته باشد
-      too_many_options: نمی‌تواند بیشتر از %{MAX} گزینه داشته باشد
+      too_many_options: نمی‌تواند بیشتر از %{max} گزینه داشته باشد
   preferences:
     languages: تنظیمات زبان
     other: سایر تنظیمات

config/locales/fr.yml

@@ -741,9 +741,9 @@ fr:
       duration_too_long: est trop loin dans le futur
       duration_too_short: est trop tôt
       expired: Ce sondage est déjà terminé
-      over_character_limit: ne peuvent être plus long que %{MAX} caractères chacun
+      over_character_limit: ne peuvent être plus long que %{max} caractères chacun
       too_few_options: doit avoir plus qu'une proposition
-      too_many_options: ne peut contenir plus que %{MAX} propositions
+      too_many_options: ne peut contenir plus que %{max} propositions
   preferences:
     languages: Langues
     other: Autre

config/locales/gl.yml

@@ -741,9 +741,9 @@ gl:
       duration_too_long: está moi lonxe no futuro
       duration_too_short: é demasiado cedo
       expired: A sondaxe rematou
-      over_character_limit: non poden ter máis de %{MAX} caracteres cada unha
+      over_character_limit: non poden ter máis de %{max} caracteres cada unha
       too_few_options: debe ter máis de unha opción
-      too_many_options: non pode haber máis de %{MAX} opcións
+      too_many_options: non pode haber máis de %{max} opcións
   preferences:
     languages: Idiomas
     other: Outro

config/locales/ko.yml

@@ -743,9 +743,9 @@ ko:
       duration_too_long: 너무 먼 미래입니다
       duration_too_short: 너무 가깝습니다
       expired: 투표가 이미 끝났습니다
-      over_character_limit: 각각 %{MAX} 글자를 넘을 수 없습니다
+      over_character_limit: 각각 %{max} 글자를 넘을 수 없습니다
       too_few_options: 한가지 이상의 항목을 포함해야 합니다
-      too_many_options: 항목은 %{MAX}개를 넘을 수 없습니다
+      too_many_options: 항목은 %{max}개를 넘을 수 없습니다
   preferences:
     languages: 언어
     other: 기타

config/locales/sk.yml

@@ -752,9 +752,9 @@ sk:
       duration_too_long: je príliš ďaleko do budúcnosti
       duration_too_short: je príliš skoro
       expired: Anketa už skončila
-      over_character_limit: každá nemôže byť dlhšia ako %{MAX} znakov
+      over_character_limit: každá nemôže byť dlhšia ako %{max} znakov
       too_few_options: musí mať viac ako jednu položku
-      too_many_options: nemôže zahŕňať viac ako %{MAX} položiek
+      too_many_options: nemôže zahŕňať viac ako %{max} položiek
   preferences:
     languages: Jazyky
     other: Ostatné