Encourages folks to open notifications. Longer auth cookie lifetime.

Chavah.NetCore/Startup.cs

@@ -141,6 +141,8 @@ public void ConfigureServices(IServiceCollection services)
                 options.DefaultSignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;
             }).AddCookie(o =>
             {
+                o.SlidingExpiration = true; // automatically extend cookie expiration on user activity
+                o.ExpireTimeSpan = TimeSpan.FromDays(365);
                 o.Events.OnRedirectToLogin = (context) =>
                 {
                     context.Response.StatusCode = 401;

Chavah.NetCore/wwwroot/css/app/header.less

@@ -113,6 +113,12 @@ header {
             }
         }
 
+        &.attention-seeker {
+            animation-name: tada;
+            animation-duration: 1.5s;
+            animation-timing-function: ease;
+        }
+
         button {
             text-decoration: none;
             padding-right: 7px;

Chavah.NetCore/wwwroot/css/app/shared.less

@@ -79,3 +79,25 @@ body {
     border-top-left-radius: 8px;
     border-bottom-left-radius: 8px;
 }
+
+@keyframes tada {
+    from {
+        transform: scale3d(1, 1, 1);
+    }
+
+    10%, 20% {
+        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+    }
+
+    30%, 50%, 70%, 90% {
+        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+    }
+
+    40%, 60%, 80% {
+        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+    }
+
+    to {
+        transform: scale3d(1, 1, 1);
+    }
+}

Chavah.NetCore/wwwroot/js/Controllers/HeaderController.ts

@@ -5,6 +5,8 @@
         profilePicUrl: string | null = null;
         canSubscribeToPushNotifications = false;
         showDonationBanner = false;
+        highlightUnreadNotifications = false;
+        hasOpenedNotifications = false;
 
         static readonly donationBannerLocalStorageKey = "hasDismissedDonationBanner";
         static $inject = [
@@ -81,9 +83,18 @@
             this.loadPushNotificationState();
             this.updateAppBadge(this.unreadNotificationCount);
 
+            // Show the donation banner after a short while.
             if (!this.hasDismissedDonationBanner()) {
                 this.$timeout(() => this.showDonationBanner = true, 5 * 60 * 1000); // 5 minutes
             }
+
+            // Tell the user if they have unread notifications after a bit.
+            this.$timeout(() => {
+                console.log("zanz", this.notifications && this.notifications.filter(n => n.isUnread).length > 0);
+                if (this.notifications && this.notifications.filter(n => n.isUnread).length > 0) {
+                    this.highlightUnreadNotifications = true;
+                }
+            }, 10 * 1000) // 30 seconds
         }
 
         loadPushNotificationState() {
@@ -98,6 +109,8 @@
             }
 
             this.updateAppBadge(0);
+            this.highlightUnreadNotifications = false;
+            this.hasOpenedNotifications = true;
         }
 
         signOut() {

Chavah.NetCore/wwwroot/views/partials/Header.html

@@ -21,8 +21,8 @@
             </div>
             <div class="col-xs-4 col-sm-4 col-lg-3">
                 <div class="text-right">
-                    <div class="btn-group notifications-btn" ng-show="vm.notifications.length > 0">
-                        <button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ng-click="vm.markNotificationsAsRead()" uib-tooltip="Notifications">
+                    <div class="btn-group notifications-btn" ng-show="vm.notifications.length > 0" ng-class="{'attention-seeker': vm.highlightUnreadNotifications }" uib-tooltip="Notifications" tooltip-placement="bottom" tooltip-enable="{{!vm.hasOpenedNotifications}}">
+                        <button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ng-click="vm.markNotificationsAsRead()">
                             <h3>
                                 <i class="fa fa-bell fa-fw"></i>
                                 <span class="badge" ng-show="vm.unreadNotificationCount > 0">{{vm.unreadNotificationCount}}</span>