Add the Show Header command to the command palette

[jtpio]

Problem

The Show Header command is available as a menu item:

show-header-command.mp4

However it is not available in the command palette.

Proposed Solution

The plugin adding the command is defined here:

notebook/packages/application-extension/src/index.ts

Lines 424 to 463 in 9e81700

	/**
	* Plugin to toggle the top header visibility.
	*/
	const topVisibility: JupyterFrontEndPlugin<void> = {
	id: '@retrolab/application-extension:top',
	requires: [IRetroShell],
	optional: [IMainMenu],
	activate: (
	app: JupyterFrontEnd<JupyterFrontEnd.IShell>,
	retroShell: IRetroShell,
	menu: IMainMenu | null
	) => {
	const top = retroShell.top;
	app.commands.addCommand(CommandIDs.toggleTop, {
	label: 'Show Header',
	execute: () => {
	top.setHidden(top.isVisible);
	},
	isToggled: () => top.isVisible
	});
	if (menu) {
	menu.viewMenu.addGroup([{ command: CommandIDs.toggleTop }], 2);
	}
	const onChanged = (): void => {
	if (app.format === 'desktop') {
	retroShell.expandTop();
	} else {
	retroShell.collapseTop();
	}
	};
	// listen on format change (mobile and desktop) to make the view more compact
	app.formatChanged.connect(onChanged);
	onChanged();
	},
	autoStart: true
	};

We'll need to add the optional ICommandPalette to add the command to the palette if available.

As an example implementation, the command to toggle zen mode is added to the palette here:

notebook/packages/application-extension/src/index.ts

Lines 526 to 528 in 9e81700

	if (palette) {
	palette.addItem({ command: CommandIDs.toggleZen, category: 'Mode' });
	}

[jeewonkoo]

Hello, I found this issue on https://ovio.org/projects and would love to contribute! I am new to helping Github open source but have few years of coding experience. Please let me know!

[jtpio]

Thanks @jeewonkoo!

The first step would be to fork the repository and follow the contributing guide to get the local environment up and running: https://github.com/jupyter/notebook/blob/main/CONTRIBUTING.md. Up to being able to open the application with jupyter notebook.

And then follow the similar code as hinted in the top comment: #6401 (comment)

But located in this plugin:

notebook/packages/application-extension/src/index.ts

Lines 478 to 545 in ec4ce20

	/**
	* Plugin to toggle the top header visibility.
	*/
	const topVisibility: JupyterFrontEndPlugin<void> = {
	id: '@jupyter-notebook/application-extension:top',
	requires: [INotebookShell, ITranslator],
	optional: [ISettingRegistry],
	activate: (
	app: JupyterFrontEnd<JupyterFrontEnd.IShell>,
	notebookShell: INotebookShell,
	translator: ITranslator,
	settingRegistry: ISettingRegistry | null
	) => {
	const trans = translator.load('notebook');
	const top = notebookShell.top;
	const pluginId = topVisibility.id;
	app.commands.addCommand(CommandIDs.toggleTop, {
	label: trans.__('Show Header'),
	execute: () => {
	top.setHidden(top.isVisible);
	if (settingRegistry) {
	void settingRegistry.set(pluginId, 'visible', top.isVisible);
	}
	},
	isToggled: () => top.isVisible
	});
	let settingsOverride = false;
	if (settingRegistry) {
	const loadSettings = settingRegistry.load(pluginId);
	const updateSettings = (settings: ISettingRegistry.ISettings): void => {
	const visible = settings.get('visible').composite;
	if (settings.user.visible !== undefined) {
	settingsOverride = true;
	top.setHidden(!visible);
	}
	};
	Promise.all([loadSettings, app.restored])
	.then(([settings]) => {
	updateSettings(settings);
	settings.changed.connect(settings => {
	updateSettings(settings);
	});
	})
	.catch((reason: Error) => {
	console.error(reason.message);
	});
	}
	const onChanged = (): void => {
	if (settingsOverride) {
	return;
	}
	if (app.format === 'desktop') {
	notebookShell.expandTop();
	} else {
	notebookShell.collapseTop();
	}
	};
	// listen on format change (mobile and desktop) to make the view more compact
	app.formatChanged.connect(onChanged);
	},
	autoStart: true
	};

That would mean adding ICommandPalette to the list of optional:

notebook/packages/application-extension/src/index.ts

Line 484 in ec4ce20

optional: [ISettingRegistry],

And then the code to add the command to the palette:

if (palette) { 
   palette.addItem({ command: CommandIDs.toggleTop }); 
}

Don't hesitate to open a pull request early, even if it's not finished or ready yet. Thanks!

[jeewonkoo]

Sounds good! I will work on it.

[jtpio]

Fixed by #6415, thanks @jeewonkoo!