N8N-2679 Templates search

packages/design-system/.storybook/font-awesome-icons.js

@@ -16,6 +16,8 @@ import {
 	faCalendar,
 	faCheck,
 	faChevronDown,
+	faChevronLeft,
+	faChevronRight,
 	faChevronUp,
 	faCode,
 	faCodeBranch,
@@ -99,6 +101,8 @@ library.add(faBug);
 library.add(faCalendar);
 library.add(faCheck);
 library.add(faChevronDown);
+library.add(faChevronLeft);
+library.add(faChevronRight);
 library.add(faChevronUp);
 library.add(faCode);
 library.add(faCodeBranch);

packages/editor-ui/package.json

@@ -29,6 +29,7 @@
     "n8n-design-system": "~0.9.0",
     "timeago.js": "^4.0.2",
     "v-click-outside": "^3.1.2",
+    "vue-agile": "^2.0.0",
     "vue-fragment": "^1.5.2",
     "vue-i18n": "^8.26.7"
   },

packages/editor-ui/src/Interface.ts

@@ -746,3 +746,65 @@ export interface IBounds {
 	maxX: number;
 	maxY: number;
 }
+
+export interface IZoomConfig {
+	scale: number;
+	offset: XYPosition;
+}
+
+export interface ISearchPayload {
+	data: ISearchResults;
+}
+
+export interface ISearchResults{
+	categories: ITemplateCategory[];
+	collections: ITemplateCollection[];
+	totalWorkflows: number;
+	workflows: IN8nTemplate[];
+}
+
+export interface ITemplateCategory {
+	id: string;
+	name: string;
+	selected?: boolean;
+}
+
+export interface ITemplateCollection {
+	id: string;
+	name: string;
+	workflowsCount: number;
+	nodes: ITemplateNode[];
+}
+
+export interface ITemplateNode {
+	displayName: string;
+	name: string;
+	icon: string;
+	defaults: {
+		color: string;
+	};
+	iconData: {
+		fileBuffer: string,
+		type: string,
+	};
+
+}
+
+export interface IN8nTemplate {
+	id: string;
+	name: string;
+	createdAt: string;
+	description: string;
+	nodes: ITemplateNode[];
+	totalViews: number;
+	user: {
+		username: string;
+	};
+}
+
+export interface ITemplateState {
+	template: {};
+	categories: ITemplateCategory[];
+	collections: ITemplateCollection[];
+	workflows: IN8nTemplate[];
+}