iobroker.mywebui 1.42.43 → 1.42.45

package/io-package.json

@@ -1,7 +1,7 @@
 {
   "common": {
     "name": "mywebui",
-    "version": "1.42.43",
+    "version": "1.42.45",
     "titleLang": {
       "en": "mywebui",
       "de": "mywebui",
@@ -29,6 +29,20 @@
       "zh-cn": "使用万维网传送器的高锰用户接口"
     },
     "news": {
+      "1.42.45": {
+        "en": "design: neon glassmorphic theme for the solution explorer - dark gradient panel, glass project bar, glowing hover/selection, cyan icon set (wunderbaum CSS variables overridden, original icons untouched)",
+        "az": "dizayn: solution explorer üçün neon glassmorphic tema - tünd qradiyent panel, şüşə proyekt paneli, parlayan hover/seçim, cyan ikon dəsti (wunderbaum CSS dəyişənləri override edildi, orijinal ikonlara toxunulmadı)",
+        "tr": "tasarım: solution explorer için neon glassmorphic tema - koyu gradyan panel, cam proje çubuğu, parlayan hover/seçim, cyan ikon seti (wunderbaum CSS değişkenleri override edildi, orijinal ikonlara dokunulmadı)",
+        "ru": "дизайн: неоновая glassmorphic тема для solution explorer - тёмная градиентная панель, стеклянная панель проектов, светящиеся hover/выделение, голубой набор иконок (переопределены CSS-переменные wunderbaum, оригинальные иконки не тронуты)",
+        "de": "Design: Neon-Glassmorphic-Theme für den Solution Explorer - dunkles Gradient-Panel, Glas-Projektleiste, leuchtende Hover/Auswahl, Cyan-Icon-Set (wunderbaum-CSS-Variablen überschrieben, Original-Icons unverändert)"
+      },
+      "1.42.44": {
+        "en": "feature: multi-project support - project selector with create/delete in solution explorer; existing data stays as 'default' project, new projects under projects/<name>/; runtime preview passes ?project=, plain runtime.html always shows default (kiosk safe)",
+        "az": "yenilik: multi-proyekt dəstəyi - solution explorer-də yarat/sil düymələri ilə proyekt seçici; mövcud data 'default' proyekt kimi qalır, yeni proyektlər projects/<ad>/ altında; runtime önizləmə ?project= ötürür, parametrsiz runtime.html həmişə default göstərir (kiosk təhlükəsiz)",
+        "tr": "yenilik: çoklu proje desteği - solution explorer'da oluştur/sil düğmeleriyle proje seçici; mevcut veri 'default' proje olarak kalır, yeni projeler projects/<ad>/ altında; runtime önizleme ?project= geçirir, parametresiz runtime.html her zaman default gösterir (kiosk güvenli)",
+        "ru": "новое: поддержка нескольких проектов - селектор проектов с созданием/удалением в solution explorer; существующие данные остаются проектом 'default', новые проекты в projects/<имя>/; предпросмотр runtime передаёт ?project=, runtime.html без параметра всегда показывает default (безопасно для киосков)",
+        "de": "Neu: Multi-Projekt-Unterstützung - Projektauswahl mit Erstellen/Löschen im Solution Explorer; bestehende Daten bleiben als 'default'-Projekt, neue Projekte unter projects/<name>/; Runtime-Vorschau übergibt ?project=, runtime.html ohne Parameter zeigt immer default (kiosksicher)"
+      },
       "1.42.43": {
         "en": "refactor: all @gokturk413/@node-projects fork packages vendored into www/libs (edited directly in repo, removed from npm dependencies); build script made safe (gulp delAll no longer deletes www frontend sources)",
         "az": "refaktor: bütün @gokturk413/@node-projects fork paketləri www/libs-ə vendorlandı (birbaşa repo-da redaktə olunur, npm asılılıqlarından çıxarıldı); build scripti təhlükəsiz edildi (gulp delAll artıq www frontend mənbələrini silmir)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.mywebui",
-  "version": "1.42.43",
+  "version": "1.42.45",
   "description": "ioBroker mywebui - Custom edited mywebui by gokturk413 with 3D Editor",
   "type": "module",
   "main": "dist/backend/main.js",

package/www/assets/icons/neon/expander.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="298" height="512" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 298 511.93"><path fill="#2ed6ff" fill-rule="nonzero" d="M70.77 499.85c-16.24 16.17-42.53 16.09-58.69-.15-16.17-16.25-16.09-42.54.15-58.7l185.5-185.03L12.23 70.93c-16.24-16.16-16.32-42.45-.15-58.7 16.16-16.24 42.45-16.32 58.69-.15l215.15 214.61c16.17 16.25 16.09 42.54-.15 58.7l-215 214.46z"/></svg>

package/www/assets/icons/neon/expanderClose.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="512" height="298" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 298.04"><path fill="#2ed6ff" fill-rule="nonzero" d="M70.94 285.81c-16.17 16.24-42.46 16.32-58.71.15-16.24-16.16-16.32-42.46-.15-58.7L226.57 12.23c16.16-16.24 42.46-16.32 58.7-.15l214.65 215.18c16.17 16.24 16.09 42.54-.15 58.7-16.25 16.17-42.54 16.09-58.71-.15L256 100.29 70.94 285.81z"/></svg>

package/www/assets/icons/neon/file.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 102.55 122.88" style="enable-background:new 0 0 102.55 122.88" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#2ed6ff;}</style><g><path fill="#2ed6ff" class="st0" d="M102.55,122.88H0V0h77.66l24.89,26.44L102.55,122.88L102.55,122.88z M96.13,115.98V30.44H73.44V5.91H6.51 v110.07H96.13L96.13,115.98z"/></g></svg>

package/www/assets/icons/neon/folder.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 95.21" style="enable-background:new 0 0 122.88 95.21" xml:space="preserve"><g><path fill="#2ed6ff" d="M2.48,20.74h4.5v-9.86c0-1.37,1.11-2.48,2.48-2.48h4.41V2.48c0-1.37,1.11-2.48,2.48-2.48h40.26c1.37,0,2.48,1.11,2.48,2.48 V8.4h54.3c1.37,0,2.48,1.11,2.48,2.48v9.86h4.53c1.37,0,2.48,1.11,2.48,2.48c0,0.18-0.02,0.36-0.06,0.52l-8.68,63.81 c-0.28,2.08-1.19,4.01-2.59,5.41c-1.38,1.38-3.21,2.24-5.36,2.24H14.7c-2.16,0-4.03-0.87-5.43-2.26c-1.41-1.41-2.31-3.35-2.54-5.46 l-6.72-64c-0.14-1.36,0.85-2.58,2.21-2.72C2.31,20.75,2.39,20.75,2.48,20.74L2.48,20.74L2.48,20.74z M9.46,25.71H5.23l6.43,61.27 c0.1,0.98,0.5,1.85,1.1,2.46c0.5,0.5,1.17,0.81,1.93,0.81h91.5c0.75,0,1.38-0.3,1.87-0.79c0.62-0.62,1.03-1.53,1.17-2.55 l8.32-61.19H9.46L9.46,25.71z M11.94,13.37v7.36l98.97-1.05v-6.31h-54.3c-1.37,0-2.48-1.11-2.48-2.48V4.97h-35.3v5.92 c0,1.37-1.11,2.48-2.48,2.48H11.94L11.94,13.37z"/></g></svg>

package/www/dist/frontend/common/IobrokerHandler.js

@@ -7,12 +7,24 @@ export class IobrokerHandler {
     host;
     connection;
     adapterName = "mywebui";
-    configPath = "config/";
     namespace = "mywebui.0";
     namespaceFiles = this.namespace + '.data';
     namespaceWidgets = this.namespace + '.widgets';
-    imagePrefix = '/' + this.namespaceFiles + '/config/images/';
-    additionalFilePrefix = '/' + this.namespaceFiles + '/config/additionalfiles/';
+    // multi project support: the 'default' project is the legacy flat 'config/' folder,
+    // every other project lives under 'projects/<name>/config/' with the same structure
+    #currentProject = 'default';
+    get currentProject() {
+        return this.#currentProject;
+    }
+    get configPath() {
+        return this.#currentProject === 'default' ? 'config/' : 'projects/' + this.#currentProject + '/config/';
+    }
+    get imagePrefix() {
+        return '/' + this.namespaceFiles + '/' + this.configPath + 'images/';
+    }
+    get additionalFilePrefix() {
+        return '/' + this.namespaceFiles + '/' + this.configPath + 'additionalfiles/';
+    }
     config;
     globalStylesheet;
     fontDeclarationsStylesheet;
@@ -38,6 +50,75 @@ export class IobrokerHandler {
         this.#cache.set('control', new Map());
         this.#cache.set('3dscreen', new Map());
         this.#cache.set('3dcontrol', new Map());
+        // active project: explicit ?project= url parameter wins (used by runtime/kiosk links),
+        // otherwise the config editor remembers the last selection per browser.
+        // plain runtime.html without parameter always shows the 'default' project,
+        // so kiosk displays are not affected by what is edited in the designer.
+        try {
+            const urlProject = new URLSearchParams(window.location.search).get('project');
+            if (urlProject)
+                this.#currentProject = this._cleanProjectName(urlProject);
+            else if (!window.location.pathname.endsWith('runtime.html'))
+                this.#currentProject = this._cleanProjectName(localStorage.getItem('webui-current-project') ?? 'default');
+        }
+        catch (e) {
+            console.warn('could not determine current project', e);
+        }
+    }
+    _cleanProjectName(name) {
+        name = (name ?? '').toString().trim().toLowerCase().replaceAll(' ', '-');
+        if (!/^[a-z0-9_-]+$/.test(name))
+            return 'default';
+        return name;
+    }
+    async getProjects() {
+        if (this._readyPromises)
+            await this.waitForReady();
+        try {
+            const list = await this._getObjectFromFile('projects.json');
+            if (Array.isArray(list?.projects)) {
+                const projects = list.projects.filter(x => /^[a-z0-9_-]+$/.test(x));
+                if (!projects.includes('default'))
+                    projects.unshift('default');
+                return projects;
+            }
+        }
+        catch (e) { }
+        return ['default'];
+    }
+    async createProject(name) {
+        name = (name ?? '').toString().trim().toLowerCase().replaceAll(' ', '-');
+        if (!/^[a-z0-9_-]+$/.test(name))
+            throw new Error('invalid project name (use a-z, 0-9, -, _): ' + name);
+        const projects = await this.getProjects();
+        if (projects.includes(name))
+            throw new Error('project already exists: ' + name);
+        projects.push(name);
+        await this._saveObjectToFile({ projects: projects.filter(x => x !== 'default') }, 'projects.json');
+        await this._saveObjectToFile({ globalStyle: null, globalScript: null, globalConfig: null, fontDeclarations: null }, 'projects/' + name + '/config/config.json');
+        return name;
+    }
+    async removeProject(name) {
+        if (name === 'default')
+            throw new Error("the 'default' project cannot be deleted");
+        const projects = (await this.getProjects()).filter(x => x !== name && x !== 'default');
+        await this._saveObjectToFile({ projects }, 'projects.json');
+        try {
+            await this.connection.deleteFolder(this.namespaceFiles, '/projects/' + name);
+        }
+        catch (e) {
+            console.warn('error deleting project folder', e);
+        }
+        if (this.#currentProject === name)
+            this.setCurrentProject('default');
+    }
+    // switching reloads the page: global style/script/translations/custom controls
+    // are all project scoped, a clean reload is the only safe way to swap them
+    setCurrentProject(name) {
+        localStorage.setItem('webui-current-project', this._cleanProjectName(name));
+        const url = new URL(window.location.href);
+        url.searchParams.delete('project');
+        window.location.href = url.toString();
     }
     getNormalizedSignalName(id, relativeSignalPath, element) {
         return (relativeSignalPath ?? '') + id;

package/www/dist/frontend/config/CommandHandling.js

@@ -14,16 +14,18 @@ export class CommandHandling {
         let commandName = button.dataset['command'];
         let commandParameter = button.dataset['commandParameter'];
         if (commandName === 'runtime') {
+            // preview always opens the project currently active in the editor
+            const projectParam = iobrokerHandler.currentProject !== 'default' ? '?project=' + iobrokerHandler.currentProject : '';
             let target = this.dockManager?.activeDocument?.resolvedElementContent;
             if (target instanceof IobrokerWebuiScreenEditor) {
-                window.open("runtime.html#screenName=" + target.name);
+                window.open("runtime.html" + projectParam + "#screenName=" + target.name);
             }
             else if (target instanceof IobrokerWebui3DScreenEditor) {
                 const scName = target.sceneData?.name || target.getAttribute?.('scene-name') || '';
-                window.open("runtime.html#3dscreen=" + encodeURIComponent(scName));
+                window.open("runtime.html" + projectParam + "#3dscreen=" + encodeURIComponent(scName));
             }
             else {
-                window.open("runtime.html");
+                window.open("runtime.html" + projectParam);
             }
         }
         else if (commandName === 'new') {

package/www/dist/frontend/config/IobrokerWebuiSolutionExplorer.js

@@ -26,28 +26,201 @@ import { IobrokerWebuiScreensView } from "./IobrokerWebuiScreensView.js";
 import { convertToXml, parseXml } from "../helper/XmlHelper.js";
 export class IobrokerWebuiSolutionExplorer extends BaseCustomWebComponentConstructorAppend {
     static template = html `
-        <div id="treeDiv" class="" style="overflow: auto; width:100%; height: 100%;">
+        <div style="display: flex; flex-direction: column; width: 100%; height: 100%;">
+            <div id="projectBar">
+                <select id="projectSelect" title="active project"></select>
+                <button id="projectAdd" title="create new project">＋</button>
+                <button id="projectDel" title="delete current project">✕</button>
+            </div>
+            <div id="treeDiv" class="" style="overflow: auto; width:100%; flex: 1;">
+            </div>
         </div>`;
     static style = css `
+        :host {
+            display: block;
+            height: 100%;
+            box-sizing: border-box;
+            --neo-cyan: #2ed6ff;
+            --neo-purple: #a06bff;
+            --neo-pink: #ff4fa3;
+            --neo-text: #dce7ff;
+            --neo-text-dim: #8fa3cc;
+            --neo-glass: rgba(22, 34, 76, 0.55);
+            --neo-glass-border: rgba(80, 190, 255, 0.35);
+            background:
+                radial-gradient(ellipse 120% 60% at 80% -10%, rgba(110, 70, 220, 0.25), transparent 60%),
+                radial-gradient(ellipse 100% 50% at 0% 110%, rgba(0, 150, 255, 0.18), transparent 60%),
+                linear-gradient(165deg, #0b1228 0%, #111a3a 55%, #151d45 100%);
+            color: var(--neo-text);
+
+            /* wunderbaum theme variables (override its :host defaults) */
+            --wb-font-stack: 'Segoe UI', Roboto, sans-serif;
+            --wb-background-color: transparent;
+            --wb-node-text-color: var(--neo-text);
+            --wb-dim-color: var(--neo-text-dim);
+            --wb-filter-dim-color: var(--neo-text-dim);
+            --wb-filter-submatch-color: var(--neo-text-dim);
+            --wb-hover-color: rgba(90, 160, 255, 0.12);
+            --wb-hover-border-color: rgba(80, 190, 255, 0.3);
+            --wb-active-color: rgba(46, 214, 255, 0.2);
+            --wb-active-border-color: rgba(46, 214, 255, 0.55);
+            --wb-active-hover-color: rgba(46, 214, 255, 0.28);
+            --wb-active-hover-border-color: var(--neo-cyan);
+            --wb-active-color-grayscale: rgba(46, 214, 255, 0.14);
+            --wb-active-hover-color-grayscale: rgba(46, 214, 255, 0.2);
+            --wb-active-border-color-grayscale: rgba(80, 190, 255, 0.4);
+            --wb-alternate-row-color: transparent;
+            --wb-alternate-row-color-hover: rgba(90, 160, 255, 0.08);
+            --wb-focus-border-color: var(--neo-cyan);
+            --wb-border-color: rgba(80, 190, 255, 0.35);
+            --wb-drop-target-color: rgba(46, 214, 255, 0.18);
+            --wb-drop-source-color: rgba(160, 107, 255, 0.15);
+        }
+
         * {
             user-select: none;
             -webkit-user-select: none;
             cursor: pointer;
         }
-        
+
+        #projectBar {
+            display: flex;
+            gap: 5px;
+            padding: 6px 7px;
+            margin: 7px 7px 5px 7px;
+            align-items: center;
+            flex-shrink: 0;
+            background: var(--neo-glass);
+            border: 1px solid var(--neo-glass-border);
+            border-radius: 11px;
+            box-shadow: 0 0 12px rgba(46, 214, 255, 0.12), inset 0 0 18px rgba(46, 214, 255, 0.05);
+            backdrop-filter: blur(8px);
+        }
+
+        #projectBar select {
+            flex: 1;
+            min-width: 0;
+            font-size: 13px;
+            color: var(--neo-text);
+            background: rgba(10, 18, 45, 0.6);
+            border: 1px solid rgba(80, 190, 255, 0.25);
+            border-radius: 7px;
+            padding: 3px 6px;
+            outline: none;
+        }
+
+        #projectBar select option {
+            background: #101a3d;
+            color: var(--neo-text);
+        }
+
+        #projectBar button {
+            border: 1px solid rgba(80, 190, 255, 0.35);
+            background: rgba(10, 18, 45, 0.6);
+            color: var(--neo-cyan);
+            border-radius: 7px;
+            font-size: 13px;
+            line-height: 18px;
+            width: 26px;
+            height: 26px;
+            padding: 0;
+            text-shadow: 0 0 6px rgba(46, 214, 255, 0.8);
+            transition: box-shadow 0.15s, background 0.15s;
+        }
+
+        #projectBar button:hover {
+            background: rgba(46, 214, 255, 0.15);
+            box-shadow: 0 0 10px rgba(46, 214, 255, 0.45);
+        }
+
+        #treeDiv {
+            margin: 0 4px 4px 4px;
+        }
+
+        #treeDiv::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+
+        #treeDiv::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        #treeDiv::-webkit-scrollbar-thumb {
+            background: rgba(80, 190, 255, 0.25);
+            border-radius: 4px;
+        }
+
+        #treeDiv::-webkit-scrollbar-thumb:hover {
+            background: rgba(80, 190, 255, 0.45);
+        }
+
+        div.wunderbaum {
+            background: transparent;
+            color: var(--neo-text);
+            font-family: 'Segoe UI', Roboto, sans-serif;
+            font-size: 13px;
+        }
+
+        div.wunderbaum div.wb-node-list div.wb-row {
+            border-radius: 7px;
+            transition: background 0.12s, box-shadow 0.12s;
+        }
+
+        div.wunderbaum div.wb-node-list div.wb-row:hover {
+            background: rgba(90, 160, 255, 0.12);
+            box-shadow: inset 0 0 0 1px rgba(80, 190, 255, 0.18);
+        }
+
+        div.wunderbaum div.wb-node-list div.wb-row.wb-active,
+        div.wunderbaum div.wb-node-list div.wb-row.wb-selected {
+            background: linear-gradient(90deg, rgba(46, 214, 255, 0.22), rgba(160, 107, 255, 0.16));
+            box-shadow: inset 0 0 0 1px rgba(46, 214, 255, 0.4), 0 0 10px rgba(46, 214, 255, 0.15);
+        }
+
+        div.wunderbaum div.wb-node-list div.wb-row.wb-active:hover,
+        div.wunderbaum div.wb-node-list div.wb-row.wb-selected:hover {
+            background: linear-gradient(90deg, rgba(46, 214, 255, 0.3), rgba(160, 107, 255, 0.22));
+        }
+
+        div.wunderbaum span.wb-node span.wb-title {
+            overflow-x: visible;
+            color: var(--neo-text);
+            text-shadow: 0 0 8px rgba(46, 214, 255, 0.12);
+        }
+
+        div.wunderbaum div.wb-row.wb-active span.wb-node span.wb-title {
+            color: #ffffff;
+            text-shadow: 0 0 8px rgba(46, 214, 255, 0.55);
+        }
+
+        /* neon recolor of the dark svg icons (folder/file/expander) */
+        div.wunderbaum i.wb-icon img,
+        div.wunderbaum i.wb-expander img {
+            filter: invert(72%) sepia(35%) saturate(1800%) hue-rotate(160deg) brightness(1.25) drop-shadow(0 0 2px rgba(46, 214, 255, 0.65));
+        }
+
+        div.wunderbaum i.wb-icon,
+        div.wunderbaum i.wb-expander {
+            color: var(--neo-cyan);
+        }
+
         div.wunderbaum span.wb-node i.wb-indent::before {
             content: "";
         }
-        
+
         i.wb-icon > span.wb-badge {
-            opacity: 0.4;
+            opacity: 1;
             font-size: 50%;
+            background: linear-gradient(135deg, var(--neo-cyan), var(--neo-purple));
+            color: #08122e;
+            border-radius: 8px;
+            padding: 1px 4px;
+            font-weight: bold;
+            text-shadow: none;
+            box-shadow: 0 0 6px rgba(46, 214, 255, 0.5);
         }
-        
-        div.wunderbaum span.wb-node span.wb-title {
-            overflow-x: visible;
-        }
-        
+
         div.wunderbaum span.wb-col {
             overflow: visible;
         }
@@ -85,9 +258,64 @@ export class IobrokerWebuiSolutionExplorer extends BaseCustomWebComponentConstru
     constructor() {
         super();
         this._treeDiv = this._getDomElement('treeDiv');
+        this._projectSelect = this._getDomElement('projectSelect');
+        this._projectAdd = this._getDomElement('projectAdd');
+        this._projectDel = this._getDomElement('projectDel');
         this.shadowRoot.adoptedStyleSheets = [wunderbaumStyle, defaultStyle, IobrokerWebuiSolutionExplorer.style];
         this._createThumbnailTooltip();
     }
+    async _initProjectBar() {
+        const fillSelect = async () => {
+            const projects = await iobrokerHandler.getProjects();
+            this._projectSelect.innerHTML = '';
+            for (const p of projects) {
+                const opt = document.createElement('option');
+                opt.value = p;
+                opt.textContent = p;
+                if (p === iobrokerHandler.currentProject)
+                    opt.selected = true;
+                this._projectSelect.appendChild(opt);
+            }
+            // if the stored project does not exist anymore, fall back to default
+            if (!projects.includes(iobrokerHandler.currentProject))
+                iobrokerHandler.setCurrentProject('default');
+        };
+        await fillSelect();
+        this._projectSelect.onchange = () => {
+            if (this._projectSelect.value !== iobrokerHandler.currentProject)
+                iobrokerHandler.setCurrentProject(this._projectSelect.value);
+        };
+        this._projectAdd.onclick = async () => {
+            const name = prompt('New project name (a-z, 0-9, -, _):');
+            if (!name)
+                return;
+            try {
+                const created = await iobrokerHandler.createProject(name);
+                if (confirm("Project '" + created + "' created. Switch to it now?"))
+                    iobrokerHandler.setCurrentProject(created);
+                else
+                    await fillSelect();
+            }
+            catch (err) {
+                alert(err.message ?? err);
+            }
+        };
+        this._projectDel.onclick = async () => {
+            const current = iobrokerHandler.currentProject;
+            if (current === 'default') {
+                alert("The 'default' project cannot be deleted.");
+                return;
+            }
+            if (!confirm("Delete project '" + current + "' with ALL its screens, controls and files? This cannot be undone!"))
+                return;
+            try {
+                await iobrokerHandler.removeProject(current);
+            }
+            catch (err) {
+                alert(err.message ?? err);
+            }
+        };
+    }
     _createThumbnailTooltip() {
         this._thumbnailTooltip = document.createElement('div');
         this._thumbnailTooltip.className = 'control-thumbnail-tooltip';
@@ -102,6 +330,7 @@ export class IobrokerWebuiSolutionExplorer extends BaseCustomWebComponentConstru
         });
         iobrokerHandler.imagesChanged.on(() => this._refreshNode('images'));
         iobrokerHandler.additionalFilesChanged.on(() => this._refreshAdditionalFilesNode());
+        this._initProjectBar();
         await sleep(100);
         this._loadTree();
         //Preload after a timeout
@@ -998,6 +1227,15 @@ export class IobrokerWebuiSolutionExplorer extends BaseCustomWebComponentConstru
         if (!this._tree) {
             this._tree = new Wunderbaum({
                 ...defaultOptions,
+                // neon themed copies of the default icons (originals are shared with the outline tree)
+                iconMap: {
+                    expanderCollapsed: './assets/icons/neon/expander.svg',
+                    expanderExpanded: './assets/icons/neon/expanderClose.svg',
+                    folder: './assets/icons/neon/folder.svg',
+                    folderLazy: './assets/icons/neon/folder.svg',
+                    folderOpen: './assets/icons/neon/folder.svg',
+                    doc: './assets/icons/neon/file.svg',
+                },
                 element: this._treeDiv,
                 source: await this.createTreeNodes(),
                 lazyLoad: async (e) => {