@eclipse-docks/core 0.7.126 → 0.7.130

package/src/core/layout-panels.ts

@@ -0,0 +1,121 @@
+import type { LayoutDescriptor } from './apploader';
+import { appSettings } from './settingsservice';
+import type { DocksStandardLayout } from '../layouts/standard-layout';
+
+export type LayoutPanelVisibility = {
+    showLeftSidebar: boolean;
+    showAuxSidebar: boolean;
+    showBottomPanel: boolean;
+    showLeftAux: boolean;
+    showRightAux: boolean;
+};
+
+export const DEFAULT_LAYOUT_PANEL_VISIBILITY: LayoutPanelVisibility = {
+    showLeftSidebar: true,
+    showAuxSidebar: true,
+    showBottomPanel: true,
+    showLeftAux: false,
+    showRightAux: false,
+};
+
+function normalizePanelVisibility(stored: Partial<LayoutPanelVisibility>): LayoutPanelVisibility {
+    return {
+        showLeftSidebar: stored.showLeftSidebar ?? DEFAULT_LAYOUT_PANEL_VISIBILITY.showLeftSidebar,
+        showAuxSidebar: stored.showAuxSidebar ?? DEFAULT_LAYOUT_PANEL_VISIBILITY.showAuxSidebar,
+        showBottomPanel: stored.showBottomPanel ?? DEFAULT_LAYOUT_PANEL_VISIBILITY.showBottomPanel,
+        showLeftAux: stored.showLeftAux ?? DEFAULT_LAYOUT_PANEL_VISIBILITY.showLeftAux,
+        showRightAux: stored.showRightAux ?? DEFAULT_LAYOUT_PANEL_VISIBILITY.showRightAux,
+    };
+}
+
+export const LAYOUT_PANEL_SETTINGS_KEY = 'layoutPanelVisibility';
+
+/** @deprecated Legacy layout id persisted before panel visibility toggles. */
+export const LEGACY_PREFERRED_LAYOUT_KEY = 'preferredLayoutId';
+
+/** Maps legacy parameterized layout ids to panel visibility. */
+export function layoutIdToPanelVisibility(layoutId: string): LayoutPanelVisibility {
+    switch (layoutId) {
+        case 'standard-bottom-panel':
+            return { ...DEFAULT_LAYOUT_PANEL_VISIBILITY, showBottomPanel: true, showLeftAux: false, showRightAux: false };
+        case 'standard-bottom-sidebar':
+            return { ...DEFAULT_LAYOUT_PANEL_VISIBILITY, showBottomPanel: false, showLeftAux: true, showRightAux: false };
+        case 'standard-full':
+            return {
+                ...DEFAULT_LAYOUT_PANEL_VISIBILITY,
+                showLeftAux: true,
+                showRightAux: true,
+            };
+        case 'standard':
+        default:
+            return {
+                ...DEFAULT_LAYOUT_PANEL_VISIBILITY,
+                showBottomPanel: false,
+                showLeftAux: false,
+                showRightAux: false,
+            };
+    }
+}
+
+export function resolveInitialPanelVisibilityFromApp(appLayout?: LayoutDescriptor): LayoutPanelVisibility {
+    if (typeof appLayout === 'object' && appLayout.props) {
+        return {
+            ...DEFAULT_LAYOUT_PANEL_VISIBILITY,
+            showLeftSidebar: appLayout.props.showLeftSidebar !== false,
+            showAuxSidebar: appLayout.props.showAuxSidebar !== false,
+            showBottomPanel: appLayout.props.showBottomPanel === true,
+            showLeftAux: appLayout.props.showLeftAux === true,
+            showRightAux: appLayout.props.showRightAux === true,
+        };
+    }
+    if (typeof appLayout === 'string') {
+        return layoutIdToPanelVisibility(appLayout);
+    }
+    return { ...DEFAULT_LAYOUT_PANEL_VISIBILITY };
+}
+
+export async function resolveStoredPanelVisibility(
+    appLayout?: LayoutDescriptor,
+): Promise<LayoutPanelVisibility> {
+    try {
+        const saved = await appSettings.get(LAYOUT_PANEL_SETTINGS_KEY) as Partial<LayoutPanelVisibility> | undefined;
+        if (saved && typeof saved === 'object') {
+            return normalizePanelVisibility(saved);
+        }
+    } catch {
+        // fall through to legacy/app defaults
+    }
+
+    try {
+        const legacyLayoutId = await appSettings.get(LEGACY_PREFERRED_LAYOUT_KEY) as string | undefined;
+        if (legacyLayoutId) {
+            return layoutIdToPanelVisibility(legacyLayoutId);
+        }
+    } catch {
+        // fall through to app defaults
+    }
+
+    return resolveInitialPanelVisibilityFromApp(appLayout);
+}
+
+export function findStandardLayout(container?: ParentNode | null): DocksStandardLayout | null {
+    const root = container ?? document.getElementById('app-root') ?? document.body;
+    if (!root || typeof root.querySelector !== 'function') {
+        return null;
+    }
+    return root.querySelector('docks-standard-layout');
+}
+
+export type LayoutPanelOption = {
+    key: keyof LayoutPanelVisibility;
+    label: string;
+    icon: string;
+};
+
+export const LAYOUT_PANEL_OPTIONS: LayoutPanelOption[] = [
+    { key: 'showLeftSidebar', label: 'Left sidebar', icon: 'docks layout-standard-left-sidebar' },
+    { key: 'showAuxSidebar', label: 'Right sidebar', icon: 'docks layout-standard-right-sidebar' },
+    { key: 'showBottomPanel', label: 'Bottom panel', icon: 'docks layout-standard-bottom-panel' },
+    { key: 'showLeftAux', label: 'Left Aux', icon: 'docks layout-standard-left-aux' },
+    { key: 'showRightAux', label: 'Right Aux', icon: 'docks layout-standard-right-aux' },
+];

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

@@ -85,10 +85,13 @@ export class DocksNavigableInfoDialogContent extends DocksDialogContent {
     }
 
     private handleClose() {
-        const dialog = this.closest('wa-dialog');
-        if (dialog && this.resolveCallback) {
+        if (this.resolveCallback) {
             this.resolveCallback();
         }
+        const dialog = this.closest('wa-dialog') as (HTMLElement & { open?: boolean }) | null;
+        if (dialog && dialog.open !== false) {
+            dialog.open = false;
+        }
     }
 
     static styles = [

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>