command bar component in design system

packages/design-system/src/components/CommandBar/CommandBar.stories.ts

@@ -0,0 +1,41 @@
+import type { StoryFn } from '@storybook/vue3';
+
+import CommandBar from './CommandBar.vue';
+
+export default {
+	title: 'Modules/CommandBar',
+	component: CommandBar,
+	argTypes: {},
+};
+
+const Template: StoryFn = (args, { argTypes }) => ({
+	setup: () => ({ args }),
+	props: Object.keys(argTypes),
+	components: {
+		CommandBar,
+	},
+	template: '<CommandBar v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	hotkeys: [
+		{
+			id: 'Add node',
+			title: 'Add node',
+			section: 'Nodes',
+			parent: null,
+		},
+		{
+			id: 'Open node',
+			title: 'Open node',
+			section: 'Nodes',
+			parent: null,
+		},
+		{
+			id: 'Add template 1',
+			title: 'Add template 1',
+			section: 'Templates',
+		},
+	],
+};

packages/design-system/src/components/CommandBar/CommandBar.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import 'ninja-keys';
+import type { INinjaAction } from 'ninja-keys/dist/interfaces/ininja-action';
+
+interface Props {
+	hotkeys: INinjaAction[];
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+	<ninja-keys :data="props.hotkeys" :no-auto-load-md-icons="true"></ninja-keys>
+</template>
+
+<style scoped>
+ninja-keys {
+	--ninja-z-index: 1000;
+	--ninja-accent-color: var(--color-primary);
+	--ninja-actions-height: 400px;
+	--ninja-modal-background: var(--color-node-background);
+	--ninja-secondary-background-color: var(--color-background-base);
+	--ninja-secondary-text-color: var(--color-text);
+	--ninja-text-color: var(--color-text);
+	--ninja-accent-color: var(--color-primary);
+	--ninja-selected-background: var(--color-node-executing-background);
+	--ninja-separate-border: 1px solid var(--color-foreground-base);
+	--ninja-footer-background: var(--color-background-light);
+	--ninja-overflow-background: rgba(0, 0, 0, 0.5);
+	--ninja-font-size: var(--font-size-s);
+}
+
+ninja-keys::part(ninja-action) {
+	line-height: var(--font-line-height-loose);
+}
+</style>

packages/design-system/src/components/CommandBar/index.ts

@@ -0,0 +1,3 @@
+import CommandBar from './CommandBar.vue';
+
+export default CommandBar;

packages/design-system/src/components/index.ts

@@ -54,3 +54,4 @@ export { default as N8nUserSelect } from './N8nUserSelect';
 export { default as N8nUsersList } from './N8nUsersList';
 export { default as N8nResizeObserver } from './ResizeObserver';
 export { N8nKeyboardShortcut } from './N8nKeyboardShortcut';
+export { default as N8nCommandBar } from './CommandBar';

packages/editor-ui/src/views/NodeView.v2.vue

@@ -100,7 +100,7 @@ import { nodeViewEventBus } from '@/event-bus';
 import * as NodeViewUtils from '@/utils/nodeViewUtils';
 import { tryToParseNumber } from '@/utils/typesUtils';
 import { useTemplatesStore } from '@/stores/templates.store';
-import { createEventBus } from 'n8n-design-system';
+import { createEventBus, N8nCommandBar } from 'n8n-design-system';
 import type { PinDataSource } from '@/composables/usePinnedData';
 import { useClipboard } from '@/composables/useClipboard';
 import { useBeforeUnload } from '@/composables/useBeforeUnload';
@@ -1802,11 +1802,7 @@ const subworkflowCommands = computed<NinjaKeysCommand[]>(() => {
 			-->
 		</Suspense>
 		<Teleport to="body">
-			<ninja-keys
-				:class="uiStore.appliedTheme"
-				:data="hotkeys"
-				:no-auto-load-md-icons="true"
-			></ninja-keys>
+			<N8nCommandBar :hotkeys="hotkeys" />
 		</Teleport>
 	</WorkflowCanvas>
 </template>
@@ -1837,14 +1833,4 @@ const subworkflowCommands = computed<NinjaKeysCommand[]>(() => {
 		}
 	}
 }
-
-ninja-keys {
-	--ninja-z-index: 1000;
-	--ninja-accent-color: var(--color-primary);
-	--ninja-actions-height: 400px;
-}
-
-ninja-keys::part(ninja-action) {
-	line-height: var(--font-line-height-loose);
-}
 </style>