Progress

app/javascript/gabsocial/components/modal/all_timeline_settings_modal.js

@@ -1,59 +0,0 @@
-import { defineMessages, injectIntl } from 'react-intl'
-import ImmutablePureComponent from 'react-immutable-pure-component'
-import Button from '../button'
-import Text from '../text'
-import ModalLayout from './modal_layout'
-
-const messages = defineMessages({
-  title: { id: 'promo.gab_pro', defaultMessage: 'Upgrade to GabPRO' },
-  text: { id: 'pro_upgrade_modal.text', defaultMessage: 'Gab is fully funded by people like you. Please consider supporting us on our mission to defend free expression online for all people.' },
-  benefits: { id: 'pro_upgrade_modal.benefits', defaultMessage: 'Here are just some of the benefits that thousands of GabPRO members receive:' },
-})
-
-export default
-@injectIntl
-class HomeTimelineSettingsModal extends ImmutablePureComponent {
-
-  static propTypes = {
-    intl: PropTypes.object.isRequired,
-  }
-
-  render() {
-    const { intl } = this.props
-
-    return (
-      <div>
-        <Text>
-          {intl.formatMessage(messages.text)}
-        </Text>
-        <Text>
-          {intl.formatMessage(messages.benefits)}
-        </Text>
-
-        <div className={[_s.default, _s.my10].join(' ')}>
-          <Text>• Schedule Posts</Text>
-          <Text>• Get Verified</Text>
-          <Text>• Create Groups</Text>
-          <Text>• Larger Video and Image Uploads</Text>
-          <Text>• Receive the PRO Badge</Text>
-          <Text>• Remove in-feed promotions</Text>
-        </div>
-
-        <Button
-          centered
-          backgroundColor='brand'
-          color='white'
-          icon='pro'
-          href='https://pro.gab.com'
-          className={_s.justifyContentCenter}
-          iconClassName={[_s.mr5, _s.fillColorWhite].join(' ')}
-        >
-          <Text color='inherit' weight='bold' align='center'>
-            {intl.formatMessage(messages.title)}
-          </Text>
-        </Button>
-
-      </div>
-    )
-  }
-}

app/javascript/gabsocial/components/modal/block_account_modal.js

@@ -1,6 +1,5 @@
 import { injectIntl, defineMessages } from 'react-intl'
 import { makeGetAccount } from '../../selectors'
-import { closeModal } from '../../actions/modal'
 import { blockAccount } from '../../actions/accounts'
 import ConfirmationModal from './confirmation_modal'
 
@@ -23,9 +22,6 @@ const mapDispatchToProps = dispatch => {
     onConfirm(account) {
       dispatch(blockAccount(account.get('id')))
     },
-    onClose() {
-      dispatch(closeModal())
-    },
   }
 }
 
@@ -37,7 +33,6 @@ class BlockAccountModal extends PureComponent {
   static propTypes = {
     account: PropTypes.object.isRequired,
     onConfirm: PropTypes.func.isRequired,
-    onClose: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
   }
 
@@ -45,10 +40,6 @@ class BlockAccountModal extends PureComponent {
     this.props.onConfirm(this.props.account)
   }
 
-  handleClose = () => {
-    this.props.onClose()
-  }
-
   render() {
     const { account, intl } = this.props
 
@@ -64,7 +55,6 @@ class BlockAccountModal extends PureComponent {
         title={title}
         message={message}
         confirm={intl.formatMessage(messages.block)}
-        onClose={this.handleClose}
         onConfirm={this.handleClick}
       />
     )

app/javascript/gabsocial/components/modal/community_timeline_settings_modal.js

@@ -0,0 +1,92 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import { closeModal } from '../../actions/modal'
+import { changeSetting, saveSettings } from '../../actions/settings'
+import ModalLayout from './modal_layout'
+import Button from '../button'
+import SettingSwitch from '../setting_switch'
+import Text from '../text'
+
+const messages = defineMessages({
+  title: { id: 'community_timeline_settings', defaultMessage: 'Community Timeline Settings' },
+  saveAndClose: { id: 'saveClose', defaultMessage: 'Save & Close' },
+  onlyMedia: { id: 'community.column_settings.media_only', defaultMessage: 'Media Only' },
+  showInSidebar: { id: 'show_in_sidebar', defaultMessage: 'Show in Sidebar' },
+})
+
+const mapStateToProps = state => ({
+  settings: state.getIn(['settings', 'community']),
+})
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onChange(key, checked) {
+      dispatch(changeSetting(['community', ...key], checked))
+    },
+    onSave() {
+      dispatch(saveSettings())
+      dispatch(closeModal())
+    },
+  }
+}
+
+export default
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class CommunityTimelineSettingsModal extends ImmutablePureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    settings: ImmutablePropTypes.map.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onSave: PropTypes.func.isRequired,
+  }
+
+  handleSaveAndClose = () => {
+    this.props.onSave()
+  }
+
+  render() {
+    const { intl, settings, onChange } = this.props
+
+    return (
+      <ModalLayout
+        width='320'
+        title={intl.formatMessage(messages.title)}
+      >
+      
+        <div className={[_s.default, _s.pb10].join(' ')}>
+          <SettingSwitch
+            prefix='community_timeline'
+            settings={settings}
+            settingPath={['shows', 'inSidebar']}
+            onChange={onChange}
+            label={intl.formatMessage(messages.showInSidebar)}
+          />
+
+          <SettingSwitch
+            prefix='community_timeline'
+            settings={settings}
+            settingPath={['shows', 'onlyMedia']}
+            onChange={onChange}
+            label={intl.formatMessage(messages.onlyMedia)}
+          />
+        </div>
+
+        <Button
+          centered
+          backgroundColor='brand'
+          color='white'
+          className={_s.justifyContentCenter}
+          onClick={this.handleSaveAndClose}
+        >
+          <Text color='inherit' weight='bold' align='center'>
+            {intl.formatMessage(messages.saveAndClose)}
+          </Text>
+        </Button>
+
+      </ModalLayout>
+    )
+  }
+}

app/javascript/gabsocial/components/modal/group_adder_modal.js

@@ -1,72 +0,0 @@
-import { injectIntl, defineMessages } from 'react-intl'
-import { muteAccount } from '../../actions/accounts'
-
-const messages = defineMessages({
-  muteMessage: { id: 'confirmations.mute.message', defaultMessage: 'Are you sure you want to mute {name}?' },
-  cancel: { id: 'confirmation_modal.cancel', defaultMessage: 'Cancel' },
-  confirm: { id: 'confirmations.mute.confirm', defaultMessage: 'Mute' },
-})
-
-const mapStateToProps = state => {
-  return {
-    isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']),
-    account: state.getIn(['mutes', 'new', 'account']),
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    onConfirm(account, notifications) {
-      dispatch(muteAccount(account.get('id'), notifications))
-    },
-  }
-}
-
-export default
-@connect(mapStateToProps, mapDispatchToProps)
-@injectIntl
-class UnfollowModal extends PureComponent {
-
-  static propTypes = {
-    isSubmitting: PropTypes.bool.isRequired,
-    account: PropTypes.object.isRequired,
-    onConfirm: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  }
-
-  componentDidMount() {
-    this.button.focus()
-  }
-
-  handleClick = () => {
-    this.props.onClose()
-    this.props.onConfirm(this.props.account, this.props.notifications)
-  }
-
-  handleCancel = () => {
-    this.props.onClose()
-  }
-
-  render() {
-    const { account, intl } = this.props
-
-    // , {
-    //   message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
-    //   confirm: intl.formatMessage(messages.unfollowConfirm),
-    //   onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
-    // }));
-
-    return (
-      <ConfirmationModal
-        title={`Mute @${account.get('acct')}`}
-        message={<FormattedMessage id='confirmations.mute.message' defaultMessage='Are you sure you want to mute @{name}?' values={{ name: account.get('acct') }} />}
-        confirm={<FormattedMessage id='mute' defaultMessage='Mute' />}
-        onConfirm={() => {
-          // dispatch(blockDomain(domain))
-          // dispatch(blockDomain(domain))
-        }}
-      />
-    )
-  }
-
-}

app/javascript/gabsocial/components/modal/group_create_modal.js

@@ -0,0 +1,30 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ModalLayout from './modal_layout'
+import GroupCreate from '../../features/group_create'
+
+const messages = defineMessages({
+  title: { id: 'create_group', defaultMessage: 'Create Group' },
+})
+
+export default
+@injectIntl
+class GroupCreateModal extends ImmutablePureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+  }
+
+  render() {
+    const { intl } = this.props
+
+    return (
+      <ModalLayout
+        title={intl.formatMessage(messages.title)}
+        width='440'
+      >
+        <GroupCreate />
+      </ModalLayout>
+    )
+  }
+}

app/javascript/gabsocial/components/modal/group_delete_modal.js

@@ -0,0 +1,55 @@
+import { injectIntl, defineMessages } from 'react-intl'
+import { makeGetAccount } from '../../selectors'
+import { blockAccount } from '../../actions/accounts'
+import ConfirmationModal from './confirmation_modal'
+
+const messages = defineMessages({
+  title: { id: 'group_delete_title', defaultMessage: 'Delete "{group}"' },
+  groupMessage: { id: 'confirmations.group_delete.message', defaultMessage: 'Are you sure you want to delete "{group}"?' },
+  delete: { id: 'delete', defaultMessage: 'Delete' },
+})
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onConfirm(account) {
+      // dispatch(blockAccount(account.get('id')))
+    },
+  }
+}
+
+export default
+@connect(null, mapDispatchToProps)
+@injectIntl
+class GroupDeleteModal extends PureComponent {
+
+  static propTypes = {
+    group: PropTypes.object.isRequired,
+    onConfirm: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  }
+
+  handleClick = () => {
+    this.props.onConfirm(this.props.account)
+  }
+
+  render() {
+    const { group, intl } = this.props
+
+    const title = intl.formatMessage(messages.title, {
+      group: !!group ? account.get('title') : '',
+    })
+    const message = intl.formatMessage(messages.groupMessage, {
+      group: !!group ? account.get('title') : '',
+    })
+
+    return (
+      <ConfirmationModal
+        title={title}
+        message={message}
+        confirm={intl.formatMessage(messages.delete)}
+        onConfirm={this.handleClick}
+      />
+    )
+  }
+
+}

app/javascript/gabsocial/components/modal/home_timeline_settings_modal.js

@@ -59,7 +59,7 @@ class HomeTimelineSettingsModal extends ImmutablePureComponent {
         title={intl.formatMessage(messages.title)}
       >
       
-        <div className={[_s.default, _s.my10, _s.pb10].join(' ')}>
+        <div className={[_s.default, _s.pb10].join(' ')}>
           <SettingSwitch
             prefix='home_timeline'
             settings={settings}

app/javascript/gabsocial/components/modal/hotkeys_modal.js

@@ -26,7 +26,6 @@ const messages = defineMessages({
   unfocus: { id: 'keyboard_shortcuts.unfocus', defaultMessage: 'un-focus compose textarea/search' },
   home: { id: 'keyboard_shortcuts.home', defaultMessage: 'open home timeline' },
   notifications: { id: 'keyboard_shortcuts.notifications', defaultMessage: 'open notifications column' },
-  direct: { id: 'keyboard_shortcuts.direct', defaultMessage: 'open direct messages column' },
   start: { id: 'keyboard_shortcuts.start', defaultMessage: 'open "get started" column' },
   favorites: { id: 'keyboard_shortcuts.favorites', defaultMessage: 'open favorites list' },
   pinned: { id: 'keyboard_shortcuts.pinned', defaultMessage: 'open pinned gabs list' },
@@ -93,7 +92,6 @@ class HotkeysModal extends ImmutablePureComponent {
               <HotKeysModalRow hotkey='esc' action={intl.formatMessage(messages.unfocus)} />
               <HotKeysModalRow hotkey='g + h' action={intl.formatMessage(messages.home)} />
               <HotKeysModalRow hotkey='g + n' action={intl.formatMessage(messages.notifications)} />
-              <HotKeysModalRow hotkey='g + d' action={intl.formatMessage(messages.direct)} />
             </tbody>
           </table>
           <table>

app/javascript/gabsocial/components/modal/list_adder_modal.js

@@ -1,72 +0,0 @@
-import { injectIntl, defineMessages } from 'react-intl'
-import { muteAccount } from '../../actions/accounts'
-
-const messages = defineMessages({
-  muteMessage: { id: 'confirmations.mute.message', defaultMessage: 'Are you sure you want to mute {name}?' },
-  cancel: { id: 'confirmation_modal.cancel', defaultMessage: 'Cancel' },
-  confirm: { id: 'confirmations.mute.confirm', defaultMessage: 'Mute' },
-})
-
-const mapStateToProps = state => {
-  return {
-    isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']),
-    account: state.getIn(['mutes', 'new', 'account']),
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    onConfirm(account, notifications) {
-      dispatch(muteAccount(account.get('id'), notifications))
-    },
-  }
-}
-
-export default
-@connect(mapStateToProps, mapDispatchToProps)
-@injectIntl
-class UnfollowModal extends PureComponent {
-
-  static propTypes = {
-    isSubmitting: PropTypes.bool.isRequired,
-    account: PropTypes.object.isRequired,
-    onConfirm: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  }
-
-  componentDidMount() {
-    this.button.focus()
-  }
-
-  handleClick = () => {
-    this.props.onClose()
-    this.props.onConfirm(this.props.account, this.props.notifications)
-  }
-
-  handleCancel = () => {
-    this.props.onClose()
-  }
-
-  render() {
-    const { account, intl } = this.props
-
-    // , {
-    //   message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
-    //   confirm: intl.formatMessage(messages.unfollowConfirm),
-    //   onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
-    // }));
-
-    return (
-      <ConfirmationModal
-        title={`Mute @${account.get('acct')}`}
-        message={<FormattedMessage id='confirmations.mute.message' defaultMessage='Are you sure you want to mute @{name}?' values={{ name: account.get('acct') }} />}
-        confirm={<FormattedMessage id='mute' defaultMessage='Mute' />}
-        onConfirm={() => {
-          // dispatch(blockDomain(domain))
-          // dispatch(blockDomain(domain))
-        }}
-      />
-    )
-  }
-
-}

app/javascript/gabsocial/components/modal/list_create_modal.js

@@ -0,0 +1,30 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ModalLayout from './modal_layout'
+import ListCreate from '../../features/list_create'
+
+const messages = defineMessages({
+  title: { id: 'create_list', defaultMessage: 'Create List' },
+})
+
+export default
+@injectIntl
+class ListCreateModal extends ImmutablePureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+  }
+
+  render() {
+    const { intl } = this.props
+
+    return (
+      <ModalLayout
+        title={intl.formatMessage(messages.title)}
+        width='500'
+      >
+        <ListCreate />
+      </ModalLayout>
+    )
+  }
+}

app/javascript/gabsocial/components/modal/list_delete_modal.js

@@ -0,0 +1,55 @@
+import { injectIntl, defineMessages } from 'react-intl'
+import { makeGetAccount } from '../../selectors'
+import { blockAccount } from '../../actions/accounts'
+import ConfirmationModal from './confirmation_modal'
+
+const messages = defineMessages({
+  title: { id: 'list_delete_title', defaultMessage: 'Delete "{list}"' },
+  listMessage: { id: 'confirmations.list_delete.message', defaultMessage: 'Are you sure you want to delete "{list}"?' },
+  delete: { id: 'delete', defaultMessage: 'Delete' },
+})
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onConfirm(account) {
+      // dispatch(blockAccount(account.get('id')))
+    },
+  }
+}
+
+export default
+@connect(null, mapDispatchToProps)
+@injectIntl
+class ListDeleteModal extends PureComponent {
+
+  static propTypes = {
+    list: PropTypes.object.isRequired,
+    onConfirm: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  }
+
+  handleClick = () => {
+    this.props.onConfirm(this.props.account)
+  }
+
+  render() {
+    const { list, intl } = this.props
+
+    const title = intl.formatMessage(messages.title, {
+      list: !!list ? account.get('title') : '',
+    })
+    const message = intl.formatMessage(messages.listMessage, {
+      list: !!list ? account.get('title') : '',
+    })
+
+    return (
+      <ConfirmationModal
+        title={title}
+        message={message}
+        confirm={intl.formatMessage(messages.delete)}
+        onConfirm={this.handleClick}
+      />
+    )
+  }
+
+}

app/javascript/gabsocial/components/modal/list_timeline_settings_modal.js

@@ -0,0 +1,119 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import { closeModal } from '../../actions/modal'
+import { changeSetting, saveSettings } from '../../actions/settings'
+import ModalLayout from './modal_layout'
+import Button from '../button'
+import SettingSwitch from '../setting_switch'
+import Text from '../text'
+
+const messages = defineMessages({
+  title: { id: 'list_timeline_settings', defaultMessage: 'List Timeline Settings' },
+  saveAndClose: { id: 'saveClose', defaultMessage: 'Save & Close' },
+  showVideos: { id: 'home.column_settings.show_videos', defaultMessage: 'Show videos' },
+  showPhotos: { id: 'home.column_settings.show_photos', defaultMessage: 'Show photos' },
+  showPolls: { id: 'home.column_settings.show_polls', defaultMessage: 'Show polls' },
+  showReposts: { id: 'home.column_settings.show_reposts', defaultMessage: 'Show comments' },
+  showReplies: { id: 'home.column_settings.show_replies', defaultMessage: 'Show replies' },
+})
+
+const mapStateToProps = state => ({
+  settings: state.getIn(['settings', 'list']),
+})
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onChange(key, checked) {
+      dispatch(changeSetting(['list', ...key], checked))
+    },
+    onSave() {
+      dispatch(saveSettings())
+      dispatch(closeModal())
+    },
+  }
+}
+
+export default
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class ListTimelineSettingsModal extends ImmutablePureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    settings: ImmutablePropTypes.map.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onSave: PropTypes.func.isRequired,
+  }
+
+  handleSaveAndClose = () => {
+    this.props.onSave()
+  }
+
+  render() {
+    const { intl, settings, onChange } = this.props
+
+    return (
+      <ModalLayout
+        width='320'
+        title={intl.formatMessage(messages.title)}
+      >
+      
+        <div className={[_s.default, _s.pb10].join(' ')}>
+          <SettingSwitch
+            prefix='list_timeline'
+            settings={settings}
+            settingPath={['shows', 'polls']}
+            onChange={onChange}
+            label={intl.formatMessage(messages.showPolls)}
+          />
+
+          <SettingSwitch
+            prefix='list_timeline'
+            settings={settings}
+            settingPath={['shows', 'photos']}
+            onChange={onChange}
+            label={intl.formatMessage(messages.showPhotos)}
+          />
+
+          <SettingSwitch
+            prefix='list_timeline'
+            settings={settings}
+            settingPath={['shows', 'videos']}
+            onChange={onChange}
+            label={intl.formatMessage(messages.showVideos)}
+          />
+
+          <SettingSwitch
+            prefix='list_timeline'
+            settings={settings}
+            settingPath={['shows', 'repost']}
+            onChange={onChange}
+            label={intl.formatMessage(messages.showReposts)}
+          />
+
+          <SettingSwitch
+            prefix='list_timeline'
+            settings={settings}
+            settingPath={['shows', 'reply']}
+            onChange={onChange}
+            label={intl.formatMessage(messages.showReplies)}
+          />
+        </div>
+
+        <Button
+          centered
+          backgroundColor='brand'
+          color='white'
+          className={_s.justifyContentCenter}
+          onClick={this.handleSaveAndClose}
+        >
+          <Text color='inherit' weight='bold' align='center'>
+            {intl.formatMessage(messages.saveAndClose)}
+          </Text>
+        </Button>
+
+      </ModalLayout>
+    )
+  }
+}

app/javascript/gabsocial/components/modal/modal_layout.js

@@ -1,5 +1,6 @@
 import { defineMessages, injectIntl } from 'react-intl'
 import classNames from 'classnames/bind'
+import { closeModal } from '../../actions/modal'
 import Button from '../button'
 import Block from '../block'
 import Heading from '../heading'
@@ -10,13 +11,23 @@ const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
 })
 
+const mapDispatchToProps = dispatch => {
+  return {
+    handleCloseModal() {
+      dispatch(closeModal())
+    },
+  }
+}
+
 export default
+@connect(null, mapDispatchToProps)
 @injectIntl
 class ModalLayout extends PureComponent {
   static propTypes = {
     title: PropTypes.string,
     children: PropTypes.node,
     onClose: PropTypes.func.isRequired,
+    handleCloseModal: PropTypes.func.isRequired,
     width: PropTypes.number,
     hideClose: PropTypes.bool,
     noPadding: PropTypes.bool,
@@ -26,12 +37,19 @@ class ModalLayout extends PureComponent {
     width: 600,
   }
 
+  onHandleCloseModal = () => {
+    if (this.props.onClose) {
+      this.props.onClose();
+    } else {
+      this.props.handleCloseModal()
+    }
+  }
+
   render() {
     const {
       title,
       children,
       intl,
-      onClose,
       width,
       hideClose,
       noPadding
@@ -39,6 +57,8 @@ class ModalLayout extends PureComponent {
 
     const childrenContainerClasses = cx({
       default: 1,
+      heightMax80VH: 1,
+      overflowScroll: 1,
       px15: !noPadding,
       py10: !noPadding,
     })
@@ -56,7 +76,7 @@ class ModalLayout extends PureComponent {
                 backgroundColor='none'
                 title={intl.formatMessage(messages.close)}
                 className={_s.marginLeftAuto}
-                onClick={onClose}
+                onClick={this.onHandleCloseModal}
                 icon='close'
                 iconWidth='10px'
                 iconWidth='10px'

app/javascript/gabsocial/components/modal/modal_root.js

@@ -8,7 +8,7 @@ import {
   // ListEditor,
   // ListAdder,
   StatusRevisionModal,
-} from '../../features/ui/util/async-components'
+} from '../../features/ui/util/async_components'
 
 import ModalBase from './modal_base'
 import BundleModalError from '../bundle_modal_error'
@@ -17,14 +17,18 @@ import ActionsModal from './actions_modal'
 import BlockAccountModal from './block_account_modal'
 import BlockDomainModal from './block_domain_modal'
 import BoostModal from './boost_modal'
+import CommunityTimelineSettingsModal from './community_timeline_settings_modal'
 import ComposeModal from './compose_modal'
 import ConfirmationModal from './confirmation_modal'
-import GroupAdderModal from './group_adder_modal'
+import GroupCreateModal from './group_create_modal'
+import GroupDeleteModal from './group_delete_modal'
 import GroupEditorModal from './group_editor_modal'
 import HomeTimelineSettingsModal from './home_timeline_settings_modal'
 import HotkeysModal from './hotkeys_modal'
-import ListAdderModal from './list_adder_modal'
+import ListCreateModal from './list_create_modal'
+import ListDeleteModal from './list_delete_modal'
 import ListEditorModal from './list_editor_modal'
+import ListTimelineSettingsModal from './list_timeline_settings_modal'
 import MediaModal from './media_modal'
 import ModalLoading from './modal_loading'
 import ProUpgradeModal from './pro_upgrade_modal'
@@ -37,15 +41,19 @@ const MODAL_COMPONENTS = {
   BLOCK_ACCOUNT: () => Promise.resolve({ default: BlockAccountModal }),
   BLOCK_DOMAIN: () => Promise.resolve({ default: BlockDomainModal }),
   BOOST: () => Promise.resolve({ default: BoostModal }),
+  COMMUNITY_TIMELINE_SETTINGS: () => Promise.resolve({ default: CommunityTimelineSettingsModal }),
   COMPOSE: () => Promise.resolve({ default: ComposeModal }),
   CONFIRM: () => Promise.resolve({ default: ConfirmationModal }),
   EMBED: () => Promise.resolve({ default: EmbedModal }),
+  GROUP_CREATE: () => Promise.resolve({ default: GroupCreateModal }),
+  GROUP_DELETE: () => Promise.resolve({ default: GroupDeleteModal }),
   GROUP_EDITOR: () => Promise.resolve({ default: GroupEditorModal }),
-  GROUP_ADDER: () => Promise.resolve({ default: GroupAdderModal }),
   HOME_TIMELINE_SETTINGS: () => Promise.resolve({ default: HomeTimelineSettingsModal }),
   HOTKEYS: () => Promise.resolve({ default: HotkeysModal }),
+  LIST_CREATE: () => Promise.resolve({ default: ListCreateModal }),
+  LIST_DELETE: () => Promise.resolve({ default: ListDeleteModal }),
   LIST_EDITOR: () => Promise.resolve({ default: ListEditorModal }),
-  LIST_ADDER: () => Promise.resolve({ default: ListAdderModal }),
+  LIST_TIMELINE_SETTINGS: () => Promise.resolve({ default: ListTimelineSettingsModal }),
   MEDIA: () => Promise.resolve({ default: MediaModal }),
   'MUTE': MuteModal,
   PRO_UPGRADE: () => Promise.resolve({ default: ProUpgradeModal }),

app/javascript/gabsocial/components/modal/mute_modal.js

@@ -1,6 +1,5 @@
 import { injectIntl, defineMessages } from 'react-intl'
 import { makeGetAccount } from '../../selectors'
-import { closeModal } from '../../actions/modal'
 import { muteAccount } from '../../actions/accounts'
 import ConfirmationModal from './confirmation_modal'
 
@@ -21,12 +20,8 @@ const mapStateToProps = (state, { accountId }) => {
 const mapDispatchToProps = dispatch => {
   return {
     onConfirm(account, notifications) {
-      dispatch(closeModal())
       dispatch(muteAccount(account.get('id'), notifications))
     },
-    onClose() {
-      dispatch(closeModal())
-    },
   }
 }
 
@@ -38,7 +33,6 @@ class MuteModal extends PureComponent {
   static propTypes = {
     account: PropTypes.object.isRequired,
     onConfirm: PropTypes.func.isRequired,
-    onClose: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
   }
 
@@ -46,10 +40,6 @@ class MuteModal extends PureComponent {
     this.props.onConfirm(this.props.account)
   }
 
-  handleClose = () => {
-    this.props.onClose()
-  }
-
   render() {
     const { account, intl } = this.props
 
@@ -65,7 +55,6 @@ class MuteModal extends PureComponent {
         title={title}
         message={message}
         confirm={intl.formatMessage(messages.mute)}
-        onClose={this.handleClose}
         onConfirm={this.handleClick}
       />
     )

app/javascript/gabsocial/components/modal/pro_upgrade_modal.js

@@ -22,7 +22,7 @@ class ProUpgradeModal extends ImmutablePureComponent {
     const { intl } = this.props
 
     return (
-      <ModalLayout title={intl.formatMessage(messages.title)}>
+      <ModalLayout title={intl.formatMessage(messages.title)} width='460'>
         <Text>
           {intl.formatMessage(messages.text)}
         </Text>