Toolbar System

/**
 * Basic toolbar widget for organizing toolbar items
 */
class Toolbar<T extends Widget = Widget> extends Widget {
  /**
   * Create a toolbar widget
   * @param options - Toolbar configuration options
   */
  constructor(options?: Toolbar.IOptions);
  
  /**
   * Get iterator of toolbar item names
   * @returns Iterator of item names
   */
  names(): IterableIterator<string>;
  
  /**
   * Add widget to toolbar with given name
   * @param name - Unique name for the item
   * @param widget - Widget to add
   * @returns true if added successfully
   */
  addItem(name: string, widget: T): boolean;
  
  /**
   * Insert widget at specific index
   * @param index - Position to insert at
   * @param name - Unique name for the item
   * @param widget - Widget to insert
   * @returns true if inserted successfully
   */
  insertItem(index: number, name: string, widget: T): boolean;
  
  /**
   * Insert widget after existing item
   * @param at - Name of existing item to insert after
   * @param name - Unique name for new item
   * @param widget - Widget to insert
   * @returns true if inserted successfully
   */
  insertAfter(at: string, name: string, widget: T): boolean;
  
  /**
   * Insert widget before existing item
   * @param at - Name of existing item to insert before
   * @param name - Unique name for new item
   * @param widget - Widget to insert
   * @returns true if inserted successfully
   */
  insertBefore(at: string, name: string, widget: T): boolean;
  
  /** Prevent focus when toolbar is clicked */
  noFocusOnClick: boolean;
}

namespace Toolbar {
  interface IOptions {
    /** Custom layout for the toolbar */
    layout?: Layout;
    /** Prevent focus on click */
    noFocusOnClick?: boolean;
  }
  
  interface IWidgetToolbar extends Widget {
    /** Optional toolbar property for widgets */
    toolbar?: Toolbar;
  }
  
  /**
   * Create a spacer item for toolbar layout
   * @returns Widget that acts as flexible spacer
   */
  function createSpacerItem(): Widget;
}

import { Toolbar, ToolbarButton } from '@jupyterlab/ui-components';
import { saveIcon, runIcon, stopIcon } from '@jupyterlab/ui-components';

// Basic toolbar creation
const toolbar = new Toolbar();
toolbar.addClass('my-toolbar');

// Add toolbar buttons
const saveButton = new ToolbarButton({
  icon: saveIcon,
  onClick: () => console.log('Save clicked'),
  tooltip: 'Save file'
});

const runButton = new ToolbarButton({
  icon: runIcon,
  onClick: () => console.log('Run clicked'),
  tooltip: 'Run code'
});

// Add items to toolbar
toolbar.addItem('save', saveButton);
toolbar.addItem('run', runButton);

// Add spacer for layout
const spacer = Toolbar.createSpacerItem();
toolbar.addItem('spacer', spacer);

// Insert item at specific position
const stopButton = new ToolbarButton({
  icon: stopIcon,
  onClick: () => console.log('Stop clicked'),
  tooltip: 'Stop execution'
});
toolbar.insertAfter('run', 'stop', stopButton);

// Control item visibility and ordering
for (const name of toolbar.names()) {
  console.log(`Toolbar item: ${name}`);
}

/**
 * Responsive toolbar widget with popup overflow handling
 */
class ReactiveToolbar extends Toolbar<Widget> {
  /**
   * Create a reactive toolbar
   * @param options - Toolbar configuration options
   */
  constructor(options?: Toolbar.IOptions);
  
  /** Popup opener for overflow items */
  readonly popupOpener: ToolbarPopupOpener;
}

import { ReactiveToolbar, ToolbarButton } from '@jupyterlab/ui-components';

// Create responsive toolbar
const responsiveToolbar = new ReactiveToolbar();
responsiveToolbar.addClass('responsive-toolbar');

// Add many items - overflow items will be moved to popup
const actions = [
  { name: 'new', icon: addIcon, tooltip: 'New file' },
  { name: 'open', icon: fileIcon, tooltip: 'Open file' },
  { name: 'save', icon: saveIcon, tooltip: 'Save file' },
  { name: 'cut', icon: cutIcon, tooltip: 'Cut' },
  { name: 'copy', icon: copyIcon, tooltip: 'Copy' },
  { name: 'paste', icon: pasteIcon, tooltip: 'Paste' },
  { name: 'undo', icon: undoIcon, tooltip: 'Undo' },
  { name: 'redo', icon: redoIcon, tooltip: 'Redo' }
];

actions.forEach(action => {
  const button = new ToolbarButton({
    icon: action.icon,
    tooltip: action.tooltip,
    onClick: () => console.log(`${action.name} clicked`)
  });
  responsiveToolbar.addItem(action.name, button);
});

// Access popup opener for customization
responsiveToolbar.popupOpener.widgetRequested.connect((sender, widget) => {
  console.log('Widget moved to popup:', widget);
});

/**
 * React component for toolbar buttons
 */
namespace ToolbarButtonComponent {
  interface IProps {
    /** Additional CSS class */
    className?: string;
    /** Dataset attributes */
    dataset?: DOMStringMap;
    /** Button label text */
    label?: string;
    /** Icon to display */
    icon?: LabIcon.IMaybeResolvable;
    /** Icon CSS class */
    iconClass?: string;
    /** Icon label for accessibility */
    iconLabel?: string;
    /** Tooltip text */
    tooltip?: string;
    /** Click handler */
    onClick?: () => void;
    /** Whether button is enabled */
    enabled?: boolean;
    /** Whether button is pressed/active */
    pressed?: boolean;
    /** Icon to show when pressed */
    pressedIcon?: LabIcon.IMaybeResolvable;
    /** Tooltip to show when pressed */
    pressedTooltip?: string;
    /** Tooltip to show when disabled */
    disabledTooltip?: string;
    /** Prevent focus on click */
    noFocusOnClick?: boolean;
    /** Translator for internationalization */
    translator?: ITranslator;
  }
}

/**
 * React toolbar button component
 * @param props - Button properties
 * @returns JSX button element
 */
function ToolbarButtonComponent(props: ToolbarButtonComponent.IProps): JSX.Element;

/**
 * Lumino widget wrapper for toolbar button
 */
class ToolbarButton extends ReactWidget {
  /**
   * Create toolbar button widget
   * @param props - Button properties
   */
  constructor(props?: ToolbarButtonComponent.IProps);
  
  /** Whether button is pressed */
  set pressed(value: boolean);
  get pressed(): boolean;
  
  /** Whether button is enabled */
  set enabled(value: boolean);
  get enabled(): boolean;
  
  /** Click handler function */
  set onClick(value: () => void);
  get onClick(): () => void;
}

/**
 * Add toolbar button CSS class to element
 * @param w - Widget to add class to
 */
function addToolbarButtonClass(w: Widget): void;

import { 
  ToolbarButton, 
  ToolbarButtonComponent,
  addToolbarButtonClass
} from '@jupyterlab/ui-components';
import { saveIcon, runIcon } from '@jupyterlab/ui-components';

// React toolbar button
function MyReactToolbar() {
  const [isRunning, setIsRunning] = useState(false);
  
  return (
    <div className="react-toolbar">
      <ToolbarButtonComponent
        icon={saveIcon}
        tooltip="Save file"
        onClick={() => handleSave()}
      />
      
      <ToolbarButtonComponent
        icon={runIcon}
        label="Run"
        tooltip={isRunning ? "Stop execution" : "Run code"}
        pressed={isRunning}
        pressedIcon={stopIcon}
        onClick={() => setIsRunning(!isRunning)}
      />
      
      <ToolbarButtonComponent
        icon={deleteIcon}
        tooltip="Delete item"
        enabled={false}
        disabledTooltip="No item selected"
      />
    </div>
  );
}

// Lumino toolbar button widget
const saveButton = new ToolbarButton({
  icon: saveIcon,
  tooltip: 'Save current file',
  onClick: () => {
    console.log('Saving file...');
    // Perform save operation
  }
});

// Toggle button state
const toggleButton = new ToolbarButton({
  icon: runIcon,
  tooltip: 'Toggle feature',
  pressed: false
});

toggleButton.onClick = () => {
  toggleButton.pressed = !toggleButton.pressed;
  console.log('Feature toggled:', toggleButton.pressed);
};

// Disable/enable button
function setButtonEnabled(enabled: boolean) {
  saveButton.enabled = enabled;
}

// Add styling
addToolbarButtonClass(saveButton);

/**
 * React component for command-based toolbar buttons
 */
namespace CommandToolbarButtonComponent {
  interface IProps {
    /** Command registry instance */
    commands: CommandRegistry;
    /** Command ID to execute */
    id: string;
    /** Arguments to pass to command */
    args?: ReadonlyJSONObject;
    /** Override icon from command */
    icon?: LabIcon;
    /** Override label from command */
    label?: string | CommandRegistry.CommandFunc<string>;
    /** Override caption from command */
    caption?: string;
    /** Prevent focus on click */
    noFocusOnClick?: boolean;
  }
}

/**
 * React command toolbar button component
 * @param props - Command button properties
 * @returns JSX button element
 */
function CommandToolbarButtonComponent(props: CommandToolbarButtonComponent.IProps): JSX.Element;

/**
 * Lumino widget wrapper for command toolbar button
 */
class CommandToolbarButton extends ReactWidget {
  /**
   * Create command toolbar button widget
   * @param props - Command button properties
   */
  constructor(props: CommandToolbarButtonComponent.IProps);
  
  /** Command ID this button executes */
  get commandId(): string;
}

/**
 * Add command toolbar button CSS class to element
 * @param w - Widget to add class to
 */
function addCommandToolbarButtonClass(w: Widget): void;

import { 
  CommandToolbarButton,
  CommandToolbarButtonComponent,
  addCommandToolbarButtonClass
} from '@jupyterlab/ui-components';
import { CommandRegistry } from '@lumino/commands';
import { saveIcon, runIcon } from '@jupyterlab/ui-components';

// Set up command registry
const commands = new CommandRegistry();

commands.addCommand('file:save', {
  label: 'Save File',
  icon: saveIcon,
  execute: () => {
    console.log('Executing save command');
    return saveFile();
  }
});

commands.addCommand('code:run', {
  label: 'Run Code',
  icon: runIcon,
  execute: (args) => {
    console.log('Running with args:', args);
    return runCode(args?.target);
  }
});

// React command button
function CommandToolbar({ commands }: { commands: CommandRegistry }) {
  return (
    <div className="command-toolbar">
      <CommandToolbarButtonComponent
        commands={commands}
        id="file:save"
      />
      
      <CommandToolbarButtonComponent
        commands={commands}
        id="code:run"
        args={{ target: 'current-cell' }}
        label="Run Cell"
      />
    </div>
  );
}

// Lumino command button widget
const saveCommandButton = new CommandToolbarButton({
  commands,
  id: 'file:save'
});

const runCommandButton = new CommandToolbarButton({
  commands,
  id: 'code:run',
  args: { target: 'all-cells' },
  caption: 'Execute all code cells'
});

// Add to toolbar
const toolbar = new Toolbar();
toolbar.addItem('save-cmd', saveCommandButton);
toolbar.addItem('run-cmd', runCommandButton);

// Add styling
addCommandToolbarButtonClass(saveCommandButton);
addCommandToolbarButtonClass(runCommandButton);

// Check command availability
if (commands.hasCommand('file:save')) {
  console.log('Save command is available');
}

// Toolbar CSS classes are automatically applied
// Key classes include:

// .jp-Toolbar - Main toolbar container
// .jp-Toolbar-item - Individual toolbar items  
// .jp-Toolbar-spacer - Flexible spacer elements
// .jp-ToolbarButton - Standard toolbar buttons
// .jp-ToolbarButton-label - Button label text
// .jp-mod-disabled - Disabled state modifier
// .jp-mod-pressed - Pressed/active state modifier

import { Toolbar, ToolbarButton } from '@jupyterlab/ui-components';

// Custom styled toolbar
const styledToolbar = new Toolbar();
styledToolbar.addClass('my-custom-toolbar');

// CSS for custom toolbar styling
const customCSS = `
.my-custom-toolbar {
  background: var(--jp-layout-color2);
  border-bottom: 1px solid var(--jp-border-color1);
  padding: 4px;
}

.my-custom-toolbar .jp-ToolbarButton {
  margin: 0 2px;
  border-radius: 3px;
}

.my-custom-toolbar .jp-ToolbarButton:hover {
  background: var(--jp-layout-color3);
}

.my-custom-toolbar .jp-Toolbar-spacer {
  flex: 1;
}
`;

// Apply custom styles
const styleSheet = document.createElement('style');
styleSheet.textContent = customCSS;
document.head.appendChild(styleSheet);

// Create grouped toolbar sections
function createGroupedToolbar() {
  const toolbar = new Toolbar();
  
  // File operations group
  const fileButtons = ['new', 'open', 'save'];
  fileButtons.forEach(name => {
    const button = new ToolbarButton({
      icon: getIconForAction(name),
      tooltip: `${name} file`
    });
    button.addClass(`file-action-${name}`);
    toolbar.addItem(`file-${name}`, button);
  });
  
  // Add separator spacer
  const separator = Toolbar.createSpacerItem();
  separator.addClass('toolbar-separator');
  toolbar.addItem('separator-1', separator);
  
  // Edit operations group
  const editButtons = ['cut', 'copy', 'paste'];
  editButtons.forEach(name => {
    const button = new ToolbarButton({
      icon: getIconForAction(name),
      tooltip: `${name} selection`
    });
    button.addClass(`edit-action-${name}`);
    toolbar.addItem(`edit-${name}`, button);
  });
  
  return toolbar;
}