✨ Change the UI of the Nodes Panel (#1855)

* Add codex search properties to node types

* implement basic styles

* update header designs

* update node list designs

* add trigger icon

* refactor node creator list

* implement categories and subcategories

* fix up spacing

* add arrows

* implement navigatable list

* implement more of feature

* implement navigation

* add transitions

* fix lint issues

* fix overlay

* ⚡ Get and add codex categories

* fix up design

* update borders

* implement no-matches view

* fix preview bug

* add color to search

* clean up borders

* add comma

* Revert "Merge branch 'add-codex-data' of github.com:n8n-io/n8n into PROD-819-nodes-panel-redesign"

38b7d7ead19ab069f3f00a1ae6b6267eee55122a

* use new impl

* remove empty categories

* update scrolling, hide start node

* make scrollable

* remove text while subcategory panel is open

* fix up spacing

* fix lint issues

* update descriptions

* update path

* update images

* fix tags manager

* give min height to image

* gst

* update clear color

* update font size

* fix firefox spacing

* close on click outside

* add external link icon

* update iterator key

* add client side caching for images

* update caching header

* ⚡️ Add properties to codex for nodes panel (#1854)

* ⚡ Get and add codex categories

* ⚡ Add parens to evaluation + destructuring

* 🔥 Remove non-existing class reference

* ⚡ Add alias to codex property

* move constants

* 🔨 Rename CodexCategories to CodexData

* ✏️ Update getCodex documentation

* refactor and move

* refactor no results view

* more refactoring

* refactor subcategory panel

* more refactoring

* update text

* update no results view

* add miscellaneous to end of list

* address design feedback

* reimplement node search

* fix up clear

* update placeholder color

* impl transition

* focus on tab

* update spacing

* fix transition bug on start

* fix up x

* fix position

* build

* safari fix

* remove input changes

* css bleed issue with image

* update css value

* clean up

* simplify impl

* rename again

* rename again

* rename all

* fix hover bug

* remove keep alive

* delete icon

* update interface type

* refactor components

* update scss to module

* clean up impl

* clean up colors as vars

* fix indentation

* clean up scss

* clean up scss

* clean up scss

* clean up scss

* Clean up files

* update logic to be more efficient

* fix search bug

* update type

* remove unused

* clean up js

* update scrollable, border impl, transition

* fix simicolon

* build

* update search

* address max's comments

* change icon border radius

* change margin

* update icon size

* update icon size

* update slide transition out

* add comma

* remove full

* update trigger icon size

* fix image size

* address design feedback

* update external link icons

* address codacy issues

* support custom nodes without codex file

* address jan's feedback

* address Ben's comments

* add subcategory index

* open/close categories with arrow keys

* add lint comment

* Address latest comments

* ⚡ Minor changes

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>
Co-authored-by: Mutasem <mutdmour@gmail.com>
Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>

packages/editor-ui/src/components/NodeCreator/CreatorItem.vue

@@ -0,0 +1,57 @@
+<template functional>
+	<div
+		:class="{
+			container: true,
+			clickable: props.clickable,
+			active: props.active,
+		}"
+		@click="listeners['click']"
+		>
+		<CategoryItem
+			v-if="props.item.type === 'category'"
+			:item="props.item"
+		/>
+
+		<SubcategoryItem
+			v-else-if="props.item.type === 'subcategory'"
+			:item="props.item"
+		/>
+
+		<NodeItem
+			v-else-if="props.item.type === 'node'"
+			:nodeType="props.item.properties.nodeType"
+			:bordered="!props.lastNode"
+		></NodeItem>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import NodeItem from './NodeItem.vue';
+import CategoryItem from './CategoryItem.vue';
+import SubcategoryItem from './SubcategoryItem.vue';
+
+Vue.component('CategoryItem', CategoryItem);
+Vue.component('SubcategoryItem', SubcategoryItem);
+Vue.component('NodeItem', NodeItem);
+
+export default {
+	props: ['item', 'active', 'clickable', 'lastNode'],
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+	position: relative;
+	border-left: 2px solid transparent;
+
+	&:hover {
+		border-color: $--node-creator-item-hover-border-color;
+	}
+
+	&.active  {
+		border-color: $--color-primary !important;
+	}
+}
+
+</style>