improve message previews

app/views/base/layout.scala.html

@@ -48,9 +48,7 @@ moreJs: Html = Html(""))(body: Html)(implicit ctx: Context)
       <a title="@elem.name()" data-href="@routes.Message.preview" class="message goto_nav blank_if_play @elem.currentClass(active)" href="@elem.route">
         <span class="s16 message"></span>
         @defining(messageNbUnread(ctx)) { nbUnread =>
-        @if(nbUnread > 0) {
-        <span id="nb_messages" class="new_messages">@nbUnread</span>
-        }
+        <span id="nb_messages" class="new_messages @{ (nbUnread > 0).??("unread") }">@nbUnread</span>
         }
       </a>
       }

modules/message/src/main/Api.scala

@@ -1,5 +1,7 @@
 package lila.message
 
+import akka.pattern.pipe
+
 import lila.common.paginator._
 import lila.db.api._
 import lila.db.Implicits._
@@ -30,7 +32,7 @@ final class Api(
   def thread(id: String, me: User): Fu[Option[Thread]] = for {
     threadOption ← $find.byId(id) map (_ filter (_ hasUser me))
     _ ← threadOption.filter(_ isUnReadBy me).??(thread ⇒
-      (ThreadRepo setRead thread) >> updateUser(me.id)
+      (ThreadRepo setRead thread) >>- updateUser(me.id)
     )
   } yield threadOption
 
@@ -40,25 +42,25 @@ final class Api(
       text = data.text,
       creatorId = me.id,
       invitedId = data.user.id)
-    $insert(thread) >> updateUser(data.user.id) inject thread
+    $insert(thread) >>- updateUser(data.user.id) inject thread
   }
 
   def lichessThread(lt: LichessThread): Funit = Thread.make(
     name = lt.subject,
     text = lt.message,
     creatorId = "lichess",
-    invitedId = lt.to) |> { thread ⇒ $insert(thread) >> updateUser(lt.to) }
+    invitedId = lt.to) |> { thread ⇒ $insert(thread) >>- updateUser(lt.to) }
 
   def makePost(thread: Thread, text: String, me: User) = {
     val post = Post.make(
       text = text,
       isByCreator = thread isCreator me)
     val newThread = thread + post
-    for {
-      _ ← $update[ThreadRepo.ID, Thread](newThread)
-      receiver ← UserRepo.named(thread receiverOf post)
-      _ ← receiver.map(_.id) ?? updateUser
-    } yield newThread
+    $update[ThreadRepo.ID, Thread](newThread) >>- {
+      UserRepo.named(thread receiverOf post) foreach {
+        _.map(_.id) foreach updateUser
+      }
+    } inject newThread
   }
 
   def deleteThread(id: String, me: User): Funit =
@@ -68,10 +70,9 @@ final class Api(
 
   val unreadIds = unreadCache apply _
 
-  private def updateUser(user: String): Funit = {
-    (unreadCache refresh user) onSuccess {
-      case nb ⇒ socketHub ! SendTo(user, "nbm", nb)
-    }
-    funit
+  private def updateUser(user: String) {
+    (unreadCache refresh user) mapTo manifest[List[String]] map { ids ⇒
+      SendTo(user, "nbm", ids.size)
+    } pipeTo socketHub.ref
   }
 }

modules/message/src/main/ThreadRepo.scala

@@ -45,7 +45,9 @@ object ThreadRepo {
       sort = JsObjectWriter.write(Json.obj("updatedAt" -> -1)).some)
     tube.threadTube.coll.db.command(command) map { res ⇒
       toJSON(res).arr("results").flatMap(_.apply(0) str "value")
-    } map (~_ split ';' toList)
+    } map { 
+      _ ?? (_ split ';' toList)
+    }
   }
 
   def setRead(thread: Thread): Funit = {

public/javascripts/big.js

@@ -343,7 +343,7 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
     $('#top a.message').powerTip({
       placement: 'se',
       mouseOnToPopup: true,
-      closeDelay: 2000000
+      closeDelay: 200
     }).on({
       powerTipPreRender: function() {
         console.debug($(this));

public/stylesheets/common.css

@@ -342,6 +342,7 @@ a.goto_nav:hover, #top a.toggle:hover, #top a.bgpicker:hover, a#sound_state:hove
   vertical-align: text-bottom;
 }
 #top span.new_messages {
+  display: none;
   padding: 1px 5px 1px 4px;
   background: #bbb;
   color: white;
@@ -349,8 +350,8 @@ a.goto_nav:hover, #top a.toggle:hover, #top a.bgpicker:hover, a#sound_state:hove
   border-radius:4px;
   font-size: 0.9em;
 }
-#top span.new_messages {
-  font-size: 1em;
+#top span.new_messages.unread {
+  display: inline;
 }
 #top .shown a.toggle {
   background: #fff;