add notification for q-mail

core/src/components/app-view.js

@@ -34,9 +34,10 @@ import './user-info-view/user-info-view.js'
 import '../functional-components/side-menu.js'
 import '../functional-components/side-menu-item.js'
 import './start-minting.js'
+import './notification-view/notification-bell.js'
 import { setChatLastSeen } from '../redux/app/app-actions.js'
 
-const parentEpml = new Epml({type: 'WINDOW', source: window.parent})
+const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
 
 class AppView extends connect(store)(LitElement) {
     static get properties() {
@@ -473,6 +474,7 @@ class AppView extends connect(store)(LitElement) {
                                     <img src="${this.config.coin.logo}" style="height:32px; padding-left:12px;">
                                 </span>
                             </div>
+                            <notification-bell></notification-bell>
                             <div style="display: inline;">
                                 <span>
                                     <img src="/img/${translate("selectmenu.languageflag")}-flag-round-icon-32.png" style="width: 32px; height: 32px; padding-top: 4px;">
@@ -1393,16 +1395,16 @@ class AppView extends connect(store)(LitElement) {
             }
         }
 
-       const getChatLastSeen=async() => {
+        const getChatLastSeen = async () => {
             let items = [];
-          
+
-            await chatLastSeen.iterate(function(value, key, iterationNumber) {
+            await chatLastSeen.iterate(function (value, key, iterationNumber) {
-               
+
-                items.push({key, timestamp: value});
+                items.push({ key, timestamp: value });
-              })
+            })
-              store.dispatch(setChatLastSeen(items))
+            store.dispatch(setChatLastSeen(items))
             return items;
-          }
+        }
 
         await getOpenTradesBTC()
         await appDelay(1000)
@@ -2153,7 +2155,7 @@ class AppView extends connect(store)(LitElement) {
         this.addressInfo = state.app.accountInfo.addressInfo
 
         if (sideurl === "minting") {
-            this.shadowRoot.getElementById('qminter').setAttribute('selected','selected')
+            this.shadowRoot.getElementById('qminter').setAttribute('selected', 'selected')
             if (this.shadowRoot.getElementById('qbminter').hasAttribute('selected')) {
                 this.shadowRoot.getElementById('qbminter').removeAttribute('selected')
             } else if (this.shadowRoot.getElementById('qiminter').hasAttribute('selected')) {
@@ -2186,7 +2188,7 @@ class AppView extends connect(store)(LitElement) {
                 this.shadowRoot.getElementById('qnode').removeAttribute('selected')
             }
         } else if (sideurl === "become-minter") {
-            this.shadowRoot.getElementById('qbminter').setAttribute('selected','selected')
+            this.shadowRoot.getElementById('qbminter').setAttribute('selected', 'selected')
             if (this.shadowRoot.getElementById('qminter').hasAttribute('selected')) {
                 this.shadowRoot.getElementById('qminter').removeAttribute('selected')
             } else if (this.shadowRoot.getElementById('qiminter').hasAttribute('selected')) {
@@ -2219,7 +2221,7 @@ class AppView extends connect(store)(LitElement) {
                 this.shadowRoot.getElementById('qnode').removeAttribute('selected')
             }
         } else if (sideurl === "sponsorship-list") {
-            this.shadowRoot.getElementById('qiminter').setAttribute('selected','selected')
+            this.shadowRoot.getElementById('qiminter').setAttribute('selected', 'selected')
             if (this.shadowRoot.getElementById('qminter').hasAttribute('selected')) {
                 this.shadowRoot.getElementById('qminter').removeAttribute('selected')
             } else if (this.shadowRoot.getElementById('qbminter').hasAttribute('selected')) {
@@ -2252,7 +2254,7 @@ class AppView extends connect(store)(LitElement) {
                 this.shadowRoot.getElementById('qnode').removeAttribute('selected')
             }
         } else if (sideurl === "wallet") {
-            this.shadowRoot.getElementById('qwallet').setAttribute('selected','selected')
+            this.shadowRoot.getElementById('qwallet').setAttribute('selected', 'selected')
             if (this.shadowRoot.getElementById('qminter').hasAttribute('selected')) {
                 this.shadowRoot.getElementById('qminter').removeAttribute('selected')
             } else if (this.shadowRoot.getElementById('qbminter').hasAttribute('selected')) {
@@ -2285,7 +2287,7 @@ class AppView extends connect(store)(LitElement) {
                 this.shadowRoot.getElementById('qnode').removeAttribute('selected')
             }
         } else if (sideurl === "trade-portal") {
-            this.shadowRoot.getElementById('qtrade').setAttribute('selected','selected')
+            this.shadowRoot.getElementById('qtrade').setAttribute('selected', 'selected')
             if (this.shadowRoot.getElementById('qminter').hasAttribute('selected')) {
                 this.shadowRoot.getElementById('qminter').removeAttribute('selected')
             } else if (this.shadowRoot.getElementById('qbminter').hasAttribute('selected')) {
@@ -2318,7 +2320,7 @@ class AppView extends connect(store)(LitElement) {
                 this.shadowRoot.getElementById('qnode').removeAttribute('selected')
             }
         } else if (sideurl === "trade-bot-portal") {
-            this.shadowRoot.getElementById('qbot').setAttribute('selected','selected')
+            this.shadowRoot.getElementById('qbot').setAttribute('selected', 'selected')
             if (this.shadowRoot.getElementById('qminter').hasAttribute('selected')) {
                 this.shadowRoot.getElementById('qminter').removeAttribute('selected')
             } else if (this.shadowRoot.getElementById('qbminter').hasAttribute('selected')) {
@@ -2351,7 +2353,7 @@ class AppView extends connect(store)(LitElement) {
                 this.shadowRoot.getElementById('qnode').removeAttribute('selected')
             }
         } else if (sideurl === "reward-share") {
-            this.shadowRoot.getElementById('qrewardshare').setAttribute('selected','selected')
+            this.shadowRoot.getElementById('qrewardshare').setAttribute('selected', 'selected')
             if (this.shadowRoot.getElementById('qminter').hasAttribute('selected')) {
                 this.shadowRoot.getElementById('qminter').removeAttribute('selected')
             } else if (this.shadowRoot.getElementById('qbminter').hasAttribute('selected')) {
@@ -2384,7 +2386,7 @@ class AppView extends connect(store)(LitElement) {
                 this.shadowRoot.getElementById('qnode').removeAttribute('selected')
             }
         } else if (sideurl === "q-chat") {
-            this.shadowRoot.getElementById('qchat').setAttribute('selected','selected')
+            this.shadowRoot.getElementById('qchat').setAttribute('selected', 'selected')
             if (this.shadowRoot.getElementById('qminter').hasAttribute('selected')) {
                 this.shadowRoot.getElementById('qminter').removeAttribute('selected')
             } else if (this.shadowRoot.getElementById('qbminter').hasAttribute('selected')) {
@@ -2417,7 +2419,7 @@ class AppView extends connect(store)(LitElement) {
                 this.shadowRoot.getElementById('qnode').removeAttribute('selected')
             }
         } else if (sideurl === "name-registration") {
-            this.shadowRoot.getElementById('qnamereg').setAttribute('selected','selected')
+            this.shadowRoot.getElementById('qnamereg').setAttribute('selected', 'selected')
             if (this.shadowRoot.getElementById('qminter').hasAttribute('selected')) {
                 this.shadowRoot.getElementById('qminter').removeAttribute('selected')
             } else if (this.shadowRoot.getElementById('qbminter').hasAttribute('selected')) {
@@ -2450,7 +2452,7 @@ class AppView extends connect(store)(LitElement) {
                 this.shadowRoot.getElementById('qnode').removeAttribute('selected')
             }
         } else if (sideurl === "names-market") {
-            this.shadowRoot.getElementById('qnamemarket').setAttribute('selected','selected')
+            this.shadowRoot.getElementById('qnamemarket').setAttribute('selected', 'selected')
             if (this.shadowRoot.getElementById('qminter').hasAttribute('selected')) {
                 this.shadowRoot.getElementById('qminter').removeAttribute('selected')
             } else if (this.shadowRoot.getElementById('qbminter').hasAttribute('selected')) {
@@ -2483,7 +2485,7 @@ class AppView extends connect(store)(LitElement) {
                 this.shadowRoot.getElementById('qnode').removeAttribute('selected')
             }
         } else if (sideurl === "websites") {
-            this.shadowRoot.getElementById('qweb').setAttribute('selected','selected')
+            this.shadowRoot.getElementById('qweb').setAttribute('selected', 'selected')
             if (this.shadowRoot.getElementById('qminter').hasAttribute('selected')) {
                 this.shadowRoot.getElementById('qminter').removeAttribute('selected')
             } else if (this.shadowRoot.getElementById('qbminter').hasAttribute('selected')) {
@@ -2516,7 +2518,7 @@ class AppView extends connect(store)(LitElement) {
                 this.shadowRoot.getElementById('qnode').removeAttribute('selected')
             }
         } else if (sideurl === "qapps") {
-            this.shadowRoot.getElementById('qapp').setAttribute('selected','selected')
+            this.shadowRoot.getElementById('qapp').setAttribute('selected', 'selected')
             if (this.shadowRoot.getElementById('qminter').hasAttribute('selected')) {
                 this.shadowRoot.getElementById('qminter').removeAttribute('selected')
             } else if (this.shadowRoot.getElementById('qbminter').hasAttribute('selected')) {
@@ -2549,7 +2551,7 @@ class AppView extends connect(store)(LitElement) {
                 this.shadowRoot.getElementById('qnode').removeAttribute('selected')
             }
         } else if (sideurl === "group-management") {
-            this.shadowRoot.getElementById('qgroupmange').setAttribute('selected','selected')
+            this.shadowRoot.getElementById('qgroupmange').setAttribute('selected', 'selected')
             if (this.shadowRoot.getElementById('qminter').hasAttribute('selected')) {
                 this.shadowRoot.getElementById('qminter').removeAttribute('selected')
             } else if (this.shadowRoot.getElementById('qbminter').hasAttribute('selected')) {
@@ -2582,7 +2584,7 @@ class AppView extends connect(store)(LitElement) {
                 this.shadowRoot.getElementById('qnode').removeAttribute('selected')
             }
         } else if (sideurl === "puzzles") {
-            this.shadowRoot.getElementById('qpuzzles').setAttribute('selected','selected')
+            this.shadowRoot.getElementById('qpuzzles').setAttribute('selected', 'selected')
             if (this.shadowRoot.getElementById('qminter').hasAttribute('selected')) {
                 this.shadowRoot.getElementById('qminter').removeAttribute('selected')
             } else if (this.shadowRoot.getElementById('qbminter').hasAttribute('selected')) {
@@ -2615,7 +2617,7 @@ class AppView extends connect(store)(LitElement) {
                 this.shadowRoot.getElementById('qnode').removeAttribute('selected')
             }
         } else if (sideurl === "data-management") {
-            this.shadowRoot.getElementById('qdata').setAttribute('selected','selected')
+            this.shadowRoot.getElementById('qdata').setAttribute('selected', 'selected')
             if (this.shadowRoot.getElementById('qminter').hasAttribute('selected')) {
                 this.shadowRoot.getElementById('qminter').removeAttribute('selected')
             } else if (this.shadowRoot.getElementById('qbminter').hasAttribute('selected')) {
@@ -2648,7 +2650,7 @@ class AppView extends connect(store)(LitElement) {
                 this.shadowRoot.getElementById('qnode').removeAttribute('selected')
             }
         } else if (sideurl === "node-management") {
-            this.shadowRoot.getElementById('qnode').setAttribute('selected','selected')
+            this.shadowRoot.getElementById('qnode').setAttribute('selected', 'selected')
             if (this.shadowRoot.getElementById('qminter').hasAttribute('selected')) {
                 this.shadowRoot.getElementById('qminter').removeAttribute('selected')
             } else if (this.shadowRoot.getElementById('qbminter').hasAttribute('selected')) {

core/src/components/notification-view/notification-bell.js

@@ -0,0 +1,265 @@
+import { LitElement, html, css } from 'lit';
+import { connect } from 'pwa-helpers';
+
+import '@vaadin/button';
+import '@vaadin/item';
+import '@vaadin/list-box';
+import '@vaadin/icon';
+import '@vaadin/icons';
+import { store } from '../../store.js';
+import { setNewTab } from '../../redux/app/app-actions.js';
+import { routes } from '../../plugins/routes.js';
+import config from '../../notifications/config.js';
+import '../../../../plugins/plugins/core/components/TimeAgo.js'
+class NotificationBell extends connect(store)(LitElement) {
+
+
+
+
+    static properties = {
+        notifications: { type: Array },
+        showNotifications: { type: Boolean },
+    };
+
+    constructor() {
+        super();
+        this.notifications = [];
+        this.showNotifications = false;
+        this.initialFetch = false
+    }
+
+    firstUpdated() {
+        this.getNotifications();
+        document.addEventListener('click', (event) => {
+            const path = event.composedPath();
+            if (!path.includes(this)) {
+                this.showNotifications = false;
+            }
+        });
+    }
+
+    getApiKey() {
+        const apiNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
+        let apiKey = apiNode.apiKey;
+        return apiKey;
+    }
+
+    async getNotifications() {
+        const myNode =
+            store.getState().app.nodeConfig.knownNodes[
+            store.getState().app.nodeConfig.node
+            ];
+        const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
+
+        let interval = null
+        let stop = false
+
+        const getNewMail = async () => {
+
+            const getMail = async (recipientName, recipientAddress) => {
+                const query = `qortal_qmail_${recipientName.slice(
+                    0,
+                    20
+                )}_${recipientAddress.slice(-6)}_mail_`
+                const url = `${nodeUrl}/arbitrary/resources/search?service=MAIL_PRIVATE&query=${query}&limit=10&includemetadata=true&offset=0&reverse=true&excludeblocked=true`
+                const response = await fetch(url, {
+                    method: 'GET',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                })
+
+                const data = await response.json();
+                return data;
+            };
+
+            if (!stop && !this.showNotifications) {
+                stop = true;
+                try {
+                    const address = window.parent.reduxStore.getState().app?.selectedAddress?.address;
+                    const name = window.parent.reduxStore.getState().app?.accountInfo?.names[0]?.name
+
+                    if (!name || !address) return
+                    const mailArray = await getMail(name, address);
+                    let notificationsToShow = []
+                    if (mailArray.length > 0) {
+                        const lastVisited = localStorage.getItem("Q-Mail-last-visited")
+
+                        if (lastVisited) {
+                            mailArray.forEach((mail) => {
+                                if (mail.created > lastVisited) notificationsToShow.push(mail)
+                            })
+                        } else {
+                            notificationsToShow = mailArray
+                        }
+
+                    }
+                    if (!this.initialFetch && notificationsToShow.length > 0) {
+                        const mail = notificationsToShow[0]
+                        const urlPic = `${nodeUrl}/arbitrary/THUMBNAIL/${mail.name}/qortal_avatar?async=true&apiKey=${this.getApiKey()}`
+                        routes.showNotification({
+                            data: { title: "New Q-Mail", type: "qapp", sound: config.messageAlert, url: "", options: { body: `You have an unread mail from ${mail.name}`, icon: urlPic, badge: urlPic } }
+                        })
+                    } else if (notificationsToShow.length > 0) {
+                        if (notificationsToShow[0].created > (this.notifications[0]?.created || 0)) {
+                            const mail = notificationsToShow[0]
+                            const urlPic = `${nodeUrl}/arbitrary/THUMBNAIL/${mail.name}/qortal_avatar?async=true&apiKey=${this.getApiKey()}`
+                            routes.showNotification({
+                                data: { title: "New Q-Mail", type: "qapp", sound: config.messageAlert, url: "", options: { body: `You have an unread mail from ${mail.name}`, icon: urlPic, badge: urlPic } }
+                            })
+                        }
+                    }
+                    this.notifications = notificationsToShow
+                    if (!this.initialFetch) this.initialFetch = true
+                } catch (error) {
+                    console.error(error)
+                }
+                stop = false
+            }
+        };
+        try {
+
+            setTimeout(() => {
+                getNewMail()
+
+            }, 5000)
+
+
+            interval = setInterval(getNewMail, 30000);
+        } catch (error) {
+            console.error(error)
+        }
+
+    }
+    render() {
+
+        return html`
+          <div class="layout">
+            <vaadin-button theme="icon" aria-label="Notifications" @click=${this._toggleNotifications}>
+              <vaadin-icon icon="vaadin:bell"></vaadin-icon>
+              <span class="count">${this.notifications.length}</span>
+            </vaadin-button>
+            <div class="popover-panel" ?hidden=${!this.showNotifications}>
+              <div class="notifications-list">
+                ${this.notifications.map(notification => html`
+                  <div class="notification-item" @click=${() => {
+
+                const query = `?service=APP&name=Q-Mail`
+                store.dispatch(setNewTab({
+                    url: `qdn/browser/index.html${query}`,
+                    id: 'q-mail-notification',
+                    myPlugObj: {
+                        "url": "qapps",
+                        "domain": "core",
+                        "page": `qdn/browser/index.html${query}`,
+                        "title": "Q-Mail",
+                        "icon": "vaadin:desktop",
+                        "menus": [],
+                        "parent": false
+                    }
+                }))
+                this.showNotifications = false
+                this.notifications = []
+            }}>
+            <div>
+            <p>Q-Mail</p>
+            <message-time timestamp=${notification.created} style="color:red;font-size:12px"></message-time>
+            </div>
+            <div> 
+            <p>${notification.name}</p>
+            </div>
+           
+            </div>
+                `)}
+        </div>
+            </div>
+          </div>
+        `;
+    }
+
+    _toggleNotifications() {
+        if (this.notifications.length === 0) return
+        this.showNotifications = !this.showNotifications;
+    }
+
+    static styles = css`
+        .layout {
+          width: 100px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          position: relative;
+        }
+        .count {
+          position: absolute;
+          top: 0;
+          right: 0;
+          background-color: red;
+          color: white;
+          border-radius: 50%;
+          width: 20px;
+          height: 20px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .popover-panel {
+          position: absolute;
+          width: 200px;
+          padding: 10px;
+          background-color: #f5f5f5;
+          border: 1px solid #ccc;
+          border-radius: 4px;
+          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+          top: 40px;
+          max-height: 350px;
+    overflow: auto;
+    scrollbar-width: thin;
+            scrollbar-color: #6a6c75 #a1a1a1;
+        }
+
+        .popover-panel::-webkit-scrollbar {
+            width: 11px;
+        }
+
+    
+
+        .popover-panel::-webkit-scrollbar-track {
+            background: #a1a1a1;
+        }
+
+        .popover-panel::-webkit-scrollbar-thumb {
+            background-color: #6a6c75;
+            border-radius: 6px;
+            border: 3px solid #a1a1a1;
+        }
+
+        .notifications-list {
+    display: flex;
+    flex-direction: column;
+  }
+  .notification-item {
+    padding: 5px;
+    border-bottom: 1px solid;
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+    transition: 0.2s all;
+  }
+  .notification-item:hover {
+    background: #c9d2d9;
+  }
+   p {
+    font-size: 14px;
+    color: #444444;
+    margin: 0px;
+    padding: 0px;
+
+  }
+      `;
+}
+
+customElements.define('notification-bell', NotificationBell);
+
+
+

core/src/components/show-plugin.js

@@ -5,6 +5,7 @@ import { Epml } from '../epml.js'
 import { addPluginRoutes } from '../plugins/addPluginRoutes.js'
 import { repeat } from 'lit/directives/repeat.js';
 import ShortUniqueId from 'short-unique-id';
+import { setNewTab } from '../redux/app/app-actions.js'
 
 class ShowPlugin extends connect(store)(LitElement) {
     static get properties() {
@@ -61,13 +62,12 @@ class ShowPlugin extends connect(store)(LitElement) {
             .tabs {
                 display: flex;
                 justify-content: flex-start;
-                height: 35px
-                max-height: 35px
-                gap: 1em;
                 padding-top: 0.5em;
                 padding-left: 0.5em;
                 background: var(--sidetopbar);
                 border-bottom: 1px solid var(--black);
+                height: 48px;
+    box-sizing: border-box;
             }
 
             .tab {
@@ -84,7 +84,9 @@ class ShowPlugin extends connect(store)(LitElement) {
                 position: relative;
                 min-width: 120px;
                 max-width: 200px;
-
+                overflow: hidden;
+                text-wrap: nowrap;
+                text-overflow: ellipsis;
                 text-overflow: ellipsis;
             }
 
@@ -165,6 +167,7 @@ class ShowPlugin extends connect(store)(LitElement) {
             return myPlug === undefined ? 'about:blank' : `${window.location.origin}/plugin/${myPlug.domain}/${myPlug.page}${this.linkParam}`
         }
 
+
         return html`
             <div class="tabs">
                 ${this.tabs.map((tab, index) => html`
@@ -172,7 +175,7 @@ class ShowPlugin extends connect(store)(LitElement) {
                         class="tab ${this.currentTab === index ? 'active' : ''}"
                         @click=${() => this.currentTab = index}
                     >
-                        ${tab.url}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                        ${tab.myPlugObj && tab.myPlugObj.title}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                         <div class="close" @click=${() => { this.removeTab(index) }}>x</div>
                     </div>
                 `)}&nbsp;&nbsp;&nbsp;
@@ -180,9 +183,9 @@ class ShowPlugin extends connect(store)(LitElement) {
                     class="add-tab-button" 
                     title="Add Tab"
                     @click=${() => this.addTab({
-                        url: "",
+            url: "",
-                        id: this.uid()
+            id: this.uid()
-                    })}
+        })}
                 >
                     +
                 </button>
@@ -191,7 +194,7 @@ class ShowPlugin extends connect(store)(LitElement) {
             ${repeat(this.tabs, (tab) => tab.id, (tab, index) => html`
                 <div class=${this.currentTab === index ? "showIframe" : "hideIframe"}>
                     <iframe src="${plugSrc(tab.myPlugObj)}" id="showPluginFrame${index}" style="width:100%;
-                        height:calc(var(--window-height) - 64px);
+                        height:calc(var(--window-height) - 102px);
                         border:0;
                         padding:0;
                         margin:0"
@@ -298,6 +301,28 @@ class ShowPlugin extends connect(store)(LitElement) {
         if (newLinkParam !== this.linkParam) {
             this.linkParam = newLinkParam
         }
+
+        if (state.app.newTab) {
+            const newTab = state.app.newTab
+            if (!this.tabs.find((tab) => tab.id === newTab.id)) {
+                this.addTab(newTab)
+                this.currentTab = this.tabs.length - 1
+                store.dispatch(setNewTab(null))
+                //clear newTab
+            } else {
+                const findIndex = this.tabs.findIndex((tab) => tab.id === newTab.id)
+                if (findIndex !== -1) {
+                    const copiedTabs = [...this.tabs]
+                    copiedTabs[findIndex] = newTab
+                    this.tabs = copiedTabs
+                    this.currentTab = findIndex
+                }
+
+                store.dispatch(setNewTab(null))
+                //clear newTab
+            }
+
+        }
     }
 }
 

core/src/notifications/controller.js

@@ -1,7 +1,7 @@
 import config from './config'
 import { dispatcher } from './dispatcher'
 import snackbar from '../functional-components/snackbar.js'
-import { NEW_MESSAGE } from './types'
+import { NEW_MESSAGE, NEW_MESSAGE_NOTIFICATION_QAPP } from './types'
 
 let initial = 0
 let _state
@@ -43,10 +43,13 @@ const notificationCheck = function () {
 */
 
 export const doNewMessage = function (req) {
+
     const newMessage = () => {
         let data
+        if (req.type && req.type === 'qapp') {
+            data = req
 
-        if (req.groupId) {
+        } else if (req.groupId) {
             const title = `${req.groupName}`
             const body = `New Message from ${req.senderName === undefined ? req.sender : req.senderName}`
             data = { title, sound: config.messageAlert, options: { body, icon: config.default.icon, badge: config.default.icon }, req }
@@ -57,11 +60,16 @@ export const doNewMessage = function (req) {
         }
 
         const notificationState = { type: NEW_MESSAGE, data: data }
-
+        const notificationStateQapp = { type: NEW_MESSAGE_NOTIFICATION_QAPP, data: data }
         const canI = notificationCheck()
 
         if (canI === true) {
-            dispatcher(notificationState)
+            if (req.type && req.type === 'qapp') {
+                dispatcher(notificationStateQapp)
+            } else {
+                dispatcher(notificationState)
+            }
+
         } else {
             _state = notificationState
         }

core/src/notifications/dispatcher.js

@@ -1,10 +1,13 @@
-import { NEW_MESSAGE } from './types'
+import { NEW_MESSAGE, NEW_MESSAGE_NOTIFICATION_QAPP } from './types'
-import { newMessage } from './notification-actions'
+import { newMessage, newMessageNotificationQapp } from './notification-actions'
 
 export const dispatcher = function (notificationState) {
+
     switch (notificationState.type) {
         case NEW_MESSAGE:
             return newMessage(notificationState.data)
+        case NEW_MESSAGE_NOTIFICATION_QAPP:
+            return newMessageNotificationQapp(notificationState.data)
         default:
     }
 }

core/src/notifications/notification-actions/index.js

@@ -1 +1 @@
-export { newMessage } from './new-message'
+export { newMessage, newMessageNotificationQapp } from './new-message'

core/src/notifications/notification-actions/new-message.js

@@ -1,5 +1,6 @@
 import { store } from '../../store.js'
-import { doPageUrl } from '../../redux/app/app-actions.js'
+import { doPageUrl, setNewTab } from '../../redux/app/app-actions.js'
+import isElectron from 'is-electron'
 
 export const newMessage = (data) => {
     const alert = playSound(data.sound)
@@ -31,6 +32,75 @@ export const newMessage = (data) => {
         }
     }
 
+}
+export const newMessageNotificationQapp = (data) => {
+
+    const alert = playSound(data.sound)
+
+    // Should I show notification ?
+    if (store.getState().user.notifications.q_chat.showNotification) {
+
+        // Yes, I can but should I play sound ?
+        if (store.getState().user.notifications.q_chat.playSound) {
+
+            const notify = new Notification(data.title, data.options)
+
+            notify.onshow = (e) => {
+                alert.play()
+            }
+
+            notify.onclick = (e) => {
+                const query = `?service=APP&name=Q-Mail`
+
+                store.dispatch(setNewTab({
+                    url: `qdn/browser/index.html${query}`,
+                    id: 'q-mail-notification',
+                    myPlugObj: {
+                        "url": "qapps",
+                        "domain": "core",
+                        "page": `qdn/browser/index.html${query}`,
+                        "title": "Q-Mail",
+                        "icon": "vaadin:desktop",
+                        "menus": [],
+                        "parent": false
+                    }
+                }))
+                if (!isElectron()) {
+                    window.focus();
+                } else {
+                    window.electronAPI.focusApp()
+                }
+
+            }
+        } else {
+
+            const notify = new Notification(data.title, data.options)
+
+            notify.onclick = (e) => {
+                const query = `?service=APP&name=Q-Mail`
+
+                store.dispatch(setNewTab({
+                    url: `qdn/browser/index.html${query}`,
+                    id: 'q-mail-notification',
+                    myPlugObj: {
+                        "url": "qapps",
+                        "domain": "core",
+                        "page": `qdn/browser/index.html${query}`,
+                        "title": "Q-Mail",
+                        "icon": "vaadin:desktop",
+                        "menus": [],
+                        "parent": false
+                    }
+                }))
+                if (!isElectron()) {
+                    window.focus();
+                } else {
+                    window.electronAPI.focusApp()
+                }
+            }
+        }
+    }
+
 }
 
 const playSound = (soundUrl) => {

core/src/notifications/types.js

@@ -1 +1,2 @@
 export const NEW_MESSAGE = 'NEW_MESSAGE'
+export const NEW_MESSAGE_NOTIFICATION_QAPP = 'NEW_MESSAGE_NOTIFICATION_QAPP'

core/src/redux/app/actions/app-core.js

@@ -1,5 +1,5 @@
 // Core App Actions here...
-import { UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, CHAT_HEADS, ACCOUNT_INFO, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT, ALLOW_QAPP_AUTO_AUTH, REMOVE_QAPP_AUTO_AUTH, SET_CHAT_LAST_SEEN, ADD_CHAT_LAST_SEEN, ALLOW_QAPP_AUTO_LISTS, REMOVE_QAPP_AUTO_LISTS } from '../app-action-types.js'
+import { UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, CHAT_HEADS, ACCOUNT_INFO, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT, ALLOW_QAPP_AUTO_AUTH, REMOVE_QAPP_AUTO_AUTH, SET_CHAT_LAST_SEEN, ADD_CHAT_LAST_SEEN, ALLOW_QAPP_AUTO_LISTS, REMOVE_QAPP_AUTO_LISTS, SET_NEW_TAB } from '../app-action-types.js'
 
 export const doUpdateBlockInfo = (blockObj) => {
     return (dispatch, getState) => {
@@ -120,3 +120,10 @@ export const addChatLastSeen = (payload) => {
     }
 }
 
+export const setNewTab = (payload) => {
+    return {
+        type: SET_NEW_TAB,
+        payload
+    }
+}
+

core/src/redux/app/app-action-types.js

@@ -25,3 +25,4 @@ export const ALLOW_QAPP_AUTO_LISTS = 'ALLOW_QAPP_AUTO_LISTS'
 export const REMOVE_QAPP_AUTO_LISTS = 'REMOVE_QAPP_AUTO_LISTS'
 export const SET_CHAT_LAST_SEEN = 'SET_CHAT_LAST_SEEN'
 export const ADD_CHAT_LAST_SEEN = 'ADD_CHAT_LAST_SEEN'
+export const SET_NEW_TAB = 'SET_NEW_TAB'

core/src/redux/app/app-reducer.js

@@ -1,6 +1,6 @@
 // Loading state, login state, isNavDrawOpen state etc. None of this needs to be saved to localstorage.
 import { loadStateFromLocalStorage, saveStateToLocalStorage } from '../../localStorageHelpers.js'
-import { LOG_IN, LOG_OUT, NETWORK_CONNECTION_STATUS, INIT_WORKERS, ADD_PLUGIN_URL, ADD_PLUGIN, ADD_NEW_PLUGIN_URL, NAVIGATE, SELECT_ADDRESS, ACCOUNT_INFO, CHAT_HEADS, UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, LOAD_NODE_CONFIG, SET_NODE, ADD_NODE, PAGE_URL, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT, ALLOW_QAPP_AUTO_AUTH, REMOVE_QAPP_AUTO_AUTH, SET_CHAT_LAST_SEEN, ADD_CHAT_LAST_SEEN, ALLOW_QAPP_AUTO_LISTS, REMOVE_QAPP_AUTO_LISTS } from './app-action-types.js'
+import { LOG_IN, LOG_OUT, NETWORK_CONNECTION_STATUS, INIT_WORKERS, ADD_PLUGIN_URL, ADD_PLUGIN, ADD_NEW_PLUGIN_URL, NAVIGATE, SELECT_ADDRESS, ACCOUNT_INFO, CHAT_HEADS, UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, LOAD_NODE_CONFIG, SET_NODE, ADD_NODE, PAGE_URL, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT, ALLOW_QAPP_AUTO_AUTH, REMOVE_QAPP_AUTO_AUTH, SET_CHAT_LAST_SEEN, ADD_CHAT_LAST_SEEN, ALLOW_QAPP_AUTO_LISTS, REMOVE_QAPP_AUTO_LISTS, SET_NEW_TAB } from './app-action-types.js'
 import { initWorkersReducer } from './reducers/init-workers.js'
 import { loginReducer } from './reducers/login-reducer.js'
 import { setNode, addNode } from './reducers/manage-node.js'
@@ -46,7 +46,8 @@ const INITIAL_STATE = {
     autoLoadImageChats: loadStateFromLocalStorage('autoLoadImageChats') || [],
     qAPPAutoAuth: loadStateFromLocalStorage('qAPPAutoAuth') || false,
     qAPPAutoLists: loadStateFromLocalStorage('qAPPAutoLists') || false,
-    chatLastSeen: []
+    chatLastSeen: [],
+    newTab: null
 }
 
 export default (state = INITIAL_STATE, action) => {
@@ -136,25 +137,25 @@ export default (state = INITIAL_STATE, action) => {
                 networkIsConnected: action.payload
             }
         case ADD_AUTO_LOAD_IMAGES_CHAT: {
-            const findChat = state.autoLoadImageChats.findIndex((chat)=> chat === action.payload)
+            const findChat = state.autoLoadImageChats.findIndex((chat) => chat === action.payload)
-            console.log({findChat})
+
-            if(findChat !== -1) return state
+            if (findChat !== -1) return state
             const updatedState = [...state.autoLoadImageChats, action.payload]
 
-            saveStateToLocalStorage('autoLoadImageChats', updatedState) 
+            saveStateToLocalStorage('autoLoadImageChats', updatedState)
             return {
                 ...state,
                 autoLoadImageChats: updatedState
             }
         }
-           
+
         case REMOVE_AUTO_LOAD_IMAGES_CHAT: {
-            const updatedState = state.autoLoadImageChats.filter((chat)=> chat !== action.payload)
+            const updatedState = state.autoLoadImageChats.filter((chat) => chat !== action.payload)
-            saveStateToLocalStorage('autoLoadImageChats', updatedState) 
+            saveStateToLocalStorage('autoLoadImageChats', updatedState)
             return {
                 ...state,
                 autoLoadImageChats: updatedState
-         }
+            }
         }
 
         case ALLOW_QAPP_AUTO_AUTH: {
@@ -192,23 +193,23 @@ export default (state = INITIAL_STATE, action) => {
             return {
                 ...state,
                 chatLastSeen: action.payload
-         }
+            }
         }
         case ADD_CHAT_LAST_SEEN: {
             const chatId = action.payload.key
             const timestamp = action.payload.timestamp
-            if(!chatId || !timestamp) return state
+            if (!chatId || !timestamp) return state
             let newChatLastSeen = [...state.chatLastSeen]
-            const findChatIndex = state.chatLastSeen.findIndex((chat)=> chat.key === chatId)
+            const findChatIndex = state.chatLastSeen.findIndex((chat) => chat.key === chatId)
-            if(findChatIndex !== -1){
+            if (findChatIndex !== -1) {
-               
+
                 newChatLastSeen[findChatIndex] = {
                     key: chatId,
                     timestamp,
                 }
             }
-            if(findChatIndex === -1){
+            if (findChatIndex === -1) {
-               
+
                 newChatLastSeen = [...newChatLastSeen, {
                     key: chatId,
                     timestamp,
@@ -218,9 +219,16 @@ export default (state = INITIAL_STATE, action) => {
             return {
                 ...state,
                 chatLastSeen: newChatLastSeen
-         }
+            }
         }
-                
+
+        case SET_NEW_TAB: {
+            return {
+                ...state,
+                newTab: action.payload
+            }
+        }
+
         default:
             return state
     }

electron.js

@@ -29,7 +29,7 @@ autoUpdater.autoInstallOnAppQuit = false
 autoUpdater.logger = log
 autoUpdater.logger.transports.file.level = 'info'
 
-if(!store.has('askingCore')) {
+if (!store.has('askingCore')) {
 	store.set('askingCore', false)
 }
 
@@ -78,6 +78,8 @@ const macjavaaarch64file = homePath + "/openjdk-17.0.2_macos-aarch64_bin.zip"
 const macjavaaarch64bindir = homePath + "/jdk-17.0.2/Contents/Home/bin"
 const macjavaaarch64binfile = homePath + "/jdk-17.0.2/Contents/Home/bin/java"
 
+let win = BrowserWindow.getFocusedWindow();
+
 const isRunning = (query, cb) => {
 	let platform = process.platform
 	let cmd = ''
@@ -203,29 +205,29 @@ async function checkResponseStatus(res) {
 
 async function javaversion() {
 	var stderrChunks = []
-	let checkJava = await spawn('java', ['-version'],{shell: true})
+	let checkJava = await spawn('java', ['-version'], { shell: true })
 	if (process.platform === 'linux') {
 		if (process.arch === 'x64') {
 			if (fs.existsSync(linjavax64bindir)) {
-				checkJava = await spawn(linjavax64binfile, ['-version'],{cwd: homePath, shell: true, maxBuffer: Infinity})
+				checkJava = await spawn(linjavax64binfile, ['-version'], { cwd: homePath, shell: true, maxBuffer: Infinity })
 			}
 		} else if (process.arch === 'arm64') {
 			if (fs.existsSync(linjavaarm64bindir)) {
-				checkJava = await spawn(linjavaarm64binfile, ['-version'],{cwd: homePath, shell: true, maxBuffer: Infinity})
+				checkJava = await spawn(linjavaarm64binfile, ['-version'], { cwd: homePath, shell: true, maxBuffer: Infinity })
 			}
 		} else if (process.arch === 'arm') {
 			if (fs.existsSync(linjavaarmbindir)) {
-				checkJava = await spawn(linjavaarmbinfile, ['-version'],{cwd: homePath, shell: true, maxBuffer: Infinity})
+				checkJava = await spawn(linjavaarmbinfile, ['-version'], { cwd: homePath, shell: true, maxBuffer: Infinity })
 			}
 		}
 	} else if (process.platform === 'darwin') {
 		if (process.arch === 'x64') {
 			if (fs.existsSync(macjavax64bindir)) {
-				checkJava = await spawn(macjavax64binfile, ['-version'],{cwd: homePath, shell: true, maxBuffer: Infinity})
+				checkJava = await spawn(macjavax64binfile, ['-version'], { cwd: homePath, shell: true, maxBuffer: Infinity })
 			}
 		} else {
 			if (fs.existsSync(macjavaaarch64bindir)) {
-				checkJava = await spawn(macjavaaarch64file, ['-version'],{cwd: homePath, shell: true, maxBuffer: Infinity})
+				checkJava = await spawn(macjavaaarch64file, ['-version'], { cwd: homePath, shell: true, maxBuffer: Infinity })
 			}
 		}
 	}
@@ -706,7 +708,7 @@ const editMenu = Menu.buildFromTemplate([
 	{
 		label: "Qortal",
 		submenu: [
-			{ label: "Quit", click() {app.quit()}}
+			{ label: "Quit", click() { app.quit() } }
 		]
 	},
 	{
@@ -748,7 +750,7 @@ const editMenu = Menu.buildFromTemplate([
 		]
 	},
 	{
-		label: "Check for update", click() {autoUpdater.checkForUpdatesAndNotify()}
+		label: "Check for update", click() { autoUpdater.checkForUpdatesAndNotify() }
 	}
 ])
 
@@ -1024,8 +1026,8 @@ if (!isLock) {
 					createNewWindow()
 				},
 			}
-  		])
+		])
-  		homePageOptions.popup(myWindow)
+		homePageOptions.popup(myWindow)
 	})
 	autoUpdater.on('update-available', (event) => {
 		const downloadOpts = {
@@ -1076,7 +1078,15 @@ if (!isLock) {
 		})
 		n.show()
 	})
+	ipcMain.on('focus-app', (event) => {
+		if (win.isMinimized()) {
+			win.restore(); // If the window is minimized restore it, then maximize it
+		}
+		win.maximize();
+		win.focus(); // This will bring your window to the front
+	})
 	process.on('uncaughtException', function (err) {
 		log.info("*** WHOOPS TIME ***" + err)
 	})
+
 }

lib/preload.js

@@ -3,5 +3,6 @@ const { contextBridge, ipcRenderer } = require('electron')
 contextBridge.exposeInMainWorld('electronAPI', {
 	setStartCore: () => ipcRenderer.send('set-start-core'),
 	checkForUpdate: () => ipcRenderer.send('check-for-update'),
-	showMyMenu: () => ipcRenderer.send('show-my-menu')
+	showMyMenu: () => ipcRenderer.send('show-my-menu'),
+	focusApp: () => ipcRenderer.send('focus-app'),
 })

plugins/plugins/core/qdn/browser/browser.src.js

@@ -598,7 +598,7 @@ class WebBrowser extends LitElement {
 
 						break;
 					} catch (error) {
-						console.log({ error })
+
 						const data = {};
 						const errorMsg = error.message || "Error in decrypting data"
 						data['error'] = errorMsg;
@@ -820,6 +820,9 @@ class WebBrowser extends LitElement {
 					this.service = data.service;
 					this.identifier = data.identifier;
 					this.displayUrl = url;
+					if (data.name === 'Q-Mail') {
+						localStorage.setItem("Q-Mail-last-visited", Date.now())
+					}
 					return;
 
 				case actions.PUBLISH_QDN_RESOURCE: {
@@ -1581,63 +1584,63 @@ class WebBrowser extends LitElement {
 								this.loader.hide();
 							}
 						} else {
-						 	let _url = ``
+							let _url = ``
-						 	let _body = null
+							let _body = null
 
-						 	switch (coin) {
+							switch (coin) {
-						 		case 'BTC':
+								case 'BTC':
-						 			_url = `/crosschain/btc/walletbalance?apiKey=${this.getApiKey()}`
+									_url = `/crosschain/btc/walletbalance?apiKey=${this.getApiKey()}`
-						 			_body = window.parent.reduxStore.getState().app.selectedAddress.btcWallet.derivedMasterPublicKey
+									_body = window.parent.reduxStore.getState().app.selectedAddress.btcWallet.derivedMasterPublicKey
-						 			break
+									break
-						 		case 'LTC':
+								case 'LTC':
-						 			_url = `/crosschain/ltc/walletbalance?apiKey=${this.getApiKey()}`
+									_url = `/crosschain/ltc/walletbalance?apiKey=${this.getApiKey()}`
-						 			_body = window.parent.reduxStore.getState().app.selectedAddress.ltcWallet.derivedMasterPublicKey
+									_body = window.parent.reduxStore.getState().app.selectedAddress.ltcWallet.derivedMasterPublicKey
-						 			break
+									break
-						 		case 'DOGE':
+								case 'DOGE':
-						 			_url = `/crosschain/doge/walletbalance?apiKey=${this.getApiKey()}`
+									_url = `/crosschain/doge/walletbalance?apiKey=${this.getApiKey()}`
-						 			_body = window.parent.reduxStore.getState().app.selectedAddress.dogeWallet.derivedMasterPublicKey
+									_body = window.parent.reduxStore.getState().app.selectedAddress.dogeWallet.derivedMasterPublicKey
-						 			break
+									break
-						 		case 'DGB':
+								case 'DGB':
-						 			_url = `/crosschain/dgb/walletbalance?apiKey=${this.getApiKey()}`
+									_url = `/crosschain/dgb/walletbalance?apiKey=${this.getApiKey()}`
-						 			_body = window.parent.reduxStore.getState().app.selectedAddress.dgbWallet.derivedMasterPublicKey
+									_body = window.parent.reduxStore.getState().app.selectedAddress.dgbWallet.derivedMasterPublicKey
-						 			break
+									break
-						 		case 'RVN':
+								case 'RVN':
-						 			_url = `/crosschain/rvn/walletbalance?apiKey=${this.getApiKey()}`
+									_url = `/crosschain/rvn/walletbalance?apiKey=${this.getApiKey()}`
-						 			_body = window.parent.reduxStore.getState().app.selectedAddress.rvnWallet.derivedMasterPublicKey
+									_body = window.parent.reduxStore.getState().app.selectedAddress.rvnWallet.derivedMasterPublicKey
-						 			break
+									break
-						 		case 'ARRR':
+								case 'ARRR':
-						 			_url = `/crosschain/arrr/walletbalance?apiKey=${this.getApiKey()}`
+									_url = `/crosschain/arrr/walletbalance?apiKey=${this.getApiKey()}`
-						 			_body = window.parent.reduxStore.getState().app.selectedAddress.arrrWallet.seed58
+									_body = window.parent.reduxStore.getState().app.selectedAddress.arrrWallet.seed58
-						 			break
+									break
-						 		default:
+								default:
-						 			break
+									break
-						 	}
+							}
-						 	try {
+							try {
-						 		this.loader.show();
+								this.loader.show();
-						 		const res = await parentEpml.request('apiCall', {
+								const res = await parentEpml.request('apiCall', {
-						 			url: _url,
+									url: _url,
-						 			method: 'POST',
+									method: 'POST',
-						 			body: _body,
+									body: _body,
-						 		})
+								})
-						 		if (isNaN(Number(res))) {
+								if (isNaN(Number(res))) {
-						 			const data = {};
+									const data = {};
-						 			const errorMsg = error.message || get("browserpage.bchange21");
+									const errorMsg = error.message || get("browserpage.bchange21");
-						 			data['error'] = errorMsg;
+									data['error'] = errorMsg;
-						 			response = JSON.stringify(data);
+									response = JSON.stringify(data);
-						 			return;
+									return;
-						 		} else {
+								} else {
-						 			response = (Number(res) / 1e8).toFixed(8);
+									response = (Number(res) / 1e8).toFixed(8);
-						 		}
+								}
-						 	} catch (error) {
+							} catch (error) {
-						 		console.error(error);
+								console.error(error);
-						 		const data = {};
+								const data = {};
-						 		const errorMsg = error.message || get("browserpage.bchange21");
+								const errorMsg = error.message || get("browserpage.bchange21");
-						 		data['error'] = errorMsg;
+								data['error'] = errorMsg;
-						 		response = JSON.stringify(data);
+								response = JSON.stringify(data);
-						 		return;
+								return;
-						 	} finally {
+							} finally {
-						 		this.loader.hide()
+								this.loader.hide()
-						 	}
+							}
 						}
 					} else if (res3.action === 'reject') {
 						response = '{"error": "User declined request"}';