Progress

app/javascript/gabsocial/features/account_albums.js

@@ -0,0 +1,150 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { injectIntl, defineMessages } from 'react-intl'
+import { expandAccountMediaTimeline } from '../actions/timelines'
+import { getAccountGallery } from '../selectors'
+import ColumnIndicator from '../components/column_indicator'
+import MediaItem from '../components/media_item'
+import LoadMore from '../components/load_more'
+import Block from '../components/block'
+import MediaGalleryPlaceholder from '../components/placeholder/media_gallery_placeholder'
+
+class AccountAlbums extends ImmutablePureComponent {
+
+  componentDidMount() {
+    const { accountId, mediaType } = this.props
+
+    if (accountId && accountId !== -1) {
+      this.props.dispatch(expandAccountMediaTimeline(accountId, { mediaType }))
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (
+      (nextProps.accountId && nextProps.accountId !== this.props.accountId) ||
+      (nextProps.accountId && nextProps.mediaType !== this.props.mediaType)
+    ) {
+      this.props.dispatch(expandAccountMediaTimeline(nextProps.accountId, {
+        mediaType: nextProps.mediaType,
+      }))
+    }
+  }
+
+  handleScrollToBottom = () => {
+    if (this.props.hasMore) {
+      this.handleLoadMore(this.props.attachments.size > 0 ? this.props.attachments.last().getIn(['status', 'id']) : undefined)
+    }
+  }
+
+  handleScroll = (e) => {
+    const { scrollTop, scrollHeight, clientHeight } = e.target
+    const offset = scrollHeight - scrollTop - clientHeight
+
+    if (150 > offset && !this.props.isLoading) {
+      this.handleScrollToBottom()
+    }
+  }
+
+  handleLoadMore = (maxId) => {
+    if (this.props.accountId && this.props.accountId !== -1) {
+      this.props.dispatch(expandAccountMediaTimeline(this.props.accountId, {
+        maxId,
+        mediaType: this.props.mediaType,
+      }))
+    }
+  }
+
+  handleLoadOlder = (e) => {
+    e.preventDefault()
+    this.handleScrollToBottom()
+  }
+
+  render() {
+    const {
+      attachments,
+      isLoading,
+      hasMore,
+      intl,
+      account,
+    } = this.props
+
+    if (!account) return null
+
+    return (
+      <Block>
+        <div
+          role='feed'
+          onScroll={this.handleScroll}
+          className={[_s.d, _s.flexRow, _s.flexWrap, _s.py5, _s.px5].join(' ')}
+        >
+
+          {
+            attachments.map((attachment, i) => (
+              <MediaItem
+                key={attachment.get('id')}
+                attachment={attachment}
+                account={account}
+              />
+            ))
+          }
+
+          {
+            isLoading && attachments.size === 0 &&
+            <div className={[_s.d, _s.w100PC].join(' ')}>
+              <MediaGalleryPlaceholder />
+            </div>
+          }
+
+          {
+            !isLoading && attachments.size === 0 &&
+            <ColumnIndicator type='error' message={intl.formatMessage(messages.none)} />
+          }
+        </div>
+
+        {
+          hasMore && !(isLoading && attachments.size === 0) &&
+          <LoadMore visible={!isLoading} onClick={this.handleLoadOlder} />
+        }
+      </Block>
+    )
+  }
+
+}
+
+const messages = defineMessages({
+  none: { id: 'account_gallery.none', defaultMessage: 'No media to show.' },
+})
+
+const mapStateToProps = (state, { account, mediaType }) => {
+  const accountId =  !!account ? account.get('id') : -1
+
+  return {
+    accountId,
+    attachments: getAccountGallery(state, accountId, mediaType),
+    isLoading: state.getIn(['timelines', `account:${accountId}:media`, 'isLoading']),
+    hasMore: state.getIn(['timelines', `account:${accountId}:media`, 'hasMore']),
+  }
+}
+
+const mapDispatchToProps = (dispatch) => ({
+
+})
+
+AccountAlbums.propTypes = {
+  dispatch: PropTypes.func.isRequired,
+  account: ImmutablePropTypes.map,
+  accountId: PropTypes.string,
+  attachments: ImmutablePropTypes.list.isRequired,
+  isLoading: PropTypes.bool,
+  hasMore: PropTypes.bool,
+  intl: PropTypes.object.isRequired,
+  mediaType: PropTypes.oneOf([
+    'photo',
+    'video',
+  ]),
+}
+
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(AccountAlbums))

app/javascript/gabsocial/features/bookmark_collection_create.js

@@ -0,0 +1,73 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { defineMessages, injectIntl } from 'react-intl'
+import { changeListEditorTitle, submitListEditor } from '../actions/lists'
+import { closeModal } from '../actions/modal'
+import { MODAL_LIST_CREATE } from '../constants'
+import Button from '../components/button'
+import Input from '../components/input'
+import Form from '../components/form'
+import Text from '../components/text'
+
+class BookmarkCollectionCreate extends React.PureComponent {
+
+  state = {
+    value: '',
+  }
+
+  onChange = (value) => {
+    this.setState({ value })
+  }
+
+  handleOnSubmit = () => {
+    this.props.onSubmit()
+  }
+
+  render() {
+    const { disabled, isModal } = this.props
+    const { value } = this.state
+
+    const isDisabled = !value || disabled
+
+    return (
+      <Form>
+        <Input
+          title='Title'
+          placeholder='Bookmark collection title'
+          value={value}
+          onChange={this.onChange}
+        />
+
+        <Button
+          isDisabled={isDisabled}
+          onClick={this.handleOnSubmit}
+          className={[_s.mt10].join(' ')}
+        >
+          <Text color='inherit' align='center'>
+            Create
+          </Text>
+        </Button>
+      </Form>
+    )
+  }
+
+}
+
+const mapStateToProps = (state) => ({
+  disabled: state.getIn(['listEditor', 'isSubmitting']),
+})
+
+const mapDispatchToProps = (dispatch, { isModal }) => ({
+  onSubmit() {
+    if (isModal) dispatch(closeModal(MODAL_LIST_CREATE))
+    dispatch(submitListEditor(true))
+  },
+})
+
+BookmarkCollectionCreate.propTypes = {
+  onSubmit: PropTypes.func.isRequired,
+  isModal: PropTypes.bool,
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(BookmarkCollectionCreate)

app/javascript/gabsocial/features/bookmark_collections.js

@@ -3,8 +3,18 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
+import {
+  MODAL_BOOKMARK_COLLECTION_CREATE,
+} from '../constants'
+import {
+  meUsername,
+} from '../initial_state'
 import { fetchBookmarkCollections } from '../actions/bookmarks'
+import { openModal } from '../actions/modal'
 import ColumnIndicator from '../components/column_indicator'
+import Block from '../components/block'
+import Button from '../components/button'
+import Text from '../components/text'
 import List from '../components/list'
 
 class BookmarkCollections extends ImmutablePureComponent {
@@ -13,6 +23,10 @@ class BookmarkCollections extends ImmutablePureComponent {
     this.props.onFetchBookmarkCollections()
   }
 
+  handleOpenModal = () => {
+    this.props.onOpenModal()
+  }
+
   render() {
     const {
       isLoading,
@@ -24,19 +38,32 @@ class BookmarkCollections extends ImmutablePureComponent {
       return <ColumnIndicator type='error' message='Error fetching bookmark collections' />
     }
 
-    const listItems = shortcuts.map((s) => ({
+    const listItems = [{ to: `/${meUsername}/bookmark_collections/bookmarks`, title: 'Bookmarks' }].concat(!!bookmarkCollections ? bookmarkCollections.map((s) => ({
       to: s.get('to'),
       title: s.get('title'),
-      image: s.get('image'),
-    }))
+    })) : [])
 
     return (
-      <List
-        scrollKey='bookmark-collections'
-        emptyMessage='You have no bookmark collections'
-        items={listItems}
-        showLoading={isLoading}
-      />
+      <Block>
+        <div className={[_s.d, _s.px15, _s.py10].join(' ')}>
+          <div className={[_s.d, _s.flexRow, _s.aiCenter].join(' ')}>
+            <Text size='extraLarge' weight='bold'>Bookmark Collections</Text>
+            <Button
+              className={[_s.px10, _s.mlAuto].join(' ')}
+              onClick={this.handleOpenModal}
+              backgroundColor='tertiary'
+              color='tertiary'
+              icon='add'
+            />
+          </div>
+        </div>
+        <List
+          scrollKey='bookmark-collections'
+          emptyMessage='You have no bookmark collections'
+          items={listItems}
+          showLoading={isLoading}
+        />
+      </Block>
     )
   }
 
@@ -49,6 +76,9 @@ const mapStateToProps = (state) => ({
 })
 
 const mapDispatchToProps = (dispatch) => ({
+  onOpenModal() {
+    dispatch(openModal(MODAL_BOOKMARK_COLLECTION_CREATE))
+  },
   onFetchBookmarkCollections() {
     dispatch(fetchBookmarkCollections())
   },
@@ -58,6 +88,7 @@ BookmarkCollections.propTypes = {
   isLoading: PropTypes.bool.isRequired,
   isError: PropTypes.bool.isRequired,
   onFetchBookmarkCollections: PropTypes.func.isRequired,
+  onOpenModal: PropTypes.func.isRequired,
   bookmarkCollections: ImmutablePropTypes.list,
 }
 

app/javascript/gabsocial/features/bookmarked_statuses.js

@@ -13,11 +13,11 @@ import ColumnIndicator from '../components/column_indicator'
 class BookmarkedStatuses extends ImmutablePureComponent {
 
   componentWillMount() {
-    this.props.dispatch(fetchBookmarkedStatuses())
+    this.props.dispatch(fetchBookmarkedStatuses(this.props.bookmarkCollectionId))
   }
 
   handleLoadMore = debounce(() => {
-    this.props.dispatch(expandBookmarkedStatuses())
+    this.props.dispatch(expandBookmarkedStatuses(this.props.bookmarkCollectionId))
   }, 300, { leading: true })
 
   render() {
@@ -46,14 +46,13 @@ class BookmarkedStatuses extends ImmutablePureComponent {
 
 }
 
-const mapStateToProps = (state, { params: { username } }) => {
-  return {
-    isMyAccount: (username.toLowerCase() === meUsername.toLowerCase()),
-    statusIds: state.getIn(['status_lists', 'bookmarks', 'items']),
-    isLoading: state.getIn(['status_lists', 'bookmarks', 'isLoading'], true),
-    hasMore: !!state.getIn(['status_lists', 'bookmarks', 'next']),
-  }
-}
+const mapStateToProps = (state, { params: { username, bookmarkCollectionId } }) => ({
+  bookmarkCollectionId,
+  isMyAccount: (username.toLowerCase() === meUsername.toLowerCase()),
+  statusIds: state.getIn(['status_lists', 'bookmarks', 'items']),
+  isLoading: state.getIn(['status_lists', 'bookmarks', 'isLoading'], true),
+  hasMore: !!state.getIn(['status_lists', 'bookmarks', 'next']),
+})
 
 BookmarkedStatuses.propTypes = {
   dispatch: PropTypes.func.isRequired,

app/javascript/gabsocial/features/chat_conversation_create.js

@@ -21,7 +21,6 @@ class ChatConversationCreate extends React.PureComponent {
   }
 
   handleOnCreateChatConversation = (accountId) => {
-    console.log("handleOnCreateChatConversation:", accountId)
     this.props.onCreateChatConversation(accountId)
   }
 
@@ -69,7 +68,6 @@ const mapStateToProps = (state) => ({
 
 const mapDispatchToProps = (dispatch) => ({
   onChange: (value) => {
-    console.log("value", value)
     dispatch(fetchChatConversationAccountSuggestions(value))
   },
   onCreateChatConversation: (accountId) => {

app/javascript/gabsocial/features/chat_conversation_muted_accounts.js

@@ -1,87 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
-import { injectIntl, FormattedMessage } from 'react-intl'
-import ImmutablePureComponent from 'react-immutable-pure-component'
-import ImmutablePropTypes from 'react-immutable-proptypes'
-import debounce from 'lodash.debounce'
-import { me } from '../initial_state'
-import {
-  fetchChatMessengerMutes,
-  expandChatMessengerMutes,
-  unmuteChatMessenger,
-} from '../actions/chat_conversation_accounts'
-import Account from '../components/account'
-import Block from '../components/block'
-import BlockHeading from '../components/block_heading'
-import ScrollableList from '../components/scrollable_list'
-
-class ChatConversationMutedAccounts extends ImmutablePureComponent {
-
-  componentWillMount() {
-    this.props.onFetchMutes()
-  }
-
-  handleLoadMore = debounce(() => {
-    this.props.onExpandMutes()
-  }, 300, { leading: true })
-
-  render() {
-    const {
-      accountIds,
-      hasMore,
-      isLoading,
-    } = this.props
-
-    return (
-      <div className={[_s.d, _s.w100PC, _s.boxShadowNone].join(' ')}>
-        <div className={[_s.d, _s.h60PX, _s.w100PC, _s.px10, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
-          <BlockHeading title={<FormattedMessage id='navigation_bar.chat_mutes' defaultMessage='Muted chat users' />} />
-        </div>
-        <ScrollableList
-          scrollKey='chat_muted_accounts'
-          onLoadMore={this.handleLoadMore}
-          hasMore={hasMore}
-          isLoading={isLoading}
-          emptyMessage={<FormattedMessage id='empty_column.chat_mutes' defaultMessage="You haven't muted any chat users yet." />}
-        >
-          {
-            accountIds && accountIds.map((id) =>
-              <Account
-                key={`mutes-${id}`}
-                id={id}
-                compact
-                actionIcon='subtract'
-								onActionClick={() => this.props.onRemove(id)}
-								actionTitle='Remove'
-              />
-            )
-          }
-        </ScrollableList>
-      </div>
-    )
-  }
-
-}
-
-const mapStateToProps = (state) => ({
-  accountIds: state.getIn(['user_lists', 'chat_mutes', me, 'items']),
-  hasMore: !!state.getIn(['user_lists', 'chat_mutes', me, 'next']),
-  isLoading: state.getIn(['user_lists', 'chat_mutes', me, 'isLoading']),
-})
-
-const mapDispatchToProps = (dispatch) => ({
-  onFetchMutes: () => dispatch(fetchChatMessengerMutes()),
-  onExpandMutes: () => dispatch(expandChatMessengerMutes()),
-  onRemove: (accountId) => dispatch(unmuteChatMessenger(accountId)),
-})
-
-ChatConversationMutedAccounts.propTypes = {
-  accountIds: ImmutablePropTypes.list,
-  hasMore: PropTypes.bool,
-  isLoading: PropTypes.bool,
-  onExpandMutes: PropTypes.func.isRequired,
-  onFetchMutes: PropTypes.func.isRequired,
-}
-
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ChatConversationMutedAccounts))

app/javascript/gabsocial/features/compose/components/compose_destination_header.js

@@ -30,34 +30,38 @@ class ComposeDestinationHeader extends ImmutablePureComponent {
   }
 
   render() {
-    const { account, isModal } = this.props
+    const { account, isModal, formLocation } = this.props
 
+    const isIntroduction = formLocation === 'introduction'
     const title = 'Post to timeline'
 
     return (
       <div className={[_s.d, _s.flexRow, _s.aiCenter, _s.bgPrimary, _s.w100PC, _s.h40PX, _s.pr15].join(' ')}>
         <div className={[_s.d, _s.flexRow, _s.aiCenter, _s.pl15, _s.flexGrow1, _s.mrAuto, _s.h40PX].join(' ')}>
           <Avatar account={account} size={28} />
-          <div className={[_s.ml15].join(' ')}>
-            <Button
-              isNarrow
-              isOutline
-              radiusSmall
-              buttonRef={this.setDestinationBtn}
-              backgroundColor='secondary'
-              color='primary'
-              onClick={this.handleOnClick}
-              className={[_s.border1PX, _s.borderColorPrimary].join(' ')}
-            >
-              <Text color='inherit' size='small' className={_s.jcCenter}>
-                {title}
-                <Icon id='caret-down' size='8px' className={_s.ml5} />
-              </Text>
-            </Button>
-          </div>
+          {
+            !isIntroduction &&
+            <div className={[_s.ml15].join(' ')}>
+              <Button
+                isNarrow
+                isOutline
+                radiusSmall
+                buttonRef={this.setDestinationBtn}
+                backgroundColor='secondary'
+                color='primary'
+                onClick={this.handleOnClick}
+                className={[_s.border1PX, _s.borderColorPrimary].join(' ')}
+              >
+                <Text color='inherit' size='small' className={_s.jcCenter}>
+                  {title}
+                  <Icon id='caret-down' size='8px' className={_s.ml5} />
+                </Text>
+              </Button>
+            </div>
+          }
         </div>
         {
-          !isModal &&
+          !isModal && !isIntroduction &&
           <Button
             isText
             isNarrow
@@ -89,6 +93,7 @@ ComposeDestinationHeader.propTypes = {
   isModal: PropTypes.bool,
   onOpenModal: PropTypes.func.isRequired,
   onOpenPopover: PropTypes.func.isRequired,
+  formLocation: PropTypes.string,
 }
 
 export default connect(null, mapDispatchToProps)(ComposeDestinationHeader)

app/javascript/gabsocial/features/compose/components/compose_extra_button_list.js

@@ -57,6 +57,7 @@ class ComposeExtraButtonList extends React.PureComponent {
     const isXS = width <= BREAKPOINT_EXTRA_SMALL
     const isStandalone = formLocation === 'standalone'
     const isTimeline = formLocation === 'timeline'
+    const isIntroduction = formLocation === 'introduction'
     const small = (!isModal && isXS && !isStandalone) || isTimeline
 
     console.log("small, formLocation:", small, formLocation)
@@ -84,8 +85,8 @@ class ComposeExtraButtonList extends React.PureComponent {
         <UploadButton small={small} />
         <EmojiPickerButton isMatch={isMatch} small={small} />
         { !edit && <PollButton small={small} /> }
-        <StatusVisibilityButton small={small} />
-        <SpoilerButton small={small} />
+        { !isIntroduction && <StatusVisibilityButton small={small} /> }
+        { !isIntroduction && <SpoilerButton small={small} /> }
         { !hidePro && !edit && <SchedulePostButton small={small} /> }
         { !hidePro && !edit && <ExpiresPostButton small={small} /> }
         { !hidePro && !isXS && <RichTextEditorButton small={small} /> }

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

@@ -273,7 +273,7 @@ class ComposeForm extends ImmutablePureComponent {
         <div className={[_s.d, _s.calcMaxH410PX, _s.overflowYScroll].join(' ')}>
 
           <Responsive min={BREAKPOINT_EXTRA_SMALL}>
-            <ComposeDestinationHeader account={account} isModal={isModalOpen} />
+            <ComposeDestinationHeader formLocation={formLocation} account={account} isModal={isModalOpen} />
           </Responsive>
 
           <div className={containerClasses} ref={this.setForm} onClick={this.handleClick}>

app/javascript/gabsocial/features/deck.js

@@ -25,7 +25,9 @@ import Text from '../components/text'
 import {
   AccountTimeline,
   Compose,
+  GroupTimeline,
   LikedStatuses,
+  ListTimeline,
   HomeTimeline,
   Notifications,
   HashtagTimeline,
@@ -73,7 +75,7 @@ class Deck extends React.PureComponent {
 
     let Component = null
     let componentParams = {}
-    let title, icon = ''
+    let title, subtitle, icon = ''
 
     switch (deckColumn) {
       case 'notifications':
@@ -123,18 +125,32 @@ class Deck extends React.PureComponent {
         break
     }
 
-    // : todo :
     if (!Component) {
       if (deckColumn.indexOf('user.') > -1)  {
         
       } else if (deckColumn.indexOf('list.') > -1)  {
-        
+        const listId = deckColumn.replace('list.', '')
+        title = 'List'
+        subtitle = listId
+        icon = 'list'
+        Component = ListTimeline
+        componentParams = { params: { id: listId }} 
       } else if (deckColumn.indexOf('group.') > -1)  {
-        
+        const groupId = deckColumn.replace('group.', '')
+        title = 'Group'
+        subtitle = groupId
+        icon = 'group'
+        Component = GroupTimeline
+        componentParams = { params: { id: groupId }} 
       } else if (deckColumn.indexOf('news.') > -1)  {
-        
+        // : todo :        
       } else if (deckColumn.indexOf('hashtag.') > -1)  {
-        
+        const hashtag = deckColumn.replace('hashtag.', '')
+        title = 'Hashtag'
+        subtitle = hashtag
+        icon = 'apps'
+        Component = HashtagTimeline
+        componentParams = { params: { id: hashtag }} 
       }
     }
 
@@ -146,7 +162,7 @@ class Deck extends React.PureComponent {
         index={index}
         sortIndex={index}
       >
-        <DeckColumn title={title} icon={icon} index={index}>
+        <DeckColumn title={title} subtitle={subtitle} icon={icon} index={index}>
           <WrappedBundle component={Component} componentParams={componentParams} />
         </DeckColumn>
       </SortableItem>
@@ -158,6 +174,8 @@ class Deck extends React.PureComponent {
 
     const isEmpty = gabDeckOrder.size === 0
 
+    console.log("gabDeckOrder:", gabDeckOrder)
+
     return (
       <SortableContainer
         axis='x'

app/javascript/gabsocial/features/list_timeline.js

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

app/javascript/gabsocial/features/messages/components/chat_message_compose_form.js

@@ -193,4 +193,4 @@ ChatMessagesComposeForm.propTypes = {
   onSendMessage: PropTypes.func.isRequired,
 }
 
-export default connect(mapDispatchToProps)(ChatMessagesComposeForm)
+export default connect(null, mapDispatchToProps)(ChatMessagesComposeForm)

app/javascript/gabsocial/features/messages/components/chat_settings_sidebar.js

@@ -30,10 +30,6 @@ class ChatSettingsSidebar extends React.PureComponent {
               title: 'Blocked Chats',
               to: '/messages/blocks',
             },
-            {
-              title: 'Muted Chats',
-              to: '/messages/mutes',
-            },
           ]}
         />
       </ResponsiveClassesComponent>

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

@@ -56,16 +56,17 @@ import {
   AccountGallery,
   AccountTimeline,
   AccountCommentsTimeline,
+  AlbumCreate,
   Assets,
   BlockedAccounts,
   BookmarkCollections,
+  BookmarkCollectionCreate,
   BookmarkedStatuses,
   CaliforniaConsumerProtection,
   CaliforniaConsumerProtectionContact,
   ChatConversationCreate,
   ChatConversationRequests,
   ChatConversationBlockedAccounts,
-  ChatConversationMutedAccounts,
   CommunityTimeline,
   Compose,
   Deck,
@@ -219,7 +220,6 @@ class SwitchingArea extends React.PureComponent {
         <WrappedRoute path='/messages/settings' exact page={MessagesPage} component={MessagesSettings} content={children} componentParams={{ isSettings: true }} />
         <WrappedRoute path='/messages/requests' exact page={MessagesPage} component={ChatConversationRequests} content={children} componentParams={{ isSettings: true, source: 'requested' }} />
         <WrappedRoute path='/messages/blocks' exact page={MessagesPage} component={ChatConversationBlockedAccounts} content={children} componentParams={{ isSettings: true }} />
-        <WrappedRoute path='/messages/mutes' exact page={MessagesPage} component={ChatConversationMutedAccounts} content={children} componentParams={{ isSettings: true }} />
         <WrappedRoute path='/messages/:chatConversationId' exact page={MessagesPage} component={Messages} content={children} componentParams={{ source: 'approved' }} />
 
         <WrappedRoute path='/timeline/all' exact page={CommunityPage} component={CommunityTimeline} content={children} componentParams={{ title: 'Community Feed' }} />
@@ -278,9 +278,13 @@ class SwitchingArea extends React.PureComponent {
         <WrappedRoute path='/:username/videos' page={ProfilePage} component={AccountGallery} content={children} componentParams={{ noSidebar: true, mediaType: 'video' }} />
         <WrappedRoute path='/:username/albums' page={ProfilePage} component={AccountAlbums} content={children} componentParams={{ noSidebar: true, mediaType: 'photo' }} />
 
+        <WrappedRoute path='/:username/album_create' page={ModalPage} component={AlbumCreate} content={children} componentParams={{ title: 'Create Album', page: 'create-album' }} />
+        <WrappedRoute path='/:username/album_edit/:albumId' page={ModalPage} component={AlbumCreate} content={children} componentParams={{ title: 'Create Album', page: 'edit-album' }} />        
+
         <WrappedRoute path='/:username/likes' page={ProfilePage} component={LikedStatuses} content={children} />
-        <WrappedRoute path='/:username/bookmarks' page={ProfilePage} component={BookmarkCollections} content={children} />
-        <WrappedRoute path='/:username/:bookmarkCollectionId/bookmarks' page={ProfilePage} component={BookmarkedStatuses} content={children} />
+        <WrappedRoute path='/:username/bookmark_collections' page={ProfilePage} component={BookmarkCollections} content={children} />
+        <WrappedRoute path='/:username/bookmark_collections/create' page={ModalPage} component={BookmarkCollectionCreate} content={children} componentParams={{ title: 'Create Bookmark Collection', page: 'create-bookmark-collection' }} />
+        <WrappedRoute path='/:username/bookmark_collections/:bookmarkCollectionId' page={ProfilePage} component={BookmarkedStatuses} content={children} />
 
         <WrappedRoute path='/:username/posts/:statusId' publicRoute exact page={BasicPage} component={StatusFeature} content={children} componentParams={{ title: 'Status', page: 'status' }} />
 

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

@@ -3,10 +3,14 @@ export function AboutSidebar() { return import(/* webpackChunkName: "components/
 export function AccountTimeline() { return import(/* webpackChunkName: "features/account_timeline" */'../../account_timeline') }
 export function AccountCommentsTimeline() { return import(/* webpackChunkName: "features/account_comments_timeline" */'../../account_comments_timeline') }
 export function AccountGallery() { return import(/* webpackChunkName: "features/account_gallery" */'../../account_gallery') }
+export function AlbumCreate() { return import(/* webpackChunkName: "features/album_create" */'../../album_create') }
+export function AlbumCreateModal() { return import(/* webpackChunkName: "components/album_create_modal" */'../../../components/modal/album_create_modal') }
 export function Assets() { return import(/* webpackChunkName: "features/about/assets" */'../../about/assets') }
 export function BlockAccountModal() { return import(/* webpackChunkName: "components/block_account_modal" */'../../../components/modal/block_account_modal') }
 export function BlockedAccounts() { return import(/* webpackChunkName: "features/blocked_accounts" */'../../blocked_accounts') }
 export function BookmarkCollections() { return import(/* webpackChunkName: "features/bookmark_collections" */'../../bookmark_collections') }
+export function BookmarkCollectionCreate() { return import(/* webpackChunkName: "features/bookmark_collection_create" */'../../bookmark_collection_create') }
+export function BookmarkCollectionCreateModal() { return import(/* webpackChunkName: "components/bookmark_collection_create_modal" */'../../../components/modal/bookmark_collection_create_modal') }
 export function BookmarkedStatuses() { return import(/* webpackChunkName: "features/bookmarked_statuses" */'../../bookmarked_statuses') }
 export function BoostModal() { return import(/* webpackChunkName: "components/boost_modal" */'../../../components/modal/boost_modal') }
 export function CaliforniaConsumerProtection() { return import(/* webpackChunkName: "features/california_consumer_protection" */'../../about/california_consumer_protection') }
@@ -15,13 +19,11 @@ export function ChatConversationBlockedAccounts() { return import(/* webpackChun
 export function ChatConversationCreate() { return import(/* webpackChunkName: "features/chat_conversation_create" */'../../chat_conversation_create') }
 export function ChatConversationCreateModal() { return import(/* webpackChunkName: "components/chat_conversation_create_modal" */'../../../components/modal/chat_conversation_create_modal') }
 export function ChatConversationDeleteModal() { return import(/* webpackChunkName: "components/chat_conversation_delete_modal" */'../../../components/modal/chat_conversation_delete_modal') }
-export function ChatConversationMutedAccounts() { return import(/* webpackChunkName: "features/chat_conversation_muted_accounts" */'../../chat_conversation_muted_accounts') }
 export function ChatConversationOptionsPopover() { return import(/* webpackChunkName: "components/chat_conversation_options_popover" */'../../../components/popover/chat_conversation_options_popover') }
 export function ChatConversationRequests() { return import(/* webpackChunkName: "features/chat_conversation_requests" */'../../chat_conversation_requests') }
 export function ChatMessageOptionsPopover() { return import(/* webpackChunkName: "components/chat_message_options_popover" */'../../../components/popover/chat_message_options_popover') }
 export function CommentSortingOptionsPopover() { return import(/* webpackChunkName: "components/comment_sorting_options_popover" */'../../../components/popover/comment_sorting_options_popover') }
 export function CommunityTimeline() { return import(/* webpackChunkName: "features/community_timeline" */'../../community_timeline') }
-export function CommunityTimelineSettingsModal() { return import(/* webpackChunkName: "components/community_timeline_settings_modal" */'../../../components/modal/community_timeline_settings_modal') }
 export function Compose() { return import(/* webpackChunkName: "features/compose" */'../../compose') }
 export function ComposeForm() { return import(/* webpackChunkName: "components/compose_form" */'../../compose/components/compose_form') }
 export function ComposeModal() { return import(/* webpackChunkName: "components/compose_modal" */'../../../components/modal/compose_modal') }
@@ -70,7 +72,6 @@ export function GroupsCategories() { return import(/* webpackChunkName: "feature
 export function GroupCategory() { return import(/* webpackChunkName: "features/group_category" */'../../group_category') }
 export function GroupTag() { return import(/* webpackChunkName: "features/group_tag" */'../../group_tag') }
 export function HashtagTimeline() { return import(/* webpackChunkName: "features/hashtag_timeline" */'../../hashtag_timeline') }
-export function HashtagTimelineSettingsModal() { return import(/* webpackChunkName: "components/hashtag_timeline_settings_modal" */'../../../components/modal/hashtag_timeline_settings_modal') }
 export function HomeTimeline() { return import(/* webpackChunkName: "features/home_timeline" */'../../home_timeline') }
 export function HomeTimelineSettingsModal() { return import(/* webpackChunkName: "components/home_timeline_settings_modal" */'../../../components/modal/home_timeline_settings_modal') }
 export function HotkeysModal() { return import(/* webpackChunkName: "components/hotkeys_modal" */'../../../components/modal/hotkeys_modal') }