feat: Initial clean release of CHM

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

@@ -0,0 +1,82 @@
+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);