mynode/packages/app-desktop/gui/NoteToolbar/NoteToolbar.tsx

import * as React from 'react';
import CommandService from '@joplin/lib/services/CommandService';
import ToolbarBase from '../ToolbarBase';
import { utils as pluginUtils } from '@joplin/lib/services/plugins/reducer';
import ToolbarButtonUtils, { ToolbarItem } from '@joplin/lib/services/commands/ToolbarButtonUtils';
import stateToWhenClauseContext from '../../services/commands/stateToWhenClauseContext';
import { connect } from 'react-redux';
import { buildStyle } from '@joplin/lib/theme';
import { _ } from '@joplin/lib/locale';
import getActivePluginEditorView from '@joplin/lib/services/plugins/utils/getActivePluginEditorView';
import { stateUtils } from '@joplin/lib/reducer';
import { AppState, AppWindowState } from '../../app.reducer';
import { chatAvailability } from '@joplin/lib/services/ai/availability';

interface NoteToolbarProps {
	themeId: number;
	style: React.CSSProperties;
	toolbarButtonInfos: ToolbarItem[];
	disabled: boolean;
}

function styles_(props: NoteToolbarProps) {
	return buildStyle('NoteToolbar', props.themeId, theme => {
		return {
			root: {
				...props.style,
				borderBottom: 'none',
				backgroundColor: theme.backgroundColor,
			},
		};
	});
}

function NoteToolbar(props: NoteToolbarProps) {
	const styles = styles_(props);
	return (
		<ToolbarBase
			style={styles.root}
			scrollable={false}
			items={props.toolbarButtonInfos}
			disabled={props.disabled}
			aria-label={_('Note')}
		/>
	);
}

const toolbarButtonUtils = new ToolbarButtonUtils(CommandService.instance());

interface ConnectProps {
	windowId: string;
}
const mapStateToProps = (state: AppState, ownProps: ConnectProps) => {
	const whenClauseContext = stateToWhenClauseContext(state, { windowId: ownProps.windowId });

	const { editorPlugin } = getActivePluginEditorView(state.pluginService.plugins, ownProps.windowId);
	const windowState = stateUtils.windowStateById(state, ownProps.windowId) as AppWindowState;

	const commands = [
		'showSpellCheckerMenu',
		'editAlarm',
		'toggleSideBar',
		'toggleVisiblePanes',
		'showNoteProperties',
	];

	// The hide setting only applies while chat is unavailable.
	if (chatAvailability().available || state.settings['ai.chat.showToolbarButton']) {
		commands.push('toggleAiChat');
	}

	// `toggleEditorPlugin` shows for plugin editors; we extend it to also
	// toggle the core whiteboard editor on whiteboard notes (see the command's
	// runtime). The button is the same eye icon either way.
	if (editorPlugin || windowState.activeNoteIsWhiteboard) commands.push('toggleEditorPlugin');

	return {
		toolbarButtonInfos: toolbarButtonUtils.commandsToToolbarButtons(commands
			.concat(pluginUtils.commandNamesFromViews(state.pluginService.plugins, 'noteToolbar')), whenClauseContext),
	};
};

export default connect(mapStateToProps)(NoteToolbar);