1 files changed, 52 insertions, 7 deletions

diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx
index fac54212..849822af 100644
--- a/ui/src/components/navbar.tsx
+++ b/ui/src/components/navbar.tsx
@@ -9,9 +9,12 @@ import {
   GetRepliesResponse,
   GetUserMentionsForm,
   GetUserMentionsResponse,
+  GetPrivateMessagesForm,
+  PrivateMessagesResponse,
   SortType,
   GetSiteResponse,
   Comment,
+  PrivateMessage,
   WebSocketJsonResponse,
 } from '../interfaces';
 import {
@@ -19,6 +22,8 @@ import {
   pictshareAvatarThumbnail,
   showAvatars,
   fetchLimit,
+  isCommentType,
+  toast,
 } from '../utils';
 import { version } from '../version';
 import { i18n } from '../i18next';
@@ -29,6 +34,7 @@ interface NavbarState {
   expanded: boolean;
   replies: Array<Comment>;
   mentions: Array<Comment>;
+  messages: Array<PrivateMessage>;
   fetchCount: number;
   unreadCount: number;
   siteName: string;
@@ -43,6 +49,7 @@ export class Navbar extends Component<any, NavbarState> {
     fetchCount: 0,
     replies: [],
     mentions: [],
+    messages: [],
     expanded: false,
     siteName: undefined,
   };
@@ -129,11 +136,22 @@ export class Navbar extends Component<any, NavbarState> {
                 <T i18nKey="create_community">#</T>
               </Link>
             </li>
+            <li className="nav-item">
+              <Link
+                class="nav-link ml-2"
+                to="/sponsors"
+                title={i18n.t('donate_to_lemmy')}
+              >
+                <svg class="icon">
+                  <use xlinkHref="#icon-coffee"></use>
+                </svg>
+              </Link>
+            </li>
           </ul>
-          <ul class="navbar-nav ml-auto mr-2">
+          <ul class="navbar-nav ml-auto">
             {this.state.isLoggedIn ? (
               <>
-                <li className="nav-item">
+                <li className="nav-item mt-1">
                   <Link class="nav-link" to="/inbox">
                     <svg class="icon">
                       <use xlinkHref="#icon-mail"></use>
@@ -218,6 +236,20 @@ export class Navbar extends Component<any, NavbarState> {
       this.state.mentions = unreadMentions;
       this.setState(this.state);
       this.sendUnreadCount();
+    } else if (res.op == UserOperation.GetPrivateMessages) {
+      let data = res.data as PrivateMessagesResponse;
+      let unreadMessages = data.messages.filter(r => !r.read);
+      if (
+        unreadMessages.length > 0 &&
+        this.state.fetchCount > 1 &&
+        JSON.stringify(this.state.messages) !== JSON.stringify(unreadMessages)
+      ) {
+        this.notify(unreadMessages);
+      }
+
+      this.state.messages = unreadMessages;
+      this.setState(this.state);
+      this.sendUnreadCount();
     } else if (res.op == UserOperation.GetSite) {
       let data = res.data as GetSiteResponse;
 
@@ -249,9 +281,17 @@ export class Navbar extends Component<any, NavbarState> {
         page: 1,
         limit: fetchLimit,
       };
+
+      let privateMessagesForm: GetPrivateMessagesForm = {
+        unread_only: true,
+        page: 1,
+        limit: fetchLimit,
+      };
+
       if (this.currentLocation !== '/inbox') {
         WebSocketService.Instance.getReplies(repliesForm);
         WebSocketService.Instance.getUserMentions(userMentionsForm);
+        WebSocketService.Instance.getPrivateMessages(privateMessagesForm);
         this.state.fetchCount++;
       }
     }
@@ -271,7 +311,8 @@ export class Navbar extends Component<any, NavbarState> {
   get unreadCount() {
     return (
       this.state.replies.filter(r => !r.read).length +
-      this.state.mentions.filter(r => !r.read).length
+      this.state.mentions.filter(r => !r.read).length +
+      this.state.messages.filter(r => !r.read).length
     );
   }
 
@@ -279,7 +320,7 @@ export class Navbar extends Component<any, NavbarState> {
     if (UserService.Instance.user) {
       document.addEventListener('DOMContentLoaded', function() {
         if (!Notification) {
-          alert(i18n.t('notifications_error'));
+          toast(i18n.t('notifications_error'), 'danger');
           return;
         }
 
@@ -289,21 +330,25 @@ export class Navbar extends Component<any, NavbarState> {
     }
   }
 
-  notify(replies: Array<Comment>) {
+  notify(replies: Array<Comment | PrivateMessage>) {
     let recentReply = replies[0];
     if (Notification.permission !== 'granted') Notification.requestPermission();
     else {
       var notification = new Notification(
         `${replies.length} ${i18n.t('unread_messages')}`,
         {
-          icon: `${window.location.protocol}//${window.location.host}/static/assets/apple-touch-icon.png`,
+          icon: recentReply.creator_avatar
+            ? recentReply.creator_avatar
+            : `${window.location.protocol}//${window.location.host}/static/assets/apple-touch-icon.png`,
           body: `${recentReply.creator_name}: ${recentReply.content}`,
         }
       );
 
       notification.onclick = () => {
         this.context.router.history.push(
-          `/post/${recentReply.post_id}/comment/${recentReply.id}`
+          isCommentType(recentReply)
+            ? `/post/${recentReply.post_id}/comment/${recentReply.id}`
+            : `/inbox`
         );
       };
     }