From 20d25aa40b4bcba46d7994a92551d21af2b0ae34 Mon Sep 17 00:00:00 2001
From: 1aerostorm <aerostorm1@gmail.com>
Date: Thu, 17 Oct 2024 10:32:41 +0300
Subject: [PATCH] HF 30 - Private groups - Mentions, replies, fix mark messages

---
 package.json                                  |   4 +-
 .../messages/AuthorDropdown/index.jsx         |   4 +-
 .../ConversationListItem.css                  |   5 +
 .../messages/ConversationListItem/index.jsx   |  25 ++-
 .../elements/messages/Message/Message.css     |   8 +
 .../elements/messages/Message/index.jsx       |  26 ++-
 .../modules/groups/GroupMembers.jsx           |   3 +
 src/components/modules/groups/MyGroups.jsx    |   5 +
 src/components/pages/Messages.jsx             | 151 +++++++++++++-----
 src/locales/en.json                           |  10 ++
 src/locales/ru-RU.json                        |  10 ++
 src/redux/FetchDataSaga.js                    |  23 +--
 src/redux/GlobalReducer.js                    |  46 ++++--
 src/redux/TransactionSaga.js                  |   4 +-
 src/utils/MessageUtils.js                     |  26 ++-
 src/utils/Normalizators.js                    |  38 +++--
 src/utils/groups.js                           |  16 +-
 src/utils/mentions.js                         |  18 +++
 yarn.lock                                     |   8 +-
 19 files changed, 327 insertions(+), 103 deletions(-)
 create mode 100644 src/utils/mentions.js

diff --git a/package.json b/package.json
index a1d54ed33..347170cb5 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "emoji-picker-element": "^1.10.1",
     "formik": "./git-deps/formik/packages/formik",
     "git-rev-sync": "^3.0.2",
-    "golos-lib-js": "^0.9.75",
+    "golos-lib-js": "^0.9.76",
     "history": "4.10.1",
     "immutable": "^4.0.0",
     "koa": "^2.13.4",
@@ -73,7 +73,7 @@
   "scripts": {
     "preinstall": "node git-install.js",
     "cordova": "cordova",
-    "dev": "cross-env HTTPS=true react-app-rewired start",
+    "dev": "cross-env react-app-rewired start",
     "dev:server": "nodemon server",
     "build": "react-app-rewired build",
     "prod": "NODE_ENV=production node server/index.js",
diff --git a/src/components/elements/messages/AuthorDropdown/index.jsx b/src/components/elements/messages/AuthorDropdown/index.jsx
index b7253adf0..10d046744 100644
--- a/src/components/elements/messages/AuthorDropdown/index.jsx
+++ b/src/components/elements/messages/AuthorDropdown/index.jsx
@@ -61,10 +61,12 @@ class AuthorDropdown extends React.Component {
         let banBtn
         if (isModer) {
             const isBanned = authorAcc && authorAcc.member_type === 'banned'
+            const isOwner = the_group && the_group.owner === author
             banBtn = <button className={cn('button hollow small btn', {
                 alert: !isBanned,
                 banned: isBanned,
-            })} onClick={e => this.btnClick(e, isBanned)} disabled={this.state.submitting}>
+                disabled: isOwner,
+            })} disabled={isOwner} onClick={e => this.btnClick(e, isBanned)} disabled={this.state.submitting}>
                 <Icon name='ionicons/ban' />
                 <span className='title'>{isBanned ? tt('group_members_jsx.unban') :
                     tt('group_members_jsx.ban')}</span>
diff --git a/src/components/elements/messages/ConversationListItem/ConversationListItem.css b/src/components/elements/messages/ConversationListItem/ConversationListItem.css
index 20e7c582e..11346a85f 100644
--- a/src/components/elements/messages/ConversationListItem/ConversationListItem.css
+++ b/src/components/elements/messages/ConversationListItem/ConversationListItem.css
@@ -54,6 +54,11 @@
     text-align: center;
 }
 
+.conversation-unread.mention:not(.mine) {
+    background-color: #007aff;
+    margin-left: 8px;
+}
+
 .conversation-unread.mine {
     float: right;
     color: #007aff;
diff --git a/src/components/elements/messages/ConversationListItem/index.jsx b/src/components/elements/messages/ConversationListItem/index.jsx
index fe2b33ecd..391452424 100644
--- a/src/components/elements/messages/ConversationListItem/index.jsx
+++ b/src/components/elements/messages/ConversationListItem/index.jsx
@@ -64,7 +64,7 @@ export default class ConversationListItem extends React.Component {
 
     render() {
         const { selected } = this.props;
-        const { avatar, isSystemMessage, contact, last_message, size, unread_donate } = this.props.data;
+        const { avatar, isSystemMessage, contact, last_message, size, unread_donate, kind } = this.props.data;
 
         const link = this.makeLink();
 
@@ -84,12 +84,31 @@ export default class ConversationListItem extends React.Component {
                 unread = (<div className='conversation-unread mine'>●</div>);
         }
 
-        const unreadMessages = size && size.unread_inbox_messages;
+        let title = ''
+
+        const unreadMessages = size && size.unread_inbox_messages
+        const unreadMentions = size && size.unread_mentions
 
         if (!unread && unreadMessages) {
             unread = (<div className='conversation-unread'>
                 {unreadMessages}
             </div>)
+            if (kind === 'group') {
+                title += tt('plurals.reply_count', { count: unreadMessages })
+            }
+        }
+
+        if (unreadMentions) {
+            unread = <React.Fragment>
+                <div className='conversation-unread mention'>
+                    {unreadMentions}
+                </div>
+                {unread}
+            </React.Fragment>
+            if (kind === 'group') {
+                if (title) title += ', '
+                title += tt('plurals.mention_count', { count: unreadMentions })
+            }
         }
 
         let checkmark
@@ -100,7 +119,7 @@ export default class ConversationListItem extends React.Component {
         }
 
         return (
-            <Link to={isSystemMessage ? null : link} className={'conversation-list-item' + (selected ? ' selected' : '')}>
+            <Link to={isSystemMessage ? null : link} className={'conversation-list-item' + (selected ? ' selected' : '')} title={title}>
                 {this._renderAvatar()}
                 <div className='conversation-info'>
                     <h1 className='conversation-title'>{contact}{checkmark}</h1>
diff --git a/src/components/elements/messages/Message/Message.css b/src/components/elements/messages/Message/Message.css
index a874a7d8b..c235da713 100644
--- a/src/components/elements/messages/Message/Message.css
+++ b/src/components/elements/messages/Message/Message.css
@@ -44,6 +44,9 @@
     text-decoration: underline;
     font-weight: bold;
 }
+.msgs-message .bubble-container a.mention {
+    text-decoration: none;
+}
 
 .msgs-message.mine .bubble-container {
     justify-content: flex-end;
@@ -92,6 +95,11 @@
     color: white;
 }
 
+.msgs-message.highlight .bubble-container .bubble {
+    background: #fc544e !important;
+    color: white;
+}
+
 .msgs-message.mine .bubble-container .bubble {
     background: #007aff;
     color: white;
diff --git a/src/components/elements/messages/Message/index.jsx b/src/components/elements/messages/Message/index.jsx
index 692b7bf39..37c1d8a7e 100644
--- a/src/components/elements/messages/Message/index.jsx
+++ b/src/components/elements/messages/Message/index.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {connect} from 'react-redux'
 import { Fade } from 'react-foundation-components/lib/global/fade'
 import { LinkWithDropdown } from 'react-foundation-components/lib/global/dropdown'
+import { Link } from 'react-router-dom'
 import tt from 'counterpart';
 import cn from 'classnames'
 import { Asset } from 'golos-lib-js/lib/utils'
@@ -9,11 +10,18 @@ import { Asset } from 'golos-lib-js/lib/utils'
 import AuthorDropdown from 'app/components/elements/messages/AuthorDropdown'
 import Donating from 'app/components/elements/messages/Donating'
 import Userpic from 'app/components/elements/Userpic'
+import { session } from 'app/redux/UserSaga'
+import { accountNameRegEx } from 'app/utils/mentions'
 import { displayQuoteMsg } from 'app/utils/MessageUtils';
 import { proxifyImageUrl } from 'app/utils/ProxifyUrl';
 import './Message.css';
 
 class Message extends React.Component {
+    constructor(props) {
+        super(props)
+        this.dropdown = React.createRef()
+    }
+
     onMessageSelect = (idx, event) => {
         if (this.props.onMessageSelect) {
             const { data, selected } = this.props;
@@ -26,6 +34,8 @@ class Message extends React.Component {
     };
 
     render() {
+        let username
+
         const {
             idx,
             data,
@@ -72,6 +82,11 @@ class Message extends React.Component {
                     } else if (word.length <= 2 && /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/.test(word)) {
                         spans.push(<span key={key++} style={{fontSize: '20px'}}>{word}</span>);
                         spans.push(' ');
+                    } else if (word.length > 3 && accountNameRegEx.test(word)) {
+                        const sess = session.load()
+                        if (sess && !username) username = sess[0]
+                        spans.push(<Link className='mention' to={('@' + username === word) ? '/' : '/' + word} key={key} tabIndex='-1' onClick={this.doNotSelectMessage}>{word}</Link>)
+                        spans.push(' ')
                     } else {
                         spans.push(word + ' ');
                     }
@@ -115,7 +130,11 @@ class Message extends React.Component {
             if (startsSequence) {
                 author = <div className={cn('author', {
                     banned: isBanned
-                })}>
+                })} onClick={(e) => {
+                    e.preventDefault()
+                    e.stopPropagation()
+                    this.dropdown.current.click()
+                }}>
                     {from}
                 </div>
 
@@ -125,7 +144,8 @@ class Message extends React.Component {
                     dropdownContent={<AuthorDropdown author={from} />}
                     transition={Fade}
                 >
-                    <Userpic account={from} title={'@' + from} width={32} height={32}
+                    <span style={{ display: 'none' }} ref={this.dropdown}></span>
+                    <Userpic account={from} width={32} height={32}
                         disabled={isBanned} />
                 </LinkWithDropdown>
             }
@@ -143,7 +163,7 @@ class Message extends React.Component {
                 `${isMine ? 'mine' : ''}`,
                 `${startsSequence ? 'start' : ''}`,
                 `${endsSequence ? 'end' : ''}`
-            ].join(' ')}>
+            ].join(' ')} id={'msgs-' + data.nonce}>
                 {
                     showTimestamp &&
                         <div className='timestamp'>
diff --git a/src/components/modules/groups/GroupMembers.jsx b/src/components/modules/groups/GroupMembers.jsx
index 633b88108..3bbde6f79 100644
--- a/src/components/modules/groups/GroupMembers.jsx
+++ b/src/components/modules/groups/GroupMembers.jsx
@@ -11,6 +11,7 @@ import AccountName from 'app/components/elements/common/AccountName'
 import Input from 'app/components/elements/common/Input';
 import GroupMember from 'app/components/elements/groups/GroupMember'
 import LoadingIndicator from 'app/components/elements/LoadingIndicator'
+import MarkNotificationRead from 'app/components/elements/MarkNotificationRead'
 import { getRoleInGroup, getGroupMeta, getGroupTitle } from 'app/utils/groups'
 
 export async function validateMembersStep(values, errors) {
@@ -253,6 +254,8 @@ class GroupMembers extends React.Component {
                         {this._renderMemberTypeSwitch()}
                     </div>
                 </div>}
+                {(username && showPendings) ? <MarkNotificationRead fields='join_request' account={username}
+                /> : null}
             </div>
         }
 
diff --git a/src/components/modules/groups/MyGroups.jsx b/src/components/modules/groups/MyGroups.jsx
index a9a588e65..f818bf340 100644
--- a/src/components/modules/groups/MyGroups.jsx
+++ b/src/components/modules/groups/MyGroups.jsx
@@ -12,6 +12,7 @@ import user from 'app/redux/UserReducer'
 import DropdownMenu from 'app/components/elements/DropdownMenu'
 import Icon from 'app/components/elements/Icon'
 import LoadingIndicator from 'app/components/elements/LoadingIndicator'
+import MarkNotificationRead from 'app/components/elements/MarkNotificationRead'
 import { showLoginDialog } from 'app/components/dialogs/LoginDialog'
 import { getGroupLogo, getGroupMeta, getRoleInGroup } from 'app/utils/groups'
 
@@ -244,6 +245,8 @@ class MyGroups extends React.Component {
             </div>
         }
 
+        const { username } = this.props
+
         return <div className='MyGroups'>
                <div className='row'>
                    <h3>{tt('my_groups_jsx.title')}</h3>
@@ -251,6 +254,8 @@ class MyGroups extends React.Component {
                {button}
                {groups}
                {hasGroups ? <div style={{ height: '50px' }}></div> : null}
+                {username ? <MarkNotificationRead fields='group_member' account={username}
+                /> : null}
         </div>
     }
 }
diff --git a/src/components/pages/Messages.jsx b/src/components/pages/Messages.jsx
index c503fbaef..aa6608a67 100644
--- a/src/components/pages/Messages.jsx
+++ b/src/components/pages/Messages.jsx
@@ -29,6 +29,7 @@ import g from 'app/redux/GlobalReducer'
 import transaction from 'app/redux/TransactionReducer'
 import user from 'app/redux/UserReducer'
 import { getRoleInGroup, opGroup } from 'app/utils/groups'
+import { parseMentions } from 'app/utils/mentions'
 import { getProfileImage, } from 'app/utils/NormalizeProfile';
 import { normalizeContacts, normalizeMessages, cacheMyOwnMsg } from 'app/utils/Normalizators';
 import { fitToPreview } from 'app/utils/ImageUtils';
@@ -53,7 +54,7 @@ class Messages extends React.Component {
         };
         this.cachedProfileImages = {};
         this.windowFocused = true;
-        this.newMessages = 0;
+        this.newMessages = {}
         if (process.env.MOBILE_APP) {
             this.stopService()
         }
@@ -71,21 +72,80 @@ class Messages extends React.Component {
         return the_group ? the_group.name : ''
     }
 
-    markMessages() {
-        const { messages } = this.state;
-        if (!messages.length) return;
+    scrollToMention = () => {
+        const { username } = this.props
+        const { messages } = this.state
+        //alert('scrollToMention ' + messages.length)
+        let nonce
+        for (const msg of messages) {
+            console.log(msg.read_date)
+            if (msg.to === username && msg.read_date && msg.read_date.startsWith('1970')) {
+                nonce = msg.nonce
+                break
+            }
+            if (msg.mentions && msg.mentions.includes(username)) {
+                nonce = msg.nonce
+            }
+        }
+        if (nonce) {
+            const msgEl = document.getElementById('msgs-' + nonce)
+            if (msgEl) {
+                msgEl.scrollIntoView({ block: 'center' })
+                const bubEl = msgEl.querySelector('.bubble')
+                let oldTrans
+                if (bubEl) {
+                    oldTrans = bubEl.style.transition
+                }
+                msgEl.classList.toggle('highlight')
+                setTimeout(() => {
+                    bubEl.style.transition = '0.5s'
+                    if (msgEl) msgEl.classList.remove('highlight')
+                    setTimeout(() => {
+                        if (bubEl) bubEl.style.transition = oldTrans
+                    }, 1000)
+                }, 500)
+            }
+        }
+    }
+
+    markMessages = () => {
+        const { messages } = this.props
+        if (!messages || !messages.size) return
+
+        const msgs = messages.toJS()
 
         const { account, accounts, } = this.props;
         const to = this.getToAcc()
 
-        let OPERATIONS = golos.messages.makeDatedGroups(messages, (message_object, idx) => {
-            return message_object.toMark && !message_object._offchain;
+        const isGroup = this.isGroup()
+
+        let OPERATIONS = golos.messages.makeDatedGroups(msgs, (msg, idx) => {
+            if (msg._offchain) return false
+            if (msg.read_date.startsWith('19')) {
+                if (!isGroup) {
+                    return msg.to === account.name
+                } else {
+                    if (msg.to === account.name) return true
+                }
+            }
+            if (isGroup && msg.mentions.includes(account.name)) {
+                return true
+            }
+            return false
         }, (group, indexes, results) => {
-            const json = JSON.stringify(['private_mark_message', {
-                from: accounts[to].name,
-                to: account.name,
+            const op = {
+                from: isGroup ? '' : accounts[to].name,
+                to: isGroup ? '' : account.name,
                 ...group,
-            }]);
+            }
+            if (isGroup) {
+                op.extensions = [[0, {
+                    group: to,
+                    requester: account.name,
+                    mentions: [account.name],
+                }]]
+            }
+            const json = JSON.stringify(['private_mark_message', op])
             return ['custom_json',
                 {
                     id: 'private_message',
@@ -93,25 +153,26 @@ class Messages extends React.Component {
                     json,
                 }
             ];
-        }, messages.length - 1, -1);
+        }, 0, msgs.length);
 
         this.props.sendOperations(account, accounts[to], OPERATIONS);
     }
 
-    markMessages2 = debounce(this.markMessages, 1000);
+    markMessages2 = debounce(this.markMessages, 1000)
 
-    flashMessage() {
-        ++this.newMessages;
+    flashMessage(nonce) {
+        this.newMessages[nonce] = true
 
-        let title = this.newMessages;
-        const plural = this.newMessages % 10;
+        const count = Object.keys(this.newMessages).length
+        let title = count
+        const plural = count % 10
 
         if (plural === 1) {
-            if (this.newMessages === 11)
+            if (count === 11)
                 title += tt('messages.new_message5');
             else
                 title += tt('messages.new_message1');
-        } else if ((plural === 2 || plural === 3 || plural === 4) && (this.newMessages < 10 || this.newMessages > 20)) {
+        } else if ((plural === 2 || plural === 3 || plural === 4) && (count < 10 || count > 20)) {
             title += tt('messages.new_message234');
         } else {
             title += tt('messages.new_message5');
@@ -220,18 +281,20 @@ class Messages extends React.Component {
                     //alert(scope + ' ' + type + op +' ' + timestamp)
                     const isDonate = type === 'donate'
                     const toAcc = this.getToAcc()
-                    const group = opGroup(op)
+                    const { group } = opGroup(op)
                     let updateMessage = group === this.state.to || (!group && (op.from === toAcc || 
                         op.to === toAcc))
                     const isMine = username === op.from;
                     if (type === 'private_message') {
                         if (op.update) {
                             this.props.messageEdited(op, timestamp, updateMessage, isMine);
-                        } else if (this.nonce !== op.nonce) {
-                            this.props.messaged(op, timestamp, updateMessage, isMine);
-                            this.nonce = op.nonce
-                            if (!isMine && !this.windowFocused) {
-                                this.flashMessage();
+                        } else {
+                            this.props.messaged(op, timestamp, updateMessage, isMine, username)
+                            if (this.nonce !== op.nonce) {
+                                this.nonce = op.nonce
+                                if (!isMine && !this.windowFocused) {
+                                    this.flashMessage(op.nonce)
+                                }
                             }
                         }
                     } else if (type === 'private_delete_message') {
@@ -348,6 +411,9 @@ class Messages extends React.Component {
                     messagesCount: messages.size,
                 }, () => {
                     hideSplash()
+                    if (this.props.fetched !== prevProps.fetched && this.isGroup()) {
+                        this.scrollToMention()
+                    }
                     if (added)
                         this.markMessages2();
                     setTimeout(() => {
@@ -357,6 +423,7 @@ class Messages extends React.Component {
             }
             updateData()
         }
+        this.markMessages2()
     }
     
     componentWillUnmount() {
@@ -808,7 +875,7 @@ class Messages extends React.Component {
                             <Icon name="new/more" />
                             </div>
                             <div className='TopRightMenu__notificounter'>
-                                <NotifiCounter fields='mention,donate,send,receive,fill_order,delegate_vs,new_sponsor,sponsor_inactive,nft_receive,nft_token_sold,nft_buy_offer,referral' />
+                                <NotifiCounter fields='mention,donate,send,receive,fill_order,delegate_vs,new_sponsor,sponsor_inactive,nft_receive,nft_token_sold,nft_buy_offer,referral,join_request,group_member' />
                             </div>
                         </div>
                     </a>
@@ -864,7 +931,7 @@ class Messages extends React.Component {
         }
 
         let user_menu = [
-            {link: '#', onClick: openMyGroups, icon: 'voters', value: tt('g.groups') + (isSmall ? (' @' + username) : '') },
+            {link: '#', onClick: openMyGroups, icon: 'voters', value: tt('g.groups') + (isSmall ? (' @' + username) : ''), addon: <NotifiCounter fields='join_request,group_member' /> },
             {link: accountLink, extLink: 'blogs', icon: 'new/blogging', value: tt('g.blog'), addon: <NotifiCounter fields='new_sponsor,sponsor_inactive,referral' />},
             {link: mentionsLink, extLink: 'blogs', icon: 'new/mention', value: tt('g.mentions'), addon: <NotifiCounter fields='mention' />},
             {link: donatesLink, extLink: 'wallet', icon: 'editor/coin', value: tt('g.rewards'), addon: <NotifiCounter fields='donate' />},
@@ -906,7 +973,7 @@ class Messages extends React.Component {
                     <div className='msgs-curruser-notify-sink'>
                         <Userpic account={username} title={isSmall ? username : null} width={40} height={40} />
                         <div className='TopRightMenu__notificounter'>
-                            <NotifiCounter fields='mention,donate,send,receive,fill_order,delegate_vs,new_sponsor,sponsor_inactive,nft_receive,nft_token_sold,nft_buy_offer,referral' />
+                            <NotifiCounter fields='mention,donate,send,receive,fill_order,delegate_vs,new_sponsor,sponsor_inactive,nft_receive,nft_token_sold,nft_buy_offer,referral,join_request,group_member' />
                         </div>
                     </div>
                     {!isSmall ? <div className='msgs-curruser-name'>
@@ -953,11 +1020,11 @@ class Messages extends React.Component {
     handleFocusChange = isFocused => {
         this.windowFocused = isFocused;
         if (!isFocused) {
-            if (this.newMessages) {
+            if (Object.keys(this.newMessages).length) {
                 flash();
             }
         } else {
-            this.newMessages = 0;
+            this.newMessages = {}
             unflash();
         }
     }
@@ -1088,6 +1155,7 @@ export default withRouter(connect(
         const contacts = state.global.get('contacts')
         const messages = state.global.get('messages')
         const nodeError = state.global.get('nodeError')
+        const fetched = state.global.get('fetched')
 
         const messages_update = state.global.get('messages_update')
         const username = state.user.getIn(['current', 'username'])
@@ -1116,7 +1184,8 @@ export default withRouter(connect(
             accounts: accounts ?  accounts.toJS() : {},
             username,
             locale,
-            nodeError
+            nodeError,
+            fetched
         }
     },
     dispatch => ({
@@ -1191,6 +1260,11 @@ export default withRouter(connect(
                 message = {...message, ...replyingMessage};
             }
 
+            let mentions = []
+            if (group) {
+                mentions = parseMentions(message)
+            }
+
             let data = null
             try {
                 data = await golos.messages.encodeMsg({ group,
@@ -1214,7 +1288,6 @@ export default withRouter(connect(
                 update: editInfo ? true : false,
                 encrypted_message: data.encrypted_message,
             }
-            //alert(JSON.stringify(opData))
 
             if (group) {
                 let requester
@@ -1226,9 +1299,11 @@ export default withRouter(connect(
 
                 opData.extensions = [[0, {
                     group: group.name,
-                    requester
+                    requester,
+                    mentions
                 }]]
             }
+            //alert(JSON.stringify(opData))
 
             cacheMyOwnMsg(opData, group, message)
 
@@ -1252,10 +1327,14 @@ export default withRouter(connect(
                 successCallback: null,
                 errorCallback: (err, errStr) => {
                     if (err && err.message) {
-                        if (err.message.includes('blocked by')) {
+                        const bm = 'blocked by user (@'
+                        const bmIdx = err.message.indexOf(bm)
+                        if (bmIdx > -1) {
+                            const msg = err.message.substring(bmIdx + bm.length)
+                            const blocker = msg.substring(0, msg.indexOf(')'))
                             this.showError(tt(
                                 'messages.blocked_BY', {
-                                    BY: toAcc ? toAcc.name : ''
+                                    BY: blocker
                                 }
                             ), 10000)
                             return
@@ -1274,8 +1353,8 @@ export default withRouter(connect(
                 },
             }));
         },
-        messaged: (message, timestamp, updateMessage, isMine) => {
-            dispatch(g.actions.messaged({message, timestamp, updateMessage, isMine}));
+        messaged: (message, timestamp, updateMessage, isMine, username) => {
+            dispatch(g.actions.messaged({message, timestamp, updateMessage, isMine, username}));
         },
         messageEdited: (message, timestamp, updateMessage, isMine) => {
             dispatch(g.actions.messageEdited({message, timestamp, updateMessage, isMine}));
diff --git a/src/locales/en.json b/src/locales/en.json
index b8faead74..55d6d22e2 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -339,10 +339,20 @@
       "one": "1 member",
       "other": "%(count)s members"
     },
+    "mention_count": {
+      "zero": "0 mentions",
+      "one": "1 mention",
+      "other": "%(count)s mentions"
+    },
     "message_count": {
       "zero": "0 messages",
       "one": "1 message",
       "other": "%(count)s messages"
+    },
+    "reply_count": {
+      "zero": "0 replies",
+      "one": "1 reply",
+      "other": "%(count)s replies"
     }
   },
   "g": {
diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json
index 384b12694..950087b87 100644
--- a/src/locales/ru-RU.json
+++ b/src/locales/ru-RU.json
@@ -355,10 +355,20 @@
       "one": "1 участник",
       "other": "%(count)s участник(-ов)"
     },
+    "mention_count": {
+      "zero": "0 упоминания",
+      "one": "1 упоминание",
+      "other": "%(count)s упоминания(-й)"
+    },
     "message_count": {
       "zero": "0 сообщений",
       "one": "1 сообщение",
       "other": "%(count)s сообщения(-й)"
+    },
+    "reply_count": {
+      "zero": "0 ответов",
+      "one": "1 ответ",
+      "other": "%(count)s ответа(-ов)"
     }
   },
   "g": {
diff --git a/src/redux/FetchDataSaga.js b/src/redux/FetchDataSaga.js
index a5a556f52..e27de9470 100644
--- a/src/redux/FetchDataSaga.js
+++ b/src/redux/FetchDataSaga.js
@@ -43,6 +43,7 @@ export function* fetchState(location_change_action) {
 
         const state = {}
         state.nodeError = null
+        state.fetched = ''
         if (isFirstRendering || fake) {
             state.contacts = [];
             state.the_group = undefined
@@ -80,7 +81,7 @@ export function* fetchState(location_change_action) {
                 const conCache = getSpaceInCache(null, 'contacts')
 
                 if (path.startsWith('@') || !path) {
-                    console.time('prof: getContactsAsync')
+                    if (window._perfo) console.time('prof: getContactsAsync')
                     const con = yield call([auth, 'withNodeLogin'], { account, keys: { posting },
                         call: async (loginData) => {
                             return await api.getContactsAsync({
@@ -92,11 +93,10 @@ export function* fetchState(location_change_action) {
                             })
                         }
                     })
-                    //alert(JSON.stringify(con))
-                    console.log('procc:' + con._dec_processed)
+                    if (window._perfo) console.log('procc:' + con._dec_processed)
                     state.contacts = con.contacts
                     if (hasErr) return
-                    console.timeEnd('prof: getContactsAsync')
+                    if (window._perfo) console.timeEnd('prof: getContactsAsync')
 
                     addMiniAccounts(state, con.accounts)
                 }
@@ -120,7 +120,7 @@ export function* fetchState(location_change_action) {
 
                         addMiniAccounts(state, mess.accounts)
                     } else {
-                        console.time('prof: getGroupsAsync')
+                        if (window._perfo) console.time('prof: getGroupsAsync')
                         let the_group = yield callSafe(state, [], 'getGroupsAsync', [api, api.getGroupsAsync], {
                             start_group: path,
                             limit: 1,
@@ -135,10 +135,10 @@ export function* fetchState(location_change_action) {
                             the_group = null
                         }
                         state.the_group = the_group
-                        console.timeEnd('prof: getGroupsAsync')
+                        if (window._perfo) console.timeEnd('prof: getGroupsAsync')
 
                         const space = the_group && getSpaceInCache({ group: the_group.name })
-                        console.time('prof: getThreadAsync')
+                        if (window._perfo) console.time('prof: getThreadAsync')
                         let query = {
                             group: path,
                             cache: space ? Object.keys(space) : [],
@@ -165,7 +165,7 @@ export function* fetchState(location_change_action) {
 
                         addMiniAccounts(state, thRes.accounts)
 
-                        console.log('proc:' + thRes._dec_processed)
+                        if (window._perfo) console.log('proc:' + thRes._dec_processed)
                         if (the_group && thRes.error) {
                             the_group.error = thRes.error
                         }
@@ -176,7 +176,9 @@ export function* fetchState(location_change_action) {
                                 state.messages_update = state.messages[state.messages.length - 1].nonce;
                             }
                         }
-                        console.timeEnd('prof: getThreadAsync')
+                        if (window._perfo) console.timeEnd('prof: getThreadAsync')
+
+                        state.fetched = path
                     }
                 }
             }
@@ -243,6 +245,9 @@ export function* fetchMyGroups({ payload: { account } }) {
             }
         })
         groups = [...groupsOwn, ...groups]
+        groups.sort((a, b) => {
+            return b.pendings - a.pendings
+        })
 
         yield put(g.actions.receiveMyGroups({ groups }))
     } catch (err) {
diff --git a/src/redux/GlobalReducer.js b/src/redux/GlobalReducer.js
index a17099b0b..3e421ce00 100644
--- a/src/redux/GlobalReducer.js
+++ b/src/redux/GlobalReducer.js
@@ -84,7 +84,7 @@ export default createModule({
             action: 'MESSAGED',
             reducer: (
                 state,
-                { payload: { message, timestamp, updateMessage, isMine } }
+                { payload: { message, timestamp, updateMessage, isMine, username } }
             ) => {
                 message.create_date = timestamp;
                 message.receive_date = timestamp;
@@ -93,8 +93,10 @@ export default createModule({
                     message.donates = '0.000 GOLOS'
                     message.donates_uia = 0
                 }
-                const group = opGroup(message)
+                const { group, mentions } = opGroup(message)
                 message.group = group
+                message.mentions = mentions
+                message.read_date = (group && !message.to) ? timestamp : '1970-01-01T00:00:00';
 
                 let new_state = state;
                 let messages_update = message.nonce;
@@ -123,6 +125,14 @@ export default createModule({
                                 (i.get('contact') === message.to
                                 || i.get('contact') === message.from)
                         })
+                        let newInbox = 0, newMentions = 0
+                        if (!isMine && !updateMessage) {
+                            if (!group || message.to === username) {
+                                newInbox++
+                            } else if (group && message.mentions && message.mentions.includes(username)) {
+                                newMentions++
+                            }
+                        }
                         if (idx === -1) {
                             let contact = group || (isMine ? message.to : message.from)
                             contacts = contacts.insert(0, fromJS({
@@ -130,16 +140,20 @@ export default createModule({
                                 kind: group ? 'group' : 'account',
                                 last_message: message,
                                 size: {
-                                    unread_inbox_messages: !isMine ? 1 : 0,
+                                    unread_inbox_messages: newInbox,
+                                    unread_mentions: newMentions,
                                 },
                             }));
                         } else {
                             contacts = contacts.update(idx, contact => {
                                 contact = contact.set('last_message', fromJS(message));
-                                if (!isMine && !updateMessage) {
-                                    let msgs = contact.getIn(['size', 'unread_inbox_messages']);
-                                    contact = contact.setIn(['size', 'unread_inbox_messages'],
-                                        msgs + 1);
+                                if (newInbox) {
+                                    contact = contact.updateIn(['size', 'unread_inbox_messages'],
+                                        msgs => msgs + newInbox)
+                                }
+                                if (newMentions) {
+                                    contact = contact.updateIn(['size', 'unread_mentions'],
+                                        msgs => msgs + newMentions)
                                 }
                                 return contact
                             });
@@ -199,15 +213,14 @@ export default createModule({
             ) => {
                 let new_state = state;
                 let messages_update = message.nonce || Math.random();
+                const { group, requester } = opGroup(message)
                 if (updateMessage) {
                     new_state = new_state.updateIn(['messages'],
                     List(),
                     messages => {
-                        return processDatedGroup(message, messages, (messages, idx) => {
-                            let msg = messages.get(idx)
+                        return processDatedGroup(message, messages, (msg, idx) => {
                             msg = msg.set('read_date', timestamp)
-                            const msgs = messages.set(idx, msg)
-                            return { msgs }
+                            return { updated: msg }
                         });
                     });
                 }
@@ -215,7 +228,7 @@ export default createModule({
                     List(),
                     contacts => {
                         let idx = contacts.findIndex(i =>
-                            i.get('contact') === (isMine ? message.to : message.from));
+                            i.get('contact') === (group || (isMine ? message.to : message.from)))
                         if (idx !== -1) {
                             contacts = contacts.update(idx, contact => {
                                  // to update read_date (need for isMine case), and more actualize text
@@ -229,6 +242,9 @@ export default createModule({
                                 // currently used only !isMine case
                                 const msgsKey = isMine ? 'unread_outbox_messages' : 'unread_inbox_messages';
                                 contact = contact.setIn(['size', msgsKey], 0);
+                                if (!isMine) {
+                                    contact = contact.setIn(['size', 'unread_mentions'], 0)
+                                }
                                 return contact;
                             });
                         }
@@ -260,10 +276,8 @@ export default createModule({
                         new_state = new_state.updateIn(['messages'],
                         List(),
                         messages => {
-                            return processDatedGroup(message, messages, (messages, idx) => {
-                                let msg = messages.get(idx)
-                                const msgs = messages.delete(idx)
-                                return { msgs, fixIdx: idx - 1 }
+                            return processDatedGroup(message, messages, (msg, idx) => {
+                                return { updated: null, fixIdx: idx - 1 }
                             });
                         })
                     }
diff --git a/src/redux/TransactionSaga.js b/src/redux/TransactionSaga.js
index a97727c83..7a8410b48 100644
--- a/src/redux/TransactionSaga.js
+++ b/src/redux/TransactionSaga.js
@@ -46,14 +46,16 @@ function* preBroadcast_custom_json({operation}) {
                     const idx = msgs.findIndex(i => i.get('nonce') === json[1].nonce);
                     if (idx === -1) {
                         let group = ''
+                        let mentions = []
                         const exts = json[1].extensions || []
                         for (const [key, val ] of exts) {
                             if (key === 0) {
                                 group = val.group
+                                mentions = val.mentions
                                 break
                             }
                         }
-                        const newMsg = messageOpToObject(json[1], group)
+                        const newMsg = messageOpToObject(json[1], group, mentions)
                         msgs = msgs.insert(0, fromJS(newMsg))
                     } else {
                         messages_update = json[1].nonce;
diff --git a/src/utils/MessageUtils.js b/src/utils/MessageUtils.js
index 8089fac00..f69da6d14 100644
--- a/src/utils/MessageUtils.js
+++ b/src/utils/MessageUtils.js
@@ -6,12 +6,20 @@ export function displayQuoteMsg(body) {
 }
 
 export function processDatedGroup(group, messages, for_each) {
+    let deleteIt
     if (group.nonce) {
         const idx = messages.findIndex(i => i.get('nonce') === group.nonce);
         if (idx !== -1) {
             messages = messages.update(idx, (msg) => {
-                return for_each(msg, idx);
-            });
+                const { updated, fixIdx } = for_each(msg, idx)
+                if (!updated) {
+                    deleteIt = idx
+                }
+                return updated || msg
+            })
+            if (deleteIt !== undefined) {
+                messages = messages.delete(idx)
+            }
         }
     } else {
         let inRange = false;
@@ -26,15 +34,19 @@ export function processDatedGroup(group, messages, for_each) {
                 break;
             }
             if (inRange) {
-                const updated = for_each(messages, idx)
-                if (updated) {
-                    const { msgs, fixIdx } = updated
-                    if (msgs) {
-                        messages = msgs
+                deleteIt = undefined
+                messages = messages.update(idx, (msg) => {
+                    const { updated, fixIdx } = for_each(msg, idx)
+                    if (!updated) {
+                        deleteIt = idx
                     }
                     if (fixIdx !== undefined) {
                         idx = fixIdx
                     }
+                    return updated || msg
+                })
+                if (deleteIt !== undefined) {
+                    messages = messages.delete(idx)
                 }
             }
         }
diff --git a/src/utils/Normalizators.js b/src/utils/Normalizators.js
index 40a92385c..8c9eea862 100644
--- a/src/utils/Normalizators.js
+++ b/src/utils/Normalizators.js
@@ -13,7 +13,7 @@ function getProfileImageLazy(contact, account, cachedProfileImages) {
     let cached = cachedProfileImages[contact.contact];
     if (cached && now - cached.time < 60*1000)
         return cached.image
-    console.log('getProfileImageLazy',  contact.contact)
+    //console.log('getProfileImageLazy',  contact.contact)
     const image = contact.kind === 'group' ?
         getGroupLogo(contact.object_meta) : getProfileImage(account)
     cachedProfileImages[contact.contact] = { image, time: now }
@@ -90,7 +90,7 @@ const loadFromCache = (msg, contact = false) => {
     return false
 }
 
-export function messageOpToObject(op, group) {
+export function messageOpToObject(op, group, mentions = []) {
     const obj = {
         nonce: op.nonce,
         checksum: op.checksum,
@@ -103,7 +103,8 @@ export function messageOpToObject(op, group) {
         receive_date: zeroDate,
         encrypted_message: op.encrypted_message,
         donates: '0.000 GOLOS',
-        donates_uia: 0
+        donates_uia: 0,
+        mentions,
     }
     return obj
 }
@@ -161,11 +162,11 @@ export async function normalizeContacts(contacts, accounts, currentUser, cachedP
                     }
                 }
 
-                console.log('FCC1')
+                if (window._perfo) console.log('FCC1')
                 if (loadFromCache(msg, true)) {
                     return true
                 }
-                console.log('FCC2')
+                if (window._perfo) console.log('FCC2')
                 return false;
             },
             for_each: (msg) => {
@@ -208,7 +209,7 @@ export async function normalizeMessages(messages, accounts, currentUser, to) {
         const posting = currentUser.getIn(['private_keys', 'posting_private'])
         const privateMemo = currentUser.getIn(['private_keys', 'memo_private']);
 
-        console.log('ttt', Date.now())
+        if (window._perfo) console.log('ttt', Date.now())
         const decoded = await decodeMsgs({ msgs: messagesCopy,
             private_memo: !isGroup && privateMemo,
             login: {
@@ -219,25 +220,32 @@ export async function normalizeMessages(messages, accounts, currentUser, to) {
                 msg.author = msg.from;
                 msg.date = new Date(msg.create_date + 'Z');
 
-                if (!isGroup) {
-                    if (msg.to === currentAcc.name) {
-                        if (msg.read_date.startsWith('19')) {
-                            msg.toMark = true;
+                if (msg.read_date.startsWith('19')) {
+                    if (!isGroup) {
+                        if (msg.to === currentAcc.name) {
+                            msg.toMark = true
+                        } else {
+                            msg.unread = true
                         }
                     } else {
-                        if (msg.read_date.startsWith('19')) {
-                            msg.unread = true;
+                        if (msg.to === currentAcc.name) {
+                            msg.toMark = true
+                        } else if (msg.to) {
+                            msg.unread = true
+                        }
+                        if (!msg.toMark && msg.mentions.includes(currentAcc.name)) {
+                            msg.toMark = true
                         }
                     }
                 }
                 //msg.decrypt_date = null
 
-                console.log('FC1')
+                if (window._perfo) console.log('FC1')
                 if (loadFromCache(msg)) {
                     results.push(msg)
                     return true
                 }
-                console.log('FC2')
+                if (window._perfo) console.log('FC2')
                 return false;
             },
             for_each: (msg, i) => {
@@ -250,7 +258,7 @@ export async function normalizeMessages(messages, accounts, currentUser, to) {
             begin_idx: messagesCopy.length - 1,
             end_idx: -1,
         })
-        console.log('ttte', Date.now())
+        if (window._perfo) console.log('ttte', Date.now())
         return decoded
     } catch (ex) {
         console.log(ex);
diff --git a/src/utils/groups.js b/src/utils/groups.js
index fd2878aed..b99994d98 100644
--- a/src/utils/groups.js
+++ b/src/utils/groups.js
@@ -55,23 +55,27 @@ const getRoleInGroup = (group, username) => {
 
 const opGroup = (op) => {
     let group = ''
-    if (!op) return group
+    let requester = ''
+    let mentions = []
+    if (!op) return { group, requester, mentions }
     const { extensions, memo } = op
     if (extensions) {
         for (const ext of extensions) {
-            if (ext && ext[0] === 0) {
-                group = (ext[1] && ext[1].group) || group
+            if (ext && ext[0] === 0 && ext[1]) {
+                group = ext[1].group || group
+                mentions = ext[1].mentions || mentions
+                requester = ext[1].requester || requester
             }
         }
     }
-    if (group) return group
+    if (group) return { group, requester, mentions }
     if (memo) { // donate
         const { target } = memo
         if (target && target.group) {
-            return target.group
+            group = target.group
         }
     }
-    return group
+    return { group, requester, mentions }
 }
 
 export {
diff --git a/src/utils/mentions.js b/src/utils/mentions.js
new file mode 100644
index 000000000..a4232b6b8
--- /dev/null
+++ b/src/utils/mentions.js
@@ -0,0 +1,18 @@
+
+export const accountNameRegEx = /^@[a-z0-9.-]+$/
+
+// TODO: can be renderMsg which also supports links, and rendering
+export function parseMentions(message) {
+    let mentions = new Set()
+    const { body } = message
+    const lines = body.split('\n')
+    for (const line of lines) {
+        const words = line.split(' ')
+        for (let word of words) {
+            if (word.length > 3 && accountNameRegEx.test(word)) {
+                mentions.add(word.slice(1))
+            }
+        }
+    }
+    return [...mentions]
+}
diff --git a/yarn.lock b/yarn.lock
index 1b7a63bd9..84575d8e5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5256,10 +5256,10 @@ globby@^11.0.1, globby@^11.0.4:
 "gls-messenger-native-core@file:native_core":
   version "1.0.0"
 
-golos-lib-js@^0.9.75:
-  version "0.9.75"
-  resolved "https://registry.yarnpkg.com/golos-lib-js/-/golos-lib-js-0.9.75.tgz#51b2f05f6c536776d5a9681f2871d4c9d3449e37"
-  integrity sha512-0upRVfRnCJ+MD9cMCtVCA85eWpXKTF/zg8mjhQEpfuUELFRmNQ1maDuIY/meM3VSIVgkXaoqw1ci0CHjjfP55w==
+golos-lib-js@^0.9.76:
+  version "0.9.76"
+  resolved "https://registry.yarnpkg.com/golos-lib-js/-/golos-lib-js-0.9.76.tgz#c589b26a8f77916529f2fb6e1020bb87f4cb0a7f"
+  integrity sha512-E9A9BnVoOoPjklxGJVxB3xKgLbLSCaXfW0lN4pipAKuokGEVFy8DPEwlUsFgmY9Jf9JFcwl5h6q2c1dzEuBGkQ==
   dependencies:
     abort-controller "^3.0.0"
     assert "^2.0.0"