ui: Mark messages as seen after 1.5s for #58

Embolden subject font for unseen messages.

etc/dev-start.sh

@@ -8,7 +8,7 @@ export INBUCKET_WEB_TEMPLATECACHE="false"
 export INBUCKET_WEB_COOKIEAUTHKEY="not-secret"
 export INBUCKET_STORAGE_TYPE="file"
 export INBUCKET_STORAGE_PARAMS="path:/tmp/inbucket"
-export INBUCKET_STORAGE_RETENTIONPERIOD="5m"
+export INBUCKET_STORAGE_RETENTIONPERIOD="15m"
 
 if ! test -x ./inbucket; then
   echo "$PWD/inbucket not found/executable!" >&2

pkg/message/manager.go

@@ -12,6 +12,7 @@ import (
 	"github.com/jhillyerd/inbucket/pkg/policy"
 	"github.com/jhillyerd/inbucket/pkg/storage"
 	"github.com/jhillyerd/inbucket/pkg/stringutil"
+	"github.com/rs/zerolog/log"
 )
 
 // Manager is the interface controllers use to interact with messages.
@@ -127,6 +128,8 @@ func (s *StoreManager) GetMessage(mailbox, id string) (*Message, error) {
 
 // MarkSeen marks the message as having been read.
 func (s *StoreManager) MarkSeen(mailbox, id string) error {
+	log.Debug().Str("module", "manager").Str("mailbox", mailbox).Str("id", id).
+		Msg("Marking as seen")
 	return s.Store.MarkSeen(mailbox, id)
 }
 
@@ -164,5 +167,6 @@ func makeMetadata(m storage.Message) *Metadata {
 		Date:    m.Date(),
 		Subject: m.Subject(),
 		Size:    m.Size(),
+		Seen:    m.Seen(),
 	}
 }

ui/static/inbucket.css

@@ -29,6 +29,10 @@ body {
   font-size: 18px;
 }
 
+.message-list-entry .unseen {
+  font-weight: bold;
+}
+
 .message-list-scroll {
   overflow-y: auto;
 }

ui/static/mailbox.js

@@ -5,6 +5,7 @@ var messageListMargin = 275;
 var clipboard = null;
 var messageListScroll = false;
 var messageListData = null;
+var seenDelay = null;
 
 // clearMessageSearch resets the message list search
 function clearMessageSearch() {
@@ -55,8 +56,11 @@ function loadList() {
     url: '/api/v1/mailbox/' + mailbox,
     success: function(data) {
       messageListData = data.reverse();
+      for (i=0; i<messageListData.length; i++) {
+        messageListData[i].seenClass = messageListData[i].seen ? '' : 'unseen'
+      }
       // Render list
-      $('#message-list').loadTemplate($('#list-entry-template'), data);
+      $('#message-list').loadTemplate($('#list-entry-template'), messageListData);
       $('.message-list-entry').click(onMessageListClick);
       // Reveal and select current message
       $("#message-list").slideDown();
@@ -115,6 +119,7 @@ function onDocumentChange() {
 
 // onDocumentReady is called by mailbox/index.html to initialize
 function onDocumentReady() {
+  seenDelay = makeDelay(1500);
   // Prevent search and resize handlers being called too often
   var searchDelay = makeDelay(200);
   var resizeDelay = makeDelay(100);
@@ -142,10 +147,12 @@ function onDocumentReady() {
 
 // onMessageListClick is triggered by clicks on the message list
 function onMessageListClick() {
+  var id = this.id;
   $('.message-list-entry').removeClass("disabled");
   $(this).addClass("disabled");
-  $('#message-content').load('/mailbox/' + mailbox + '/' + this.id, onMessageLoaded);
-  selected = this.id;
+  $('#message-content').load('/mailbox/' + mailbox + '/' + id, onMessageLoaded);
+  selected = id;
+  seenDelay(function() { markSeen(id); });
 }
 
 // onMessageLoaded is called each time a new message is shown
@@ -199,3 +206,26 @@ function updateMessageSearch() {
   }
 }
 
+// markSeen notifies the server that this message has been seen by the user.
+function markSeen(id) {
+  for (i=0; i<messageListData.length; i++) {
+    if (messageListData[i].id == id) {
+      if (messageListData[i].seen) {
+        return;
+      } else {
+        messageListData[i].seen = true;
+      }
+    }
+  }
+  var updateClass = function() {
+    $('#' + id).find('.unseen').removeClass('unseen');
+  }
+  $.ajax({
+    type: 'PATCH',
+    url: '/api/v1/mailbox/' + mailbox + '/' + id,
+    contentType: 'application/json',
+    data: JSON.stringify({'seen': true}),
+    processData: false,
+    success: updateClass
+  });
+}

ui/templates/mailbox/index.html

@@ -15,8 +15,9 @@ $(document).ready(function() {
 <script type="text/html" id="list-entry-template">
   <button data-id="id" type="button" class="message-list-entry list-group-item">
     <div class="row">
-      <div class="col-sm-4 col-md-12 text-primary" data-content-text="subject"
-        data-format="subject"/>
+      <div class="col-sm-4 col-md-12 text-primary">
+        <span data-class="seenClass" data-content-text="subject" data-format="subject"/>
+      </div>
       <div class="col-sm-4 col-md-12 small" data-content-text="from"/>
       <div class="col-sm-4 col-md-12 small" data-content="date" data-format="date"/>
     </div>