New feature add and remove plugin to tab menu

2023-06-19 17:01:55 +02:00 · 2023-06-19 17:01:55 +02:00 · c92cbfd394
commit c92cbfd394
parent ef0b62ef02
19 changed files with 535 additions and 33 deletions
--- a/core/language/de.json
+++ b/core/language/de.json
@ -60,7 +60,16 @@
 		"tm15": "Rätsel",
 		"tm16": "Knotenverwaltung",
 		"tm17": "Neuer Tab",
-		"tm18": "Neuen Tab hinzufügen"
+		"tm18": "Neuen Tab hinzufügen",
+		"tm19": "Neues Plugin hinzufügen",
+		"tm20": "Q-App",
+		"tm21": "Website",
+		"tm22": "Plugin entfernen",
+		"tm23": "Sind Sie sicher, dass Sie dieses Plugin entfernen?",
+		"tm24": "Plugin-Typ:",
+		"tm25": "Bitte wählen Sie einen Plugin-Typ aus!",
+		"tm26": "Neues Plugin zum Menü hinzufügen",
+		"tm27": "Plugin aus Menü entfernen"
 	},
 	"login": {
 		"login": "Einloggen",
--- a/core/language/es.json
+++ b/core/language/es.json
@ -60,7 +60,16 @@
 		"tm15": "Rompecabezas",
 		"tm16": "Administración de nodos",
 		"tm17": "Nueva pestaña",
-		"tm18": "Agregar nueva pestaña"
+		"tm18": "Agregar nueva pestaña",
+		"tm19": "Agregar nuevo complemento",
+		"tm20": "Q-Aplicación",
+		"tm21": "Sitio web",
+		"tm22": "Eliminar complemento",
+		"tm23": "¿Está seguro de eliminar este complemento?",
+		"tm24": "Tipo de complemento:",
+		"tm25": "¡Seleccione un tipo de complemento!",
+		"tm26": "Agregar nuevo complemento al menú",
+		"tm27": "Eliminar complemento del menú"
 	},
 	"login": {
 		"login": "Iniciar sesión",
--- a/core/language/fr.json
+++ b/core/language/fr.json
@ -60,7 +60,16 @@
 		"tm15": "Puzzles",
 		"tm16": "Gestion des nœuds",
 		"tm17": "Nouvel onglet",
-		"tm18": "Ajouter un nouvel onglet"
+		"tm18": "Ajouter un nouvel onglet",
+		"tm19": "Ajouter un nouveau plugin",
+		"tm20": "Q-App",
+		"tm21": "Site Web",
+		"tm22": "Supprimer le plugin",
+		"tm23": "Êtes-vous sûr de vouloir supprimer ce plugin ?",
+		"tm24": "Type de plug-in :",
+		"tm25": "Veuillez sélectionner un type de plugin !",
+		"tm26": "Ajouter un nouveau plugin au menu",
+		"tm27": "Supprimer le plugin du menu"
 	},
 	"login": {
 		"login": "Connexion",
--- a/core/language/hindi.json
+++ b/core/language/hindi.json
@ -61,7 +61,16 @@
 		"tm15": "पहेलियाँ",
 		"tm16": "नोड प्रबंधन",
 		"tm17": "नया टैब",
-		"tm18": "नया टैब जोड़ें"
+		"tm18": "नया टैब जोड़ें",
+		"tm19": "नया प्लगइन जोड़ें",
+		"tm20": "क्यू-ऐप",
+		"tm21": "वेबसाइट",
+		"tm22": "प्लगइन हटाएं",
+		"tm23": "क्या आप वाकई इस प्लगइन को हटाना चाहते हैं?",
+		"tm24": "प्लगइन प्रकार:",
+		"tm25": "कृपया प्लगइन प्रकार चुनें!",
+		"tm26": "मेनू में नया प्लगइन जोड़ें",
+		"tm27": "मेनू से प्लगइन हटाएं"
 	},
 	"login": {
 		"login": "लॉग इन करें",
--- a/core/language/hr.json
+++ b/core/language/hr.json
@ -60,7 +60,16 @@
 		"tm15": "Zagonetke",
 		"tm16": "Upravljanje čvorom",
 		"tm17": "Nova kartica",
-		"tm18": "Dodaj novu karticu"
+		"tm18": "Dodaj novu karticu",
+		"tm19": "Dodaj novi dodatak",
+		"tm20": "Q-App",
+		"tm21": "Web stranica",
+		"tm22": "Ukloni dodatak",
+		"tm23": "Jeste li sigurni da želite ukloniti ovaj dodatak?",
+		"tm24": "Vrsta dodatka:",
+		"tm25": "Molimo odaberite vrstu dodatka!",
+		"tm26": "Dodaj novi dodatak u izbornik",
+		"tm27": "Ukloni dodatak iz izbornika"
 	},
 	"login": {
 		"login": "Prijavi se",
--- a/core/language/hu.json
+++ b/core/language/hu.json
@ -60,7 +60,16 @@
 		"tm15": "Rejtvények",
 		"tm16": "Csomópontkezelés",
 		"tm17": "Új lap",
-		"tm18": "Új lap hozzáadása"
+		"tm18": "Új lap hozzáadása",
+		"tm19": "Új beépülő modul hozzáadása",
+		"tm20": "Q-App",
+		"tm21": "Webhely",
+		"tm22": "Plugin eltávolítása",
+		"tm23": "Biztosan eltávolítja ezt a bővítményt?",
+		"tm24": "Plugin Type:",
+		"tm25": "Kérjük, válasszon beépülő modul típust!",
+		"tm26": "Új beépülő modul hozzáadása a menühöz",
+		"tm27": "Plugin eltávolítása a menüből"
 	},
 	"login": {
 		"login": "Bejelentkezés",
--- a/core/language/it.json
+++ b/core/language/it.json
@ -60,7 +60,16 @@
 		"tm15": "Puzzle",
 		"tm16": "Gestione nodi",
 		"tm17": "Nuova scheda",
-		"tm18": "Aggiungi nuova scheda"
+		"tm18": "Aggiungi nuova scheda",
+		"tm19": "Aggiungi nuovo plugin",
+		"tm20": "Q-App",
+		"tm21": "Sito web",
+		"tm22": "Rimuovi plugin",
+		"tm23": "Sei sicuro di voler rimuovere questo plugin?",
+		"tm24": "Tipo di plug-in:",
+		"tm25": "Seleziona un tipo di plugin!",
+		"tm26": "Aggiungi nuovo plugin al menu",
+		"tm27": "Rimuovi plugin dal menu"
 	},
 	"login": {
 		"login": "Login",
--- a/core/language/jp.json
+++ b/core/language/jp.json
@ -62,7 +62,16 @@
 		"tm15": "パズル",
 		"tm16": "ノード管理",
 		"tm17": "新しいタブ",
-		"tm18": "新しいタブを追加"
+		"tm18": "新しいタブを追加",
+		"tm19": "新しいプラグインを追加",
+		"tm20": "Q-アプリ",
+		"tm21": "ウェブサイト",
+		"tm22": "プラグインを削除",
+		"tm23": "このプラグインを削除してもよろしいですか?",
+		"tm24": "プラグインの種類:",
+		"tm25": "プラグインの種類を選択してください!",
+		"tm26": "新しいプラグインをメニューに追加",
+		"tm27": "メニューからプラグインを削除"
 	},
 	"login": {
 		"login": "ログイン",
--- a/core/language/ko.json
+++ b/core/language/ko.json
@ -60,7 +60,16 @@
 		"tm15": "퍼즐",
 		"tm16": "노드 관리",
 		"tm17": "새 탭",
-		"tm18": "새 탭 추가"
+		"tm18": "새 탭 추가",
+		"tm19": "새 플러그인 추가",
+		"tm20": "Q-앱",
+		"tm21": "웹사이트",
+		"tm22": "플러그인 제거",
+		"tm23": "이 플러그인을 제거하시겠습니까?",
+		"tm24": "플러그인 유형:",
+		"tm25": "플러그인 유형을 선택하세요!",
+		"tm26": "메뉴에 새 플러그인 추가",
+		"tm27": "메뉴에서 플러그인 제거"
 	},
 	"login": {
 		"login": "로그인",
--- a/core/language/no.json
+++ b/core/language/no.json
@ -60,7 +60,16 @@
 		"tm15": "Puslespill",
 		"tm16": "Nodeadministrasjon",
 		"tm17": "Ny fane",
-		"tm18": "Legg til ny fane"
+		"tm18": "Legg til ny fane",
+		"tm19": "Legg til ny plugin",
+		"tm20": "Q-App",
+		"tm21": "Nettsted",
+		"tm22": "Fjern plugin",
+		"tm23": "Er du sikker på at du vil fjerne denne plugin?",
+		"tm24": "Plugin Type:",
+		"tm25": "Vennligst velg en plugin-type !",
+		"tm26": "Legg til ny plugin til menyen",
+		"tm27": "Fjern plugin fra menyen"
 	},
 	"login": {
 		"login": "Logg på",
--- a/core/language/pl.json
+++ b/core/language/pl.json
@ -60,7 +60,16 @@
 		"tm15": "Zagadki",
 		"tm16": "Zarządzanie węzłami",
 		"tm17": "Nowa karta",
-		"tm18": "Dodaj nową kartę"
+		"tm18": "Dodaj nową kartę",
+		"tm19": "Dodaj nową wtyczkę",
+		"tm20": "Q-Aplikacja",
+		"tm21": "Strona internetowa",
+		"tm22": "Usuń wtyczkę",
+		"tm23": "Czy na pewno chcesz usunąć tę wtyczkę?",
+		"tm24": "Typ wtyczki:",
+		"tm25": "Proszę wybrać typ wtyczki!",
+		"tm26": "Dodaj nową wtyczkę do menu",
+		"tm27": "Usuń wtyczkę z menu"
 	},
 	"login": {
 		"login": "Zaloguj się",
--- a/core/language/pt.json
+++ b/core/language/pt.json
@ -60,7 +60,16 @@
 		"tm15": "Quebra-cabeças",
 		"tm16": "Gerenciamento de nós",
 		"tm17": "Nova guia",
-		"tm18": "Adicionar nova guia"
+		"tm18": "Adicionar nova guia",
+		"tm19": "Adicionar novo plug-in",
+		"tm20": "Q-App",
+		"tm21": "Site",
+		"tm22": "Remover plug-in",
+		"tm23": "Tem certeza que deseja remover este plugin?",
+		"tm24": "Tipo de plug-in:",
+		"tm25": "Por favor, selecione um tipo de plugin!",
+		"tm26": "Adicionar novo plug-in ao menu",
+		"tm27": "Remover plug-in do menu"
 	},
 	"login": {
 		"login": "Login",
--- a/core/language/ro.json
+++ b/core/language/ro.json
@ -60,7 +60,16 @@
 		"tm15": "Puzzle-uri",
 		"tm16": "Gestionarea nodurilor",
 		"tm17": "Filă nouă",
-		"tm18": "Adăugați o filă nouă"
+		"tm18": "Adăugați o filă nouă",
+		"tm19": "Adăugați un plugin nou",
+		"tm20": "Q-App",
+		"tm21": "Site web",
+		"tm22": "Elimină pluginul",
+		"tm23": "Sunteți sigur că veți elimina acest plugin?",
+		"tm24": "Tip de plugin:",
+		"tm25": "Vă rugăm să selectați un tip de plugin !",
+		"tm26": "Adăugați un nou plugin la meniu",
+		"tm27": "Eliminați pluginul din meniu"
 	},
 	"login": {
 		"login": "Login",
--- a/core/language/rs.json
+++ b/core/language/rs.json
@ -60,7 +60,16 @@
 		"tm15": "Zagonetke",
 		"tm16": "Upravljanje čvorovima",
 		"tm17": "Nova kartica",
-		"tm18": "Dodaj novu karticu"
+		"tm18": "Dodaj novu karticu",
+		"tm19": "Dodaj novi dodatak",
+		"tm20": "Q-App",
+		"tm21": "Veb lokacija",
+		"tm22": "Ukloni dodatak",
+		"tm23": "Da li ste sigurni da uklonite ovaj dodatak?",
+		"tm24": "Tip dodatka:",
+		"tm25": "Molimo izaberite tip dodatka!",
+		"tm26": "Dodaj novi dodatak u meni",
+		"tm27": "Ukloni dodatak iz menija"
 	},
 	"login": {
 		"login": "Prijava",
--- a/core/language/ru.json
+++ b/core/language/ru.json
@ -60,7 +60,16 @@
 		"tm15": "Пазлы",
 		"tm16": "Управление узлом",
 		"tm17": "Новая вкладка",
-		"tm18": "Добавить новую вкладку"
+		"tm18": "Добавить новую вкладку",
+		"tm19": "Добавить новый плагин",
+		"tm20": "Q-приложение",
+		"tm21": "Веб-сайт",
+		"tm22": "Удалить плагин",
+		"tm23": "Вы действительно хотите удалить этот плагин?",
+		"tm24": "Тип плагина:",
+		"tm25": "Пожалуйста, выберите тип плагина!",
+		"tm26": "Добавить новый плагин в меню",
+		"tm27": "Удалить плагин из меню"
 	},
 	"login": {
 		"login": "Войти",
--- a/core/language/us.json
+++ b/core/language/us.json
@ -60,7 +60,16 @@
 		"tm15": "Puzzles",
 		"tm16": "Node Management",
 		"tm17": "New Tab",
-		"tm18": "Add New Tab"
+		"tm18": "Add New Tab",
+		"tm19": "Add New Plugin",
+		"tm20": "Q-App",
+		"tm21": "Website",
+		"tm22": "Remove Plugin",
+		"tm23": "Are you sure to remove this plugin ?",
+		"tm24": "Plugin Type:",
+		"tm25": "Please select a plugin type !",
+		"tm26": "Add New Plugin To Menu",
+		"tm27": "Remove Plugin From Menu"
 	},
 	"login": {
 		"login": "Log In",
--- a/core/language/zhc.json
+++ b/core/language/zhc.json
@ -60,7 +60,16 @@
 		"tm15": "拼图",
 		"tm16": "节点管理",
 		"tm17": "新标签",
-		"tm18": "添加新标签"
+		"tm18": "添加新标签",
+		"tm19": "添加新插件",
+		"tm20": "Q-应用程序",
+		"tm21": "网站",
+		"tm22": "删除插件",
+		"tm23": "你确定要删除这个插件吗？",
+		"tm24": "插件类型:",
+		"tm25": "请选择插件类型！",
+		"tm26": "添加新插件到菜单",
+		"tm27": "从菜单中删除插件"
 	},
 	"login": {
 		"login": "登入",
--- a/core/language/zht.json
+++ b/core/language/zht.json
@ -60,7 +60,16 @@
 		"tm15": "拼圖",
 		"tm16": "節點管理",
 		"tm17": "新標籤",
-		"tm18": "添加新標籤"
+		"tm18": "添加新標籤",
+		"tm19": "添加新插件",
+		"tm20": "Q-應用程序",
+		"tm21": "網站",
+		"tm22": "刪除插件",
+		"tm23": "你確定要刪除這個插件嗎？",
+		"tm24": "插件類型:",
+		"tm25": "請選擇插件類型！",
+		"tm26": "添加新插件到菜單",
+		"tm27": "從菜單中刪除插件"
 	},
 	"login": {
 		"login": "登入",
--- a/core/src/components/show-plugin.js
+++ b/core/src/components/show-plugin.js
@ -13,12 +13,17 @@ registerTranslateConfig({
  loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
 })

+import '@material/mwc-button'
+import '@material/mwc-dialog'
 import '@material/mwc-icon'
+import '@material/mwc-textfield'

 const chatLastSeen = localForage.createInstance({
    name: "chat-last-seen",
 })

+const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
+
 class ShowPlugin extends connect(store)(LitElement) {
    static get properties() {
        return {
@ -322,6 +327,8 @@ class ShowPlugin extends connect(store)(LitElement) {
                        title = html`${translate('tabmenu.tm15')}`
                    } else if (tab.myPlugObj && tab.myPlugObj.title === "Node Management") {
                        title = html`${translate('tabmenu.tm16')}`
+                    } else if (tab.myPlugObj && tab.myPlugObj.url === "myapp") {
+                        title = tab.myPlugObj && tab.myPlugObj.title
                    } else {
                        title = html`${translate('tabmenu.tm17')}`
                    }
@ -703,12 +710,30 @@ class NavBar extends connect(store)(LitElement) {
            menuList: { type: Array },
            newMenuList: { type: Array },
            myMenuList: { type: Array },
+            myMenuPlugins: { type: Array },
+            myApps: { type: Array },
            addressInfo: { type: Object },
-            changePage: { attribute: false }
+            changePage: { attribute: false },
+            pluginName: { type: String },
+            pluginType: { type: String },
+            mwcIcon: { type: String },
+            pluginNameToDelete: { type: String }
        }
    }

    static styles = css`
+        * {
+            --mdc-theme-primary: rgb(3, 169, 244);
+            --mdc-theme-surface: var(--white);
+            --mdc-text-field-outlined-idle-border-color: var(--txtfieldborder);
+            --mdc-text-field-outlined-hover-border-color: var(--txtfieldhoverborder);
+            --mdc-text-field-label-ink-color: var(--black);
+            --mdc-text-field-ink-color: var(--black);
+            --mdc-dialog-content-ink-color: var(--black);
+            --mdc-dialog-min-width: 300px;
+            --mdc-dialog-max-width: 700px;
+        }
+
        .parent {
            display: flex;
            flex-direction: column;
@ -775,7 +800,15 @@ class NavBar extends connect(store)(LitElement) {
            align-items: center;
            justify-content: center;
            gap: 10px;
-            cursor: pointer;
+        }
+
+        .text {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            display: block;
+            width: 100%;
+            min-width: 1px;
        }

        .app-list .app-icon span {
@ -801,6 +834,42 @@ class NavBar extends connect(store)(LitElement) {
        .menuIcon {
            color: var(--app-icon);
            --mdc-icon-size: 64px;
+            cursor: pointer;
+        }
+
+        .menuIconPos {
+            position: relative;
+            right: 26px;
+        }
+
+        .removeIcon {
+            color: var(--black);
+            --mdc-icon-size: 28px;
+            cursor: pointer;
+        }
+
+        .removeIcon:hover {
+            color: #C6011F;
+            font-weight: bold;
+        }
+
+        .removeIconPos {
+            position: relative;
+            top: -36px;
+            left: 62px;
+        }
+
+        .red {
+            --mdc-theme-primary: #F44336;
+        }
+
+        select {
+            padding: 10px 10px;
+            width: 100%;
+            font-size: 16px;
+            font-weight: 500;
+            background: var(--white);
+            color: var(--black);
        }
    `
    constructor() {
@ -808,7 +877,13 @@ class NavBar extends connect(store)(LitElement) {
        this.menuList = []
        this.newMenuList = []
        this.myMenuList = []
+        this.myMenuPlugins = []
        this.addressInfo = {}
+        this.pluginName = ''
+        this.pluginType = ''
+        this.myApps = ''
+        this.mwcIcon = ''
+        this.pluginNameToDelete = ''
    }

    render() {
@ -821,32 +896,103 @@ class NavBar extends connect(store)(LitElement) {
                <div>
                    <div class="app-list">
                        ${repeat(this.myMenuList, (plugin) => plugin.url, (plugin, index) => html`
-                            <div class="app-icon" @click=${() => {
-                                this.changePage(plugin)
-                            }}>
+                            <div class="app-icon">
                                <div class="app-icon-box">
-                                    <mwc-icon class="menuIcon">${plugin.mwcicon}</mwc-icon>
+                                    ${this.renderRemoveIcon(plugin.url, plugin.mwcicon, plugin.title, plugin)}
                                </div>
-                                ${this.renderTitle(plugin.url)}
+                                ${this.renderTitle(plugin.url, plugin.title)}
                            </div>
                        `)}
+                        <div class="app-icon" @click="${() => this.openAddNewPlugin()}">
+                            <div class="app-icon-box">
+                                <mwc-icon class="menuIcon">add</mwc-icon>
+                            </div>
+                            <span class="text">${translate("tabmenu.tm19")}</span>
+                        </div>
                    </div>
                </div>
            </div>
+            <mwc-dialog id="addNewPlugin" scrimClickAction="" escapeKeyAction="">
+                <div style="text-align:center">
+                    <h2>${translate("tabmenu.tm26")}</h2>
+                    <hr><br>
+                </div>
+                <p>
+                    ${translate("tabmenu.tm24")}
+                    <select required validationMessage="${translate("grouppage.gchange14")}" id="pluginTypeInput" label="${translate("tabmenu.tm24")}">
+                        <option value="reject" selected>${translate("grouppage.gchange15")}</option>
+                        <option value="0">${translate("tabmenu.tm20")}</option>
+                        <option value="1">${translate("tabmenu.tm21")}</option>
+                    </select>
+                </p>
+                <p>
+                    <mwc-textfield
+                        style="width: 100%; color: var(--black);"
+                        required
+                        outlined
+                        id="pluginNameInput"
+                        label="${translate("login.name")}"
+                        type="text"
+                    >
+                    </mwc-textfield>
+                </p>
+                <mwc-button
+                    slot="primaryAction"
+                    @click=${this.addToMyMenuPlugins}
+                >
+                    ${translate("tabmenu.tm19")}
+                </mwc-button>
+                <mwc-button
+                    slot="secondaryAction"
+                    dialogAction="cancel"
+                    class="red"
+                >
+                    ${translate("general.close")}
+                </mwc-button>
+            </mwc-dialog>
+            <mwc-dialog id="removePlugin" scrimClickAction="" escapeKeyAction="">
+                <div style="text-align:center">
+                    <h2>${translate("tabmenu.tm27")}</h2>
+                    <hr><br>
+                </div>
+                <p style="text-align:center">${translate("tabmenu.tm23")}</p>
+                <h3 style="text-align:center">${this.pluginNameToDelete}</h3>
+                <mwc-button
+                    slot="primaryAction"
+                    @click=${this.removeAppFromArray}
+                >
+                    ${translate("general.yes")}
+                </mwc-button>
+                <mwc-button
+                    slot="secondaryAction"
+                    dialogAction="cancel"
+                    class="red"
+                >
+                    ${translate("general.no")}
+                </mwc-button>
+            </mwc-dialog>
        `
    }

-    firstUpdated() {
+    async firstUpdated() {
+        addPluginRoutes(parentEpml)
+        parentEpml.imReady()
+
        const addressInfo = this.addressInfo
        const isMinter = addressInfo?.error !== 124 && +addressInfo?.level > 0
        const isSponsor = +addressInfo?.level >= 5
+        const appDelay = ms => new Promise(res => setTimeout(res, ms))
+
+        await appDelay(50)
+
+        await this.checkMyMenuPlugins()

        if (!isMinter) {
-            this.newMenuList = this.menuList.filter((minter) => {
+            this.newMenuList = this.myMenuPlugins.filter((minter) => {
                return minter.url !== 'minting'
            })
        } else {
-            this.newMenuList = this.menuList.filter((minter) => {
+            this.newMenuList = this.myMenuPlugins.filter((minter) => {
                return minter.url !== 'become-minter'
            })
        }
@ -860,7 +1006,165 @@ class NavBar extends connect(store)(LitElement) {
        }
    }

-    renderTitle(theUrl) {
+    async checkMyMenuPlugins() {
+        const appDelay = ms => new Promise(res => setTimeout(res, ms))
+
+        if (localStorage.getItem("myMenuPlugs") === null) {
+            await appDelay(1000)
+            const myObj = JSON.stringify(this.menuList)
+            localStorage.setItem("myMenuPlugs", myObj)
+        } else {
+            this.myMenuPlugins = JSON.parse(localStorage.getItem("myMenuPlugs") || "[]")
+        }
+    }
+
+    openAddNewPlugin() {
+        this.shadowRoot.getElementById("pluginTypeInput").value = 'reject'
+        this.shadowRoot.getElementById("pluginNameInput").value = ''
+        this.shadowRoot.querySelector('#addNewPlugin').show()
+    }
+
+    async addToMyMenuPlugins() {
+        this.mwcIcon = ''
+        this.pluginType = this.shadowRoot.getElementById("pluginTypeInput").value
+        this.pluginName = this.shadowRoot.getElementById('pluginNameInput').value
+
+        var oldMenuPlugs = JSON.parse(localStorage.getItem("myMenuPlugs") || "[]")
+
+        if (this.pluginType === "reject") {
+            let myplugerr = get("tabmenu.tm25")
+            parentEpml.request('showSnackBar', `${myplugerr}`)
+            return false
+        } else if (this.pluginType === "0") {
+            if (this.pluginName === "Q-Blog") {
+                this.mwcIcon = 'rss_feed'
+            } else if (this.pluginName === "Q-Mail") {
+                this.mwcIcon = 'mail'
+            } else {
+                this.mwcIcon = 'apps'
+            }
+
+            const newMenuPlugsItem = {
+                "url": "myapp",
+                "domain": "core",
+                "page": `qdn/browser/index.html?name=${this.pluginName}&service=APP`,
+                "title": this.pluginName,
+                "icon": "vaadin:external-browser",
+                "mwcicon": this.mwcIcon,
+                "menus": [],
+                "parent": false
+            }
+
+            const validatePluginName = async () => {
+                if (this.pluginName.length === 0) {
+                    let myplugstring1 = get("walletpage.wchange50")
+                    parentEpml.request('showSnackBar', `${myplugstring1}`)
+                    return false
+                }
+
+                let myPluginName = false
+                this.myPluginNameRes = []
+
+                await parentEpml.request('apiCall', {
+                    url: `/arbitrary/resources/search?service=APP&query=${this.pluginName}&exactmatchnames=true&limit=1`
+                }).then(res => {
+                    this.myPluginNameRes = res
+                })
+
+                if (this.myPluginNameRes === undefined || this.myPluginNameRes.length == 0 ) {
+                    myPluginName = false
+                } else {
+                    myPluginName = true
+                }
+                return myPluginName
+            }
+
+            let myNameRes = await validatePluginName()
+
+            if (myNameRes !== false) {
+                oldMenuPlugs.push(newMenuPlugsItem)
+
+                localStorage.setItem("myMenuPlugs", JSON.stringify(oldMenuPlugs))
+
+                let myplugstring2 = get("walletpage.wchange52")
+                parentEpml.request('showSnackBar', `${myplugstring2}`)
+
+                this.closeAddNewPlugin()
+
+                this.myMenuPlugins = JSON.parse(localStorage.getItem("myMenuPlugs") || "[]")
+                this.firstUpdated()
+            } else {
+                let myplugstring3 = get("websitespage.schange17")
+                parentEpml.request('showSnackBar', `${myplugstring3}`)
+                return false
+            }
+        } else if (this.pluginType === "1") {
+            this.mwcIcon = 'web'
+
+            const newMenuPlugsItem = {
+                "url": "myapp",
+                "domain": "core",
+                "page": `qdn/browser/index.html?name=${this.pluginName}&service=WEBSITE`,
+                "title": this.pluginName,
+                "icon": "vaadin:external-browser",
+                "mwcicon": this.mwcIcon,
+                "menus": [],
+                "parent": false
+            }
+
+            const validatePluginName = async () => {
+                if (this.pluginName.length === 0) {
+                    let myplugstring1 = get("walletpage.wchange50")
+                    parentEpml.request('showSnackBar', `${myplugstring1}`)
+                    return false
+                }
+
+                let myPluginName = false
+                this.myPluginNameRes = []
+
+                await parentEpml.request('apiCall', {
+                    url: `/arbitrary/resources/search?service=WEBSITE&query=${this.pluginName}&exactmatchnames=true&limit=1`
+                }).then(res => {
+                    this.myPluginNameRes = res
+                })
+
+                if (this.myPluginNameRes === undefined || this.myPluginNameRes.length == 0 ) {
+                    myPluginName = false
+                } else {
+                    myPluginName = true
+                }
+                return myPluginName
+            }
+
+            let myNameRes = await validatePluginName()
+
+            if (myNameRes !== false) {
+                oldMenuPlugs.push(newMenuPlugsItem)
+
+                localStorage.setItem("myMenuPlugs", JSON.stringify(oldMenuPlugs))
+
+                let myplugstring2 = get("walletpage.wchange52")
+                parentEpml.request('showSnackBar', `${myplugstring2}`)
+
+                this.closeAddNewPlugin()
+
+                this.myMenuPlugins = JSON.parse(localStorage.getItem("myMenuPlugs") || "[]")
+                this.firstUpdated()
+            } else {
+                let myplugstring3 = get("websitespage.schange17")
+                parentEpml.request('showSnackBar', `${myplugstring3}`)
+                return false
+            }
+        }
+    }
+
+    closeAddNewPlugin() {
+        this.shadowRoot.querySelector('#addNewPlugin').close()
+        this.shadowRoot.getElementById("pluginTypeInput").value = 'reject'
+        this.shadowRoot.getElementById("pluginNameInput").value = ''
+    }
+
+    renderTitle(theUrl, theName) {
        if (theUrl === 'minting') {
            return html`<span>${translate('tabmenu.tm1')}</span>`
        } else if (theUrl === 'become-minter') {
@ -893,9 +1197,49 @@ class NavBar extends connect(store)(LitElement) {
            return html`<span>${translate('tabmenu.tm15')}</span>`
        } else if (theUrl === 'node-management') {
            return html`<span>${translate('tabmenu.tm16')}</span>`
+        } else {
+            return html`<span>${theName}</span>`
        }
    }

+    renderRemoveIcon(appurl, appicon, appname, appplugin) {
+        if (appurl === 'myapp') {
+            return html`
+                <div class="removeIconPos" @click="${() => this.openRemoveApp(appname)}">
+                    <mwc-icon class="removeIcon">backspace</mwc-icon>
+                </div>
+                <div class="menuIconPos" @click="${() => this.changePage(appplugin)}">
+                    <mwc-icon class="menuIcon">${appicon}</mwc-icon>
+                </div>
+            `
+        } else {
+            return html`<mwc-icon class="menuIcon" @click="${() => this.changePage(appplugin)}">${appicon}</mwc-icon>`
+        }
+    }
+
+    openRemoveApp(pluginNameTD) {
+        this.pluginNameToDelete = ''
+        this.pluginNameToDelete = pluginNameTD
+        this.shadowRoot.querySelector('#removePlugin').show()
+    }
+
+    removeAppFromArray() {
+        const pluginToRemove = this.pluginNameToDelete
+        this.newMenuFilter = []
+        this.newMenuFilter = this.myMenuList.filter((item) => item.title !== pluginToRemove)
+        const myNewObj = JSON.stringify(this.newMenuFilter)
+        localStorage.removeItem("myMenuPlugs")
+        localStorage.setItem("myMenuPlugs", myNewObj)
+        this.myMenuPlugins = JSON.parse(localStorage.getItem("myMenuPlugs") || "[]")
+        this.firstUpdated()
+        this.closeRemoveApp()
+    }
+
+    closeRemoveApp() {
+        this.shadowRoot.querySelector('#removePlugin').close()
+        this.pluginNameToDelete = ''
+    }
+
    async extractComponents(url) {
        if (!url.startsWith("qortal://")) {
            return null
@ -989,9 +1333,7 @@ class NavBar extends connect(store)(LitElement) {
            const value = this.shadowRoot.getElementById('linkInput').value
            this.getQuery(value)
        } catch (error) {
-
        }
-
    }

    async _handleKeyDown(e) {
@ -1000,9 +1342,7 @@ class NavBar extends connect(store)(LitElement) {
                const value = this.shadowRoot.getElementById('linkInput').value
                this.getQuery(value)
            } catch (error) {
-
            }
-
        }
    }