feat: enhance contribution management with generic visibility and disabled state handling

erdalkaraca · erdalkaraca · commit 1a202bae6c3d · 2026-05-17T08:50:37.000Z
diff --git a/packages/core/src/components/command.ts b/packages/core/src/components/command.ts
@@ -3,9 +3,17 @@ import { customElement, property, state } from 'lit/decorators.js'
 import { DocksWidget } from '../widgets/widget'
 import { icon } from '../core/icon-utils'
 import { keyBindingManager } from '../core/keybindings'
-import { contributionRegistry, Contribution, CommandContribution, HTMLContribution, ContributionChangeEvent, TOPIC_CONTRIBUTEIONS_CHANGED } from '../core/contributionregistry'
+import {
+    contributionRegistry,
+    Contribution,
+    CommandContribution,
+    HTMLContribution,
+    ContributionChangeEvent,
+    TOPIC_CONTRIBUTEIONS_CHANGED,
+    getContributionDisabled,
+    getContributionVisible,
+} from '../core/contributionregistry'
 import { subscribe } from '../core/events'
-import { Signal } from '@lit-labs/signals'
 import { unsafeHTML } from 'lit/directives/unsafe-html.js'
 
 @customElement('docks-command')
@@ -114,7 +122,10 @@ export class DocksCommand extends DocksWidget {
     private renderContribution(contribution: Contribution) {
         if ('command' in contribution) {
             const commandContribution = contribution as CommandContribution
-            const disabled = (commandContribution.disabled as Signal.Computed<boolean>)?.get()
+            if (!getContributionVisible(commandContribution)) {
+                return nothing
+            }
+            const disabled = getContributionDisabled(commandContribution)
             return html`
                 <docks-command 
                     cmd="${commandContribution.command}"
diff --git a/packages/core/src/core/commandregistry.ts b/packages/core/src/core/commandregistry.ts
@@ -225,7 +225,7 @@ rootContext.put("commandRegistry", commandRegistry);
 export interface RegisterOptions {
     command: Command,
     handler?: Handler,
-    contribution?: Contribution & Partial<Pick<CommandContribution, 'disabled'>>
+    contribution?: Contribution
 }
 
 export const registerAll = (options: RegisterOptions) => {
diff --git a/packages/core/src/core/contributionregistry.ts b/packages/core/src/core/contributionregistry.ts
@@ -16,15 +16,45 @@ export interface Contribution {
     name?: string;
     target?: string;
     label: string;
+    /** When true, UI may show `label` alongside the icon (e.g. toolbar). Honored where supported in UI. */
+    showLabel?: boolean;
     icon?: string;
     slot?: string;
+    disabled?: (() => boolean) | Signal.Computed<boolean>;
+    /** When false, the contribution is not rendered (default: shown). Honored where supported in UI. */
+    visible?: (() => boolean) | Signal.Computed<boolean>;
 }
 
 export interface CommandContribution extends Contribution {
     command: string;
     params?: Record<string, any>;
-    showLabel?: boolean;
-    disabled?: (() => boolean) | Signal.Computed<boolean>;
+}
+
+export function isCommandContribution(contribution: Contribution): contribution is CommandContribution {
+    return "command" in contribution;
+}
+
+/** Default true when `visible` is omitted. */
+export function getContributionVisible(contribution: Contribution): boolean {
+    const visible = contribution.visible as Signal.Computed<boolean> | undefined;
+    if (!visible) return true;
+    return visible.get() !== false;
+}
+
+/** Default false when `disabled` is omitted. */
+export function getContributionDisabled(contribution: Contribution): boolean {
+    const disabled = contribution.disabled as Signal.Computed<boolean> | undefined;
+    if (!disabled) return false;
+    return disabled.get() === true;
+}
+
+function wrapContributionReactiveFlags(contribution: Contribution): void {
+    if (contribution.disabled instanceof Function) {
+        contribution.disabled = new Signal.Computed<boolean>(contribution.disabled);
+    }
+    if (contribution.visible instanceof Function) {
+        contribution.visible = new Signal.Computed<boolean>(contribution.visible);
+    }
 }
 
 export interface HTMLContribution extends Contribution {
@@ -71,12 +101,7 @@ class ContributionRegistry {
 
     registerContribution<T extends Contribution>(target: string, contribution: T) {
         const targetSlot = this.getOrCreateSlot(target);
-        if ("command" in contribution) {
-            const cmd = contribution as unknown as CommandContribution
-            if (cmd.disabled instanceof Function) {
-                cmd.disabled = new Signal.Computed<boolean>(cmd.disabled)
-            }
-        }
+        wrapContributionReactiveFlags(contribution);
         targetSlot.push(contribution);
         publish(TOPIC_CONTRIBUTEIONS_CHANGED, { target, contributions: targetSlot } as ContributionChangeEvent);
 
diff --git a/packages/core/src/parts/contextmenu.ts b/packages/core/src/parts/contextmenu.ts
@@ -6,10 +6,11 @@ import {
     Contribution,
     ContributionChangeEvent,
     contributionRegistry,
+    getContributionDisabled,
     HTMLContribution,
+    getContributionVisible,
     TOPIC_CONTRIBUTEIONS_CHANGED
 } from "../core/contributionregistry";
-import {Signal} from '@lit-labs/signals';
 import {unsafeHTML} from "lit/directives/unsafe-html.js";
 import {subscribe} from "../core/events";
 import {createRef, ref} from "lit/directives/ref.js";
@@ -217,7 +218,10 @@ export class DocksContextMenu extends DocksElement {
     private renderContribution(contribution: Contribution) {
         if ("command" in contribution) {
             const commandContribution = contribution as CommandContribution;
-            const disabled = (commandContribution.disabled as Signal.Computed<boolean>)?.get();
+            if (!getContributionVisible(commandContribution)) {
+                return nothing;
+            }
+            const disabled = getContributionDisabled(commandContribution);
             return html`
                 <docks-command
                     cmd="${commandContribution.command}"
diff --git a/packages/core/src/parts/toolbar.ts b/packages/core/src/parts/toolbar.ts
@@ -7,10 +7,11 @@ import {
     Contribution,
     ContributionChangeEvent,
     contributionRegistry,
+    getContributionDisabled,
     HTMLContribution,
+    getContributionVisible,
     TOPIC_CONTRIBUTEIONS_CHANGED
 } from "../core/contributionregistry";
-import {Signal} from '@lit-labs/signals';
 import {unsafeHTML} from "lit/directives/unsafe-html.js";
 import {subscribe} from "../core/events";
 import { icon } from "../core/icon-utils";
@@ -28,7 +29,8 @@ function renderButtonGroup(
 ) {
     const slot = slotName ?? 'default';
     const label = `Toolbar ${slot}`;
-    const items = contributions.filter(c => c.slot === slotName && isToolbarItem(c));
+    const items = contributions.filter(c =>
+        c.slot === slotName && isToolbarItem(c) && getContributionVisible(c));
     const slotHtml = slotName === 'start'
         ? html`<slot name="start"></slot>`
         : slotName === 'end'
@@ -211,7 +213,7 @@ export class DocksToolbar extends DocksElement {
             return html`
                 <wa-button @click=${() => void this.executeCommand(commandContribution.command, commandContribution.params || {})}
                            title=${commandContribution.label}
-                           ?disabled="${(commandContribution.disabled as Signal.Computed<boolean>)?.get()}"
+                           ?disabled="${getContributionDisabled(commandContribution)}"
                            appearance="plain" size=${this.size}>
                     ${icon(commandContribution.icon, { label: commandContribution.label })}
                     ${showLabel ? commandContribution.label : ''}
diff --git a/packages/core/test/units/contributionregistry.test.ts b/packages/core/test/units/contributionregistry.test.ts
@@ -11,6 +11,8 @@ import {
   TOPIC_CONTRIBUTEIONS_CHANGED,
   type Contribution,
   type CommandContribution,
+  getContributionVisible,
+  getContributionDisabled,
 } from '../../src/core/contributionregistry';
 
 describe('ContributionRegistry', () => {
@@ -36,7 +38,7 @@ describe('ContributionRegistry', () => {
     expect(list[1].label).toBe('Second');
   });
 
-  it('converts disabled function to Signal.Computed for CommandContribution', () => {
+  it('converts disabled function to Signal.Computed', () => {
     const target = 'test-disabled-' + Math.random();
     const contribution: CommandContribution = {
       label: 'With disabled',
@@ -49,7 +51,7 @@ describe('ContributionRegistry', () => {
     expect((contribution.disabled as { get(): boolean }).get()).toBe(true);
   });
 
-  it('leaves existing Signal.Computed disabled unchanged for CommandContribution', () => {
+  it('leaves existing Signal.Computed disabled unchanged', () => {
     const target = 'test-computed-' + Math.random();
     const computed = new Signal.Computed(() => false);
     const contribution: CommandContribution = {
@@ -62,6 +64,80 @@ describe('ContributionRegistry', () => {
     expect((contribution.disabled as { get(): boolean }).get()).toBe(false);
   });
 
+  it('getContributionVisible returns true when visible is omitted', () => {
+    const contribution: CommandContribution = {
+      label: 'Always visible',
+      command: 'test.cmd',
+    };
+    expect(getContributionVisible(contribution)).toBe(true);
+  });
+
+  it('getContributionVisible reflects Signal.Computed visible', () => {
+    const contribution: CommandContribution = {
+      label: 'Conditional',
+      command: 'test.cmd',
+      visible: new Signal.Computed(() => false),
+    };
+    expect(getContributionVisible(contribution)).toBe(false);
+  });
+
+  it('getContributionDisabled returns false when disabled is omitted', () => {
+    const contribution: CommandContribution = {
+      label: 'Enabled',
+      command: 'test.cmd',
+    };
+    expect(getContributionDisabled(contribution)).toBe(false);
+  });
+
+  it('getContributionDisabled reflects Signal.Computed disabled', () => {
+    const contribution: CommandContribution = {
+      label: 'Disabled',
+      command: 'test.cmd',
+      disabled: new Signal.Computed(() => true),
+    };
+    expect(getContributionDisabled(contribution)).toBe(true);
+  });
+
+  it('converts visible/disabled functions for any contribution', () => {
+    const target = 'test-non-command-' + Math.random();
+    const contribution: Contribution = {
+      label: 'Generic',
+      visible: () => false,
+      disabled: () => true,
+    };
+    contributionRegistry.registerContribution(target, contribution);
+    expect(contribution.visible).not.toBeInstanceOf(Function);
+    expect(contribution.disabled).not.toBeInstanceOf(Function);
+    expect((contribution.visible as { get(): boolean }).get()).toBe(false);
+    expect((contribution.disabled as { get(): boolean }).get()).toBe(true);
+  });
+
+  it('converts visible function to Signal.Computed', () => {
+    const target = 'test-visible-' + Math.random();
+    const contribution: CommandContribution = {
+      label: 'With visible',
+      command: 'test.cmd',
+      visible: () => false,
+    };
+    contributionRegistry.registerContribution(target, contribution);
+    expect(contribution.visible).toBeDefined();
+    expect(contribution.visible).not.toBeInstanceOf(Function);
+    expect((contribution.visible as { get(): boolean }).get()).toBe(false);
+  });
+
+  it('leaves existing Signal.Computed visible unchanged', () => {
+    const target = 'test-visible-computed-' + Math.random();
+    const computed = new Signal.Computed(() => true);
+    const contribution: CommandContribution = {
+      label: 'Already computed visible',
+      command: 'test.cmd',
+      visible: computed,
+    };
+    contributionRegistry.registerContribution(target, contribution);
+    expect(contribution.visible).toBe(computed);
+    expect((contribution.visible as { get(): boolean }).get()).toBe(true);
+  });
+
   describe('contribution target remapping', () => {
     it('getContributions(slotB) returns contribution registered to slotA when remapped to slotB', () => {
       const slotA = 'test-remap-a-' + Math.random();

Original file line number	Diff line number	Diff line change
`@@ -225,7 +225,7 @@ rootContext.put("commandRegistry", commandRegistry);`
`225`	`225`	`export interface RegisterOptions {`
`226`	`226`	`command: Command,`
`227`	`227`	`handler?: Handler,`
`228`		`- contribution?: Contribution & Partial<Pick<CommandContribution, 'disabled'>>`
	`228`	`+ contribution?: Contribution`
`229`	`229`	`}`
`230`	`230`
`231`	`231`	`export const registerAll = (options: RegisterOptions) => {`