feat: allow docks-tabs to have a custom extensible toolbar

Author: erdalkaraca

packages/app/src/dashboard-layout.ts

@@ -77,7 +77,7 @@ contributionRegistry.registerContribution("dashboard-views-toolbar-bottom", {
 
 contributionRegistry.registerContribution("dashboard-views-toolbar-bottom", {
     label: "Settings",
-    icon: "gear",
+    icon: "docks settings",
     command: "open_settings"
 });
 

packages/core/src/commands/global.ts

@@ -121,18 +121,13 @@ registerAll({
                 title: "Extensions",
                 data: {},
                 key: "system.extensions",
-                icon: "puzzle-piece",
+                icon: "docks extensions",
                 state: {},
                 component: (id: string) => html`<docks-extensions id="${id}"></docks-extensions>`,
             }
             editorRegistry.loadEditor(editorInput, "extensions-editor").then()
         }
     },
-    contribution: {
-        target: TOOLBAR_MAIN_RIGHT,
-        icon: "puzzle-piece",
-        label: "Open Extensions",
-    }
 })
 
 registerAll({

packages/core/src/contributions/default-ui-contributions.ts

@@ -18,7 +18,7 @@ import {
 contributionRegistry.registerContribution(SIDEBAR_MAIN, {
     name: VIEW_FILEBROWSER,
     label: "Workspace",
-    icon: "folder-open",
+    icon: "folder",
     component: (id: string) => html`<docks-filebrowser id="${id}"></docks-filebrowser>`
 });
 

packages/core/src/core/constants.ts

@@ -6,6 +6,9 @@ export const TOOLBAR_BOTTOM = "app-toolbars-bottom"
 export const TOOLBAR_BOTTOM_CENTER = "app-toolbars-bottom-center"
 export const TOOLBAR_BOTTOM_END = "app-toolbars-bottom-end"
 
+/** Commands/HTML at the end of the main sidebar activity rail (wa-tab-group nav slot). */
+export const SIDEBAR_MAIN_TOOLBAR = "sidebar-main-toolbar"
+
 export const SYSTEM_VIEWS = "system-views"
 export const SYSTEM_LAYOUTS = "system.layouts"
 

packages/core/src/core/extensionregistry.ts

@@ -198,8 +198,8 @@ class ExtensionRegistry {
                 logger.info(`Registered extension from URL: ${id}`);
             }
 
-            this.enable(id, false);
-            
+            await this.enableAsync(id, false);
+
             logger.info(`Successfully enabled extension from URL: ${finalUrl}`);
             return id;
         } catch (error) {
@@ -248,11 +248,11 @@ class ExtensionRegistry {
             return
         }
         logger.debug(`Loading extension: ${extensionId}`)
-        this.load(extensionId).then(() => {
-            this.updateEnablement(extensionId, true, informUser)
-        }).catch(_e => {
-            logger.error(`Could not load extension: ${extensionId}: ${_e}`)
-        })
+        this.load(extensionId)
+            .then(() => this.updateEnablementAsync(extensionId, true, informUser))
+            .catch(_e => {
+                logger.error(`Could not load extension: ${extensionId}: ${_e}`)
+            })
     }
 
     /** Like enable() but returns a Promise that resolves when the extension is loaded. Use when the caller must wait for commands/contributions to be registered (e.g. before rendering the app). */
@@ -263,7 +263,7 @@ class ExtensionRegistry {
         logger.debug(`Loading extension: ${extensionId}`)
         try {
             await this.load(extensionId)
-            this.updateEnablement(extensionId, true, informUser)
+            await this.updateEnablementAsync(extensionId, true, informUser)
         } catch (e) {
             logger.error(`Could not load extension: ${extensionId}: ${e}`)
             throw e
@@ -341,17 +341,17 @@ class ExtensionRegistry {
                     }
                 })
 
-                // Mark as loaded BEFORE executing the module
-                this.loadedExtensions.add(extensionId)
-
                 if (module?.default instanceof Function) {
                     try {
-                        module.default(uiContext.getProxy())
+                        const activationResult = module.default(uiContext.getProxy())
+                        await Promise.resolve(activationResult)
                     } catch (error) {
                         logger.error(`Error executing extension function for ${extensionId}: ${error}`)
                         throw error
                     }
                 }
+
+                this.loadedExtensions.add(extensionId)
 
             } catch (error) {
                 // If loading failed, remove from loaded set
@@ -371,28 +371,8 @@ class ExtensionRegistry {
         if (!this.isEnabled(extensionId)) {
             return
         }
-        this.updateEnablement(extensionId, false, informUser)
-    }
-
-    private updateEnablement(extensionId: string, enabled: boolean, informUser: boolean) {
-        this.checkExtensionsConfig().then(() => {
-            const extension = this.extensionsSettings?.find(e => e.id == extensionId)
-            if (extension) {
-                extension.enabled = enabled
-            } else {
-                this.extensionsSettings?.push({id: extensionId, enabled: enabled})
-            }
-            appSettings.set(KEY_EXTENSIONS_CONFIG, this.extensionsSettings).then(() => {
-                if (informUser) {
-                    const extObj = this.extensions[extensionId]
-                    if (enabled) {
-                        toastInfo(extObj.name + " enabled.")
-                    } else {
-                        toastInfo(extObj.name + " disabled " + " - Please restart to take effect")
-                    }
-                }
-                publish(TOPIC_EXTENSIONS_CHANGED, this.extensionsSettings)
-            })
+        void this.updateEnablementAsync(extensionId, false, informUser).catch((e) => {
+            logger.error(`Could not persist disable for extension ${extensionId}: ${e}`)
         })
     }
 

packages/core/src/icons/extensions.svg

@@ -1,3 +1,6 @@
+# Provenance — bundled icons in this folder (licence, author, source).
+# Used for compliance review and attribution; resolver: registerIconLibrary('docks') in externals/webawesome.ts
+
 - 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
@@ -7,3 +10,5 @@
 - 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
+- settings.svg: Licence=Project-internal, Author=Eclipse Docks Team, Note=Settings; duotone brand tracks + success knobs (sliders motif)
+- extensions.svg: Licence=Project-internal, Author=Eclipse Docks Team, Note=Extensions; 2×2 tile grid like docks favicon (packages/app/public/favicon.svg); one success tile, three brand tiles

packages/core/src/icons/icons.txt

@@ -139,11 +139,11 @@ export class DocksStandardLayout extends DocksContainer {
                                     id="left-sidebar-split" 
                                     orientation="vertical" 
                                     sizes="50%, 50%">
-                                    <docks-tabs id="${SIDEBAR_MAIN}"></docks-tabs>
-                                    <docks-tabs id="${SIDEBAR_MAIN_BOTTOM}"></docks-tabs>
+                                    <docks-tabs id="${SIDEBAR_MAIN}" placement="start" icon-only with-toolbar></docks-tabs>
+                                    <docks-tabs id="${SIDEBAR_MAIN_BOTTOM}"  placement="start" icon-only></docks-tabs>
                                 </docks-resizable-grid>
                             `
-                            : html`<docks-tabs id="${SIDEBAR_MAIN}"></docks-tabs>`
+                            : html`<docks-tabs id="${SIDEBAR_MAIN}" placement="start" icon-only with-toolbar></docks-tabs>`
                         }
                     `
                     : nothing

packages/core/src/icons/settings.svg

@@ -1,6 +1,7 @@
 import {customElement, property, state} from "lit/decorators.js";
 import {css, html, nothing} from "lit";
 import {DocksContainer} from "./container";
+import {appLoaderService} from "../core/apploader";
 import {contributionRegistry, ContributionChangeEvent, TabContribution, TOPIC_CONTRIBUTEIONS_CHANGED} from "../core/contributionregistry";
 import {when} from "lit/directives/when.js";
 import {repeat} from "lit/directives/repeat.js";
@@ -12,8 +13,6 @@ import {MouseButton, EDITOR_AREA_MAIN} from "../core/constants";
 import {activePartSignal, activeEditorSignal, partDirtySignal} from "../core/appstate";
 import {watchSignal} from "../core/signals";
 import {confirmDialog} from "../dialogs";
-import {appLoaderService} from "../core/apploader";
-
 /**
  * DocksTabs - A dynamic tab container component
  * 
@@ -32,6 +31,16 @@ export class DocksTabs extends DocksContainer {
     @property({reflect: true})
     placement: "top" | "bottom" | "start" | "end" = "top";
 
+    /** When true, tab contributions show icons only (labels remain on title + wa-icon for a11y). */
+    @property({type: Boolean, reflect: true, attribute: 'icon-only'})
+    iconOnly: boolean = false;
+
+    /**
+     * When true, render a `docks-toolbar` in the tab group `nav` slot after tabs (extensions contribute via id `${containerId}-toolbar`).
+     */
+    @property({type: Boolean, reflect: true, attribute: 'with-toolbar'})
+    withToolbar: boolean = false;
+
     /** Tab contributions for this container */
     @state()
     private contributions: TabContribution[] = [];
@@ -60,11 +69,14 @@ export class DocksTabs extends DocksContainer {
         this.updateComplete.then(() => this.ensureTabGroupListenersAndActivate());
 
         subscribe(TOPIC_CONTRIBUTEIONS_CHANGED, (event: ContributionChangeEvent) => {
-            if (!this.containerId || event.target !== this.containerId) return;
-            
+            if (!this.containerId) return;
+            const navToolbarId = `${this.containerId}-toolbar`;
+            if (event.target === navToolbarId) return;
+            if (event.target !== this.containerId) return;
+
             this.loadAndResolveContributions();
             this.requestUpdate();
-            
+
             this.updateComplete.then(() => {
                 this.activateNextAvailableTab();
             });
@@ -326,6 +338,11 @@ export class DocksTabs extends DocksContainer {
         return label.slice(0, startLen) + ellipsis + label.slice(-(take - startLen));
     }
 
+    /** Aligns `docks-toolbar` with `placement`: side rails → vertical, top/bottom tab strip → horizontal. */
+    private withToolbarOrientation(): "horizontal" | "vertical" {
+        return this.placement === "start" || this.placement === "end" ? "vertical" : "horizontal";
+    }
+
     private renderEmptyState() {
         const currentApp = appLoaderService.getCurrentApp();
         return html`
@@ -351,6 +368,7 @@ export class DocksTabs extends DocksContainer {
         if (this.contributions.length === 0) {
             return this.renderEmptyState();
         }
+        const navToolbarId = this.containerId ? `${this.containerId}-toolbar` : '';
         return html`
             <wa-tab-group ${ref(this.tabGroup)} placement=${this.placement}>
                 ${repeat(
@@ -364,7 +382,7 @@ export class DocksTabs extends DocksContainer {
                                 title="${fullLabel}"
                                 @auxclick="${(e: MouseEvent) => this.handleTabAuxClick(e, c)}">
                             ${icon(c.icon, { label: fullLabel })}
-                            ${shortLabel}
+                            ${this.iconOnly ? nothing : shortLabel}
                             ${when(c.closable, () => html`
                                 <wa-icon name="xmark" label="Close"  @click="${(e: Event) => this.closeTab(e, c.name)}"></wa-icon>
                             `)}
@@ -375,6 +393,18 @@ export class DocksTabs extends DocksContainer {
                     `;
                     }
                 )}
+                ${this.withToolbar && navToolbarId
+                    ? html`
+                        <div class="nav-toolbar-spacer" slot="nav" aria-hidden="true"></div>
+                        <docks-toolbar
+                            slot="nav"
+                            id=${navToolbarId}
+                            orientation=${this.withToolbarOrientation()}
+                            align="center"
+                            size="large"
+                        ></docks-toolbar>
+                    `
+                    : nothing}
             </wa-tab-group>
         `;
     }
@@ -388,15 +418,22 @@ export class DocksTabs extends DocksContainer {
         wa-tab-group {
             height: 100%;
             width: 100%;
+            min-height: 0;
         }
 
-        wa-tab-group::part(base) {
+        :host(:is([placement="top"], [placement="bottom"])) wa-tab-group::part(base) {
             display: grid;
             grid-template-rows: auto minmax(0, 1fr);
             height: 100%;
             width: 100%;
         }
 
+        :host(:is([placement="start"], [placement="end"])) wa-tab-group::part(base) {
+            height: 100%;
+            width: 100%;
+            min-height: 0;
+        }
+
         wa-tab-panel[active] {
             display: grid;
             grid-template-rows: minmax(0, 1fr);
@@ -416,6 +453,56 @@ export class DocksTabs extends DocksContainer {
             padding: 3px 0.5rem;
         }
 
+        :host([icon-only]) wa-tab::part(base) {
+            justify-content: center;
+        }
+
+        :host([icon-only]:is([placement="top"], [placement="bottom"])) wa-tab::part(base) {
+            padding: var(--wa-space-s);
+        }
+
+        :host([icon-only]:is([placement="start"], [placement="end"])) wa-tab::part(base) {
+            padding-inline: 0;
+            padding-block: var(--wa-space-s);
+        }
+
+        :host([icon-only]) wa-tab wa-icon {
+            font-size: var(--wa-font-size-l);
+        }
+
+        :host([icon-only]:is([placement="start"], [placement="end"])) wa-tab-group::part(nav),
+        :host([icon-only]:is([placement="start"], [placement="end"])) wa-tab-group::part(tabs) {
+            padding: 0;
+            margin: 0;
+        }
+
+        :host([icon-only]:is([placement="start"], [placement="end"])) wa-tab-group::part(nav) {
+            flex: 0 0 auto;
+        }
+
+        :host([with-toolbar]) .nav-toolbar-spacer {
+            flex: 1 1 auto;
+            min-height: 0;
+            min-width: 0;
+            pointer-events: none;
+        }
+
+        :host([with-toolbar]:is([placement="start"], [placement="end"])) wa-tab-group::part(nav) {
+            display: grid;
+            grid-template-rows: 1fr;
+            height: 100%;
+            min-height: 0;
+        }
+
+        :host([with-toolbar]:is([placement="start"], [placement="end"])) wa-tab-group::part(tabs) {
+            display: flex;
+            flex-direction: column;
+            min-height: 0;
+            height: 100%;
+            flex: 1 1 auto;
+            align-self: stretch;
+        }
+
         wa-tab-panel {
             --padding: 0px;
         }
@@ -431,7 +518,6 @@ export class DocksTabs extends DocksContainer {
             justify-content: center;
             width: 100%;
             height: 100%;
-            grid-row: 2;
         }
 
         .empty-content {