Progress

app/javascript/gabsocial/components/divider.js

@@ -4,18 +4,20 @@ const cx = classnames.bind(_s)
 
 export default class Divider extends PureComponent {
   static propTypes = {
-    small: PropTypes.bool
+    small: PropTypes.bool,
+    invisible: PropTypes.bool,
   }
+
   render() {
-    const { small } = this.props
+    const { small, invisible } = this.props
 
     const classes = cx({
       default: 1,
-      borderBottom1PX: 1,
+      borderBottom1PX: !invisible,
-      borderColorSecondary2: 1,
+      borderColorSecondary2: !invisible,
       width100PC: 1,
       marginBottom15PX: !small,
-      marginVertical10PX: small,
+      marginVertical10PX: small || invisible,
     })
 
     return (

app/javascript/gabsocial/components/file_input.js

@@ -0,0 +1,100 @@
+import classNames from 'classnames/bind'
+import Image from './image'
+import Text from './text'
+
+const cx = classNames.bind(_s)
+
+export default class FileInput extends PureComponent {
+  static propTypes = {
+    onChange: PropTypes.func,
+    file: PropTypes.any,
+    fileType: PropTypes.string,
+    disabled: PropTypes.bool,
+    title: PropTypes.string,
+    height: PropTypes.string,
+    width: PropTypes.string,
+  }
+
+  static defaultProps = {
+    fileType: 'image'
+  }
+
+  state = {
+    file: null,
+  }
+
+  handleOnChange = (e) => {
+    this.props.onChange(e)
+    this.setState({
+      file: URL.createObjectURL(e.target.files[0])
+    })
+  }
+
+  render() {
+    const {
+      fileType,
+      disabled,
+      title,
+      height,
+      width,
+    } = this.props
+    const { file } = this.state
+
+    const imageClasses = cx({
+      border2PX: 1,
+      borderDashed: 1,
+      borderColorSecondary: 1,
+      backgroundColorPrimary: 1,
+      paddingHorizontal10PX: 1,
+      paddingVertical10PX: 1,
+      radiusSmall: 1,
+      cursorPointer: 1,
+    })
+
+    return (
+      <div>
+        {
+          !!title &&
+          <div className={[_s.default, _s.marginBottom10PX, _s.paddingLeft15PX].join(' ')}>
+            <Text size='small' weight='medium' color='secondary'>
+              {title}
+            </Text>
+          </div>
+        }
+
+        <label
+          className={[_s.default, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}
+          htmlFor={`file-input-${title}`}
+          style={{
+            width,
+            height,
+          }}
+        >
+          <Image
+            className={imageClasses}
+            width={width}
+            height={height}
+            src={fileType === 'image' ? file : null}
+          />
+          {
+            !file &&
+            <div className={[_s.positionAbsolute, _s.cursorPointer].join(' ')}>
+              <Text size='medium' color='secondary'>
+                Click Here to Upload
+              </Text>
+            </div>
+          }
+        </label>
+
+        <input
+          id={`file-input-${title}`}
+          className={_s.displayNone}
+          disabled={disabled}
+          onChange={this.handleOnChange}
+          type='file'
+        />
+
+      </div>
+    )
+  }
+}

app/javascript/gabsocial/components/input.js

@@ -1,5 +1,6 @@
 import classNames from 'classnames/bind'
 import Icon from './icon'
+import Text from './text'
 
 const cx = classNames.bind(_s)
 
@@ -14,10 +15,22 @@ export default class Input extends PureComponent {
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
     onClear: PropTypes.func,
+    title: PropTypes.string,
   }
 
   render() {
-    const { placeholder, prependIcon, value, hasClear, onChange, onKeyUp, onFocus, onBlur, onClear } = this.props
+    const {
+      placeholder,
+      prependIcon,
+      value,
+      hasClear,
+      onChange,
+      onKeyUp,
+      onFocus,
+      onBlur,
+      onClear,
+      title
+    } = this.props
 
     const inputClasses = cx({
       default: 1,
@@ -35,29 +48,39 @@ export default class Input extends PureComponent {
     })
 
     return (
-      <div className={[_s.default, _s.backgroundColorPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.circle, _s.alignItemsCenter].join(' ')}>
+      <div>
         {
-          !!prependIcon &&
+          !!title &&
-          <Icon id={prependIcon} width='16px' height='16px' className={[_s.marginLeft15PX, _s.marginRight5PX].join(' ')} />
+          <div className={[_s.default, _s.marginBottom10PX, _s.paddingLeft15PX].join(' ')}>
-        }
+            <Text size='small' weight='medium' color='secondary'>
-
+              {title}
-        <input
+            </Text>
-          className={inputClasses}
-          type='text'
-          placeholder={placeholder}
-          value={value}
-          onChange={onChange}
-          onKeyUp={onKeyUp}
-          onFocus={onFocus}
-          onBlur={onBlur}
-        />
-
-        {
-          hasClear &&
-          <div role='button' tabIndex='0' className={'btnClasses'} onClick={onClear}>
-            <Icon id='close' width='10px' height='10px' className={_s.fillColorWhite} aria-label='Clear' />
           </div>
         }
+        <div className={[_s.default, _s.backgroundColorPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.circle, _s.alignItemsCenter].join(' ')}>
+          {
+            !!prependIcon &&
+            <Icon id={prependIcon} width='16px' height='16px' className={[_s.marginLeft15PX, _s.marginRight5PX].join(' ')} />
+          }
+
+          <input
+            className={inputClasses}
+            type='text'
+            placeholder={placeholder}
+            value={value}
+            onChange={onChange}
+            onKeyUp={onKeyUp}
+            onFocus={onFocus}
+            onBlur={onBlur}
+          />
+
+          {
+            hasClear &&
+            <div role='button' tabIndex='0' className={'btnClasses'} onClick={onClear}>
+              <Icon id='close' width='10px' height='10px' className={_s.fillColorWhite} aria-label='Clear' />
+            </div>
+          }
+        </div>
       </div>
     )
   }

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

@@ -0,0 +1,73 @@
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { FormattedMessage } from 'react-intl';
+import Video from '../../features/video';
+
+export const previewState = 'previewVideoModal';
+
+export default class FeatureModal extends ImmutablePureComponent {
+
+  static propTypes = {
+    media: ImmutablePropTypes.map.isRequired,
+    status: ImmutablePropTypes.map,
+    time: PropTypes.number,
+    onClose: PropTypes.func.isRequired,
+  };
+
+  static contextTypes = {
+    router: PropTypes.object,
+  };
+
+  componentDidMount () {
+    if (this.context.router) {
+      const history = this.context.router.history;
+
+      history.push(history.location.pathname, previewState);
+
+      this.unlistenHistory = history.listen(() => {
+        this.props.onClose();
+      });
+    }
+  }
+
+  componentWillUnmount () {
+    if (this.context.router) {
+      this.unlistenHistory();
+
+      if (this.context.router.history.location.state === previewState) {
+        this.context.router.history.goBack();
+      }
+    }
+  }
+
+  handleStatusClick = e => {
+    if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      this.context.router.history.push(`/${this.props.status.getIn(['account', 'acct'])}/posts/${this.props.status.get('id')}`);
+    }
+  }
+
+  render () {
+    const { media, status, time, onClose } = this.props;
+
+    const link = status && <a href={status.get('url')} onClick={this.handleStatusClick}><FormattedMessage id='lightbox.view_context' defaultMessage='View context' /></a>;
+
+    return (
+      <div className='modal-root__modal video-modal'>
+        <div>
+          <Video
+            preview={media.get('preview_url')}
+            blurhash={media.get('blurhash')}
+            src={media.get('url')}
+            startTime={time}
+            onCloseVideo={onClose}
+            link={link}
+            detailed
+            alt={media.get('description')}
+          />
+        </div>
+      </div>
+    );
+  }
+
+}

app/javascript/gabsocial/components/textarea.js

@@ -0,0 +1,77 @@
+import classNames from 'classnames/bind'
+import Text from './text'
+
+const cx = classNames.bind(_s)
+
+export default class Textarea extends PureComponent {
+  static propTypes = {
+    placeholder: PropTypes.string,
+    prependIcon: PropTypes.string,
+    value: PropTypes.string,
+    hasClear: PropTypes.bool,
+    onChange: PropTypes.func,
+    onKeyUp: PropTypes.func,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+    onClear: PropTypes.func,
+    title: PropTypes.string,
+  }
+
+  render() {
+    const {
+      placeholder,
+      prependIcon,
+      value,
+      hasClear,
+      onChange,
+      onKeyUp,
+      onFocus,
+      onBlur,
+      onClear,
+      title
+    } = this.props
+
+    const inputClasses = cx({
+      default: 1,
+      text: 1,
+      outlineNone: 1,
+      lineHeight125: 1,
+      displayBlock: 1,
+      paddingVertical10PX: 1,
+      backgroundTransparent: 1,
+      fontSize15PX: 1,
+      flexGrow1: 1,
+      heightMax100VH: 1,
+      resizeVertical: 1,
+      paddingHorizontal5PX: !!prependIcon,
+      paddingLeft15PX: !prependIcon,
+      paddingRight15PX: !hasClear,
+    })
+
+    return (
+      <div>
+        {
+          !!title &&
+          <div className={[_s.default, _s.marginBottom10PX, _s.paddingLeft15PX].join(' ')}>
+            <Text size='small' weight='medium' color='secondary'>
+              {title}
+            </Text>
+          </div>
+        }
+        <div className={[_s.default, _s.backgroundColorPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.radiusSmall, _s.alignItemsCenter].join(' ')}>
+          <textarea
+            className={inputClasses}
+            type='text'
+            placeholder={placeholder}
+            value={value}
+            onChange={onChange}
+            onKeyUp={onKeyUp}
+            onFocus={onFocus}
+            onBlur={onBlur}
+          />
+
+        </div>
+      </div>
+    )
+  }
+}

app/javascript/gabsocial/features/group_create.js

@@ -1,9 +1,11 @@
 import { defineMessages, injectIntl } from 'react-intl'
-import { changeValue, submit, reset } from '../../actions/group_editor'
+import { changeValue, submit, reset } from '../actions/group_editor'
-import Block from '../../components/block'
+import Button from '../components/button'
-import Button from '../../components/button'
+import Divider from '../components/divider'
-import Icon from '../../components/icon'
+import Input from '../components/input'
-import Input from '../../components/icon'
+import Text from '../components/text'
+import Textarea from '../components/textarea'
+import FileInput from '../components/file_input'
 
 const messages = defineMessages({
 	title: { id: 'groups.form.title', defaultMessage: 'Enter a new group title' },
@@ -69,45 +71,55 @@ class Create extends PureComponent {
 	}
 
 	render() {
-		const { title, description, coverImage, disabled, intl } = this.props
+		const {
+			title,
+			description,
+			coverImage,
+			disabled,
+			intl
+		} = this.props
 
 		return (
-			<Block>
+			<form onSubmit={this.handleSubmit}>
-				<form className='group-form' onSubmit={this.handleSubmit}>
+				<Input
-					<div>
+					title={intl.formatMessage(messages.title)}
-						<Input
+					value={title}
-							type='text'
+					disabled={disabled}
-							value={title}
+					onChange={this.handleTitleChange}
-							disabled={disabled}
+					placeholder={'New group title...'}
-							onChange={this.handleTitleChange}
+				/>
-							placeholder={intl.formatMessage(messages.title)}
+
-						/>
+				<Divider invisible />
-					</div>
+
-					<div>
+				<Textarea
-						<textarea
+					title={intl.formatMessage(messages.description)}
-							className='standard'
+					value={description}
-							type='text'
+					disabled={disabled}
-							value={description}
+					onChange={this.handleDescriptionChange}
-							disabled={disabled}
+					placeholder={'Some group description...'}
-							onChange={this.handleDescriptionChange}
+				/>
-							placeholder={intl.formatMessage(messages.description)}
+
-						/>
+				<Divider invisible />
-					</div>
+
-					<div>
+				<FileInput
-						<label htmlFor='group_cover_image' className='group-form__file-label--selected'>
+					title={intl.formatMessage(coverImage === null ? messages.coverImage : messages.coverImageChange)}
-							{intl.formatMessage(coverImage === null ? messages.coverImage : messages.coverImageChange)}
+					disabled={disabled}
-						</label>
+					onChange={this.handleCoverImageChange}
-						<input
+					width='340px'
-							type='file'
+					height='145px'
-							className='group-form__file'
+				/>
-							id='group_cover_image'
+
-							disabled={disabled}
+				<Divider invisible />
-							onChange={this.handleCoverImageChange}
+
-						/>
+				<Button
-						<button className='button'>{intl.formatMessage(messages.create)}</button>
+					className={_s.marginLeft10PX}
-					</div>
+				>
-				</form>
+					<Text color='white'>
-			</Block>
+						{intl.formatMessage(messages.create)}
+					</Text>
+				</Button>
+
+			</form>
 		)
 	}
 

app/javascript/gabsocial/features/group_edit.js

@@ -1,8 +1,8 @@
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { changeValue, submit, setUp } from '../../../actions/group_editor';
+import { changeValue, submit, setUp } from '../../actions/group_editor';
 import { defineMessages, injectIntl } from 'react-intl';
-import ColumnIndicator from '../../../components/column_indicator';
+import ColumnIndicator from '../../components/column_indicator';
 import classNames from 'classnames';
 
 const messages = defineMessages({

app/javascript/gabsocial/features/introduction/index.js

@@ -1 +0,0 @@
-export { default } from '../introduction'

app/javascript/gabsocial/features/list_adder/list_adder.scss

@@ -1,20 +0,0 @@
-.list-adder {
-  flex-direction: column;
-  overflow: hidden;
-  overflow-y: scroll;
-
-  @include size(100%);
-
-  @media screen and (max-width: 420px) {
-    width: 90%;
-  }
-
-  &__account {
-    background: lighten($ui-base-color, 13%);
-    border-radius: 4px;
-  }
-
-  &__lists {
-    background: lighten($ui-base-color, 13%);
-  }
-}

app/javascript/gabsocial/features/list_create-old/list_adder.js

@@ -6,7 +6,7 @@ import { setupListAdder, resetListAdder } from '../../actions/lists';
 import List from './components/list';
 import Account from '../../components/account';
 import IconButton from '../../components/icon_button';
-import NewListForm from '../lists_directory/components/new_list_form';
+// import NewListForm from '../lists_directory/components/new_list_form';
 
 const getOrderedLists = createSelector([state => state.get('lists')], lists => {
   if (!lists) {
@@ -67,7 +67,9 @@ class ListAdder extends ImmutablePureComponent {
     return (
       <div className='modal-root__modal compose-modal'>
         <div className='compose-modal__header'>
-          <h3 className='compose-modal__header__title'>{intl.formatMessage(messages.headerTitle)}</h3>
+          <h3 className='compose-modal__header__title'>
+            {intl.formatMessage(messages.headerTitle)}
+          </h3>
           <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} />
         </div>
         <div className='compose-modal__content'>
@@ -78,12 +80,14 @@ class ListAdder extends ImmutablePureComponent {
 
             <br />
 
-            <NewListForm />
+            { /* <NewListForm /> */ }
 
             <br />
 
             <div className='list-adder__lists'>
-              {listIds.map(ListId => <List key={ListId} listId={ListId} />)}
+              {
+                listIds.map(ListId => <List key={ListId} listId={ListId} />)
+              }
             </div>
           </div>
         </div>

app/javascript/gabsocial/features/list_create.js

@@ -0,0 +1,73 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import { changeListEditorTitle, submitListEditor } from '../actions/lists'
+import Button from '../components/button'
+import Input from '../components/input'
+import Text from '../components/text'
+
+const messages = defineMessages({
+  label: { id: 'lists.new.title_placeholder', defaultMessage: 'New list title' },
+  create: { id: 'lists.new.create_title', defaultMessage: 'Create' },
+})
+
+const mapStateToProps = state => ({
+  value: state.getIn(['listEditor', 'title']),
+  disabled: state.getIn(['listEditor', 'isSubmitting']),
+})
+
+const mapDispatchToProps = dispatch => ({
+  onChange: value => dispatch(changeListEditorTitle(value)),
+  onSubmit: () => dispatch(submitListEditor(true)),
+})
+
+export default
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class ListCreate extends PureComponent {
+
+  static propTypes = {
+    value: PropTypes.string.isRequired,
+    disabled: PropTypes.bool,
+    intl: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+  }
+
+  render() {
+    const {
+      value,
+      disabled,
+      intl,
+      onSubmit,
+      onChange
+    } = this.props
+
+    return (
+      <form onSubmit={onSubmit}>
+        <Input
+          title={intl.formatMessage(messages.label)}
+          placeholder='My new list...'
+          value={value}
+          onChange={onChange}
+          onSubmit={onSubmit}
+          disabled={disabled}
+        />
+
+        <div className={[_s.default, _s.marginVertical10PX, _s.paddingVertical5PX, _s.marginLeft10PX].join(' ')}>
+          <Text color='secondary' size='small'>
+            Lists are private and only you can see who is on a list.<br/>
+            No one else can view your lists. No one knows that they are on your list.
+          </Text>
+        </div>
+
+        <Button
+          className={_s.marginLeft10PX}
+        >
+          <Text color='white'>
+            {intl.formatMessage(messages.create)}
+          </Text>
+        </Button>
+      </form>
+    )
+  }
+
+}

app/javascript/gabsocial/features/list_edit/index.js

@@ -0,0 +1 @@
+export { default } from './list_edit'

app/javascript/gabsocial/features/list_edit/list_edit.js

@@ -6,6 +6,7 @@ import Account from './components/account';
 import ListEditorSearch from './components/list_editor_search';
 import EditListForm from './components/edit_list_form/edit_list_form';
 import IconButton from '../../components/icon_button';
+import Input from '../../components/input'
 
 const mapStateToProps = state => ({
   accountIds: state.getIn(['listEditor', 'accounts', 'items']),
@@ -28,7 +29,7 @@ const messages = defineMessages({
 export default
 @connect(mapStateToProps, mapDispatchToProps)
 @injectIntl
-class ListEditor extends ImmutablePureComponent {
+class ListEdit extends ImmutablePureComponent {
 
   static propTypes = {
     listId: PropTypes.string.isRequired,
@@ -42,7 +43,7 @@ class ListEditor extends ImmutablePureComponent {
 
   componentDidMount() {
     const { onInitialize, listId } = this.props;
-    onInitialize(listId);
+    if (listId) onInitialize(listId);
   }
 
   componentWillUnmount() {
@@ -57,36 +58,44 @@ class ListEditor extends ImmutablePureComponent {
     const { accountIds, searchAccountIds, intl } = this.props;
 
     return (
-      <div className='modal-root__modal compose-modal'>
+      <div>
-        <div className='compose-modal__header'>
+        <Input
-          <h3 className='compose-modal__header__title'>
+          title={intl.formatMessage(messages.editList)}
-            {intl.formatMessage(messages.editList)}
+        />
-          </h3>
-          <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} />
-        </div>
-        <div className='compose-modal__content'>
-          <div className='list-editor'>
-            <EditListForm />
-            <br />
-
-            {
-              accountIds.size > 0 &&
-              <div>
-                <div className='list-editor__accounts'>
-                  {accountIds.map(accountId => <Account key={accountId} accountId={accountId} added />)}
-                </div>
-              </div>
-            }
-
-            <br />
-            <ListEditorSearch />
-            <div className='list-editor__accounts'>
-              {searchAccountIds.map(accountId => <Account key={accountId} accountId={accountId} />)}
-            </div>
-          </div>
-        </div>
       </div>
-    );
+    )
+
+    // return (
+    //   <div className='modal-root__modal compose-modal'>
+    //     <div className='compose-modal__header'>
+    //       <h3 className='compose-modal__header__title'>
+    //         {intl.formatMessage(messages.editList)}
+    //       </h3>
+    //       <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} />
+    //     </div>
+    //     <div className='compose-modal__content'>
+    //       <div className='list-editor'>
+    //         <EditListForm />
+    //         <br />
+
+    //         {
+    //           accountIds.size > 0 &&
+    //           <div>
+    //             <div className='list-editor__accounts'>
+    //               {accountIds.map(accountId => <Account key={accountId} accountId={accountId} added />)}
+    //             </div>
+    //           </div>
+    //         }
+
+    //         <br />
+    //         <ListEditorSearch />
+    //         <div className='list-editor__accounts'>
+    //           {searchAccountIds.map(accountId => <Account key={accountId} accountId={accountId} />)}
+    //         </div>
+    //       </div>
+    //     </div>
+    //   </div>
+    // );
   }
 
 }

app/javascript/gabsocial/features/list_editor/index.js

@@ -1 +0,0 @@
-export { default } from './list_editor'

app/javascript/gabsocial/features/list_editor/list_editor.scss

@@ -1,66 +0,0 @@
-.list-editor {
-  flex-direction: column;
-  overflow: hidden;
-  overflow-y: scroll;
-
-  @include size(100%);
-
-  @media screen and (max-width: 420px) {
-    width: 90%;
-  }
-
-  h4 {
-    padding: 15px 0;
-    background: lighten($ui-base-color, 13%);
-    border-radius: 8px 8px 0 0;
-
-    @include text-sizing(16px, 500, 1, center);
-  }
-
-  .drawer__inner {
-    border-radius: 0 0 8px 8px;
-
-    &.backdrop {
-      width: calc(100% - 60px);
-      box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
-      border-radius: 0 0 0 8px;
-    }
-  }
-
-  &__accounts {
-    background: lighten($ui-base-color, 13%);
-    overflow-y: auto;
-    max-height: 200px;
-  }
-
-  .account {
-    &__display-name {
-      &:hover strong {
-        text-decoration: none;
-      }
-    }
-
-    &__avatar {
-      cursor: default;
-    }
-  }
-
-  .search {
-    display: flex;
-    flex-direction: row;
-    margin: 10px 0;
-
-    >label {
-      flex: 1 1;
-    }
-
-    >.search__icon .fa {
-      right: 102px !important;
-    }
-
-    >.button {
-      width: 80px;
-      margin-left: 10px;
-    }
-  }
-}

app/javascript/gabsocial/features/lists_directory.js

@@ -2,9 +2,9 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import { createSelector } from 'reselect'
 import { defineMessages, injectIntl } from 'react-intl'
-import { fetchLists } from '../../actions/lists'
+import { fetchLists } from '../actions/lists'
-import ColumnIndicator from '../../components/column_indicator'
+import ColumnIndicator from '../components/column_indicator'
-import List from '../../components/list'
+import List from '../components/list'
 
 const messages = defineMessages({
   add: { id: 'lists.new.create', defaultMessage: 'Add List' },

app/javascript/gabsocial/features/lists_directory/components/new_list_form/index.js

@@ -1 +0,0 @@
-export { default } from './new_list_form'

app/javascript/gabsocial/features/lists_directory/components/new_list_form/new_list_form.js

@@ -1,48 +0,0 @@
-import { defineMessages, injectIntl } from 'react-intl';
-import { changeListEditorTitle, submitListEditor } from '../../../../actions/lists';
-import ColumnInlineForm from '../../../../components/column_inline_form';
-
-const messages = defineMessages({
-  label: { id: 'lists.new.title_placeholder', defaultMessage: 'New list title' },
-  create: { id: 'lists.new.create_title', defaultMessage: 'Create' },
-});
-
-const mapStateToProps = state => ({
-  value: state.getIn(['listEditor', 'title']),
-  disabled: state.getIn(['listEditor', 'isSubmitting']),
-});
-
-const mapDispatchToProps = dispatch => ({
-  onChange: value => dispatch(changeListEditorTitle(value)),
-  onSubmit: () => dispatch(submitListEditor(true)),
-});
-
-export default
-@connect(mapStateToProps, mapDispatchToProps)
-@injectIntl
-class NewListForm extends PureComponent {
-
-  static propTypes = {
-    value: PropTypes.string.isRequired,
-    disabled: PropTypes.bool,
-    intl: PropTypes.object.isRequired,
-    onChange: PropTypes.func.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-  };
-
-  render () {
-    const { value, disabled, intl, onSubmit, onChange } = this.props;
-
-    return (
-      <ColumnInlineForm
-        value={value}
-        onChange={onChange}
-        onSubmit={onSubmit}
-        label={intl.formatMessage(messages.label)}
-        btnTitle={intl.formatMessage(messages.create)}
-        disabled={disabled}
-      />
-    );
-  }
-
-}

app/javascript/gabsocial/features/lists_directory/index.js

@@ -1 +0,0 @@
-export { default } from './lists_directory'

app/javascript/gabsocial/features/ui/ui.js

@@ -28,6 +28,7 @@ import NotificationsPage from '../../pages/notifications_page'
 import ListPage from '../../pages/list_page'
 import ListsPage from '../../pages/lists_page'
 import BasicPage from '../../pages/basic_page'
+import ModalPage from '../../pages/modal_page'
 import SettingsPage from '../../pages/settings_page'
 
 import {
@@ -51,7 +52,9 @@ import {
   GroupTimeline,
   HashtagTimeline,
   HomeTimeline,
+  ListCreate,
   ListsDirectory,
+  ListEdit,
   ListTimeline,
   Mutes,
   Notifications,
@@ -141,18 +144,21 @@ class SwitchingArea extends PureComponent {
         <WrappedRoute path='/timeline/all' exact page={BasicPage} component={CommunityTimeline} content={children} componentParams={{ title: 'Hashtag Timeline' }} />
 
         <WrappedRoute path='/groups' exact page={GroupsPage} component={GroupsCollection} content={children} componentParams={{ activeTab: 'featured' }} />
+        <WrappedRoute path='/groups/new' exact page={GroupsPage} component={GroupsCollection} content={children} componentParams={{ activeTab: 'new' }} />
         <WrappedRoute path='/groups/browse/member' exact page={GroupsPage} component={GroupsCollection} content={children} componentParams={{ activeTab: 'member' }} />
         <WrappedRoute path='/groups/browse/admin' exact page={GroupsPage} component={GroupsCollection} content={children} componentParams={{ activeTab: 'admin' }} />
 
-        <WrappedRoute path='/groups/create' page={GroupsPage} component={GroupCreate} content={children} componentParams={{ showCreateForm: true, activeTab: 'featured' }} />
+        <WrappedRoute path='/groups/create' page={ModalPage} component={GroupCreate} content={children} componentParams={{ title: 'Create Group' }} />
         <WrappedRoute path='/groups/:id/members' page={GroupPage} component={GroupMembers} content={children} />
         <WrappedRoute path='/groups/:id/removed_accounts' page={GroupPage} component={GroupRemovedAccounts} content={children} />
-        <WrappedRoute path='/groups/:id/edit' page={GroupPage} component={GroupEdit} content={children} />
+        <WrappedRoute path='/groups/:id/edit' page={ModalPage} component={GroupEdit} content={children} componentParams={{ title: 'Edit Group' }} />
         <WrappedRoute path='/groups/:id' page={GroupPage} component={GroupTimeline} content={children} />
 
         <WrappedRoute path='/tags/:id' publicRoute page={BasicPage} component={HashtagTimeline} content={children} componentParams={{ title: 'Hashtag' }} />
 
         <WrappedRoute path='/lists' exact page={ListsPage} component={ListsDirectory} content={children} />
+        <WrappedRoute path='/lists/create' exact page={ModalPage} component={ListCreate} content={children} componentParams={{ title: 'Create List' }} />
+        <WrappedRoute path='/lists/:id/edit' exact page={ModalPage} component={ListEdit} content={children} componentParams={{ title: 'Edit List' }} />
         <WrappedRoute path='/list/:id' page={ListPage} component={ListTimeline} content={children} />
 
         <WrappedRoute path='/notifications' exact page={NotificationsPage} component={Notifications} content={children} />
@@ -162,7 +168,7 @@ class SwitchingArea extends PureComponent {
         <WrappedRoute path='/search/hashtags' exact page={SearchPage} component={Search} content={children} />
         <WrappedRoute path='/search/groups' exact page={SearchPage} component={Search} content={children} />
 
-        {/*
+        { /*
         <WrappedRoute path='/settings/account' exact page={SettingsPage} component={AccountSettings} content={children} />
         <WrappedRoute path='/settings/profile' exact page={SettingsPage} component={ProfileSettings} content={children} />
         <WrappedRoute path='/settings/domain_blocks' exact page={SettingsPage} component={DomainBlocks} content={children} />

app/javascript/gabsocial/features/ui/util/async-components.js

@@ -55,11 +55,11 @@ export function GroupsCollection() {
 }
 
 export function GroupCreate() {
-  return import(/* webpackChunkName: "features/groups_create" */'../../group_create')
+  return import(/* webpackChunkName: "features/group_create" */'../../group_create')
 }
 
 export function GroupEdit() {
-  return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/edit')
+  return import(/* webpackChunkName: "features/group_edit" */'../../group_edit')
 }
 
 export function GroupMembers() {
@@ -82,16 +82,16 @@ export function HomeTimeline() {
   return import(/* webpackChunkName: "features/home_timeline" */'../../home_timeline')
 }
 
-export function ListAdder() {
+export function ListCreate() {
-  return import(/*webpackChunkName: "features/list_adder" */'../../list_adder')
+  return import(/* webpackChunkName: "features/list_create" */'../../list_create')
 }
 
 export function ListsDirectory() {
   return import(/* webpackChunkName: "features/lists_directory" */'../../lists_directory')
 }
 
-export function ListEditor() {
+export function ListEdit() {
-  return import(/* webpackChunkName: "features/list_editor" */'../../list_editor')
+  return import(/* webpackChunkName: "features/list_editor" */'../../list_edit')
 }
 
 export function ListTimeline() {

app/javascript/gabsocial/locales/ast.json

@@ -168,7 +168,7 @@
   "introduction.federation.local.headline": "Local",
   "introduction.federation.local.text": "Public posts from people on the same server as you will appear in the local timeline.",
   "introduction.interactions.action": "Finish tutorial!",
-  "introduction.interactions.favorite.headline": "Favourite",
+  "introduction.interactions.favorite.headline": "Favorite",
   "introduction.interactions.favorite.text": "You can save a gab for later, and let the author know that you liked it, by favoriting it.",
   "introduction.interactions.repost.headline": "Repost",
   "introduction.interactions.repost.text": "You can share other people's gabs with your followers by reposting them.",
@@ -268,7 +268,7 @@
   "notifications.column_settings.sound": "Reproducir soníu",
   "notifications.filter.all": "All",
   "notifications.filter.boosts": "Reposts",
-  "notifications.filter.favorites": "Favourites",
+  "notifications.filter.favorites": "Favorites",
   "notifications.filter.follows": "Follows",
   "notifications.filter.mentions": "Mentions",
   "notifications.filter.polls": "Poll results",
@@ -323,7 +323,7 @@
   "status.detailed_status": "Detailed conversation view",
   "status.direct": "Unviar un mensaxe direutu a @{name}",
   "status.embed": "Empotrar",
-  "status.favorite": "Favourite",
+  "status.favorite": "Favorite",
   "status.filtered": "Filtered",
   "status.load_more": "Cargar más",
   "status.media_hidden": "Mediu anubríu",

app/javascript/gabsocial/locales/bg.json

@@ -48,7 +48,7 @@
   "column.community": "Local timeline",
   "column.direct": "Direct messages",
   "column.domain_blocks": "Hidden domains",
-  "column.favorites": "Favourites",
+  "column.favorites": "Favorites",
   "column.follow_requests": "Follow requests",
   "column.home": "Начало",
   "column.lists": "Lists",
@@ -168,7 +168,7 @@
   "introduction.federation.local.headline": "Local",
   "introduction.federation.local.text": "Public posts from people on the same server as you will appear in the local timeline.",
   "introduction.interactions.action": "Finish tutorial!",
-  "introduction.interactions.favorite.headline": "Favourite",
+  "introduction.interactions.favorite.headline": "Favorite",
   "introduction.interactions.favorite.text": "You can save a toot for later, and let the author know that you liked it, by favoriting it.",
   "introduction.interactions.repost.headline": "Repost",
   "introduction.interactions.repost.text": "You can share other people's toots with your followers by reposting them.",
@@ -234,7 +234,7 @@
   "navigation_bar.discover": "Discover",
   "navigation_bar.domain_blocks": "Hidden domains",
   "navigation_bar.edit_profile": "Редактирай профил",
-  "navigation_bar.favorites": "Favourites",
+  "navigation_bar.favorites": "Favorites",
   "navigation_bar.filters": "Muted words",
   "navigation_bar.follow_requests": "Follow requests",
   "navigation_bar.info": "Extended information",
@@ -268,7 +268,7 @@
   "notifications.column_settings.sound": "Play sound",
   "notifications.filter.all": "All",
   "notifications.filter.boosts": "Reposts",
-  "notifications.filter.favorites": "Favourites",
+  "notifications.filter.favorites": "Favorites",
   "notifications.filter.follows": "Follows",
   "notifications.filter.mentions": "Mentions",
   "notifications.filter.polls": "Poll results",

app/javascript/gabsocial/locales/es.json

@@ -168,7 +168,7 @@
   "introduction.federation.local.headline": "Local",
   "introduction.federation.local.text": "Public posts from people on the same server as you will appear in the local timeline.",
   "introduction.interactions.action": "Finish tutorial!",
-  "introduction.interactions.favorite.headline": "Favourite",
+  "introduction.interactions.favorite.headline": "Favorite",
   "introduction.interactions.favorite.text": "You can save a toot for later, and let the author know that you liked it, by favoriting it.",
   "introduction.interactions.repost.headline": "Repost",
   "introduction.interactions.repost.text": "You can share other people's toots with your followers by reposting them.",
@@ -268,7 +268,7 @@
   "notifications.column_settings.sound": "Reproducir sonido",
   "notifications.filter.all": "All",
   "notifications.filter.boosts": "Reposts",
-  "notifications.filter.favorites": "Favourites",
+  "notifications.filter.favorites": "Favorites",
   "notifications.filter.follows": "Follows",
   "notifications.filter.mentions": "Mentions",
   "notifications.filter.polls": "Poll results",

app/javascript/gabsocial/locales/fi.json

@@ -168,7 +168,7 @@
   "introduction.federation.local.headline": "Local",
   "introduction.federation.local.text": "Public posts from people on the same server as you will appear in the local timeline.",
   "introduction.interactions.action": "Finish tutorial!",
-  "introduction.interactions.favorite.headline": "Favourite",
+  "introduction.interactions.favorite.headline": "Favorite",
   "introduction.interactions.favorite.text": "You can save a gab for later, and let the author know that you liked it, by favoriting it.",
   "introduction.interactions.repost.headline": "Repost",
   "introduction.interactions.repost.text": "You can share other people's gabs with your followers by reposting them.",
@@ -268,7 +268,7 @@
   "notifications.column_settings.sound": "Äänimerkki",
   "notifications.filter.all": "All",
   "notifications.filter.boosts": "Reposts",
-  "notifications.filter.favorites": "Favourites",
+  "notifications.filter.favorites": "Favorites",
   "notifications.filter.follows": "Follows",
   "notifications.filter.mentions": "Mentions",
   "notifications.filter.polls": "Poll results",

app/javascript/gabsocial/locales/he.json

@@ -168,7 +168,7 @@
   "introduction.federation.local.headline": "Local",
   "introduction.federation.local.text": "Public posts from people on the same server as you will appear in the local timeline.",
   "introduction.interactions.action": "Finish tutorial!",
-  "introduction.interactions.favorite.headline": "Favourite",
+  "introduction.interactions.favorite.headline": "Favorite",
   "introduction.interactions.favorite.text": "You can save a toot for later, and let the author know that you liked it, by favoriting it.",
   "introduction.interactions.repost.headline": "Boost",
   "introduction.interactions.repost.text": "You can share other people's toots with your followers by boosting them.",
@@ -268,7 +268,7 @@
   "notifications.column_settings.sound": "שמע מופעל",
   "notifications.filter.all": "All",
   "notifications.filter.boosts": "Boosts",
-  "notifications.filter.favorites": "Favourites",
+  "notifications.filter.favorites": "Favorites",
   "notifications.filter.follows": "Follows",
   "notifications.filter.mentions": "Mentions",
   "notifications.filter.polls": "Poll results",

app/javascript/gabsocial/locales/hi.json

@@ -48,7 +48,7 @@
   "column.community": "Local timeline",
   "column.direct": "Direct messages",
   "column.domain_blocks": "Hidden domains",
-  "column.favorites": "Favourites",
+  "column.favorites": "Favorites",
   "column.follow_requests": "Follow requests",
   "column.home": "Home",
   "column.lists": "Lists",
@@ -168,7 +168,7 @@
   "introduction.federation.local.headline": "Local",
   "introduction.federation.local.text": "Public posts from people on the same server as you will appear in the local timeline.",
   "introduction.interactions.action": "Finish toot-orial!",
-  "introduction.interactions.favorite.headline": "Favourite",
+  "introduction.interactions.favorite.headline": "Favorite",
   "introduction.interactions.favorite.text": "You can save a toot for later, and let the author know that you liked it, by favoriting it.",
   "introduction.interactions.repost.headline": "Repost",
   "introduction.interactions.repost.text": "You can share other people's toots with your followers by reposting them.",
@@ -234,7 +234,7 @@
   "navigation_bar.discover": "Discover",
   "navigation_bar.domain_blocks": "Hidden domains",
   "navigation_bar.edit_profile": "Edit profile",
-  "navigation_bar.favorites": "Favourites",
+  "navigation_bar.favorites": "Favorites",
   "navigation_bar.filters": "Muted words",
   "navigation_bar.follow_requests": "Follow requests",
   "navigation_bar.info": "About",
@@ -268,7 +268,7 @@
   "notifications.column_settings.sound": "Play sound",
   "notifications.filter.all": "All",
   "notifications.filter.boosts": "Reposts",
-  "notifications.filter.favorites": "Favourites",
+  "notifications.filter.favorites": "Favorites",
   "notifications.filter.follows": "Follows",
   "notifications.filter.mentions": "Mentions",
   "notifications.filter.polls": "Poll results",
@@ -323,7 +323,7 @@
   "status.detailed_status": "Detailed conversation view",
   "status.direct": "Direct message @{name}",
   "status.embed": "Embed",
-  "status.favorite": "Favourite",
+  "status.favorite": "Favorite",
   "status.filtered": "Filtered",
   "status.load_more": "Load more",
   "status.media_hidden": "Media hidden",

app/javascript/gabsocial/locales/hr.json

@@ -168,7 +168,7 @@
   "introduction.federation.local.headline": "Local",
   "introduction.federation.local.text": "Public posts from people on the same server as you will appear in the local timeline.",
   "introduction.interactions.action": "Finish tutorial!",
-  "introduction.interactions.favorite.headline": "Favourite",
+  "introduction.interactions.favorite.headline": "Favorite",
   "introduction.interactions.favorite.text": "You can save a toot for later, and let the author know that you liked it, by favoriting it.",
   "introduction.interactions.repost.headline": "Repost",
   "introduction.interactions.repost.text": "You can share other people's toots with your followers by reposting them.",
@@ -268,7 +268,7 @@
   "notifications.column_settings.sound": "Sviraj zvuk",
   "notifications.filter.all": "All",
   "notifications.filter.boosts": "Reposts",
-  "notifications.filter.favorites": "Favourites",
+  "notifications.filter.favorites": "Favorites",
   "notifications.filter.follows": "Follows",
   "notifications.filter.mentions": "Mentions",
   "notifications.filter.polls": "Poll results",

app/javascript/gabsocial/locales/hu.json

@@ -168,7 +168,7 @@
   "introduction.federation.local.headline": "Local",
   "introduction.federation.local.text": "Public posts from people on the same server as you will appear in the local timeline.",
   "introduction.interactions.action": "Finish tutorial!",
-  "introduction.interactions.favorite.headline": "Favourite",
+  "introduction.interactions.favorite.headline": "Favorite",
   "introduction.interactions.favorite.text": "You can save a toot for later, and let the author know that you liked it, by favoriting it.",
   "introduction.interactions.repost.headline": "Repost",
   "introduction.interactions.repost.text": "You can share other people's toots with your followers by reposting them.",
@@ -268,7 +268,7 @@
   "notifications.column_settings.sound": "Hang lejátszása",
   "notifications.filter.all": "All",
   "notifications.filter.boosts": "Reposts",
-  "notifications.filter.favorites": "Favourites",
+  "notifications.filter.favorites": "Favorites",
   "notifications.filter.follows": "Follows",
   "notifications.filter.mentions": "Mentions",
   "notifications.filter.polls": "Poll results",

app/javascript/gabsocial/locales/hy.json

@@ -168,7 +168,7 @@
   "introduction.federation.local.headline": "Local",
   "introduction.federation.local.text": "Public posts from people on the same server as you will appear in the local timeline.",
   "introduction.interactions.action": "Finish tutorial!",
-  "introduction.interactions.favorite.headline": "Favourite",
+  "introduction.interactions.favorite.headline": "Favorite",
   "introduction.interactions.favorite.text": "You can save a toot for later, and let the author know that you liked it, by favoriting it.",
   "introduction.interactions.repost.headline": "Repost",
   "introduction.interactions.repost.text": "You can share other people's toots with your followers by reposting them.",
@@ -268,7 +268,7 @@
   "notifications.column_settings.sound": "Ձայն հանել",
   "notifications.filter.all": "All",
   "notifications.filter.boosts": "Reposts",
-  "notifications.filter.favorites": "Favourites",
+  "notifications.filter.favorites": "Favorites",
   "notifications.filter.follows": "Follows",
   "notifications.filter.mentions": "Mentions",
   "notifications.filter.polls": "Poll results",

app/javascript/gabsocial/locales/id.json

@@ -168,7 +168,7 @@
   "introduction.federation.local.headline": "Local",
   "introduction.federation.local.text": "Public posts from people on the same server as you will appear in the local timeline.",
   "introduction.interactions.action": "Finish tutorial!",
-  "introduction.interactions.favorite.headline": "Favourite",
+  "introduction.interactions.favorite.headline": "Favorite",
   "introduction.interactions.favorite.text": "You can save a toot for later, and let the author know that you liked it, by favoriting it.",
   "introduction.interactions.repost.headline": "Repost",
   "introduction.interactions.repost.text": "You can share other people's toots with your followers by reposting them.",
@@ -268,7 +268,7 @@
   "notifications.column_settings.sound": "Mainkan suara",
   "notifications.filter.all": "All",
   "notifications.filter.boosts": "Reposts",
-  "notifications.filter.favorites": "Favourites",
+  "notifications.filter.favorites": "Favorites",
   "notifications.filter.follows": "Follows",
   "notifications.filter.mentions": "Mentions",
   "notifications.filter.polls": "Poll results",

app/javascript/gabsocial/locales/io.json

@@ -168,7 +168,7 @@
   "introduction.federation.local.headline": "Local",
   "introduction.federation.local.text": "Public posts from people on the same server as you will appear in the local timeline.",
   "introduction.interactions.action": "Finish tutorial!",
-  "introduction.interactions.favorite.headline": "Favourite",
+  "introduction.interactions.favorite.headline": "Favorite",
   "introduction.interactions.favorite.text": "You can save a toot for later, and let the author know that you liked it, by favoriting it.",
   "introduction.interactions.repost.headline": "Repost",
   "introduction.interactions.repost.text": "You can share other people's toots with your followers by reposting them.",
@@ -268,7 +268,7 @@
   "notifications.column_settings.sound": "Plear sono",
   "notifications.filter.all": "All",
   "notifications.filter.boosts": "Reposts",
-  "notifications.filter.favorites": "Favourites",
+  "notifications.filter.favorites": "Favorites",
   "notifications.filter.follows": "Follows",
   "notifications.filter.mentions": "Mentions",
   "notifications.filter.polls": "Poll results",

app/javascript/gabsocial/locales/ka.json

@@ -168,7 +168,7 @@
   "introduction.federation.local.headline": "Local",
   "introduction.federation.local.text": "Public posts from people on the same server as you will appear in the local timeline.",
   "introduction.interactions.action": "Finish tutorial!",
-  "introduction.interactions.favorite.headline": "Favourite",
+  "introduction.interactions.favorite.headline": "Favorite",
   "introduction.interactions.favorite.text": "You can save a gab for later, and let the author know that you liked it, by favoriting it.",
   "introduction.interactions.repost.headline": "Repost",
   "introduction.interactions.repost.text": "You can share other people's gabs with your followers by reposting them.",
@@ -268,7 +268,7 @@
   "notifications.column_settings.sound": "ხმის დაკვრა",
   "notifications.filter.all": "All",
   "notifications.filter.boosts": "Reposts",
-  "notifications.filter.favorites": "Favourites",
+  "notifications.filter.favorites": "Favorites",
   "notifications.filter.follows": "Follows",
   "notifications.filter.mentions": "Mentions",
   "notifications.filter.polls": "Poll results",

app/javascript/gabsocial/locales/lv.json

@@ -168,7 +168,7 @@
   "introduction.federation.local.headline": "Local",
   "introduction.federation.local.text": "Public posts from people on the same server as you will appear in the local timeline.",
   "introduction.interactions.action": "Finish tutorial!",
-  "introduction.interactions.favorite.headline": "Favourite",
+  "introduction.interactions.favorite.headline": "Favorite",
   "introduction.interactions.favorite.text": "You can save a toot for later, and let the author know that you liked it, by favoriting it.",
   "introduction.interactions.repost.headline": "Repost",
   "introduction.interactions.repost.text": "You can share other people's toots with your followers by reposting them.",
@@ -234,7 +234,7 @@
   "navigation_bar.discover": "Discover",
   "navigation_bar.domain_blocks": "Hidden domains",
   "navigation_bar.edit_profile": "Edit profile",
-  "navigation_bar.favorites": "Favourites",
+  "navigation_bar.favorites": "Favorites",
   "navigation_bar.filters": "Muted words",
   "navigation_bar.follow_requests": "Follow requests",
   "navigation_bar.info": "About this instance",
@@ -268,7 +268,7 @@
   "notifications.column_settings.sound": "Play sound",
   "notifications.filter.all": "All",
   "notifications.filter.boosts": "Reposts",
-  "notifications.filter.favorites": "Favourites",
+  "notifications.filter.favorites": "Favorites",
   "notifications.filter.follows": "Follows",
   "notifications.filter.mentions": "Mentions",
   "notifications.filter.polls": "Poll results",
@@ -323,7 +323,7 @@
   "status.detailed_status": "Detailed conversation view",
   "status.direct": "Direct message @{name}",
   "status.embed": "Embed",
-  "status.favorite": "Favourite",
+  "status.favorite": "Favorite",
   "status.filtered": "Filtered",
   "status.load_more": "Load more",
   "status.media_hidden": "Media hidden",

app/javascript/gabsocial/locales/ms.json

@@ -48,7 +48,7 @@
   "column.community": "Local timeline",
   "column.direct": "Direct messages",
   "column.domain_blocks": "Hidden domains",
-  "column.favorites": "Favourites",
+  "column.favorites": "Favorites",
   "column.follow_requests": "Follow requests",
   "column.home": "Home",
   "column.lists": "Lists",
@@ -168,7 +168,7 @@
   "introduction.federation.local.headline": "Local",
   "introduction.federation.local.text": "Public posts from people on the same server as you will appear in the local timeline.",
   "introduction.interactions.action": "Finish tutorial!",
-  "introduction.interactions.favorite.headline": "Favourite",
+  "introduction.interactions.favorite.headline": "Favorite",
   "introduction.interactions.favorite.text": "You can save a toot for later, and let the author know that you liked it, by favoriting it.",
   "introduction.interactions.repost.headline": "Repost",
   "introduction.interactions.repost.text": "You can share other people's toots with your followers by reposting them.",
@@ -234,7 +234,7 @@
   "navigation_bar.discover": "Discover",
   "navigation_bar.domain_blocks": "Hidden domains",
   "navigation_bar.edit_profile": "Edit profile",
-  "navigation_bar.favorites": "Favourites",
+  "navigation_bar.favorites": "Favorites",
   "navigation_bar.filters": "Muted words",
   "navigation_bar.follow_requests": "Follow requests",
   "navigation_bar.info": "About this instance",
@@ -268,7 +268,7 @@
   "notifications.column_settings.sound": "Play sound",
   "notifications.filter.all": "All",
   "notifications.filter.boosts": "Reposts",
-  "notifications.filter.favorites": "Favourites",
+  "notifications.filter.favorites": "Favorites",
   "notifications.filter.follows": "Follows",
   "notifications.filter.mentions": "Mentions",
   "notifications.filter.polls": "Poll results",
@@ -323,7 +323,7 @@
   "status.detailed_status": "Detailed conversation view",
   "status.direct": "Direct message @{name}",
   "status.embed": "Embed",
-  "status.favorite": "Favourite",
+  "status.favorite": "Favorite",
   "status.filtered": "Filtered",
   "status.load_more": "Load more",
   "status.media_hidden": "Media hidden",

app/javascript/gabsocial/locales/no.json

@@ -168,7 +168,7 @@
   "introduction.federation.local.headline": "Local",
   "introduction.federation.local.text": "Public posts from people on the same server as you will appear in the local timeline.",
   "introduction.interactions.action": "Finish tutorial!",
-  "introduction.interactions.favorite.headline": "Favourite",
+  "introduction.interactions.favorite.headline": "Favorite",
   "introduction.interactions.favorite.text": "You can save a toot for later, and let the author know that you liked it, by favoriting it.",
   "introduction.interactions.repost.headline": "Repost",
   "introduction.interactions.repost.text": "You can share other people's toots with your followers by reposting them.",
@@ -268,7 +268,7 @@
   "notifications.column_settings.sound": "Spill lyd",
   "notifications.filter.all": "All",
   "notifications.filter.boosts": "Reposts",
-  "notifications.filter.favorites": "Favourites",
+  "notifications.filter.favorites": "Favorites",
   "notifications.filter.follows": "Follows",
   "notifications.filter.mentions": "Mentions",
   "notifications.filter.polls": "Poll results",

app/javascript/gabsocial/locales/sl.json

@@ -168,7 +168,7 @@
   "introduction.federation.local.headline": "Local",
   "introduction.federation.local.text": "Public posts from people on the same server as you will appear in the local timeline.",
   "introduction.interactions.action": "Finish tutorial!",
-  "introduction.interactions.favorite.headline": "Favourite",
+  "introduction.interactions.favorite.headline": "Favorite",
   "introduction.interactions.favorite.text": "You can save a toot for later, and let the author know that you liked it, by favoriting it.",
   "introduction.interactions.repost.headline": "Repost",
   "introduction.interactions.repost.text": "You can share other people's toots with your followers by reposting them.",
@@ -234,7 +234,7 @@
   "navigation_bar.discover": "Discover",
   "navigation_bar.domain_blocks": "Hidden domains",
   "navigation_bar.edit_profile": "Edit profile",
-  "navigation_bar.favorites": "Favourites",
+  "navigation_bar.favorites": "Favorites",
   "navigation_bar.filters": "Muted words",
   "navigation_bar.follow_requests": "Follow requests",
   "navigation_bar.info": "O tem vozlišču",
@@ -268,7 +268,7 @@
   "notifications.column_settings.sound": "Play sound",
   "notifications.filter.all": "All",
   "notifications.filter.boosts": "Reposts",
-  "notifications.filter.favorites": "Favourites",
+  "notifications.filter.favorites": "Favorites",
   "notifications.filter.follows": "Follows",
   "notifications.filter.mentions": "Mentions",
   "notifications.filter.polls": "Poll results",
@@ -323,7 +323,7 @@
   "status.detailed_status": "Detailed conversation view",
   "status.direct": "Direct message @{name}",
   "status.embed": "Embed",
-  "status.favorite": "Favourite",
+  "status.favorite": "Favorite",
   "status.filtered": "Filtered",
   "status.load_more": "Load more",
   "status.media_hidden": "Media hidden",

app/javascript/gabsocial/locales/sr-Latn.json

@@ -168,7 +168,7 @@
   "introduction.federation.local.headline": "Local",
   "introduction.federation.local.text": "Public posts from people on the same server as you will appear in the local timeline.",
   "introduction.interactions.action": "Finish tutorial!",
-  "introduction.interactions.favorite.headline": "Favourite",
+  "introduction.interactions.favorite.headline": "Favorite",
   "introduction.interactions.favorite.text": "You can save a toot for later, and let the author know that you liked it, by favoriting it.",
   "introduction.interactions.repost.headline": "Repost",
   "introduction.interactions.repost.text": "You can share other people's toots with your followers by reposting them.",
@@ -268,7 +268,7 @@
   "notifications.column_settings.sound": "Puštaj zvuk",
   "notifications.filter.all": "All",
   "notifications.filter.boosts": "Reposts",
-  "notifications.filter.favorites": "Favourites",
+  "notifications.filter.favorites": "Favorites",
   "notifications.filter.follows": "Follows",
   "notifications.filter.mentions": "Mentions",
   "notifications.filter.polls": "Poll results",

app/javascript/gabsocial/locales/sr.json

@@ -168,7 +168,7 @@
   "introduction.federation.local.headline": "Local",
   "introduction.federation.local.text": "Public posts from people on the same server as you will appear in the local timeline.",
   "introduction.interactions.action": "Finish tutorial!",
-  "introduction.interactions.favorite.headline": "Favourite",
+  "introduction.interactions.favorite.headline": "Favorite",
   "introduction.interactions.favorite.text": "You can save a toot for later, and let the author know that you liked it, by favoriting it.",
   "introduction.interactions.repost.headline": "Repost",
   "introduction.interactions.repost.text": "You can share other people's toots with your followers by reposting them.",
@@ -268,7 +268,7 @@
   "notifications.column_settings.sound": "Пуштај звук",
   "notifications.filter.all": "All",
   "notifications.filter.boosts": "Reposts",
-  "notifications.filter.favorites": "Favourites",
+  "notifications.filter.favorites": "Favorites",
   "notifications.filter.follows": "Follows",
   "notifications.filter.mentions": "Mentions",
   "notifications.filter.polls": "Poll results",

app/javascript/gabsocial/locales/sv.json

@@ -168,7 +168,7 @@
   "introduction.federation.local.headline": "Local",
   "introduction.federation.local.text": "Public posts from people on the same server as you will appear in the local timeline.",
   "introduction.interactions.action": "Finish tutorial!",
-  "introduction.interactions.favorite.headline": "Favourite",
+  "introduction.interactions.favorite.headline": "Favorite",
   "introduction.interactions.favorite.text": "You can save a gab for later, and let the author know that you liked it, by favoriting it.",
   "introduction.interactions.repost.headline": "Repost",
   "introduction.interactions.repost.text": "You can share other people's gabs with your followers by reposting them.",
@@ -268,7 +268,7 @@
   "notifications.column_settings.sound": "Spela upp ljud",
   "notifications.filter.all": "All",
   "notifications.filter.boosts": "Reposts",
-  "notifications.filter.favorites": "Favourites",
+  "notifications.filter.favorites": "Favorites",
   "notifications.filter.follows": "Follows",
   "notifications.filter.mentions": "Mentions",
   "notifications.filter.polls": "Poll results",

app/javascript/gabsocial/locales/ta.json

@@ -48,7 +48,7 @@
   "column.community": "Local timeline",
   "column.direct": "Direct messages",
   "column.domain_blocks": "Hidden domains",
-  "column.favorites": "Favourites",
+  "column.favorites": "Favorites",
   "column.follow_requests": "Follow requests",
   "column.home": "Home",
   "column.lists": "Lists",
@@ -168,7 +168,7 @@
   "introduction.federation.local.headline": "Local",
   "introduction.federation.local.text": "Public posts from people on the same server as you will appear in the local timeline.",
   "introduction.interactions.action": "Finish tutorial!",
-  "introduction.interactions.favorite.headline": "Favourite",
+  "introduction.interactions.favorite.headline": "Favorite",
   "introduction.interactions.favorite.text": "You can save a toot for later, and let the author know that you liked it, by favoriting it.",
   "introduction.interactions.repost.headline": "Repost",
   "introduction.interactions.repost.text": "You can share other people's toots with your followers by reposting them.",
@@ -234,7 +234,7 @@
   "navigation_bar.discover": "Discover",
   "navigation_bar.domain_blocks": "Hidden domains",
   "navigation_bar.edit_profile": "Edit profile",
-  "navigation_bar.favorites": "Favourites",
+  "navigation_bar.favorites": "Favorites",
   "navigation_bar.filters": "Muted words",
   "navigation_bar.follow_requests": "Follow requests",
   "navigation_bar.info": "About this instance",
@@ -268,7 +268,7 @@
   "notifications.column_settings.sound": "Play sound",
   "notifications.filter.all": "All",
   "notifications.filter.boosts": "Reposts",
-  "notifications.filter.favorites": "Favourites",
+  "notifications.filter.favorites": "Favorites",
   "notifications.filter.follows": "Follows",
   "notifications.filter.mentions": "Mentions",
   "notifications.filter.polls": "Poll results",
@@ -323,7 +323,7 @@
   "status.detailed_status": "Detailed conversation view",
   "status.direct": "Direct message @{name}",
   "status.embed": "Embed",
-  "status.favorite": "Favourite",
+  "status.favorite": "Favorite",
   "status.filtered": "Filtered",
   "status.load_more": "Load more",
   "status.media_hidden": "Media hidden",

app/javascript/gabsocial/locales/th.json

@@ -168,7 +168,7 @@
   "introduction.federation.local.headline": "Local",
   "introduction.federation.local.text": "Public posts from people on the same server as you will appear in the local timeline.",
   "introduction.interactions.action": "Finish tutorial!",
-  "introduction.interactions.favorite.headline": "Favourite",
+  "introduction.interactions.favorite.headline": "Favorite",
   "introduction.interactions.favorite.text": "You can save a toot for later, and let the author know that you liked it, by favoriting it.",
   "introduction.interactions.repost.headline": "Repost",
   "introduction.interactions.repost.text": "You can share other people's toots with your followers by reposting them.",

app/javascript/gabsocial/locales/uk.json

@@ -168,7 +168,7 @@
   "introduction.federation.local.headline": "Local",
   "introduction.federation.local.text": "Public posts from people on the same server as you will appear in the local timeline.",
   "introduction.interactions.action": "Finish tutorial!",
-  "introduction.interactions.favorite.headline": "Favourite",
+  "introduction.interactions.favorite.headline": "Favorite",
   "introduction.interactions.favorite.text": "You can save a toot for later, and let the author know that you liked it, by favoriting it.",
   "introduction.interactions.repost.headline": "Repost",
   "introduction.interactions.repost.text": "You can share other people's toots with your followers by reposting them.",
@@ -268,7 +268,7 @@
   "notifications.column_settings.sound": "Відтворювати звуки",
   "notifications.filter.all": "All",
   "notifications.filter.boosts": "Reposts",
-  "notifications.filter.favorites": "Favourites",
+  "notifications.filter.favorites": "Favorites",
   "notifications.filter.follows": "Follows",
   "notifications.filter.mentions": "Mentions",
   "notifications.filter.polls": "Poll results",

app/javascript/gabsocial/locales/zh-CN.json

@@ -168,7 +168,7 @@
   "introduction.federation.local.headline": "Local",
   "introduction.federation.local.text": "Public posts from people on the same server as you will appear in the local timeline.",
   "introduction.interactions.action": "Finish tutorial!",
-  "introduction.interactions.favorite.headline": "Favourite",
+  "introduction.interactions.favorite.headline": "Favorite",
   "introduction.interactions.favorite.text": "You can save a toot for later, and let the author know that you liked it, by favoriting it.",
   "introduction.interactions.repost.headline": "Repost",
   "introduction.interactions.repost.text": "You can share other people's toots with your followers by reposting them.",
@@ -268,7 +268,7 @@
   "notifications.column_settings.sound": "播放音效",
   "notifications.filter.all": "All",
   "notifications.filter.boosts": "Reposts",
-  "notifications.filter.favorites": "Favourites",
+  "notifications.filter.favorites": "Favorites",
   "notifications.filter.follows": "Follows",
   "notifications.filter.mentions": "Mentions",
   "notifications.filter.polls": "Poll results",

app/javascript/gabsocial/locales/zh-HK.json

@@ -168,7 +168,7 @@
   "introduction.federation.local.headline": "Local",
   "introduction.federation.local.text": "Public posts from people on the same server as you will appear in the local timeline.",
   "introduction.interactions.action": "Finish tutorial!",
-  "introduction.interactions.favorite.headline": "Favourite",
+  "introduction.interactions.favorite.headline": "Favorite",
   "introduction.interactions.favorite.text": "You can save a toot for later, and let the author know that you liked it, by favoriting it.",
   "introduction.interactions.repost.headline": "Repost",
   "introduction.interactions.repost.text": "You can share other people's toots with your followers by reposting them.",
@@ -268,7 +268,7 @@
   "notifications.column_settings.sound": "播放音效",
   "notifications.filter.all": "All",
   "notifications.filter.boosts": "Reposts",
-  "notifications.filter.favorites": "Favourites",
+  "notifications.filter.favorites": "Favorites",
   "notifications.filter.follows": "Follows",
   "notifications.filter.mentions": "Mentions",
   "notifications.filter.polls": "Poll results",

app/javascript/gabsocial/pages/groups_page.js

@@ -21,6 +21,10 @@ export default class GroupsPage extends PureComponent {
         title: 'Featured',
         to: '/groups'
       },
+      {
+        title: 'New',
+        to: '/groups/new'
+      },
       {
         title: 'My Groups',
         to: '/groups/browse/member'

app/javascript/gabsocial/pages/modal_page.js

@@ -0,0 +1,31 @@
+import { Fragment } from 'react'
+import LinkFooter from '../components/link_footer'
+import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
+// import TrendsPanel from '../components/panel/trends_panel'
+import DefaultLayout from '../layouts/default_layout'
+
+export default class ModalPage extends PureComponent {
+  static propTypes = {
+    title: PropTypes.string,
+    children: PropTypes.node,
+  }
+
+  render() {
+    const { children, title } = this.props
+
+    return (
+      <DefaultLayout
+        title={title}
+        layout={(
+          <Fragment>
+            <WhoToFollowPanel />
+            <LinkFooter />
+          </Fragment>
+        )}
+        showBackBtn
+      >
+        {children}
+      </DefaultLayout>
+    )
+  }
+}

app/javascript/styles/global.css

@@ -405,6 +405,14 @@ body {
   user-select: none;
 }
 
+.resizeVertical {
+  resize: vertical;
+}
+
+.heightMax100VH {
+  max-height: 100vh;
+}
+
 .heightMin100VH {
   min-height: 100vh;
 }
@@ -715,6 +723,10 @@ body {
   margin-left: 15px;
 }
 
+.marginLeft10PX {
+  margin-left: 10px;
+}
+
 .marginLeftAuto {
   margin-left: auto;
 }