feat(editor): Unify regular and trigger node creator panels (#5315)

* WIP: Merge TriggerHelperPanel with MainPanel

* WIP: Implement switching between views

* Remove logging

* WIP: Rework search

* Fix category toggling and search results display

* Fix node item description

* Sort actions based on the root view

* Adjust personalisation modal, make trigger canvas node round

* Linting fixes

* Fix filtering of API options

* Fix types and no result state

* Cleanup

* Linting fixes

* Adjust mode prop for node creator tracking

* Fix merging of core nodes and filtering of single placeholder actions

* Lint fixes

* Implement actions override, fix node creator view item spacing and increase click radius of trigger node icon

* Fix keyboard view navigation

* WIP: E2E Tests

* Address product review

* Minor fixes & cleanup

* Fix tests

* Some more test fixes

* Add specs to check actions and panels

* Update personalisation survey snapshot

packages/editor-ui/src/components/Node.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="node-wrapper"
+		:class="{ 'node-wrapper': true, 'node-wrapper--trigger': isTriggerNode }"
 		:style="nodePosition"
 		:id="nodeId"
 		data-test-id="canvas-node"
@@ -22,6 +22,9 @@
 				v-touch:start="touchStart"
 				v-touch:end="touchEnd"
 			>
+				<i class="trigger-icon">
+					<font-awesome-icon icon="bolt" size="lg" v-if="isTriggerNode" />
+				</i>
 				<div
 					v-if="!data.disabled"
 					:class="{ 'node-info-icon': true, 'shift-icon': shiftOutputCount }"
@@ -196,6 +199,7 @@ import { useWorkflowsStore } from '@/stores/workflows';
 import { useNDVStore } from '@/stores/ndv';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
 import { EnableNodeToggleCommand } from '@/models/history';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 export default mixins(
 	externalHooks,
@@ -208,6 +212,7 @@ export default mixins(
 	name: 'Node',
 	components: {
 		TitledList,
+		FontAwesomeIcon,
 		NodeIcon,
 	},
 	props: {
@@ -673,7 +678,6 @@ export default mixins(
 			border: 2px solid var(--color-foreground-xdark);
 			border-radius: var(--border-radius-large);
 			background-color: var(--color-background-xlight);
-
 			&.executing {
 				background-color: var(--color-primary-tint-3) !important;
 
@@ -793,6 +797,22 @@ export default mixins(
 			}
 		}
 	}
+	&--trigger .node-default .node-box {
+		border-radius: 32px 8px 8px 32px;
+	}
+	.trigger-icon {
+		position: absolute;
+		right: 100%;
+		top: 0;
+		bottom: 0;
+		margin: auto;
+		color: var(--color-primary);
+		align-items: center;
+		justify-content: center;
+		height: fit-content;
+		// Increase click radius of the bolt icon
+		padding: var(--spacing-2xs);
+	}
 }
 
 .select-background {
@@ -810,6 +830,10 @@ export default mixins(
 	top: -8px !important;
 	height: 116px;
 	width: 116px !important;
+
+	.node-wrapper--trigger & {
+		border-radius: 36px 8px 8px 36px;
+	}
 }
 
 .disabled-linethrough {