From 788acc9abed639d48f4256eea97f4db2dbd3d785 Mon Sep 17 00:00:00 2001
From: AlphaX-Projects <77661270+AlphaX-Projects@users.noreply.github.com>
Date: Thu, 13 Jul 2023 11:26:14 +0200
Subject: [PATCH] Update Apps and Website page

---
 .../functional-components/settings-page.js    |   2 +-
 package-lock.json                             | 137 ++++++++----------
 package.json                                  |   6 +-
 plugins/plugins/core/q-app/q-apps.src.js      | 117 ++++++++-------
 plugins/plugins/core/qdn/websites.src.js      | 110 ++++++++------
 5 files changed, 195 insertions(+), 177 deletions(-)

diff --git a/core/src/functional-components/settings-page.js b/core/src/functional-components/settings-page.js
index a48b3466..31b3b330 100644
--- a/core/src/functional-components/settings-page.js
+++ b/core/src/functional-components/settings-page.js
@@ -2,7 +2,7 @@ import { LitElement, html, css } from 'lit'
 import { connect } from 'pwa-helpers'
 import { store } from '../store.js'
 import { doAddNode, doSetNode, doLoadNodeConfig } from '../redux/app/app-actions.js'
-import { use, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
+import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
 import snackbar from './snackbar.js'
 import '../components/language-selector.js'
 import '../custom-elements/frag-file-input.js'
diff --git a/package-lock.json b/package-lock.json
index ee0aaf75..72c2c6c2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -50,7 +50,7 @@
 				"short-unique-id": "4.4.4"
 			},
 			"devDependencies": {
-				"@babel/core": "7.22.8",
+				"@babel/core": "7.22.9",
 				"@material/mwc-button": "0.27.0",
 				"@material/mwc-checkbox": "0.27.0",
 				"@material/mwc-dialog": "0.27.0",
@@ -99,9 +99,9 @@
 				"@vaadin/icons": "24.1.3",
 				"@vaadin/password-field": "24.1.3",
 				"@vaadin/tooltip": "24.1.3",
-				"@zip.js/zip.js": "2.7.17",
+				"@zip.js/zip.js": "2.7.20",
 				"axios": "1.4.0",
-				"electron": "25.2.0",
+				"electron": "25.3.0",
 				"electron-builder": "24.4.0",
 				"electron-packager": "17.1.1",
 				"epml": "0.3.3",
@@ -149,33 +149,33 @@
 			}
 		},
 		"node_modules/@babel/compat-data": {
-			"version": "7.22.6",
-			"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.6.tgz",
-			"integrity": "sha512-29tfsWTq2Ftu7MXmimyC0C5FDZv5DYxOZkh3XD3+QW4V/BYuv/LyEsjj3c0hqedEaDt6DBfDvexMKU8YevdqFg==",
+			"version": "7.22.9",
+			"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.9.tgz",
+			"integrity": "sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==",
 			"engines": {
 				"node": ">=6.9.0"
 			}
 		},
 		"node_modules/@babel/core": {
-			"version": "7.22.8",
-			"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.8.tgz",
-			"integrity": "sha512-75+KxFB4CZqYRXjx4NlR4J7yGvKumBuZTmV4NV6v09dVXXkuYVYLT68N6HCzLvfJ+fWCxQsntNzKwwIXL4bHnw==",
+			"version": "7.22.9",
+			"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.9.tgz",
+			"integrity": "sha512-G2EgeufBcYw27U4hhoIwFcgc1XU7TlXJ3mv04oOv1WCuo900U/anZSPzEqNjwdjgffkk2Gs0AN0dW1CKVLcG7w==",
 			"dependencies": {
 				"@ampproject/remapping": "^2.2.0",
 				"@babel/code-frame": "^7.22.5",
-				"@babel/generator": "^7.22.7",
-				"@babel/helper-compilation-targets": "^7.22.6",
-				"@babel/helper-module-transforms": "^7.22.5",
+				"@babel/generator": "^7.22.9",
+				"@babel/helper-compilation-targets": "^7.22.9",
+				"@babel/helper-module-transforms": "^7.22.9",
 				"@babel/helpers": "^7.22.6",
 				"@babel/parser": "^7.22.7",
 				"@babel/template": "^7.22.5",
 				"@babel/traverse": "^7.22.8",
 				"@babel/types": "^7.22.5",
-				"@nicolo-ribaudo/semver-v6": "^6.3.3",
 				"convert-source-map": "^1.7.0",
 				"debug": "^4.1.0",
 				"gensync": "^1.0.0-beta.2",
-				"json5": "^2.2.2"
+				"json5": "^2.2.2",
+				"semver": "^6.3.1"
 			},
 			"engines": {
 				"node": ">=6.9.0"
@@ -186,9 +186,9 @@
 			}
 		},
 		"node_modules/@babel/generator": {
-			"version": "7.22.7",
-			"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.7.tgz",
-			"integrity": "sha512-p+jPjMG+SI8yvIaxGgeW24u7q9+5+TGpZh8/CuB7RhBKd7RCy8FayNEFNNKrNK/eUcY/4ExQqLmyrvBXKsIcwQ==",
+			"version": "7.22.9",
+			"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.9.tgz",
+			"integrity": "sha512-KtLMbmicyuK2Ak/FTCJVbDnkN1SlT8/kceFTiuDiiRUUSMnHMidxSCdG4ndkTOHHpoomWe/4xkvHkEOncwjYIw==",
 			"dependencies": {
 				"@babel/types": "^7.22.5",
 				"@jridgewell/gen-mapping": "^0.3.2",
@@ -200,15 +200,15 @@
 			}
 		},
 		"node_modules/@babel/helper-compilation-targets": {
-			"version": "7.22.6",
-			"resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.6.tgz",
-			"integrity": "sha512-534sYEqWD9VfUm3IPn2SLcH4Q3P86XL+QvqdC7ZsFrzyyPF3T4XGiVghF6PTYNdWg6pXuoqXxNQAhbYeEInTzA==",
+			"version": "7.22.9",
+			"resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.9.tgz",
+			"integrity": "sha512-7qYrNM6HjpnPHJbopxmb8hSPoZ0gsX8IvUS32JGVoy+pU9e5N0nLr1VjJoR6kA4d9dmGLxNYOjeB8sUDal2WMw==",
 			"dependencies": {
-				"@babel/compat-data": "^7.22.6",
+				"@babel/compat-data": "^7.22.9",
 				"@babel/helper-validator-option": "^7.22.5",
-				"@nicolo-ribaudo/semver-v6": "^6.3.3",
 				"browserslist": "^4.21.9",
-				"lru-cache": "^5.1.1"
+				"lru-cache": "^5.1.1",
+				"semver": "^6.3.1"
 			},
 			"engines": {
 				"node": ">=6.9.0"
@@ -260,21 +260,21 @@
 			}
 		},
 		"node_modules/@babel/helper-module-transforms": {
-			"version": "7.22.5",
-			"resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.5.tgz",
-			"integrity": "sha512-+hGKDt/Ze8GFExiVHno/2dvG5IdstpzCq0y4Qc9OJ25D4q3pKfiIP/4Vp3/JvhDkLKsDK2api3q3fpIgiIF5bw==",
+			"version": "7.22.9",
+			"resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.9.tgz",
+			"integrity": "sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==",
 			"dependencies": {
 				"@babel/helper-environment-visitor": "^7.22.5",
 				"@babel/helper-module-imports": "^7.22.5",
 				"@babel/helper-simple-access": "^7.22.5",
-				"@babel/helper-split-export-declaration": "^7.22.5",
-				"@babel/helper-validator-identifier": "^7.22.5",
-				"@babel/template": "^7.22.5",
-				"@babel/traverse": "^7.22.5",
-				"@babel/types": "^7.22.5"
+				"@babel/helper-split-export-declaration": "^7.22.6",
+				"@babel/helper-validator-identifier": "^7.22.5"
 			},
 			"engines": {
 				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
 			}
 		},
 		"node_modules/@babel/helper-plugin-utils": {
@@ -2450,14 +2450,6 @@
 				"tslib": "^2.1.0"
 			}
 		},
-		"node_modules/@nicolo-ribaudo/semver-v6": {
-			"version": "6.3.3",
-			"resolved": "https://registry.npmjs.org/@nicolo-ribaudo/semver-v6/-/semver-v6-6.3.3.tgz",
-			"integrity": "sha512-3Yc1fUTs69MG/uZbJlLSI3JISMn2UV2rg+1D/vROUqZyh3l6iYHCs7GMp+M40ZD7yOdDbYjJcU1oTJhrc+dGKg==",
-			"bin": {
-				"semver": "bin/semver.js"
-			}
-		},
 		"node_modules/@npmcli/fs": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-3.1.0.tgz",
@@ -4066,18 +4058,18 @@
 			"dev": true
 		},
 		"node_modules/@xmldom/xmldom": {
-			"version": "0.8.8",
-			"resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.8.tgz",
-			"integrity": "sha512-0LNz4EY8B/8xXY86wMrQ4tz6zEHZv9ehFMJPm8u2gq5lQ71cfRKdaKyxfJAx5aUoyzx0qzgURblTisPGgz3d+Q==",
+			"version": "0.8.9",
+			"resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.9.tgz",
+			"integrity": "sha512-4VSbbcMoxc4KLjb1gs96SRmi7w4h1SF+fCoiK0XaQX62buCc1G5d0DC5bJ9xJBNPDSVCmIrcl8BiYxzjrqaaJA==",
 			"dev": true,
 			"engines": {
 				"node": ">=10.0.0"
 			}
 		},
 		"node_modules/@zip.js/zip.js": {
-			"version": "2.7.17",
-			"resolved": "https://registry.npmjs.org/@zip.js/zip.js/-/zip.js-2.7.17.tgz",
-			"integrity": "sha512-Y7GSkZTHaol4AC4pSsnxuw2LnYrI+j2VZsPwnARocLYzmRW7qnUAZ20rWeNeJNH6yfag56UdbxztYyxpuazUCQ==",
+			"version": "2.7.20",
+			"resolved": "https://registry.npmjs.org/@zip.js/zip.js/-/zip.js-2.7.20.tgz",
+			"integrity": "sha512-rh5cby/bBOYC+hcK9qElDzbiIDeL3nhHPUTIE6/FQZR8mhY7azpthPdYbSNMOYBfv0AM188RNJ2yjtXsUfbAuQ==",
 			"dev": true,
 			"engines": {
 				"deno": ">=1.0.0",
@@ -4870,9 +4862,9 @@
 			}
 		},
 		"node_modules/cacache/node_modules/glob": {
-			"version": "10.3.2",
-			"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.2.tgz",
-			"integrity": "sha512-vsuLzB3c/uyDLLEdBZtT8vGnN0z57rwOxHV2oYZib/7HWmBspUaja/McYIobBjC4qaUTuNpUyFO2IdqM4DZIJA==",
+			"version": "10.3.3",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.3.tgz",
+			"integrity": "sha512-92vPiMb/iqpmEgsOoIDvTjc50wf9CCCvMzsi6W0JLPeUKE8TWP1a73PgqSrqy7iAZxaSD1YdzU7QZR5LF51MJw==",
 			"dev": true,
 			"dependencies": {
 				"foreground-child": "^3.1.0",
@@ -4943,9 +4935,9 @@
 			}
 		},
 		"node_modules/caniuse-lite": {
-			"version": "1.0.30001513",
-			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001513.tgz",
-			"integrity": "sha512-pnjGJo7SOOjAGytZZ203Em95MRM8Cr6jhCXNF/FAXTpCTRTECnqQWLpiTRqrFtdYcth8hf4WECUpkezuYsMVww==",
+			"version": "1.0.30001515",
+			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001515.tgz",
+			"integrity": "sha512-eEFDwUOZbE24sb+Ecsx3+OvNETqjWIdabMy52oOkIgcUtAsQifjUG9q4U9dgTHJM2mfk4uEPxc0+xuFdJ629QA==",
 			"funding": [
 				{
 					"type": "opencollective",
@@ -5767,9 +5759,9 @@
 			}
 		},
 		"node_modules/electron": {
-			"version": "25.2.0",
-			"resolved": "https://registry.npmjs.org/electron/-/electron-25.2.0.tgz",
-			"integrity": "sha512-I/rhcW2sV2fyiveVSBr2N7v5ZiCtdGY0UiNCDZgk2fpSC+irQjbeh7JT2b4vWmJ2ogOXBjqesrN9XszTIG6DHg==",
+			"version": "25.3.0",
+			"resolved": "https://registry.npmjs.org/electron/-/electron-25.3.0.tgz",
+			"integrity": "sha512-cyqotxN+AroP5h2IxUsJsmehYwP5LrFAOO7O7k9tILME3Sa1/POAg3shrhx4XEnaAMyMqMLxzGvkzCVxzEErnA==",
 			"dev": true,
 			"hasInstallScript": true,
 			"dependencies": {
@@ -6170,9 +6162,9 @@
 			}
 		},
 		"node_modules/electron-to-chromium": {
-			"version": "1.4.454",
-			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.454.tgz",
-			"integrity": "sha512-pmf1rbAStw8UEQ0sr2cdJtWl48ZMuPD9Sto8HVQOq9vx9j2WgDEN6lYoaqFvqEHYOmGA9oRGn7LqWI9ta0YugQ=="
+			"version": "1.4.459",
+			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.459.tgz",
+			"integrity": "sha512-XXRS5NFv8nCrBL74Rm3qhJjA2VCsRFx0OjHKBMPI0otij56aun8UWiKTDABmd5/7GTR021pA4wivs+Ri6XCElg=="
 		},
 		"node_modules/electron-updater": {
 			"version": "6.1.1",
@@ -6416,9 +6408,9 @@
 			}
 		},
 		"node_modules/execa/node_modules/semver": {
-			"version": "5.7.1",
-			"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-			"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+			"version": "5.7.2",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+			"integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
 			"bin": {
 				"semver": "bin/semver"
 			}
@@ -7226,9 +7218,9 @@
 			"integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
 		},
 		"node_modules/immutable": {
-			"version": "4.3.0",
-			"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
-			"integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg=="
+			"version": "4.3.1",
+			"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.1.tgz",
+			"integrity": "sha512-lj9cnmB/kVS0QHsJnYKD1uo3o39nrbKxszjnqS9Fr6NB7bZzW45U6WSGBPKXDL/CvDKqDNPA4r3DoDQ8GTxo2A=="
 		},
 		"node_modules/imurmurhash": {
 			"version": "0.1.4",
@@ -8644,9 +8636,9 @@
 			"dev": true
 		},
 		"node_modules/normalize-package-data/node_modules/semver": {
-			"version": "5.7.1",
-			"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-			"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+			"version": "5.7.2",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+			"integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
 			"dev": true,
 			"bin": {
 				"semver": "bin/semver"
@@ -9856,10 +9848,9 @@
 			"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
 		},
 		"node_modules/semver": {
-			"version": "6.3.0",
-			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-			"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-			"dev": true,
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
 			"bin": {
 				"semver": "bin/semver.js"
 			}
@@ -10471,9 +10462,9 @@
 			}
 		},
 		"node_modules/terser": {
-			"version": "5.18.2",
-			"resolved": "https://registry.npmjs.org/terser/-/terser-5.18.2.tgz",
-			"integrity": "sha512-Ah19JS86ypbJzTzvUCX7KOsEIhDaRONungA4aYBjEP3JZRf4ocuDzTg4QWZnPn9DEMiMYGJPiSOy7aykoCc70w==",
+			"version": "5.19.0",
+			"resolved": "https://registry.npmjs.org/terser/-/terser-5.19.0.tgz",
+			"integrity": "sha512-JpcpGOQLOXm2jsomozdMDpd5f8ZHh1rR48OFgWUH3QsyZcfPgv2qDCYbcDEAYNd4OZRj2bWYKpwdll/udZCk/Q==",
 			"dev": true,
 			"dependencies": {
 				"@jridgewell/source-map": "^0.3.3",
diff --git a/package.json b/package.json
index 0a501ad9..3ab6945e 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
 	},
 	"devDependencies": {
 		"axios": "1.4.0",
-		"electron": "25.2.0",
+		"electron": "25.3.0",
 		"electron-builder": "24.4.0",
 		"electron-packager": "17.1.1",
 		"epml": "0.3.3",
@@ -91,7 +91,7 @@
 		"rollup-plugin-progress": "1.1.2",
 		"rollup-plugin-scss": "3.0.0",
 		"shelljs": "0.8.5",
-		"@babel/core": "7.22.8",
+		"@babel/core": "7.22.9",
 		"@material/mwc-button": "0.27.0",
 		"@material/mwc-checkbox": "0.27.0",
 		"@material/mwc-dialog": "0.27.0",
@@ -140,7 +140,7 @@
 		"@vaadin/icons": "24.1.3",
 		"@vaadin/password-field": "24.1.3",
 		"@vaadin/tooltip": "24.1.3",
-		"@zip.js/zip.js": "2.7.17"
+		"@zip.js/zip.js": "2.7.20"
 	},
 	"engines": {
 		"node": ">=18.14.0"
diff --git a/plugins/plugins/core/q-app/q-apps.src.js b/plugins/plugins/core/q-app/q-apps.src.js
index 2357c4d2..43676494 100644
--- a/plugins/plugins/core/q-app/q-apps.src.js
+++ b/plugins/plugins/core/q-app/q-apps.src.js
@@ -9,6 +9,7 @@ registerTranslateConfig({
   loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
 })
 
+import '@material/mwc-dialog'
 import '@material/mwc-icon'
 import '@material/mwc-button'
 import '@material/mwc-tab-bar'
@@ -50,7 +51,16 @@ class QApps extends LitElement {
             * {
                 --mdc-theme-primary: rgb(3, 169, 244);
                 --mdc-button-disabled-fill-color: rgba(3, 169, 244, 0.5);
-
+                --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-shape-radius: 25px;
+                --mdc-dialog-min-width: 300px;
+                --mdc-dialog-max-width: auto;
+                --mdc-dialog-max-height: 700px;
                 --paper-input-container-focus-color: var(--mdc-theme-primary);
                 --lumo-primary-text-color: rgb(0, 167, 245);
                 --lumo-primary-color-50pct: rgba(0, 167, 245, 0.5);
@@ -380,49 +390,10 @@ class QApps extends LitElement {
                 <div id="tabs-1-content">
                     <div id="tab-browse-content">
 	                  <div style="min-height:48px; display: flex; padding-bottom: 6px; margin: 2px;">
-        	                <h2 style="margin: 0; flex: 1; padding-top: .5em; display: inline;">${translate("appspage.schange1")}</h2>
-                	          <h2 style="margin: 0; flex: 1; padding-top: .5em; display: inline;">${this.renderPublishButton()}</h2>
+        	                <h2 style="margin: 0; padding-top: .5em; display: inline;">${translate("appspage.schange1")}</h2>
+                	        <h2 style="margin: 0; flex: 6; padding-top: .5em; display: inline;">${this.renderSearchButton()}</h2>
+                	        <h2 style="margin: 0; padding-top: .5em; display: inline;">${this.renderPublishButton()}</h2>
 	                  </div>
-        	            <div class="divCard">
-                    	    <h3 style="margin: 0; margin-bottom: 1em; text-align: left;">${translate("appspage.schange4")}</h3>
-	                      <div id="search">
-	                          <vaadin-text-field theme="medium" id="searchName" placeholder="${translate("appspage.schange33")}" value="${this.searchName}" @keydown="${this.searchListener}" clear-button-visible>
-	                              <vaadin-icon slot="prefix" icon="vaadin:user"></vaadin-icon>
-	                          </vaadin-text-field>&nbsp;&nbsp;<br>
-	                          <vaadin-button theme="medium" @click="${(e) => this.doSearch(e)}">
-	                              <vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
-	                              ${translate("appspage.schange35")}
-	                          </vaadin-button>
-	                      </div><br />
-	                      <vaadin-grid theme="wrap-cell-content" id="searchResourcesGrid" ?hidden="${this.isEmptyArray(this.searchResources)}" .items="${this.searchResources}" aria-label="Search apps" all-rows-visible>
-	                          <vaadin-grid-column width="7rem" flex-grow="0" header="${translate("appspage.schange5")}" .renderer=${(root, column, data) => {
-	                              render(html`${this.renderAvatar(data.item)}`, root)
-    	                          }}>
-	                          </vaadin-grid-column>
-	                          <vaadin-grid-column header="${translate("appspage.schange6")}" .renderer=${(root, column, data) => {
-	                              render(html`${this.renderInfo(data.item)}`, root)
-	                          }}>
-	                          </vaadin-grid-column>
-                               <vaadin-grid-column width="12rem" flex-grow="0" header="${translate("appspage.schange7")}" .renderer=${(root, column, data) => {
-	                              render(html`${this.renderPublishedBy(data.item)}`, root)
-	                          }}>
-	                          </vaadin-grid-column>
-                               <vaadin-grid-column width="14rem" flex-grow="0" header="" .renderer=${(root, column, data) => {
-                                   render(html`${this.renderDownload(data.item)}`, root)
-                               }}>
-                               </vaadin-grid-column>
-	                          <vaadin-grid-column width="10rem" flex-grow="0" header="${translate("appspage.schange8")}" .renderer=${(root, column, data) => {
-	                              render(html`${this.renderFollowUnfollowButton(data.item)}`, root);
-	                          }}>
-	                          </vaadin-grid-column>
-	                          <vaadin-grid-column width="10rem" flex-grow="0" header="" .renderer=${(root, column, data) => {
-	                              render(html`${this.renderBlockUnblockButton(data.item)}`, root);
-	                          }}>
-	                          </vaadin-grid-column>
-	                      </vaadin-grid><br />
-	                  </div>
-	                  <div class="divCard">
-	                      <h3 style="margin: 0; margin-bottom: 1em; text-align: center;">${translate("appspage.schange9")}</h3>
 	                      <vaadin-grid theme="wrap-cell-content" id="resourcesGrid" ?hidden="${this.isEmptyArray(this.pageRes)}" .items="${this.pageRes}" aria-label="apps" all-rows-visible>
 	                          <vaadin-grid-column width="7rem" flex-grow="0" header="${translate("appspage.schange5")}" .renderer=${(root, column, data) => {
 	                              render(html`${this.renderAvatar(data.item)}`, root)
@@ -456,15 +427,14 @@ class QApps extends LitElement {
 	                      ${this.isEmptyArray(this.pageRes) ? html`
 	                          <span style="color: var(--black);">${translate("appspage.schange10")}</span>
 	                      ` : ''}
-	                  </div>
 	                  ${this.renderRelayModeText()}<br>
 	              </div>
                     <div id="tab-followed-content">
 	                  <div style="min-height:48px; display: flex; padding-bottom: 6px; margin: 2px;">
-                            <h2 style="margin: 0; flex: 1; padding-top: .5em; display: inline;">${translate("appspage.schange11")}</h2>
-              	          <h2 style="margin: 0; flex: 1; padding-top: .5em; display: inline;">${this.renderPublishButton()}</h2>
+                              <h2 style="margin: 0; padding-top: .5em; display: inline;">${translate("appspage.schange11")}</h2>
+                	      <h2 style="margin: 0; flex: 6; padding-top: .5em; display: inline;">${this.renderSearchButton()}</h2>
+                	      <h2 style="margin: 0; padding-top: .5em; display: inline;">${this.renderPublishButton()}</h2>
 	                  </div>
-	                  <div class="divCard">
 	                      <h3 style="margin: 0; margin-bottom: 1em; text-align: center;">${translate("appspage.schange12")}</h3>
 	                      <vaadin-grid theme="wrap-cell-content" id="followedResourcesGrid" ?hidden="${this.isEmptyArray(this.followedResources)}" .items="${this.followedResources}" aria-label="Followed apps" all-rows-visible>
                                 <vaadin-grid-column width="7rem" flex-grow="0" header="${translate("appspage.schange5")}" .renderer=${(root, column, data) => {
@@ -494,15 +464,14 @@ class QApps extends LitElement {
 	                      ${this.isEmptyArray(this.followedResources) ? html`
 	                          <span style="color: var(--black);">${translate("appspage.schange13")}</span>
 	                      ` : ''}
-	                  </div>
 	                  ${this.renderRelayModeText()}
 	              </div>
                     <div id="tab-blocked-content">
 	                  <div style="min-height:48px; display: flex; padding-bottom: 6px; margin: 2px;">
-        	                <h2 style="margin: 0; flex: 1; padding-top: .5em; display: inline;">${translate("appspage.schange14")}</h2>
-                	          <h2 style="margin: 0; flex: 1; padding-top: .5em; display: inline;">${this.renderPublishButton()}</h2>
+        	                <h2 style="margin: 0; padding-top: .5em; display: inline;">${translate("appspage.schange14")}</h2>
+                	        <h2 style="margin: 0; flex: 6; padding-top: .5em; display: inline;">${this.renderSearchButton()}</h2>
+                	        <h2 style="margin: 0; padding-top: .5em; display: inline;">${this.renderPublishButton()}</h2>
 	                  </div>
-	                  <div class="divCard">
 	                      <h3 style="margin: 0; margin-bottom: 1em; text-align: center;">${translate("appspage.schange15")}</h3>
 	                      <vaadin-grid theme="wrap-cell-content" id="blockedResourcesGrid" ?hidden="${this.isEmptyArray(this.blockedResources)}" .items="${this.blockedResources}" aria-label="Blocked apps" all-rows-visible>
                                 <vaadin-grid-column width="7rem" flex-grow="0" header="${translate("appspage.schange5")}" .renderer=${(root, column, data) => {
@@ -528,12 +497,44 @@ class QApps extends LitElement {
 	                      ${this.isEmptyArray(this.blockedResources) ? html`
 	                          <span style="color: var(--black);">${translate("appspage.schange16")}</span>
 	                      ` : ''}
-	                  </div>
 	                  ${this.renderRelayModeText()}
 	              </div>
 	          </div>
 	      </div>
-
+            <mwc-dialog id="searchAppDialog">
+                <h3 style="margin: 0; margin-bottom: 1em; text-align: left;">${translate("appspage.schange4")}</h3>
+	        <div id="search">
+                    <vaadin-text-field theme="medium" id="searchName" placeholder="${translate("appspage.schange33")}" value="${this.searchName}" @keydown="${this.searchListener}" clear-button-visible>
+                        <vaadin-icon slot="prefix" icon="vaadin:user"></vaadin-icon>
+	            </vaadin-text-field>&nbsp;&nbsp;<br>
+	            <vaadin-button theme="medium" @click="${(e) => this.doSearch(e)}">
+	                <vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
+	                ${translate("appspage.schange35")}
+                    </vaadin-button>
+	        </div><br />
+	        <vaadin-grid theme="wrap-cell-content" id="searchResourcesGrid" ?hidden="${this.isEmptyArray(this.searchResources)}" .items="${this.searchResources}" aria-label="Search apps" all-rows-visible>
+	            <vaadin-grid-column width="7rem" flex-grow="0" header="${translate("appspage.schange5")}" .renderer=${(root, column, data) => {
+	                render(html`${this.renderAvatar(data.item)}`, root)
+                    }}>
+	            </vaadin-grid-column>
+                    <vaadin-grid-column width="12rem" flex-grow="0" header="${translate("appspage.schange7")}" .renderer=${(root, column, data) => {
+	                render(html`${this.renderPublishedBy(data.item)}`, root)
+	            }}>
+	            </vaadin-grid-column>
+                    <vaadin-grid-column width="14rem" flex-grow="0" header="" .renderer=${(root, column, data) => {
+                        render(html`${this.renderDownload(data.item)}`, root)
+                    }}>
+                    </vaadin-grid-column>
+	            <vaadin-grid-column width="10rem" flex-grow="0" header="${translate("appspage.schange8")}" .renderer=${(root, column, data) => {
+	                render(html`${this.renderFollowUnfollowButton(data.item)}`, root);
+	            }}>
+                    </vaadin-grid-column>
+                    <vaadin-grid-column width="10rem" flex-grow="0" header="" .renderer=${(root, column, data) => {
+	                render(html`${this.renderBlockUnblockButton(data.item)}`, root);
+	            }}>
+	            </vaadin-grid-column>
+	        </vaadin-grid>
+            </mwc-dialog>
            <paper-dialog id="downloadProgressDialog" class="progress" modal>
                <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
                <h2>${translate("appspage.schange41")}</h2>
@@ -877,6 +878,16 @@ class QApps extends LitElement {
         return html`<mwc-button style="float:right;" @click=${() => this.publishApp()}><mwc-icon>add</mwc-icon>${translate("appspage.schange21")}</mwc-button>`
     }
 
+    renderSearchButton() {
+        return html`<mwc-button style="float:right;" @click=${() =>  this.openSearchDialog()}><mwc-icon>search</mwc-icon>${translate("appspage.schange4")}</mwc-button>`
+    }
+
+    openSearchDialog() {
+        this.searchResources = []
+        this.shadowRoot.getElementById('searchName').value = ''
+        this.shadowRoot.getElementById('searchAppDialog').show()
+    }
+
     renderDownload(downObj) {
         if (downObj.status.description === "Published but not yet downloaded" || downObj.status.status === "MISSING_DATA") {
             return html`<mwc-button ?disabled="${this.btnDisabled}" dense unelevated label="${translate("appspage.schange36")}" icon="download" @click=${() => this.downloadApp(downObj)}></mwc-button>`
diff --git a/plugins/plugins/core/qdn/websites.src.js b/plugins/plugins/core/qdn/websites.src.js
index dcdf4187..600584a1 100644
--- a/plugins/plugins/core/qdn/websites.src.js
+++ b/plugins/plugins/core/qdn/websites.src.js
@@ -8,6 +8,7 @@ registerTranslateConfig({
   loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
 })
 
+import '@material/mwc-dialog'
 import '@material/mwc-icon'
 import '@material/mwc-button'
 import '@material/mwc-tab-bar'
@@ -45,6 +46,17 @@ class Websites extends LitElement {
         return css`
             * {
                 --mdc-theme-primary: rgb(3, 169, 244);
+                --mdc-button-disabled-fill-color: rgba(3, 169, 244, 0.5);
+                --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-shape-radius: 25px;
+                --mdc-dialog-min-width: 300px;
+                --mdc-dialog-max-width: auto;
+                --mdc-dialog-max-height: 700px;
                 --paper-input-container-focus-color: var(--mdc-theme-primary);
                 --lumo-primary-text-color: rgb(0, 167, 245);
                 --lumo-primary-color-50pct: rgba(0, 167, 245, 0.5);
@@ -246,45 +258,11 @@ class Websites extends LitElement {
                 </mwc-tab-bar>
                 <div id="tabs-1-content">
                     <div id="tab-browse-content">
-	                  <div style="min-height:48px; display: flex; padding-bottom: 6px; margin: 2px;">
-        	                <h2 style="margin: 0; flex: 1; padding-top: .5em; display: inline;">${translate("websitespage.schange1")}</h2>
-                	          <h2 style="margin: 0; flex: 1; padding-top: .5em; display: inline;">${this.renderPublishButton()}</h2>
-	                  </div>
-        	            <div class="divCard">
-                    	    <h3 style="margin: 0; margin-bottom: 1em; text-align: left;">${translate("websitespage.schange4")}</h3>
-	                      <div id="search">
-	                          <vaadin-text-field theme="medium" id="searchName" placeholder="${translate("websitespage.schange33")}" value="${this.searchName}" @keydown="${this.searchListener}" clear-button-visible>
-	                              <vaadin-icon slot="prefix" icon="vaadin:user"></vaadin-icon>
-	                          </vaadin-text-field>&nbsp;&nbsp;<br>
-	                          <vaadin-button theme="medium" @click="${(e) => this.doSearch(e)}">
-	                              <vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
-	                              ${translate("websitespage.schange35")}
-	                          </vaadin-button>
-	                      </div><br />
-	                      <vaadin-grid theme="wrap-cell-content" id="searchResourcesGrid" ?hidden="${this.isEmptyArray(this.searchResources)}" .items="${this.searchResources}" aria-label="Search Websites" all-rows-visible>
-	                          <vaadin-grid-column width="7rem" flex-grow="0" header="${translate("websitespage.schange5")}" .renderer=${(root, column, data) => {
-	                              render(html`${this.renderAvatar(data.item)}`, root)
-    	                          }}>
-	                          </vaadin-grid-column>
-	                          <vaadin-grid-column header="${translate("websitespage.schange6")}" .renderer=${(root, column, data) => {
-	                              render(html`${this.renderInfo(data.item)}`, root)
-	                          }}>
-	                          </vaadin-grid-column>
-                                  <vaadin-grid-column width="12rem" flex-grow="0" header="${translate("websitespage.schange7")}" .renderer=${(root, column, data) => {
-	                              render(html`${this.renderPublishedBy(data.item)}`, root)
-	                          }}>
-                                </vaadin-grid-column>
-	                          <vaadin-grid-column width="11rem" flex-grow="0" header="${translate("websitespage.schange8")}" .renderer=${(root, column, data) => {
-	                              render(html`${this.renderFollowUnfollowButton(data.item)}`, root);
-	                          }}>
-	                          </vaadin-grid-column>
-	                          <vaadin-grid-column width="11rem" flex-grow="0" header="" .renderer=${(root, column, data) => {
-	                              render(html`${this.renderBlockUnblockButton(data.item)}`, root);
-	                          }}>
-	                          </vaadin-grid-column>
-	                      </vaadin-grid><br />
-	                  </div>
-	                  <div class="divCard">
+	                <div style="min-height:48px; display: flex; padding-bottom: 6px; margin: 2px;">
+        	                <h2 style="margin: 0; padding-top: .5em; display: inline;">${translate("websitespage.schange1")}</h2>
+                	        <h2 style="margin: 0; flex: 6; padding-top: .5em; display: inline;">${this.renderSearchButton()}</h2>
+                	        <h2 style="margin: 0;  padding-top: .5em; display: inline;">${this.renderPublishButton()}</h2>
+	                </div>
 	                      <h3 style="margin: 0; margin-bottom: 1em; text-align: center;">${translate("websitespage.schange9")}</h3>
 	                      <vaadin-grid theme="wrap-cell-content" id="resourcesGrid" ?hidden="${this.isEmptyArray(this.pageRes)}" .items="${this.pageRes}" aria-label="Websites" all-rows-visible>
 	                          <vaadin-grid-column width="7rem" flex-grow="0" header="${translate("websitespage.schange5")}" .renderer=${(root, column, data) => {
@@ -315,13 +293,13 @@ class Websites extends LitElement {
 	                      ${this.isEmptyArray(this.pageRes) ? html`
 	                          <span style="color: var(--black);">${translate("websitespage.schange10")}</span>
 	                      ` : ''}
-	                  </div>
 	                  ${this.renderRelayModeText()}
 	              </div>
                     <div id="tab-followed-content">
 	                  <div style="min-height:48px; display: flex; padding-bottom: 6px; margin: 2px;">
-                            <h2 style="margin: 0; flex: 1; padding-top: .5em; display: inline;">${translate("websitespage.schange11")}</h2>
-              	          <h2 style="margin: 0; flex: 1; padding-top: .5em; display: inline;">${this.renderPublishButton()}</h2>
+                                <h2 style="margin: 0; padding-top: .5em; display: inline;">${translate("websitespage.schange11")}</h2>
+                	        <h2 style="margin: 0; flex: 6; padding-top: .5em; display: inline;">${this.renderSearchButton()}</h2>
+              	                <h2 style="margin: 0; padding-top: .5em; display: inline;">${this.renderPublishButton()}</h2>
 	                  </div>
 	                  <div class="divCard">
 	                      <h3 style="margin: 0; margin-bottom: 1em; text-align: center;">${translate("websitespage.schange12")}</h3>
@@ -349,15 +327,14 @@ class Websites extends LitElement {
 	                      ${this.isEmptyArray(this.followedResources) ? html`
 	                          <span style="color: var(--black);">${translate("websitespage.schange13")}</span>
 	                      ` : ''}
-	                  </div>
 	                  ${this.renderRelayModeText()}
 	              </div>
                     <div id="tab-blocked-content">
 	                  <div style="min-height:48px; display: flex; padding-bottom: 6px; margin: 2px;">
-        	                <h2 style="margin: 0; flex: 1; padding-top: .5em; display: inline;">${translate("websitespage.schange14")}</h2>
-                	          <h2 style="margin: 0; flex: 1; padding-top: .5em; display: inline;">${this.renderPublishButton()}</h2>
+        	                <h2 style="margin: 0; padding-top: .5em; display: inline;">${translate("websitespage.schange14")}</h2>
+                	        <h2 style="margin: 0; flex: 6; padding-top: .5em; display: inline;">${this.renderSearchButton()}</h2>
+                	        <h2 style="margin: 0; padding-top: .5em; display: inline;">${this.renderPublishButton()}</h2>
 	                  </div>
-	                  <div class="divCard">
 	                      <h3 style="margin: 0; margin-bottom: 1em; text-align: center;">${translate("websitespage.schange15")}</h3>
 	                      <vaadin-grid theme="wrap-cell-content" id="blockedResourcesGrid" ?hidden="${this.isEmptyArray(this.blockedResources)}" .items="${this.blockedResources}" aria-label="Blocked Websites" all-rows-visible>
                                 <vaadin-grid-column width="7rem" flex-grow="0" header="${translate("websitespage.schange5")}" .renderer=${(root, column, data) => {
@@ -383,11 +360,40 @@ class Websites extends LitElement {
 	                      ${this.isEmptyArray(this.blockedResources) ? html`
 	                          <span style="color: var(--black);">${translate("websitespage.schange16")}</span>
 	                      ` : ''}
-	                  </div>
 	                  ${this.renderRelayModeText()}
 	              </div>
 	          </div>
 	      </div>
+            <mwc-dialog id="searchWebsiteDialog">
+                <h3 style="margin: 0; margin-bottom: 1em; text-align: left;">${translate("websitespage.schange4")}</h3>
+	        <div id="search">
+	            <vaadin-text-field theme="medium" id="searchName" placeholder="${translate("websitespage.schange33")}" value="${this.searchName}" @keydown="${this.searchListener}" clear-button-visible>
+                        <vaadin-icon slot="prefix" icon="vaadin:user"></vaadin-icon>
+	            </vaadin-text-field>&nbsp;&nbsp;<br>
+	            <vaadin-button theme="medium" @click="${(e) => this.doSearch(e)}">
+	                <vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
+	                ${translate("websitespage.schange35")}
+                    </vaadin-button>
+	        </div><br />
+	        <vaadin-grid theme="wrap-cell-content" id="searchResourcesGrid" ?hidden="${this.isEmptyArray(this.searchResources)}" .items="${this.searchResources}" aria-label="Search Websites" all-rows-visible>
+	            <vaadin-grid-column width="7rem" flex-grow="0" header="${translate("websitespage.schange5")}" .renderer=${(root, column, data) => {
+                        render(html`${this.renderAvatar(data.item)}`, root)
+                    }}>
+	            </vaadin-grid-column>
+                    <vaadin-grid-column width="12rem" flex-grow="0" header="${translate("websitespage.schange7")}" .renderer=${(root, column, data) => {
+	                render(html`${this.renderPublishedBy(data.item)}`, root)
+                    }}>
+                    </vaadin-grid-column>
+	            <vaadin-grid-column width="11rem" flex-grow="0" header="${translate("websitespage.schange8")}" .renderer=${(root, column, data) => {
+	                render(html`${this.renderFollowUnfollowButton(data.item)}`, root);
+	            }}>
+	            </vaadin-grid-column>
+                    <vaadin-grid-column width="11rem" flex-grow="0" header="" .renderer=${(root, column, data) => {
+	               render(html`${this.renderBlockUnblockButton(data.item)}`, root);
+	            }}>
+	            </vaadin-grid-column>
+	        </vaadin-grid>
+            </mwc-dialog>
         `
     }
 
@@ -728,6 +734,16 @@ class Websites extends LitElement {
         return html`<mwc-button style="float:right;" @click=${() => this.publishWebsite()}><mwc-icon>add</mwc-icon>${translate("websitespage.schange21")}</mwc-button>`
     }
 
+    renderSearchButton() {
+        return html`<mwc-button style="float:right;" @click=${() =>  this.openSearchDialog()}><mwc-icon>search</mwc-icon>${translate("websitespage.schange4")}</mwc-button>`
+    }
+
+    openSearchDialog() {
+        this.searchResources = []
+        this.shadowRoot.getElementById('searchName').value = ''
+        this.shadowRoot.getElementById('searchWebsiteDialog').show()
+    }
+
     publishWebsite() {
         window.location.href = `publish/index.html?service=${this.service}&identifier=${this.identifier}&uploadType=zip&category=Website&showName=true&showService=false&showIdentifier=false&showMetadata=true`
     }