From 0493ca64e0b61f1aa34295de14081168f5e8670e Mon Sep 17 00:00:00 2001
From: Deimos <deimos@tildes.net>
Date: Fri, 20 Jul 2018 00:52:21 -0600
Subject: [PATCH] Add notification count badge to sidebar button

When on mobile, it wasn't previously possible to tell whether you had
any notifications/messages or not without opening the sidebar to check.
This adds a small "badge" to the sidebar button when the user has
notifications, showing them how many unread items they have.
---
 tildes/scss/modules/_site-header.scss | 11 +++++++++++
 tildes/tildes/models/user/user.py     |  5 +++++
 tildes/tildes/templates/base.jinja2   | 13 ++++++++++++-
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/tildes/scss/modules/_site-header.scss b/tildes/scss/modules/_site-header.scss
index d095a6d..77baeae 100644
--- a/tildes/scss/modules/_site-header.scss
+++ b/tildes/scss/modules/_site-header.scss
@@ -41,4 +41,15 @@
   }
 
   margin-left: auto;
+
+  &.badge {
+    margin-right: 0.6rem;
+
+    &[data-badge]::after {
+      background-color: $orange;
+      font-size: 0.5rem;
+      height: 0.7rem;
+      transform: translate(50%, -40%);
+    }
+  }
 }
diff --git a/tildes/tildes/models/user/user.py b/tildes/tildes/models/user/user.py
index dd9dddc..a27d0dd 100644
--- a/tildes/tildes/models/user/user.py
+++ b/tildes/tildes/models/user/user.py
@@ -179,3 +179,8 @@ class User(DatabaseModel):
         # convert the address to lowercase to avoid potential casing issues
         value = value.lower()
         self.email_address_hash = hash_string(value)
+
+    @property
+    def num_unread_total(self) -> int:
+        """Return total number of unread items (notifications + messages)."""
+        return self.num_unread_messages + self.num_unread_notifications
diff --git a/tildes/tildes/templates/base.jinja2 b/tildes/tildes/templates/base.jinja2
index 799a54b..e299d41 100644
--- a/tildes/tildes/templates/base.jinja2
+++ b/tildes/tildes/templates/base.jinja2
@@ -49,7 +49,18 @@
 
   {{ logged_in_user_info() }}
 
-  <button class="btn btn-sm btn-link site-header-sidebar-button" data-js-sidebar-toggle>Sidebar</button>
+  <button
+    class="btn btn-sm btn-link site-header-sidebar-button
+    {% if request.user and request.user.num_unread_total > 0 %}
+      badge
+    {% endif %}
+    "
+    data-js-sidebar-toggle
+    {% if request.user and request.user.num_unread_total > 0 %}
+      data-badge="{{ request.user.num_unread_total }}"
+    {% endif %}
+  >Sidebar</button>
+
 </header>
 
 <main data-js-hide-sidebar-if-open>