adasdadad

system/apps/user-self-management/assets/app.js

@@ -2,8 +2,9 @@
     const SECTIONS = [
         { id: 'desktop', label: 'Desktop Type' },
         { id: 'profile', label: 'Benutzerdaten' },
-        { id: 'apps', label: 'App-Installation' },
-        { id: 'widgets', label: 'Infobereich' },
+        { id: 'apps', label: 'Apps' },
+        { id: 'tray', label: 'Tray-Apps' },
+        { id: 'widgets', label: 'Widgets' },
     ];
 
     const escapeHtml = (value) => String(value)
@@ -32,10 +33,14 @@
         }
 
         if (sectionId === 'apps') {
-            return 'Bestimmt, welche Desktop-Apps fuer diesen Benutzer sichtbar bleiben.';
+            return 'Aktiviert Anwendungen fuer das Startmenue und optional als Desktop-Icon.';
         }
 
-        return 'Steuert, welche Elemente im rechten Infobereich des Desktops aktiv sind.';
+        if (sectionId === 'tray') {
+            return 'Steuert Schnellaktionen und Visualisierungen neben der Uhr, sofern Zugriff besteht.';
+        }
+
+        return 'Kleine Desktop-Bereiche ohne Fensterfunktionen, die separat aktiviert werden koennen.';
     };
 
     const renderSkinChoices = (state) => state.bootstrap.options.skins.map((skin) => {
@@ -68,20 +73,52 @@
 
     const renderAppItems = (state) => state.bootstrap.options.apps.map((app) => {
         const checked = state.draft.apps.enabled_ids.includes(app.app_id);
+        const desktopIconChecked = state.draft.apps.desktop_icon_ids.includes(app.app_id);
+
+        return `
+            <div class="window-app-item usm-item usm-item--app">
+                <label class="usm-item-toggle">
+                    <input
+                        type="checkbox"
+                        data-app-id="${escapeHtml(app.app_id)}"
+                        ${checked ? 'checked' : ''}
+                        ${app.required ? 'disabled' : ''}
+                    >
+                    <span class="window-app-item-main usm-item-main">
+                        <strong>${escapeHtml(app.title)}</strong>
+                        <p>${escapeHtml(app.summary || '')}</p>
+                        <span class="usm-item-meta">${app.required ? 'Pflicht-App im Menue' : 'Im Menue sichtbar'}</span>
+                    </span>
+                </label>
+                ${app.can_show_on_desktop ? `
+                    <label class="usm-inline-check">
+                        <input
+                            type="checkbox"
+                            data-app-desktop-icon-id="${escapeHtml(app.app_id)}"
+                            ${desktopIconChecked ? 'checked' : ''}
+                            ${checked ? '' : 'disabled'}
+                        >
+                        <span>Desktop-Icon anzeigen</span>
+                    </label>
+                ` : ''}
+            </div>
+        `;
+    }).join('');
+
+    const renderTrayItems = (state) => state.bootstrap.options.tray_apps.map((app) => {
+        const checked = state.draft.tray.active_ids.includes(app.app_id);
 
         return `
             <label class="window-app-item usm-item">
                 <input
                     type="checkbox"
-                    data-action="toggle-app"
-                    data-app-id="${escapeHtml(app.app_id)}"
+                    data-tray-app-id="${escapeHtml(app.app_id)}"
                     ${checked ? 'checked' : ''}
-                    ${app.required ? 'disabled' : ''}
                 >
                 <span class="window-app-item-main usm-item-main">
                     <strong>${escapeHtml(app.title)}</strong>
                     <p>${escapeHtml(app.summary || '')}</p>
-                    <span class="usm-item-meta">${app.required ? 'Pflicht-App' : 'Optional sichtbar'}</span>
+                    <span class="usm-item-meta">Im Tray neben der Uhr</span>
                 </span>
             </label>
         `;
@@ -101,7 +138,7 @@
                 <span class="window-app-item-main usm-item-main">
                     <strong>${escapeHtml(widget.title)}</strong>
                     <p>${escapeHtml(widget.summary || '')}</p>
-                    <span class="usm-item-meta">${widget.default_enabled ? 'Standardbereich' : 'Optionaler Bereich'}</span>
+                    <span class="usm-item-meta">${widget.default_enabled ? 'Standard-Widget' : 'Optionales Widget'}</span>
                 </span>
             </label>
         `;
@@ -166,8 +203,8 @@
             return `
                 <section class="window-app-card usm-card">
                     <p class="window-app-kicker usm-kicker">App-Auswahl</p>
-                    <h2>Sichtbare Desktop-Apps</h2>
-                    <p class="window-app-copy usm-copy">Aenderungen an der App-Auswahl werden nach dem Speichern mit einem Desktop-Reload sauber uebernommen.</p>
+                    <h2>Apps im Menue und auf dem Desktop</h2>
+                    <p class="window-app-copy usm-copy">Eine aktivierte App erscheint standardmaessig im Menue. Fuer geeignete Apps kann zusaetzlich ein Desktop-Icon aktiviert werden.</p>
                     <div class="window-app-list usm-list">
                         ${renderAppItems(state)}
                     </div>
@@ -175,11 +212,24 @@
             `;
         }
 
+        if (state.activeSection === 'tray') {
+            return `
+                <section class="window-app-card usm-card">
+                    <p class="window-app-kicker usm-kicker">Tray-Apps</p>
+                    <h2>Bereich neben der Uhr</h2>
+                    <p class="window-app-copy usm-copy">Tray-Apps sind Schnellzugriffe oder Statusanzeigen im Bereich neben der Uhr. Sie koennen eigenstaendig oder zusammen mit der Haupt-App genutzt werden.</p>
+                    <div class="window-app-list usm-list">
+                        ${renderTrayItems(state)}
+                    </div>
+                </section>
+            `;
+        }
+
         return `
             <section class="window-app-card usm-card">
-                <p class="window-app-kicker usm-kicker">Infobereich</p>
-                <h2>Rechter Desktopbereich</h2>
-                <p class="window-app-copy usm-copy">Diese Inhalte liegen aktuell im rechten Infobereich des Desktops und werden hier benutzerbezogen ein- oder ausgeblendet.</p>
+                <p class="window-app-kicker usm-kicker">Widgets</p>
+                <h2>Kleine Desktop-Bereiche</h2>
+                <p class="window-app-copy usm-copy">Widgets sind kleine Desktop-Bereiche ohne klassische Fensterfunktionen. Aktivierung und Positionierung werden schrittweise ausgebaut.</p>
                 <div class="window-app-list usm-list">
                     ${renderWidgetItems(state)}
                 </div>
@@ -205,7 +255,7 @@
                         <div class="window-app-brand usm-brand">
                             <p class="window-app-kicker usm-kicker">Setup</p>
                             <h1>User Self Management</h1>
-                            <p class="window-app-copy">Ein gemeinsamer Setup-Bereich fuer Desktop-Typ, Benutzerdaten, Apps und den rechten Infobereich.</p>
+                            <p class="window-app-copy">Ein gemeinsamer Setup-Bereich fuer Desktop-Typ, Benutzerdaten, Apps, Tray-Apps und Widgets.</p>
                         </div>
                         <div class="window-app-nav-list usm-nav-list">
                             ${SECTIONS.map((section) => `
@@ -299,6 +349,10 @@
         },
         apps: {
             enabled_ids: state.draft.apps.enabled_ids,
+            desktop_icon_ids: state.draft.apps.desktop_icon_ids,
+        },
+        tray: {
+            active_ids: state.draft.tray.active_ids,
         },
         widgets: {
             active_ids: state.draft.widgets.active_ids,
@@ -306,7 +360,10 @@
     });
 
     const requiresReload = (before, after) => before.desktop.active_skin !== after.desktop.active_skin
-        || !sameSelection(before.apps.enabled_ids, after.apps.enabled_ids);
+        || !sameSelection(before.apps.enabled_ids, after.apps.enabled_ids)
+        || !sameSelection(before.apps.desktop_icon_ids, after.apps.desktop_icon_ids)
+        || !sameSelection(before.tray.active_ids, after.tray.active_ids)
+        || !sameSelection(before.widgets.active_ids, after.widgets.active_ids);
 
     const attachInteractions = (root, state, options) => {
         root.addEventListener('click', async (event) => {
@@ -405,6 +462,29 @@
                     target.dataset.appId,
                     target.checked
                 );
+                if (!target.checked) {
+                    state.draft.apps.desktop_icon_ids = state.draft.apps.desktop_icon_ids.filter((appId) => appId !== target.dataset.appId);
+                }
+                renderApp(root, state);
+                return;
+            }
+
+            if (target.dataset.appDesktopIconId) {
+                state.draft.apps.desktop_icon_ids = syncSelectionWithCheckedState(
+                    state.draft.apps.desktop_icon_ids,
+                    target.dataset.appDesktopIconId,
+                    target.checked
+                );
+                renderApp(root, state);
+                return;
+            }
+
+            if (target.dataset.trayAppId) {
+                state.draft.tray.active_ids = syncSelectionWithCheckedState(
+                    state.draft.tray.active_ids,
+                    target.dataset.trayAppId,
+                    target.checked
+                );
                 renderApp(root, state);
                 return;
             }