Progress

accounts approved, video player testing, bookmark collections
2020-12-17 01:34:00 -05:00
parent 04053c0e31
commit 5a37a7090e
88 changed files with 688 additions and 395 deletions
--- a/app/javascript/gabsocial/actions/albums.js
+++ b/app/javascript/gabsocial/actions/albums.js
@@ -1 +1,16 @@
-//
+import api, { getLinks } from '../api'
+import { me } from '../initial_state'
+
+//
+
+export const ALBUMS_FETCH_REQUEST = 'ALBUMS_FETCH_REQUEST'
+export const ALBUMS_FETCH_SUCCESS = 'ALBUMS_FETCH_SUCCESS'
+export const ALBUMS_FETCH_FAIL = 'ALBUMS_FETCH_FAIL'
+
+export const ALBUMS_CREATE_REQUEST = 'ALBUMS_CREATE_REQUEST'
+export const ALBUMS_CREATE_SUCCESS = 'ALBUMS_CREATE_SUCCESS'
+export const ALBUMS_CREATE_FAIL = 'ALBUMS_CREATE_FAIL'
+
+export const ALBUMS_REMOVE_REQUEST = 'ALBUMS_REMOVE_REQUEST'
+export const ALBUMS_REMOVE_SUCCESS = 'ALBUMS_REMOVE_SUCCESS'
+export const ALBUMS_REMOVE_FAIL = 'ALBUMS_REMOVE_FAIL'
--- a/app/javascript/gabsocial/actions/bookmarks.js
+++ b/app/javascript/gabsocial/actions/bookmarks.js
@@ -40,13 +40,13 @@ export const UPDATE_BOOKMARK_COLLECTION_STATUS_SUCCESS = 'UPDATE_BOOKMARK_COLLEC
 export const fetchBookmarkedStatuses = (bookmarkCollectionId) => (dispatch, getState) => {
  if (!me) return

-  if (getState().getIn(['status_lists', 'bookmarks', 'isLoading'])) {
+  if (getState().getIn(['status_lists', 'bookmarks', bookmarkCollectionId, 'isLoading'])) {
    return
  }

  dispatch(fetchBookmarkedStatusesRequest(bookmarkCollectionId))

-  api(getState).get('/api/v1/bookmarks').then((response) => {
+  api(getState).get(`/api/v1/bookmark_collections/${bookmarkCollectionId}/bookmarks`).then((response) => {
    const next = getLinks(response).refs.find(link => link.rel === 'next')
    dispatch(importFetchedStatuses(response.data))
    dispatch(fetchBookmarkedStatusesSuccess(response.data, bookmarkCollectionId, next ? next.uri : null))
@@ -57,6 +57,7 @@ export const fetchBookmarkedStatuses = (bookmarkCollectionId) => (dispatch, getS

 const fetchBookmarkedStatusesRequest = (bookmarkCollectionId) => ({
  type: BOOKMARKED_STATUSES_FETCH_REQUEST,
+  bookmarkCollectionId,
 })

 const fetchBookmarkedStatusesSuccess = (statuses, bookmarkCollectionId, next) => ({
@@ -98,10 +99,12 @@ export const expandBookmarkedStatuses = (bookmarkCollectionId) => (dispatch, get

 const expandBookmarkedStatusesRequest = (bookmarkCollectionId) => ({
  type: BOOKMARKED_STATUSES_EXPAND_REQUEST,
+  bookmarkCollectionId,
 })

 const expandBookmarkedStatusesSuccess = (statuses, bookmarkCollectionId, next) => ({
  type: BOOKMARKED_STATUSES_EXPAND_SUCCESS,
+  bookmarkCollectionId,
  statuses,
  next,
 })
@@ -213,7 +216,7 @@ export const updateBookmarkCollection = (bookmarkCollectionId, title) => (dispat

  dispatch(updateBookmarkCollectionRequest())

-  api(getState).post('/api/v1/bookmark_collections', { title }).then((response) => {
+  api(getState).put('/api/v1/bookmark_collections', { title }).then((response) => {
    dispatch(updateBookmarkCollectionSuccess(response.data))
  }).catch((error) => {
    dispatch(updateBookmarkCollectionFail(error))
@@ -243,8 +246,9 @@ export const updateBookmarkCollectionStatus = (statusId, bookmarkCollectionId) =

  dispatch(updateBookmarkCollectionStatusRequest())

-  api(getState).post('/api/v1/bookmark_collections', { title }).then((response) => {
-    dispatch(updateBookmarkCollectionStatusSuccess(response.data))
+  api(getState).post(`/api/v1/bookmark_collections/${bookmarkCollectionId}/update_status`, { statusId }).then((response) => {
+    dispatch(importFetchedStatuses([response.data]))
+    dispatch(updateBookmarkCollectionStatusSuccess())
  }).catch((error) => {
    dispatch(updateBookmarkCollectionStatusFail(error))
  })
@@ -254,9 +258,8 @@ const updateBookmarkCollectionStatusRequest = () => ({
  type: UPDATE_BOOKMARK_COLLECTION_STATUS_REQUEST,
 })

-const updateBookmarkCollectionStatusSuccess = (bookmarkCollection) => ({
+const updateBookmarkCollectionStatusSuccess = () => ({
  type: UPDATE_BOOKMARK_COLLECTION_STATUS_SUCCESS,
-  bookmarkCollection,
 })

 const updateBookmarkCollectionStatusFail = (error) => ({
--- a/app/javascript/gabsocial/components/modal/bookmark_collection_edit_modal.js
+++ b/app/javascript/gabsocial/components/modal/bookmark_collection_edit_modal.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { defineMessages, injectIntl } from 'react-intl'
+import ModalLayout from './modal_layout'
+import BookmarkCollectionEdit from '../../features/bookmark_collection_edit'
+
+class BookmarkCollectionEditModal extends React.PureComponent {
+
+  render() {
+    const { onClose } = this.props
+
+    return (
+      <ModalLayout
+        title='Edit Bookmark Collection'
+        width={500}
+        onClose={onClose}
+      >
+        <BookmarkCollectionEdit isModal />
+      </ModalLayout>
+    )
+  }
+
+}
+
+BookmarkCollectionEditModal.propTypes = {
+  onClose: PropTypes.func.isRequired,
+}
+
+export default BookmarkCollectionEditModal
--- a/app/javascript/gabsocial/components/modal/edit_profile_modal.js
+++ b/app/javascript/gabsocial/components/modal/edit_profile_modal.js
@@ -164,6 +164,7 @@ class EditProfileModal extends ImmutablePureComponent {
                    <Input
                      id='display-name'
                      title='Display name'
+                      maxLength={30}
                      value={displayNameValue}
                      onChange={this.handleDisplayNameChange}
                      onBlur={this.handleDisplayNameBlur}
@@ -176,6 +177,7 @@ class EditProfileModal extends ImmutablePureComponent {
                  title='Bio'
                  value={bioValue}
                  disabled={false}
+                  maxLength={500}
                  onChange={this.handleBioChange}
                  placeholder='Add your bio...'
                />
--- a/app/javascript/gabsocial/components/navigation_bar/profile_navigation_bar.js
+++ b/app/javascript/gabsocial/components/navigation_bar/profile_navigation_bar.js
@@ -33,7 +33,7 @@ class ProfileNavigationBar extends React.PureComponent {
              <Button
                icon='ellipsis'
                iconSize='26px'
-                iconClassName={_s.inheritFill}
+                iconClassName={_s.colorNavigation}
                color='brand'
                backgroundColor='none'
                className={[_s.jcCenter, _s.aiCenter, _s.ml10, _s.px10].join(' ')}
--- a/app/javascript/gabsocial/components/panel/shop_panel.js
+++ b/app/javascript/gabsocial/components/panel/shop_panel.js
@@ -40,7 +40,8 @@ class ShopPanel extends React.PureComponent {
      isError,
    } = this.props

-    if (!items || isError || !Array.isArray(items)) return null
+    if (!items || isError || !Array.isArray(items)) return <div />
+    if (items.length <= 0) return <div />

    return (
      <PanelLayout
--- a/app/javascript/gabsocial/components/popover/chat_conversation_expiration_options_popover.js
+++ b/app/javascript/gabsocial/components/popover/chat_conversation_expiration_options_popover.js
@@ -14,6 +14,7 @@ import {
 } from '../../constants'
 import PopoverLayout from './popover_layout'
 import List from '../list'
+import Text from '../text'

 class ChatConversationExpirationOptionsPopover extends React.PureComponent {

@@ -94,7 +95,7 @@ class ChatConversationExpirationOptionsPopover extends React.PureComponent {
        isXS={isXS}
        onClose={this.handleOnClosePopover}
      >
-        <Text className={[_s.d, _s.px15, _s.py10, _s.bgSecondary].join(' ')}>This chats delete after:</Text>
+        <Text className={[_s.d, _s.px15, _s.py10, _s.bgSecondary].join(' ')}>Chats delete after:</Text>
        <List
          scrollKey='chat_conversation_expiration'
          items={listItems}
--- a/app/javascript/gabsocial/components/popover/compose_post_destination_popover.js
+++ b/app/javascript/gabsocial/components/popover/compose_post_destination_popover.js
@@ -106,7 +106,7 @@ class ComposePostDesinationPopover extends ImmutablePureComponent {
            <div className={[_s.d, _s.w100PC, _s.overflowYScroll, _s.maxH340PX].join(' ')}>
              <List
                scrollKey='groups-post-destination-add'
-                showLoading={groups.size === 0}
+                showLoading={groups.length === 0}
                emptyMessage="You are not a member of any groups yet."
                items={groupItems}
              />
--- a/app/javascript/gabsocial/components/popover/popover_root.js
+++ b/app/javascript/gabsocial/components/popover/popover_root.js
@@ -1,5 +1,6 @@
 import {
  BREAKPOINT_EXTRA_SMALL,
+  POPOVER_CHAT_CONVERSATION_EXPIRATION_OPTIONS,
  POPOVER_CHAT_CONVERSATION_OPTIONS,
  POPOVER_CHAT_MESSAGE_OPTIONS,
  POPOVER_COMMENT_SORTING_OPTIONS,
@@ -23,6 +24,7 @@ import {
  POPOVER_VIDEO_STATS,
 } from '../../constants'
 import {
+  ChatConversationExpirationOptionsPopover,
  ChatConversationOptionsPopover,
  ChatMessageOptionsPopover,
  CommentSortingOptionsPopover,
@@ -60,6 +62,7 @@ import LoadingPopover from './loading_popover'
 const initialState = getWindowDimension()

 const POPOVER_COMPONENTS = {
+  [POPOVER_CHAT_CONVERSATION_EXPIRATION_OPTIONS]: ChatConversationExpirationOptionsPopover,
  [POPOVER_CHAT_CONVERSATION_OPTIONS]: ChatConversationOptionsPopover,
  [POPOVER_CHAT_MESSAGE_OPTIONS]: ChatMessageOptionsPopover,
  [POPOVER_COMMENT_SORTING_OPTIONS]: CommentSortingOptionsPopover,
--- a/app/javascript/gabsocial/components/popover/status_options_popover.js
+++ b/app/javascript/gabsocial/components/popover/status_options_popover.js
@@ -21,6 +21,10 @@ import {
  editStatus,
 } from '../../actions/statuses';
 import { quoteCompose } from '../../actions/compose'
+import {
+  fetchBookmarkCollections,
+  updateBookmarkCollectionStatus,
+} from '../../actions/bookmarks'
 import {
  fetchGroupRelationships,
  createRemovedAccount,
@@ -40,7 +44,9 @@ import {
  POPOVER_STATUS_SHARE,
 } from '../../constants'
 import PopoverLayout from './popover_layout'
+import Button from '../button'
 import List from '../list'
+import Text from '../text'

 class StatusOptionsPopover extends ImmutablePureComponent {

@@ -48,11 +54,9 @@ class StatusOptionsPopover extends ImmutablePureComponent {
    router: PropTypes.object,
  }

-  updateOnProps = [
-    'status',
-    'groupRelationships',
-    'isXS',
-  ]
+  state = {
+    showingBookmarkCollections: false,
+  }

  componentDidMount() {
    const {
@@ -109,6 +113,7 @@ class StatusOptionsPopover extends ImmutablePureComponent {
  }

  handleBookmarkClick = () => {
+    // : todo : add to specific bookmark collection
    if (this.props.isPro) {
      this.props.onBookmark(this.props.status)
    } else {
@@ -116,6 +121,19 @@ class StatusOptionsPopover extends ImmutablePureComponent {
    }
  }

+  handleBookmarkChangeClick = () => {
+    if (!this.props.bookmarkCollectionsIsFetched) this.props.onFetchBookmarkCollections()
+    this.setState({ showingBookmarkCollections: true })
+  }
+
+  handleBookmarkChangeBackClick = () => {
+    this.setState({ showingBookmarkCollections: false })
+  }
+
+  handleBookmarkChangeSelectClick = (bookmarkCollectionId) => {
+    this.props.onUpdateBookmarkCollectionStatus(this.props.status.get('id'), bookmarkCollectionId)
+  }
+
  handleDeleteClick = () => {
    this.props.onDelete(this.props.status)
  }
@@ -142,11 +160,13 @@ class StatusOptionsPopover extends ImmutablePureComponent {

  render() {
    const {
-      status,
-      intl,
-      groupRelationships,
      isXS,
+      intl,
+      status,
+      groupRelationships,
+      bookmarkCollections,
    } = this.props
+    const { showingBookmarkCollections } = this.state

    if (!status) return <div />

@@ -155,8 +175,6 @@ class StatusOptionsPopover extends ImmutablePureComponent {
    const isReply = !!status.get('in_reply_to_id')
    const withGroupAdmin = !!groupRelationships ? (groupRelationships.get('admin') || groupRelationships.get('moderator')) : false

-    console.log("publicStatus:", status, publicStatus)
-
    let menu = []

    if (me) {
@@ -171,11 +189,19 @@ class StatusOptionsPopover extends ImmutablePureComponent {

      menu.push({
        icon: 'bookmark',
-        hideArrow: true,
+        hideArrow: status.get('bookmarked'),
        title: intl.formatMessage(status.get('bookmarked') ? messages.unbookmark : messages.bookmark),
        onClick: this.handleBookmarkClick,
      })
-      
+
+      if (status.get('bookmarked')) {
+        menu.push({
+          icon: 'bookmark',
+          title: 'Update bookmark collection',
+          onClick: this.handleBookmarkChangeClick,
+        })
+      }
+
      if (status.getIn(['account', 'id']) === me) {
        if (publicStatus) {
          menu.push({
@@ -264,16 +290,62 @@ class StatusOptionsPopover extends ImmutablePureComponent {
      })
    }

+    const popoverWidth = !isStaff ? 260 : 362
+
+    let bookmarkCollectionItems = !!bookmarkCollections ? bookmarkCollections.map((bookmarkCollection) => ({
+      hideArrow: true,
+      onClick: () => this.handleBookmarkChangeSelectClick(bookmarkCollection.get('id')),
+      title: bookmarkCollection.get('title'),
+      isActive: bookmarkCollection.get('id') === status.get('bookmark_collection_id'),
+    })) : []
+    bookmarkCollectionItems = bookmarkCollectionItems.unshift({
+      hideArrow: true,
+      onClick: () => this.handleBookmarkChangeSelectClick('saved'),
+      title: 'Saved',
+      isActive: !status.get('bookmark_collection_id'),
+    })
+
    return (
      <PopoverLayout
        isXS={isXS}
        onClose={this.handleClosePopover}
+        width={popoverWidth}
      >
-        <List
-          scrollKey='profile_options'
-          items={menu}
-          size={isXS ? 'large' : 'small'}
-        />
+        {
+          !showingBookmarkCollections &&
+          <List
+            scrollKey='profile_options'
+            items={menu}
+            size={isXS ? 'large' : 'small'}
+          />
+        }
+        {
+          showingBookmarkCollections &&
+          <div className={[_s.d, _s.w100PC].join(' ')}>
+            <div className={[_s.d, _s.flexRow, _s.bgSecondary].join(' ')}>
+              <Button
+                isText
+                icon='back'
+                color='primary'
+                backgroundColor='none'
+                className={[_s.aiCenter, _s.jcCenter, _s.pl15, _s.pr5].join(' ')}
+                onClick={this.handleBookmarkChangeBackClick}
+              />
+              <Text className={[_s.d, _s.pl5, _s.py10].join(' ')}>
+                Select bookmark collection:
+              </Text>
+            </div>
+            <div className={[_s.d, _s.w100PC, _s.overflowYScroll, _s.maxH340PX].join(' ')}>
+              <List
+                scrollKey='status_options_bookmark_collections'
+                showLoading={bookmarkCollectionItems.length === 0}
+                emptyMessage="You have no bookmark collections yet."
+                items={bookmarkCollectionItems}
+                size={isXS ? 'large' : 'small'}
+              />
+            </div>
+          </div>
+        }
      </PopoverLayout>
    )
  }
@@ -323,6 +395,8 @@ const mapStateToProps = (state, { statusId }) => {
    groupId,
    groupRelationships,
    isPro: state.getIn(['accounts', me, 'is_pro']),
+    bookmarkCollectionsIsFetched: state.getIn(['bookmark_collections', 'isFetched']),
+    bookmarkCollections: state.getIn(['bookmark_collections', 'items']),
  }
 }

@@ -454,7 +528,6 @@ const mapDispatchToProps = (dispatch) => ({
    dispatch(closePopover())
    dispatch(openModal(MODAL_PRO_UPGRADE))
  },
-
  onPinGroupStatus(status) {
    dispatch(closePopover())

@@ -464,7 +537,13 @@ const mapDispatchToProps = (dispatch) => ({
      dispatch(pinGroupStatus(status.getIn(['group', 'id']), status.get('id')))
    }
  },
-
+  onFetchBookmarkCollections() {
+    dispatch(fetchBookmarkCollections())
+  },
+  onUpdateBookmarkCollectionStatus(statusId, bookmarkCollectionId) {
+    dispatch(updateBookmarkCollectionStatus(statusId, bookmarkCollectionId))
+    dispatch(closePopover())
+  },
  onClosePopover: () => dispatch(closePopover()),
 })

@@ -487,6 +566,8 @@ StatusOptionsPopover.propTypes = {
  fetchIsPinnedGroupStatus: PropTypes.func.isRequired,
  fetchIsBookmark: PropTypes.func.isRequired,
  fetchIsPin: PropTypes.func.isRequired,
+  onFetchBookmarkCollections: PropTypes.func.isRequired,
+  onUpdateBookmarkCollectionStatus: PropTypes.func.isRequired,
  isXS: PropTypes.bool,
  isPro: PropTypes.bool,
 }
--- a/app/javascript/gabsocial/components/popover/user_info_popover.js
+++ b/app/javascript/gabsocial/components/popover/user_info_popover.js
@@ -12,7 +12,7 @@ import PopoverLayout from './popover_layout'
 import AccountActionButton from '../account_action_button'
 import Avatar from '../avatar'
 import DisplayName from '../display_name'
-import Text from '../text'
+import UserStat from '../user_stat'

 class UserInfoPopover extends ImmutablePureComponent {

@@ -47,28 +47,19 @@ class UserInfoPopover extends ImmutablePureComponent {
          </div>

          <div className={[_s.d, _s.flexRow, _s.mt10].join(' ')}>
-            <NavLink
-              to={`${to}/followers`}
-              className={[_s.d, _s.flexRow, _s.mr10, _s.noUnderline, _s.cPrimary, _s.underline_onHover].join(' ')}
-            >
-              <Text weight='extraBold' color='primary'>
-                {shortNumberFormat(account.get('followers_count'))}&nbsp;
-              </Text>
-              <Text color='secondary'>
-                <FormattedMessage id='account.followers' defaultMessage='Followers' />
-              </Text>
-            </NavLink>
-            <NavLink
-              to={`${to}/following`}
-              className={[_s.d, _s.flexRow, _s.noUnderline, _s.cPrimary, _s.underline_onHover].join(' ')}
-            >
-              <Text weight='extraBold' color='primary'>
-                {shortNumberFormat(account.get('following_count'))}&nbsp;
-              </Text>
-              <Text color='secondary'>
-                <FormattedMessage id='account.follows' defaultMessage='Following' />
-              </Text>
-            </NavLink>
+            <UserStat
+              title={<FormattedMessage id='account.followers' defaultMessage='Followers' />}
+              value={shortNumberFormat(account.get('followers_count'))}
+              to={`/${account.get('acct')}/followers`}
+              isInline
+            />
+            <UserStat
+              isLast
+              title={<FormattedMessage id='account.follows' defaultMessage='Following' />}
+              value={shortNumberFormat(account.get('following_count'))}
+              to={`/${account.get('acct')}/following`}
+              isInline
+            />
          </div>

        </div>
--- a/app/javascript/gabsocial/components/status_list.js
+++ b/app/javascript/gabsocial/components/status_list.js
@@ -424,4 +424,8 @@ StatusList.propTypes = {
  promotedStatuses: PropTypes.object,
 }

+StatusList.defaultProps = {
+  statusIds: ImmutableList(),
+}
+
 export default connect(mapStateToProps, mapDispatchToProps)(StatusList)
--- a/app/javascript/gabsocial/components/textarea.js
+++ b/app/javascript/gabsocial/components/textarea.js
@@ -19,6 +19,7 @@ class Textarea extends React.PureComponent {
      onBlur,
      title,
      isRequired,
+      maxLength,
    } = this.props

    const inputClasses = CX({
@@ -58,6 +59,7 @@ class Textarea extends React.PureComponent {
            onKeyUp={onKeyUp}
            onFocus={onFocus}
            onBlur={onBlur}
+            maxLength={maxLength}
            required={isRequired ? true : undefined}
          />

@@ -77,6 +79,7 @@ Textarea.propTypes = {
  onBlur: PropTypes.func,
  title: PropTypes.string,
  isRequired: PropTypes.bool,
+  maxLength: PropTypes.number,
 }

 export default Textarea
--- a/app/javascript/gabsocial/components/timeline_injections/shop_injection.js
+++ b/app/javascript/gabsocial/components/timeline_injections/shop_injection.js
@@ -27,6 +27,7 @@ class ShopInjection extends React.PureComponent {
    } = this.props

    if (!items || isError || !Array.isArray(items)) return <div />
+    if (items.length <= 0) return <div />

    return (
      <TimelineInjectionLayout
--- a/app/javascript/gabsocial/components/user_stat.js
+++ b/app/javascript/gabsocial/components/user_stat.js
@@ -38,8 +38,11 @@ class UserStat extends React.PureComponent {

    const align = isCentered ? 'center' : 'left'
    const titleSize = isInline ? 'normal' : 'extraLarge'
-    const subtitleSize = isInline ? 'normal' : 'small'
+    const titleColor = isInline ? 'primary' : 'brand'
+    const titleWeight = isInline ? 'extraBold' : 'bold'

+    const subtitleSize = isInline ? 'normal' : 'small'
+    
    const containerClasses = CX({
      d: 1,
      cursorPointer: 1,
@@ -64,7 +67,7 @@ class UserStat extends React.PureComponent {
        onMouseEnter={this.handleOnMouseEnter}
        onMouseLeave={this.handleOnMouseLeave}
      >
-        <Text size={titleSize} weight='bold' color='brand' align={align}>
+        <Text size={titleSize} weight={titleWeight} color={titleColor} align={align}>
          {value}
        </Text>
        <Text size={subtitleSize} weight='medium' color='secondary' hasUnderline={hovering} align={align} className={subtitleClasses}>
--- a/app/javascript/gabsocial/components/video.js
+++ b/app/javascript/gabsocial/components/video.js
@@ -7,6 +7,7 @@ import { defineMessages, injectIntl } from 'react-intl'
 import { is } from 'immutable'
 import throttle from 'lodash.throttle'
 import { decode } from 'blurhash'
+import videojs from 'video.js'
 import { isFullscreen, requestFullscreen, exitFullscreen } from '../utils/fullscreen'
 import { isPanoramic, isPortrait, minimumAspectRatio, maximumAspectRatio } from '../utils/media_aspect_ratio'
 import {
@@ -24,10 +25,24 @@ import Icon from './icon'
 import SensitiveMediaItem from './sensitive_media_item'
 import Text from './text'

+import '!style-loader!css-loader!video.js/dist/video-js.min.css'
+
 // check every 100 ms for buffer
 const checkInterval = 100
 const FIXED_VAR = 6

+const videoJsOptions = {
+  autoplay: false,
+  playbackRates: [0.5, 1, 1.25, 1.5, 2],
+  width: 720,
+  height: 300,
+  controls: true,
+  sources: [{
+    // src: '//vjs.zencdn.net/v/oceans.mp4',
+    type: 'video/mp4',
+  }],
+};
+
 const formatTime = (secondsNum) => {
  if (isNaN(secondsNum)) secondsNum = 0

@@ -135,6 +150,13 @@ class Video extends ImmutablePureComponent {
    if ('pictureInPictureEnabled' in document) {
      this.setState({ pipAvailable: true })
    }
+
+    videoJsOptions.sources = [{ src: this.props.src }]
+    console.log("videoJsOptions:", videoJsOptions)
+    // instantiate video.js
+    this.videoPlayer = videojs(this.videoNode, videoJsOptions, function onPlayerReady() {
+      console.log('onPlayerReady', this)
+    })
  }

  componentWillUnmount() {
@@ -144,6 +166,10 @@ class Video extends ImmutablePureComponent {
    document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange, true)
    
    clearInterval(this.bufferCheckInterval)
+
+    if (this.videoPlayer) {
+      this.videoPlayer.dispose()
+    }
  }

  componentWillReceiveProps(nextProps) {
@@ -199,6 +225,7 @@ class Video extends ImmutablePureComponent {

  setVideoRef = (n) => {
    this.video = n
+    this.videoNode = n

    if (this.video) {
      const { volume, muted } = this.video
@@ -581,175 +608,34 @@ class Video extends ImmutablePureComponent {
      >

        <div className={overlayClasses} id='overlay'>
-          {
-            paused && !isBuffering &&
-            <Responsive min={BREAKPOINT_EXTRA_SMALL}>
-              <button
-                onClick={this.togglePlay}
-                className={[_s.d, _s.outlineNone, _s.cursorPointer, _s.aiCenter, _s.jcCenter, _s.posAbs, _s.bgBlackOpaque, _s.circle, _s.h60PX, _s.w60PX].join(' ')}
-              >
-                <Icon id='play' size='24px' className={_s.cWhite} />
-              </button>
-            </Responsive>
-          }
          {
            !paused && true &&
            <Icon id='loading' size='60px' className={[_s.d, _s.posAbs].join(' ')} />
          }
        </div>

-        <video
-          className={[_s.d, _s.h100PC, _s.w100PC, _s.outlineNone].join(' ')}
-          playsInline
-          ref={this.setVideoRef}
-          src={src}
-          poster={preview}
-          preload={preload}
-          role='button'
-          tabIndex='0'
-          aria-label={alt}
-          title={alt}
-          width={width}
-          height={height}
-          volume={volume}
-          onClick={this.togglePlay}
-          onPlay={this.handlePlay}
-          onPause={this.handlePause}
-          onTimeUpdate={this.handleTimeUpdate}
-          onLoadedData={this.handleLoadedData}
-          onProgress={this.handleProgress}
-          onVolumeChange={this.handleVolumeChange}
-        />
-
-        <div
-          className={volumeControlClasses}
-          onMouseDown={this.handleVolumeMouseDown}
-          onMouseEnter={this.handleMouseEnterVolumeControl}
-          onMouseLeave={this.handleMouseLeaveVolumeControl}
-          ref={this.setVolumeRef}
-        >
-          <div
-            className={[_s.d, _s.radiusSmall, _s.my10, _s.posAbs, _s.w4PX, _s.ml10, _s.bgPrimaryOpaque].join(' ')}
-            style={{
-              height: '102px',
-            }}
+        <div data-vjs-player>
+          <video
+            className={[_s.d, _s.h100PC, _s.w100PC, _s.outlineNone, 'video-js'].join(' ')}
+            ref={this.setVideoRef}
+            // playsInline
+            // poster={preview}
+            // preload={preload}
+            // role='button'
+            // tabIndex='0'
+            // aria-label={alt}
+            // title={alt}
+            // width={width}
+            // height={height}
+            // volume={volume}
+            // onClick={this.togglePlay}
+            // onPlay={this.handlePlay}
+            // onPause={this.handlePause}
+            // onTimeUpdate={this.handleTimeUpdate}
+            // onLoadedData={this.handleLoadedData}
+            // onProgress={this.handleProgress}
+            // onVolumeChange={this.handleVolumeChange}
          />
-          <div
-            className={[_s.d, _s.radiusSmall, _s.my10, _s.bottom0, _s.posAbs, _s.w4PX, _s.ml10, _s.bgPrimary].join(' ')}
-            style={{
-              height: `${volumeHeight}px`
-            }}
-          />
-          <span
-            className={[_s.d, _s.cursorPointer, _s.posAbs, _s.circle, _s.px5, _s.boxShadow1, _s.mbNeg5PX, _s.py5, _s.bgPrimary, _s.z3].join(' ')}
-            tabIndex='0'
-            style={{
-              marginLeft: '7px',
-              bottom: `${volumeHandleLoc}px`,
-            }}
-          />
-        </div>
-
-        <div className={videoControlsBackgroundClasses}>
-
-          <div
-            className={[_s.d, _s.cursorPointer, _s.h22PX, _s.videoPlayerSeek].join(' ')}
-            onMouseDown={this.handleMouseDown}
-            ref={this.setSeekRef}
-          >
-
-            <div className={[progressClasses, _s.bgLoading, _s.w100PC].join(' ')} />
-            <div className={[progressClasses, _s.bgSubtle].join(' ')} style={{ width: `${buffer}%` }} />
-            <div className={[progressClasses, _s.bgBrand].join(' ')} style={{ width: `${progress}%` }} />
-
-            <span
-              className={seekHandleClasses}
-              tabIndex='0'
-              style={{
-                left: `${progress}%`
-              }}
-            >
-              <span className={seekInnerHandleClasses} />
-            </span>
-          </div>
-
-          <div className={[_s.d, _s.flexRow, _s.aiCenter, _s.pb5, _s.noSelect].join(' ')}>
-            <Button
-              isNarrow
-              backgroundColor='none'
-              aria-label={intl.formatMessage(paused ? messages.play : messages.pause)}
-              onClick={this.togglePlay}
-              icon={paused ? 'play' : 'pause'}
-              title={paused ? 'Play' : 'Pause'}
-              iconSize='16px'
-              iconClassName={_s.cWhite}
-              className={_s.pl0}
-            />
-
-            <Button
-              isNarrow
-              backgroundColor='none'
-              type='button'
-              aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)}
-              onClick={this.toggleMute}
-              icon={muted ? 'audio-mute' : 'audio'}
-              iconSize='24px'
-              iconClassName={_s.cWhite}
-              className={[_s.px10, _s.mr10].join(' ')}
-              title='Volume'
-              onMouseEnter={this.handleMouseEnterAudio}
-              onMouseLeave={this.handleMouseLeaveAudio}
-            />
-            
-            <Text color='white' size='small'>
-              {formatTime(currentTime)}
-              &nbsp;/&nbsp;
-              {formatTime(duration)}
-            </Text>
-
-            <div className={[_s.d, _s.mlAuto, _s.flexRow, _s.aiCenter].join(' ')}>
-              <Button
-                isNarrow
-                backgroundColor='none'
-                aria-label={intl.formatMessage(messages.video_stats)}
-                onClick={this.handleOnClickSettings}
-                icon='cog'
-                iconSize='20px'
-                iconClassName={_s.cWhite}
-                className={[_s.px10, _s.pr0].join(' ')}
-                buttonRef={this.setSettingsBtnRef}
-                title='Video stats'
-              />
-              <Responsive min={BREAKPOINT_EXTRA_SMALL}>
-                {
-                  pipAvailable &&
-                  <Button
-                    isNarrow
-                    backgroundColor='none'
-                    aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)}
-                    onClick={this.togglePip}
-                    icon='copy'
-                    iconSize='20px'
-                    iconClassName={_s.cWhite}
-                    className={[_s.px10, _s.pr0].join(' ')}
-                    title='Picture in Picture'
-                  />
-                }
-              </Responsive>
-              <Button
-                isNarrow
-                backgroundColor='none'
-                aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)}
-                onClick={this.toggleFullscreen}
-                icon={fullscreen ? 'minimize-fullscreen' : 'fullscreen'}
-                title={fullscreen ? 'Minimize fullscreen' : 'Fullscreen'}
-                iconSize='20px'
-                iconClassName={_s.cWhite}
-                className={[_s.px10, _s.pr0].join(' ')}
-              />
-            </div>
-          </div>
-
        </div>

        {
--- a/app/javascript/gabsocial/constants.js
+++ b/app/javascript/gabsocial/constants.js
@@ -26,6 +26,7 @@ export const PLACEHOLDER_MISSING_HEADER_SRC = '/original/missing.png'

 export const POPOVER_CHAT_CONVERSATION_OPTIONS = 'CHAT_CONVERSATION_OPTIONS'
 export const POPOVER_CHAT_MESSAGE_OPTIONS = 'CHAT_MESSAGE_OPTIONS'
+export const POPOVER_CHAT_CONVERSATION_EXPIRATION_OPTIONS = 'CHAT_CONVERSATION_EXPIRATION_OPTIONS'
 export const POPOVER_COMMENT_SORTING_OPTIONS = 'COMMENT_SORTING_OPTIONS'
 export const POPOVER_COMPOSE_POST_DESTINATION = 'COMPOSE_POST_DESTINATION'
 export const POPOVER_DATE_PICKER = 'DATE_PICKER'
@@ -49,6 +50,7 @@ export const POPOVER_VIDEO_STATS = 'VIDEO_STATS'
 export const MODAL_ALBUM_CREATE = 'ALBUM_CREATE'
 export const MODAL_BLOCK_ACCOUNT = 'BLOCK_ACCOUNT'
 export const MODAL_BOOKMARK_COLLECTION_CREATE = 'BOOKMARK_COLLECTION_CREATE'
+export const MODAL_BOOKMARK_COLLECTION_EDIT = 'BOOKMARK_COLLECTION_EDIT'
 export const MODAL_BOOST = 'BOOST'
 export const MODAL_CHAT_CONVERSATION_CREATE = 'CHAT_CONVERSATION_CREATE'
 export const MODAL_CHAT_CONVERSATION_DELETE = 'CHAT_CONVERSATION_DELETE'
--- a/app/javascript/gabsocial/features/bookmark_collection_create.js
+++ b/app/javascript/gabsocial/features/bookmark_collection_create.js
@@ -2,9 +2,8 @@ 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 { createBookmarkCollection } from '../actions/bookmarks'
 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'
@@ -21,14 +20,13 @@ class BookmarkCollectionCreate extends React.PureComponent {
  }

  handleOnSubmit = () => {
-    this.props.onSubmit()
+    this.props.onSubmit(this.state.value)
  }

  render() {
-    const { disabled, isModal } = this.props
    const { value } = this.state

-    const isDisabled = !value || disabled
+    const isDisabled = !value

    return (
      <Form>
@@ -54,14 +52,10 @@ class BookmarkCollectionCreate extends React.PureComponent {

 }

-const mapStateToProps = (state) => ({
-  disabled: state.getIn(['listEditor', 'isSubmitting']),
-})
-
 const mapDispatchToProps = (dispatch, { isModal }) => ({
-  onSubmit() {
-    if (isModal) dispatch(closeModal(MODAL_LIST_CREATE))
-    dispatch(submitListEditor(true))
+  onSubmit(title) {
+    if (isModal) dispatch(closeModal())
+    dispatch(createBookmarkCollection(title))
  },
 })

@@ -70,4 +64,4 @@ BookmarkCollectionCreate.propTypes = {
  isModal: PropTypes.bool,
 }

-export default connect(mapStateToProps, mapDispatchToProps)(BookmarkCollectionCreate)
+export default connect(null, mapDispatchToProps)(BookmarkCollectionCreate)
--- a/app/javascript/gabsocial/features/bookmark_collection_edit.js
+++ b/app/javascript/gabsocial/features/bookmark_collection_edit.js
@@ -0,0 +1,100 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { defineMessages, injectIntl } from 'react-intl'
+import {
+  updateBookmarkCollection,
+  removeBookmarkCollection,
+} from '../actions/bookmarks'
+import { closeModal } from '../actions/modal'
+import Button from '../components/button'
+import Input from '../components/input'
+import Form from '../components/form'
+import Text from '../components/text'
+
+class BookmarkCollectionEdit extends React.PureComponent {
+
+  state = {
+    value: '',
+  }
+
+  componentDidMount() {
+    if (!this.props.bookmarkCollection) {
+      this.props.onFetchBookmarkCollection(this.props.bookmarkCollectionId)
+    }
+  }
+
+  onChange = (value) => {
+    this.setState({ value })
+  }
+
+  handleOnSubmit = () => {
+    this.props.onSubmit(this.state.value)
+  }
+
+  handleOnRemove = () => {
+    this.props.onRemove()
+  }
+
+  render() {
+    const { value } = this.state
+
+    const isDisabled = !value
+
+    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'>
+            Update
+          </Text>
+        </Button>
+
+        <Button
+          backgroundColor='danger'
+          color='white'
+          onClick={this.handleOnRemove}
+          className={[_s.mt10].join(' ')}
+        >
+          <Text color='inherit' align='center'>
+            Update
+          </Text>
+        </Button>
+      </Form>
+    )
+  }
+
+}
+
+const mapStateToProps = (state, { bookmarkCollectionId }) => ({
+  bookmarkCollection: state.getIn(['bookmark_collections', bookmarkCollectionId]),
+})
+
+const mapDispatchToProps = (dispatch, { isModal, bookmarkCollectionId }) => ({
+  onSubmit(title) {
+    if (isModal) dispatch(closeModal())
+    dispatch(updateBookmarkCollection(title))
+  },
+  onRemove() {
+    if (isModal) dispatch(closeModal())
+    dispatch(removeBookmarkCollection(bookmarkCollectionId))
+  },
+})
+
+BookmarkCollectionEdit.propTypes = {
+  onSubmit: PropTypes.func.isRequired,
+  onRemove: PropTypes.func.isRequired,
+  isModal: PropTypes.bool,
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(BookmarkCollectionEdit)
--- a/app/javascript/gabsocial/features/bookmark_collections.js
+++ b/app/javascript/gabsocial/features/bookmark_collections.js
@@ -29,19 +29,32 @@ class BookmarkCollections extends ImmutablePureComponent {

  render() {
    const {
+      isMyAccount,
      isLoading,
      isError,
      bookmarkCollections,
    } = this.props

+    if (!isMyAccount) {
+      return <ColumnIndicator type='missing' />
+    }
+
    if (isError) {
      return <ColumnIndicator type='error' message='Error fetching bookmark collections' />
    }

-    const listItems = [{ to: `/${meUsername}/bookmark_collections/bookmarks`, title: 'Bookmarks' }].concat(!!bookmarkCollections ? bookmarkCollections.map((s) => ({
-      to: s.get('to'),
-      title: s.get('title'),
-    })) : [])
+    console.log("bookmarkCollections:", bookmarkCollections)
+
+    let listItems = !!bookmarkCollections ? bookmarkCollections.map((b) => ({
+      to: `/${meUsername}/bookmark_collections/${b.get('id')}`,
+      title: b.get('title'),
+    })) : []
+    listItems = listItems.unshift({
+      to: `/${meUsername}/bookmark_collections/saved`,
+      title: 'Bookmarks',
+    })
+
+    console.log("listItems:", listItems)

    return (
      <Block>
@@ -69,10 +82,11 @@ class BookmarkCollections extends ImmutablePureComponent {

 }

-const mapStateToProps = (state) => ({
+const mapStateToProps = (state, { params: { username } }) => ({
+  isMyAccount: (username.toLowerCase() === meUsername.toLowerCase()),
  isError: state.getIn(['bookmark_collections', 'isError']),
  isLoading: state.getIn(['bookmark_collections', 'isLoading']),
-  shortcuts: state.getIn(['bookmark_collections', 'items']),
+  bookmarkCollections: state.getIn(['bookmark_collections', 'items']),
 })

 const mapDispatchToProps = (dispatch) => ({
--- a/app/javascript/gabsocial/features/bookmarked_statuses.js
+++ b/app/javascript/gabsocial/features/bookmarked_statuses.js
@@ -9,6 +9,9 @@ import { fetchBookmarkedStatuses, expandBookmarkedStatuses } from '../actions/bo
 import { meUsername } from '../initial_state'
 import StatusList from '../components/status_list'
 import ColumnIndicator from '../components/column_indicator'
+import Block from '../components/block'
+import Button from '../components/button'
+import Text from '../components/text'

 class BookmarkedStatuses extends ImmutablePureComponent {

@@ -32,15 +35,37 @@ class BookmarkedStatuses extends ImmutablePureComponent {
      return <ColumnIndicator type='missing' />
    }

+    console.log("statusIds:", statusIds)
+
    return (
-      <StatusList
-        statusIds={statusIds}
-        scrollKey='bookmarked_statuses'
-        hasMore={hasMore}
-        isLoading={isLoading}
-        onLoadMore={this.handleLoadMore}
-        emptyMessage={<FormattedMessage id='empty_column.bookmarked_statuses' defaultMessage="You don't have any bookmarked gabs yet. If you are GabPRO, when you bookmark one, it will show up here." />}
-      />
+      <div className={[_s.d, _s.w100PC].join(' ')}>
+        <Block>
+          <div className={[_s.d, _s.px15, _s.py10].join(' ')}>
+            <div className={[_s.d, _s.flexRow, _s.aiCenter].join(' ')}>
+              <Text size='extraLarge' weight='bold'>
+                Bookmarks:
+              </Text>
+              <Button
+                className={[_s.px10, _s.mlAuto].join(' ')}
+                onClick={this.handleOpenModal}
+                backgroundColor='tertiary'
+                color='tertiary'
+                icon='cog'
+              />
+            </div>
+          </div>
+        </Block>
+        <div className={[_s.d, _s.w100PC, _s.mt10].join(' ')}>
+          <StatusList
+            statusIds={statusIds}
+            scrollKey='bookmarked_statuses'
+            hasMore={hasMore}
+            isLoading={isLoading}
+            onLoadMore={this.handleLoadMore}
+            emptyMessage={<FormattedMessage id='empty_column.bookmarked_statuses' defaultMessage="You don't have any bookmarked gabs yet. If you are GabPRO, when you bookmark one, it will show up here." />}
+          />
+        </div>
+      </div>
    )
  }

@@ -49,9 +74,9 @@ class BookmarkedStatuses extends ImmutablePureComponent {
 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']),
+  statusIds: state.getIn(['status_lists', 'bookmarks', bookmarkCollectionId, 'items']),
+  isLoading: state.getIn(['status_lists', 'bookmarks', bookmarkCollectionId, 'isLoading'], true),
+  hasMore: !!state.getIn(['status_lists', 'bookmarks', bookmarkCollectionId, 'next']),
 })

 BookmarkedStatuses.propTypes = {
@@ -59,6 +84,7 @@ BookmarkedStatuses.propTypes = {
  statusIds: ImmutablePropTypes.list.isRequired,
  hasMore: PropTypes.bool,
  isLoading: PropTypes.bool,
+  bookmarkCollectionId: PropTypes.string,
  isMyAccount: PropTypes.bool.isRequired,
 }

--- a/app/javascript/gabsocial/features/compose/components/compose_form_submit_button.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_form_submit_button.js
@@ -15,7 +15,7 @@ import Text from '../../../components/text'
 class ComposeFormSubmitButton extends React.PureComponent {

  handleSubmit = () => {
-
+    this.props.onSubmit()
  }

  render() {
--- a/app/javascript/gabsocial/features/deck.js
+++ b/app/javascript/gabsocial/features/deck.js
@@ -201,7 +201,7 @@ class Deck extends React.PureComponent {
            <DeckColumn title='Compose' icon='pencil' noButtons>
              <WrappedBundle component={Compose} />
            </DeckColumn>
-            {
+            { /** : todo : */
              !isPro &&
              <DeckColumn title='Gab Deck for GabPRO' icon='pro' noButtons>
                <div className={[_s.d, _s.px15, _s.py15].join(' ')}>
--- a/app/javascript/gabsocial/features/introduction.js
+++ b/app/javascript/gabsocial/features/introduction.js
@@ -113,6 +113,7 @@ class SlidePhotos extends ImmutablePureComponent {
                  id='display-name'
                  title='Display name'
                  placeholder='Add your name...'
+                  maxLength={30}
                  value={displayNameValue}
                  onChange={this.handleDisplayNameChange}
                  onBlur={this.handleDisplayNameBlur}
--- a/app/javascript/gabsocial/features/messages/components/chat_message_compose_form.js
+++ b/app/javascript/gabsocial/features/messages/components/chat_message_compose_form.js
@@ -4,9 +4,15 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import { connect } from 'react-redux'
 import Textarea from 'react-textarea-autosize'
-import { openModal } from '../../../actions/modal'
+import { openPopover } from '../../../actions/popover'
+import { modal } from '../../../actions/modal'
 import { sendChatMessage } from '../../../actions/chat_messages'
-import { CX } from '../../../constants'
+import { me } from '../../../initial_state'
+import {
+  CX,
+  MODAL_PRO_UPGRADE,
+  POPOVER_CHAT_CONVERSATION_EXPIRATION_OPTIONS,
+} from '../../../constants'
 import Button from '../../../components/button'
 import Icon from '../../../components/icon'
 import Input from '../../../components/input'
@@ -25,7 +31,11 @@ class ChatMessagesComposeForm extends React.PureComponent {
  }

  handleOnExpire = () => {
-    //
+    if (this.props.isPro) {
+      this.props.onShowExpirePopover(this.expiresBtn)
+    } else {
+      this.props.onShowProModal()
+    }
  }

  onChange = (e) => {
@@ -181,16 +191,33 @@ class ChatMessagesComposeForm extends React.PureComponent {

 }

-const mapDispatchToProps = (dispatch) => ({
+const mapStateToProps = (state) => ({
+  isPro: state.getIn(['accounts', me, 'is_pro']),
+})
+
+const mapDispatchToProps = (dispatch, { chatConversationId }) => ({
  onSendChatMessage(text, chatConversationId) {
    dispatch(sendChatMessage(text, chatConversationId))
  },
+  onShowProModal() {
+    dispatch(openModal(MODAL_PRO_UPGRADE))
+  },
+  onShowExpirePopover(targetRef) {
+    dispatch(openPopover(POPOVER_CHAT_CONVERSATION_EXPIRATION_OPTIONS, {
+      targetRef,
+      chatConversationId,
+      position: 'top',
+    }))
+  }
 })

 ChatMessagesComposeForm.propTypes = {
  chatConversationId: PropTypes.string,
  isXS: PropTypes.bool,
-  onSendMessage: PropTypes.func.isRequired,
+  isPro: PropTypes.bool,
+  onSendChatMessage: PropTypes.func.isRequired,
+  onShowExpirePopover: PropTypes.func.isRequired,
+  onShowProModal: PropTypes.func.isRequired,
 }

-export default connect(null, mapDispatchToProps)(ChatMessagesComposeForm)
+export default connect(mapStateToProps, mapDispatchToProps)(ChatMessagesComposeForm)
--- a/app/javascript/gabsocial/features/ui/ui.js
+++ b/app/javascript/gabsocial/features/ui/ui.js
@@ -61,6 +61,7 @@ import {
  BlockedAccounts,
  BookmarkCollections,
  BookmarkCollectionCreate,
+  BookmarkCollectionEdit,
  BookmarkedStatuses,
  CaliforniaConsumerProtection,
  CaliforniaConsumerProtectionContact,
@@ -282,10 +283,11 @@ class SwitchingArea extends React.PureComponent {
        <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/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/bookmark_collections/:bookmarkCollectionId/edit' page={ModalPage} component={BookmarkCollectionEdit} content={children} componentParams={{ title: 'Edit Bookmark Collection', page: 'edit-bookmark-collection' }} />
+        <WrappedRoute path='/:username/bookmark_collections' page={ProfilePage} component={BookmarkCollections} content={children} />
+        
        <WrappedRoute path='/:username/posts/:statusId' publicRoute exact page={BasicPage} component={StatusFeature} content={children} componentParams={{ title: 'Status', page: 'status' }} />

        <WrappedRoute path='/:username/posts/:statusId/reposts' publicRoute page={ModalPage} component={StatusReposts} content={children} componentParams={{ title: 'Reposts' }} />
--- a/app/javascript/gabsocial/features/ui/util/async_components.js
+++ b/app/javascript/gabsocial/features/ui/util/async_components.js
@@ -11,6 +11,8 @@ export function BlockedAccounts() { return import(/* webpackChunkName: "features
 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 BookmarkCollectionEdit() { return import(/* webpackChunkName: "features/bookmark_collection_edit" */'../../bookmark_collection_edit') }
+export function BookmarkCollectionEditModal() { return import(/* webpackChunkName: "components/bookmark_collection_edit_modal" */'../../../components/modal/bookmark_collection_edit_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') }
@@ -21,6 +23,7 @@ export function ChatConversationCreateModal() { return import(/* webpackChunkNam
 export function ChatConversationDeleteModal() { return import(/* webpackChunkName: "components/chat_conversation_delete_modal" */'../../../components/modal/chat_conversation_delete_modal') }
 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 ChatConversationExpirationOptionsPopover() { return import(/* webpackChunkName: "components/chat_conversation_expiration_options_popover" */'../../../components/popover/chat_conversation_expiration_options_popover') }
 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') }
--- a/app/javascript/gabsocial/reducers/albums.js
+++ b/app/javascript/gabsocial/reducers/albums.js
@@ -1,7 +1,9 @@
 import {
-  BOOKMARK_COLLECTIONS_FETCH_REQUEST,
-  BOOKMARK_COLLECTIONS_FETCH_SUCCESS,
-  BOOKMARK_COLLECTIONS_FETCH_FAIL,
+  ALBUMS_FETCH_REQUEST,
+  ALBUMS_FETCH_SUCCESS,
+  ALBUMS_FETCH_FAIL,
+  ALBUMS_CREATE_SUCCESS,
+  ALBUMS_REMOVE_REQUEST,
 } from '../actions/bookmarks'
 import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable'

@@ -12,49 +14,32 @@ const initialState = ImmutableMap({
  isError: false,
 })

-const normalizeBookmarkCollection = (bookmarkCollection) => {
-  return {
-    id: shortcut.id,
-    shortcut_type: 'account',
-    shortcut_id: shortcut.shortcut_id,
-    title: shortcut.shortcut.acct,
-    image: shortcut.shortcut.avatar_static,
-    to: `/${shortcut.shortcut.acct}`,
-  }
-}
-
-const normalizeBookmarkCollections = (shortcuts) => {
-  return fromJS(shortcuts.map((shortcut) => {
-    return normalizeShortcut(shortcut)
-  }))
-}
-
 export default function albums(state = initialState, action) {
  switch(action.type) {
-    case SHORTCUTS_FETCH_REQUEST:
+    case ALBUMS_FETCH_REQUEST:
      return state.withMutations((map) => {
        map.set('isLoading', true)
        map.set('isFetched', false)
        map.set('isError', false)
      })
-    case SHORTCUTS_FETCH_SUCCESS:
+    case ALBUMS_FETCH_SUCCESS:
      return state.withMutations((map) => {
-        map.set('items', normalizeShortcuts(action.shortcuts))
+        map.set('items', fromJS(action.bookmarkCollections))
        map.set('isLoading', false)
        map.set('isFetched', true)
        map.set('isError', false)
      })
-    case SHORTCUTS_FETCH_FAIL:
+    case ALBUMS_FETCH_FAIL:
      return state.withMutations((map) => {
        map.set('isLoading', false)
        map.set('isFetched', true)
        map.set('isError', true)
      })
-    case BOOKMARK_COLLECTIONS_CREATE_REQUEST:
-      return state.update('items', list => list.push(fromJS(normalizeShortcut(action.shortcut))))
-    case BOOKMARK_COLLECTIONS_REMOVE_REQUEST:
+    case ALBUMS_CREATE_SUCCESS:
+      return state.update('items', list => list.push(fromJS(action.bookmarkCollection)))
+    case ALBUMS_REMOVE_REQUEST:
      return state.update('items', list => list.filterNot((item) => {
-        return `${item.get('id')}` === `${action.shortcutId}`
+        return item.get('id') === action.bookmarkCollectionId
      }))
    default:
      return state
--- a/app/javascript/gabsocial/reducers/bookmark_collections.js
+++ b/app/javascript/gabsocial/reducers/bookmark_collections.js
@@ -2,6 +2,8 @@ import {
  BOOKMARK_COLLECTIONS_FETCH_REQUEST,
  BOOKMARK_COLLECTIONS_FETCH_SUCCESS,
  BOOKMARK_COLLECTIONS_FETCH_FAIL,
+  BOOKMARK_COLLECTIONS_CREATE_SUCCESS,
+  BOOKMARK_COLLECTIONS_REMOVE_REQUEST,
 } from '../actions/bookmarks'
 import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable'

@@ -12,49 +14,32 @@ const initialState = ImmutableMap({
  isError: false,
 })

-const normalizeBookmarkCollection = (bookmarkCollection) => {
-  return {
-    id: shortcut.id,
-    shortcut_type: 'account',
-    shortcut_id: shortcut.shortcut_id,
-    title: shortcut.shortcut.acct,
-    image: shortcut.shortcut.avatar_static,
-    to: `/${shortcut.shortcut.acct}`,
-  }
-}
-
-const normalizeBookmarkCollections = (shortcuts) => {
-  return fromJS(shortcuts.map((shortcut) => {
-    return normalizeShortcut(shortcut)
-  }))
-}
-
 export default function bookmark_collections(state = initialState, action) {
  switch(action.type) {
-    case SHORTCUTS_FETCH_REQUEST:
+    case BOOKMARK_COLLECTIONS_FETCH_REQUEST:
      return state.withMutations((map) => {
        map.set('isLoading', true)
        map.set('isFetched', false)
        map.set('isError', false)
      })
-    case SHORTCUTS_FETCH_SUCCESS:
+    case BOOKMARK_COLLECTIONS_FETCH_SUCCESS:
      return state.withMutations((map) => {
-        map.set('items', normalizeShortcuts(action.shortcuts))
+        map.set('items', fromJS(action.bookmarkCollections))
        map.set('isLoading', false)
        map.set('isFetched', true)
        map.set('isError', false)
      })
-    case SHORTCUTS_FETCH_FAIL:
+    case BOOKMARK_COLLECTIONS_FETCH_FAIL:
      return state.withMutations((map) => {
        map.set('isLoading', false)
        map.set('isFetched', true)
        map.set('isError', true)
      })
-    case BOOKMARK_COLLECTIONS_CREATE_REQUEST:
-      return state.update('items', list => list.push(fromJS(normalizeShortcut(action.shortcut))))
+    case BOOKMARK_COLLECTIONS_CREATE_SUCCESS:
+      return state.update('items', list => list.push(fromJS(action.bookmarkCollection)))
    case BOOKMARK_COLLECTIONS_REMOVE_REQUEST:
      return state.update('items', list => list.filterNot((item) => {
-        return `${item.get('id')}` === `${action.shortcutId}`
+        return item.get('id') === action.bookmarkCollectionId
      }))
    default:
      return state
--- a/app/javascript/gabsocial/reducers/index.js
+++ b/app/javascript/gabsocial/reducers/index.js
@@ -2,6 +2,8 @@ import { combineReducers } from 'redux-immutable'
 import { loadingBarReducer } from 'react-redux-loading-bar'
 import accounts from './accounts'
 import accounts_counters from './accounts_counters'
+import albums from './albums'
+import bookmark_collections from './bookmark_collections'
 import chats from './chats'
 import chat_conversation_lists from './chat_conversation_lists'
 import chat_conversation_messages from './chat_conversation_messages'
@@ -52,6 +54,7 @@ import user_lists from './user_lists'
 const reducers = {
  accounts,
  accounts_counters,
+  bookmark_collections,
  chats,
  chat_conversation_lists,
  chat_conversation_messages,
--- a/app/javascript/gabsocial/reducers/status_lists.js
+++ b/app/javascript/gabsocial/reducers/status_lists.js
@@ -16,17 +16,16 @@ import {
 } from '../actions/bookmarks'
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';

+const initialMap = ImmutableMap({
+  next: null,
+  loaded: false,
+  isLoading: false,
+  items: ImmutableList(),
+})
+
 const initialState = ImmutableMap({
-  bookmarks: ImmutableMap({
-    next: null,
-    loaded: false,
-    items: ImmutableList(),
-  }),
-  favorites: ImmutableMap({
-    next: null,
-    loaded: false,
-    items: ImmutableList(),
-  }),
+  bookmarks: ImmutableMap(),
+  favorites: initialMap,
 });

 const normalizeList = (state, listType, statuses, next) => {
@@ -62,14 +61,30 @@ export default function statusLists(state = initialState, action) {
  switch (action.type) {
  case BOOKMARKED_STATUSES_FETCH_REQUEST:
  case BOOKMARKED_STATUSES_EXPAND_REQUEST:
-    return state.setIn(['bookmarks', 'isLoading'], true);
+    return state.updateIn(['bookmarks', action.bookmarkCollectionId], initialMap, map => map.set('isLoading', true))
  case BOOKMARKED_STATUSES_FETCH_FAIL:
  case BOOKMARKED_STATUSES_EXPAND_FAIL:
-    return state.setIn(['bookmarks', 'isLoading'], false);
+    return state.setIn(['bookmarks', action.bookmarkCollectionId, 'isLoading'], false);
  case BOOKMARKED_STATUSES_FETCH_SUCCESS:
-    return normalizeList(state, 'bookmarks', action.statuses, action.next);
+    console.log("BOOKMARKED_STATUSES_FETCH_SUCCESS:", action)
+    try {
+      return state.updateIn(['bookmarks', action.bookmarkCollectionId], listMap => listMap.withMutations(map => {
+        map.set('next', action.next);
+        map.set('loaded', true);
+        map.set('isLoading', false);
+        map.set('items', ImmutableList(action.statuses.map(item => item.id)));
+      })) 
+    } catch (error) {
+      console.log("error:", state, error)
+    }
+    return state
  case BOOKMARKED_STATUSES_EXPAND_SUCCESS:
-    return appendToList(state, 'bookmarks', action.statuses, action.next);
+    return state.updateIn(['bookmarks', action.bookmarkCollectionId], listMap => listMap.withMutations(map => {
+      map.set('next', action.next);
+      map.set('isLoading', false);
+      map.set('items', map.get('items').concat(action.statuses.map(item => item.id)));
+    }))
+
  case FAVORITED_STATUSES_FETCH_REQUEST:
  case FAVORITED_STATUSES_EXPAND_REQUEST:
    return state.setIn(['favorites', 'isLoading'], true);
--- a/app/javascript/gabsocial/reducers/user_lists.js
+++ b/app/javascript/gabsocial/reducers/user_lists.js
@@ -86,7 +86,6 @@ const initialState = ImmutableMap({
  blocks: ImmutableMap(),
  mutes: ImmutableMap(),
  chat_blocks: ImmutableMap(),
-  chat_mutes: ImmutableMap(),
  groups: ImmutableMap(),
  group_removed_accounts: ImmutableMap(),
  group_join_requests: ImmutableMap(),