Progress with DMs

2020-12-03 17:13:11 -05:00
parent a129b3ce3b
commit 137a36b810
53 changed files with 539 additions and 182 deletions
--- a/app/javascript/gabsocial/actions/chat_conversations.js
+++ b/app/javascript/gabsocial/actions/chat_conversations.js
@@ -13,6 +13,8 @@ export const CHAT_CONVERSATIONS_APPROVED_EXPAND_REQUEST = 'CHAT_CONVERSATIONS_AP
 export const CHAT_CONVERSATIONS_APPROVED_EXPAND_SUCCESS = 'CHAT_CONVERSATIONS_APPROVED_EXPAND_SUCCESS'
 export const CHAT_CONVERSATIONS_APPROVED_EXPAND_FAIL    = 'CHAT_CONVERSATIONS_APPROVED_EXPAND_FAIL'

+export const CHAT_CONVERSATION_APPROVED_UNREAD_COUNT_FETCH_SUCCESS = 'CHAT_CONVERSATIONS_APPROVED_EXPAND_FAIL'
+
 //

 export const CHAT_CONVERSATIONS_CREATE_REQUEST = 'CHAT_CONVERSATIONS_CREATE_REQUEST'
@@ -437,6 +439,20 @@ export const fetchChatConversationRequestedCount = () => (dispatch, getState) =>
  })
 }

+/**
+ * 
+ */
+export const fetchChatConversationUnreadCount = () => (dispatch, getState) => {
+  if (!me) return
+
+  api(getState).get('/api/v1/chat_conversations/approved_conversations/unread_count').then(response => {
+    dispatch({
+      type: CHAT_CONVERSATION_APPROVED_UNREAD_COUNT_FETCH_SUCCESS,
+      count: response.data,
+    })
+  })
+}
+
 /**
 * 
 */
--- a/app/javascript/gabsocial/actions/chat_messages.js
+++ b/app/javascript/gabsocial/actions/chat_messages.js
@@ -19,7 +19,7 @@ export const sendChatMessage = (text = '', chatConversationId) => (dispatch, get
  if (!me || !chatConversationId) return
  if (text.length === 0) return

-  dispatch(sendMessageRequest())
+  dispatch(sendChatMessageRequest(chatConversationId))

  api(getState).post('/api/v1/chat_messages', {
    text,
@@ -30,23 +30,23 @@ export const sendChatMessage = (text = '', chatConversationId) => (dispatch, get
    // },
  }).then((response) => {
    dispatch(importFetchedChatMessages([response.data]))
-    dispatch(sendMessageSuccess(response.data, chatConversationId))
+    dispatch(sendChatMessageSuccess(response.data))
  }).catch((error) => {
-    dispatch(sendMessageFail(error))
+    dispatch(sendChatMessageFail(error))
  })
 }

-const sendMessageRequest = () => ({
+const sendChatMessageRequest = (chatConversationId) => ({
  type: CHAT_MESSAGES_SEND_REQUEST,
-})
-
-const sendMessageSuccess = (chatMessage, chatConversationId) => ({
-  type: CHAT_MESSAGES_SEND_SUCCESS,
-  chatMessage,
  chatConversationId,
 })

-const sendMessageFail = (error) => ({
+export const sendChatMessageSuccess = (chatMessage) => ({
+  type: CHAT_MESSAGES_SEND_SUCCESS,
+  chatMessage,
+})
+
+const sendChatMessageFail = (error) => ({
  type: CHAT_MESSAGES_SEND_FAIL,
  error,
 })
@@ -54,32 +54,32 @@ const sendMessageFail = (error) => ({
 /**
 * 
 */
-const deleteMessage = (chatMessageId) => (dispatch, getState) => {
+export const deleteChatMessage = (chatMessageId) => (dispatch, getState) => {
  if (!me || !chatMessageId) return

-  dispatch(deleteMessageRequest(chatMessageId))
+  dispatch(deleteChatMessageRequest(chatMessageId))

  api(getState).delete(`/api/v1/chat_messages/${chatMessageId}`, {}, {
    // headers: {
    //   'Idempotency-Key': getState().getIn(['chat_compose', 'idempotencyKey']),
    // },
  }).then((response) => {
-    deleteMessageSuccess(response)
+    dispatch(deleteChatMessageSuccess(response.data))
  }).catch((error) => {
-    dispatch(deleteMessageFail(error))
+    dispatch(deleteChatMessageFail(error))
  })
 }

-const deleteMessageRequest = (chatMessageId) => ({
+const deleteChatMessageRequest = (chatMessageId) => ({
  type: CHAT_MESSAGES_DELETE_REQUEST,
  chatMessageId,
 })

-const deleteMessageSuccess = () => ({
+const deleteChatMessageSuccess = () => ({
  type: CHAT_MESSAGES_DELETE_SUCCESS,
 })

-const deleteMessageFail = (error) => ({
+const deleteChatMessageFail = (error) => ({
  type: CHAT_MESSAGES_DELETE_FAIL,
  error,
 })
--- a/app/javascript/gabsocial/actions/streaming.js
+++ b/app/javascript/gabsocial/actions/streaming.js
@@ -6,6 +6,7 @@ import {
  updateTimelineQueue,
 } from './timelines'
 import { updateNotificationsQueue } from './notifications'
+import { sendChatMessageSuccess } from './chat_messages'
 import { fetchFilters } from './filters'
 import { getLocale } from '../locales'
 import { handleComposeSubmit } from './compose'
@@ -76,17 +77,15 @@ export const connectUserStream = () => connectTimelineStream('home', 'user')
 * 
 */
 export const connectChatMessagesStream = (accountId) => {
-  return connectStream(`chat_messages:${accountId}`, null, (dispatch, getState) => {
+  return connectStream(`chat_messages`, null, (dispatch, getState) => {
    return {
-      onConnect() {
-        // console.log("chat messages connected")
-      },
-      onDisconnect() {
-        // console.log("chat messages disconnected")
-      },
+      onConnect() {},
+      onDisconnect() {},
      onReceive (data) {
-        // : todo :
-        console.log("chat messages onReceive:", data)
+        if (!data['event'] || !data['payload']) return
+        if (data.event === 'notification') {
+          dispatch(sendChatMessageSuccess(JSON.parse(data.payload)))
+        }
      },
    }
  })
--- a/app/javascript/gabsocial/components/list_item.js
+++ b/app/javascript/gabsocial/components/list_item.js
@@ -81,6 +81,7 @@ class ListItem extends React.PureComponent {
    const textContainerClasses = CX({
      d: 1,
      pr5: 1,
+      w100PC: hideArrow,
      maxW100PC42PX: !hideArrow || showActive,
    })

--- a/app/javascript/gabsocial/components/navigation_bar/default_navigation_bar.js
+++ b/app/javascript/gabsocial/components/navigation_bar/default_navigation_bar.js
@@ -67,6 +67,8 @@ class DefaultNavigationBar extends ImmutablePureComponent {
      account,
      noActions,
      logoDisabled,
+      unreadChatsCount,
+      notificationCount,
    } = this.props

    const navigationContainerClasses = CX({
@@ -171,7 +173,8 @@ class DefaultNavigationBar extends ImmutablePureComponent {

                    <div className={[_s.d, _s.h20PX, _s.w1PX, _s.mr10, _s.ml10, _s.bgNavigationBlend].join(' ')} />

-                    <NavigationBarButton attrTitle='Notifications' icon='notifications' to='/notifications' />
+                    <NavigationBarButton attrTitle='Notifications' icon='notifications' to='/notifications' count={notificationCount} />
+                    <NavigationBarButton attrTitle='Chats' icon='chat' to='/messages' count={unreadChatsCount} />
                    <NavigationBarButton attrTitle='Dark/Muted/Light/White Mode' icon='light-bulb' onClick={this.handleOnClickLightBulb} />

                    <div className={[_s.d, _s.h20PX, _s.w1PX, _s.mr10, _s.ml10, _s.bgNavigationBlend].join(' ')} />
@@ -236,6 +239,7 @@ class DefaultNavigationBar extends ImmutablePureComponent {
                        attrTitle={action.attrTitle}
                        title={action.title}
                        icon={action.icon}
+                        count={action.count}
                        to={action.to || undefined}
                        onClick={action.onClick ? () => action.onClick() : undefined}
                        key={`action-btn-${i}`}
@@ -261,6 +265,8 @@ const mapStateToProps = (state) => ({
  emailConfirmationResends: state.getIn(['user', 'emailConfirmationResends'], 0),
  theme: state.getIn(['settings', 'displayOptions', 'theme'], DEFAULT_THEME),
  logoDisabled: state.getIn(['settings', 'displayOptions', 'logoDisabled'], false),
+  notificationCount: state.getIn(['notifications', 'unread']),
+  unreadChatsCount: state.getIn(['chats', 'chatsUnreadCount']),
 })

 const mapDispatchToProps = (dispatch) => ({
@@ -288,6 +294,8 @@ DefaultNavigationBar.propTypes = {
  tabs: PropTypes.array,
  title: PropTypes.string,
  showBackBtn: PropTypes.bool,
+  notificationCount: PropTypes.number.isRequired,
+  unreadChatsCount: PropTypes.number.isRequired,
  onOpenNavSettingsPopover: PropTypes.func.isRequired,
  onOpenEmailModal: PropTypes.func.isRequired,
  onResendUserConfirmationEmail: PropTypes.func.isRequired,
--- a/app/javascript/gabsocial/components/navigation_bar_button.js
+++ b/app/javascript/gabsocial/components/navigation_bar_button.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { shortNumberFormat } from '../utils/numbers'
 import { CX } from '../constants'
 import Button from './button'
 import Icon from './icon'
@@ -53,17 +54,22 @@ class NavigationBarButton extends React.PureComponent {

    const countClasses = CX({
      d: 1,
+      text: 1,
+      textAlignCenter: 1,
+      minW20PX: 1,
+      mlAuto: 1,
      fs12PX: 1,
-      posAbs: 1,
+      px5: 1,
+      mr2: 1,
+      lineHeight15: 1,
+      ml5: 1,
+      cWhite: 1,
+      rightNeg5PX: 1,
      top0: 1,
-      mt15: 1,
-      right0: 1,
-      mr5: 1,
-      h4PX: 1,
-      w4PX: 1,
-      cBrand: 1,
-      bgNavigationBlend: 1,
-      radiusSmall: 1,
+      mt5: 1,
+      bgRed: 1,
+      posAbs: 1,
+      circle: 1,
    })

    const iconContainerClasses = CX({
@@ -112,7 +118,9 @@ class NavigationBarButton extends React.PureComponent {
        }
        {
          !title && count > 0 &&
-          <span className={countClasses} />
+          <span className={countClasses}>
+            {shortNumberFormat(count)}
+          </span>
        }
      </Button>
    )
--- a/app/javascript/gabsocial/components/popover/chat_conversation_options_popover.js
+++ b/app/javascript/gabsocial/components/popover/chat_conversation_options_popover.js
@@ -0,0 +1,113 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { connect } from 'react-redux'
+import { closePopover } from '../../actions/popover'
+import { openModal } from '../../actions/modal'
+import { MODAL_PRO_UPGRADE } from '../../constants'
+import { me } from '../../initial_state'
+import { makeGetChatConversation } from '../../selectors'
+import { changeSetting, saveSettings } from '../../actions/settings'
+import PopoverLayout from './popover_layout'
+import List from '../list'
+
+class ChatConversationOptionsPopover extends ImmutablePureComponent {
+
+  handleOnBlock = () => {
+    //
+  }
+
+  handleOnHide = () => {
+
+  }
+
+  handleOnMute = () => {
+
+  }
+
+  handleOnPurge = () => {
+    if (!this.props.isPro) {
+      this.props.openProUpgradeModal()
+    } else {
+      // 
+    }
+  }
+
+  handleOnClosePopover = () => {
+    this.props.onClosePopover()
+  }
+
+  render() {
+    const {
+      intl,
+      isXS,
+    } = this.props
+
+    const items = [
+      {
+        hideArrow: true,
+        title: 'Block Messenger',
+        subtitle: 'The messenger will not be able to message you.',
+        onClick: () => this.handleOnBlock(),
+      },
+      {
+        hideArrow: true,
+        title: 'Mute Messenger',
+        subtitle: 'You will not be notified of new messsages',
+        onClick: () => this.handleOnMute(),
+      },
+      {
+        hideArrow: true,
+        title: 'Hide Conversation',
+        subtitle: 'Hide until next message',
+        onClick: () => this.handleOnHide(),
+      },
+      {},
+      {
+        hideArrow: true,
+        title: 'Purge messages',
+        subtitle: 'Remove all of your messages in this conversation',
+        onClick: () => this.handleOnPurge(),
+      },
+    ]
+
+    return (
+      <PopoverLayout
+        width={220}
+        isXS={isXS}
+        onClose={this.handleOnClosePopover}
+      >
+        <List
+          size={isXS ? 'large' : 'small'}
+          scrollKey='chat_conversation_options'
+          items={items}
+        />
+      </PopoverLayout>
+    )
+  }
+}
+
+const mapStateToProps = (state, { chatConversationId }) => ({
+  isPro: state.getIn(['accounts', me, 'is_pro']),
+  chatConversation: makeGetChatConversation()(state, { id: chatConversationId }),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  openProUpgradeModal() {
+    dispatch(openModal(MODAL_PRO_UPGRADE))
+  },
+  onSetCommentSortingSetting(type) {
+    dispatch(closePopover())
+  },
+  onClosePopover: () => dispatch(closePopover()),
+})
+
+ChatConversationOptionsPopover.propTypes = {
+  isXS: PropTypes.bool,
+  isPro: PropTypes.bool.isRequired,
+  chatConversation: ImmutablePropTypes.map,
+  onClosePopover: PropTypes.func.isRequired,
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChatConversationOptionsPopover)
--- a/app/javascript/gabsocial/components/popover/chat_message_delete_popover.js
+++ b/app/javascript/gabsocial/components/popover/chat_message_delete_popover.js
@@ -0,0 +1,54 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { closePopover } from '../../actions/popover'
+import { deleteChatMessage } from '../../actions/chat_messages'
+import PopoverLayout from './popover_layout'
+import Button from '../button'
+import Text from '../text'
+
+class ChatMessageDeletePopover extends React.PureComponent {
+
+  handleOnClick = () => {
+    this.props.onDeleteChatMessage(this.props.chatMessageId)
+  }
+
+  handleOnClosePopover = () => {
+    this.props.onClosePopover()
+  }
+
+  render() {
+    const { isXS } = this.props
+
+    return (
+      <PopoverLayout
+        width={96}
+        isXS={isXS}
+        onClose={this.handleOnClosePopover}
+      >
+        <Button
+          onClick={this.handleOnClick}
+          color='primary'
+          backgroundColor='tertiary'
+          className={[_s.radiusSmall].join(' ')}
+        >
+          <Text align='center' color='inherit'>Remove</Text>
+        </Button>
+      </PopoverLayout>
+    )
+  }
+}
+
+const mapDispatchToProps = (dispatch) => ({
+  onDeleteChatMessage(chatMessageId) {
+    dispatch(deleteChatMessage(chatMessageId))
+  },
+})
+
+ChatMessageDeletePopover.propTypes = {
+  isXS: PropTypes.bool,
+  chatMessageId: PropTypes.string.isRequired,
+  onDeleteChatMessage: PropTypes.func.isRequired,
+}
+
+export default connect(null, mapDispatchToProps)(ChatMessageDeletePopover)
--- a/app/javascript/gabsocial/components/popover/popover_root.js
+++ b/app/javascript/gabsocial/components/popover/popover_root.js
@@ -1,5 +1,7 @@
 import {
  BREAKPOINT_EXTRA_SMALL,
+  POPOVER_CHAT_CONVERSATION_OPTIONS,
+  POPOVER_CHAT_MESSAGE_DELETE,
  POPOVER_COMMENT_SORTING_OPTIONS,
  POPOVER_DATE_PICKER,
  POPOVER_EMOJI_PICKER,
@@ -20,6 +22,8 @@ import {
  POPOVER_VIDEO_STATS,
 } from '../../constants'
 import {
+  ChatConversationOptionsPopover,
+  ChatMessageDeletePopover,
  CommentSortingOptionsPopover,
  DatePickerPopover,
  EmojiPickerPopover,
@@ -53,25 +57,28 @@ import LoadingPopover from './loading_popover'

 const initialState = getWindowDimension()

-const POPOVER_COMPONENTS = {}
-POPOVER_COMPONENTS[POPOVER_COMMENT_SORTING_OPTIONS] = CommentSortingOptionsPopover
-POPOVER_COMPONENTS[POPOVER_DATE_PICKER] = DatePickerPopover
-POPOVER_COMPONENTS[POPOVER_EMOJI_PICKER] = EmojiPickerPopover
-POPOVER_COMPONENTS[POPOVER_GROUP_LIST_SORT_OPTIONS] = GroupListSortOptionsPopover
-POPOVER_COMPONENTS[POPOVER_GROUP_MEMBER_OPTIONS] = GroupMemberOptionsPopover
-POPOVER_COMPONENTS[POPOVER_GROUP_OPTIONS] = GroupOptionsPopover
-POPOVER_COMPONENTS[POPOVER_GROUP_TIMELINE_SORT_OPTIONS] = GroupTimelineSortOptionsPopover
-POPOVER_COMPONENTS[POPOVER_GROUP_TIMELINE_SORT_TOP_OPTIONS] = GroupTimelineSortTopOptionsPopover
-POPOVER_COMPONENTS[POPOVER_NAV_SETTINGS] = NavSettingsPopover
-POPOVER_COMPONENTS[POPOVER_PROFILE_OPTIONS] = ProfileOptionsPopover
-POPOVER_COMPONENTS[POPOVER_SIDEBAR_MORE] = SidebarMorePopover
-POPOVER_COMPONENTS[POPOVER_STATUS_OPTIONS] = StatusOptionsPopover
-POPOVER_COMPONENTS[POPOVER_STATUS_EXPIRATION_OPTIONS] = StatusExpirationOptionsPopover
-POPOVER_COMPONENTS[POPOVER_STATUS_SHARE] = StatusSharePopover
-POPOVER_COMPONENTS[POPOVER_STATUS_VISIBILITY] = StatusVisibilityPopover
-POPOVER_COMPONENTS[POPOVER_TIMELINE_INJECTION_OPTIONS] = TimelineInjectionOptionsPopover
-POPOVER_COMPONENTS[POPOVER_USER_INFO] = UserInfoPopover
-POPOVER_COMPONENTS[POPOVER_VIDEO_STATS] = VideoStatsPopover
+const POPOVER_COMPONENTS = {
+  [POPOVER_CHAT_CONVERSATION_OPTIONS]: ChatConversationOptionsPopover,
+  [POPOVER_CHAT_MESSAGE_DELETE]: ChatMessageDeletePopover,
+  [POPOVER_COMMENT_SORTING_OPTIONS]: CommentSortingOptionsPopover,
+  [POPOVER_DATE_PICKER]: DatePickerPopover,
+  [POPOVER_EMOJI_PICKER]: EmojiPickerPopover,
+  [POPOVER_GROUP_LIST_SORT_OPTIONS]: GroupListSortOptionsPopover,
+  [POPOVER_GROUP_MEMBER_OPTIONS]: GroupMemberOptionsPopover,
+  [POPOVER_GROUP_OPTIONS]: GroupOptionsPopover,
+  [POPOVER_GROUP_TIMELINE_SORT_OPTIONS]: GroupTimelineSortOptionsPopover,
+  [POPOVER_GROUP_TIMELINE_SORT_TOP_OPTIONS]: GroupTimelineSortTopOptionsPopover,
+  [POPOVER_NAV_SETTINGS]: NavSettingsPopover,
+  [POPOVER_PROFILE_OPTIONS]: ProfileOptionsPopover,
+  [POPOVER_SIDEBAR_MORE]: SidebarMorePopover,
+  [POPOVER_STATUS_OPTIONS]: StatusOptionsPopover,
+  [POPOVER_STATUS_EXPIRATION_OPTIONS]: StatusExpirationOptionsPopover,
+  [POPOVER_STATUS_SHARE]: StatusSharePopover,
+  [POPOVER_STATUS_VISIBILITY]: StatusVisibilityPopover,
+  [POPOVER_TIMELINE_INJECTION_OPTIONS]: TimelineInjectionOptionsPopover,
+  [POPOVER_USER_INFO]: UserInfoPopover,
+  [POPOVER_VIDEO_STATS]: VideoStatsPopover,
+}

 class PopoverRoot extends React.PureComponent {

--- a/app/javascript/gabsocial/components/sidebar/default_sidebar.js
+++ b/app/javascript/gabsocial/components/sidebar/default_sidebar.js
@@ -54,6 +54,7 @@ class DefaultSidebar extends ImmutablePureComponent {
      title,
      showBackBtn,
      shortcuts,
+      unreadChatsCount,
    } = this.props
    const { hoveringShortcuts } = this.state

@@ -82,7 +83,7 @@ class DefaultSidebar extends ImmutablePureComponent {
        </SidebarSectionTitle>
        <SidebarSectionItem title='Home' icon='home' to='/home' count={homeItemsQueueCount} />
        <SidebarSectionItem title='Notifications' icon='notifications' to='/notifications' count={notificationCount} />
-        <SidebarSectionItem title='Chats' icon='chat' to='/messages' />
+        <SidebarSectionItem title='Chats' icon='chat' to='/messages' count={unreadChatsCount} />
        <SidebarSectionItem title='Groups' icon='group' to='/groups' />
        <SidebarSectionItem title='Lists' icon='list' to='/lists' />
        <SidebarSectionItem title='Explore' icon='explore' to='/explore' />
@@ -151,6 +152,7 @@ const mapStateToProps = (state) => ({
  shortcuts: state.getIn(['shortcuts', 'items']),
  moreOpen: state.getIn(['popover', 'popoverType']) === 'SIDEBAR_MORE',
  notificationCount: state.getIn(['notifications', 'unread']),
+  unreadChatsCount: state.getIn(['chats', 'chatsUnreadCount']),
  homeItemsQueueCount: state.getIn(['timelines', 'home', 'totalQueuedItemsCount']),
 })

@@ -170,6 +172,7 @@ DefaultSidebar.propTypes = {
  openSidebarMorePopover: PropTypes.func.isRequired,
  notificationCount: PropTypes.number.isRequired,
  homeItemsQueueCount: PropTypes.number.isRequired,
+  unreadChatsCount: PropTypes.number.isRequired,
  actions: PropTypes.array,
  tabs: PropTypes.array,
  title: PropTypes.string,
--- a/app/javascript/gabsocial/components/sidebar_section_item.js
+++ b/app/javascript/gabsocial/components/sidebar_section_item.js
@@ -45,7 +45,7 @@ class SidebarSectionItem extends React.PureComponent {
    const iconSize = '16px'
    const currentPathname = noRouter ? '' : this.context.router.route.location.pathname
    const shouldShowActive = hovering || active || currentPathname === to || currentPathname === href
-    const isNotifications = to === '/notifications'
+    const isHighlighted = ['/notifications', '/messages'].indexOf(to) > -1

    const containerClasses = CX({
      d: 1,
@@ -67,16 +67,18 @@ class SidebarSectionItem extends React.PureComponent {
    const countClasses = CX({
      d: 1,
      text: 1,
+      textAlignCenter: 1,
+      minW20PX: 1,
      mlAuto: 1,
      fs12PX: 1,
      px5: 1,
      mr2: 1,
      lineHeight15: 1,
      ml5: 1,
-      cSecondary: !isNotifications,
-      cWhite: isNotifications,
-      bgBrand: isNotifications,
-      radiusSmall: isNotifications,
+      cSecondary: !isHighlighted,
+      cWhite: isHighlighted,
+      bgRed: isHighlighted,
+      circle: isHighlighted,
    })

    return (
--- a/app/javascript/gabsocial/constants.js
+++ b/app/javascript/gabsocial/constants.js
@@ -22,6 +22,8 @@ export const URL_GAB_PRO = 'https://pro.gab.com'

 export const PLACEHOLDER_MISSING_HEADER_SRC = '/original/missing.png'

+export const POPOVER_CHAT_CONVERSATION_OPTIONS = 'CHAT_CONVERSATION_OPTIONS'
+export const POPOVER_CHAT_MESSAGE_DELETE = 'CHAT_MESSAGE_DELETE'
 export const POPOVER_COMMENT_SORTING_OPTIONS = 'COMMENT_SORTING_OPTIONS'
 export const POPOVER_DATE_PICKER = 'DATE_PICKER'
 export const POPOVER_EMOJI_PICKER = 'EMOJI_PICKER'
--- a/app/javascript/gabsocial/containers/gabsocial.js
+++ b/app/javascript/gabsocial/containers/gabsocial.js
@@ -11,6 +11,7 @@ import { ScrollContext } from 'react-router-scroll-4'
 import { IntlProvider, addLocaleData } from 'react-intl'
 import { fetchCustomEmojis } from '../actions/custom_emojis'
 import { fetchPromotions } from '../actions/promotions'
+import { fetchChatConversationUnreadCount } from '../actions/chat_conversations'
 import { hydrateStore } from '../actions/store'
 import { MIN_ACCOUNT_CREATED_AT_ONBOARDING } from '../constants'
 import {
@@ -35,6 +36,7 @@ const hydrateAction = hydrateStore(initialState)
 store.dispatch(hydrateAction)
 store.dispatch(fetchCustomEmojis())
 store.dispatch(fetchPromotions())
+store.dispatch(fetchChatConversationUnreadCount())

 const mapStateToProps = (state) => ({
  accountCreatedAt: !!me ? state.getIn(['accounts', me, 'created_at']) : undefined,
--- a/app/javascript/gabsocial/features/messages/components/chat_conversations_list.js
+++ b/app/javascript/gabsocial/features/messages/components/chat_conversations_list.js
@@ -17,7 +17,6 @@ import ScrollableList from '../../../components/scrollable_list'
 class ChatConversationsList extends ImmutablePureComponent {

  componentDidMount() {
-    console.log("componentDidMount:", this.props.source)
    this.props.onFetchChatConversations(this.props.source)
  }

@@ -33,8 +32,6 @@ class ChatConversationsList extends ImmutablePureComponent {
      chatConversationIds,
    } = this.props

-    console.log("---source:", source, chatConversationIds)
-
    return (
      <div className={[_s.d, _s.w100PC, _s.overflowHidden, _s.boxShadowNone].join(' ')}>
        <ScrollableList
--- a/app/javascript/gabsocial/features/messages/components/chat_conversations_list_item.js
+++ b/app/javascript/gabsocial/features/messages/components/chat_conversations_list_item.js
@@ -61,7 +61,9 @@ class ChatConversationsListItem extends ImmutablePureComponent {
    const avatarSize = 46
    const otherAccounts = chatConversation.get('other_accounts')
    const lastMessage = chatConversation.get('last_chat_message', null)
-    const content = { __html: !!lastMessage ? lastMessage.get('text', '') : '' }
+    let lastMessageText = !!lastMessage ? lastMessage.get('text', '') : ''
+    lastMessageText = lastMessageText.length >= 28 ? `${lastMessageText.substring(0, 28).trim()}...` : lastMessageText
+    const content = { __html: lastMessageText }
    const date = !!lastMessage ? lastMessage.get('created_at') : chatConversation.get('created_at')

    return (
--- a/app/javascript/gabsocial/features/messages/components/chat_message_compose_form.js
+++ b/app/javascript/gabsocial/features/messages/components/chat_message_compose_form.js
@@ -9,6 +9,7 @@ import { sendChatMessage } from '../../../actions/chat_messages'
 import { CX } from '../../../constants'
 import Button from '../../../components/button'
 import Input from '../../../components/input'
+import Text from '../../../components/text'

 class ChatMessagesComposeForm extends React.PureComponent {

@@ -90,13 +91,13 @@ class ChatMessagesComposeForm extends React.PureComponent {
      maxH200PX: 1,
      borderColorSecondary: 1,
      border1PX: 1,
-      radiusSmall: 1,
+      radiusRounded: 1,
      py10: 1,
    })

    return (
-      <div className={[_s.d, _s.posAbs, _s.bottom0, _s.left0, _s.right0, _s.flexRow, _s.aiCenter, _s.minH58PX, _s.bgPrimary, _s.w100PC, _s.borderTop1PX, _s.borderColorSecondary, _s.px15, _s.py5].join(' ')}>
-        <div className={[_s.d, _s.pr15, _s.flexGrow1].join(' ')}>
+      <div className={[_s.d, _s.posAbs, _s.bottom0, _s.left0, _s.right0, _s.flexRow, _s.aiCenter, _s.minH58PX, _s.bgPrimary, _s.w100PC, _s.borderTop1PX, _s.borderColorSecondary, _s.px15].join(' ')}>
+        <div className={[_s.d, _s.pr15, _s.flexGrow1, _s.py10].join(' ')}>
          <Textarea
            id='chat-message-compose-input'
            inputRef={this.setTextbox}
@@ -112,12 +113,12 @@ class ChatMessagesComposeForm extends React.PureComponent {
            aria-autocomplete='list'
          />
        </div>
-        <div className={[_s.d, _s.h100PC, _s.mtAuto, _s.pb5].join(' ')}>
+        <div className={[_s.d, _s.h100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
          <Button
            disabled={disabled}
            onClick={this.handleOnSendChatMessage}
          >
-            Send
+            <Text color='inherit' className={_s.px10}>Send</Text>
          </Button>
        </div>
      </div>
--- a/app/javascript/gabsocial/features/messages/components/chat_message_header.js
+++ b/app/javascript/gabsocial/features/messages/components/chat_message_header.js
@@ -4,9 +4,11 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import { connect } from 'react-redux'
 import { makeGetChatConversation } from '../../../selectors'
-import { openModal } from '../../../actions/modal'
+import { openPopover } from '../../../actions/popover'
 import { approveChatConversationRequest } from '../../../actions/chat_conversations'
-import { MODAL_CHAT_CONVERSATION_CREATE } from '../../../constants'
+import {
+  POPOVER_CHAT_CONVERSATION_OPTIONS
+} from '../../../constants'
 import Button from '../../../components/button'
 import AvatarGroup from '../../../components/avatar_group'
 import DisplayName from '../../../components/display_name'
@@ -18,6 +20,14 @@ class ChatMessageHeader extends React.PureComponent {
    this.props.onApproveChatConversationRequest(this.props.chatConversationId)
  }

+  handleOnOpenChatConversationOptionsPopover = () => {
+    this.props.onOpenChatConversationOptionsPopover(this.props.chatConversationId, this.optionsBtnRef)
+  }
+
+  setOptionsBtnRef = (c) => {
+    this.optionsBtnRef = c
+  }
+
  render () {
    const { chatConversation } = this.props
    
@@ -37,8 +47,9 @@ class ChatMessageHeader extends React.PureComponent {
          </React.Fragment>
        }
        <Button
+          buttonRef={this.setOptionsBtnRef}
          isNarrow
-          onClick={undefined}
+          onClick={this.handleOnOpenChatConversationOptionsPopover}
          color='primary'
          backgroundColor='secondary'
          className={[_s.mlAuto, _s.px5].join(' ')}
@@ -68,17 +79,22 @@ const mapStateToProps = (state, { chatConversationId }) => ({
 })

 const mapDispatchToProps = (dispatch) => ({
-  onOpenChatConversationCreateModal() {
-    dispatch(openModal(MODAL_CHAT_CONVERSATION_CREATE))
-  },
  onApproveChatConversationRequest(chatConversationId) {
    dispatch(approveChatConversationRequest(chatConversationId))
-  }
+  },
+  onOpenChatConversationOptionsPopover(chatConversationId, targetRef) {
+    dispatch(openPopover(POPOVER_CHAT_CONVERSATION_OPTIONS, {
+      chatConversationId,
+      targetRef,
+      position: 'bottom',
+    }))
+  },
 })

 ChatMessageHeader.propTypes = {
-  onOpenChatConversationCreateModal: PropTypes.func.isRequired,
  chatConversationId: PropTypes.string,
+  onApproveChatConversationRequest: PropTypes.func.isRequired,
+  onOpenChatConversationOptionsPopover: PropTypes.func.isRequired,
 }

 export default connect(mapStateToProps, mapDispatchToProps)(ChatMessageHeader)
--- a/app/javascript/gabsocial/features/messages/components/chat_message_item.js
+++ b/app/javascript/gabsocial/features/messages/components/chat_message_item.js
@@ -5,7 +5,11 @@ import moment from 'moment-mini'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import { NavLink } from 'react-router-dom'
-import { CX } from '../../../constants'
+import { openPopover } from '../../../actions/popover'
+import {
+  CX,
+  POPOVER_CHAT_MESSAGE_DELETE,
+ } from '../../../constants'
 import { me } from '../../../initial_state'
 import Input from '../../../components/input'
 import Avatar from '../../../components/avatar'
@@ -47,7 +51,11 @@ class ChatMessageItem extends ImmutablePureComponent {
  }

  handleMoreClick = () => {
-    //
+    this.props.onOpenChatMessageDeletePopover(this.props.chatMessageId, this.deleteBtnRef)
+  }
+
+  setDeleteBtnRef = (c) => {
+    this.deleteBtnRef = c
  }

  render() {
@@ -65,6 +73,8 @@ class ChatMessageItem extends ImmutablePureComponent {
    if (!chatMessage) return <div />

    const account = chatMessage.get('account')
+    if (!account) return <div />
+
    const content = { __html: chatMessage.get('text') }
    const alt = account.get('id', null) === me
    const createdAt = chatMessage.get('created_at')
@@ -89,9 +99,10 @@ class ChatMessageItem extends ImmutablePureComponent {
      d: 1,
      px15: 1,
      py5: 1,
-      bgTertiary: !alt,
-      bgSecondary: alt,
-      circle: 1,
+      maxW80PC: 1,
+      bgTertiary: alt,
+      bgSecondary: !alt,
+      radiusRounded: 1,
      ml10: 1,
      mr10: 1,
    })
@@ -138,6 +149,7 @@ class ChatMessageItem extends ImmutablePureComponent {
              alt &&
              <div className={buttonContainerClasses}>
                <Button
+                  buttonRef={this.setDeleteBtnRef}
                  onClick={this.handleMoreClick}
                  color='tertiary'
                  backgroundColor='none'
@@ -165,15 +177,25 @@ const mapStateToProps = (state, { lastChatMessageId, chatMessageId }) => ({
  lastChatMessageSameSender: lastChatMessageId ? state.getIn(['chat_messages', `${lastChatMessageId}`, 'from_account_id'], null) === state.getIn(['chat_messages', `${chatMessageId}`, 'from_account_id'], null) : false,
 })

+const mapDispatchToProps = (dispatch) => ({
+  onOpenChatMessageDeletePopover(chatMessageId, targetRef) {
+    dispatch(openPopover(POPOVER_CHAT_MESSAGE_DELETE, {
+      targetRef,
+      chatMessageId,
+      position: 'top',
+    }))
+  },
+})
+
 ChatMessageItem.propTypes = {
  intl: PropTypes.object.isRequired,
  lastChatMessageId: PropTypes.string,
  lastChatMessageDate: PropTypes.string,
-  lastChatMessageSameSender: PropTypes.string,
+  lastChatMessageSameSender: PropTypes.bool,
  chatMessageId: PropTypes.string.isRequired,
  chatMessage: ImmutablePropTypes.map,
  isHidden: PropTypes.bool,
  alt: PropTypes.bool,
 }

-export default connect(mapStateToProps)(ChatMessageItem)
+export default connect(mapStateToProps, mapDispatchToProps)(ChatMessageItem)
--- a/app/javascript/gabsocial/features/ui/ui.js
+++ b/app/javascript/gabsocial/features/ui/ui.js
@@ -208,7 +208,7 @@ class SwitchingArea extends React.PureComponent {
        <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/:conversationId' exact page={MessagesPage} component={Messages} content={children} componentParams={{ source: 'approved' }} />
+        <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' }} />
        <WrappedRoute path='/timeline/pro' exact page={ProPage} component={ProTimeline} content={children} componentParams={{ title: 'Pro Feed' }} />
--- a/app/javascript/gabsocial/features/ui/util/async_components.js
+++ b/app/javascript/gabsocial/features/ui/util/async_components.js
@@ -12,7 +12,9 @@ export function ChatConversationCreate() { return import(/* webpackChunkName: "f
 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 ChatMessageDeletePopover() { return import(/* webpackChunkName: "components/chat_message_delete_popover" */'../../../components/popover/chat_message_delete_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') }
--- a/app/javascript/gabsocial/layouts/messages_layout.js
+++ b/app/javascript/gabsocial/layouts/messages_layout.js
@@ -41,8 +41,6 @@ class MessagesLayout extends React.PureComponent {
      jcEnd: 1,
    })

-    console.log("currentConversationIsRequest:",currentConversationIsRequest)
-
    return (
      <Layout
        showBackBtn
--- a/app/javascript/gabsocial/pages/home_page.js
+++ b/app/javascript/gabsocial/pages/home_page.js
@@ -70,6 +70,7 @@ class HomePage extends React.PureComponent {
      intl,
      isPro,
      totalQueuedItemsCount,
+      unreadChatsCount,
    } = this.props
    const { lazyLoaded } = this.state

@@ -80,6 +81,11 @@ class HomePage extends React.PureComponent {
        page='home'
        title={title}
        actions={[
+          {
+            icon: 'chat',
+            to: '/messages',
+            count: unreadChatsCount,
+          },
          {
            icon: 'search',
            to: '/search',
@@ -117,6 +123,7 @@ const messages = defineMessages({

 const mapStateToProps = (state) => ({
  totalQueuedItemsCount: state.getIn(['timelines', 'home', 'totalQueuedItemsCount']),
+  unreadChatsCount: state.getIn(['chats', 'chatsUnreadCount']),
  isPro: state.getIn(['accounts', me, 'is_pro']),
 })

@@ -125,6 +132,7 @@ HomePage.propTypes = {
  dispatch: PropTypes.func.isRequired,
  intl: PropTypes.object.isRequired,
  isPro: PropTypes.bool,
+  unreadChatsCount: PropTypes.number.isRequired,
  totalQueuedItemsCount: PropTypes.number.isRequired,
 }

--- a/app/javascript/gabsocial/pages/messages_page.js
+++ b/app/javascript/gabsocial/pages/messages_page.js
@@ -1,10 +1,23 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import isObject from 'lodash.isobject'
+import { setChatConversationSelected } from '../actions/chats'
 import PageTitle from '../features/ui/util/page_title'
 import MessagesLayout from '../layouts/messages_layout'

 class MessagesPage extends React.PureComponent {

+
+  componentDidMount() {
+    if (isObject(this.props.params)) {
+      const { chatConversationId } = this.props.params
+      if (chatConversationId) {
+        this.props.dispatch(setChatConversationSelected(chatConversationId))   
+      }
+    }
+  }
+
  render() {
    const {
      children,
@@ -34,4 +47,4 @@ MessagesPage.propTypes = {
  source: PropTypes.string,
 }

-export default MessagesPage
+export default connect()(MessagesPage)
--- a/app/javascript/gabsocial/reducers/chat_conversation_messages.js
+++ b/app/javascript/gabsocial/reducers/chat_conversation_messages.js
@@ -97,8 +97,10 @@ export default function chat_conversation_messages(state = initialState, action)
  case CHAT_CONVERSATION_MESSAGES_EXPAND_SUCCESS:
    return expandNormalizedChatConversation(state, action.chatConversationId, fromJS(action.chatMessages), action.next, action.partial, action.isLoadingRecent)
  case CHAT_MESSAGES_SEND_SUCCESS:
-    return updateChatMessageConversation(state, action.chatConversationId, fromJS(action.chatMessage))
-  // CHAT_MESSAGES_DELETE_REQUEST
+    return updateChatMessageConversation(state, action.chatMessage.chat_conversation_id, fromJS(action.chatMessage))
+  case CHAT_MESSAGES_DELETE_REQUEST:
+    // : todo : 
+    return state
  default:
    return state
  }
--- a/app/javascript/gabsocial/reducers/chat_conversations.js
+++ b/app/javascript/gabsocial/reducers/chat_conversations.js
@@ -4,6 +4,10 @@ import {
  fromJS,
 } from 'immutable'
 import { me } from '../initial_state'
+import {
+  CHAT_MESSAGES_SEND_SUCCESS,
+  CHAT_MESSAGES_DELETE_REQUEST,
+} from '../actions/chat_messages'
 import { 
  CHAT_CONVERSATIONS_APPROVED_FETCH_SUCCESS,
  CHAT_CONVERSATIONS_APPROVED_EXPAND_SUCCESS,
@@ -22,6 +26,10 @@ export const normalizeChatConversation = (chatConversation) => {
  })
 }

+const setLastChatMessage = (state, chatMessage) => {
+  return state.setIn([chatMessage.chat_conversation_id, 'last_chat_message'], fromJS(chatMessage))
+}
+
 const importChatConversation = (state, chatConversation) => state.set(chatConversation.chat_conversation_id, normalizeChatConversation(chatConversation))

 const importChatConversations = (state, chatConversations) => {
@@ -37,6 +45,11 @@ export default function chat_conversations(state = initialState, action) {
  case CHAT_CONVERSATIONS_REQUESTED_FETCH_SUCCESS:
  case CHAT_CONVERSATIONS_REQUESTED_EXPAND_SUCCESS:
    return importChatConversations(state, action.chatConversations)
+  case CHAT_MESSAGES_SEND_SUCCESS:
+    return setLastChatMessage(state, action.chatMessage)
+  case CHAT_MESSAGES_DELETE_REQUEST:
+    // : todo : set last conversation message to one prior to this one
+    return state
  default:
    return state
  }
--- a/app/javascript/gabsocial/reducers/chats.js
+++ b/app/javascript/gabsocial/reducers/chats.js
@@ -9,11 +9,10 @@ import {
  SET_CHAT_CONVERSATION_SELECTED,
 } from '../actions/chats'
 import {
+  CHAT_CONVERSATION_APPROVED_UNREAD_COUNT_FETCH_SUCCESS,
  CHAT_CONVERSATION_REQUESTED_COUNT_FETCH_SUCCESS,
 } from '../actions/chat_conversations'
 import { 
-  CHAT_MESSAGES_SEND_SUCCESS,
-  CHAT_MESSAGES_DELETE_REQUEST,
  CHAT_MESSAGES_FETCH_SUCCESS,
  CHAT_CONVERSATION_MESSAGES_EXPAND_SUCCESS,
 } from '../actions/chat_messages'
@@ -22,6 +21,7 @@ const initialState = ImmutableMap({
  createChatConversationSuggestionIds: ImmutableList(),
  selectedChatConversationId: null,
  chatConversationRequestCount: 0,
+  chatsUnreadCount: 0,
 })

 export default function chats(state = initialState, action) {
@@ -32,6 +32,8 @@ export default function chats(state = initialState, action) {
    return state.set('selectedChatConversationId', action.chatConversationId)
  case CHAT_CONVERSATION_REQUESTED_COUNT_FETCH_SUCCESS:
    return state.set('chatConversationRequestCount', action.count)
+  case CHAT_CONVERSATION_APPROVED_UNREAD_COUNT_FETCH_SUCCESS:
+    return state.set('chatsUnreadCount', action.count)
  default:
    return state
  }
--- a/app/javascript/gabsocial/stream.js
+++ b/app/javascript/gabsocial/stream.js
@@ -43,7 +43,6 @@ export function connectStream(path, pollingRefresh = null, callbacks = () => ({
      },

      received(data) {
-        console.log("received:", data)
        onReceive(data);
      },