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

@@ -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%);
+    }
+  }
 }

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

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>