[NEED HELP] Shows who has seen each message group

src/ui/css/yakyak/messages.less

@@ -19,6 +19,31 @@
         position: relative;
         width: 66%;
         margin-left: 25px;
+        .seen {
+          text-decoration: none;
+          font-size: 11px;
+          color: var(--darkgrey);
+          display: inline-block;
+          margin-right: 25px;
+          img, .initials {
+              object-fit: cover;
+              border-radius: 50%;
+              width: 25px;
+              height: 25px;
+              border: 5px solid var(--lightgrey);
+              color: var(--white);
+              background: var(--grey);
+              position: absolute;
+              bottom: 0px;
+              text-align: center;
+              font-size: 10px;
+              line-height: 41px;
+              text-transform: uppercase;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+          }
+        }
         .sender {
             text-decoration: none;
             font-size: 11px;

src/ui/dispatcher.coffee

@@ -113,6 +113,9 @@ handle 'sendmessage', (txt = '') ->
 handle 'toggleshowtray', ->
     viewstate.setShowTray(not viewstate.showtray)
 
+handle 'toggleshowseenstatus', ->
+    viewstate.setShowSeenStatus(not viewstate.showseenstatus)
+
 handle 'togglemenu', ->
     mainWindow = remote.getCurrentWindow()
     if mainWindow.isMenuBarVisible() then mainWindow.setMenuBarVisibility(false) else mainWindow.setMenuBarVisibility(true)

src/ui/models/viewstate.coffee

@@ -34,6 +34,7 @@ module.exports = exp = {
     startminimizedtotray: tryparse(localStorage.startminimizedtotray) or false
     closetotray: tryparse(localStorage.closetotray) or false
     showDockOnce: true
+    showseenstatus: tryparse(localStorage.showseenstatus) or false
 
     setState: (state) ->
         return if @state == state
@@ -114,6 +115,10 @@ module.exports = exp = {
         @loggedin = val
         updated 'viewstate'
 
+    setShowSeenStatus: (val) ->
+        @showseenstatus = localStorage.showseenstatus = !!val
+        updated 'viewstate'
+
     setLastKeyDown: do ->
         {TYPING, PAUSED, STOPPED} = Client.TypingStatus
         lastEmitted = 0
@@ -138,7 +143,7 @@ module.exports = exp = {
                         action 'settyping', STOPPED
                     , 6000
                 , 6000
-    
+
     setShowConvMin: (doshow) ->
         return if @showConvMin == doshow
         @showConvMin = localStorage.showConvMin = doshow

src/ui/views/menu.coffee

@@ -321,6 +321,18 @@ templateView = (viewstate) ->
                 checked:  viewstate.hidedockicon
                 click: -> action 'togglehidedockicon'
             }
+        , {
+            label: 'Experimental'
+            submenu: [
+                {
+                    label: 'Show seen status in messages'
+                    type: 'checkbox'
+                    enabled: viewstate.loggedin
+                    checked: viewstate.showseenstatus
+                    click: -> action 'toggleshowseenstatus'
+                }
+            ]
+        }
     ].filter (n) -> n != undefined
 
 templateWindow = (viewstate) -> [

src/ui/views/messages.coffee

@@ -120,15 +120,31 @@ module.exports = view (models) ->
                         clz.push 'self' if entity.isSelf(u.cid)
                         div class:clz.join(' '), ->
                             drawAvatar u, sender, viewstate, entity
+                            if entity.isSelf(u.cid)
+                                drawSeenElement(c, u, entity, events, viewstate)
                             div class:'umessages', ->
                                 drawMessage(e, entity) for e in events
                             , onDOMSubtreeModified: (e) ->
                                 window.twemoji?.parse e.target if process.platform == 'win32'
+                            unless entity.isSelf(u.cid)
+                                drawSeenElement(c, u, entity, events)
 
     if lastConv != conv_id
         lastConv = conv_id
         later atTopIfSmall
 
+drawSeenElement = (c, u, entity, events, viewstate) ->
+    if viewstate?.showseenstatus
+        temp_set = new Set()
+        for contacts in c.read_state
+            other = contacts.participant_id.chat_id
+            if other != u.cid &&
+               !entity.isSelf(other) &&
+               # only add "seen" avatar if last message from group is seen
+               contacts.latest_read_timestamp >= events[events.length - 1].timestamp
+                if !temp_set.has(entity[other].id)
+                    temp_set.add entity[other].id
+                    drawSeenAvatar entity[other]
 
 groupEventsByMessageType = (event) ->
     res = []
@@ -149,6 +165,20 @@ groupEventsByMessageType = (event) ->
 isMeMessage = (e) ->
     e?.chat_message?.annotation?[0]?[0] == HANGOUT_ANNOTATION_TYPE.me_message
 
+drawSeenAvatar = (u) ->
+    initials = initialsof u
+    span class: "seen"
+    , "data-id": u.id
+    , title: u.display_name
+    , ->
+        purl = u?.photo_url
+        if purl and !viewstate?.showAnimatedThumbs
+            purl += "?sz=25"
+        if purl
+            img src:fixlink(purl)
+        else
+            div class:'initials', initials
+
 drawAvatar = (u, sender, viewstate, entity) ->
     initials = initialsof entity[u.cid]
     a href:linkto(u.cid), title:sender, {onclick}, class:'sender', ->