@eclipse-docks/core 0.7.127 → 0.7.132

package/src/dialogs/version-info-dialog.ts

@@ -1,22 +1,42 @@
-import { html, css } from "lit";
-import { customElement } from "lit/decorators.js";
+import { html, css, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
 import type { PropertyValues } from "lit";
 import { DocksDialogContent } from "../parts/dialog-content";
 import { contributionRegistry } from "../core/contributionregistry";
 import {
     DIALOG_CONTRIBUTION_TARGET,
-    CLOSE_BUTTON,
     type DialogContribution,
-    type DialogButton,
     dialogService,
 } from "../core/dialogservice";
 import { ABOUT_TABS } from "../core/contribution-targets";
+import { ABOUT_TAB_RELEASE } from "../core/contribution-names";
 import { appLoaderService } from "../core/apploader";
+import { DocksReleaseHistory, type ReleaseHistoryNavState } from "../components/release-history";
+import type { DocksTabs } from "../parts/tabs";
 
-const CLOSE_PRIMARY: DialogButton = { ...CLOSE_BUTTON, variant: "primary" };
+const EMPTY_NAV: ReleaseHistoryNavState = {
+    hasMultiple: false,
+    atOldest: true,
+    atNewest: true,
+};
+
+@customElement("docks-version-info-dialog")
+export class DocksVersionInfoDialog extends DocksDialogContent {
+    @property({ type: String })
+    label = "";
+
+    @property({ attribute: false })
+    close?: () => void;
+
+    @property({ attribute: false })
+    onAfterHide?: () => void;
+
+    @state()
+    private activeTab: string | null = null;
+
+    @state()
+    private releaseNav: ReleaseHistoryNavState = EMPTY_NAV;
 
-@customElement("docks-version-info-dialog-content")
-export class DocksVersionInfoDialogContent extends DocksDialogContent {
     static styles = [
         ...DocksDialogContent.styles,
         css`
@@ -24,54 +44,176 @@ export class DocksVersionInfoDialogContent extends DocksDialogContent {
                 display: block;
             }
 
+            wa-dialog {
+                --width: 600px;
+            }
+
+            wa-dialog::part(body) {
+                display: flex;
+                flex-direction: column;
+                min-height: 0;
+                overflow: hidden;
+            }
+
             .dialog-body {
                 display: flex;
                 flex-direction: column;
                 gap: 0.75rem;
                 min-width: 32rem;
-                height: 600px;
+                height: min(70vh, 36rem);
+                min-height: min(70vh, 36rem);
+                overflow: hidden;
             }
 
             .dialog-body docks-tabs {
-                flex: 1;
+                flex: 1 1 auto;
                 min-height: 0;
+                overflow: hidden;
+            }
+
+            .dialog-footer {
+                display: flex;
+                gap: 0.5rem;
+                justify-content: flex-end;
+                width: 100%;
             }
         `,
     ];
 
     protected firstUpdated(changed: PropertyValues) {
         super.firstUpdated(changed);
-        const dialog = this.closest("wa-dialog");
-        if (dialog) {
-            dialog.style.setProperty("--width", "600px");
-            dialog.setAttribute("light-dismiss", "");
+        this.addEventListener("release-history-changed", this.onReleaseHistoryChanged);
+        this.updateComplete.then(() => {
+            this.attachTabListener();
+            this.syncActiveTab();
+            this.syncReleaseNav();
+        });
+    }
+
+    disconnectedCallback() {
+        this.removeEventListener("release-history-changed", this.onReleaseHistoryChanged);
+        super.disconnectedCallback();
+    }
+
+    private onReleaseHistoryChanged = () => {
+        this.syncReleaseNav();
+    };
+
+    private attachTabListener() {
+        const tabGroup = this.getAboutTabs()?.shadowRoot?.querySelector("wa-tab-group");
+        if (!tabGroup || tabGroup.hasAttribute("data-version-info-listener")) {
+            return;
         }
+        tabGroup.setAttribute("data-version-info-listener", "");
+        tabGroup.addEventListener("wa-tab-show", (event: Event) => {
+            const name = (event as CustomEvent<{ name: string }>).detail?.name;
+            if (name) {
+                this.activeTab = name;
+            }
+        });
+    }
+
+    private getAboutTabs(): DocksTabs | null {
+        return this.renderRoot.querySelector("docks-tabs") as DocksTabs | null;
+    }
+
+    private getReleaseHistory(): DocksReleaseHistory | null {
+        const part = this.getAboutTabs()?.getTabPart(ABOUT_TAB_RELEASE);
+        return part instanceof DocksReleaseHistory ? part : null;
+    }
+
+    private syncActiveTab() {
+        const tabGroup = this.getAboutTabs()?.shadowRoot?.querySelector("wa-tab-group") as
+            | (HTMLElement & { active?: string })
+            | null;
+        this.activeTab = tabGroup?.getAttribute("active") || tabGroup?.active || null;
+    }
+
+    private syncReleaseNav() {
+        this.releaseNav = this.getReleaseHistory()?.getNavState() ?? EMPTY_NAV;
+    }
+
+    private handleClose() {
+        const dialog = this.renderRoot.querySelector("wa-dialog") as (HTMLElement & { open?: boolean }) | null;
+        if (dialog && dialog.open !== false) {
+            dialog.open = false;
+            return;
+        }
+        this.close?.();
+    }
+
+    private handleAfterHide() {
+        this.onAfterHide?.();
+    }
+
+    private showOlderRelease() {
+        this.getReleaseHistory()?.showOlder();
+    }
+
+    private showNewerRelease() {
+        this.getReleaseHistory()?.showNewer();
     }
 
     render() {
         const app = appLoaderService.getCurrentApp();
+        const onReleaseTab = this.activeTab === ABOUT_TAB_RELEASE;
+        const showReleaseNav = onReleaseTab && this.releaseNav.hasMultiple;
 
         return html`
-            <div class="dialog-body">
-                ${app?.description ? html`<small>${app.description}</small>` : ""}
-                <docks-tabs id=${ABOUT_TABS}></docks-tabs>
-            </div>
+            <wa-dialog
+                label=${this.label}
+                open
+                light-dismiss
+                with-footer
+                @wa-after-hide=${this.handleAfterHide}
+            >
+                <div class="dialog-body">
+                    ${app?.description ? html`<small>${app.description}</small>` : ""}
+                    <docks-tabs id=${ABOUT_TABS} fill-height></docks-tabs>
+                </div>
+                <div slot="footer" class="dialog-footer">
+                    ${showReleaseNav
+                        ? html`
+                            <wa-button
+                                variant="default"
+                                ?disabled=${this.releaseNav.atOldest}
+                                @click=${this.showOlderRelease}
+                            >
+                                ← Previous
+                            </wa-button>
+                            <wa-button
+                                variant="default"
+                                ?disabled=${this.releaseNav.atNewest}
+                                @click=${this.showNewerRelease}
+                            >
+                                Next →
+                            </wa-button>
+                        `
+                        : nothing}
+                    <wa-button variant="primary" @click=${this.handleClose}>Close</wa-button>
+                </div>
+            </wa-dialog>
         `;
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        "docks-version-info-dialog-content": DocksVersionInfoDialogContent;
+        "docks-version-info-dialog": DocksVersionInfoDialog;
     }
 }
 
 contributionRegistry.registerContribution<DialogContribution>(DIALOG_CONTRIBUTION_TARGET, {
     id: "version-info",
     label: "About",
-    buttons: [CLOSE_PRIMARY],
-    component: () => html`<docks-version-info-dialog-content></docks-version-info-dialog-content>`,
-    onButton: async () => true,
+    selfContained: true,
+    component: (state) => html`
+        <docks-version-info-dialog
+            .label=${state?.label ?? ""}
+            .close=${state?.close}
+            .onAfterHide=${state?.onAfterHide}
+        ></docks-version-info-dialog>
+    `,
 });
 
 export function versionInfoDialog(): Promise<void> {

package/src/icons/icons.txt

@@ -4,9 +4,11 @@
 - python.svg: Licence=MIT, Author=Garuda Technology, Source=https://www.svgrepo.com/svg/452091/python
 - js.svg: Licence=MIT, Author=Garuda Technology, Source=https://www.svgrepo.com/svg/452045/js
 - jupyter.svg: Licence=Logo License, Author=gilbarbara, Source=https://www.svgrepo.com/svg/353949/jupyter
-- layout-standard.svg: Licence=Project-internal, Author=Eclipse Docks Team
+- layout-standard-left-sidebar.svg: Licence=Project-internal, Author=Eclipse Docks Team
+- layout-standard-right-sidebar.svg: Licence=Project-internal, Author=Eclipse Docks Team
 - layout-standard-bottom-panel.svg: Licence=Project-internal, Author=Eclipse Docks Team
-- layout-standard-bottom-sidebar.svg: Licence=Project-internal, Author=Eclipse Docks Team
+- layout-standard-left-aux.svg: Licence=Project-internal, Author=Eclipse Docks Team
+- layout-standard-right-aux.svg: Licence=Project-internal, Author=Eclipse Docks Team
 - layout-standard-full.svg: Licence=Project-internal, Author=Eclipse Docks Team
 - mark-github.svg: Licence=MIT, Author=GitHub, Source=https://github.com/primer/octicons (icons/mark-github-16.svg)
 - file-plus.svg: Licence=Project-internal, Author=Eclipse Docks Team

package/src/icons/layout-standard-bottom-panel.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
-  <rect x="4" y="3" width="12" height="8" rx="1.25" ry="1.25"
-        fill="none" stroke="currentColor" stroke-width="1.25" stroke-linejoin="round"/>
-  <line x1="2" y1="20" x2="18" y2="20" stroke="#3b82f6" stroke-width="2" stroke-linecap="round"/>
-  <line x1="20" y1="2" x2="20" y2="22" stroke="#3b82f6" stroke-width="2" stroke-linecap="round"/>
+  <rect x="4" y="3" width="16" height="11" rx="1.25" ry="1.25"
+        fill="none" stroke="#9ca3af" stroke-width="1.25" stroke-linejoin="round"/>
+  <rect x="4" y="16" width="16" height="5" rx="1.25" ry="1.25"
+        fill="#2563eb" fill-opacity="0.2" stroke="#2563eb" stroke-width="1.25" stroke-linejoin="round"/>
 </svg>

package/src/icons/layout-standard-full.svg

@@ -1,7 +1,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
   <rect x="8" y="4" width="8" height="8" rx="1.25" ry="1.25"
-        fill="none" stroke="currentColor" stroke-width="1.25" stroke-linejoin="round"/>
-  <line x1="2.5" y1="2" x2="2.5" y2="22" stroke="#3b82f6" stroke-width="2" stroke-linecap="round"/>
-  <line x1="21.5" y1="2" x2="21.5" y2="22" stroke="#3b82f6" stroke-width="2" stroke-linecap="round"/>
-  <line x1="6" y1="20" x2="18" y2="20" stroke="#3b82f6" stroke-width="2" stroke-linecap="round"/>
+        fill="none" stroke="#9ca3af" stroke-width="1.25" stroke-linejoin="round"/>
+  <line x1="2.5" y1="2" x2="2.5" y2="22" stroke="#2563eb" stroke-width="2" stroke-linecap="round"/>
+  <line x1="21.5" y1="2" x2="21.5" y2="22" stroke="#2563eb" stroke-width="2" stroke-linecap="round"/>
+  <line x1="6" y1="20" x2="18" y2="20" stroke="#2563eb" stroke-width="2" stroke-linecap="round"/>
 </svg>

package/src/icons/layout-standard-left-aux.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+  <rect x="8" y="4" width="12" height="16" rx="1.25" ry="1.25"
+        fill="none" stroke="#9ca3af" stroke-width="1.25" stroke-linejoin="round"/>
+  <rect x="2" y="4" width="5" height="7" rx="1" ry="1"
+        fill="none" stroke="#9ca3af" stroke-width="1.25" stroke-linejoin="round"/>
+  <rect x="2" y="13" width="5" height="7" rx="1" ry="1"
+        fill="#2563eb" fill-opacity="0.2" stroke="#2563eb" stroke-width="1.25" stroke-linejoin="round"/>
+</svg>

package/src/icons/layout-standard-left-sidebar.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+  <rect x="7" y="4" width="13" height="16" rx="1.25" ry="1.25"
+        fill="none" stroke="#9ca3af" stroke-width="1.25" stroke-linejoin="round"/>
+  <line x1="2.5" y1="2" x2="2.5" y2="22" stroke="#2563eb" stroke-width="2" stroke-linecap="round"/>
+</svg>

package/src/icons/layout-standard-right-aux.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+  <rect x="4" y="4" width="12" height="16" rx="1.25" ry="1.25"
+        fill="none" stroke="#9ca3af" stroke-width="1.25" stroke-linejoin="round"/>
+  <rect x="17" y="4" width="5" height="7" rx="1" ry="1"
+        fill="none" stroke="#9ca3af" stroke-width="1.25" stroke-linejoin="round"/>
+  <rect x="17" y="13" width="5" height="7" rx="1" ry="1"
+        fill="#2563eb" fill-opacity="0.2" stroke="#2563eb" stroke-width="1.25" stroke-linejoin="round"/>
+</svg>

package/src/icons/layout-standard-right-sidebar.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+  <rect x="4" y="4" width="13" height="16" rx="1.25" ry="1.25"
+        fill="none" stroke="#9ca3af" stroke-width="1.25" stroke-linejoin="round"/>
+  <line x1="21.5" y1="2" x2="21.5" y2="22" stroke="#2563eb" stroke-width="2" stroke-linecap="round"/>
+</svg>

package/src/layouts/standard-layout.ts

@@ -6,6 +6,7 @@ import {
     SIDEBAR_MAIN,
     SIDEBAR_MAIN_BOTTOM,
     SIDEBAR_AUXILIARY,
+    SIDEBAR_AUXILIARY_BOTTOM,
     PANEL_BOTTOM,
     TOOLBAR_MAIN,
     TOOLBAR_MAIN_CENTER,
@@ -14,15 +15,22 @@ import {
     TOOLBAR_BOTTOM_CENTER,
     TOOLBAR_BOTTOM_END
 } from "../core/contribution-targets";
+import { appLoaderService } from "../core/apploader";
+import { appSettings } from "../core/settingsservice";
+import {
+    LAYOUT_PANEL_SETTINGS_KEY,
+    resolveStoredPanelVisibility,
+    type LayoutPanelVisibility,
+} from "../core/layout-panels";
 import {DocksContainer} from "../parts/container";
 
 @customElement('docks-standard-layout')
 export class DocksStandardLayout extends DocksContainer {
-    @property({type: Boolean, attribute: 'show-bottom-sidebar'})
-    showBottomSidebar: boolean = false;
+    @property({type: Boolean, attribute: 'show-left-aux'})
+    showLeftAux: boolean = false;
 
     @property({type: Boolean, attribute: 'show-bottom-panel'})
-    showBottomPanel: boolean = false;
+    showBottomPanel: boolean = true;
 
     @property({type: Boolean, attribute: 'show-left-sidebar'})
     showLeftSidebar: boolean = true;
@@ -30,10 +38,65 @@ export class DocksStandardLayout extends DocksContainer {
     @property({type: Boolean, attribute: 'show-aux-sidebar'})
     showAuxSidebar: boolean = true;
 
+    @property({type: Boolean, attribute: 'show-right-aux'})
+    showRightAux: boolean = false;
+
+    private panelsInitialized = false;
+
     createRenderRoot() {
         return this;
     }
 
+    getPanelVisibility(): LayoutPanelVisibility {
+        return {
+            showLeftSidebar: this.showLeftSidebar,
+            showAuxSidebar: this.showAuxSidebar,
+            showBottomPanel: this.showBottomPanel,
+            showLeftAux: this.showLeftAux,
+            showRightAux: this.showRightAux,
+        };
+    }
+
+    private applyPanelVisibility(panels: LayoutPanelVisibility): void {
+        this.showLeftSidebar = panels.showLeftSidebar;
+        this.showAuxSidebar = panels.showAuxSidebar;
+        this.showBottomPanel = panels.showBottomPanel;
+        this.showLeftAux = panels.showLeftAux;
+        this.showRightAux = panels.showRightAux;
+    }
+
+    async setPanelVisibility(panels: Partial<LayoutPanelVisibility>): Promise<void> {
+        const next = { ...this.getPanelVisibility(), ...panels };
+        this.applyPanelVisibility(next);
+        try {
+            await appSettings.set(LAYOUT_PANEL_SETTINGS_KEY, next);
+        } catch (error) {
+            console.error('Failed to persist layout panel visibility:', error);
+            throw error;
+        }
+        window.dispatchEvent(new CustomEvent('layout-panels-changed', {
+            detail: { panels: this.getPanelVisibility() },
+        }));
+    }
+
+    protected doInitUI() {
+        void this.initializePanelVisibility();
+    }
+
+    private async initializePanelVisibility(): Promise<void> {
+        if (this.panelsInitialized) {
+            return;
+        }
+        this.panelsInitialized = true;
+
+        const appLayout = appLoaderService.getCurrentApp()?.layout;
+        const panels = await resolveStoredPanelVisibility(appLayout);
+        this.applyPanelVisibility(panels);
+        window.dispatchEvent(new CustomEvent('layout-panels-changed', {
+            detail: { panels: this.getPanelVisibility() },
+        }));
+    }
+
     private getGridSizes(): string {
         if (this.showLeftSidebar && this.showAuxSidebar) {
             return "20%, 60%, 20%";
@@ -133,7 +196,7 @@ export class DocksStandardLayout extends DocksContainer {
                 
                 ${this.showLeftSidebar
                     ? html`
-                        ${this.showBottomSidebar
+                        ${this.showLeftAux
                             ? html`
                                 <docks-resizable-grid 
                                     id="left-sidebar-split" 
@@ -163,7 +226,20 @@ export class DocksStandardLayout extends DocksContainer {
                 }
                 
                 ${this.showAuxSidebar
-                    ? html`<docks-tabs id="${SIDEBAR_AUXILIARY}"></docks-tabs>`
+                    ? html`
+                        ${this.showRightAux
+                            ? html`
+                                <docks-resizable-grid
+                                    id="right-sidebar-split"
+                                    orientation="vertical"
+                                    sizes="50%, 50%">
+                                    <docks-tabs id="${SIDEBAR_AUXILIARY}"></docks-tabs>
+                                    <docks-tabs id="${SIDEBAR_AUXILIARY_BOTTOM}" placement="start" icon-only></docks-tabs>
+                                </docks-resizable-grid>
+                            `
+                            : html`<docks-tabs id="${SIDEBAR_AUXILIARY}"></docks-tabs>`
+                        }
+                    `
                     : nothing
                 }
             </docks-resizable-grid>

package/src/parts/contextmenu.ts

@@ -10,7 +10,7 @@ import {
 import {subscribe} from "../core/events";
 import {closeSiblingSubmenus} from "../core/dropdown-menu-utils";
 import {createRef, ref} from "lit/directives/ref.js";
-import {renderDropdownContribution} from "../core/dropdown-item";
+import {renderDropdownContribution, handleDropdownWaSelect} from "../core/dropdown-item";
 
 interface VirtualPopupAnchor {
     getBoundingClientRect(): DOMRect;
@@ -276,6 +276,7 @@ export class DocksContextMenu extends DocksElement {
                 ${ref(this.dropdownRef)}
                 ?open=${this.isOpen}
                 @submenu-opening=${this.handleSubmenuOpening}
+                @wa-select=${handleDropdownWaSelect}
                 @wa-after-hide=${this.onClose}>
                 <span slot="trigger" hidden aria-hidden="true"></span>
                 

package/src/parts/part.ts

@@ -21,6 +21,10 @@ export abstract class DocksPart extends DocksContainer {
     @property({ type: Boolean, attribute: false })
     public isEditor: boolean = false;
 
+    /** Compact layout for dialog/tab embedding (no fill-height shell or nested scroll). */
+    @property({ type: Boolean, reflect: true })
+    embedded = false;
+
     protected commandStack?: CommandStack;
 
     public getCommandStack(): CommandStack | undefined {
@@ -294,6 +298,26 @@ export abstract class DocksPart extends DocksContainer {
             min-height: 100%;
         }
 
+        :host([embedded]) {
+            height: auto;
+        }
+
+        :host([embedded]) .part-shell {
+            height: auto;
+            overflow: visible;
+            grid-template-rows: auto;
+        }
+
+        :host([embedded]) .part-content {
+            overflow: visible;
+            min-height: 0;
+        }
+
+        :host([embedded]) .part-content-inner {
+            height: auto;
+            min-height: 0;
+        }
+
         .part-toolbar {
             min-height: 0;
         }