From d95e383fb1df35cbb0cda31db997f750911a9198 Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Thu, 13 Dec 2018 17:47:58 -0800
Subject: [PATCH] Add room notifications.

---
 src/Scylla/Views.elm   | 19 ++++++++++++++++++-
 static/scss/style.scss | 12 +++++++++---
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/Scylla/Views.elm b/src/Scylla/Views.elm
index 2d6b22d..9aeee8a 100644
--- a/src/Scylla/Views.elm
+++ b/src/Scylla/Views.elm
@@ -69,7 +69,24 @@ roomListElementView s jr =
     let
         name = Maybe.withDefault "<No Name>"  <| roomName jr
     in
-        a [ href <| roomUrl s ] [ text name ]
+        div [ class "room-link-wrapper" ]
+            [ a [ href <| roomUrl s ] [ text name ]
+            , roomNotificationCountView jr.unreadNotifications
+            ]
+
+roomNotificationCountView : Maybe UnreadNotificationCounts -> Html Msg
+roomNotificationCountView ns =
+    let
+        spanNumber = case Maybe.andThen .notificationCount ns of
+            Nothing -> ""
+            Just 0 -> ""
+            Just i -> String.fromInt i
+        spanSuffix = case Maybe.andThen .highlightCount ns of
+            Nothing -> ""
+            Just 0 -> ""
+            Just i -> "!"
+    in
+        span [ class "notification-count" ] [ text (spanNumber ++ spanSuffix) ]
 
 loginView : Model -> Html Msg
 loginView m = div [ class "login-wrapper" ]
diff --git a/static/scss/style.scss b/static/scss/style.scss
index 7d2b6c2..00164bb 100644
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -89,7 +89,7 @@ div.base-wrapper {
     display: flex;
     height: 100%;
 
-    div {
+    > div {
         padding: 5px;
         box-sizing: border-box;
     }
@@ -100,9 +100,15 @@ div.base-wrapper {
  */
 div.rooms-wrapper {
     flex-shrink: 0;
+}
 
-    a {
-        display: block;
+div.room-link-wrapper {
+    whitespace: nowrap;
+    display: flex;
+    padding: 0px;
+
+    span, a {
+        margin-right: 5px;
     }
 }