Commiting

2020-11-15 12:48:32 -06:00
parent 62515bbaee
commit fb612f60c8
1011 changed files with 3507 additions and 49604 deletions
--- a/app/javascript/gabsocial/features/introduction.js
+++ b/app/javascript/gabsocial/features/introduction.js
@@ -10,7 +10,7 @@ import {
  GAB_COM_INTRODUCE_YOURSELF_GROUP_ID,
 } from '../constants'
 import { me } from '../initial_state'
-import { saveShownOnboarding } from '../actions/onboarding'
+import { saveShownOnboarding } from '../actions/settings'
 import { fetchGroups } from '../actions/groups'
 import { saveUserProfileInformation } from '../actions/user'
 import { makeGetAccount } from '../selectors'
--- a/app/javascript/gabsocial/features/list_timeline.js
+++ b/app/javascript/gabsocial/features/list_timeline.js
@@ -4,7 +4,6 @@ import { connect } from 'react-redux'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { FormattedMessage } from 'react-intl'
-import { connectListStream } from '../actions/streaming'
 import { expandListTimeline } from '../actions/timelines'
 import { fetchList, deleteList } from '../actions/lists'
 import { openModal } from '../actions/modal'
@@ -29,7 +28,6 @@ class ListTimeline extends ImmutablePureComponent {

  componentWillReceiveProps(nextProps) {
    if (nextProps.params.id !== this.props.params.id) {
-      this.handleDisconnect()
      this.handleConnect(nextProps.params.id)
    }
  }
@@ -39,15 +37,6 @@ class ListTimeline extends ImmutablePureComponent {

    dispatch(fetchList(id))
    dispatch(expandListTimeline(id))
-
-    this.disconnect = dispatch(connectListStream(id))
-  }
-
-  handleDisconnect() {
-    if (this.disconnect) {
-      this.disconnect()
-      this.disconnect = null
-    }
  }

  handleLoadMore = (maxId) => {
--- a/app/javascript/gabsocial/features/messages/components/message_item.js
+++ b/app/javascript/gabsocial/features/messages/components/message_item.js
@@ -0,0 +1,116 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import { NavLink } from 'react-router-dom'
+import { CX } from '../../../constants'
+import Input from '../../../components/input'
+import Avatar from '../../../components/avatar'
+import Button from '../../../components/button'
+import Text from '../../../components/text'
+import RelativeTimestamp from '../../../components/relative_timestamp'
+import { makeGetAccount } from '../../../selectors'
+
+class MessagesItem extends ImmutablePureComponent {
+
+  static contextTypes = {
+    router: PropTypes.object,
+  }
+
+  state = {
+    hovering: false,
+  }
+
+  handleOnMouseEnter = () => {
+    this.setState({ isHovering: true }) 
+  }
+  
+  handleOnMouseLeave = () => {
+    this.setState({ isHovering: false })
+  }
+
+  render() {
+    const {
+      account,
+      intl,
+      alt,
+    } = this.props
+    const { isHovering } = this.state
+
+    const content = { __html: 'REEEE i heard you have the sauce2?' }
+    const messageContainerClasses = CX({
+      d: 1,
+      flexRow: !alt,
+      flexRowReverse: alt,
+    })
+    const messageInnerContainerClasses = CX({
+      d: 1,
+      px15: 1,
+      py5: 1,
+      bgSecondary: !alt,
+      bgBrandLight: alt,
+      circle: 1,
+      ml10: 1,
+      mr10: 1,
+    })
+
+    const lowerContainerClasses = CX({
+      d: 1,
+      pt10: 1,
+      pl50: !alt,
+      pr50: alt,
+    })
+
+    const buttonContainerClasses = CX({
+      d: 1,
+      flexRow: 1,
+      displayNone: !isHovering,
+    })
+
+    return (
+      <div
+        className={[_s.d, _s.w100PC, _s.pb10].join(' ')}
+        onMouseEnter={this.handleOnMouseEnter}
+        onMouseLeave={this.handleOnMouseLeave}
+      >
+        <div className={[_s.d, _s.w100PC, _s.pb15].join(' ')}>
+
+          <div className={messageContainerClasses}>
+            <Avatar account={account} size={38} />
+            <div className={messageInnerContainerClasses}>
+              <div className={[_s.py5, _s.dangerousContent].join(' ')} dangerouslySetInnerHTML={content} />
+            </div>
+            <div className={buttonContainerClasses}>
+              <Button
+                onClick={undefined}
+                color='tertiary'
+                backgroundColor='none'
+                icon='ellipsis'
+                iconSize='18px'
+              />
+            </div>
+          </div>
+          <div className={lowerContainerClasses}>
+            <Text size='small' color='tertiary' align={alt ? 'right' : 'left'}>
+              Apr 16, 2020, 8:20 AM
+              { /* <RelativeTimestamp timestamp={'2020-20-10'} /> */ }
+            </Text>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+}
+
+const mapStateToProps = (state, props) => ({
+  account: makeGetAccount()(state, '1'),
+})
+
+MessagesItem.propTypes = {
+  intl: PropTypes.object.isRequired,
+  alt: PropTypes.bool,
+}
+
+export default connect(mapStateToProps)(MessagesItem)
--- a/app/javascript/gabsocial/features/messages/components/messages_header.js
+++ b/app/javascript/gabsocial/features/messages/components/messages_header.js
@@ -0,0 +1,47 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import Heading from '../../../components/heading'
+import Button from '../../../components/button'
+
+class MessagesHeader extends ImmutablePureComponent {
+
+  render() {
+    const {
+      account,
+    } = this.props
+
+    return (
+      <div className={[_s.d, _s.w100PC, _s.h60PX, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+        <div className={[_s.d, _s.flexRow, _s.pl15, _s.pr5, _s.py15].join(' ')}>
+          <Heading size='h1'>
+            Messages
+          </Heading>
+          <div className={[_s.d, _s.bgTransparent, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.mlAuto].join(' ')}>
+            <Button
+              isNarrow
+              onClick={undefined}
+              className={[_s.ml5, _s.px15].join(' ')}
+            >
+              New
+            </Button>
+            <Button
+              isNarrow
+              onClick={undefined}
+              color='brand'
+              backgroundColor='none'
+              className={_s.ml5}
+              icon='cog'
+              iconSize='18px'
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+}
+
+export default MessagesHeader
--- a/app/javascript/gabsocial/features/messages/components/messages_list.js
+++ b/app/javascript/gabsocial/features/messages/components/messages_list.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import MessagesListItem from './messages_list_item'
+import { makeGetAccount } from '../../../selectors'
+
+class MessagesList extends ImmutablePureComponent {
+
+  render() {
+    const {
+      account,
+    } = this.props
+
+    return (
+      <div className={[_s.d, _s.w100PC].join(' ')}>
+        <MessagesListItem />
+        <MessagesListItem selected />
+        <MessagesListItem />
+        <MessagesListItem />
+      </div>
+    )
+  }
+
+}
+
+const mapStateToProps = (state, props) => ({
+  account: makeGetAccount()(state, '1'),
+})
+
+MessagesList.propTypes = {
+  intl: PropTypes.object.isRequired,
+}
+
+export default connect(mapStateToProps)(MessagesList)
--- a/app/javascript/gabsocial/features/messages/components/messages_list_item.js
+++ b/app/javascript/gabsocial/features/messages/components/messages_list_item.js
@@ -0,0 +1,107 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import { NavLink } from 'react-router-dom'
+import { CX } from '../../../constants'
+import Input from '../../../components/input'
+import DisplayName from '../../../components/display_name'
+import Avatar from '../../../components/avatar'
+import Text from '../../../components/text'
+import RelativeTimestamp from '../../../components/relative_timestamp'
+import { makeGetAccount } from '../../../selectors'
+
+class MessagesListItem extends ImmutablePureComponent {
+
+  static contextTypes = {
+    router: PropTypes.object,
+  }
+
+  state = {
+    composeFocused: false,
+  }
+
+  render() {
+    const {
+      account,
+      intl,
+      selected,
+    } = this.props
+
+    const buttonClasses = CX({
+      d: 1,
+      pt2: 1,
+      pr5: 1,
+      noUnderline: 1,
+      overflowHidden: 1,
+      flexNormal: 1,
+      flexRow: 1,
+      aiStart: 1,
+      aiCenter: 1,
+    })
+
+    const containerClasses = CX({
+      d: 1,
+      bgSubtle_onHover: 1,
+      borderBottom1PX: 1,
+      borderColorSecondary: 1,
+      noUnderline: 1,
+    })
+
+    const innerContainerClasses = CX({
+      d: 1,
+      flexRow: 1,
+      aiStart: 1,
+      aiCenter: 0,
+      px15: 1,
+      py15: 1,
+      borderRight4PX: selected,
+      borderColorBrand: selected,
+    })
+
+    const avatarSize = 49
+    const content = { __html: 'REEEE i heard you have the sauce?' }
+
+    return (
+        <NavLink
+          className={containerClasses}
+          title={account.get('acct')}
+          to={`/messages/conversation-id`}
+        >
+          <div className={innerContainerClasses}>
+
+            <Avatar account={account} size={avatarSize} noHover />
+
+            <div className={[_s.d, _s.pl10, _s.overflowHidden, _s.flexNormal].join(' ')}>
+              <div className={[_s.d, _s.flexRow, _s.aiCenter].join(' ')}>
+                <div className={buttonClasses}>
+                  <div className={_s.maxW100PC42PX}>
+                    <DisplayName account={account} noHover />
+                  </div>
+                  <Text size='extraSmall' color='secondary' className={_s.mlAuto}>
+                    May 1
+                    { /* <RelativeTimestamp timestamp={'2020-20-10'} /> */ }
+                  </Text>
+                </div>
+              </div>
+
+              <div className={[_s.py5, _s.dangerousContent].join(' ')} dangerouslySetInnerHTML={content} />
+            </div>
+          </div>
+        </NavLink>
+    )
+  }
+
+}
+
+const mapStateToProps = (state, props) => ({
+  account: makeGetAccount()(state, '1'),
+})
+
+MessagesListItem.propTypes = {
+  intl: PropTypes.object.isRequired,
+  selected: PropTypes.bool,
+}
+
+export default connect(mapStateToProps)(MessagesListItem)
--- a/app/javascript/gabsocial/features/messages/components/messages_search.js
+++ b/app/javascript/gabsocial/features/messages/components/messages_search.js
@@ -0,0 +1,45 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import Input from '../../../components/input'
+
+class MessagesSearch extends ImmutablePureComponent {
+
+  static contextTypes = {
+    router: PropTypes.object,
+  }
+
+  state = {
+    composeFocused: false,
+  }
+
+  render() {
+    const {
+      intl,
+    } = this.props
+
+    return (
+      <div className={[_s.d, _s.h60PX, _s.w100PC, _s.px10, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+        <Input
+          type='search'
+          placeholder='Search for messages'
+          id='messages-search'
+          prependIcon='search'
+        />
+      </div>
+    )
+  }
+
+}
+
+const messages = defineMessages({
+  placeholder: { id: 'compose_form.placeholder', defaultMessage: "What's on your mind?" },
+})
+
+MessagesSearch.propTypes = {
+  intl: PropTypes.object.isRequired,
+}
+
+export default injectIntl(MessagesSearch)
--- a/app/javascript/gabsocial/features/messages/index.js
+++ b/app/javascript/gabsocial/features/messages/index.js
@@ -0,0 +1 @@
+export { default } from './messages'
--- a/app/javascript/gabsocial/features/messages/messages.js
+++ b/app/javascript/gabsocial/features/messages/messages.js
@@ -0,0 +1,103 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { makeGetAccount } from '../../selectors'
+import Text from '../../components/text'
+import Button from '../../components/button'
+import Avatar from '../../components/avatar'
+import DisplayName from '../../components/display_name'
+import Input from '../../components/input'
+import EmojiPickerButton from '../compose/components/emoji_picker_button'
+import UploadButton from '../compose/components/media_upload_button'
+import MessageItem from './components/message_item'
+
+// import MessagesContainer from './containers/messages_container'
+
+class Messages extends React.PureComponent {
+
+  render () {
+    const { account } = this.props
+    
+    const selectedMessage = true
+
+    return (
+      <div className={[_s.d, _s.bgPrimary, _s.h100PC, _s.w100PC].join(' ')}>
+        {
+          !selectedMessage &&
+          <div className={[_s.d, _s.w100PC, _s.h100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
+            <Text weight='bold' size='extraLarge'>
+              You don’t have a message selected
+            </Text>
+            <Text size='medium' color='secondary' className={_s.py10}>
+              Choose one from your existing messages, or start a new one.
+            </Text>
+            <Button className={_s.mt10}>
+              <Text color='inherit' weight='bold' className={_s.px15}>
+                New Message
+              </Text>
+            </Button>
+          </div>
+        }
+        {
+          selectedMessage &&
+          <div className={[_s.d, _s.h100PC, _s.w100PC].join(' ')}>
+            <div className={[_s.d, _s.posAbs, _s.top0, _s.left0, _s.right0, _s.flexRow, _s.aiCenter, _s.h60PX, _s.w100PC, _s.borderBottom1PX, _s.borderColorSecondary, _s.px15, _s.py5].join(' ')}>
+              <Avatar account={account} size={34} />
+              <div className={[_s.d, _s.pl10, _s.maxW100PC86PX, _s.overflowHidden].join(' ')}>
+                <DisplayName account={account} isMultiline />
+              </div>
+              <Button
+                isNarrow
+                onClick={undefined}
+                color='brand'
+                backgroundColor='none'
+                className={_s.mlAuto}
+                icon='more'
+                iconSize='18px'
+              />
+            </div>
+
+            <div className={[_s.d, _s.posAbs, _s.bottom60PX, _s.left0, _s.right0, _s.px15, _s.py15, _s.top60PX, _s.w100PC, _s.overflowYScroll].join(' ')}>
+              <MessageItem />
+              <MessageItem />
+              <MessageItem alt />
+              <MessageItem />
+              <MessageItem alt />
+              <MessageItem alt />
+              <MessageItem />
+              <MessageItem />
+              <MessageItem />
+              <MessageItem alt />
+              <MessageItem />
+            </div>
+            
+            <div className={[_s.d, _s.posAbs, _s.bottom0, _s.left0, _s.right0, _s.flexRow, _s.aiCenter, _s.h60PX, _s.w100PC, _s.borderTop1PX, _s.borderColorSecondary, _s.px15, _s.py5].join(' ')}>
+              <EmojiPickerButton />
+              <UploadButton />
+              <div className={[_s.d, _s.px15, _s.flexGrow1].join(' ')}>
+                <Input
+                  placeholder='Type a message...'
+                />
+              </div>
+              <Button>
+                Send
+              </Button>
+            </div>
+          </div>
+        }
+      </div>
+    )
+  }
+
+}
+
+const mapStateToProps = (state, props) => ({
+  account: makeGetAccount()(state, '1'),
+})
+
+Messages.propTypes = {
+  intl: PropTypes.object.isRequired,
+  selected: PropTypes.bool,
+}
+
+export default connect(mapStateToProps)(Messages)
--- a/app/javascript/gabsocial/features/news.js
+++ b/app/javascript/gabsocial/features/news.js
@@ -3,7 +3,10 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import throttle from 'lodash.throttle'
 import { fetchPopularLinks } from '../actions/links'
-import { BREAKPOINT_EXTRA_SMALL } from '../constants'
+import {
+  BREAKPOINT_EXTRA_SMALL,
+  LAZY_LOAD_SCROLL_OFFSET,
+} from '../constants'
 import Button from '../components/button'
 import Text from '../components/text'
 import TrendsItem from '../components/trends_item'
@@ -46,14 +49,12 @@ class News extends React.PureComponent {
    if (this.window) {
      const { scrollTop } = this.documentElement
      
-      if (scrollTop > 25 && !this.state.lazyLoaded) {
+      if (scrollTop > LAZY_LOAD_SCROLL_OFFSET && !this.state.lazyLoaded) {
        this.setState({ lazyLoaded: true })
        this.detachScrollListener()
      }
    }
-  }, 150, {
-    trailing: true,
-  })
+  }, 150, { trailing: true })

  render() {
    const { children } = this.props
--- a/app/javascript/gabsocial/features/pro_timeline.js
+++ b/app/javascript/gabsocial/features/pro_timeline.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { defineMessages, injectIntl } from 'react-intl'
 import { expandProTimeline } from '../actions/timelines'
-import { connectProStream } from '../actions/streaming'
 import StatusList from '../components/status_list'

 class ProTimeline extends React.PureComponent {
@@ -16,15 +15,6 @@ class ProTimeline extends React.PureComponent {
    const { dispatch } = this.props

    dispatch(expandProTimeline())
-
-    this.disconnect = dispatch(connectProStream())
-  }
-
-  componentWillUnmount() {
-		if (this.disconnect) {
-			this.disconnect()
-			this.disconnect = null
-		}
  }
  
  handleLoadMore = (maxId) => {
--- a/app/javascript/gabsocial/features/search.js
+++ b/app/javascript/gabsocial/features/search.js
@@ -6,7 +6,6 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import { withRouter } from 'react-router-dom'
 import { me } from '../initial_state'
 import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
-import HashtagItem from '../components/hashtag_item'
 import GroupListItem from '../components/group_list_item'
 import Text from '../components/text'
 import Account from '../components/account'
@@ -60,14 +59,13 @@ class Search extends ImmutablePureComponent {

    const pathname = location.pathname || ''
    const showPeople = pathname === '/search/people'
-    const showHashtags = pathname === '/search/hashtags'
    const showGroups = pathname === '/search/groups'
    const showStatuses = pathname === '/search/statuses'
    const showLinks = pathname === '/search/links'
-    const isTop = !showPeople && !showHashtags && !showGroups && !showStatuses && !showLinks
+    const isTop = !showPeople && !showGroups && !showStatuses && !showLinks
    const theLimit = 4

-    let accounts, statuses, hashtags, groups, links
+    let accounts, statuses, groups, links

    if (results.get('accounts') && results.get('accounts').size > 0 && (isTop || showPeople)) {
      const size = isTop ? Math.min(results.get('accounts').size, theLimit) : results.get('accounts').size;
@@ -192,30 +190,7 @@ class Search extends ImmutablePureComponent {
      )
    }

-    if (results.get('hashtags') && results.get('hashtags').size > 0 && me && (isTop || showHashtags)) {
-      const size = isTop ? Math.min(results.get('hashtags').size, theLimit) : results.get('hashtags').size;
-      const isMax = size === results.get('hashtags').size
-
-      hashtags = (
-        <PanelLayout
-          title='Hashtags'
-          headerButtonTo={isMax ? undefined : '/search/hashtags'}
-          headerButtonTitle={isMax ? undefined : 'See more'}
-          footerButtonTo={isMax ? undefined : '/search/hashtags'}
-          footerButtonTitle={isMax ? undefined : 'See more'}
-          noPadding
-        >
-          <div className={[_s.d, _s.pb10, _s.px15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
-            <Text color='tertiary' size='small'>
-              Showing {size} of {results.get('hashtags').size} results
-            </Text>
-          </div>
-          {results.get('hashtags').slice(0, size).map(hashtag => <HashtagItem isCompact key={hashtag.get('name')} hashtag={hashtag} />)}
-        </PanelLayout>
-      )
-    }
-
-    if (!accounts && !statuses && !hashtags && !groups && !links) {
+    if (!accounts && !statuses && !groups && !links) {
      return (
        <ResponsiveClassesComponent classNamesXS={[_s.px10, _s.pt15].join(' ')}>
          <Block>
@@ -231,7 +206,6 @@ class Search extends ImmutablePureComponent {
        {groups}
        {statuses}
        {links}
-        {hashtags}
      </div>
    )
  }
--- a/app/javascript/gabsocial/features/ui/ui.js
+++ b/app/javascript/gabsocial/features/ui/ui.js
@@ -23,6 +23,7 @@ import { clearHeight } from '../../actions/height_cache'
 import { openModal } from '../../actions/modal'
 import WrappedRoute from './util/wrapped_route'
 import ModalRoot from '../../components/modal/modal_root'
+import ToastsContainer from '../../containers/toasts_container'
 import PopoverRoot from '../../components/popover/popover_root'
 import UploadArea from '../../components/upload_area'
 import ProfilePage from '../../pages/profile_page'
@@ -45,6 +46,8 @@ import ExplorePage from '../../pages/explore_page'
 import NewsPage from '../../pages/news_page'
 import AboutPage from '../../pages/about_page'
 import LinkPage from '../../pages/link_page'
+import MessagesPage from '../../pages/messages_page'
+import ComposePage from '../../pages/compose_page'

 import {
  About,
@@ -83,6 +86,7 @@ import {
  ListsDirectory,
  ListEdit,
  ListTimeline,
+  Messages,
  Mutes,
  News,
  NewsView,
@@ -190,12 +194,14 @@ class SwitchingArea extends React.PureComponent {

        <WrappedRoute path='/explore' publicRoute page={ExplorePage} component={ExploreTimeline} content={children} componentParams={{ title: 'Explore' }} />
        <WrappedRoute path='/suggestions' exact page={BasicPage} component={Suggestions} content={children} componentParams={{ title: 'Suggestions' }} />
-
-        <WrappedRoute path='/compose' exact page={BasicPage} component={Compose} content={children} componentParams={{ title: 'Compose', page: 'compose' }} />
+        <WrappedRoute path='/compose' exact page={ComposePage} component={Compose} content={children} componentParams={{ title: 'Compose', page: 'compose' }} />

        <WrappedRoute path='/news' exact publicRoute page={NewsPage} component={News} content={children} componentParams={{ title: 'News' }} />
        <WrappedRoute path='/news/view/:trendsRSSId' page={NewsPage} component={NewsView} content={children} componentParams={{ title: 'News RSS Feed' }} />

+        <WrappedRoute path='/messages' exact page={MessagesPage} component={Messages} content={children} />
+        <WrappedRoute path='/messages/:conversationId' exact page={MessagesPage} component={Messages} content={children} />
+
        <WrappedRoute path='/timeline/all' exact page={CommunityPage} component={CommunityTimeline} content={children} componentParams={{ title: 'Community Feed' }} />
        <WrappedRoute path='/timeline/pro' exact page={ProPage} component={ProTimeline} content={children} componentParams={{ title: 'Pro Feed' }} />

@@ -234,7 +240,6 @@ class SwitchingArea extends React.PureComponent {

        <WrappedRoute path='/search' exact publicRoute page={SearchPage} component={Search} content={children} />
        <WrappedRoute path='/search/people' exact publicRoute page={SearchPage} component={Search} content={children} />
-        <WrappedRoute path='/search/hashtags' exact publicRoute page={SearchPage} component={Search} content={children} />
        <WrappedRoute path='/search/groups' exact publicRoute page={SearchPage} component={Search} content={children} />
        <WrappedRoute path='/search/statuses' exact publicRoute page={SearchPage} component={Search} content={children} />
        <WrappedRoute path='/search/links' exact page={SearchPage} component={Search} content={children} />
@@ -593,6 +598,8 @@ class UI extends React.PureComponent {
        <PopoverRoot />

        <UploadArea active={draggingOver} onClose={this.closeUploadModal} />
+
+        <ToastsContainer />
      </div>
    )
  }
--- a/app/javascript/gabsocial/features/ui/util/async_components.js
+++ b/app/javascript/gabsocial/features/ui/util/async_components.js
@@ -20,7 +20,6 @@ export function DMCA() { return import(/* webpackChunkName: "features/about/dmca
 export function EditProfileModal() { return import(/* webpackChunkName: "components/edit_profile_modal" */'../../../components/modal/edit_profile_modal') }
 export function EditShortcutsModal() { return import(/* webpackChunkName: "components/edit_shortcuts_modal" */'../../../components/modal/edit_shortcuts_modal') }
 export function EmailConfirmationReminderModal() { return import(/* webpackChunkName: "components/email_confirmation_reminder_modal" */'../../../components/modal/email_confirmation_reminder_modal') }
-export function EmbedModal() { return import(/* webpackChunkName: "modals/embed_modal" */'../../../components/modal/embed_modal') }
 export function EmojiPicker() { return import(/* webpackChunkName: "emoji_picker" */'../../../components/emoji/emoji_picker') }
 export function EmojiPickerPopover() { return import(/* webpackChunkName: "components/emoji_picker_popover" */'../../../components/popover/emoji_picker_popover') }
 export function ExploreTimeline() { return import(/* webpackChunkName: "features/explore_timeline" */'../../explore_timeline') }